@testgorilla/tgo-ui 10.4.0 → 11.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-ai-feedback.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete-v2.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-autocomplete.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs +2 -1
- package/fesm2022/testgorilla-tgo-ui-components-core.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs +173 -155
- package/fesm2022/testgorilla-tgo-ui-components-navbar.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-prompt.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs +8 -4
- package/fesm2022/testgorilla-tgo-ui-components-side-sheet.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs +16 -3
- package/fesm2022/testgorilla-tgo-ui-components-tag.mjs.map +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs +1 -1
- package/fesm2022/testgorilla-tgo-ui-components-write-with-ai.mjs.map +1 -1
- package/mcp/catalog.json +1 -1
- package/package.json +1 -1
- package/types/testgorilla-tgo-ui-components-navbar.d.ts +82 -72
- package/types/testgorilla-tgo-ui-components-side-sheet.d.ts +6 -0
- package/types/testgorilla-tgo-ui-components-tag.d.ts +14 -1
|
@@ -193,7 +193,7 @@ class AiFeedbackComponent {
|
|
|
193
193
|
this.resetPanelState();
|
|
194
194
|
}
|
|
195
195
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AiFeedbackComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
196
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AiFeedbackComponent, isStandalone: true, selector: "ui-ai-feedback", inputs: { positiveConfig: { classPropertyName: "positiveConfig", publicName: "positiveConfig", isSignal: true, isRequired: false, transformFunction: null }, negativeConfig: { classPropertyName: "negativeConfig", publicName: "negativeConfig", isSignal: true, isRequired: false, transformFunction: null }, skipPanelForPositive: { classPropertyName: "skipPanelForPositive", publicName: "skipPanelForPositive", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, isRatingDisabled: { classPropertyName: "isRatingDisabled", publicName: "isRatingDisabled", isSignal: true, isRequired: false, transformFunction: null }, enableAutoEmit: { classPropertyName: "enableAutoEmit", publicName: "enableAutoEmit", isSignal: true, isRequired: false, transformFunction: null }, isPositiveFeedback: { classPropertyName: "isPositiveFeedback", publicName: "isPositiveFeedback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPositiveFeedback: "isPositiveFeedbackChange", selectionChange: "selectionChange", feedbackSubmitted: "feedbackSubmitted", feedbackCancelled: "feedbackCancelled", feedbackChanged: "feedbackChanged" }, ngImport: i0, template: "<div class=\"ai-feedback-wrapper\">\n <div class=\"ai-feedback\" [attr.aria-label]=\"translationContext + 'TITLE' | uiTranslate\" role=\"group\">\n <ui-ai-caveat [applicationTheme]=\"applicationTheme()\"></ui-ai-caveat>\n\n <div class=\"ai-feedback-buttons-section\">\n @if (isRatingDisabled()) {\n <div class=\"ai-feedback-saved\">\n <span class=\"ai-feedback-saved-text\">{{ translationContext + 'RATING_SAVED' | uiTranslate | async }}</span>\n <ui-icon\n [name]=\"isPositiveFeedback() ? 'Thumb-up-filled' : 'Thumb-down-filled'\"\n [filled]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n [color]=\"'gray'\"\n />\n </div>\n } @else {\n <span class=\"ai-feedback-label\">{{ translationContext + 'TITLE' | uiTranslate | async }}</span>\n\n <div\n class=\"ai-feedback-buttons\"\n role=\"group\"\n [attr.aria-expanded]=\"showPanel()\"\n [attr.aria-controls]=\"showPanel() ? 'feedback-panel' : null\"\n >\n <ui-button\n class=\"ai-feedback-button-positive\"\n data-testid=\"ai-feedback-button-positive\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-up-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === true\"\n (buttonClickEvent)=\"onSelectionChange(true)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n\n <ui-button\n data-testid=\"ai-feedback-button-negative\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-down-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === false\"\n (buttonClickEvent)=\"onSelectionChange(false)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n </div>\n }\n </div>\n </div>\n\n @if (showPanel()) {\n @let panelTitle =\n activeConfig()?.title ??\n (panelType() | memoizeFunc: getDefaultPanelTitleTranslation : this | uiTranslate | async);\n\n <ui-card\n id=\"feedback-panel\"\n class=\"feedback-panel\"\n [class.arrow-left]=\"arrowPosition() === 'left'\"\n [class.arrow-right]=\"arrowPosition() === 'right'\"\n [applicationTheme]=\"applicationTheme()\"\n [size]=\"isMobile() ? 'small' : 'medium'\"\n role=\"region\"\n [attr.aria-label]=\"panelTitle\"\n [@slideDown]\n >\n <div class=\"feedback-panel-arrow\"></div>\n\n <div class=\"feedback-panel-content\">\n <div class=\"feedback-panel-title-container\">\n <h4 class=\"feedback-panel-title\">\n {{ panelTitle }}\n </h4>\n\n <ui-button\n [justIcon]=\"true\"\n [iconName]=\"'Close-filled'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Close feedback panel'\"\n variant=\"icon-button\"\n (buttonClickEvent)=\"closePanel()\"\n >\n </ui-button>\n </div>\n\n @if (variant() === 'panel' && activeConfig()?.options && activeConfig()!.options!.length > 0) {\n <div class=\"feedback-options\">\n @for (option of activeConfig()?.options; track option.id) {\n <ui-tag\n [label]=\"option.label\"\n [isSelected]=\"isOptionSelected(option.id)\"\n [showIconWhenSelected]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n (press)=\"toggleOption(option.id)\"\n >\n </ui-tag>\n }\n </div>\n }\n\n @if (showOtherField()) {\n <ui-field\n class=\"feedback-field\"\n type=\"text\"\n [label]=\"\n activeConfig()?.otherPlaceholder ?? (translationContext + 'OTHER_PLACEHOLDER' | uiTranslate | async) ?? ''\n \"\n [formControl]=\"otherTextControl\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [showBottomContent]=\"false\"\n >\n </ui-field>\n }\n\n <div class=\"feedback-submit-container\">\n <ui-button\n [label]=\"(translationContext + 'SUBMIT' | uiTranslate | async) || ''\"\n [disabled]=\"isSubmitDisabled()\"\n [size]=\"'small'\"\n [fullWidth]=\"isMobile()\"\n (buttonClickEvent)=\"onSubmit()\"\n variant=\"primary\"\n >\n </ui-button>\n </div>\n </div>\n </ui-card>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ai-feedback-wrapper{position:relative}.ai-feedback{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:16px;padding-right:4px}@media(max-width:600px){.ai-feedback{flex-wrap:wrap}}.ai-feedback-buttons-section{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;color:#666}@media(max-width:600px){.ai-feedback-buttons-section{flex:1 0 100%;justify-content:space-between}}.ai-feedback-buttons{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.ai-feedback-button-positive{margin-right:8px}.ai-feedback-saved{display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.ai-feedback-saved-text{font-size:12px;color:#666}.feedback-panel{display:block;margin-top:16px}.feedback-panel-arrow{position:absolute;top:-8px;width:16px;height:16px;background:inherit;border-left:1px solid;border-top:1px solid;border-color:inherit;transform:rotate(45deg);transition:right .2s ease-out}.feedback-panel.arrow-left .feedback-panel-arrow{right:40px}.feedback-panel.arrow-right .feedback-panel-arrow{right:8px}.feedback-panel-content{position:relative}.feedback-panel-title-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.feedback-panel-title{font-size:16px;font-weight:600;color:#242424}.feedback-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.feedback-field{margin-bottom:16px}.feedback-submit-container{display:flex;justify-content:flex-end}@media(max-width:600px){.feedback-submit-container{display:block}}\n"], dependencies: [{ kind: "component", type: AiCaveatComponent, selector: "ui-ai-caveat", inputs: ["applicationTheme"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CardComponent, selector: "ui-card", inputs: ["size", "sizeVariant", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus"], outputs: ["cardSelected"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["isSelectedChange", "close", "press"] }, { kind: "ngmodule", type: FieldComponentModule }, { kind: "component", type: i2.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }], animations: [
|
|
196
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AiFeedbackComponent, isStandalone: true, selector: "ui-ai-feedback", inputs: { positiveConfig: { classPropertyName: "positiveConfig", publicName: "positiveConfig", isSignal: true, isRequired: false, transformFunction: null }, negativeConfig: { classPropertyName: "negativeConfig", publicName: "negativeConfig", isSignal: true, isRequired: false, transformFunction: null }, skipPanelForPositive: { classPropertyName: "skipPanelForPositive", publicName: "skipPanelForPositive", isSignal: true, isRequired: false, transformFunction: null }, applicationTheme: { classPropertyName: "applicationTheme", publicName: "applicationTheme", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, isRatingDisabled: { classPropertyName: "isRatingDisabled", publicName: "isRatingDisabled", isSignal: true, isRequired: false, transformFunction: null }, enableAutoEmit: { classPropertyName: "enableAutoEmit", publicName: "enableAutoEmit", isSignal: true, isRequired: false, transformFunction: null }, isPositiveFeedback: { classPropertyName: "isPositiveFeedback", publicName: "isPositiveFeedback", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isPositiveFeedback: "isPositiveFeedbackChange", selectionChange: "selectionChange", feedbackSubmitted: "feedbackSubmitted", feedbackCancelled: "feedbackCancelled", feedbackChanged: "feedbackChanged" }, ngImport: i0, template: "<div class=\"ai-feedback-wrapper\">\n <div class=\"ai-feedback\" [attr.aria-label]=\"translationContext + 'TITLE' | uiTranslate\" role=\"group\">\n <ui-ai-caveat [applicationTheme]=\"applicationTheme()\"></ui-ai-caveat>\n\n <div class=\"ai-feedback-buttons-section\">\n @if (isRatingDisabled()) {\n <div class=\"ai-feedback-saved\">\n <span class=\"ai-feedback-saved-text\">{{ translationContext + 'RATING_SAVED' | uiTranslate | async }}</span>\n <ui-icon\n [name]=\"isPositiveFeedback() ? 'Thumb-up-filled' : 'Thumb-down-filled'\"\n [filled]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n [color]=\"'gray'\"\n />\n </div>\n } @else {\n <span class=\"ai-feedback-label\">{{ translationContext + 'TITLE' | uiTranslate | async }}</span>\n\n <div\n class=\"ai-feedback-buttons\"\n role=\"group\"\n [attr.aria-expanded]=\"showPanel()\"\n [attr.aria-controls]=\"showPanel() ? 'feedback-panel' : null\"\n >\n <ui-button\n class=\"ai-feedback-button-positive\"\n data-testid=\"ai-feedback-button-positive\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-up-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === true\"\n (buttonClickEvent)=\"onSelectionChange(true)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n\n <ui-button\n data-testid=\"ai-feedback-button-negative\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-down-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === false\"\n (buttonClickEvent)=\"onSelectionChange(false)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n </div>\n }\n </div>\n </div>\n\n @if (showPanel()) {\n @let panelTitle =\n activeConfig()?.title ??\n (panelType() | memoizeFunc: getDefaultPanelTitleTranslation : this | uiTranslate | async);\n\n <ui-card\n id=\"feedback-panel\"\n class=\"feedback-panel\"\n [class.arrow-left]=\"arrowPosition() === 'left'\"\n [class.arrow-right]=\"arrowPosition() === 'right'\"\n [applicationTheme]=\"applicationTheme()\"\n [size]=\"isMobile() ? 'small' : 'medium'\"\n role=\"region\"\n [attr.aria-label]=\"panelTitle\"\n [@slideDown]\n >\n <div class=\"feedback-panel-arrow\"></div>\n\n <div class=\"feedback-panel-content\">\n <div class=\"feedback-panel-title-container\">\n <h4 class=\"feedback-panel-title\">\n {{ panelTitle }}\n </h4>\n\n <ui-button\n [justIcon]=\"true\"\n [iconName]=\"'Close-filled'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Close feedback panel'\"\n variant=\"icon-button\"\n (buttonClickEvent)=\"closePanel()\"\n >\n </ui-button>\n </div>\n\n @if (variant() === 'panel' && activeConfig()?.options && activeConfig()!.options!.length > 0) {\n <div class=\"feedback-options\">\n @for (option of activeConfig()?.options; track option.id) {\n <ui-tag\n [label]=\"option.label\"\n [isSelected]=\"isOptionSelected(option.id)\"\n [showIconWhenSelected]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n (press)=\"toggleOption(option.id)\"\n >\n </ui-tag>\n }\n </div>\n }\n\n @if (showOtherField()) {\n <ui-field\n class=\"feedback-field\"\n type=\"text\"\n [label]=\"\n activeConfig()?.otherPlaceholder ?? (translationContext + 'OTHER_PLACEHOLDER' | uiTranslate | async) ?? ''\n \"\n [formControl]=\"otherTextControl\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [showBottomContent]=\"false\"\n >\n </ui-field>\n }\n\n <div class=\"feedback-submit-container\">\n <ui-button\n [label]=\"(translationContext + 'SUBMIT' | uiTranslate | async) || ''\"\n [disabled]=\"isSubmitDisabled()\"\n [size]=\"'small'\"\n [fullWidth]=\"isMobile()\"\n (buttonClickEvent)=\"onSubmit()\"\n variant=\"primary\"\n >\n </ui-button>\n </div>\n </div>\n </ui-card>\n }\n</div>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}.ai-feedback-wrapper{position:relative}.ai-feedback{display:flex;flex-flow:row nowrap;align-items:center;justify-content:space-between;gap:16px;padding-right:4px}@media(max-width:600px){.ai-feedback{flex-wrap:wrap}}.ai-feedback-buttons-section{display:flex;flex-flow:row nowrap;align-items:center;gap:8px;color:#666}@media(max-width:600px){.ai-feedback-buttons-section{flex:1 0 100%;justify-content:space-between}}.ai-feedback-buttons{display:flex;flex-flow:row nowrap;align-items:center;justify-content:center}.ai-feedback-button-positive{margin-right:8px}.ai-feedback-saved{display:flex;flex-flow:row nowrap;align-items:center;gap:8px}.ai-feedback-saved-text{font-size:12px;color:#666}.feedback-panel{display:block;margin-top:16px}.feedback-panel-arrow{position:absolute;top:-8px;width:16px;height:16px;background:inherit;border-left:1px solid;border-top:1px solid;border-color:inherit;transform:rotate(45deg);transition:right .2s ease-out}.feedback-panel.arrow-left .feedback-panel-arrow{right:40px}.feedback-panel.arrow-right .feedback-panel-arrow{right:8px}.feedback-panel-content{position:relative}.feedback-panel-title-container{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.feedback-panel-title{font-size:16px;font-weight:600;color:#242424}.feedback-options{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}.feedback-field{margin-bottom:16px}.feedback-submit-container{display:flex;justify-content:flex-end}@media(max-width:600px){.feedback-submit-container{display:block}}\n"], dependencies: [{ kind: "component", type: AiCaveatComponent, selector: "ui-ai-caveat", inputs: ["applicationTheme"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i1.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "component", type: ButtonComponent, selector: "ui-button", inputs: ["size", "variant", "label", "iconPosition", "justIcon", "iconName", "disabled", "loading", "loadingWithLabel", "fullWidth", "url", "urlTarget", "value", "tooltip", "isPremium", "type", "companyColor", "buttonBadgeConfig", "applicationTheme", "disabledScaleOnClick", "ariaLabel", "ariaExpanded", "ariaControls", "ariaPressed", "ariaRequired", "ariaLabelledby", "ariaDescribedby", "preventDefault", "hasBackground", "tooltipPosition", "role", "iconFilled"], outputs: ["buttonClickEvent", "buttonHoverEvent"] }, { kind: "component", type: CardComponent, selector: "ui-card", inputs: ["size", "sizeVariant", "variant", "applicationTheme", "errors", "errorsSize", "selected", "allowSelect", "allowFocus"], outputs: ["cardSelected"] }, { kind: "component", type: TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "pinnedBackground", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["isSelectedChange", "close", "press"] }, { kind: "ngmodule", type: FieldComponentModule }, { kind: "component", type: i2.FieldComponent, selector: "ui-field", inputs: ["fullWidth", "fullHeight", "label", "labelHtml", "labelIcon", "fieldName", "placeholder", "id", "value", "badgeVariant", "errors", "disabled", "required", "readOnly", "hintMessage", "type", "updateOnBlur", "allowOnlyDigits", "isAutocompleteOff", "allowNegative", "showBottomContent", "applicationTheme", "ariaLabel", "loading", "isValid", "maxCharacters", "trimOnBlur", "trimOnSubmit", "maxRows", "hasTextAreaCounter", "hideBuiltInErrors", "hideLabelInErrors", "max", "min", "textareaHeight", "borderless", "autosizableTextarea", "isAIVariant", "ariaLabelledby", "ariaDescribedby", "hasError"], outputs: ["validateEvent", "fieldBlur"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i3.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: MemoizeFuncPipe, name: "memoizeFunc" }], animations: [
|
|
197
197
|
trigger('slideDown', [
|
|
198
198
|
transition(':enter', [
|
|
199
199
|
style({ height: 0, opacity: 0, overflow: 'hidden' }),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"testgorilla-tgo-ui-components-ai-feedback.mjs","sources":["../../../components/ai-feedback/ai-feedback.model.ts","../../../components/ai-feedback/ai-feedback.component.ts","../../../components/ai-feedback/ai-feedback.component.html","../../../components/ai-feedback/ai-feedback.module.ts","../../../components/ai-feedback/testgorilla-tgo-ui-components-ai-feedback.ts"],"sourcesContent":["export enum AiFeedbackPanelType {\n POSITIVE = 'positive',\n NEGATIVE = 'negative',\n}\n\nexport type AiFeedbackVariant = 'default' | 'panel' | 'input-only';\n\nexport interface AiFeedbackOption {\n id: string;\n label: string;\n}\n\nexport interface AiFeedbackConfig {\n title: string;\n options?: AiFeedbackOption[]; // \"Other\" option will be automatically appended if options are provided\n otherPlaceholder?: string;\n}\n\nexport interface AiFeedbackData {\n isPositiveFeedback: boolean | null;\n selectedOptions?: string[];\n otherText?: string;\n}\n","import { trigger, transition, style, animate } from '@angular/animations';\nimport { AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n inject,\n input,\n model,\n OnInit,\n output,\n signal,\n} from '@angular/core';\nimport { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subject, debounceTime, distinctUntilChanged } from 'rxjs';\n\nimport { AiCaveatComponent } from '@testgorilla/tgo-ui/components/ai-caveat';\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { CardComponent } from '@testgorilla/tgo-ui/components/card';\nimport {\n ApplicationTheme,\n IS_MOBILE_TOKEN,\n UiTranslatePipe,\n MemoizeFuncPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TagComponent } from '@testgorilla/tgo-ui/components/tag';\n\nimport { AiFeedbackPanelType, AiFeedbackConfig, AiFeedbackData, AiFeedbackVariant } from './ai-feedback.model';\n\n@Component({\n selector: 'ui-ai-feedback',\n templateUrl: './ai-feedback.component.html',\n styleUrl: './ai-feedback.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n /* eslint-disable @typescript-eslint/no-deprecated -- the @angular/animations trigger/state/style/animate/transition DSL is deprecated in 20.2 in favor of template-level animate.enter/animate.leave; migrating every Material/component animation is out of scope for this lint pass */\n animations: [\n trigger('slideDown', [\n transition(':enter', [\n style({ height: 0, opacity: 0, overflow: 'hidden' }),\n animate('200ms ease-out', style({ height: '*', opacity: 1 })),\n ]),\n transition(':leave', [animate('200ms ease-in', style({ height: 0, opacity: 0, overflow: 'hidden' }))]),\n ]),\n ],\n imports: [\n AiCaveatComponent,\n IconComponentModule,\n ButtonComponent,\n CardComponent,\n TagComponent,\n FieldComponentModule,\n FormsModule,\n ReactiveFormsModule,\n AsyncPipe,\n UiTranslatePipe,\n MemoizeFuncPipe,\n ],\n})\nexport class AiFeedbackComponent implements OnInit {\n positiveConfig = input<AiFeedbackConfig>();\n negativeConfig = input<AiFeedbackConfig>();\n skipPanelForPositive = input<boolean>(false);\n applicationTheme = input<ApplicationTheme>('light');\n variant = input<AiFeedbackVariant>('default');\n isRatingDisabled = input<boolean>(false);\n enableAutoEmit = input<boolean>(false);\n isPositiveFeedback = model<boolean | null>(null);\n\n selectionChange = output<boolean | null>();\n feedbackSubmitted = output<AiFeedbackData>();\n feedbackCancelled = output<AiFeedbackData>();\n feedbackChanged = output<AiFeedbackData>();\n\n protected readonly isMobile$ = inject(IS_MOBILE_TOKEN);\n private readonly destroyRef = inject(DestroyRef);\n\n isMobile = toSignal(this.isMobile$, { initialValue: false });\n\n showPanel = signal<boolean>(false);\n panelType = signal<AiFeedbackPanelType | null>(null);\n selectedOptions = signal<string[]>([]);\n otherTextControl = new FormControl<string>('');\n otherTextValue = signal<string>('');\n\n private readonly selectedOptionsSubject = new Subject<string[]>();\n private readonly otherTextSubject = new Subject<string>();\n\n readonly translationContext = 'AI_FEEDBACK.';\n readonly AiFeedbackPanelType = AiFeedbackPanelType;\n private readonly defaultPositiveTitle = `${this.translationContext}POSITIVE_TITLE`;\n private readonly defaultNegativeTitle = `${this.translationContext}NEGATIVE_TITLE`;\n private readonly OTHER_OPTION_ID = 'other';\n\n shouldAutoEmit = computed(() => this.enableAutoEmit() && this.variant() !== 'default');\n\n ngOnInit(): void {\n this.otherTextControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n this.otherTextValue.set(value ?? '');\n\n if (this.shouldAutoEmit()) {\n this.otherTextSubject.next(value ?? '');\n }\n });\n\n this.selectedOptionsSubject\n .pipe(\n debounceTime(500),\n distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe(() => {\n this.feedbackChanged.emit({\n isPositiveFeedback: this.isPositiveFeedback(),\n selectedOptions: this.selectedOptions(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n });\n });\n\n this.otherTextSubject\n .pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.feedbackChanged.emit({\n isPositiveFeedback: this.isPositiveFeedback(),\n selectedOptions: this.selectedOptions(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n });\n });\n }\n\n getDefaultPanelTitleTranslation(panelType: AiFeedbackPanelType | null): string {\n return panelType === AiFeedbackPanelType.POSITIVE ? this.defaultPositiveTitle : this.defaultNegativeTitle;\n }\n\n activeConfig = computed(() => {\n const type = this.panelType();\n\n if (type === AiFeedbackPanelType.POSITIVE) {\n const config = this.positiveConfig();\n if (this.variant() === 'panel' && config?.options?.length) {\n return this.ensureOtherOption(config);\n }\n return config;\n }\n\n if (type === AiFeedbackPanelType.NEGATIVE) {\n const config = this.negativeConfig();\n if (this.variant() === 'panel' && config?.options?.length) {\n return this.ensureOtherOption(config);\n }\n return config;\n }\n\n return null;\n });\n\n arrowPosition = computed(() => (this.panelType() === AiFeedbackPanelType.POSITIVE ? 'left' : 'right'));\n\n isSubmitDisabled = computed(() => {\n switch (this.variant()) {\n case 'input-only':\n return this.otherTextValue().trim().length === 0;\n case 'panel':\n return this.selectedOptions().length === 0;\n case 'default':\n default:\n return false;\n }\n });\n\n private ensureOtherOption(config: AiFeedbackConfig): AiFeedbackConfig {\n if (this.variant() === 'input-only') {\n return config;\n }\n const hasOther = config.options?.some(opt => opt.id === this.OTHER_OPTION_ID);\n return hasOther\n ? config\n : {\n ...config,\n options: [...(config.options ?? []), { id: this.OTHER_OPTION_ID, label: 'Other' }],\n };\n }\n\n private buildFeedbackData(): AiFeedbackData {\n if (this.variant() === 'input-only') {\n return {\n isPositiveFeedback: this.isPositiveFeedback(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n };\n }\n return {\n isPositiveFeedback: this.isPositiveFeedback(),\n selectedOptions: this.selectedOptions(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n };\n }\n\n private resetPanelState(): void {\n this.showPanel.set(false);\n this.panelType.set(null);\n this.selectedOptions.set([]);\n this.otherTextControl.setValue('');\n }\n\n private shouldShowPanelForVariant(): boolean {\n return this.variant() === 'panel' || this.variant() === 'input-only';\n }\n\n onSelectionChange(isPositive: boolean): void {\n if (this.isRatingDisabled()) {\n return;\n }\n\n const newValue = this.isPositiveFeedback() === isPositive ? null : isPositive;\n this.isPositiveFeedback.set(newValue);\n\n this.selectionChange.emit(newValue);\n\n if (newValue !== null) {\n const shouldSkipPanel = isPositive && this.skipPanelForPositive();\n\n if (this.shouldShowPanelForVariant() && !shouldSkipPanel) {\n this.panelType.set(isPositive ? AiFeedbackPanelType.POSITIVE : AiFeedbackPanelType.NEGATIVE);\n this.showPanel.set(true);\n this.selectedOptions.set([]);\n this.otherTextControl.setValue('');\n }\n } else {\n this.closePanel();\n }\n }\n\n toggleOption(optionId: string): void {\n const current = this.selectedOptions();\n const updated = current.includes(optionId) ? current.filter(id => id !== optionId) : [...current, optionId];\n this.selectedOptions.set(updated);\n\n if (this.shouldAutoEmit()) {\n this.selectedOptionsSubject.next(updated);\n }\n }\n\n isOptionSelected(optionId: string): boolean {\n return this.selectedOptions().includes(optionId);\n }\n\n showOtherField(): boolean {\n return this.variant() === 'input-only' || this.selectedOptions().includes(this.OTHER_OPTION_ID);\n }\n\n onSubmit(): void {\n this.feedbackSubmitted.emit(this.buildFeedbackData());\n this.showPanel.set(false);\n }\n\n closePanel(): void {\n this.feedbackCancelled.emit(this.buildFeedbackData());\n this.resetPanelState();\n }\n}\n","<div class=\"ai-feedback-wrapper\">\n <div class=\"ai-feedback\" [attr.aria-label]=\"translationContext + 'TITLE' | uiTranslate\" role=\"group\">\n <ui-ai-caveat [applicationTheme]=\"applicationTheme()\"></ui-ai-caveat>\n\n <div class=\"ai-feedback-buttons-section\">\n @if (isRatingDisabled()) {\n <div class=\"ai-feedback-saved\">\n <span class=\"ai-feedback-saved-text\">{{ translationContext + 'RATING_SAVED' | uiTranslate | async }}</span>\n <ui-icon\n [name]=\"isPositiveFeedback() ? 'Thumb-up-filled' : 'Thumb-down-filled'\"\n [filled]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n [color]=\"'gray'\"\n />\n </div>\n } @else {\n <span class=\"ai-feedback-label\">{{ translationContext + 'TITLE' | uiTranslate | async }}</span>\n\n <div\n class=\"ai-feedback-buttons\"\n role=\"group\"\n [attr.aria-expanded]=\"showPanel()\"\n [attr.aria-controls]=\"showPanel() ? 'feedback-panel' : null\"\n >\n <ui-button\n class=\"ai-feedback-button-positive\"\n data-testid=\"ai-feedback-button-positive\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-up-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === true\"\n (buttonClickEvent)=\"onSelectionChange(true)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n\n <ui-button\n data-testid=\"ai-feedback-button-negative\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-down-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === false\"\n (buttonClickEvent)=\"onSelectionChange(false)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n </div>\n }\n </div>\n </div>\n\n @if (showPanel()) {\n @let panelTitle =\n activeConfig()?.title ??\n (panelType() | memoizeFunc: getDefaultPanelTitleTranslation : this | uiTranslate | async);\n\n <ui-card\n id=\"feedback-panel\"\n class=\"feedback-panel\"\n [class.arrow-left]=\"arrowPosition() === 'left'\"\n [class.arrow-right]=\"arrowPosition() === 'right'\"\n [applicationTheme]=\"applicationTheme()\"\n [size]=\"isMobile() ? 'small' : 'medium'\"\n role=\"region\"\n [attr.aria-label]=\"panelTitle\"\n [@slideDown]\n >\n <div class=\"feedback-panel-arrow\"></div>\n\n <div class=\"feedback-panel-content\">\n <div class=\"feedback-panel-title-container\">\n <h4 class=\"feedback-panel-title\">\n {{ panelTitle }}\n </h4>\n\n <ui-button\n [justIcon]=\"true\"\n [iconName]=\"'Close-filled'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Close feedback panel'\"\n variant=\"icon-button\"\n (buttonClickEvent)=\"closePanel()\"\n >\n </ui-button>\n </div>\n\n @if (variant() === 'panel' && activeConfig()?.options && activeConfig()!.options!.length > 0) {\n <div class=\"feedback-options\">\n @for (option of activeConfig()?.options; track option.id) {\n <ui-tag\n [label]=\"option.label\"\n [isSelected]=\"isOptionSelected(option.id)\"\n [showIconWhenSelected]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n (press)=\"toggleOption(option.id)\"\n >\n </ui-tag>\n }\n </div>\n }\n\n @if (showOtherField()) {\n <ui-field\n class=\"feedback-field\"\n type=\"text\"\n [label]=\"\n activeConfig()?.otherPlaceholder ?? (translationContext + 'OTHER_PLACEHOLDER' | uiTranslate | async) ?? ''\n \"\n [formControl]=\"otherTextControl\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [showBottomContent]=\"false\"\n >\n </ui-field>\n }\n\n <div class=\"feedback-submit-container\">\n <ui-button\n [label]=\"(translationContext + 'SUBMIT' | uiTranslate | async) || ''\"\n [disabled]=\"isSubmitDisabled()\"\n [size]=\"'small'\"\n [fullWidth]=\"isMobile()\"\n (buttonClickEvent)=\"onSubmit()\"\n variant=\"primary\"\n >\n </ui-button>\n </div>\n </div>\n </ui-card>\n }\n</div>\n","import { CommonModule, AsyncPipe } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { AiCaveatComponentModule } from '@testgorilla/tgo-ui/components/ai-caveat';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CardComponentModule } from '@testgorilla/tgo-ui/components/card';\nimport { UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TagComponentModule } from '@testgorilla/tgo-ui/components/tag';\n\nimport { AiFeedbackComponent } from './ai-feedback.component';\n\n@NgModule({\n imports: [\n CommonModule,\n AsyncPipe,\n ReactiveFormsModule,\n ButtonComponentModule,\n CardComponentModule,\n TagComponentModule,\n FieldComponentModule,\n AiCaveatComponentModule,\n IconComponentModule,\n UiTranslatePipe,\n MemoizeFuncPipe,\n AiFeedbackComponent,\n ],\n exports: [AiFeedbackComponent],\n})\nexport class AiFeedbackModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"testgorilla-tgo-ui-components-ai-feedback.mjs","sources":["../../../components/ai-feedback/ai-feedback.model.ts","../../../components/ai-feedback/ai-feedback.component.ts","../../../components/ai-feedback/ai-feedback.component.html","../../../components/ai-feedback/ai-feedback.module.ts","../../../components/ai-feedback/testgorilla-tgo-ui-components-ai-feedback.ts"],"sourcesContent":["export enum AiFeedbackPanelType {\n POSITIVE = 'positive',\n NEGATIVE = 'negative',\n}\n\nexport type AiFeedbackVariant = 'default' | 'panel' | 'input-only';\n\nexport interface AiFeedbackOption {\n id: string;\n label: string;\n}\n\nexport interface AiFeedbackConfig {\n title: string;\n options?: AiFeedbackOption[]; // \"Other\" option will be automatically appended if options are provided\n otherPlaceholder?: string;\n}\n\nexport interface AiFeedbackData {\n isPositiveFeedback: boolean | null;\n selectedOptions?: string[];\n otherText?: string;\n}\n","import { trigger, transition, style, animate } from '@angular/animations';\nimport { AsyncPipe } from '@angular/common';\nimport {\n ChangeDetectionStrategy,\n Component,\n computed,\n DestroyRef,\n inject,\n input,\n model,\n OnInit,\n output,\n signal,\n} from '@angular/core';\nimport { toSignal, takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { Subject, debounceTime, distinctUntilChanged } from 'rxjs';\n\nimport { AiCaveatComponent } from '@testgorilla/tgo-ui/components/ai-caveat';\nimport { ButtonComponent } from '@testgorilla/tgo-ui/components/button';\nimport { CardComponent } from '@testgorilla/tgo-ui/components/card';\nimport {\n ApplicationTheme,\n IS_MOBILE_TOKEN,\n UiTranslatePipe,\n MemoizeFuncPipe,\n} from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TagComponent } from '@testgorilla/tgo-ui/components/tag';\n\nimport { AiFeedbackPanelType, AiFeedbackConfig, AiFeedbackData, AiFeedbackVariant } from './ai-feedback.model';\n\n@Component({\n selector: 'ui-ai-feedback',\n templateUrl: './ai-feedback.component.html',\n styleUrl: './ai-feedback.component.scss',\n changeDetection: ChangeDetectionStrategy.OnPush,\n /* eslint-disable @typescript-eslint/no-deprecated -- the @angular/animations trigger/state/style/animate/transition DSL is deprecated in 20.2 in favor of template-level animate.enter/animate.leave; migrating every Material/component animation is out of scope for this lint pass */\n animations: [\n trigger('slideDown', [\n transition(':enter', [\n style({ height: 0, opacity: 0, overflow: 'hidden' }),\n animate('200ms ease-out', style({ height: '*', opacity: 1 })),\n ]),\n transition(':leave', [animate('200ms ease-in', style({ height: 0, opacity: 0, overflow: 'hidden' }))]),\n ]),\n ],\n imports: [\n AiCaveatComponent,\n IconComponentModule,\n ButtonComponent,\n CardComponent,\n TagComponent,\n FieldComponentModule,\n FormsModule,\n ReactiveFormsModule,\n AsyncPipe,\n UiTranslatePipe,\n MemoizeFuncPipe,\n ],\n})\nexport class AiFeedbackComponent implements OnInit {\n positiveConfig = input<AiFeedbackConfig>();\n negativeConfig = input<AiFeedbackConfig>();\n skipPanelForPositive = input<boolean>(false);\n applicationTheme = input<ApplicationTheme>('light');\n variant = input<AiFeedbackVariant>('default');\n isRatingDisabled = input<boolean>(false);\n enableAutoEmit = input<boolean>(false);\n isPositiveFeedback = model<boolean | null>(null);\n\n selectionChange = output<boolean | null>();\n feedbackSubmitted = output<AiFeedbackData>();\n feedbackCancelled = output<AiFeedbackData>();\n feedbackChanged = output<AiFeedbackData>();\n\n protected readonly isMobile$ = inject(IS_MOBILE_TOKEN);\n private readonly destroyRef = inject(DestroyRef);\n\n isMobile = toSignal(this.isMobile$, { initialValue: false });\n\n showPanel = signal<boolean>(false);\n panelType = signal<AiFeedbackPanelType | null>(null);\n selectedOptions = signal<string[]>([]);\n otherTextControl = new FormControl<string>('');\n otherTextValue = signal<string>('');\n\n private readonly selectedOptionsSubject = new Subject<string[]>();\n private readonly otherTextSubject = new Subject<string>();\n\n readonly translationContext = 'AI_FEEDBACK.';\n readonly AiFeedbackPanelType = AiFeedbackPanelType;\n private readonly defaultPositiveTitle = `${this.translationContext}POSITIVE_TITLE`;\n private readonly defaultNegativeTitle = `${this.translationContext}NEGATIVE_TITLE`;\n private readonly OTHER_OPTION_ID = 'other';\n\n shouldAutoEmit = computed(() => this.enableAutoEmit() && this.variant() !== 'default');\n\n ngOnInit(): void {\n this.otherTextControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(value => {\n this.otherTextValue.set(value ?? '');\n\n if (this.shouldAutoEmit()) {\n this.otherTextSubject.next(value ?? '');\n }\n });\n\n this.selectedOptionsSubject\n .pipe(\n debounceTime(500),\n distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr)),\n takeUntilDestroyed(this.destroyRef)\n )\n .subscribe(() => {\n this.feedbackChanged.emit({\n isPositiveFeedback: this.isPositiveFeedback(),\n selectedOptions: this.selectedOptions(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n });\n });\n\n this.otherTextSubject\n .pipe(debounceTime(500), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))\n .subscribe(() => {\n this.feedbackChanged.emit({\n isPositiveFeedback: this.isPositiveFeedback(),\n selectedOptions: this.selectedOptions(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n });\n });\n }\n\n getDefaultPanelTitleTranslation(panelType: AiFeedbackPanelType | null): string {\n return panelType === AiFeedbackPanelType.POSITIVE ? this.defaultPositiveTitle : this.defaultNegativeTitle;\n }\n\n activeConfig = computed(() => {\n const type = this.panelType();\n\n if (type === AiFeedbackPanelType.POSITIVE) {\n const config = this.positiveConfig();\n if (this.variant() === 'panel' && config?.options?.length) {\n return this.ensureOtherOption(config);\n }\n return config;\n }\n\n if (type === AiFeedbackPanelType.NEGATIVE) {\n const config = this.negativeConfig();\n if (this.variant() === 'panel' && config?.options?.length) {\n return this.ensureOtherOption(config);\n }\n return config;\n }\n\n return null;\n });\n\n arrowPosition = computed(() => (this.panelType() === AiFeedbackPanelType.POSITIVE ? 'left' : 'right'));\n\n isSubmitDisabled = computed(() => {\n switch (this.variant()) {\n case 'input-only':\n return this.otherTextValue().trim().length === 0;\n case 'panel':\n return this.selectedOptions().length === 0;\n case 'default':\n default:\n return false;\n }\n });\n\n private ensureOtherOption(config: AiFeedbackConfig): AiFeedbackConfig {\n if (this.variant() === 'input-only') {\n return config;\n }\n const hasOther = config.options?.some(opt => opt.id === this.OTHER_OPTION_ID);\n return hasOther\n ? config\n : {\n ...config,\n options: [...(config.options ?? []), { id: this.OTHER_OPTION_ID, label: 'Other' }],\n };\n }\n\n private buildFeedbackData(): AiFeedbackData {\n if (this.variant() === 'input-only') {\n return {\n isPositiveFeedback: this.isPositiveFeedback(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n };\n }\n return {\n isPositiveFeedback: this.isPositiveFeedback(),\n selectedOptions: this.selectedOptions(),\n // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing -- empty text is reported as undefined, not an empty string\n otherText: this.otherTextControl.value || undefined,\n };\n }\n\n private resetPanelState(): void {\n this.showPanel.set(false);\n this.panelType.set(null);\n this.selectedOptions.set([]);\n this.otherTextControl.setValue('');\n }\n\n private shouldShowPanelForVariant(): boolean {\n return this.variant() === 'panel' || this.variant() === 'input-only';\n }\n\n onSelectionChange(isPositive: boolean): void {\n if (this.isRatingDisabled()) {\n return;\n }\n\n const newValue = this.isPositiveFeedback() === isPositive ? null : isPositive;\n this.isPositiveFeedback.set(newValue);\n\n this.selectionChange.emit(newValue);\n\n if (newValue !== null) {\n const shouldSkipPanel = isPositive && this.skipPanelForPositive();\n\n if (this.shouldShowPanelForVariant() && !shouldSkipPanel) {\n this.panelType.set(isPositive ? AiFeedbackPanelType.POSITIVE : AiFeedbackPanelType.NEGATIVE);\n this.showPanel.set(true);\n this.selectedOptions.set([]);\n this.otherTextControl.setValue('');\n }\n } else {\n this.closePanel();\n }\n }\n\n toggleOption(optionId: string): void {\n const current = this.selectedOptions();\n const updated = current.includes(optionId) ? current.filter(id => id !== optionId) : [...current, optionId];\n this.selectedOptions.set(updated);\n\n if (this.shouldAutoEmit()) {\n this.selectedOptionsSubject.next(updated);\n }\n }\n\n isOptionSelected(optionId: string): boolean {\n return this.selectedOptions().includes(optionId);\n }\n\n showOtherField(): boolean {\n return this.variant() === 'input-only' || this.selectedOptions().includes(this.OTHER_OPTION_ID);\n }\n\n onSubmit(): void {\n this.feedbackSubmitted.emit(this.buildFeedbackData());\n this.showPanel.set(false);\n }\n\n closePanel(): void {\n this.feedbackCancelled.emit(this.buildFeedbackData());\n this.resetPanelState();\n }\n}\n","<div class=\"ai-feedback-wrapper\">\n <div class=\"ai-feedback\" [attr.aria-label]=\"translationContext + 'TITLE' | uiTranslate\" role=\"group\">\n <ui-ai-caveat [applicationTheme]=\"applicationTheme()\"></ui-ai-caveat>\n\n <div class=\"ai-feedback-buttons-section\">\n @if (isRatingDisabled()) {\n <div class=\"ai-feedback-saved\">\n <span class=\"ai-feedback-saved-text\">{{ translationContext + 'RATING_SAVED' | uiTranslate | async }}</span>\n <ui-icon\n [name]=\"isPositiveFeedback() ? 'Thumb-up-filled' : 'Thumb-down-filled'\"\n [filled]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n [color]=\"'gray'\"\n />\n </div>\n } @else {\n <span class=\"ai-feedback-label\">{{ translationContext + 'TITLE' | uiTranslate | async }}</span>\n\n <div\n class=\"ai-feedback-buttons\"\n role=\"group\"\n [attr.aria-expanded]=\"showPanel()\"\n [attr.aria-controls]=\"showPanel() ? 'feedback-panel' : null\"\n >\n <ui-button\n class=\"ai-feedback-button-positive\"\n data-testid=\"ai-feedback-button-positive\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-up-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.YES' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.YES' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === true\"\n (buttonClickEvent)=\"onSelectionChange(true)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n\n <ui-button\n data-testid=\"ai-feedback-button-negative\"\n [justIcon]=\"true\"\n [iconName]=\"'Thumb-down-in-line'\"\n [size]=\"'small'\"\n [tooltip]=\"('COMMON.NO' | uiTranslate | async)!\"\n [ariaLabel]=\"('COMMON.NO' | uiTranslate | async)!\"\n [iconFilled]=\"isPositiveFeedback() === false\"\n (buttonClickEvent)=\"onSelectionChange(false)\"\n variant=\"icon-button\"\n role=\"button\"\n >\n </ui-button>\n </div>\n }\n </div>\n </div>\n\n @if (showPanel()) {\n @let panelTitle =\n activeConfig()?.title ??\n (panelType() | memoizeFunc: getDefaultPanelTitleTranslation : this | uiTranslate | async);\n\n <ui-card\n id=\"feedback-panel\"\n class=\"feedback-panel\"\n [class.arrow-left]=\"arrowPosition() === 'left'\"\n [class.arrow-right]=\"arrowPosition() === 'right'\"\n [applicationTheme]=\"applicationTheme()\"\n [size]=\"isMobile() ? 'small' : 'medium'\"\n role=\"region\"\n [attr.aria-label]=\"panelTitle\"\n [@slideDown]\n >\n <div class=\"feedback-panel-arrow\"></div>\n\n <div class=\"feedback-panel-content\">\n <div class=\"feedback-panel-title-container\">\n <h4 class=\"feedback-panel-title\">\n {{ panelTitle }}\n </h4>\n\n <ui-button\n [justIcon]=\"true\"\n [iconName]=\"'Close-filled'\"\n [size]=\"'small'\"\n [ariaLabel]=\"'Close feedback panel'\"\n variant=\"icon-button\"\n (buttonClickEvent)=\"closePanel()\"\n >\n </ui-button>\n </div>\n\n @if (variant() === 'panel' && activeConfig()?.options && activeConfig()!.options!.length > 0) {\n <div class=\"feedback-options\">\n @for (option of activeConfig()?.options; track option.id) {\n <ui-tag\n [label]=\"option.label\"\n [isSelected]=\"isOptionSelected(option.id)\"\n [showIconWhenSelected]=\"true\"\n [applicationTheme]=\"applicationTheme()\"\n (press)=\"toggleOption(option.id)\"\n >\n </ui-tag>\n }\n </div>\n }\n\n @if (showOtherField()) {\n <ui-field\n class=\"feedback-field\"\n type=\"text\"\n [label]=\"\n activeConfig()?.otherPlaceholder ?? (translationContext + 'OTHER_PLACEHOLDER' | uiTranslate | async) ?? ''\n \"\n [formControl]=\"otherTextControl\"\n [applicationTheme]=\"applicationTheme()\"\n [fullWidth]=\"true\"\n [showBottomContent]=\"false\"\n >\n </ui-field>\n }\n\n <div class=\"feedback-submit-container\">\n <ui-button\n [label]=\"(translationContext + 'SUBMIT' | uiTranslate | async) || ''\"\n [disabled]=\"isSubmitDisabled()\"\n [size]=\"'small'\"\n [fullWidth]=\"isMobile()\"\n (buttonClickEvent)=\"onSubmit()\"\n variant=\"primary\"\n >\n </ui-button>\n </div>\n </div>\n </ui-card>\n }\n</div>\n","import { CommonModule, AsyncPipe } from '@angular/common';\nimport { NgModule } from '@angular/core';\nimport { ReactiveFormsModule } from '@angular/forms';\n\nimport { AiCaveatComponentModule } from '@testgorilla/tgo-ui/components/ai-caveat';\nimport { ButtonComponentModule } from '@testgorilla/tgo-ui/components/button';\nimport { CardComponentModule } from '@testgorilla/tgo-ui/components/card';\nimport { UiTranslatePipe, MemoizeFuncPipe } from '@testgorilla/tgo-ui/components/core';\nimport { FieldComponentModule } from '@testgorilla/tgo-ui/components/field';\nimport { IconComponentModule } from '@testgorilla/tgo-ui/components/icon';\nimport { TagComponentModule } from '@testgorilla/tgo-ui/components/tag';\n\nimport { AiFeedbackComponent } from './ai-feedback.component';\n\n@NgModule({\n imports: [\n CommonModule,\n AsyncPipe,\n ReactiveFormsModule,\n ButtonComponentModule,\n CardComponentModule,\n TagComponentModule,\n FieldComponentModule,\n AiCaveatComponentModule,\n IconComponentModule,\n UiTranslatePipe,\n MemoizeFuncPipe,\n AiFeedbackComponent,\n ],\n exports: [AiFeedbackComponent],\n})\nexport class AiFeedbackModule {}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}
|
|
@@ -840,7 +840,7 @@ class AutocompleteV2Component {
|
|
|
840
840
|
return Math.min(Math.max(calculatedHeight, minHeight), maxHeight);
|
|
841
841
|
}
|
|
842
842
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AutocompleteV2Component, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
843
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AutocompleteV2Component, isStandalone: true, selector: "ui-autocomplete-v2", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: false, transformFunction: null }, suggestionsList: { classPropertyName: "suggestionsList", publicName: "suggestionsList", isSignal: true, isRequired: false, transformFunction: null }, groupsList: { classPropertyName: "groupsList", publicName: "groupsList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowAdd: { classPropertyName: "allowAdd", publicName: "allowAdd", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, imageField: { classPropertyName: "imageField", publicName: "imageField", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minCharactersSearch: { classPropertyName: "minCharactersSearch", publicName: "minCharactersSearch", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, showBottomContent: { classPropertyName: "showBottomContent", publicName: "showBottomContent", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelClass: { classPropertyName: "dropdownPanelClass", publicName: "dropdownPanelClass", isSignal: true, isRequired: false, transformFunction: null }, panelPosition: { classPropertyName: "panelPosition", publicName: "panelPosition", isSignal: true, isRequired: false, transformFunction: null }, hideSelectedSection: { classPropertyName: "hideSelectedSection", publicName: "hideSelectedSection", isSignal: true, isRequired: false, transformFunction: null }, userAdditionsGroupLabel: { classPropertyName: "userAdditionsGroupLabel", publicName: "userAdditionsGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowUserInput: { classPropertyName: "allowUserInput", publicName: "allowUserInput", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilterLoading: { classPropertyName: "dynamicFilterLoading", publicName: "dynamicFilterLoading", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilteredList: { classPropertyName: "dynamicFilteredList", publicName: "dynamicFilteredList", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, hasMoreOptionsForInfiniteScroll: { classPropertyName: "hasMoreOptionsForInfiniteScroll", publicName: "hasMoreOptionsForInfiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, formErrorConfig: { classPropertyName: "formErrorConfig", publicName: "formErrorConfig", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, addOptionPosition: { classPropertyName: "addOptionPosition", publicName: "addOptionPosition", isSignal: true, isRequired: false, transformFunction: null }, tagsPosition: { classPropertyName: "tagsPosition", publicName: "tagsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached", scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered" }, host: { properties: { "attr.theme": "applicationTheme" } }, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "measureElRef", first: true, predicate: ["measureEl"], descendants: true }, { propertyName: "overflowDir", first: true, predicate: ["overflow"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n <mat-form-field\n [color]=\"hasError() ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type() === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent(),\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label(),\n }\"\n >\n @if (label()) {\n <mat-label\n >{{ label() }}\n @if (required()) {\n <span>*</span>\n }\n </mat-label>\n }\n <div\n #formField\n class=\"input-container\"\n [class.has-multiple-selections]=\"\n type() === autocompleteType.LARGE &&\n utils.isArray(valueManager.value()) &&\n $any(valueManager.value()).length > 1\n \"\n [class.autocomplete-variant]=\"type() === autocompleteType.LARGE && !isDropdown\"\n >\n @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n }}</span>\n }\n\n <input\n data-testid=\"autocomplete-v2-input\"\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n [uiPreventInput]=\"!allowUserInput()\"\n [disabled]=\"_isDisabled()\"\n [ngClass]=\"{\n 'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n 'no-caret': !allowUserInput(),\n }\"\n (blur)=\"onBlur()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) +\n ' ' +\n (valueManager.value() | transformItem: textField() : true)\n \"\n matInput\n [placeholder]=\"suppressPlaceholder() ? '' : placeholder()\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"panelPosition()\"\n (input)=\"onInputChange($event)\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n />\n <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n @if (!tagsBelow() && type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n <div class=\"selected-items measurement-container\" #measureEl>\n @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'measure-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled()\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-tag>\n }\n </div>\n }\n\n @if (\n !tagsBelow() &&\n ((type() === autocompleteType.LARGE && valueManager.value()) ||\n (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE))\n ) {\n <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n <div\n class=\"selected-items\"\n #tagContainer\n uiAutocompleteOverflowDetect\n #overflow=\"autocompleteOverflowDetect\"\n [measureContainer]=\"measureElRef?.nativeElement\"\n [class.measured]=\"\n type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n \"\n >\n @if (size() === 'small' && $any(valueManager.value()).length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: valueManager.value()!.length }\n | async\n }}\n </div>\n } @else {\n @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n @if (i < overflow.visibleCount()) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled()\"\n [applicationTheme]=\"applicationTheme\"\n [ngStyle]=\"\n type() !== autocompleteType.LARGE\n ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n : {}\n \"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n }\n @if (overflow.overflowCount() > 0) {\n <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n <ui-tag\n [applicationTheme]=\"applicationTheme\"\n [isDisabled]=\"disabled()\"\n [label]=\"'+' + overflow.overflowCount()\"\n ></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (showClearButton()) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"_isDisabled() ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"onPanelOpened()\"\n >\n <ng-template #optionContentTpl let-item=\"item\" let-highlight=\"highlight\">\n @if (imageField() && item?.[imageField()]) {\n <img class=\"option-image\" [src]=\"item[imageField()]\" alt=\"\" />\n }\n <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </ng-template>\n\n <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: highlight }\"\n ></ng-container>\n </mat-option>\n </ng-template>\n\n <!-- Reusable \"Add\"/no-results/loading option for the filtered view -->\n <ng-template #addOptionTpl let-items=\"items\" let-suggestions=\"suggestions\">\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (\n allowAdd() && !isAlreadyAdded() && !utils.hasExactMatch(items, suggestions, inputValue(), textField())\n ) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!items.length && !suggestions.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </ng-template>\n\n <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if ((filterService.isSearching$ | async) === false) {\n @if (!isDropdown) {\n <!-- Suggestions -->\n @if (suggestionsList().length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList(); track suggested) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Selected items (multi) -->\n @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE && !hideSelectedSection()) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of $any(valueManager.value()); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Main items (normalized groups) -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n } @else {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n }\n }\n\n @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n\n <!-- Selected item (single) -->\n @if (valueManager.value()?.length && type() === autocompleteType.SINGLE && !hideSelectedSection()) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n ></ng-container>\n </mat-optgroup>\n }\n } @else {\n <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n } @else {\n <!-- Grouped: nested cdkVirtualFor per group -->\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n }\n }\n\n @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n }\n\n @if (userAdditionsGroupLabel() && userAddedItems().length) {\n <mat-optgroup [label]=\"userAdditionsGroupLabel()\">\n @for (item of userAddedItems(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n </mat-optgroup>\n }\n }\n\n <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n @if (filterService.filteredItems$ | async; as filteredItemsList) {\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (addOptionPosition() === 'top') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n }\n\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n }\n }\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (addOptionPosition() === 'bottom') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (addOptionPosition() === 'top') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n }\n }\n\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (addOptionPosition() === 'bottom') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n }\n }\n }\n </mat-autocomplete>\n @if (hasError()) {\n <mat-hint class=\"error\">\n @if (ngControl) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [customErrors]=\"formErrorConfig()\"\n [label]=\"label()\"\n ></ui-validation-error>\n } @else {\n @for (error of safeErrors(); track error) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ error }}</span>\n </div>\n }\n }\n </mat-hint>\n }\n </mat-form-field>\n @if (tagsBelow() && valueManager.value()?.length) {\n <div class=\"selected-items--below\">\n @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'below-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled()\"\n [applicationTheme]=\"applicationTheme\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n <button type=\"button\" class=\"clear-all\" [disabled]=\"_isDisabled()\" (click)=\"onClear()\">\n {{ 'COMMON.CLEAR' | uiTranslate | async }}\n </button>\n </div>\n }\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{margin:auto 0;width:calc(100% - 25px);display:flex;flex-direction:column-reverse}.large-size .input-container.has-multiple-selections{width:calc(100% - 50px)}.large-size .input-container.autocomplete-variant{width:100%}.large-size .input-container.autocomplete-variant.has-multiple-selections{width:calc(100% - 26px)}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .option-image{width:24px;height:24px;margin-right:8px;object-fit:cover;flex-shrink:0}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-option{padding-left:16px!important}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}.selected-items--below{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}.selected-items--below ui-tag{margin:0}.selected-items--below .clear-all{background:none;border:none;padding:4px 8px;cursor:pointer;color:#000;font-weight:500;font-size:12px;line-height:16px;text-decoration:underline}.selected-items--below .clear-all:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TagComponentModule }, { kind: "component", type: i6.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["isSelectedChange", "close", "press"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i7.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: SpinnerComponentModule }, { kind: "component", type: i8.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "directive", type: AutocompleteOverflowDetectDirective, selector: "[uiAutocompleteOverflowDetect]", inputs: ["measureContainer", "itemSelector", "reserveWidth"], exportAs: ["autocompleteOverflowDetect"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
843
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.18", type: AutocompleteV2Component, isStandalone: true, selector: "ui-autocomplete-v2", inputs: { itemsList: { classPropertyName: "itemsList", publicName: "itemsList", isSignal: true, isRequired: false, transformFunction: null }, suggestionsList: { classPropertyName: "suggestionsList", publicName: "suggestionsList", isSignal: true, isRequired: false, transformFunction: null }, groupsList: { classPropertyName: "groupsList", publicName: "groupsList", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, allowAdd: { classPropertyName: "allowAdd", publicName: "allowAdd", isSignal: true, isRequired: false, transformFunction: null }, textField: { classPropertyName: "textField", publicName: "textField", isSignal: true, isRequired: false, transformFunction: null }, valueField: { classPropertyName: "valueField", publicName: "valueField", isSignal: true, isRequired: false, transformFunction: null }, imageField: { classPropertyName: "imageField", publicName: "imageField", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, minCharactersSearch: { classPropertyName: "minCharactersSearch", publicName: "minCharactersSearch", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: true, transformFunction: null }, showBottomContent: { classPropertyName: "showBottomContent", publicName: "showBottomContent", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, virtualScroll: { classPropertyName: "virtualScroll", publicName: "virtualScroll", isSignal: true, isRequired: false, transformFunction: null }, compareWith: { classPropertyName: "compareWith", publicName: "compareWith", isSignal: true, isRequired: false, transformFunction: null }, dropdownPanelClass: { classPropertyName: "dropdownPanelClass", publicName: "dropdownPanelClass", isSignal: true, isRequired: false, transformFunction: null }, panelPosition: { classPropertyName: "panelPosition", publicName: "panelPosition", isSignal: true, isRequired: false, transformFunction: null }, hideSelectedSection: { classPropertyName: "hideSelectedSection", publicName: "hideSelectedSection", isSignal: true, isRequired: false, transformFunction: null }, userAdditionsGroupLabel: { classPropertyName: "userAdditionsGroupLabel", publicName: "userAdditionsGroupLabel", isSignal: true, isRequired: false, transformFunction: null }, closeOnScroll: { classPropertyName: "closeOnScroll", publicName: "closeOnScroll", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, allowUserInput: { classPropertyName: "allowUserInput", publicName: "allowUserInput", isSignal: true, isRequired: false, transformFunction: null }, clearable: { classPropertyName: "clearable", publicName: "clearable", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilterLoading: { classPropertyName: "dynamicFilterLoading", publicName: "dynamicFilterLoading", isSignal: true, isRequired: false, transformFunction: null }, dynamicFilteredList: { classPropertyName: "dynamicFilteredList", publicName: "dynamicFilteredList", isSignal: true, isRequired: false, transformFunction: null }, infiniteScroll: { classPropertyName: "infiniteScroll", publicName: "infiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, hasMoreOptionsForInfiniteScroll: { classPropertyName: "hasMoreOptionsForInfiniteScroll", publicName: "hasMoreOptionsForInfiniteScroll", isSignal: true, isRequired: false, transformFunction: null }, itemValue: { classPropertyName: "itemValue", publicName: "itemValue", isSignal: true, isRequired: false, transformFunction: null }, formErrorConfig: { classPropertyName: "formErrorConfig", publicName: "formErrorConfig", isSignal: true, isRequired: false, transformFunction: null }, errors: { classPropertyName: "errors", publicName: "errors", isSignal: true, isRequired: false, transformFunction: null }, addOptionPosition: { classPropertyName: "addOptionPosition", publicName: "addOptionPosition", isSignal: true, isRequired: false, transformFunction: null }, tagsPosition: { classPropertyName: "tagsPosition", publicName: "tagsPosition", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", searchTextChange: "searchTextChange", blur: "blur", focus: "focus", scrollViewportBottomReached: "scrollViewportBottomReached", scrollViewportBottomReachedFiltered: "scrollViewportBottomReachedFiltered" }, host: { properties: { "attr.theme": "applicationTheme" } }, providers: [AutocompleteValueManager, AutocompleteFilterService, InfiniteScrollDirective], viewQueries: [{ propertyName: "formFieldElement", first: true, predicate: ["formField"], descendants: true }, { propertyName: "tagContainer", first: true, predicate: ["tagContainer"], descendants: true }, { propertyName: "measureElRef", first: true, predicate: ["measureEl"], descendants: true }, { propertyName: "overflowDir", first: true, predicate: ["overflow"], descendants: true }, { propertyName: "autocomplete", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "cdkViewport", first: true, predicate: CdkVirtualScrollViewport, descendants: true }, { propertyName: "matAutocomplete", first: true, predicate: ["autocomplete"], descendants: true }, { propertyName: "matInput", first: true, predicate: ["matInput"], descendants: true }], ngImport: i0, template: "<ng-container>\n <div class=\"autocomplete-wrapper\" [ngClass]=\"{ disabled: _isDisabled() }\">\n <mat-form-field\n [color]=\"hasError() ? 'warn' : 'accent'\"\n [appearance]=\"'outline'\"\n [ngClass]=\"{\n 'large-size': type() === autocompleteType.LARGE,\n 'hide-bottom-content': !showBottomContent(),\n 'keyboard-focused': keyboardFocused(),\n 'has-label': !!label(),\n }\"\n >\n @if (label()) {\n <mat-label\n >{{ label() }}\n @if (required()) {\n <span>*</span>\n }\n </mat-label>\n }\n <div\n #formField\n class=\"input-container\"\n [class.has-multiple-selections]=\"\n type() === autocompleteType.LARGE &&\n utils.isArray(valueManager.value()) &&\n $any(valueManager.value()).length > 1\n \"\n [class.autocomplete-variant]=\"type() === autocompleteType.LARGE && !isDropdown\"\n >\n @if (textField() ? $any(valueManager.value())?.[textField()] : $any(valueManager.value()) === inputValue()) {\n <span style=\"position: absolute; left: -9999px\" aria-live=\"polite\">{{\n ('SELECTED' | uiTranslate | async) + ' ' + inputValue()\n }}</span>\n }\n\n <input\n data-testid=\"autocomplete-v2-input\"\n #trigger=\"matAutocompleteTrigger\"\n #matInput\n [attr.maxlength]=\"maxLength() !== null && maxLength() !== undefined ? maxLength() : null\"\n [uiPreventInput]=\"!allowUserInput()\"\n [disabled]=\"_isDisabled()\"\n [ngClass]=\"{\n 'unset-margin': valueManager.value() && type() === autocompleteType.LARGE,\n 'no-caret': !allowUserInput(),\n }\"\n (blur)=\"onBlur()\"\n (focusin)=\"onFocus()\"\n [attr.aria-label]=\"\n (translationContext + 'SELECTED' | uiTranslate | async) +\n ' ' +\n (valueManager.value() | transformItem: textField() : true)\n \"\n matInput\n [placeholder]=\"suppressPlaceholder() ? '' : placeholder()\"\n [type]=\"'text'\"\n [matAutocomplete]=\"autocomplete\"\n [matAutocompletePosition]=\"panelPosition()\"\n (input)=\"onInputChange($event)\"\n [ngModel]=\"inputValue()\"\n (ngModelChange)=\"inputValue.set($event)\"\n />\n <!-- Hidden measurement container: always in DOM, renders ALL tags for width measurement -->\n @if (!tagsBelow() && type() !== autocompleteType.SINGLE && utils.isArray(valueManager.value())) {\n <div class=\"selected-items measurement-container\" #measureEl>\n @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'measure-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled()\"\n [applicationTheme]=\"applicationTheme\"\n ></ui-tag>\n }\n </div>\n }\n\n @if (\n !tagsBelow() &&\n ((type() === autocompleteType.LARGE && valueManager.value()) ||\n (!(inputValue() && isInputFocus()) && valueManager.value() && type() !== autocompleteType.SINGLE))\n ) {\n <!-- Visible container: only renders tags that fit. Hidden until first measurement to prevent flash. -->\n <div\n class=\"selected-items\"\n #tagContainer\n uiAutocompleteOverflowDetect\n #overflow=\"autocompleteOverflowDetect\"\n [measureContainer]=\"measureElRef?.nativeElement\"\n [class.measured]=\"\n type() === autocompleteType.LARGE || type() === autocompleteType.SINGLE || overflow.hasMeasured()\n \"\n >\n @if (size() === 'small' && $any(valueManager.value()).length > 1) {\n <div class=\"selected-count\">\n {{\n translationContext + 'SELECTED_AMOUNT'\n | uiTranslate: { numberSelected: valueManager.value()!.length }\n | async\n }}\n </div>\n } @else {\n @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n @if (i < overflow.visibleCount()) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'ui-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled()\"\n [applicationTheme]=\"applicationTheme\"\n [ngStyle]=\"\n type() !== autocompleteType.LARGE\n ? { '--tag-max-width': overflow.tagMaxWidth() ? overflow.tagMaxWidth() + 'px' : 'fit-content' }\n : {}\n \"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n }\n @if (overflow.overflowCount() > 0) {\n <div class=\"overlap-count\" [matTooltip]=\"hiddenItemsTooltip()\">\n <ui-tag\n [applicationTheme]=\"applicationTheme\"\n [isDisabled]=\"disabled()\"\n [label]=\"'+' + overflow.overflowCount()\"\n ></ui-tag>\n </div>\n }\n }\n </div>\n }\n </div>\n\n @if (showClearButton()) {\n <ui-icon\n class=\"remove-selected\"\n [tabIndex]=\"_isDisabled() ? -1 : 0\"\n (keydown.enter)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n (keydown.space)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [ngClass]=\"{ 'large-input-icon': type() === autocompleteType.LARGE }\"\n (click)=\"onClear(); $event.preventDefault(); $event.stopPropagation()\"\n [size]=\"'24'\"\n [color]=\"applicationTheme === 'classic' ? 'inherit' : 'rebrand-black'\"\n [attr.aria-label]=\"'COMMON.CLEAR' | uiTranslate | async\"\n [name]=\"applicationTheme === 'classic' ? 'Close' : 'Close-in-line'\"\n ></ui-icon>\n }\n\n @if (isDropdown) {\n <ui-icon\n class=\"arrow-state\"\n [ngClass]=\"{ opened: autocomplete.isOpen, 'large-input-icon': type() === autocompleteType.LARGE }\"\n [size]=\"'24'\"\n [name]=\"applicationTheme !== 'classic' ? 'Arrow-chevron-down-in-line' : 'Arrow_down'\"\n (click)=\"onChevronClick(autocomplete)\"\n ></ui-icon>\n }\n\n <mat-autocomplete\n #autocomplete\n [class]=\"applicationTheme + ' ' + dropdownPanelClass()\"\n (optionSelected)=\"onOptionSelected($event)\"\n [disableRipple]=\"applicationTheme !== 'classic'\"\n [hideSingleSelectionIndicator]=\"false\"\n (opened)=\"onPanelOpened()\"\n >\n <ng-template #optionContentTpl let-item=\"item\" let-highlight=\"highlight\">\n @if (imageField() && item?.[imageField()]) {\n <img class=\"option-image\" [src]=\"item[imageField()]\" alt=\"\" />\n }\n <span [selectText]=\"highlight ? (filterService.userInput$ | async) : null\">{{\n item | transformItem: textField()\n }}</span>\n <ui-icon\n [applicationTheme]=\"applicationTheme\"\n [name]=\"applicationTheme === 'classic' ? 'Check' : 'Check-in-line'\"\n ></ui-icon>\n </ng-template>\n\n <!-- Reusable option template \u2014 must be inside mat-autocomplete for @ContentChildren to find mat-options -->\n <ng-template #optionTpl let-item=\"item\" let-highlight=\"highlight\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: highlight }\"\n ></ng-container>\n </mat-option>\n </ng-template>\n\n <!-- Reusable \"Add\"/no-results/loading option for the filtered view -->\n <ng-template #addOptionTpl let-items=\"items\" let-suggestions=\"suggestions\">\n @if (dynamicFilterLoading()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n } @else if (inputValue()) {\n @if (\n allowAdd() && !isAlreadyAdded() && !utils.hasExactMatch(items, suggestions, inputValue(), textField())\n ) {\n <mat-option (mousedown)=\"$event.preventDefault()\" [value]=\"inputValue()\">\n <span>{{ 'COMMON.ADD' | uiTranslate | async }}</span>\n <span class=\"add-suggestion\">\"{{ inputValue() }}\"</span>\n </mat-option>\n } @else if (!items.length && !suggestions.length) {\n <mat-option [style.pointer-events]=\"'none'\">\n <span>{{ translationContext + 'NO_RESULTS_FOUND' | uiTranslate | async }}</span>\n </mat-option>\n }\n }\n </ng-template>\n\n <!-- \u2500\u2500 Unfiltered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if ((filterService.isSearching$ | async) === false) {\n @if (!isDropdown) {\n <!-- Suggestions -->\n @if (suggestionsList().length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (suggested of suggestionsList(); track suggested) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: suggested, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Selected items (multi) -->\n @if (valueManager.value()?.length && type() !== autocompleteType.SINGLE && !hideSelectedSection()) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n @for (item of $any(valueManager.value()); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: false }\"></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Main items (normalized groups) -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n } @else {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n }\n }\n\n @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n\n <!-- Selected item (single) -->\n @if (valueManager.value()?.length && type() === autocompleteType.SINGLE && !hideSelectedSection()) {\n <mat-optgroup [label]=\"(translationContext + 'SELECTED' | uiTranslate | async)! | uppercase\">\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: valueManager.value(), highlight: true }\"\n ></ng-container>\n </mat-optgroup>\n }\n } @else {\n <!-- \u2500\u2500 Dropdown (unfiltered) \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(flatItemsList().length)\"\n class=\"virtual-scroll\"\n >\n @if (!isGrouped) {\n <!-- Ungrouped: flat cdkVirtualFor directly in viewport -->\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of flatItemsList(); trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n } @else {\n <!-- Grouped: nested cdkVirtualFor per group -->\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of group.items; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n }\n }\n\n @if (infiniteScroll() && hasMoreOptionsForInfiniteScroll()) {\n <mat-option class=\"loading-option\" [style.pointer-events]=\"'none'\">\n <div class=\"loading-container\">\n <ui-spinner size=\"small\" [isLoader]=\"false\"></ui-spinner>\n </div>\n </mat-option>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (isGrouped) {\n @for (group of groupedItemsList(); track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.items; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n } @else {\n @for (item of flatItemsList(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n }\n }\n }\n\n @if (userAdditionsGroupLabel() && userAddedItems().length) {\n <mat-optgroup [label]=\"userAdditionsGroupLabel()\">\n @for (item of userAddedItems(); track item) {\n <ng-container *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"></ng-container>\n }\n </mat-optgroup>\n }\n }\n\n <!-- \u2500\u2500 Filtered \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500 -->\n @if (filterService.filteredSuggestions$ | async; as filteredSuggestionList) {\n @if (filterService.filteredItems$ | async; as filteredItemsList) {\n @if (virtualScroll() || infiniteScroll()) {\n <cdk-virtual-scroll-viewport\n [itemSize]=\"48\"\n [style.height.px]=\"getVirtualScrollHeight(filteredItemsList.length)\"\n class=\"virtual-scroll\"\n >\n @if (addOptionPosition() === 'top') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n *cdkVirtualFor=\"let item of filteredSuggestionList; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n }\n\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n </mat-optgroup>\n } @else {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n *cdkVirtualFor=\"let item of group.filteredItems; trackBy: trackByItem\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n }\n }\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{\n 'selected-option': item | includes: valueManager.value() ?? [] : valueField(),\n }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (addOptionPosition() === 'bottom') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n </cdk-virtual-scroll-viewport>\n } @else {\n @if (addOptionPosition() === 'top') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n <!-- Filtered items: grouped -->\n @if (isGrouped && (filterService.filteredGroupedItems$ | async); as filteredGroups) {\n @if (filteredGroups.length) {\n @for (group of filteredGroups; track group) {\n @if (group.groupName) {\n <mat-optgroup [label]=\"group.groupName\">\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n } @else {\n @for (item of group.filteredItems; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n }\n }\n }\n }\n\n <!-- Filtered suggestions -->\n @if (filteredSuggestionList.length) {\n <mat-optgroup [label]=\"(translationContext + 'SUGGESTED' | uiTranslate | async)! | uppercase\">\n @for (item of filteredSuggestionList; track item) {\n <ng-container\n *ngTemplateOutlet=\"optionTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n }\n </mat-optgroup>\n }\n\n <!-- Filtered items: ungrouped (no suggestions) -->\n @if (!filteredSuggestionList.length && !isGrouped) {\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n } @else {\n <!-- Filtered items: ungrouped with suggestions present (ALL_ITEMS group) -->\n @if (filteredItemsList.length && !isGrouped) {\n <mat-optgroup [label]=\"(translationContext + 'ALL_ITEMS' | uiTranslate | async)! | uppercase\">\n @for (item of filteredItemsList; let idx = $index; track item[valueField()] || idx) {\n <mat-option\n (mousedown)=\"$event.preventDefault()\"\n [ngClass]=\"{ 'selected-option': item | includes: valueManager.value() ?? [] : valueField() }\"\n [value]=\"item\"\n >\n <ng-container\n *ngTemplateOutlet=\"optionContentTpl; context: { item: item, highlight: true }\"\n ></ng-container>\n </mat-option>\n }\n </mat-optgroup>\n }\n }\n\n @if (addOptionPosition() === 'bottom') {\n <ng-container\n *ngTemplateOutlet=\"\n addOptionTpl;\n context: { items: filteredItemsList, suggestions: filteredSuggestionList }\n \"\n ></ng-container>\n }\n }\n }\n }\n </mat-autocomplete>\n @if (hasError()) {\n <mat-hint class=\"error\">\n @if (ngControl) {\n <ui-validation-error\n [ngControl]=\"ngControl\"\n [customErrors]=\"formErrorConfig()\"\n [label]=\"label()\"\n ></ui-validation-error>\n } @else {\n @for (error of safeErrors(); track error) {\n <div class=\"errors\">\n <ui-icon [applicationTheme]=\"applicationTheme\" [name]=\"'Error'\"></ui-icon>\n <span>{{ error }}</span>\n </div>\n }\n }\n </mat-hint>\n }\n </mat-form-field>\n @if (tagsBelow() && valueManager.value()?.length) {\n <div class=\"selected-items--below\">\n @for (valueItem of $any(valueManager.value()); track valueItem[valueField()] || i; let i = $index) {\n <ui-tag\n class=\"value-tag\"\n [id]=\"'below-tag-' + i\"\n [label]=\"valueItem | transformItem: textField()\"\n [allowClose]=\"true\"\n [isDisabled]=\"disabled()\"\n [applicationTheme]=\"applicationTheme\"\n (close)=\"onOptionRemoved(valueItem)\"\n ></ui-tag>\n }\n <button type=\"button\" class=\"clear-all\" [disabled]=\"_isDisabled()\" (click)=\"onClear()\">\n {{ 'COMMON.CLEAR' | uiTranslate | async }}\n </button>\n </div>\n }\n </div>\n</ng-container>\n", styles: [".bg-teal-60b{background:#1c443c}.bg-teal-30b{background:#31766a}.bg-teal-default{background:#46a997}.bg-teal-30w{background:#7ec3b6}.bg-teal-60w{background:#b5ddd5}.bg-teal-secondary{background:#cbd6cb}.bg-teal-90w{background:#ecf6f5}.bg-petrol-60b{background:#102930}.bg-petrol-30b{background:#1b4754}.bg-petrol-default{background:#276678}.bg-petrol-30w{background:#6894a0}.bg-petrol-60w{background:#a9c2c9}.bg-petrol-secondary{background:#c8d7de}.bg-petrol-90w{background:#e9f0f1}.bg-error-60b{background:#513131}.bg-error-30b{background:#8e5655}.bg-error-60w{background:#e3c3c6}.bg-error-secondary{background:#f0dad9}.bg-error-default{background:#cb7b7a}.bg-warning-secondary{background:#f0d6bb}.bg-warning-default{background:#cca45f}.bg-black{background:#000}.bg-dark{background:#888}.bg-medium{background:#e0e0e0}.bg-grey{background:#ededed}.bg-light{background:#f6f6f6}.bg-white{background:#fff}.bg-box-shadow{background:#00000014}.bg-navigation-subtitle{background:#528593}.bgc-teal-60b{background-color:#1c443c}.bgc-teal-30b{background-color:#31766a}.bgc-teal-default{background-color:#46a997}.bgc-teal-30w{background-color:#7ec3b6}.bgc-teal-60w{background-color:#b5ddd5}.bgc-teal-secondary{background-color:#cbd6cb}.bgc-teal-90w{background-color:#ecf6f5}.bgc-petrol-60b{background-color:#102930}.bgc-petrol-30b{background-color:#1b4754}.bgc-petrol-default{background-color:#276678}.bgc-petrol-30w{background-color:#6894a0}.bgc-petrol-60w{background-color:#a9c2c9}.bgc-petrol-secondary{background-color:#c8d7de}.bgc-petrol-90w{background-color:#e9f0f1}.bgc-error-60b{background-color:#513131}.bgc-error-30b{background-color:#8e5655}.bgc-error-60w{background-color:#e3c3c6}.bgc-error-secondary{background-color:#f0dad9}.bgc-error-default{background-color:#cb7b7a}.bgc-warning-secondary{background-color:#f0d6bb}.bgc-warning-default{background-color:#cca45f}.bgc-black{background-color:#000}.bgc-dark{background-color:#888}.bgc-medium{background-color:#e0e0e0}.bgc-grey{background-color:#ededed}.bgc-light{background-color:#f6f6f6}.bgc-white{background-color:#fff}.bgc-box-shadow{background-color:#00000014}.bgc-navigation-subtitle{background-color:#528593}:host{width:320px;display:block}:host.full-width{width:100%}:host ui-tag{height:32px;margin:4px}:host ui-tag ::ng-deep .tag-container{margin:0!important}:host ui-tag ::ng-deep .tag-wrapper{max-width:fit-content}.large-size input{margin:10px 0}.large-size .selected-items{margin:5px 0;flex-wrap:wrap;--tag-max-width: calc(100% - 8px) }.large-size .selected-items .value-tag ::ng-deep .tag-container{max-width:100%!important}.large-size .input-container{margin:auto 0;width:calc(100% - 25px);display:flex;flex-direction:column-reverse}.large-size .input-container.has-multiple-selections{width:calc(100% - 50px)}.large-size .input-container.autocomplete-variant{width:100%}.large-size .input-container.autocomplete-variant.has-multiple-selections{width:calc(100% - 26px)}.large-size ::ng-deep .mat-mdc-form-field-infix,.large-size .mat-mdc-form-field-flex{align-items:unset!important}.disabled *{pointer-events:none}.input-container{width:100%;margin:auto;display:flex;flex-direction:row-reverse}.input-container .selected-items{display:flex;padding-left:4px;visibility:hidden}.input-container .selected-items.measured{visibility:visible}.input-container .selected-items .value-tag{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .value-tag ::ng-deep .tag-container{max-width:var(--tag-max-width, fit-content)}.input-container .selected-items .selected-count{white-space:nowrap}.input-container .selected-items.measurement-container{visibility:hidden;position:absolute;height:0;overflow:hidden;pointer-events:none}.input-container .overlap-count{font-size:14px;line-height:20px}.input-container .overlap-count ui-tag{display:block}.input-container input{margin-left:6px;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}.input-container input.unset-margin{margin-top:unset}.input-container input.no-caret{cursor:pointer;caret-color:transparent!important}.add-suggestion{margin:0 5px;color:#000;font-weight:700}.remove-selected{cursor:pointer;margin-right:2px;border-radius:50px;height:fit-content}.remove-selected.large-input-icon{margin-top:10px}.arrow-state{height:24px;cursor:pointer}.arrow-state.large-input-icon{margin-top:10px}.arrow-state.opened{transform:rotateX(180deg)}::ng-deep .autocomplete-wrapper .mat-mdc-form-field{width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#cb7b7a}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{display:flex;flex-flow:column;row-gap:4px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors ui-icon{margin-right:8px}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error .errors{display:flex}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint.error svg{color:#e02800!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-bottom-align:before{height:0}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper{padding:0 0 12px;font-size:12px;line-height:16px;position:relative}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-hint-wrapper .mat-form-field-hint-spacer{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field.hide-bottom-content .mat-mdc-form-field-subscript-wrapper{display:none}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above{top:28px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{top:22px!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-text-field-wrapper{padding-left:12px!important;height:unset!important;max-height:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-focused .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label{color:#276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch{border-bottom:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading{border-left:2px solid #276678!important;border-bottom:2px solid #276678!important;border-top:2px solid #276678!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing{border:2px solid #276678!important;border-left:unset!important}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-infix,::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mat-mdc-form-field-flex{min-height:48px!important;max-height:184px!important;overflow-y:auto;overflow-x:hidden;padding:0!important;display:flex;justify-content:center;text-align:center;align-items:center;flex-direction:row;width:100%}::ng-deep .autocomplete-wrapper .mat-mdc-form-field .mdc-line-ripple{display:none!important}::ng-deep .mat-mdc-autocomplete-panel{box-shadow:0 8px 24px 4px #00000014;max-height:312px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:hover:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option:focus:not(.mdc-list-item--disabled),::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mat-mdc-option-active,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected:not(.mat-mdc-option-multiple):not(.mdc-list-item--disabled){background:#e9f0f1!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option{padding-right:32px;padding-left:12px!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .option-image{width:24px;height:24px;margin-right:8px;object-fit:cover;flex-shrink:0}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option ui-icon{display:none;position:absolute;right:0;bottom:calc(50% - 8px);margin:0 10px}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option{background:#e9f0f1}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.selected-option ui-icon{display:block}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option.mdc-list-item--selected .mdc-list-item__primary-text,::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item--activated .mdc-list-item__primary-text{color:#000!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mdc-list-item__primary-text{display:flex;align-items:center}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-option .mat-pseudo-checkbox{display:none}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label{font-weight:700!important}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-optgroup-label .mdc-list-item__primary-text{color:#000;font-size:12px;line-height:16px;font-weight:700}::ng-deep .mat-mdc-autocomplete-panel .mat-mdc-optgroup .mat-mdc-option{padding-left:16px!important}.active-field .mdc-notched-outline__leading{border-left-width:2px;border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__notch{border-top-width:2px;border-bottom-width:2px}.active-field .mdc-notched-outline__trailing{border-top-width:2px;border-bottom-width:2px;border-right-width:2px}.loading-option{display:flex}.loading-option .loading-container{display:flex;justify-content:center;align-items:center;width:100%;height:100%;position:absolute;top:0;left:0}.selected-items--below{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-top:8px}.selected-items--below ui-tag{margin:0}.selected-items--below .clear-all{background:none;border:none;padding:4px 8px;cursor:pointer;color:#000;font-weight:500;font-size:12px;line-height:16px;text-decoration:underline}.selected-items--below .clear-all:disabled{cursor:not-allowed;opacity:.5}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i3.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "directive", type: i3.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i4.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i4.MatLabel, selector: "mat-label" }, { kind: "directive", type: i4.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i5.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: TagComponentModule }, { kind: "component", type: i6.TagComponent, selector: "ui-tag", inputs: ["label", "icon", "allowClose", "readOnly", "isSelected", "showIconWhenSelected", "pinnedBackground", "isDisabled", "applicationTheme", "ariaLabel", "ariaRequired", "showBadge", "notificationsAmount"], outputs: ["isSelectedChange", "close", "press"] }, { kind: "ngmodule", type: IconComponentModule }, { kind: "component", type: i7.IconComponent, selector: "ui-icon", inputs: ["size", "cssClass", "name", "color", "filled", "toggleIconStyle", "applicationTheme", "useFullIconName"] }, { kind: "ngmodule", type: SpinnerComponentModule }, { kind: "component", type: i8.SpinnerComponent, selector: "ui-spinner", inputs: ["size", "isLoader", "text", "applicationTheme", "iconName", "iconSize"] }, { kind: "component", type: CdkVirtualScrollViewport, selector: "cdk-virtual-scroll-viewport", inputs: ["orientation", "appendOnly"], outputs: ["scrolledIndexChange"] }, { kind: "directive", type: CdkVirtualForOf, selector: "[cdkVirtualFor][cdkVirtualForOf]", inputs: ["cdkVirtualForOf", "cdkVirtualForTrackBy", "cdkVirtualForTemplate", "cdkVirtualForTemplateCacheSize"] }, { kind: "directive", type: CdkFixedSizeVirtualScroll, selector: "cdk-virtual-scroll-viewport[itemSize]", inputs: ["itemSize", "minBufferPx", "maxBufferPx"] }, { kind: "directive", type: PreventInputDirective, selector: "[uiPreventInput]", inputs: ["uiPreventInput"] }, { kind: "directive", type: SelectTextDirective, selector: "[selectText]", inputs: ["selectText"] }, { kind: "directive", type: AutocompleteOverflowDetectDirective, selector: "[uiAutocompleteOverflowDetect]", inputs: ["measureContainer", "itemSelector", "reserveWidth"], exportAs: ["autocompleteOverflowDetect"] }, { kind: "ngmodule", type: ValidationErrorModule }, { kind: "component", type: i9.ValidationErrorComponent, selector: "ui-validation-error", inputs: ["ngControl", "touchedOn", "errorMessage", "label", "applicationTheme", "customErrors"] }, { kind: "ngmodule", type: MatTooltipModule }, { kind: "directive", type: i10.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i1.UpperCasePipe, name: "uppercase" }, { kind: "pipe", type: UiTranslatePipe, name: "uiTranslate" }, { kind: "pipe", type: TransformItemPipe, name: "transformItem" }, { kind: "pipe", type: IncludesPipe, name: "includes" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
844
844
|
}
|
|
845
845
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.18", ngImport: i0, type: AutocompleteV2Component, decorators: [{
|
|
846
846
|
type: Component,
|