@agorapulse/ui-components 20.4.33 → 21.0.0

package/fesm2022/agorapulse-ui-components-labels.mjs

@@ -37,10 +37,10 @@ class LabelComponent {
         this.elementRef.nativeElement.remove();
         this.remove.emit({ content: this.content, $event });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LabelComponent, isStandalone: true, selector: "ap-label", inputs: { content: "content", selectorWidth: "selectorWidth", removable: ["removable", "removable", booleanAttribute] }, outputs: { remove: "remove" }, ngImport: i0, template: "<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <ap-close-button (closed)=\"onClearLabel($event)\" />\n    }\n</div>\n", styles: ["ap-label{display:flex;max-width:100%;--button-size: calc(var(--comp-label-height) - 4px);--max-width: 180px}ap-label .label{color:var(--comp-label-text-color);align-self:center;background:var(--comp-label-background-color);border-radius:var(--comp-label-border-radius);text-wrap:unset;display:flex;align-items:center;border:none;padding:0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);height:var(--comp-label-height);box-sizing:border-box;text-overflow:ellipsis;width:100%}ap-label .label.removable{gap:var(--comp-label-closable-spacing);padding:0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs)}ap-label .label .label-content{max-width:var(--max-width);color:var(--comp-label-text-color);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--comp-label-text-style-font-family);font-size:var(--comp-label-text-style-size);line-height:var(--comp-label-text-style-line-height);font-weight:var(--comp-label-text-style-font-weight)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: CloseButtonComponent, selector: "ap-close-button", inputs: ["disabled", "ariaLabel", "dataTest"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: LabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: LabelComponent, isStandalone: true, selector: "ap-label", inputs: { content: "content", selectorWidth: "selectorWidth", removable: ["removable", "removable", booleanAttribute] }, outputs: { remove: "remove" }, ngImport: i0, template: "<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <ap-close-button (closed)=\"onClearLabel($event)\" />\n    }\n</div>\n", styles: ["ap-label{display:flex;max-width:100%;--button-size: calc(var(--comp-label-height) - 4px);--max-width: 180px}ap-label .label{color:var(--comp-label-text-color);align-self:center;background:var(--comp-label-background-color);border-radius:var(--comp-label-border-radius);text-wrap:unset;display:flex;align-items:center;border:none;padding:0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);height:var(--comp-label-height);box-sizing:border-box;text-overflow:ellipsis;width:100%}ap-label .label.removable{gap:var(--comp-label-closable-spacing);padding:0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs)}ap-label .label .label-content{max-width:var(--max-width);color:var(--comp-label-text-color);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--comp-label-text-style-font-family);font-size:var(--comp-label-text-style-size);line-height:var(--comp-label-text-style-line-height);font-weight:var(--comp-label-text-style-font-weight)}\n"], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }, { kind: "component", type: CloseButtonComponent, selector: "ap-close-button", inputs: ["disabled", "ariaLabel", "dataTest"], outputs: ["closed"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LabelComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: LabelComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label', imports: [TooltipDirective, CloseButtonComponent], encapsulation: ViewEncapsulation.None, template: "<div\n    class=\"label\"\n    [class.removable]=\"removable\"\n    [apTooltip]=\"tooltipEnabled ? content : ''\">\n    <span class=\"label-content\">{{ content }}</span>\n    @if (removable) {\n        <ap-close-button (closed)=\"onClearLabel($event)\" />\n    }\n</div>\n", styles: ["ap-label{display:flex;max-width:100%;--button-size: calc(var(--comp-label-height) - 4px);--max-width: 180px}ap-label .label{color:var(--comp-label-text-color);align-self:center;background:var(--comp-label-background-color);border-radius:var(--comp-label-border-radius);text-wrap:unset;display:flex;align-items:center;border:none;padding:0 var(--comp-label-padding-right) 0 var(--comp-label-padding-left);height:var(--comp-label-height);box-sizing:border-box;text-overflow:ellipsis;width:100%}ap-label .label.removable{gap:var(--comp-label-closable-spacing);padding:0 var(--comp-label-closable-padding-right) 0 var(--ref-spacing-xxs)}ap-label .label .label-content{max-width:var(--max-width);color:var(--comp-label-text-color);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--comp-label-text-style-font-family);font-size:var(--comp-label-text-style-size);line-height:var(--comp-label-text-style-line-height);font-weight:var(--comp-label-text-style-font-weight)}\n"] }]
         }], ctorParameters: () => [], propDecorators: { content: [{
@@ -140,10 +140,10 @@ class LabelListComponent {
         this.responsiveLabels = this.labels.slice(0, currentIndex + 1);
         this.changeDetectorRef.markForCheck();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LabelListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TextMeasurementService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: LabelListComponent, isStandalone: true, selector: "ap-label-list", inputs: { labels: "labels", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation", hiddenLabelsTranslation: "hiddenLabelsTranslation" }, outputs: { removeLabel: "removeLabel" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: LabelListComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.TextMeasurementService }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: LabelListComponent, isStandalone: true, selector: "ap-label-list", inputs: { labels: "labels", removeLabelsEnabled: "removeLabelsEnabled", responsive: "responsive", seeLessTranslation: "seeLessTranslation", hiddenLabelsTranslation: "hiddenLabelsTranslation" }, outputs: { removeLabel: "removeLabel" }, usesOnChanges: true, ngImport: i0, template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: LabelListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: LabelListComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-label-list', imports: [LabelComponent], template: "<div\n    class=\"labels-list\"\n    (window:resize)=\"onResize()\">\n    @if (responsive) {\n        @for (label of expanded ? labels : responsiveLabels; track label) {\n            <ap-label\n                [content]=\"label\"\n                [style.max-width]=\"!expanded ? 'calc(100% - ' + badgeWidth + 'px)' : '100%'\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n        @if (!expanded && responsiveLabels.length !== labels.length && howManyItemsLeft > 0) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                +{{ howManyItemsLeft }} {{ hiddenLabelsTranslation }}\n            </a>\n        }\n        @if (expanded) {\n            <a\n                class=\"standalone\"\n                role=\"button\"\n                (click)=\"onExpand()\">\n                {{ seeLessTranslation }}\n            </a>\n        }\n    } @else {\n        @for (label of labels; track trackByLabelContent($index, label)) {\n            <ap-label\n                [content]=\"label\"\n                [removable]=\"removeLabelsEnabled\"\n                (remove)=\"onRemoveLabel($event)\" />\n        }\n    }\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}.labels-list{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;gap:4px;max-width:100%;margin:0}.labels-list>*{max-width:100%}.label-expand{box-sizing:border-box;padding:0 8px;background:#e8f4ff;border-radius:25px;border:1px solid #74bbfe;color:#178dfe;height:24px;min-width:30px;text-align:center;text-overflow:ellipsis;font-size:14px;font-family:Averta}.label-expand:hover{cursor:pointer;text-decoration:underline}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.TextMeasurementService }, { type: i0.NgZone }], propDecorators: { labels: [{

package/fesm2022/agorapulse-ui-components-legacy-input.mjs

@@ -48,7 +48,7 @@ class InputComponent {
     // eslint-disable-next-line @angular-eslint/no-output-native
     keyup = new EventEmitter();
     _controlValueAccessorChangeFn;
-    hostDataTest = signal(undefined, ...(ngDevMode ? [{ debugName: "hostDataTest" }] : []));
+    hostDataTest = signal(undefined, ...(ngDevMode ? [{ debugName: "hostDataTest" }] : /* istanbul ignore next */ []));
     value;
     onTouched;
     ngOnInit() {
@@ -115,8 +115,8 @@ class InputComponent {
     onClear() {
         this.writeValue(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: InputComponent, isStandalone: true, selector: "ap-input", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", disabled: "disabled", clearable: "clearable", inputType: "inputType", inputId: "inputId", name: "name", label: "label", description: "description", prefix: "prefix", suffix: "suffix", required: ["required", "required", booleanAttribute], placeholder: "placeholder", errorMessage: "errorMessage", successMessage: "successMessage", symbolId: "symbolId", symbolPosition: "symbolPosition" }, outputs: { focus: "focus", blur: "blur", keyup: "keyup" }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: InputComponent, isStandalone: true, selector: "ap-input", inputs: { ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", disabled: "disabled", clearable: "clearable", inputType: "inputType", inputId: "inputId", name: "name", label: "label", description: "description", prefix: "prefix", suffix: "suffix", required: ["required", "required", booleanAttribute], placeholder: "placeholder", errorMessage: "errorMessage", successMessage: "successMessage", symbolId: "symbolId", symbolPosition: "symbolPosition" }, outputs: { focus: "focus", blur: "blur", keyup: "keyup" }, providers: [
             AP_INPUT_CONTROL_VALUE_ACCESSOR,
             {
                 provide: NG_VALIDATORS,
@@ -125,7 +125,7 @@ class InputComponent {
             },
         ], queries: [{ propertyName: "symbols", predicate: SymbolComponent }], viewQueries: [{ propertyName: "symbolWrapper", first: true, predicate: ["symbol"], descendants: true }, { propertyName: "inputElement", first: true, predicate: ["input"], descendants: true }], ngImport: i0, template: "@if (label) {\n    <label [for]=\"inputId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"symbolId\"\n    [class.with-prefix]=\"prefix\"\n    [class.with-suffix]=\"suffix\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"focusInput()\"\n    (keydown.enter)=\"focusInput()\">\n    @if (prefix) {\n        <div class=\"prefix\">\n            <span>\n                {{ prefix }}\n            </span>\n            <span class=\"divider\"></span>\n        </div>\n    }\n    <div class=\"content\">\n        <input\n            #input\n            [type]=\"inputType\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId ?? ''\"\n            [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n            [(ngModel)]=\"value\"\n            (blur)=\"onBlurHandle($event)\"\n            (focus)=\"onFocusHandle($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (ngModelChange)=\"onValueChange()\" />\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        }\n    </div>\n    @if (suffix) {\n        <div class=\"suffix\">\n            <span class=\"divider\"></span>\n            <span>\n                {{ suffix }}\n            </span>\n        </div>\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n</div>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n", styles: ["ap-input{display:flex;flex-direction:column;gap:var(--comp-input-spacing-horizontal);--border-width: 1px}ap-input.full-width{width:100%}ap-input.full-width .input-wrapper{min-width:100%}ap-input label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-input label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-input .input-wrapper{display:flex;align-items:center;position:relative;min-width:var(--comp-input-width-default);height:var(--comp-input-height);border:var(--border-width) solid var(--comp-input-border-default-color);box-sizing:border-box;border-radius:var(--comp-input-border-radius);overflow:hidden;background-color:var(--comp-input-fill-color)}ap-input .input-wrapper:hover:not(.disabled){border-color:var(--comp-input-border-hover-color)}ap-input .input-wrapper:focus-within:not(.disabled){border-color:var(--comp-input-border-focused-color)}ap-input .input-wrapper:focus-visible:not(.disabled){outline:none}ap-input .input-wrapper:active:not(.disabled){border-color:var(--comp-input-border-focused-color)}ap-input .input-wrapper.disabled{background-color:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input .input-wrapper .content{display:flex;gap:var(--comp-input-spacing-horizontal);flex:1;align-items:center}ap-input .input-wrapper .content input{border:none;outline:none;box-sizing:border-box;min-height:34px;max-height:34px;padding:0 var(--comp-input-padding-horizontal);flex:1;font-size:var(--comp-input-text-size);font-weight:var(--comp-input-text-font-weight);line-height:var(--comp-input-text-line-height);font-family:var(--comp-input-text-font-family);color:var(--comp-input-text-default-color);min-width:0}ap-input .input-wrapper .content input::placeholder{color:var(--comp-input-text-placeholder-color)}ap-input .input-wrapper .content input:disabled{cursor:not-allowed;pointer-events:none;background:var(--comp-input-fill-disabled-color);color:var(--comp-input-text-disabled-color)}ap-input .input-wrapper .content input:disabled:placeholder{color:var(--comp-input-text-placeholder-color)}ap-input .input-wrapper .content input[type=search]::-webkit-search-decoration,ap-input .input-wrapper .content input[type=search]::-webkit-search-cancel-button,ap-input .input-wrapper .content input[type=search]::-webkit-search-results-button,ap-input .input-wrapper .content input[type=search]::-webkit-search-results-decoration{display:none}ap-input .input-wrapper .content .counter{font-size:var(--comp-input-text-counter-size);font-weight:var(--comp-input-text-counter-font-weight);line-height:var(--comp-input-text-counter-line-height);font-family:var(--comp-input-text-counter-font-family);color:var(--comp-input-text-counter-color);padding-right:var(--comp-input-spacing-horizontal)}ap-input .input-wrapper .content .clear-button{display:flex;align-items:center;justify-content:center;border:none;margin:0;padding:0 var(--comp-input-spacing-horizontal) 0 0;background-color:transparent}ap-input .input-wrapper .content .clear-button:hover{cursor:pointer}ap-input .input-wrapper .content .clear-button ap-symbol{padding:0}ap-input .input-wrapper .prefix,ap-input .input-wrapper .suffix{height:100%;display:flex;justify-content:center;align-items:center;font-size:var(--sys-text-style-body-size);font-weight:var(--sys-text-style-body-weight);line-height:var(--sys-text-style-body-line-height);font-family:var(--ref-font-family);color:var(--ref-color-grey-100)}ap-input .input-wrapper .prefix .divider,ap-input .input-wrapper .suffix .divider{height:18px;width:var(--border-width);background:var(--ref-color-grey-10)}ap-input .input-wrapper ap-symbol{height:var(--comp-input-icon-size);width:var(--comp-input-icon-size);min-height:var(--comp-input-icon-size);min-width:var(--comp-input-icon-size);max-height:var(--comp-input-icon-size);max-width:var(--comp-input-icon-size);color:var(--comp-input-icon-color);padding-right:var(--comp-input-padding-horizontal);pointer-events:none;box-sizing:content-box}ap-input .input-wrapper ap-symbol:hover{cursor:text}ap-input .input-wrapper.inverse{flex-direction:row-reverse}ap-input .input-wrapper.inverse.with-icon input{padding-left:0}ap-input .input-wrapper.inverse.with-icon ap-symbol{padding-right:var(--comp-input-spacing-horizontal);padding-left:var(--comp-input-padding-horizontal)}ap-input .input-wrapper.with-icon input{padding-right:var(--ref-spacing-xxxs)}ap-input .input-wrapper.with-prefix input{padding-left:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-prefix .prefix{padding-left:var(--comp-input-padding-horizontal);gap:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-suffix input{padding-right:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-suffix .suffix{padding-right:var(--comp-input-padding-horizontal);gap:var(--ref-spacing-xxs)}ap-input .input-wrapper.with-counter input{padding-right:0}ap-input .input-wrapper.with-error{border-color:var(--comp-input-border-error-color)}ap-input .input-wrapper.with-success{border-color:var(--comp-input-border-success-color)}.form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-input.ng-valid .input-wrapper{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-input.ng-invalid .input-wrapper{border-color:var(--comp-input-border-error-color)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.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.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: InputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: InputComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-input', imports: [FormsModule, SymbolComponent], providers: [
                         AP_INPUT_CONTROL_VALUE_ACCESSOR,

package/fesm2022/agorapulse-ui-components-legacy-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-legacy-input.mjs","sources":["../../../libs/ui-components/legacy/input/src/input.component.ts","../../../libs/ui-components/legacy/input/src/input.component.html","../../../libs/ui-components/legacy/input/src/agorapulse-ui-components-legacy-input.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { SymbolComponent, SymbolRegistry, apClose, apErrorFill, apRoundedCheckFill, apSearch } from '@agorapulse/ui-symbol';\n\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnInit,\n    Output,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation,\n    WritableSignal,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\ntype InputType =\n    | 'color'\n    | 'datetime'\n    | 'datetime-local'\n    | 'email'\n    | 'hidden'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'text'\n    | 'tel'\n    | 'time'\n    | 'url'\n    | 'week';\n\nexport const AP_INPUT_CONTROL_VALUE_ACCESSOR = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => InputComponent),\n    multi: true,\n};\n\nconst SEARCH_SYMBOL_ID = 'search';\n\n/**\n * @deprecated use native input with directive apInput, ap-input-group and ap-form-field instead\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-input',\n    styleUrls: ['./input.component.scss'],\n    imports: [FormsModule, SymbolComponent],\n    providers: [\n        AP_INPUT_CONTROL_VALUE_ACCESSOR,\n        {\n            provide: NG_VALIDATORS,\n            useExisting: InputComponent,\n            multi: true,\n        },\n    ],\n    templateUrl: './input.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InputComponent implements OnInit, AfterViewInit, ControlValueAccessor {\n    readonly elementRef: ElementRef = inject(ElementRef);\n    readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n    }\n\n    @ContentChildren(SymbolComponent) symbols!: QueryList<SymbolComponent>;\n    @ViewChild('symbol') symbolWrapper!: ElementRef;\n    @ViewChild('input') inputElement!: ElementRef;\n\n    @Input() ariaLabel!: string;\n\n    @Input() ariaLabelledBy!: string;\n\n    @Input() ariaDescribedBy!: string;\n\n    @Input() disabled: boolean = false;\n\n    @Input() clearable: boolean = false;\n\n    @Input() inputType: InputType = 'text';\n\n    @Input() inputId?: string;\n\n    @Input({\n        required: true,\n    })\n    name!: string;\n\n    @Input() label?: string;\n\n    @Input() description?: string;\n\n    @Input() prefix?: string;\n\n    @Input() suffix?: string;\n\n    @Input({ transform: booleanAttribute }) required: boolean = false;\n\n    @Input() placeholder?: string;\n\n    @Input() errorMessage?: string;\n\n    @Input() successMessage?: string;\n\n    @Input() symbolId?: string;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() keyup = new EventEmitter<KeyboardEvent>();\n\n    private _controlValueAccessorChangeFn!: (value: string | null) => void;\n\n    hostDataTest: WritableSignal<string | undefined> = signal<string | undefined>(undefined);\n\n    value!: string | null;\n\n    onTouched!: () => void;\n\n    ngOnInit(): void {\n        if (this.label && !this.inputId) {\n            throw Error('You have to provide an input id if you want to use a label.');\n        }\n        if (this.inputType === 'search') {\n            this.symbolId = SEARCH_SYMBOL_ID;\n            this.symbolPosition = 'left';\n        }\n        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));\n        this.elementRef.nativeElement.removeAttribute('data-test');\n        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill, apClose, apSearch]);\n    }\n\n    // Sometimes attributes like the id, or the data-test are dynamic and can change between the constructor and the initialization.\n    // In order to have the last attributes value we check if it changes, and if it does, we run a mark for check to update the view.\n    ngAfterViewInit(): void {\n        const hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n\n        if (hostDataTest && this.hostDataTest() !== hostDataTest) {\n            this.hostDataTest.set(hostDataTest);\n            this.elementRef.nativeElement.removeAttribute('data-test');\n        }\n    }\n\n    validate() {\n        const isNotValid = !this.value && this.required;\n        return (\n            isNotValid && {\n                invalid: true,\n            }\n        );\n    }\n\n    onValueChange() {\n        if (this.onTouched) {\n            this.onTouched();\n        }\n\n        if (!this.disabled) {\n            if (this._controlValueAccessorChangeFn) {\n                this._controlValueAccessorChangeFn(this.value);\n            }\n        }\n    }\n\n    writeValue(value: string | null): void {\n        this.value = value;\n    }\n\n    registerOnChange(fn: (value: string | null) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    focusInput(): void {\n        this.inputElement.nativeElement.focus();\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focus.emit($event);\n    }\n\n    onKeyup($event: KeyboardEvent): void {\n        this.keyup.emit($event);\n    }\n\n    onClear(): void {\n        this.writeValue(null);\n    }\n}\n","@if (label) {\n    <label [for]=\"inputId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"symbolId\"\n    [class.with-prefix]=\"prefix\"\n    [class.with-suffix]=\"suffix\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"focusInput()\"\n    (keydown.enter)=\"focusInput()\">\n    @if (prefix) {\n        <div class=\"prefix\">\n            <span>\n                {{ prefix }}\n            </span>\n            <span class=\"divider\"></span>\n        </div>\n    }\n    <div class=\"content\">\n        <input\n            #input\n            [type]=\"inputType\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId ?? ''\"\n            [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n            [(ngModel)]=\"value\"\n            (blur)=\"onBlurHandle($event)\"\n            (focus)=\"onFocusHandle($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (ngModelChange)=\"onValueChange()\" />\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        }\n    </div>\n    @if (suffix) {\n        <div class=\"suffix\">\n            <span class=\"divider\"></span>\n            <span>\n                {{ suffix }}\n            </span>\n        </div>\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n</div>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-legacy-input.mjs","sources":["../../../libs/ui-components/legacy/input/src/input.component.ts","../../../libs/ui-components/legacy/input/src/input.component.html","../../../libs/ui-components/legacy/input/src/agorapulse-ui-components-legacy-input.ts"],"sourcesContent":["import { UI_COMPONENTS_SYMBOLS } from '@agorapulse/ui-components/providers';\nimport { SymbolComponent, SymbolRegistry, apClose, apErrorFill, apRoundedCheckFill, apSearch } from '@agorapulse/ui-symbol';\n\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ContentChildren,\n    ElementRef,\n    EventEmitter,\n    Input,\n    OnInit,\n    Output,\n    QueryList,\n    ViewChild,\n    ViewEncapsulation,\n    WritableSignal,\n    booleanAttribute,\n    forwardRef,\n    inject,\n    signal,\n} from '@angular/core';\nimport { ControlValueAccessor, FormsModule, NG_VALIDATORS, NG_VALUE_ACCESSOR } from '@angular/forms';\n\ntype InputType =\n    | 'color'\n    | 'datetime'\n    | 'datetime-local'\n    | 'email'\n    | 'hidden'\n    | 'month'\n    | 'number'\n    | 'password'\n    | 'range'\n    | 'search'\n    | 'text'\n    | 'tel'\n    | 'time'\n    | 'url'\n    | 'week';\n\nexport const AP_INPUT_CONTROL_VALUE_ACCESSOR = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => InputComponent),\n    multi: true,\n};\n\nconst SEARCH_SYMBOL_ID = 'search';\n\n/**\n * @deprecated use native input with directive apInput, ap-input-group and ap-form-field instead\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-input',\n    styleUrls: ['./input.component.scss'],\n    imports: [FormsModule, SymbolComponent],\n    providers: [\n        AP_INPUT_CONTROL_VALUE_ACCESSOR,\n        {\n            provide: NG_VALIDATORS,\n            useExisting: InputComponent,\n            multi: true,\n        },\n    ],\n    templateUrl: './input.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class InputComponent implements OnInit, AfterViewInit, ControlValueAccessor {\n    readonly elementRef: ElementRef = inject(ElementRef);\n    readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.withSymbols(...(inject(UI_COMPONENTS_SYMBOLS, { optional: true })?.flat() ?? []));\n    }\n\n    @ContentChildren(SymbolComponent) symbols!: QueryList<SymbolComponent>;\n    @ViewChild('symbol') symbolWrapper!: ElementRef;\n    @ViewChild('input') inputElement!: ElementRef;\n\n    @Input() ariaLabel!: string;\n\n    @Input() ariaLabelledBy!: string;\n\n    @Input() ariaDescribedBy!: string;\n\n    @Input() disabled: boolean = false;\n\n    @Input() clearable: boolean = false;\n\n    @Input() inputType: InputType = 'text';\n\n    @Input() inputId?: string;\n\n    @Input({\n        required: true,\n    })\n    name!: string;\n\n    @Input() label?: string;\n\n    @Input() description?: string;\n\n    @Input() prefix?: string;\n\n    @Input() suffix?: string;\n\n    @Input({ transform: booleanAttribute }) required: boolean = false;\n\n    @Input() placeholder?: string;\n\n    @Input() errorMessage?: string;\n\n    @Input() successMessage?: string;\n\n    @Input() symbolId?: string;\n    @Input() symbolPosition: 'left' | 'right' = 'right';\n\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() focus = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() blur = new EventEmitter<FocusEvent>();\n    // eslint-disable-next-line @angular-eslint/no-output-native\n    @Output() keyup = new EventEmitter<KeyboardEvent>();\n\n    private _controlValueAccessorChangeFn!: (value: string | null) => void;\n\n    hostDataTest: WritableSignal<string | undefined> = signal<string | undefined>(undefined);\n\n    value!: string | null;\n\n    onTouched!: () => void;\n\n    ngOnInit(): void {\n        if (this.label && !this.inputId) {\n            throw Error('You have to provide an input id if you want to use a label.');\n        }\n        if (this.inputType === 'search') {\n            this.symbolId = SEARCH_SYMBOL_ID;\n            this.symbolPosition = 'left';\n        }\n        this.hostDataTest.set(this.elementRef.nativeElement.getAttribute('data-test'));\n        this.elementRef.nativeElement.removeAttribute('data-test');\n        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill, apClose, apSearch]);\n    }\n\n    // Sometimes attributes like the id, or the data-test are dynamic and can change between the constructor and the initialization.\n    // In order to have the last attributes value we check if it changes, and if it does, we run a mark for check to update the view.\n    ngAfterViewInit(): void {\n        const hostDataTest = this.elementRef.nativeElement.getAttribute('data-test');\n\n        if (hostDataTest && this.hostDataTest() !== hostDataTest) {\n            this.hostDataTest.set(hostDataTest);\n            this.elementRef.nativeElement.removeAttribute('data-test');\n        }\n    }\n\n    validate() {\n        const isNotValid = !this.value && this.required;\n        return (\n            isNotValid && {\n                invalid: true,\n            }\n        );\n    }\n\n    onValueChange() {\n        if (this.onTouched) {\n            this.onTouched();\n        }\n\n        if (!this.disabled) {\n            if (this._controlValueAccessorChangeFn) {\n                this._controlValueAccessorChangeFn(this.value);\n            }\n        }\n    }\n\n    writeValue(value: string | null): void {\n        this.value = value;\n    }\n\n    registerOnChange(fn: (value: string | null) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    focusInput(): void {\n        this.inputElement.nativeElement.focus();\n    }\n\n    onBlurHandle($event: FocusEvent): void {\n        this.blur.emit($event);\n    }\n\n    onFocusHandle($event: FocusEvent): void {\n        this.focus.emit($event);\n    }\n\n    onKeyup($event: KeyboardEvent): void {\n        this.keyup.emit($event);\n    }\n\n    onClear(): void {\n        this.writeValue(null);\n    }\n}\n","@if (label) {\n    <label [for]=\"inputId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n<div\n    tabindex=\"0\"\n    class=\"input-wrapper\"\n    [class.inverse]=\"symbolPosition === 'left'\"\n    [class.with-icon]=\"symbolId\"\n    [class.with-prefix]=\"prefix\"\n    [class.with-suffix]=\"suffix\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    [class.disabled]=\"disabled\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    (click)=\"focusInput()\"\n    (keydown.enter)=\"focusInput()\">\n    @if (prefix) {\n        <div class=\"prefix\">\n            <span>\n                {{ prefix }}\n            </span>\n            <span class=\"divider\"></span>\n        </div>\n    }\n    <div class=\"content\">\n        <input\n            #input\n            [type]=\"inputType\"\n            [disabled]=\"disabled\"\n            [placeholder]=\"placeholder\"\n            [id]=\"inputId ?? ''\"\n            [attr.data-test]=\"hostDataTest() ? hostDataTest() : name\"\n            [(ngModel)]=\"value\"\n            (blur)=\"onBlurHandle($event)\"\n            (focus)=\"onFocusHandle($event)\"\n            (keyup)=\"onKeyup($event)\"\n            (ngModelChange)=\"onValueChange()\" />\n        @if (clearable) {\n            <button\n                type=\"button\"\n                class=\"clear-button\"\n                (click)=\"onClear()\">\n                <ap-symbol symbolId=\"close\" />\n            </button>\n        }\n    </div>\n    @if (suffix) {\n        <div class=\"suffix\">\n            <span class=\"divider\"></span>\n            <span>\n                {{ suffix }}\n            </span>\n        </div>\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n</div>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-legacy-select.mjs

@@ -32,7 +32,7 @@ class SelectComponent {
     inlineLabelElement;
     select;
     hovered = false;
-    optionsSignal = signal([], ...(ngDevMode ? [{ debugName: "optionsSignal" }] : []));
+    optionsSignal = signal([], ...(ngDevMode ? [{ debugName: "optionsSignal" }] : /* istanbul ignore next */ []));
     set options(options) {
         this.optionsSignal.set(options);
         this.filteredOptionsSignal.set(options);
@@ -98,7 +98,7 @@ class SelectComponent {
     valueChanges = new EventEmitter();
     _controlValueAccessorChangeFn;
     onTouched;
-    displayTypeSignal = signal('text', ...(ngDevMode ? [{ debugName: "displayTypeSignal" }] : []));
+    displayTypeSignal = signal('text', ...(ngDevMode ? [{ debugName: "displayTypeSignal" }] : /* istanbul ignore next */ []));
     enabledOptions = computed(() => {
         return this.optionsSignal().filter((value) => {
             if (typeof value === 'string') {
@@ -108,24 +108,24 @@ class SelectComponent {
                 return this.optionDisabled && !value[this.optionDisabled];
             }
         });
-    }, ...(ngDevMode ? [{ debugName: "enabledOptions" }] : []));
-    itemHoveredSignal = signal(null, ...(ngDevMode ? [{ debugName: "itemHoveredSignal" }] : []));
-    filteredOptionsSignal = signal([], ...(ngDevMode ? [{ debugName: "filteredOptionsSignal" }] : []));
-    loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : []));
-    selectedValuesSignal = signal([], ...(ngDevMode ? [{ debugName: "selectedValuesSignal" }] : []));
-    searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "enabledOptions" }] : /* istanbul ignore next */ []));
+    itemHoveredSignal = signal(null, ...(ngDevMode ? [{ debugName: "itemHoveredSignal" }] : /* istanbul ignore next */ []));
+    filteredOptionsSignal = signal([], ...(ngDevMode ? [{ debugName: "filteredOptionsSignal" }] : /* istanbul ignore next */ []));
+    loadingSignal = signal(false, ...(ngDevMode ? [{ debugName: "loadingSignal" }] : /* istanbul ignore next */ []));
+    selectedValuesSignal = signal([], ...(ngDevMode ? [{ debugName: "selectedValuesSignal" }] : /* istanbul ignore next */ []));
+    searchTermSignal = signal('', ...(ngDevMode ? [{ debugName: "searchTermSignal" }] : /* istanbul ignore next */ []));
     searchTerm$ = toObservable(this.searchTermSignal);
-    maximumDisplayValuesSignal = signal(-1, ...(ngDevMode ? [{ debugName: "maximumDisplayValuesSignal" }] : []));
-    hiddenCountSignal = signal(0, ...(ngDevMode ? [{ debugName: "hiddenCountSignal" }] : []));
+    maximumDisplayValuesSignal = signal(-1, ...(ngDevMode ? [{ debugName: "maximumDisplayValuesSignal" }] : /* istanbul ignore next */ []));
+    hiddenCountSignal = signal(0, ...(ngDevMode ? [{ debugName: "hiddenCountSignal" }] : /* istanbul ignore next */ []));
     allSelectedSignal = computed(() => {
         return this.selectedValuesSignal().length === this.enabledOptions().length;
-    }, ...(ngDevMode ? [{ debugName: "allSelectedSignal" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "allSelectedSignal" }] : /* istanbul ignore next */ []));
     partialySelectedSignal = computed(() => {
         return this.selectedValuesSignal().length > 0 && this.selectedValuesSignal().length < this.enabledOptions().length;
-    }, ...(ngDevMode ? [{ debugName: "partialySelectedSignal" }] : []));
+    }, ...(ngDevMode ? [{ debugName: "partialySelectedSignal" }] : /* istanbul ignore next */ []));
     injector = inject(EnvironmentInjector);
     selectValueContainer;
-    selectValueContainerWidthSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectValueContainerWidthSignal" }] : []));
+    selectValueContainerWidthSignal = signal(0, ...(ngDevMode ? [{ debugName: "selectValueContainerWidthSignal" }] : /* istanbul ignore next */ []));
     constructor() {
         this.symbolRegistry.registerSymbols([apCheck, apErrorFill, apRoundedCheckFill, apSearch, apPlus, apClose]);
     }
@@ -319,10 +319,10 @@ class SelectComponent {
         itemsContainer.style.maxWidth = `${totalWidth}px`;
         this.hiddenCountSignal.set(hiddenCount);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.18", type: SelectComponent, isStandalone: true, selector: "ap-select", inputs: { options: "options", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", appendTo: "appendTo", clearable: "clearable", description: "description", disabled: "disabled", selectId: "selectId", inlineLabel: "inlineLabel", create: "create", createText: "createText", group: "group", selectableGroup: "selectableGroup", label: "label", multiple: "multiple", only: "only", onlyText: "onlyText", placeholder: "placeholder", selectAll: "selectAll", selectAllText: "selectAllText", unselectAllText: "unselectAllText", searchable: "searchable", searchPlaceholder: "searchPlaceholder", searchFn: "searchFn", notFoundText: "notFoundText", loadingText: "loadingText", displayType: "displayType", optionLabel: "optionLabel", optionCaption: "optionCaption", optionDivider: "optionDivider", optionProfileImageUrl: "optionProfileImageUrl", optionBadgeLabel: "optionBadgeLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupTag: "optionGroupTag", maximumDisplayOptions: "maximumDisplayOptions", customOptionTemplate: "customOptionTemplate", customLabelTemplate: "customLabelTemplate", customMultiLabelTemplate: "customMultiLabelTemplate", errorMessage: "errorMessage", successMessage: "successMessage", compareWith: "compareWith" }, outputs: { createNew: "createNew", valueChanges: "valueChanges" }, host: { properties: { "class.hovered": "this.hovered", "class.inline": "this.inlineLabel" } }, providers: [SELECT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inlineLabelElement", first: true, predicate: ["inlineLabel"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "@if (label && !inlineLabel) {\n    <label [for]=\"selectId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n@if (inlineLabel) {\n    <div\n        #inlineLabel\n        tabindex=\"0\"\n        class=\"inline-label\"\n        (click)=\"onOpenSelect()\"\n        (keydown.enter)=\"onOpenSelect()\"\n        (mouseenter)=\"onInlineInputEnter()\"\n        (mouseleave)=\"onInlineInputLeave()\">\n        @if (label && inlineLabel) {\n            <label\n                class=\"label\"\n                [for]=\"selectId\">\n                <span>\n                    {{ label }}\n                </span>\n            </label>\n        }\n        <div class=\"divider\"></div>\n    </div>\n}\n\n<ng-select\n    #select\n    class=\"ap-select-legacy\"\n    [tabIndex]=\"0\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [labelForId]=\"selectId\"\n    [searchable]=\"false\"\n    [closeOnSelect]=\"!multiple\"\n    [bindValue]=\"optionValue ? optionValue : ''\"\n    [groupBy]=\"group ? optionGroupLabel : ''\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    [markFirst]=\"false\"\n    [selectableGroup]=\"selectableGroup\"\n    [selectableGroupAsModel]=\"false\"\n    [appendTo]=\"appendTo\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [items]=\"optionsSignal()\"\n    [compareWith]=\"compareWith\"\n    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    (ngModelChange)=\"onSelectedValuesChange($event)\"\n    (open)=\"onSelectOpened()\">\n    @if (searchable || selectAll) {\n        <ng-template\n            let-item=\"item\"\n            ng-header-tmp>\n            @if (searchable) {\n                <ap-input\n                    #searchInput\n                    tabindex=\"0\"\n                    name=\"search-input\"\n                    class=\"full-width\"\n                    symbolId=\"search\"\n                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\" />\n            }\n            @if (selectAll) {\n                <ap-checkbox\n                    class=\"select-all-checkbox\"\n                    name=\"option-group-select-all\"\n                    [indeterminate]=\"partialySelectedSignal()\"\n                    [checked]=\"allSelectedSignal()\"\n                    (click)=\"onToggleAll()\">\n                    <span>\n                        {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n                    </span>\n                </ap-checkbox>\n            }\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-optgroup-tmp>\n        <div\n            class=\"group\"\n            [class.with-search]=\"searchable\"\n            [class.with-select-all]=\"selectAll\">\n            @if (!multiple) {\n                <span class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n                @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                    <ap-badge color=\"blue\">\n                        {{ optionGroupTag[item[optionGroupLabel]] }}\n                    </ap-badge>\n                }\n            }\n            @if (multiple) {\n                @if (selectableGroup) {\n                    <ap-checkbox\n                        [name]=\"'option-group-selection-' + item['group']\"\n                        [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n                        [checked]=\"isGroupChecked(item$.children)\">\n                        <span class=\"group-label\">\n                            {{ item[optionGroupLabel] }}\n                        </span>\n                        @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                            <ap-badge color=\"blue\">\n                                {{ optionGroupTag[item[optionGroupLabel]] }}\n                            </ap-badge>\n                        }\n                    </ap-checkbox>\n                }\n                @if (!selectableGroup) {\n                    <span class=\"group-label\">\n                        {{ item[optionGroupLabel] }}\n                    </span>\n                }\n            }\n        </div>\n    </ng-template>\n    <ng-template\n        let-items=\"items\"\n        let-item$=\"item$\"\n        ng-multi-label-tmp>\n        <ng-container>\n            <div class=\"multiple-item\">\n                @if (!customMultiLabelTemplate) {\n                    @for (item of items; track item) {\n                        @if (optionLabel && item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item[optionLabel]\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    color=\"blue\"\n                                    class=\"item\"\n                                    removable=\"true\"\n                                    [content]=\"item[optionLabel]\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    clearable=\"true\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    {{ item[optionLabel] }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span\n                                        class=\"text-item\"\n                                        [title]=\"item[optionLabel]\">\n                                        {{ item[optionLabel] }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                        @if (!optionLabel || !item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item\">\n                                    {{ item }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    class=\"item\"\n                                    color=\"blue\"\n                                    [removable]=\"multiple\"\n                                    [content]=\"item\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    [clearable]=\"multiple\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    {{ item }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span class=\"text-item\">\n                                        {{ item }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                    }\n                }\n                @if (customMultiLabelTemplate) {\n                    <ng-container *ngTemplateOutlet=\"customMultiLabelTemplate; context: { options: items }\" />\n                }\n            </div>\n            @if (hiddenCountSignal() > 0) {\n                <div class=\"remaining\">\n                    @if (displayTypeSignal() === 'text' || displayTypeSignal() === 'withAvatar' || !displayTypeSignal()) {\n                        <span class=\"text-item\">+{{ hiddenCountSignal() }}</span>\n                    }\n                    @if (displayTypeSignal() === 'tag') {\n                        <ap-tag\n                            class=\"text-item\"\n                            clearable=\"false\">\n                            +{{ hiddenCountSignal() }}\n                        </ap-tag>\n                    }\n                    @if (displayTypeSignal() === 'label') {\n                        <ap-label\n                            color=\"blue\"\n                            [removable]=\"false\"\n                            [content]=\"'+' + hiddenCountSignal()\" />\n                    }\n                </div>\n            }\n        </ng-container>\n    </ng-template>\n    <ng-template ng-loadingtext-tmp>\n        <div class=\"loading-state\">\n            <ap-loader diameter=\"30\" />\n            <span>\n                {{ loadingText }}\n            </span>\n        </div>\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp></ng-template>\n    @if (create) {\n        <ng-template ng-footer-tmp>\n            <button\n                class=\"create-new\"\n                type=\"button\"\n                (click)=\"onCreateNew()\">\n                <ap-symbol\n                    symbolId=\"plus\"\n                    size=\"sm\" />\n                <span>\n                    {{ createText }}\n                </span>\n                @if (searchTermSignal()) {\n                    \"{{ searchTermSignal() }}\"\n                }\n            </button>\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-option-tmp>\n        @if ((!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider]) && !customOptionTemplate) {\n            <div class=\"option\">\n                <span\n                    class=\"option-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n                @if (item$.selected && !multiple) {\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"electric-blue\"\n                        size=\"sm\" />\n                }\n            </div>\n        }\n        @if ((optionLabel && item[optionLabel]) || customOptionTemplate) {\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionCaption && item[optionCaption]\"\n                [class.multiple]=\"multiple\"\n                (mouseenter)=\"onHoverItem(item$.htmlId)\"\n                (mouseleave)=\"onLeaveItem()\">\n                <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n            </div>\n        }\n        @if (optionDivider && item[optionDivider]) {\n            <div class=\"divider\"></div>\n        }\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        ng-label-tmp>\n        @if (customLabelTemplate) {\n            <ng-container *ngTemplateOutlet=\"customLabelTemplate; context: { option: item }\" />\n        }\n        @if (!optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span\n                    class=\"text-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            }\n        }\n        @if (optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    [title]=\"item[optionLabel]\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <div class=\"with-avatar\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    <span\n                        class=\"text-item\"\n                        [title]=\"item[optionLabel]\">\n                        {{ item[optionLabel] }}\n                    </span>\n                </div>\n            }\n        }\n    </ng-template>\n    <ng-template ng-notfound-tmp>\n        <div class=\"option not-found\">\n            {{ notFoundText }}\n        </div>\n    </ng-template>\n</ng-select>\n\n<ng-template\n    #contentItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    @if (multiple) {\n        <div class=\"disabled-opaque\"></div>\n        @if (multiple) {\n            <ap-checkbox\n                [checked]=\"item$.selected\"\n                [disabled]=\"item$.disabled\"\n                [name]=\"'option-selection-' + item$.htmlId\">\n                <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n            </ap-checkbox>\n        }\n    }\n    @if (!multiple) {\n        <div class=\"disabled-opaque\"></div>\n        <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n    }\n</ng-template>\n\n<ng-template\n    #textItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <div class=\"content\">\n        @if (!customOptionTemplate) {\n            @if (!optionLabel) {\n                <span class=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (optionProfileImageUrl) {\n                <ap-avatar\n                    size=\"24\"\n                    [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                    [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                    [showInitials]=\"true\" />\n            }\n            @if (optionLabel && item[optionLabel]) {\n                <div class=\"texts\">\n                    <div class=\"first-line\">\n                        <span\n                            class=\"label\"\n                            [title]=\"item[optionLabel]\">\n                            {{ item[optionLabel] }}\n                        </span>\n                        @if (optionBadgeLabel && item[optionBadgeLabel]) {\n                            <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n                        }\n                    </div>\n                    @if (optionCaption && item[optionCaption]) {\n                        <span\n                            class=\"caption\"\n                            [title]=\"item[optionCaption]\">\n                            {{ item[optionCaption] }}\n                        </span>\n                    }\n                </div>\n            }\n        }\n        @if (customOptionTemplate) {\n            <ng-container *ngTemplateOutlet=\"customOptionTemplate; context: { option: item }\" />\n        }\n        @if (only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"onSelectOnly(item)\">\n                {{ onlyText }}\n            </button>\n        }\n        @if (item$.selected && !multiple) {\n            <ap-symbol\n                symbolId=\"check\"\n                color=\"electric-blue\"\n                size=\"sm\" />\n        }\n    </div>\n</ng-template>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n", styles: ["ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight);color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-select.invalid:not([disabled]):not(.transparent) .ng-select-container,ap-select.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) .ng-select-container{border-color:var(--comp-input-border-error-color)}ap-select.valid:not([disabled]):not(.transparent) .ng-select-container{border:1px solid var(--comp-input-border-success-color)}.ng-select.ap-select-legacy .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select-legacy .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select-legacy .ng-select-container .ng-value-container{overflow-x:auto;overflow-y:hidden}.ng-select.ap-select-legacy .ng-select-container .ng-value-container:hover,.ng-select.ap-select-legacy .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select-legacy.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select-legacy.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select-legacy.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select-legacy.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value{overflow:visible!important;width:100%;display:flex}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value span.text-item{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:var(--ref-spacing-xxs)}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value span{display:inline-block}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-tag{width:100%;margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-tag div{overflow:auto}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-label{margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-label .label{overflow:auto}.ng-select.ap-select-legacy.ng-select-multiple .ng-select-container .ng-value-container{padding-left:12px;flex-wrap:nowrap;overflow:hidden}.ng-select.ap-select-legacy.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select-legacy .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select-legacy .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select-legacy .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select-legacy .ng-value-container .multiple-item .item{visibility:hidden}.ng-select.ap-select-legacy .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select-legacy .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select-legacy .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select-legacy .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select-legacy .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-select.ap-select-legacy.with-error .ng-select-container{border-color:var(--comp-input-border-error-color)}.ng-select.ap-select-legacy.with-success .ng-select-container{border-color:var(--comp-input-border-success-color)}.ng-dropdown-panel.ap-select-legacy,.ap-select-legacy .ng-select-container+.ng-dropdown-panel{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select-legacy.ng-select-bottom,.ap-select-legacy .ng-select-container+.ng-dropdown-panel.ng-select-bottom{margin-top:var(--ref-spacing-xxxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select-legacy .ng-option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select-legacy .ng-option .ng-option-label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-child,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select-legacy .ng-option:hover:not(.ng-option-disabled) .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select-legacy .ng-option:active:not(.ng-option-disabled) .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select-legacy .ng-option:focus:not(.ng-option-disabled) .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option:not(.multiple),.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple){background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option:not(.multiple) .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected.ng-option-marked,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected.ng-option-marked .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected.ng-option-marked .option span,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option span{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked:hover,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option span,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option span{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option.multiple .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option.multiple .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-disabled,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-disabled .disabled-opaque,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select-legacy .loading-state,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select-legacy .loading-state span,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select-legacy .group,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select-legacy .group ap-checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .group ap-checkbox .checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .group ap-checkbox .checkbox label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select-legacy .divider,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select-legacy .create-new,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select-legacy .create-new:hover,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .create-new:active,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select-legacy .option ap-checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .option ap-checkbox .checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .option ap-checkbox .checkbox label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox label{flex:1;overflow:auto}.ng-dropdown-panel.ap-select-legacy .option .option-item,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;flex:1}.ng-dropdown-panel.ap-select-legacy .option.not-found,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select-legacy .option .content,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1;width:100%}.ng-dropdown-panel.ap-select-legacy .option .content .item,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .item{flex:1}.ng-dropdown-panel.ap-select-legacy .option .content .texts,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts{flex:1;overflow:auto}.ng-dropdown-panel.ap-select-legacy .option .content .texts .first-line,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select-legacy .option .content .texts .first-line .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select-legacy .option .content .texts,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts{display:flex;flex-direction:column}.ng-dropdown-panel.ap-select-legacy .option .content ap-symbol,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .option .content ap-symbol div.svg,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .option .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select-legacy .option.with-caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select-legacy .option.with-caption .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select-legacy .option.with-caption .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-panel-items,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select-legacy .ng-optgroup,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select-legacy .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select-legacy .ng-optgroup:first-child .with-select-all,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-search,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select-legacy .ng-optgroup .group,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select-legacy .ng-optgroup .group .group-label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-header,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-header .select-all-checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-footer,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-footer{cursor:pointer;padding:0;border-top:1px solid var(--ref-color-grey-10)}.ng-dropdown-panel.ap-select-legacy .standalone-link,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select-legacy .standalone-link:hover,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .standalone-link:active,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .standalone-link:active{color:var(--ref-color-electric-blue-150)}.form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-select.ng-valid .ng-select-container{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-select.ng-invalid .ng-select-container{border-color:var(--comp-input-border-error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: InputComponent, selector: "ap-input", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "disabled", "clearable", "inputType", "inputId", "name", "label", "description", "prefix", "suffix", "required", "placeholder", "errorMessage", "successMessage", "symbolId", "symbolPosition"], outputs: ["focus", "blur", "keyup"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.16", type: SelectComponent, isStandalone: true, selector: "ap-select", inputs: { options: "options", ariaLabel: "ariaLabel", ariaLabelledBy: "ariaLabelledBy", ariaDescribedBy: "ariaDescribedBy", appendTo: "appendTo", clearable: "clearable", description: "description", disabled: "disabled", selectId: "selectId", inlineLabel: "inlineLabel", create: "create", createText: "createText", group: "group", selectableGroup: "selectableGroup", label: "label", multiple: "multiple", only: "only", onlyText: "onlyText", placeholder: "placeholder", selectAll: "selectAll", selectAllText: "selectAllText", unselectAllText: "unselectAllText", searchable: "searchable", searchPlaceholder: "searchPlaceholder", searchFn: "searchFn", notFoundText: "notFoundText", loadingText: "loadingText", displayType: "displayType", optionLabel: "optionLabel", optionCaption: "optionCaption", optionDivider: "optionDivider", optionProfileImageUrl: "optionProfileImageUrl", optionBadgeLabel: "optionBadgeLabel", optionValue: "optionValue", optionDisabled: "optionDisabled", optionGroupLabel: "optionGroupLabel", optionGroupTag: "optionGroupTag", maximumDisplayOptions: "maximumDisplayOptions", customOptionTemplate: "customOptionTemplate", customLabelTemplate: "customLabelTemplate", customMultiLabelTemplate: "customMultiLabelTemplate", errorMessage: "errorMessage", successMessage: "successMessage", compareWith: "compareWith" }, outputs: { createNew: "createNew", valueChanges: "valueChanges" }, host: { properties: { "class.hovered": "this.hovered", "class.inline": "this.inlineLabel" } }, providers: [SELECT_VALUE_ACCESSOR], viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true }, { propertyName: "inlineLabelElement", first: true, predicate: ["inlineLabel"], descendants: true }, { propertyName: "select", first: true, predicate: ["select"], descendants: true }], ngImport: i0, template: "@if (label && !inlineLabel) {\n    <label [for]=\"selectId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n@if (inlineLabel) {\n    <div\n        #inlineLabel\n        tabindex=\"0\"\n        class=\"inline-label\"\n        (click)=\"onOpenSelect()\"\n        (keydown.enter)=\"onOpenSelect()\"\n        (mouseenter)=\"onInlineInputEnter()\"\n        (mouseleave)=\"onInlineInputLeave()\">\n        @if (label && inlineLabel) {\n            <label\n                class=\"label\"\n                [for]=\"selectId\">\n                <span>\n                    {{ label }}\n                </span>\n            </label>\n        }\n        <div class=\"divider\"></div>\n    </div>\n}\n\n<ng-select\n    #select\n    class=\"ap-select-legacy\"\n    [tabIndex]=\"0\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [labelForId]=\"selectId\"\n    [searchable]=\"false\"\n    [closeOnSelect]=\"!multiple\"\n    [bindValue]=\"optionValue ? optionValue : ''\"\n    [groupBy]=\"group ? optionGroupLabel : ''\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    [markFirst]=\"false\"\n    [selectableGroup]=\"selectableGroup\"\n    [selectableGroupAsModel]=\"false\"\n    [appendTo]=\"appendTo\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [items]=\"optionsSignal()\"\n    [compareWith]=\"compareWith\"\n    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    (ngModelChange)=\"onSelectedValuesChange($event)\"\n    (open)=\"onSelectOpened()\">\n    @if (searchable || selectAll) {\n        <ng-template\n            let-item=\"item\"\n            ng-header-tmp>\n            @if (searchable) {\n                <ap-input\n                    #searchInput\n                    tabindex=\"0\"\n                    name=\"search-input\"\n                    class=\"full-width\"\n                    symbolId=\"search\"\n                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\" />\n            }\n            @if (selectAll) {\n                <ap-checkbox\n                    class=\"select-all-checkbox\"\n                    name=\"option-group-select-all\"\n                    [indeterminate]=\"partialySelectedSignal()\"\n                    [checked]=\"allSelectedSignal()\"\n                    (click)=\"onToggleAll()\">\n                    <span>\n                        {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n                    </span>\n                </ap-checkbox>\n            }\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-optgroup-tmp>\n        <div\n            class=\"group\"\n            [class.with-search]=\"searchable\"\n            [class.with-select-all]=\"selectAll\">\n            @if (!multiple) {\n                <span class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n                @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                    <ap-badge color=\"blue\">\n                        {{ optionGroupTag[item[optionGroupLabel]] }}\n                    </ap-badge>\n                }\n            }\n            @if (multiple) {\n                @if (selectableGroup) {\n                    <ap-checkbox\n                        [name]=\"'option-group-selection-' + item['group']\"\n                        [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n                        [checked]=\"isGroupChecked(item$.children)\">\n                        <span class=\"group-label\">\n                            {{ item[optionGroupLabel] }}\n                        </span>\n                        @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                            <ap-badge color=\"blue\">\n                                {{ optionGroupTag[item[optionGroupLabel]] }}\n                            </ap-badge>\n                        }\n                    </ap-checkbox>\n                }\n                @if (!selectableGroup) {\n                    <span class=\"group-label\">\n                        {{ item[optionGroupLabel] }}\n                    </span>\n                }\n            }\n        </div>\n    </ng-template>\n    <ng-template\n        let-items=\"items\"\n        let-item$=\"item$\"\n        ng-multi-label-tmp>\n        <ng-container>\n            <div class=\"multiple-item\">\n                @if (!customMultiLabelTemplate) {\n                    @for (item of items; track item) {\n                        @if (optionLabel && item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item[optionLabel]\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    color=\"blue\"\n                                    class=\"item\"\n                                    removable=\"true\"\n                                    [content]=\"item[optionLabel]\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    clearable=\"true\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    {{ item[optionLabel] }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span\n                                        class=\"text-item\"\n                                        [title]=\"item[optionLabel]\">\n                                        {{ item[optionLabel] }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                        @if (!optionLabel || !item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item\">\n                                    {{ item }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    class=\"item\"\n                                    color=\"blue\"\n                                    [removable]=\"multiple\"\n                                    [content]=\"item\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    [clearable]=\"multiple\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    {{ item }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span class=\"text-item\">\n                                        {{ item }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                    }\n                }\n                @if (customMultiLabelTemplate) {\n                    <ng-container *ngTemplateOutlet=\"customMultiLabelTemplate; context: { options: items }\" />\n                }\n            </div>\n            @if (hiddenCountSignal() > 0) {\n                <div class=\"remaining\">\n                    @if (displayTypeSignal() === 'text' || displayTypeSignal() === 'withAvatar' || !displayTypeSignal()) {\n                        <span class=\"text-item\">+{{ hiddenCountSignal() }}</span>\n                    }\n                    @if (displayTypeSignal() === 'tag') {\n                        <ap-tag\n                            class=\"text-item\"\n                            clearable=\"false\">\n                            +{{ hiddenCountSignal() }}\n                        </ap-tag>\n                    }\n                    @if (displayTypeSignal() === 'label') {\n                        <ap-label\n                            color=\"blue\"\n                            [removable]=\"false\"\n                            [content]=\"'+' + hiddenCountSignal()\" />\n                    }\n                </div>\n            }\n        </ng-container>\n    </ng-template>\n    <ng-template ng-loadingtext-tmp>\n        <div class=\"loading-state\">\n            <ap-loader diameter=\"30\" />\n            <span>\n                {{ loadingText }}\n            </span>\n        </div>\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp></ng-template>\n    @if (create) {\n        <ng-template ng-footer-tmp>\n            <button\n                class=\"create-new\"\n                type=\"button\"\n                (click)=\"onCreateNew()\">\n                <ap-symbol\n                    symbolId=\"plus\"\n                    size=\"sm\" />\n                <span>\n                    {{ createText }}\n                </span>\n                @if (searchTermSignal()) {\n                    \"{{ searchTermSignal() }}\"\n                }\n            </button>\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-option-tmp>\n        @if ((!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider]) && !customOptionTemplate) {\n            <div class=\"option\">\n                <span\n                    class=\"option-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n                @if (item$.selected && !multiple) {\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"electric-blue\"\n                        size=\"sm\" />\n                }\n            </div>\n        }\n        @if ((optionLabel && item[optionLabel]) || customOptionTemplate) {\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionCaption && item[optionCaption]\"\n                [class.multiple]=\"multiple\"\n                (mouseenter)=\"onHoverItem(item$.htmlId)\"\n                (mouseleave)=\"onLeaveItem()\">\n                <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n            </div>\n        }\n        @if (optionDivider && item[optionDivider]) {\n            <div class=\"divider\"></div>\n        }\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        ng-label-tmp>\n        @if (customLabelTemplate) {\n            <ng-container *ngTemplateOutlet=\"customLabelTemplate; context: { option: item }\" />\n        }\n        @if (!optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span\n                    class=\"text-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            }\n        }\n        @if (optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    [title]=\"item[optionLabel]\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <div class=\"with-avatar\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    <span\n                        class=\"text-item\"\n                        [title]=\"item[optionLabel]\">\n                        {{ item[optionLabel] }}\n                    </span>\n                </div>\n            }\n        }\n    </ng-template>\n    <ng-template ng-notfound-tmp>\n        <div class=\"option not-found\">\n            {{ notFoundText }}\n        </div>\n    </ng-template>\n</ng-select>\n\n<ng-template\n    #contentItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    @if (multiple) {\n        <div class=\"disabled-opaque\"></div>\n        @if (multiple) {\n            <ap-checkbox\n                [checked]=\"item$.selected\"\n                [disabled]=\"item$.disabled\"\n                [name]=\"'option-selection-' + item$.htmlId\">\n                <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n            </ap-checkbox>\n        }\n    }\n    @if (!multiple) {\n        <div class=\"disabled-opaque\"></div>\n        <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n    }\n</ng-template>\n\n<ng-template\n    #textItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <div class=\"content\">\n        @if (!customOptionTemplate) {\n            @if (!optionLabel) {\n                <span class=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (optionProfileImageUrl) {\n                <ap-avatar\n                    size=\"24\"\n                    [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                    [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                    [showInitials]=\"true\" />\n            }\n            @if (optionLabel && item[optionLabel]) {\n                <div class=\"texts\">\n                    <div class=\"first-line\">\n                        <span\n                            class=\"label\"\n                            [title]=\"item[optionLabel]\">\n                            {{ item[optionLabel] }}\n                        </span>\n                        @if (optionBadgeLabel && item[optionBadgeLabel]) {\n                            <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n                        }\n                    </div>\n                    @if (optionCaption && item[optionCaption]) {\n                        <span\n                            class=\"caption\"\n                            [title]=\"item[optionCaption]\">\n                            {{ item[optionCaption] }}\n                        </span>\n                    }\n                </div>\n            }\n        }\n        @if (customOptionTemplate) {\n            <ng-container *ngTemplateOutlet=\"customOptionTemplate; context: { option: item }\" />\n        }\n        @if (only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"onSelectOnly(item)\">\n                {{ onlyText }}\n            </button>\n        }\n        @if (item$.selected && !multiple) {\n            <ap-symbol\n                symbolId=\"check\"\n                color=\"electric-blue\"\n                size=\"sm\" />\n        }\n    </div>\n</ng-template>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n", styles: ["ap-select{--placeholder-padding-left: 0px;display:flex;flex-direction:column;position:relative;gap:var(--ref-spacing-xxs);font-family:var(--ref-font-family);font-size:var(--ref-font-size-sm)}ap-select.inline .inline-label{display:flex;align-items:center;position:absolute;z-index:10000;top:0;left:0;height:100%;padding-left:var(--ref-spacing-xs);box-sizing:border-box;color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label:hover{cursor:pointer}ap-select.inline .inline-label .label{display:flex;z-index:10;font-size:var(--comp-select-inline-label-text-size);line-height:var(--comp-select-inline-label-text-line-height);font-family:var(--comp-select-inline-label-text-font-family);font-weight:var(--comp-select-inline-label-text-font-weight);color:var(--comp-select-inline-label-text-color)}ap-select.inline .inline-label .label:hover{cursor:pointer}ap-select.inline .inline-label .label span{width:fit-content}ap-select.inline .inline-label .divider{height:18px;max-height:18px;width:1px;margin:0 8px;background-color:var(--comp-select-separator-color);border-radius:1px}ap-select.inline .ng-select .ng-value-container{padding-left:calc(var(--placeholder-padding-left))!important}ap-select.hovered .ng-select-container{border-color:var(--ref-color-grey-40)!important}ap-select label{display:flex;flex-direction:column;gap:var(--comp-forms-label-spacing-vertical);font-size:var(--comp-forms-label-size);font-weight:var(--comp-forms-label-font-weight);line-height:var(--comp-forms-label-line-height);font-family:var(--comp-forms-label-font-family);color:var(--comp-forms-label-text-color)}ap-select label .description{font-size:var(--comp-forms-label-description-text-size);font-weight:var(--comp-forms-label-description-text-font-weight);line-height:var(--comp-forms-label-description-text-line-height);font-family:var(--comp-forms-label-description-text-font-family);color:var(--comp-forms-label-description-text-color)}ap-select.invalid:not([disabled]):not(.transparent) .ng-select-container,ap-select.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent) .ng-select-container{border-color:var(--comp-input-border-error-color)}ap-select.valid:not([disabled]):not(.transparent) .ng-select-container{border:1px solid var(--comp-input-border-success-color)}.ng-select.ap-select-legacy .ng-select-container{border-color:var(--ref-color-grey-20)}.ng-select.ap-select-legacy .ng-select-container:hover{box-shadow:none;cursor:pointer;border-color:var(--ref-color-grey-40)!important}.ng-select.ap-select-legacy .ng-select-container .ng-value-container{overflow-x:auto;overflow-y:hidden}.ng-select.ap-select-legacy .ng-select-container .ng-value-container:hover,.ng-select.ap-select-legacy .ng-select-container .ng-value-container input:hover{cursor:pointer}.ng-select.ap-select-legacy.ng-select-opened.ng-select-bottom .ng-select-container,.ng-select.ap-select-legacy.ng-select-opened.ng-select-top .ng-select-container{border-radius:var(--ref-border-radius-sm);border-color:var(--ref-color-grey-20)}.ng-select.ap-select-legacy.ng-select-opened .ng-arrow{border-color:transparent transparent var(--ref-color-electric-blue-100)}.ng-select.ap-select-legacy.ng-select-opened .ng-select-container:hover{border-color:var(--ref-color-electric-blue-100)!important}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value{overflow:visible!important;width:100%;display:flex}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value span.text-item{display:inline-block;width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding-right:var(--ref-spacing-xxs)}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value span{display:inline-block}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-tag{width:100%;margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-tag div{overflow:auto}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-label{margin-right:var(--ref-spacing-xxs)}.ng-select.ap-select-legacy.ng-select-single .ng-value-container .ng-value ap-label .label{overflow:auto}.ng-select.ap-select-legacy.ng-select-multiple .ng-select-container .ng-value-container{padding-left:12px;flex-wrap:nowrap;overflow:hidden}.ng-select.ap-select-legacy.ng-select-multiple .ng-select-container .ng-value-container .ng-placeholder{top:0!important}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container{background-color:var(--ref-color-grey-20);border-color:var(--ref-color-grey-20);color:var(--ref-color-grey-100)}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container:hover{cursor:default!important;background-color:var(--ref-color-grey-20)!important;border-color:var(--ref-color-grey-20)!important}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container .ng-placeholder{color:var(--ref-color-grey-60)!important}.ng-select.ap-select-legacy.ng-select-disabled .ng-select-container .ng-value-container:hover{cursor:default!important}.ng-select.ap-select-legacy .ng-value-container{padding-left:12px;height:100%;position:relative;padding-top:0!important}.ng-select.ap-select-legacy .ng-value-container .ng-placeholder{position:absolute;padding-left:0!important;color:var(--ref-color-grey-60);font-weight:var(--ref-font-weight-regular);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select-legacy .ng-value-container .multiple-item{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select-legacy .ng-value-container .multiple-item .item{visibility:hidden}.ng-select.ap-select-legacy .ng-value-container .multiple-item .text-item{color:var(--ref-color-grey-100);font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm)}.ng-select.ap-select-legacy .ng-value-container .with-avatar{display:flex;align-items:center;gap:var(--ref-spacing-xxxs)}.ng-select.ap-select-legacy .ng-value-container .ng-value{margin:0!important}.ng-select.ap-select-legacy .ng-value-container .ng-input{position:unset!important;padding:0!important;height:100%!important}.ng-select.ap-select-legacy .ng-value-container .ng-input input{height:100%;color:var(--ref-color-grey-100)!important;caret-color:var(--ref-color-grey-100)!important;border-radius:unset}.ng-select.ap-select-legacy.with-error .ng-select-container{border-color:var(--comp-input-border-error-color)}.ng-select.ap-select-legacy.with-success .ng-select-container{border-color:var(--comp-input-border-success-color)}.ng-dropdown-panel.ap-select-legacy,.ap-select-legacy .ng-select-container+.ng-dropdown-panel{overflow:hidden;border:none;box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color)}.ng-dropdown-panel.ap-select-legacy.ng-select-bottom,.ap-select-legacy .ng-select-container+.ng-dropdown-panel.ng-select-bottom{margin-top:var(--ref-spacing-xxxs);border-radius:var(--ref-border-radius-sm)}.ng-dropdown-panel.ap-select-legacy .ng-option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option{box-sizing:border-box;padding:0;position:relative}.ng-dropdown-panel.ap-select-legacy .ng-option .ng-option-label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option .ng-option-label{padding:0}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-child,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-child{padding-left:0}.ng-dropdown-panel.ap-select-legacy .ng-option:hover:not(.ng-option-disabled) .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option:hover:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select-legacy .ng-option:active:not(.ng-option-disabled) .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option:active:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select-legacy .ng-option:focus:not(.ng-option-disabled) .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option:focus:not(.ng-option-disabled) .option{background-color:var(--ref-color-electric-blue-20)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option:not(.multiple),.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple){background-color:var(--ref-color-electric-blue-10);color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option:not(.multiple) .label,.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option:not(.multiple) .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option:not(.multiple) .caption{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected .option .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected .option .label{font-family:var(--comp-select-one-line-selected-text-font-family);font-size:var(--comp-select-one-line-selected-text-size);line-height:var(--comp-select-one-line-selected-text-line-height);font-weight:var(--comp-select-one-line-selected-text-font-weight);color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected.ng-option-marked,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected.ng-option-marked .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option{background-color:var(--ref-color-electric-blue-10)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-selected.ng-option-marked .option span,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-selected.ng-option-marked .option span{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked:hover,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked:hover{background-color:transparent}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option span,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option span{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option.multiple .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .label{color:var(--ref-color-grey-100)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-marked .option.multiple .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-marked .option.multiple .caption{color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-disabled,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled{color:var(--ref-color-grey-40)}.ng-dropdown-panel.ap-select-legacy .ng-option.ng-option-disabled .disabled-opaque,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-option.ng-option-disabled .disabled-opaque{position:absolute;inset:0;opacity:.6;background-color:var(--ref-color-white);cursor:default;width:100%;height:100%;z-index:999}.ng-dropdown-panel.ap-select-legacy .loading-state,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .loading-state{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:var(--ref-spacing-xxs);min-height:90px;max-height:90px;padding:var(--ref-spacing-md) var(--ref-spacing-sm) var(--ref-spacing-sm);box-sizing:border-box}.ng-dropdown-panel.ap-select-legacy .loading-state span,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .loading-state span{font-size:var(--ref-font-size-sm);line-height:var(--ref-font-line-height-sm);font-style:italic;font-weight:var(--ref-font-weight-regular);color:var(--ref-color-grey-80)}.ng-dropdown-panel.ap-select-legacy .group,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group{display:flex;align-items:center;width:100%;gap:var(--ref-spacing-xxs);padding:var(--comp-select-group-padding-horizontal) var(--comp-select-group-padding-vertical)}.ng-dropdown-panel.ap-select-legacy .group ap-checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group ap-checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .group ap-checkbox .checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .group ap-checkbox .checkbox label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .group ap-checkbox .checkbox label{display:flex;gap:var(--ref-spacing-xxs);flex:1}.ng-dropdown-panel.ap-select-legacy .divider,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .divider{width:100%;height:1px;background-color:var(--comp-select-separator-color);margin:var(--ref-spacing-xxs) 0}.ng-dropdown-panel.ap-select-legacy .create-new,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .create-new{display:flex;align-items:center;border:none;width:100%;background-color:transparent;gap:var(--ref-spacing-xxxs);color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);cursor:pointer;padding:var(--comp-select-search-bar-bottom-link-margin-top) var(--comp-select-search-bar-bottom-link-padding-horizontal) var(--comp-select-search-bar-bottom-link-padding-bottom) var(--comp-select-search-bar-bottom-link-padding-horizontal);line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm)}.ng-dropdown-panel.ap-select-legacy .create-new:hover,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .create-new:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .create-new:active,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .create-new:active{color:var(--ref-color-electric-blue-150)}.ng-dropdown-panel.ap-select-legacy .option,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option{display:flex;align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);max-height:var(--comp-select-one-line-height);color:var(--comp-select-one-line-text-color);background-color:var(--comp-select-one-line-background-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}.ng-dropdown-panel.ap-select-legacy .option ap-checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option ap-checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .option ap-checkbox .checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox{width:100%}.ng-dropdown-panel.ap-select-legacy .option ap-checkbox .checkbox label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option ap-checkbox .checkbox label{flex:1;overflow:auto}.ng-dropdown-panel.ap-select-legacy .option .option-item,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;flex:1}.ng-dropdown-panel.ap-select-legacy .option.not-found,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm) var(--ref-spacing-xxxs) var(--ref-spacing-sm)}.ng-dropdown-panel.ap-select-legacy .option .content,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content{display:flex;align-items:center;gap:var(--comp-select-one-line-spacing);flex:1;width:100%}.ng-dropdown-panel.ap-select-legacy .option .content .item,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .item{flex:1}.ng-dropdown-panel.ap-select-legacy .option .content .texts,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts{flex:1;overflow:auto}.ng-dropdown-panel.ap-select-legacy .option .content .texts .first-line,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}.ng-dropdown-panel.ap-select-legacy .option .content .texts .first-line .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select-legacy .option .content .texts,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content .texts{display:flex;flex-direction:column}.ng-dropdown-panel.ap-select-legacy .option .content ap-symbol,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content ap-symbol{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .option .content ap-symbol div.svg,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .content ap-symbol div.svg{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .option .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option .label{font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height)}.ng-dropdown-panel.ap-select-legacy .option.with-caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.with-caption{padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal);min-height:var(--comp-select-two-line-height);max-height:var(--comp-select-two-line-height)}.ng-dropdown-panel.ap-select-legacy .option.with-caption .label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.with-caption .label{font-weight:var(--comp-select-two-line-title-text-font-weight);font-family:var(--comp-select-two-line-title-text-font-family);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);color:var(--comp-select-two-line-title-text-color)}.ng-dropdown-panel.ap-select-legacy .option.with-caption .caption,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .option.with-caption .caption{font-weight:var(--comp-select-two-line-caption-text-font-weight);font-family:var(--comp-select-two-line-caption-text-font-family);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);color:var(--comp-select-two-line-caption-text-color);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-panel-items,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-panel-items{padding:0}.ng-dropdown-panel.ap-select-legacy .ng-optgroup,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup{display:flex;align-items:center;padding:0}.ng-dropdown-panel.ap-select-legacy .ng-optgroup:first-child .with-search,.ng-dropdown-panel.ap-select-legacy .ng-optgroup:first-child .with-select-all,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-search,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup:first-child .with-select-all{border:none}.ng-dropdown-panel.ap-select-legacy .ng-optgroup .group,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup .group{display:flex;width:100%;height:100%;background-color:var(--comp-select-group-background-color);min-height:32px;box-sizing:border-box;max-height:50px;padding:var(--comp-select-group-padding-vertical) var(--comp-select-group-padding-horizontal);border-top:1px solid var(--comp-select-group-border-top-color)}.ng-dropdown-panel.ap-select-legacy .ng-optgroup .group .group-label,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-optgroup .group .group-label{font-weight:var(--comp-select-group-text-font-weight);font-size:var(--comp-select-group-text-size);line-height:var(--comp-select-group-text-line-height);font-family:var(--comp-select-group-text-font-family);color:var(--comp-select-group-text-color)}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-header,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-header{padding:0 var(--comp-select-search-bar-padding-horizontal) var(--comp-select-search-bar-margin-bottom) var(--comp-select-search-bar-padding-horizontal);border-bottom:1px solid var(--comp-select-search-bar-border-bottom-color)}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-header .select-all-checkbox,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-header .select-all-checkbox{padding-left:var(--ref-spacing-xxs);height:var(--comp-select-one-line-height)}.ng-dropdown-panel.ap-select-legacy .ng-dropdown-footer,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .ng-dropdown-footer{cursor:pointer;padding:0;border-top:1px solid var(--ref-color-grey-10)}.ng-dropdown-panel.ap-select-legacy .standalone-link,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .standalone-link{color:var(--ref-color-electric-blue-150);font-weight:var(--ref-font-weight-bold);font-family:var(--ref-font-family);background-color:transparent;border:none;line-height:var(--ref-font-line-height-sm);font-size:var(--ref-font-size-sm);cursor:pointer}.ng-dropdown-panel.ap-select-legacy .standalone-link:hover,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .standalone-link:hover{color:var(--ref-color-electric-blue-100)}.ng-dropdown-panel.ap-select-legacy .standalone-link:active,.ap-select-legacy .ng-select-container+.ng-dropdown-panel .standalone-link:active{color:var(--ref-color-electric-blue-150)}.form-message{font-size:var(--comp-forms-status-text-size);font-weight:var(--comp-forms-status-text-font-weight);line-height:var(--comp-forms-status-text-line-height);font-family:var(--comp-forms-status-text-font-family);margin:0;display:flex;gap:var(--ref-spacing-xxxs)}.form-message.error{color:var(--comp-forms-status-text-error-color)}.form-message.error ap-symbol{color:var(--comp-forms-status-icon-error-color)}.form-message.success{color:var(--comp-forms-status-text-success-color)}.form-message.success ap-symbol{color:var(--comp-forms-status-icon-success-color)}form.ng-submitted ap-select.ng-valid .ng-select-container{border-color:var(--comp-input-border-success-color)}form.ng-submitted ap-select.ng-invalid .ng-select-container{border-color:var(--comp-input-border-error-color)}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i2.NgSelectComponent, selector: "ng-select", inputs: ["ariaLabelDropdown", "bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "tabFocusOnClearButton", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i2.NgOptgroupTemplateDirective, selector: "[ng-optgroup-tmp]" }, { kind: "directive", type: i2.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i2.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i2.NgMultiLabelTemplateDirective, selector: "[ng-multi-label-tmp]" }, { kind: "directive", type: i2.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "directive", type: i2.NgFooterTemplateDirective, selector: "[ng-footer-tmp]" }, { kind: "directive", type: i2.NgNotFoundTemplateDirective, selector: "[ng-notfound-tmp]" }, { kind: "directive", type: i2.NgLoadingTextTemplateDirective, selector: "[ng-loadingtext-tmp]" }, { kind: "directive", type: i2.NgLoadingSpinnerTemplateDirective, selector: "[ng-loadingspinner-tmp]" }, { kind: "component", type: InputComponent, selector: "ap-input", inputs: ["ariaLabel", "ariaLabelledBy", "ariaDescribedBy", "disabled", "clearable", "inputType", "inputId", "name", "label", "description", "prefix", "suffix", "required", "placeholder", "errorMessage", "successMessage", "symbolId", "symbolPosition"], outputs: ["focus", "blur", "keyup"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: SelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.16", ngImport: i0, type: SelectComponent, decorators: [{
             type: Component,
             args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-select', imports: [
                         ReactiveFormsModule,