cps-ui-kit 21.8.0 → 21.9.0

package/fesm2022/cps-ui-kit.mjs

@@ -1,7 +1,7 @@
 import * as i2 from '@angular/common';
 import { DOCUMENT, CommonModule, isPlatformBrowser } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, SecurityContext, HostListener, Directive, Pipe, PLATFORM_ID, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Self, Optional, HostBinding, numberAttribute, booleanAttribute, Injectable, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf, signal } from '@angular/core';
+import { InjectionToken, inject, Input, Inject, Component, EventEmitter, Output, input, computed, ElementRef, SecurityContext, Directive, Pipe, PLATFORM_ID, ViewEncapsulation, ChangeDetectionStrategy, ViewChild, Self, Optional, HostBinding, booleanAttribute, Injectable, ChangeDetectorRef, ViewChildren, TemplateRef, ContentChildren, Host, HostListener, ContentChild, RendererStyleFlags2, createComponent, createEnvironmentInjector, SkipSelf, signal } from '@angular/core';
 import * as i1$2 from '@angular/forms';
 import { Validators, FormsModule, FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { Subject, takeUntil, debounceTime, distinctUntilChanged, take, catchError, of, Subscription, fromEvent } from 'rxjs';
@@ -429,11 +429,11 @@ class CpsChipComponent {
         this.closed.emit(this.label);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsChipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled", closeButtonAriaLabel: "closeButtonAriaLabel" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsChipComponent, isStandalone: true, selector: "cps-chip", inputs: { label: "label", icon: "icon", iconColor: "iconColor", iconPosition: "iconPosition", closable: "closable", disabled: "disabled", closeButtonAriaLabel: "closeButtonAriaLabel" }, outputs: { closed: "closed" }, usesOnChanges: true, ngImport: i0, template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsChipComponent, decorators: [{
             type: Component,
-            args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"] }]
+            args: [{ imports: [CommonModule, CpsIconComponent], selector: 'cps-chip', template: "<div [ngClass]=\"classesList\" [attr.aria-label]=\"label\">\n  @if (icon) {\n    <cps-icon\n      class=\"cps-chip-icon\"\n      [icon]=\"icon\"\n      [color]=\"iconColor\"></cps-icon>\n  }\n  <span class=\"cps-chip-label\">{{ label }}</span>\n  @if (closable) {\n    <cps-icon\n      role=\"button\"\n      [tabindex]=\"disabled ? -1 : 0\"\n      [attr.aria-label]=\"closeButtonAriaLabel\"\n      [attr.aria-disabled]=\"disabled\"\n      class=\"cps-chip-close-icon\"\n      icon=\"close-x\"\n      size=\"xsmall\"\n      color=\"text-darkest\"\n      (click)=\"onCloseClick($event)\"\n      (keydown.enter)=\"onCloseClick($event)\"\n      (keydown.space)=\"onCloseClick($event)\">\n    </cps-icon>\n  }\n</div>\n", styles: [":host{width:fit-content;display:inline-block;-webkit-user-select:none;-ms-user-select:none;user-select:none}:host .cps-chip{align-items:center;display:inline-flex;background-color:var(--cps-color-bg-dark);border-radius:.875rem;line-height:1rem;padding:.25rem .75rem;cursor:default}:host .cps-chip-close-icon{margin-left:.375rem;cursor:pointer}:host .cps-chip-close-icon:focus{outline:none}:host .cps-chip-close-icon:focus-visible{outline:none;position:relative}:host .cps-chip-close-icon:focus-visible:before,:host .cps-chip-close-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-chip-close-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-chip-close-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-chip-close-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-calm)!important}:host .cps-chip-label{font-size:.875rem;color:var(--cps-color-text-darkest);font-family:Source Sans Pro,sans-serif;font-style:normal;font-weight:400}:host .cps-chip.cps-chip-disabled{pointer-events:none;background-color:var(--cps-color-bg-mid)}:host .cps-chip.cps-chip-disabled .cps-chip-label{color:var(--cps-color-text-mild)}:host .cps-chip.cps-chip-disabled .cps-chip-icon ::ng-deep .cps-icon,:host .cps-chip.cps-chip-disabled .cps-chip-close-icon ::ng-deep .cps-icon{color:var(--cps-color-text-mild)!important}:host .cps-chip.cps-chip--icon-before .cps-chip-icon{margin-right:.375rem}:host .cps-chip.cps-chip--icon-after .cps-chip-icon{margin-left:.375rem;order:1}\n"] }]
         }], propDecorators: { label: [{
                 type: Input
             }], icon: [{
@@ -515,130 +515,265 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
  */
 class CpsTooltipDirective {
     constructor() {
+        /**
+         * Tooltip text or html to show.
+         * @group Props
+         */
+        this.tooltip = input.required({ ...(ngDevMode ? { debugName: "tooltip" } : /* istanbul ignore next */ {}), alias: 'cpsTooltip' });
         /**
          * Delay to show the tooltip in milliseconds, it can be of type string or number.
          * @group Props
+         * @default 300
          */
-        this.tooltipOpenDelay = 300;
+        this.tooltipOpenDelay = input(300, ...(ngDevMode ? [{ debugName: "tooltipOpenDelay" }] : /* istanbul ignore next */ []));
         /**
          * Delay to hide the tooltip in milliseconds, it can be of type string or number.
          * @group Props
+         * @default 300
          */
-        this.tooltipCloseDelay = 300;
+        this.tooltipCloseDelay = input(300, ...(ngDevMode ? [{ debugName: "tooltipCloseDelay" }] : /* istanbul ignore next */ []));
         /**
          * Determines whether the tooltip should open on hover, click or focus.
          * @group Props
+         * @default hover
          */
-        this.tooltipOpenOn = 'hover';
+        this.tooltipOpenOn = input('hover', ...(ngDevMode ? [{ debugName: "tooltipOpenOn" }] : /* istanbul ignore next */ []));
         /**
          * Position of the tooltip, it can be 'top', 'bottom', 'left' or 'right'.
          * @group Props
+         * @default top
          */
-        this.tooltipPosition = 'top';
+        this.tooltipPosition = input('top', ...(ngDevMode ? [{ debugName: "tooltipPosition" }] : /* istanbul ignore next */ []));
         /**
          * Determines whether the tooltip is persistent.
          * @group Props
+         * @default false
          */
-        this.tooltipPersistent = false;
+        this.tooltipPersistent = input(false, ...(ngDevMode ? [{ debugName: "tooltipPersistent" }] : /* istanbul ignore next */ []));
         /**
          * When present, it specifies that the tooltip should be disabled.
          * @group Props
+         * @default false
          */
-        this.tooltipDisabled = false;
+        this.tooltipDisabled = input(false, ...(ngDevMode ? [{ debugName: "tooltipDisabled" }] : /* istanbul ignore next */ []));
         /**
          * Max width of the tooltip of type number denoting pixels or string.
          * @group Props
+         * @default 100%
          */
-        this.tooltipMaxWidth = '100%';
+        this.tooltipMaxWidth = input('100%', ...(ngDevMode ? [{ debugName: "tooltipMaxWidth" }] : /* istanbul ignore next */ []));
         /**
          * Tooltip content class for styling.
          * @group Props
+         * @default cps-tooltip-content
          */
-        this.tooltipContentClass = 'cps-tooltip-content';
+        this.tooltipContentClass = input('cps-tooltip-content', ...(ngDevMode ? [{ debugName: "tooltipContentClass" }] : /* istanbul ignore next */ []));
         /**
-         * Tooltip offset for styling.
+         * Tooltip offset, a number denoting pixels or a string.
          * @group Props
+         * @default 0.5rem
          */
-        this.tooltipOffset = 8;
+        this.tooltipOffset = input('0.5rem', ...(ngDevMode ? [{ debugName: "tooltipOffset" }] : /* istanbul ignore next */ []));
+        this.cvtTooltipOffset = computed(() => convertSize(this.tooltipOffset()), ...(ngDevMode ? [{ debugName: "cvtTooltipOffset" }] : /* istanbul ignore next */ []));
+        this._tooltipId = generateUniqueId('cps-tooltip');
+        this._rootFontSizePx = 16;
         this._elementRef = inject((ElementRef));
         this._document = inject(DOCUMENT);
         this._domSanitizer = inject(DomSanitizer);
-        this._createTooltip = () => {
-            if (this._popup)
+        this._onScrollDestroy = () => {
+            this._destroyTooltip(true);
+        };
+        this._onPopupKeydown = (event) => {
+            if (event.key !== 'Tab' || !this._popup)
+                return;
+            const focusable = this._focusableIn(this._popup);
+            if (!focusable.length)
                 return;
-            if (this.tooltipDisabled)
+            const first = focusable[0];
+            const last = focusable[focusable.length - 1];
+            const active = this._document.activeElement;
+            if (!event.shiftKey && active === last) {
+                event.preventDefault();
+                const next = this._getNextFocusableAfterTrigger();
+                next ? next.focus() : this._ariaTarget?.focus();
+            }
+            else if (event.shiftKey && active === first) {
+                event.preventDefault();
+                this._ariaTarget?.focus();
+            }
+        };
+        this._onPopupFocusOut = (event) => {
+            const newFocus = event.relatedTarget;
+            if (!this._popup?.contains(newFocus) &&
+                !this._elementRef.nativeElement.contains(newFocus)) {
+                this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay());
+            }
+        };
+        this._createTooltip = () => {
+            if (this._popup || this.tooltipDisabled())
                 return;
             this._popup = this._document.createElement('div');
-            this._constructElement(this._popup);
-            if (this.tooltipPersistent)
-                this._popup.addEventListener('click', this._destroyTooltip);
-            this.window.addEventListener('scroll', this._destroyTooltip, true);
+            const popupContent = this._document.createElement('div');
+            popupContent.innerHTML =
+                this._domSanitizer.sanitize(SecurityContext.HTML, this.tooltip()) ||
+                    'Add your text to this tooltip';
+            popupContent.className = this.tooltipContentClass();
+            this._popup.appendChild(popupContent);
+            this._popup.classList.add('cps-tooltip');
+            this._popup.style.maxWidth = convertSize(this.tooltipMaxWidth());
+            this._popup.setAttribute('role', 'tooltip');
+            this._popup.id = this._tooltipId;
+            this._document.body.appendChild(this._popup);
+            this._ariaTarget?.setAttribute('aria-describedby', this._tooltipId);
         };
-        this._destroyTooltip = (event = undefined) => {
-            const removeFromDOM = () => {
-                this._popup?.remove();
-                this._popup = undefined;
-            };
-            this.window.removeEventListener('scroll', this._destroyTooltip, true);
+        this._positionAndShow = () => {
             if (!this._popup)
                 return;
-            this._popup.removeEventListener('click', this._destroyTooltip);
-            const noAnimation = ['scroll', 'resize'].includes(event?.type);
-            if (noAnimation) {
-                removeFromDOM();
+            const coords = this._getCoords();
+            if (!coords) {
+                this._destroyTooltip();
+                console.error('Not enough space on the screen for the tooltip!');
+                return;
+            }
+            this._popup.style.left = `${this._pxToRem(coords.left)}rem`;
+            this._popup.style.top = `${this._pxToRem(coords.top)}rem`;
+            requestAnimationFrame(() => {
+                if (this._popup)
+                    this._popup.style.opacity = '1';
+            });
+            if (this.tooltipPersistent()) {
+                this._popup.addEventListener('focusout', this._onPopupFocusOut);
+                this._popup.addEventListener('keydown', this._onPopupKeydown);
+            }
+            this.window.addEventListener('scroll', this._onScrollDestroy, true);
+        };
+        this._destroyTooltip = (destroyImmediately) => {
+            this.window.removeEventListener('scroll', this._onScrollDestroy, true);
+            if (!this._popup)
+                return;
+            this._popup.removeEventListener('focusout', this._onPopupFocusOut);
+            this._popup.removeEventListener('keydown', this._onPopupKeydown);
+            const popup = this._popup;
+            this._popup = undefined;
+            this._ariaTarget?.removeAttribute('aria-describedby');
+            this._ariaTarget = undefined;
+            if (destroyImmediately) {
+                popup.remove();
             }
             else {
-                const popup = this._popup;
-                requestAnimationFrame(function () {
-                    popup.style.opacity = '0';
-                });
-                setTimeout(() => {
-                    removeFromDOM();
-                }, 200);
+                popup.style.opacity = '0';
+                setTimeout(() => popup.remove(), 200);
             }
         };
         this.window = this._document.defaultView;
     }
+    ngOnInit() {
+        this._rootFontSizePx = parseFloat(getComputedStyle(this._document.documentElement).fontSize || '16');
+    }
     ngOnDestroy() {
-        this._destroyTooltip();
-    }
-    _constructElement(popup) {
-        const popupContent = this._document.createElement('div');
-        popupContent.innerHTML =
-            this._domSanitizer.sanitize(SecurityContext.HTML, this.tooltip) ||
-                'Add your text to this tooltip';
-        popupContent.classList.add(this.tooltipContentClass);
-        popup.appendChild(popupContent);
-        popup.classList.add('cps-tooltip');
-        popup.style.maxWidth = convertSize(this.tooltipMaxWidth);
-        this._document.body.appendChild(popup);
-        requestAnimationFrame(function () {
-            popup.style.opacity = '1';
-        });
-        const coords = this._getCoords();
-        if (!coords) {
-            this._destroyTooltip();
-            throw new Error('Not enough space on the screen for the tooltip!');
+        clearTimeout(this._showTimeout);
+        clearTimeout(this._hideTimeout);
+        this._destroyTooltip(true);
+    }
+    onMouseEnter() {
+        if (this.tooltipOpenOn() === 'hover') {
+            clearTimeout(this._hideTimeout);
+            this._showTimeout = setTimeout(() => {
+                this._createTooltip();
+                this._positionAndShow();
+            }, this.tooltipOpenDelay());
+        }
+    }
+    onMouseLeave() {
+        clearTimeout(this._showTimeout);
+        if (!this.tooltipPersistent()) {
+            this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay());
+        }
+    }
+    // Popup created synchronously so SR resolves aria-describedby on focus.
+    // Visual appearance is delayed by tooltipOpenDelay.
+    onFocus() {
+        if (this.tooltipOpenOn() === 'hover' || this.tooltipOpenOn() === 'focus') {
+            this._ariaTarget = this._resolveAriaTarget();
+            clearTimeout(this._hideTimeout);
+            clearTimeout(this._showTimeout);
+            this._createTooltip();
+            this._showTimeout = setTimeout(this._positionAndShow, this.tooltipOpenDelay());
+        }
+    }
+    onFocusOut(event) {
+        clearTimeout(this._showTimeout);
+        if (!this._popup?.contains(event.relatedTarget)) {
+            this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay());
         }
-        popup.style.left = coords.left.toString() + 'px';
-        popup.style.top = coords.top.toString() + 'px';
+    }
+    // Tab from the trigger moves focus into the persistent tooltip instead of
+    // the next page element, so keyboard users can interact with tooltip content.
+    onTabFromTrigger(event) {
+        if (!this.tooltipPersistent() || !this._popup)
+            return;
+        const focusable = this._focusableIn(this._popup);
+        if (!focusable.length)
+            return;
+        event.preventDefault();
+        focusable[0].focus();
+    }
+    onClick() {
+        if (this.tooltipOpenOn() === 'click') {
+            this._ariaTarget = this._resolveAriaTarget();
+            clearTimeout(this._hideTimeout);
+            this._createTooltip();
+            this._positionAndShow();
+            this._announce(this._popup?.textContent ?? '');
+        }
+    }
+    onDocumentClick(target) {
+        if (this.tooltipPersistent() && this._popup) {
+            const el = target;
+            if (!el?.isConnected)
+                return;
+            const clickedInside = this._elementRef.nativeElement.contains(el) || this._popup.contains(el);
+            if (!clickedInside) {
+                this._destroyTooltip();
+            }
+        }
+    }
+    onPageResize() {
+        this._destroyTooltip(true);
+    }
+    _isInsideScreen(coords, popupRect) {
+        const { scrollX, scrollY, innerWidth, innerHeight } = this.window;
+        return (coords.top >= scrollY &&
+            coords.left >= scrollX &&
+            coords.left + popupRect.width <= scrollX + innerWidth &&
+            coords.top + popupRect.height <= scrollY + innerHeight);
+    }
+    _pxToRem(px) {
+        return px / this._rootFontSizePx;
+    }
+    _getOffsetPx() {
+        const { value, unit } = parseSize(this.cvtTooltipOffset());
+        if (unit === 'px')
+            return value;
+        if (unit === 'rem')
+            return value * this._rootFontSizePx;
+        if (unit === 'em')
+            return (value *
+                parseFloat(getComputedStyle(this._elementRef.nativeElement).fontSize || '16'));
+        throw new Error(`Unsupported unit "${unit}" for tooltipOffset.`);
     }
     _getCoords() {
-        const isInsideScreen = (coords) => {
-            return (coords.top >= 0 &&
-                coords.left >= 0 &&
-                coords.left + popupRect.width <= this.window.innerWidth &&
-                coords.top + popupRect.height <= this.window.innerHeight);
-        };
+        if (!this._popup)
+            return undefined;
         let positions = ['top', 'bottom', 'left', 'right'];
-        positions = positions.filter((item) => item !== this.tooltipPosition);
-        positions.unshift(this.tooltipPosition);
+        positions = positions.filter((item) => item !== this.tooltipPosition());
+        positions.unshift(this.tooltipPosition());
         const targetEl = this._elementRef.nativeElement;
         const targetElRect = targetEl.getBoundingClientRect();
         const popupRect = this._popup.getBoundingClientRect();
         for (const pos of positions) {
             const coords = this._getCoordsForPosition(pos, targetEl, targetElRect, popupRect);
-            if (isInsideScreen(coords)) {
+            if (this._isInsideScreen(coords, popupRect)) {
                 return coords;
             }
         }
@@ -651,21 +786,21 @@ class CpsTooltipDirective {
                     left: targetElRect.left +
                         this.window.scrollX +
                         (targetEl.offsetWidth - popupRect.width) / 2,
-                    top: targetElRect.bottom + this.window.scrollY + this.tooltipOffset
+                    top: targetElRect.bottom + this.window.scrollY + this._getOffsetPx()
                 };
             case 'left':
                 return {
-                    left: targetElRect.left -
+                    left: targetElRect.left +
                         this.window.scrollX -
                         popupRect.width -
-                        this.tooltipOffset,
+                        this._getOffsetPx(),
                     top: targetElRect.top +
                         this.window.scrollY +
                         (targetEl.offsetHeight - popupRect.height) / 2
                 };
             case 'right':
                 return {
-                    left: targetElRect.right + this.window.scrollX + this.tooltipOffset,
+                    left: targetElRect.right + this.window.scrollX + this._getOffsetPx(),
                     top: targetElRect.top +
                         this.window.scrollY +
                         (targetEl.offsetHeight - popupRect.height) / 2
@@ -678,107 +813,78 @@ class CpsTooltipDirective {
                     top: targetElRect.top +
                         this.window.scrollY -
                         popupRect.height -
-                        this.tooltipOffset
+                        this._getOffsetPx()
                 };
         }
     }
-    onMouseEnter() {
-        if (this.tooltipOpenOn === 'hover') {
-            clearTimeout(this._hideTimeout);
-            this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
-        }
-    }
-    onMouseLeave() {
-        clearTimeout(this._showTimeout);
-        if (!this.tooltipPersistent) {
-            this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
-        }
-    }
-    onFocus() {
-        if (this.tooltipOpenOn === 'focus') {
-            clearTimeout(this._hideTimeout);
-            this._showTimeout = setTimeout(this._createTooltip, this.tooltipOpenDelay);
-        }
-    }
-    onBlur() {
-        clearTimeout(this._showTimeout);
-        if (!this.tooltipPersistent && this.tooltipOpenOn === 'focus') {
-            this._hideTimeout = setTimeout(this._destroyTooltip, this.tooltipCloseDelay);
-        }
-    }
-    onClick() {
-        if (this.tooltipOpenOn === 'click') {
-            clearTimeout(this._hideTimeout);
-            this._showTimeout = setTimeout(this._createTooltip, 0);
-        }
-    }
-    onDocumentClick(target) {
-        if (this.tooltipPersistent && this._popup) {
-            if (!target?.isConnected) {
-                return;
-            }
-            const clickedInside = this._elementRef?.nativeElement?.contains(target);
-            if (!clickedInside) {
-                this._destroyTooltip();
-            }
-        }
-    }
-    onPageResize(event) {
-        if (this._popup)
-            this._destroyTooltip(event);
+    _focusableIn(el) {
+        const result = [];
+        const walker = this._document.createTreeWalker(el, NodeFilter.SHOW_ELEMENT);
+        let node = walker.nextNode();
+        while (node) {
+            const child = node;
+            if (child.tabIndex >= 0 && !child.disabled) {
+                result.push(child);
+            }
+            node = walker.nextNode();
+        }
+        return result;
+    }
+    _getNextFocusableAfterTrigger() {
+        const all = [];
+        const walker = this._document.createTreeWalker(this._document.body, NodeFilter.SHOW_ELEMENT);
+        let node = walker.nextNode();
+        while (node) {
+            const el = node;
+            if (el.tabIndex >= 0 &&
+                !el.disabled &&
+                !this._popup?.contains(el)) {
+                all.push(el);
+            }
+            node = walker.nextNode();
+        }
+        const trigger = this._elementRef.nativeElement;
+        const triggerFocusables = all.filter((el) => trigger.contains(el) || el === trigger);
+        const last = triggerFocusables[triggerFocusables.length - 1] ?? trigger;
+        const idx = all.indexOf(last);
+        return idx >= 0 && idx < all.length - 1 ? all[idx + 1] : null;
+    }
+    _resolveAriaTarget() {
+        return this._document.activeElement ?? undefined;
+    }
+    // aria-describedby is not read by SR on click trigger.
+    // Use a self-removing live region. It must exist in DOM
+    // before content is set, hence the 100ms delay.
+    _announce(text) {
+        const el = this._document.createElement('div');
+        el.setAttribute('aria-live', 'assertive');
+        el.setAttribute('aria-atomic', 'true');
+        el.className = 'cps-sr-only';
+        this._document.body.appendChild(el);
+        setTimeout(() => {
+            el.textContent = text;
+            setTimeout(() => el.remove(), 1000);
+        }, 100);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTooltipDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: ["cpsTooltip", "tooltip"], tooltipOpenDelay: "tooltipOpenDelay", tooltipCloseDelay: "tooltipCloseDelay", tooltipOpenOn: "tooltipOpenOn", tooltipPosition: "tooltipPosition", tooltipPersistent: "tooltipPersistent", tooltipDisabled: "tooltipDisabled", tooltipMaxWidth: "tooltipMaxWidth", tooltipContentClass: "tooltipContentClass", tooltipOffset: "tooltipOffset" }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focus": "onFocus()", "blur": "onBlur()", "click": "onClick()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize($event)" } }, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "21.2.8", type: CpsTooltipDirective, isStandalone: true, selector: "[cpsTooltip]", inputs: { tooltip: { classPropertyName: "tooltip", publicName: "cpsTooltip", isSignal: true, isRequired: true, transformFunction: null }, tooltipOpenDelay: { classPropertyName: "tooltipOpenDelay", publicName: "tooltipOpenDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipCloseDelay: { classPropertyName: "tooltipCloseDelay", publicName: "tooltipCloseDelay", isSignal: true, isRequired: false, transformFunction: null }, tooltipOpenOn: { classPropertyName: "tooltipOpenOn", publicName: "tooltipOpenOn", isSignal: true, isRequired: false, transformFunction: null }, tooltipPosition: { classPropertyName: "tooltipPosition", publicName: "tooltipPosition", isSignal: true, isRequired: false, transformFunction: null }, tooltipPersistent: { classPropertyName: "tooltipPersistent", publicName: "tooltipPersistent", isSignal: true, isRequired: false, transformFunction: null }, tooltipDisabled: { classPropertyName: "tooltipDisabled", publicName: "tooltipDisabled", isSignal: true, isRequired: false, transformFunction: null }, tooltipMaxWidth: { classPropertyName: "tooltipMaxWidth", publicName: "tooltipMaxWidth", isSignal: true, isRequired: false, transformFunction: null }, tooltipContentClass: { classPropertyName: "tooltipContentClass", publicName: "tooltipContentClass", isSignal: true, isRequired: false, transformFunction: null }, tooltipOffset: { classPropertyName: "tooltipOffset", publicName: "tooltipOffset", isSignal: true, isRequired: false, transformFunction: null } }, host: { listeners: { "mouseenter": "onMouseEnter()", "mouseleave": "onMouseLeave()", "focusin": "onFocus()", "focusout": "onFocusOut($event)", "keydown.tab": "onTabFromTrigger($event)", "click": "onClick()", "document:click": "onDocumentClick($event.target)", "window:resize": "onPageResize()" } }, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsTooltipDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[cpsTooltip]',
-                    standalone: true
+                    host: {
+                        '(mouseenter)': 'onMouseEnter()',
+                        '(mouseleave)': 'onMouseLeave()',
+                        '(focusin)': 'onFocus()',
+                        '(focusout)': 'onFocusOut($event)',
+                        '(keydown.tab)': 'onTabFromTrigger($event)',
+                        '(click)': 'onClick()',
+                        '(document:click)': 'onDocumentClick($event.target)',
+                        '(window:resize)': 'onPageResize()'
+                    }
                 }]
-        }], ctorParameters: () => [], propDecorators: { tooltip: [{
-                type: Input,
-                args: ['cpsTooltip']
-            }], tooltipOpenDelay: [{
-                type: Input
-            }], tooltipCloseDelay: [{
-                type: Input
-            }], tooltipOpenOn: [{
-                type: Input
-            }], tooltipPosition: [{
-                type: Input
-            }], tooltipPersistent: [{
-                type: Input
-            }], tooltipDisabled: [{
-                type: Input
-            }], tooltipMaxWidth: [{
-                type: Input
-            }], tooltipContentClass: [{
-                type: Input
-            }], tooltipOffset: [{
-                type: Input
-            }], onMouseEnter: [{
-                type: HostListener,
-                args: ['mouseenter']
-            }], onMouseLeave: [{
-                type: HostListener,
-                args: ['mouseleave']
-            }], onFocus: [{
-                type: HostListener,
-                args: ['focus']
-            }], onBlur: [{
-                type: HostListener,
-                args: ['blur']
-            }], onClick: [{
-                type: HostListener,
-                args: ['click']
-            }], onDocumentClick: [{
-                type: HostListener,
-                args: ['document:click', ['$event.target']]
-            }], onPageResize: [{
-                type: HostListener,
-                args: ['window:resize', ['$event']]
-            }] } });
+        }], ctorParameters: () => [], propDecorators: { tooltip: [{ type: i0.Input, args: [{ isSignal: true, alias: "cpsTooltip", required: true }] }], tooltipOpenDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOpenDelay", required: false }] }], tooltipCloseDelay: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipCloseDelay", required: false }] }], tooltipOpenOn: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOpenOn", required: false }] }], tooltipPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPosition", required: false }] }], tooltipPersistent: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipPersistent", required: false }] }], tooltipDisabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipDisabled", required: false }] }], tooltipMaxWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipMaxWidth", required: false }] }], tooltipContentClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipContentClass", required: false }] }], tooltipOffset: [{ type: i0.Input, args: [{ isSignal: true, alias: "tooltipOffset", required: false }] }] } });
 
 /**
  * CpsInfoCircleComponent is a component that provides information by means of the info icon with the tooltip on hover.
@@ -818,11 +924,11 @@ class CpsInfoCircleComponent {
         this.tooltipPersistent = false;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsInfoCircleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsInfoCircleComponent, isStandalone: true, selector: "cps-info-circle", inputs: { size: "size", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, ngImport: i0, template: "<cps-icon\n  icon=\"info-circle\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\"\n  [tooltipMaxWidth]=\"tooltipMaxWidth\"\n  [tooltipPersistent]=\"tooltipPersistent\"\n  [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.8", type: CpsInfoCircleComponent, isStandalone: true, selector: "cps-info-circle", inputs: { size: "size", tooltipText: "tooltipText", tooltipPosition: "tooltipPosition", tooltipContentClass: "tooltipContentClass", tooltipMaxWidth: "tooltipMaxWidth", tooltipPersistent: "tooltipPersistent" }, ngImport: i0, template: "<cps-icon\n  icon=\"info-circle\"\n  role=\"img\"\n  aria-label=\"Information\"\n  tabindex=\"0\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\"\n  [tooltipMaxWidth]=\"tooltipMaxWidth\"\n  [tooltipPersistent]=\"tooltipPersistent\"\n  [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}:host cps-icon:focus-visible{outline:none;position:relative}:host cps-icon:focus-visible:before,:host cps-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host cps-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host cps-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}\n"], dependencies: [{ kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsInfoCircleComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'cps-info-circle', imports: [CpsIconComponent, CpsTooltipDirective], template: "<cps-icon\n  icon=\"info-circle\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\"\n  [tooltipMaxWidth]=\"tooltipMaxWidth\"\n  [tooltipPersistent]=\"tooltipPersistent\"\n  [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}\n"] }]
+            args: [{ selector: 'cps-info-circle', imports: [CpsIconComponent, CpsTooltipDirective], template: "<cps-icon\n  icon=\"info-circle\"\n  role=\"img\"\n  aria-label=\"Information\"\n  tabindex=\"0\"\n  [size]=\"size\"\n  color=\"info\"\n  [cpsTooltip]=\"tooltipText\"\n  tooltipOpenDelay=\"0\"\n  tooltipCloseDelay=\"100\"\n  [tooltipPosition]=\"tooltipPosition\"\n  [tooltipMaxWidth]=\"tooltipMaxWidth\"\n  [tooltipPersistent]=\"tooltipPersistent\"\n  [tooltipContentClass]=\"tooltipContentClass\">\n</cps-icon>\n", styles: [":host{display:inline-flex}:host cps-icon:focus-visible{outline:none;position:relative}:host cps-icon:focus-visible:before,:host cps-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host cps-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host cps-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}\n"] }]
         }], propDecorators: { size: [{
                 type: Input
             }], tooltipText: [{
@@ -2390,7 +2496,7 @@ class CpsAutocompleteComponent {
         return px / this._rootFontSizePx;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsAutocompleteComponent, deps: [{ token: i1$2.NgControl, optional: true, self: true }, { token: DOCUMENT }, { token: i0.ChangeDetectorRef }, { token: LabelByValuePipe }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"optionHighlightedIndex === 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-mild);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsAutocompleteComponent, isStandalone: true, selector: "cps-autocomplete", inputs: { label: "label", ariaLabel: "ariaLabel", placeholder: "placeholder", hint: "hint", returnObject: "returnObject", multiple: "multiple", disabled: "disabled", width: "width", selectAll: "selectAll", showChevron: "showChevron", withOptionsAliases: "withOptionsAliases", useOptionsAliasesWhenNoMatch: "useOptionsAliasesWhenNoMatch", optionAlias: "optionAlias", chips: "chips", closableChips: "closableChips", clearable: "clearable", openOnClear: "openOnClear", keepInitialOrder: "keepInitialOrder", optionLabel: "optionLabel", optionValue: "optionValue", optionInfo: "optionInfo", hideDetails: "hideDetails", persistentClear: "persistentClear", prefixIcon: "prefixIcon", prefixIconSize: "prefixIconSize", loading: "loading", loadingMessage: "loadingMessage", showLoadingMessage: "showLoadingMessage", emptyMessage: "emptyMessage", showEmptyMessage: "showEmptyMessage", virtualScroll: "virtualScroll", numToleratedItems: "numToleratedItems", externalError: "externalError", infoTooltip: "infoTooltip", infoTooltipClass: "infoTooltipClass", infoTooltipMaxWidth: "infoTooltipMaxWidth", infoTooltipPersistent: "infoTooltipPersistent", infoTooltipPosition: "infoTooltipPosition", appearance: "appearance", emptyOptionIndex: "emptyOptionIndex", inputChangeDebounceTime: "inputChangeDebounceTime", validating: "validating", _value: ["value", "_value"], options: "options" }, outputs: { valueChanged: "valueChanged", inputChanged: "inputChanged", focused: "focused", blurred: "blurred" }, providers: [LabelByValuePipe, CheckOptionSelectedPipe], viewQueries: [{ propertyName: "autocompleteBox", first: true, predicate: ["autocompleteBox"], descendants: true }, { propertyName: "autocompleteContainer", first: true, predicate: ["autocompleteContainer"], descendants: true }, { propertyName: "virtualList", first: true, predicate: ["virtualList"], descendants: true }, { propertyName: "optionsMenu", first: true, predicate: ["optionsMenu"], descendants: true }, { propertyName: "optionsList", first: true, predicate: ["optionsList"], descendants: true }, { propertyName: "autocompleteInput", first: true, predicate: ["autocompleteInput"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"optionHighlightedIndex === 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsChipComponent, selector: "cps-chip", inputs: ["label", "icon", "iconColor", "iconPosition", "closable", "disabled", "closeButtonAriaLabel"], outputs: ["closed"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "component", type: CpsInfoCircleComponent, selector: "cps-info-circle", inputs: ["size", "tooltipText", "tooltipPosition", "tooltipContentClass", "tooltipMaxWidth", "tooltipPersistent"] }, { kind: "ngmodule", type: ScrollerModule }, { kind: "component", type: i4$1.Scroller, selector: "p-scroller, p-virtualscroller, p-virtual-scroller, p-virtualScroller", inputs: ["hostName", "id", "style", "styleClass", "tabindex", "items", "itemSize", "scrollHeight", "scrollWidth", "orientation", "step", "delay", "resizeDelay", "appendOnly", "inline", "lazy", "disabled", "loaderDisabled", "columns", "showSpacer", "showLoader", "numToleratedItems", "loading", "autoSize", "trackBy", "options"], outputs: ["onLazyLoad", "onScroll", "onScrollIndexChange"] }, { kind: "directive", type: i4.PrimeTemplate, selector: "[pTemplate]", inputs: ["type", "pTemplate"] }, { kind: "component", type: CpsMenuComponent, selector: "cps-menu", inputs: ["header", "items", "withArrow", "compressed", "focusOnShow", "persistent", "containerClass", "showTransitionOptions", "hideTransitionOptions"], outputs: ["menuShown", "menuHidden", "beforeMenuHidden", "contentClicked"] }, { kind: "pipe", type: LabelByValuePipe, name: "labelByValue" }, { kind: "pipe", type: CheckOptionSelectedPipe, name: "checkOptionSelected" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsAutocompleteComponent, decorators: [{
             type: Component,
@@ -2405,7 +2511,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CheckOptionSelectedPipe,
                         ScrollerModule,
                         CpsMenuComponent
-                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"optionHighlightedIndex === 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-mild);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
+                    ], providers: [LabelByValuePipe, CheckOptionSelectedPipe], selector: 'cps-autocomplete', template: "<div\n  [ngStyle]=\"{ width: cvtWidth }\"\n  class=\"cps-autocomplete\"\n  [ngClass]=\"{\n    disabled: disabled,\n    error: error || externalError,\n    active: isActive,\n    opened: isOpened\n  }\"\n  #autocompleteContainer>\n  @if (label) {\n    <div class=\"cps-autocomplete-label\">\n      <label>{{ label }}</label>\n      @if (infoTooltip) {\n        <cps-info-circle\n          class=\"cps-autocomplete-label-info-circle\"\n          size=\"xsmall\"\n          [tooltipPosition]=\"infoTooltipPosition\"\n          [tooltipContentClass]=\"infoTooltipClass\"\n          [tooltipMaxWidth]=\"infoTooltipMaxWidth\"\n          [tooltipPersistent]=\"infoTooltipPersistent\"\n          [tooltipText]=\"infoTooltip\">\n        </cps-info-circle>\n      }\n    </div>\n  }\n  <div\n    (keydown)=\"onContainerKeyDown($event)\"\n    class=\"cps-autocomplete-container\"\n    [class.active]=\"isActive\"\n    [ngClass]=\"{\n      'persistent-clear': persistentClear,\n      borderless: appearance === 'borderless',\n      underlined: appearance === 'underlined'\n    }\">\n    <div\n      class=\"cps-autocomplete-box\"\n      #autocompleteBox\n      (mousedown)=\"onBoxClick()\">\n      <div class=\"cps-autocomplete-box-area\">\n        @if (prefixIcon) {\n          <cps-icon\n            [icon]=\"prefixIcon\"\n            [style.color]=\"disabled ? 'var(--cps-text-muted)' : null\"\n            [size]=\"prefixIconSize\"\n            class=\"prefix-icon\">\n          </cps-icon>\n        }\n        @if (\n          (!multiple && !isEmptyValue()) || (value?.length > 0 && multiple)\n        ) {\n          <div class=\"cps-autocomplete-box-items\">\n            @if (!multiple) {\n              <span class=\"single-item\">\n                <div class=\"single-item-selection\">\n                  <span [style.opacity]=\"activeSingle ? 0 : 1\">{{\n                    returnObject\n                      ? value[optionLabel]\n                      : (value\n                        | labelByValue: options : optionValue : optionLabel)\n                  }}</span>\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'single-item-input',\n                      inputStyle: activeSingle ? { opacity: '1' } : null\n                    }\n                  \">\n                </ng-container>\n              </span>\n            }\n            @if (multiple && !chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"text-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <div\n                      class=\"text-group-item\"\n                      role=\"listitem\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\">\n                      {{\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue\n                              : options\n                              : optionValue\n                              : optionLabel)\n                      }}{{ !last ? ',' : '' }}\n                    </div>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-item-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n            @if (multiple && chips) {\n              <div class=\"cps-autocomplete-multi-selection-wrapper\">\n                <div\n                  class=\"chips-group\"\n                  role=\"list\"\n                  tabindex=\"-1\"\n                  aria-label=\"Selected options\">\n                  @for (val of value; track val; let last = $last) {\n                    <cps-chip\n                      role=\"listitem\"\n                      closeButtonAriaLabel=\"Remove\"\n                      [disabled]=\"disabled\"\n                      [closable]=\"closableChips\"\n                      (closed)=\"select(val, true)\"\n                      [ngClass]=\"{\n                        'about-to-remove': last && backspaceClickedOnce\n                      }\"\n                      [label]=\"\n                        returnObject\n                          ? val[optionLabel]\n                          : (val\n                            | labelByValue: options : optionValue : optionLabel)\n                      \">\n                    </cps-chip>\n                  }\n                </div>\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    autocompleteInputTemplate;\n                    context: {\n                      inputClass: 'multi-chip-input'\n                    }\n                  \"></ng-container>\n              </div>\n            }\n          </div>\n        } @else {\n          <ng-container\n            *ngTemplateOutlet=\"autocompleteInputTemplate\"></ng-container>\n        }\n        <span class=\"cps-autocomplete-box-icons\">\n          @if (clearable && !disabled) {\n            <span\n              role=\"button\"\n              (click)=\"clear($event)\"\n              (mousedown)=\"$event.preventDefault()\"\n              (keydown.enter)=\"clear($event)\"\n              (keydown.space)=\"clear($event)\"\n              aria-label=\"Clear selection\"\n              [tabindex]=\"disabled ? -1 : 0\"\n              class=\"cps-autocomplete-box-clear-icon\"\n              [ngClass]=\"{\n                'cps-autocomplete-box-clear-icon-hidden':\n                  !persistentClear &&\n                  (!multiple || !value?.length) &&\n                  (multiple || isEmptyValue())\n              }\">\n              <cps-icon icon=\"delete\" size=\"small\"></cps-icon>\n            </span>\n          }\n          @if (showChevron && options.length) {\n            <span\n              class=\"cps-autocomplete-box-chevron\"\n              role=\"button\"\n              (mousedown)=\"onChevronClick($event)\"\n              (keydown.enter)=\"onChevronClick($event)\"\n              (keydown.space)=\"onChevronClick($event)\"\n              [attr.aria-label]=\"\n                isOpened ? 'Collapse options' : 'Expand options'\n              \"\n              [tabindex]=\"disabled ? -1 : 0\">\n              <cps-icon\n                icon=\"chevron-down\"\n                size=\"small\"\n                [color]=\"disabled ? 'text-light' : 'text-dark'\"></cps-icon>\n            </span>\n          }\n        </span>\n      </div>\n    </div>\n\n    <cps-menu\n      #optionsMenu\n      [withArrow]=\"false\"\n      (beforeMenuHidden)=\"onBeforeOptionsHidden($event)\"\n      hideTransitionOptions=\"0s linear\"\n      containerClass=\"cps-autocomplete-options-menu\">\n      <div\n        #optionsList\n        role=\"listbox\"\n        [id]=\"optionsListId\"\n        tabindex=\"-1\"\n        aria-readonly=\"false\"\n        aria-disabled=\"false\"\n        aria-orientation=\"vertical\"\n        [attr.aria-multiselectable]=\"!!multiple\"\n        class=\"cps-autocomplete-options\"\n        [style.width.rem]=\"autocompleteBoxWidthRem\">\n        @if (loading && showLoadingMessage) {\n          <div\n            class=\"cps-autocomplete-options-loading\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ loadingMessage }}\n          </div>\n        }\n        @if (\n          showEmptyMessage &&\n          filteredOptions.length < 1 &&\n          !loading &&\n          inputTextDebounced\n        ) {\n          <div\n            class=\"cps-autocomplete-options-empty\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"true\"\n            aria-selected=\"false\">\n            {{ emptyMessage }}\n          </div>\n        }\n        @if (isSelectAllVisible) {\n          <div\n            class=\"cps-autocomplete-options-option select-all-option\"\n            [id]=\"selectAllOptionId\"\n            role=\"option\"\n            tabindex=\"-1\"\n            aria-disabled=\"false\"\n            [attr.aria-setsize]=\"optionsAriaSetSize\"\n            [attr.aria-posinset]=\"1\"\n            [attr.aria-selected]=\"value?.length === options.length\"\n            [class.allselected]=\"value?.length === options.length\"\n            [class.highlighten]=\"optionHighlightedIndex === 0\"\n            (mousedown)=\"$event.preventDefault()\"\n            (click)=\"toggleAll()\">\n            <span class=\"cps-autocomplete-options-option-left\">\n              @if (multiple) {\n                <span class=\"cps-autocomplete-options-option-check\"> </span>\n              }\n              <span class=\"cps-autocomplete-options-option-label\"\n                >Select all</span\n              >\n            </span>\n          </div>\n        }\n        @if (!loading) {\n          @if (virtualScroll) {\n            <p-virtualscroller\n              #virtualList\n              [items]=\"filteredOptions\"\n              [delay]=\"0\"\n              [scrollHeight]=\"virtualListHeightRem + 'rem'\"\n              [options]=\"{ numToleratedItems: numToleratedItems }\"\n              [itemSize]=\"virtualScrollItemSizePx\">\n              <ng-template pTemplate=\"item\" let-item let-options=\"options\">\n                <ng-container\n                  *ngTemplateOutlet=\"\n                    itemTemplate;\n                    context: {\n                      item: item,\n                      itemIndex: options.index\n                    }\n                  \"></ng-container>\n              </ng-template>\n            </p-virtualscroller>\n          } @else {\n            @for (item of filteredOptions; track item; let itemIndex = $index) {\n              <ng-container\n                *ngTemplateOutlet=\"\n                  itemTemplate;\n                  context: {\n                    item: item,\n                    itemIndex: itemIndex\n                  }\n                \"></ng-container>\n            }\n          }\n        }\n      </div>\n    </cps-menu>\n    @if (loading || validating) {\n      <cps-progress-linear\n        height=\"3\"\n        radius=\"4\"\n        opacity=\"0.3\"\n        class=\"autocomplete-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </div>\n  @if (!error && !externalError && !hideDetails) {\n    <div class=\"cps-autocomplete-hint\">\n      {{ hint }}\n    </div>\n  }\n  @if ((error || externalError) && !hideDetails) {\n    <div class=\"cps-autocomplete-error\" role=\"alert\" aria-live=\"assertive\">\n      {{ error || externalError }}\n    </div>\n  }\n</div>\n\n<ng-template\n  #autocompleteInputTemplate\n  let-inputClass=\"inputClass\"\n  let-inputStyle=\"inputStyle\">\n  <input\n    #autocompleteInput\n    type=\"text\"\n    class=\"cps-autocomplete-box-input\"\n    spellcheck=\"false\"\n    [disabled]=\"disabled\"\n    role=\"combobox\"\n    aria-autocomplete=\"list\"\n    aria-haspopup=\"listbox\"\n    [attr.aria-invalid]=\"error || externalError ? 'true' : null\"\n    [attr.aria-controls]=\"optionsListId\"\n    [attr.aria-activedescendant]=\"activeDescendantId\"\n    [attr.aria-expanded]=\"isOpened\"\n    [attr.aria-required]=\"isRequired || null\"\n    [ngClass]=\"inputClass\"\n    [ngStyle]=\"inputStyle\"\n    [placeholder]=\"\n      (!multiple && isEmptyValue()) || (value?.length < 1 && multiple)\n        ? placeholder\n        : ''\n    \"\n    (input)=\"filterOptions($event)\"\n    (keydown)=\"onInputKeyDown($event)\"\n    [(ngModel)]=\"inputText\"\n    (focus)=\"onFocus()\"\n    (blur)=\"onBlur()\"\n    [attr.aria-label]=\"computedLabel\" />\n</ng-template>\n\n<ng-template #itemTemplate let-item=\"item\" let-itemIndex=\"itemIndex\">\n  <div\n    class=\"cps-autocomplete-options-option\"\n    [id]=\"getOptionId(item, itemIndex)\"\n    role=\"option\"\n    tabindex=\"-1\"\n    [attr.aria-setsize]=\"optionsAriaSetSize\"\n    [attr.aria-posinset]=\"getOptionAriaPosInSet(itemIndex)\"\n    (mousedown)=\"$event.preventDefault()\"\n    (click)=\"onOptionClick(item)\"\n    [class.highlighten]=\"\n      itemIndex === optionHighlightedIndex - (isSelectAllVisible ? 1 : 0)\n    \"\n    [attr.aria-selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \"\n    [class.selected]=\"\n      item | checkOptionSelected: value : multiple : returnObject : optionValue\n    \">\n    <span class=\"cps-autocomplete-options-option-left\">\n      @if (multiple) {\n        <span class=\"cps-autocomplete-options-option-check\"> </span>\n      }\n      <span\n        data-testid=\"cps-autocomplete-options\"\n        class=\"cps-autocomplete-options-option-label\"\n        [class.virtual-row]=\"virtualScroll\"\n        >{{ item[optionLabel] }}</span\n      >\n    </span>\n\n    <span\n      class=\"cps-autocomplete-options-option-right\"\n      [class.virtual-row]=\"virtualScroll\"\n      >{{ item[optionInfo] }}</span\n    >\n  </div>\n</ng-template>\n", styles: [":host{display:flex}:host .cps-autocomplete{position:relative;width:100%;outline:none;font-family:inherit;font-weight:400;display:grid}:host .cps-autocomplete .cps-autocomplete-container{position:relative}:host .cps-autocomplete .cps-autocomplete-container .autocomplete-progress-bar{position:absolute;bottom:.0625rem;padding:0 .0625rem}:host .cps-autocomplete .cps-autocomplete-container.borderless .cps-autocomplete-box,:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{line-height:1;border:none!important;border-radius:0}:host .cps-autocomplete .cps-autocomplete-container.underlined .cps-autocomplete-box{border-bottom:.0625rem solid var(--cps-color-line-light)!important}:host .cps-autocomplete.active .cps-autocomplete-box{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete.active .cps-autocomplete-box .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete.opened .cps-autocomplete-box .cps-autocomplete-box-chevron{top:1.375rem;transform:rotate(180deg)}:host .cps-autocomplete .cps-autocomplete-label{align-items:center;display:inline-flex;margin-bottom:.2rem;color:var(--cps-color-text-dark);background-color:var(--cps-surface-body);font-size:.875rem;font-weight:600}:host .cps-autocomplete .cps-autocomplete-label .cps-autocomplete-label-info-circle{margin-left:.5rem;pointer-events:all}:host .cps-autocomplete .persistent-clear .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container.active .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon,:host .cps-autocomplete .cps-autocomplete-container:hover .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:not(:focus):not(:hover) cps-icon{opacity:.5}:host .cps-autocomplete .cps-autocomplete-box{overflow:hidden;min-height:2.375rem;width:100%;cursor:text;background:var(--cps-input-background);font-size:1rem;outline:none;padding:0 .75rem;border-radius:.25rem;border:.0625rem solid var(--cps-color-line-light);transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box-area{display:flex;min-height:2.25rem;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-area .prefix-icon{margin-right:.5rem;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-input{min-height:2.25rem;padding:0;background-color:transparent;width:0;min-width:1.875rem;flex-grow:1;font-size:1rem;color:var(--cps-color-text-dark);border-style:none;outline:none;font-family:inherit}:host .cps-autocomplete .cps-autocomplete-box-input::placeholder{color:var(--cps-input-placeholder);font-style:italic;opacity:1}:host .cps-autocomplete .cps-autocomplete-box-items{display:inline-flex;flex-direction:column;width:100%;padding-top:.1875rem;padding-bottom:.1875rem;min-height:2.25rem;justify-content:center;position:relative}:host .cps-autocomplete .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-dark);display:inline-flex}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-selection{display:inline-flex;letter-spacing:inherit;line-height:inherit;max-width:100%}:host .cps-autocomplete .cps-autocomplete-box-items .single-item-input{opacity:0;min-width:0;align-self:flex-start;flex:1 1;transition:none;position:absolute;top:0;bottom:0;width:100%;padding-inline-start:inherit;padding-inline-end:inherit}:host .cps-autocomplete .cps-autocomplete-box-items .multi-chip-input{min-height:1.875rem}:host .cps-autocomplete .cps-autocomplete-box-items .multi-item-input{min-height:1.75rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper{display:inline-flex;flex-wrap:wrap;align-items:center}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group{display:contents}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .chips-group cps-chip{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group{display:contents;color:var(--cps-color-text-dark)}:host .cps-autocomplete .cps-autocomplete-box-items .cps-autocomplete-multi-selection-wrapper .text-group .text-group-item{padding-bottom:.1875rem;padding-top:.1875rem;padding-right:.25rem}:host .cps-autocomplete .cps-autocomplete-box:hover{border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box:hover .cps-autocomplete-box-area .prefix-icon{color:var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons{display:flex}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon{cursor:pointer;display:flex;color:var(--cps-state-error);margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:hover cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus cps-icon{opacity:1}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{content:\"\";position:absolute;border-radius:50%}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon-hidden{visibility:hidden}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-clear-icon cps-icon{opacity:0;transition-duration:.2s}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{display:flex;margin-left:.5rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus{outline:none}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible{outline:none;position:relative}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron{transition-duration:.2s;cursor:pointer}:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:hover ::ng-deep cps-icon .cps-icon,:host .cps-autocomplete .cps-autocomplete-box .cps-autocomplete-box-icons .cps-autocomplete-box-chevron:focus ::ng-deep cps-icon .cps-icon{color:var(--cps-color-calm)!important}:host .cps-autocomplete .cps-autocomplete-hint{color:var(--cps-color-text-mild);background-color:var(--cps-surface-body);font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete .cps-autocomplete-error{color:var(--cps-state-error);font-weight:700;font-size:.75rem;min-height:1.125rem;line-height:1.125rem;cursor:default;margin-top:.2rem}:host .cps-autocomplete.disabled{pointer-events:none}:host .cps-autocomplete.disabled .cps-autocomplete-box{background:var(--cps-color-bg-disabled)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-box-items .text-group,:host .cps-autocomplete.disabled .cps-autocomplete-box-items .single-item{color:var(--cps-color-text-light)}:host .cps-autocomplete.disabled .cps-autocomplete-label{color:var(--cps-color-text-mild)}:host .cps-autocomplete.error .cps-autocomplete-box{border-color:var(--cps-state-error)!important;background:#fef3f2}:host .about-to-remove{color:var(--cps-color-text-light)}:host .about-to-remove ::ng-deep .cps-chip{background-color:var(--cps-color-bg-mid)}.cps-autocomplete-options{font-family:inherit;background:var(--cps-popover-background);overflow-x:hidden;max-height:15.125rem;overflow-y:auto}.cps-autocomplete-options .cps-autocomplete-options-empty,.cps-autocomplete-options .cps-autocomplete-options-loading{padding:.6875rem;font-size:1rem;cursor:default;color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option{padding:.75rem;justify-content:space-between;display:flex;cursor:pointer}.cps-autocomplete-options .cps-autocomplete-options-option:hover{background:var(--cps-color-highlight-hover)}.cps-autocomplete-options .cps-autocomplete-options-option-label{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option-left{display:flex;align-items:center;margin-right:.5rem}.cps-autocomplete-options .cps-autocomplete-options-option-right{color:var(--cps-color-text-medium);text-align:right}.cps-autocomplete-options .cps-autocomplete-options-option-check{background-color:transparent;border:0;width:1rem;height:1rem;cursor:pointer;display:inline-block;vertical-align:middle;box-sizing:border-box;position:relative;flex-shrink:0;transition:border-color 90ms cubic-bezier(0,0,.2,.1),background-color 90ms cubic-bezier(0,0,.2,.1);margin-right:.5rem;opacity:0}.cps-autocomplete-options .cps-autocomplete-options-option-check:after{color:var(--cps-color-calm);top:.25rem;left:.0625rem;width:.5rem;height:.1875rem;border-left:.125rem solid currentColor;transform:rotate(-45deg);opacity:1;box-sizing:content-box;position:absolute;content:\"\";border-bottom:.125rem solid currentColor;transition:opacity 90ms cubic-bezier(0,0,.2,.1)}.cps-autocomplete-options .cps-autocomplete-options-option.selected,.cps-autocomplete-options .cps-autocomplete-options-option.allselected{font-weight:600}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-label,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-label{color:var(--cps-color-calm)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-check,.cps-autocomplete-options .cps-autocomplete-options-option.allselected .cps-autocomplete-options-option-check{opacity:1}.cps-autocomplete-options .cps-autocomplete-options-option.selected{background:var(--cps-color-highlight-selected)}.cps-autocomplete-options .cps-autocomplete-options-option.selected .cps-autocomplete-options-option-right{color:var(--cps-color-text-dark)}.cps-autocomplete-options .cps-autocomplete-options-option.highlighten{background:var(--cps-color-highlight-active)}.cps-autocomplete-options .cps-autocomplete-options-option.selected.highlighten{background:var(--cps-color-highlight-selected-dark)}.cps-autocomplete-options .select-all-option{border-bottom:.0625rem solid lightgrey;font-weight:600}.cps-autocomplete-options ::ng-deep .p-virtualscroller-list.p-scroller{overflow-anchor:none}.cps-autocomplete-options .virtual-row{white-space:nowrap}\n"] }]
         }], ctorParameters: () => [{ type: i1$2.NgControl, decorators: [{
                     type: Self
                 }, {
@@ -2806,7 +2912,7 @@ class CpsButtonComponent {
          * Border radius of the button, of type number denoting pixels or string.
          * @group Props
          */
-        this.borderRadius = 4;
+        this.borderRadius = '0.25rem';
         /**
          * Type of the button in terms of appearance, it can be 'solid' or 'outlined' or 'borderless'.
          * @group Props
@@ -4218,10 +4324,10 @@ class CpsFileUploadComponent {
          */
         this.fileNameTooltipPosition = 'top';
         /**
-         * File name tooltip offset for styling.
+         * File name tooltip offset, a number denoting pixels or a string.
          * @group Props
          */
-        this.fileNameTooltipOffset = 12;
+        this.fileNameTooltipOffset = '0.75rem';
         /**
          * Width of the component, a number denoting pixels or a string.
          * @group Props
@@ -4414,7 +4520,7 @@ class CpsFileUploadComponent {
         return this.extensions.some((ext) => fileNameLowerCase.endsWith(ext));
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: false, isRequired: false, transformFunction: null }, fileDesc: { classPropertyName: "fileDesc", publicName: "fileDesc", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, fileInfo: { classPropertyName: "fileInfo", publicName: "fileInfo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fileProcessingCallback: { classPropertyName: "fileProcessingCallback", publicName: "fileProcessingCallback", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipPosition: { classPropertyName: "fileNameTooltipPosition", publicName: "fileNameTooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipOffset: { classPropertyName: "fileNameTooltipOffset", publicName: "fileNameTooltipOffset", isSignal: false, isRequired: false, transformFunction: numberAttribute }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", fileProcessed: "fileProcessed", fileProcessingFailed: "fileProcessingFailed", fileProcessingCancelled: "fileProcessingCancelled", uploadedFileRemoved: "uploadedFileRemoved" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "dropzoneButton", first: true, predicate: ["dropzoneButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-file-upload .sr-only{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: CpsFileUploadComponent, isStandalone: true, selector: "cps-file-upload", inputs: { extensions: { classPropertyName: "extensions", publicName: "extensions", isSignal: false, isRequired: false, transformFunction: null }, fileDesc: { classPropertyName: "fileDesc", publicName: "fileDesc", isSignal: false, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: false, isRequired: false, transformFunction: null }, fileInfo: { classPropertyName: "fileInfo", publicName: "fileInfo", isSignal: false, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: booleanAttribute }, fileProcessingCallback: { classPropertyName: "fileProcessingCallback", publicName: "fileProcessingCallback", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipPosition: { classPropertyName: "fileNameTooltipPosition", publicName: "fileNameTooltipPosition", isSignal: false, isRequired: false, transformFunction: null }, fileNameTooltipOffset: { classPropertyName: "fileNameTooltipOffset", publicName: "fileNameTooltipOffset", isSignal: false, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fileUploaded: "fileUploaded", fileUploadFailed: "fileUploadFailed", fileProcessed: "fileProcessed", fileProcessingFailed: "fileProcessingFailed", fileProcessingCancelled: "fileProcessingCancelled", uploadedFileRemoved: "uploadedFileRemoved" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }, { propertyName: "dropzoneButton", first: true, predicate: ["dropzoneButton"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"cps-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: CpsIconComponent, selector: "cps-icon", inputs: ["icon", "size", "color"] }, { kind: "component", type: CpsProgressLinearComponent, selector: "cps-progress-linear", inputs: ["width", "height", "color", "bgColor", "opacity", "radius"] }, { kind: "directive", type: CpsTooltipDirective, selector: "[cpsTooltip]", inputs: ["cpsTooltip", "tooltipOpenDelay", "tooltipCloseDelay", "tooltipOpenOn", "tooltipPosition", "tooltipPersistent", "tooltipDisabled", "tooltipMaxWidth", "tooltipContentClass", "tooltipOffset"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: CpsFileUploadComponent, decorators: [{
             type: Component,
@@ -4423,7 +4529,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
                         CpsIconComponent,
                         CpsProgressLinearComponent,
                         CpsTooltipDirective
-                    ], template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}:host .cps-file-upload .sr-only{position:absolute;width:.0625rem;height:.0625rem;padding:0;margin:-.0625rem;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
+                    ], template: "<div\n  class=\"cps-file-upload\"\n  [class.disabled]=\"disabled\"\n  [style.width]=\"cvtWidth()\">\n  <div class=\"cps-sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\n    @if (errorMessage) {\n      {{ errorMessage }}\n    } @else if (uploadedFile) {\n      @if (isProcessingFile) {\n        File is being processed\n      } @else {\n        File successfully uploaded\n      }\n    }\n  </div>\n  <button\n    #dropzoneButton\n    type=\"button\"\n    class=\"cps-file-upload-dropzone\"\n    [ngClass]=\"{\n      'dragged-over': isDragoverFile,\n      'with-bottom-section': uploadedFile?.name || errorMessage\n    }\"\n    [disabled]=\"disabled\"\n    [class.processing]=\"isProcessingFile\"\n    (click)=\"openFilePicker()\"\n    (dragend)=\"onDragEnd()\"\n    (dragenter)=\"onDragEnter()\"\n    (dragleave)=\"onDragLeave()\"\n    (dragover)=\"onDragOver($event)\"\n    (drop)=\"onDrop($event)\"\n    [attr.aria-label]=\"ariaLabel\">\n    <input\n      #fileInput\n      (change)=\"tryUploadFile($event)\"\n      type=\"file\"\n      [accept]=\"extensionsString\"\n      hidden />\n    <cps-icon\n      icon=\"export\"\n      size=\"large\"\n      [color]=\"disabled ? 'text-mild' : 'text-darkest'\"></cps-icon>\n    <div class=\"cps-file-upload-dropzone-title\">\n      Drag&Drop or choose a file to upload\n    </div>\n    @if (fileDesc || extensionsStringAsterisks) {\n      <span class=\"cps-file-upload-dropzone-file-desc\"\n        >{{ fileDesc }}\n        {{\n          extensionsStringAsterisks ? '(' + extensionsStringAsterisks + ')' : ''\n        }}</span\n      >\n    }\n    @if (fileInfo) {\n      <div class=\"cps-file-upload-dropzone-content\">\n        <cps-icon\n          [color]=\"disabled ? 'text-mild' : 'info'\"\n          icon=\"info-circle\"\n          size=\"xsmall\"></cps-icon>\n        {{ fileInfo }}\n      </div>\n    }\n    @if (isProcessingFile && uploadedFile) {\n      <cps-progress-linear\n        height=\"0.1875rem\"\n        radius=\"0.25rem\"\n        opacity=\"0.3\"\n        [color]=\"disabled ? 'text-mild' : 'calm'\"\n        class=\"cps-file-upload-progress-bar\"\n        bgColor=\"transparent\">\n      </cps-progress-linear>\n    }\n  </button>\n  @if (errorMessage) {\n    <div class=\"cps-file-upload-error\">\n      <cps-icon\n        icon=\"toast-error\"\n        [color]=\"disabled ? 'text-light' : 'error'\"></cps-icon>\n      <span>{{ errorMessage }}</span>\n    </div>\n  }\n  @if (uploadedFile) {\n    <div class=\"cps-file-upload-uploaded-files\">\n      <div class=\"cps-file-upload-uploaded-file\">\n        <div class=\"cps-file-upload-uploaded-file-title\">\n          <cps-icon\n            class=\"cps-file-upload-uploaded-file-status-icon\"\n            [icon]=\"isProcessingFile ? 'pending' : 'toast-success'\"\n            [color]=\"\n              disabled ? 'text-light' : isProcessingFile ? 'warn' : 'success'\n            \">\n          </cps-icon>\n          <div\n            class=\"cps-file-upload-uploaded-file-name\"\n            cpsTooltip=\"{{ uploadedFile.name }}\"\n            [tooltipPosition]=\"fileNameTooltipPosition\"\n            [tooltipOffset]=\"fileNameTooltipOffset\"\n            tooltipOpenOn=\"hover\">\n            {{ uploadedFile.name }}\n          </div>\n        </div>\n        @if (!disabled) {\n          @if (isProcessingFile) {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Cancel file processing'\"\n              class=\"cps-file-upload-uploaded-file-cancel-process-icon\"\n              icon=\"close-x\"\n              color=\"error\"\n              (click)=\"onCancelFileProcessing($event)\"\n              (keydown.enter)=\"onCancelFileProcessing($event)\"\n              (keydown.space)=\"onCancelFileProcessing($event)\">\n            </cps-icon>\n          } @else {\n            <cps-icon\n              role=\"button\"\n              tabindex=\"0\"\n              [attr.aria-label]=\"'Remove uploaded file'\"\n              class=\"cps-file-upload-uploaded-file-remove-icon\"\n              icon=\"remove\"\n              color=\"error\"\n              (click)=\"onRemoveUploadedFile($event)\"\n              (keydown.enter)=\"onRemoveUploadedFile($event)\"\n              (keydown.space)=\"onRemoveUploadedFile($event)\">\n            </cps-icon>\n          }\n        }\n      </div>\n    </div>\n  }\n</div>\n", styles: [":host{display:flex}:host .cps-file-upload{min-width:0;position:relative}:host .cps-file-upload .cps-file-upload-dropzone{background:transparent;font-family:Source Sans Pro,sans-serif;min-height:1.25rem;padding:2rem;text-align:center;border:.125rem dashed var(--cps-color-calm);position:relative;border-radius:1rem;display:block;width:100%;box-sizing:border-box;cursor:pointer;-webkit-user-select:none;user-select:none}:host .cps-file-upload .cps-file-upload-dropzone:hover{background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){outline:none;position:relative}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before,:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{content:\"\";position:absolute;border-radius:inherit}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):before{inset:-.25rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing):after{inset:-.375rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-dropzone:focus-visible:not(.processing){background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-dropzone:active:not(.processing){background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.processing{pointer-events:none;cursor:default}:host .cps-file-upload .cps-file-upload-dropzone.dragged-over{background-color:var(--cps-color-highlight-selected)}:host .cps-file-upload .cps-file-upload-dropzone.with-bottom-section{border-bottom-right-radius:0;border-bottom-left-radius:0;border-bottom:.0625rem dashed var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-dropzone input{cursor:pointer;opacity:0;position:absolute;inset:0;width:100%;height:100%}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-title{font-size:1rem;margin:.5rem 0;color:var(--cps-color-calm);font-weight:600}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{font-size:1.125rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-dropzone-content{margin-top:1rem;font-size:1rem;color:var(--cps-color-text-dark)}:host .cps-file-upload .cps-file-upload-dropzone .cps-file-upload-progress-bar{position:absolute;bottom:-.125rem;left:0}:host .cps-file-upload .cps-file-upload-uploaded-files{border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file{cursor:default;display:flex;align-items:center;justify-content:space-between;padding:.5rem .75rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title{display:flex;align-items:center;flex:1;min-width:0}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-darkest);font-size:1.25rem;margin:0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:calc(100% - 3.75rem)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon{cursor:pointer;flex-shrink:0;margin-left:.5rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus{outline:none}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible{outline:none;position:relative}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{content:\"\";position:absolute;border-radius:.375rem}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:before,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:before{inset:-.125rem;border:.0625rem solid var(--cps-color-calm)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:focus-visible:after,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:focus-visible:after{inset:-.25rem;border:.0625rem solid var(--cps-color-calm-highlighten)}:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-remove-icon:hover ::ng-deep .cps-icon,:host .cps-file-upload .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-cancel-process-icon:hover ::ng-deep .cps-icon{color:var(--cps-color-error-darken1)!important}:host .cps-file-upload .cps-file-upload-error{display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;overflow:hidden;border-bottom:.125rem dashed var(--cps-color-calm);border-left:.125rem dashed var(--cps-color-calm);border-right:.125rem dashed var(--cps-color-calm);border-bottom-right-radius:1rem;border-bottom-left-radius:1rem;background-color:var(--cps-color-highlight-hover);color:var(--cps-color-error);font-size:1.25rem}:host .cps-file-upload .cps-file-upload-error span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .cps-file-upload.disabled{pointer-events:none}:host .cps-file-upload.disabled .cps-file-upload-dropzone{border-color:var(--cps-color-line-darkest);cursor:not-allowed}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-title{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-file-desc{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-dropzone .cps-file-upload-dropzone-content{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled)}:host .cps-file-upload.disabled .cps-file-upload-uploaded-files .cps-file-upload-uploaded-file .cps-file-upload-uploaded-file-title .cps-file-upload-uploaded-file-name{color:var(--cps-color-text-mild)}:host .cps-file-upload.disabled .cps-file-upload-error{border-color:var(--cps-color-line-darkest);background-color:var(--cps-color-bg-disabled);color:var(--cps-color-text-mild)}\n"] }]
         }], propDecorators: { extensions: [{
                 type: Input
             }], fileDesc: [{
@@ -4440,8 +4546,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImpor
             }], fileNameTooltipPosition: [{
                 type: Input
             }], fileNameTooltipOffset: [{
-                type: Input,
-                args: [{ transform: numberAttribute }]
+                type: Input
             }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], fileUploaded: [{
                 type: Output
             }], fileUploadFailed: [{