@agorapulse/ui-components 16.2.23 → 16.3.1

package/esm2022/select/select-base.directive.mjs

@@ -0,0 +1,69 @@
+import { SymbolComponent, SymbolRegistry, apAdd2022, apCheck2 } from '@agorapulse/ui-symbol';
+import { Directive, ElementRef, Input, Renderer2, ViewContainerRef, inject } from '@angular/core';
+import { NgSelectComponent } from '@ng-select/ng-select';
+import * as i0 from "@angular/core";
+export class SelectBaseDirective {
+    inlineLabel;
+    symbolId;
+    selectComponent = inject(NgSelectComponent);
+    el = inject(ElementRef);
+    renderer = inject(Renderer2);
+    viewContainerRef = inject(ViewContainerRef);
+    symbolRegistry = inject(SymbolRegistry);
+    constructor() {
+        this.selectComponent.appendTo = 'body';
+        this.selectComponent.searchable = false;
+        this.selectComponent.clearable = false;
+        this.selectComponent.markFirst = false;
+        this.selectComponent.selectableGroupAsModel = false;
+        this.selectComponent.tabIndex = 0;
+        this.symbolRegistry.registerSymbols([apCheck2, apAdd2022]);
+    }
+    ngOnInit() {
+        if (this.symbolId) {
+            this.addInlineSymbol(this.symbolId);
+        }
+        if (this.inlineLabel) {
+            this.addInlineLabel(this.inlineLabel);
+        }
+    }
+    ngAfterViewInit() {
+        if (!this.selectComponent.optionTemplate) {
+            throw new Error('optionTemplate is required for apSelect');
+        }
+        if (this.selectComponent.groupBy && !this.selectComponent.optgroupTemplate) {
+            throw new Error('optgroupTemplate is required for apSelect');
+        }
+    }
+    addInlineSymbol(symbolId) {
+        const componentRef = this.viewContainerRef.createComponent(SymbolComponent);
+        componentRef.instance.symbolId = symbolId;
+        componentRef.location.nativeElement.classList.add('inline-symbol');
+        // add class to component
+        this.renderer.insertBefore(this.el.nativeElement.getElementsByClassName('ng-select-container').item(0), componentRef.location.nativeElement, this.el.nativeElement.getElementsByClassName('ng-value-container').item(0));
+    }
+    addInlineLabel(label) {
+        const labelElement = this.renderer.createElement('label');
+        this.renderer.setProperty(labelElement, 'textContent', label);
+        this.renderer.addClass(labelElement, 'inline-label'); // Add appropriate CSS class
+        this.renderer.insertBefore(this.el.nativeElement.getElementsByClassName('ng-select-container').item(0), labelElement, this.el.nativeElement.getElementsByClassName('ng-value-container').item(0));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: SelectBaseDirective, isStandalone: true, selector: "ng-select[apSelect]", inputs: { inlineLabel: "inlineLabel", symbolId: "symbolId" }, host: { classAttribute: "ap-select" }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectBaseDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select[apSelect]',
+                    standalone: true,
+                    host: {
+                        class: 'ap-select',
+                    },
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { inlineLabel: [{
+                type: Input
+            }], symbolId: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LWJhc2UuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy91aS1jb21wb25lbnRzL3NlbGVjdC9zcmMvc2VsZWN0LWJhc2UuZGlyZWN0aXZlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsY0FBYyxFQUFFLFNBQVMsRUFBRSxRQUFRLEVBQUUsTUFBTSx1QkFBdUIsQ0FBQztBQUM3RixPQUFPLEVBQWlCLFNBQVMsRUFBRSxVQUFVLEVBQUUsS0FBSyxFQUFVLFNBQVMsRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDekgsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7O0FBVXpELE1BQU0sT0FBTyxtQkFBbUI7SUFDbkIsV0FBVyxDQUFVO0lBQ3JCLFFBQVEsQ0FBVTtJQUVWLGVBQWUsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztJQUNyRCxFQUFFLEdBQTRCLE1BQU0sQ0FBQyxVQUFVLENBQUMsQ0FBQztJQUNqRCxRQUFRLEdBQUcsTUFBTSxDQUFDLFNBQVMsQ0FBQyxDQUFDO0lBQzdCLGdCQUFnQixHQUFHLE1BQU0sQ0FBQyxnQkFBZ0IsQ0FBQyxDQUFDO0lBQzVDLGNBQWMsR0FBRyxNQUFNLENBQUMsY0FBYyxDQUFDLENBQUM7SUFFaEQ7UUFDSSxJQUFJLENBQUMsZUFBZSxDQUFDLFFBQVEsR0FBRyxNQUFNLENBQUM7UUFDdkMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxVQUFVLEdBQUcsS0FBSyxDQUFDO1FBQ3hDLElBQUksQ0FBQyxlQUFlLENBQUMsU0FBUyxHQUFHLEtBQUssQ0FBQztRQUN2QyxJQUFJLENBQUMsZUFBZSxDQUFDLFNBQVMsR0FBRyxLQUFLLENBQUM7UUFDdkMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxzQkFBc0IsR0FBRyxLQUFLLENBQUM7UUFDcEQsSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEdBQUcsQ0FBQyxDQUFDO1FBQ2xDLElBQUksQ0FBQyxjQUFjLENBQUMsZUFBZSxDQUFDLENBQUMsUUFBUSxFQUFFLFNBQVMsQ0FBQyxDQUFDLENBQUM7SUFDL0QsQ0FBQztJQUVELFFBQVE7UUFDSixJQUFJLElBQUksQ0FBQyxRQUFRLEVBQUU7WUFDZixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsQ0FBQztTQUN2QztRQUNELElBQUksSUFBSSxDQUFDLFdBQVcsRUFBRTtZQUNsQixJQUFJLENBQUMsY0FBYyxDQUFDLElBQUksQ0FBQyxXQUFXLENBQUMsQ0FBQztTQUN6QztJQUNMLENBQUM7SUFFRCxlQUFlO1FBQ1gsSUFBSSxDQUFDLElBQUksQ0FBQyxlQUFlLENBQUMsY0FBYyxFQUFFO1lBQ3RDLE1BQU0sSUFBSSxLQUFLLENBQUMseUNBQXlDLENBQUMsQ0FBQztTQUM5RDtRQUNELElBQUksSUFBSSxDQUFDLGVBQWUsQ0FBQyxPQUFPLElBQUksQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLGdCQUFnQixFQUFFO1lBQ3hFLE1BQU0sSUFBSSxLQUFLLENBQUMsMkNBQTJDLENBQUMsQ0FBQztTQUNoRTtJQUNMLENBQUM7SUFFTyxlQUFlLENBQUMsUUFBZ0I7UUFDcEMsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLGdCQUFnQixDQUFDLGVBQWUsQ0FBQyxlQUFlLENBQUMsQ0FBQztRQUM1RSxZQUFZLENBQUMsUUFBUSxDQUFDLFFBQVEsR0FBRyxRQUFRLENBQUM7UUFDMUMsWUFBWSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsU0FBUyxDQUFDLEdBQUcsQ0FBQyxlQUFlLENBQUMsQ0FBQztRQUNuRSx5QkFBeUI7UUFDekIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQ3RCLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLHNCQUFzQixDQUFDLHFCQUFxQixDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUMzRSxZQUFZLENBQUMsUUFBUSxDQUFDLGFBQWEsRUFDbkMsSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsc0JBQXNCLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQzdFLENBQUM7SUFDTixDQUFDO0lBRU8sY0FBYyxDQUFDLEtBQWE7UUFDaEMsTUFBTSxZQUFZLEdBQUcsSUFBSSxDQUFDLFFBQVEsQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLENBQUM7UUFDMUQsSUFBSSxDQUFDLFFBQVEsQ0FBQyxXQUFXLENBQUMsWUFBWSxFQUFFLGFBQWEsRUFBRSxLQUFLLENBQUMsQ0FBQztRQUM5RCxJQUFJLENBQUMsUUFBUSxDQUFDLFFBQVEsQ0FBQyxZQUFZLEVBQUUsY0FBYyxDQUFDLENBQUMsQ0FBQyw0QkFBNEI7UUFDbEYsSUFBSSxDQUFDLFFBQVEsQ0FBQyxZQUFZLENBQ3RCLElBQUksQ0FBQyxFQUFFLENBQUMsYUFBYSxDQUFDLHNCQUFzQixDQUFDLHFCQUFxQixDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxFQUMzRSxZQUFZLEVBQ1osSUFBSSxDQUFDLEVBQUUsQ0FBQyxhQUFhLENBQUMsc0JBQXNCLENBQUMsb0JBQW9CLENBQUMsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQzdFLENBQUM7SUFDTixDQUFDO3dHQTNEUSxtQkFBbUI7NEZBQW5CLG1CQUFtQjs7NEZBQW5CLG1CQUFtQjtrQkFSL0IsU0FBUzttQkFBQztvQkFDUCw4REFBOEQ7b0JBQzlELFFBQVEsRUFBRSxxQkFBcUI7b0JBQy9CLFVBQVUsRUFBRSxJQUFJO29CQUNoQixJQUFJLEVBQUU7d0JBQ0YsS0FBSyxFQUFFLFdBQVc7cUJBQ3JCO2lCQUNKOzBFQUVZLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csUUFBUTtzQkFBaEIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFN5bWJvbENvbXBvbmVudCwgU3ltYm9sUmVnaXN0cnksIGFwQWRkMjAyMiwgYXBDaGVjazIgfSBmcm9tICdAYWdvcmFwdWxzZS91aS1zeW1ib2wnO1xuaW1wb3J0IHsgQWZ0ZXJWaWV3SW5pdCwgRGlyZWN0aXZlLCBFbGVtZW50UmVmLCBJbnB1dCwgT25Jbml0LCBSZW5kZXJlcjIsIFZpZXdDb250YWluZXJSZWYsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgTmdTZWxlY3RDb21wb25lbnQgfSBmcm9tICdAbmctc2VsZWN0L25nLXNlbGVjdCc7XG5cbkBEaXJlY3RpdmUoe1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvZGlyZWN0aXZlLXNlbGVjdG9yXG4gICAgc2VsZWN0b3I6ICduZy1zZWxlY3RbYXBTZWxlY3RdJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGhvc3Q6IHtcbiAgICAgICAgY2xhc3M6ICdhcC1zZWxlY3QnLFxuICAgIH0sXG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdEJhc2VEaXJlY3RpdmUgaW1wbGVtZW50cyBPbkluaXQsIEFmdGVyVmlld0luaXQge1xuICAgIEBJbnB1dCgpIGlubGluZUxhYmVsPzogc3RyaW5nO1xuICAgIEBJbnB1dCgpIHN5bWJvbElkPzogc3RyaW5nO1xuXG4gICAgcHJpdmF0ZSByZWFkb25seSBzZWxlY3RDb21wb25lbnQgPSBpbmplY3QoTmdTZWxlY3RDb21wb25lbnQpO1xuICAgIHByaXZhdGUgZWw6IEVsZW1lbnRSZWY8SFRNTEVsZW1lbnQ+ID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuICAgIHByaXZhdGUgcmVuZGVyZXIgPSBpbmplY3QoUmVuZGVyZXIyKTtcbiAgICBwcml2YXRlIHZpZXdDb250YWluZXJSZWYgPSBpbmplY3QoVmlld0NvbnRhaW5lclJlZik7XG4gICAgcHJpdmF0ZSBzeW1ib2xSZWdpc3RyeSA9IGluamVjdChTeW1ib2xSZWdpc3RyeSk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5zZWxlY3RDb21wb25lbnQuYXBwZW5kVG8gPSAnYm9keSc7XG4gICAgICAgIHRoaXMuc2VsZWN0Q29tcG9uZW50LnNlYXJjaGFibGUgPSBmYWxzZTtcbiAgICAgICAgdGhpcy5zZWxlY3RDb21wb25lbnQuY2xlYXJhYmxlID0gZmFsc2U7XG4gICAgICAgIHRoaXMuc2VsZWN0Q29tcG9uZW50Lm1hcmtGaXJzdCA9IGZhbHNlO1xuICAgICAgICB0aGlzLnNlbGVjdENvbXBvbmVudC5zZWxlY3RhYmxlR3JvdXBBc01vZGVsID0gZmFsc2U7XG4gICAgICAgIHRoaXMuc2VsZWN0Q29tcG9uZW50LnRhYkluZGV4ID0gMDtcbiAgICAgICAgdGhpcy5zeW1ib2xSZWdpc3RyeS5yZWdpc3RlclN5bWJvbHMoW2FwQ2hlY2syLCBhcEFkZDIwMjJdKTtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpOiB2b2lkIHtcbiAgICAgICAgaWYgKHRoaXMuc3ltYm9sSWQpIHtcbiAgICAgICAgICAgIHRoaXMuYWRkSW5saW5lU3ltYm9sKHRoaXMuc3ltYm9sSWQpO1xuICAgICAgICB9XG4gICAgICAgIGlmICh0aGlzLmlubGluZUxhYmVsKSB7XG4gICAgICAgICAgICB0aGlzLmFkZElubGluZUxhYmVsKHRoaXMuaW5saW5lTGFiZWwpO1xuICAgICAgICB9XG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAoIXRoaXMuc2VsZWN0Q29tcG9uZW50Lm9wdGlvblRlbXBsYXRlKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ29wdGlvblRlbXBsYXRlIGlzIHJlcXVpcmVkIGZvciBhcFNlbGVjdCcpO1xuICAgICAgICB9XG4gICAgICAgIGlmICh0aGlzLnNlbGVjdENvbXBvbmVudC5ncm91cEJ5ICYmICF0aGlzLnNlbGVjdENvbXBvbmVudC5vcHRncm91cFRlbXBsYXRlKSB7XG4gICAgICAgICAgICB0aHJvdyBuZXcgRXJyb3IoJ29wdGdyb3VwVGVtcGxhdGUgaXMgcmVxdWlyZWQgZm9yIGFwU2VsZWN0Jyk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBwcml2YXRlIGFkZElubGluZVN5bWJvbChzeW1ib2xJZDogc3RyaW5nKTogdm9pZCB7XG4gICAgICAgIGNvbnN0IGNvbXBvbmVudFJlZiA9IHRoaXMudmlld0NvbnRhaW5lclJlZi5jcmVhdGVDb21wb25lbnQoU3ltYm9sQ29tcG9uZW50KTtcbiAgICAgICAgY29tcG9uZW50UmVmLmluc3RhbmNlLnN5bWJvbElkID0gc3ltYm9sSWQ7XG4gICAgICAgIGNvbXBvbmVudFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50LmNsYXNzTGlzdC5hZGQoJ2lubGluZS1zeW1ib2wnKTtcbiAgICAgICAgLy8gYWRkIGNsYXNzIHRvIGNvbXBvbmVudFxuICAgICAgICB0aGlzLnJlbmRlcmVyLmluc2VydEJlZm9yZShcbiAgICAgICAgICAgIHRoaXMuZWwubmF0aXZlRWxlbWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCduZy1zZWxlY3QtY29udGFpbmVyJykuaXRlbSgwKSxcbiAgICAgICAgICAgIGNvbXBvbmVudFJlZi5sb2NhdGlvbi5uYXRpdmVFbGVtZW50LFxuICAgICAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ25nLXZhbHVlLWNvbnRhaW5lcicpLml0ZW0oMClcbiAgICAgICAgKTtcbiAgICB9XG5cbiAgICBwcml2YXRlIGFkZElubGluZUxhYmVsKGxhYmVsOiBzdHJpbmcpOiB2b2lkIHtcbiAgICAgICAgY29uc3QgbGFiZWxFbGVtZW50ID0gdGhpcy5yZW5kZXJlci5jcmVhdGVFbGVtZW50KCdsYWJlbCcpO1xuICAgICAgICB0aGlzLnJlbmRlcmVyLnNldFByb3BlcnR5KGxhYmVsRWxlbWVudCwgJ3RleHRDb250ZW50JywgbGFiZWwpO1xuICAgICAgICB0aGlzLnJlbmRlcmVyLmFkZENsYXNzKGxhYmVsRWxlbWVudCwgJ2lubGluZS1sYWJlbCcpOyAvLyBBZGQgYXBwcm9wcmlhdGUgQ1NTIGNsYXNzXG4gICAgICAgIHRoaXMucmVuZGVyZXIuaW5zZXJ0QmVmb3JlKFxuICAgICAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ25nLXNlbGVjdC1jb250YWluZXInKS5pdGVtKDApLFxuICAgICAgICAgICAgbGFiZWxFbGVtZW50LFxuICAgICAgICAgICAgdGhpcy5lbC5uYXRpdmVFbGVtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ25nLXZhbHVlLWNvbnRhaW5lcicpLml0ZW0oMClcbiAgICAgICAgKTtcbiAgICB9XG59XG4iXX0=

package/esm2022/select/select-label-multiple/select-label-multiple.component.mjs

@@ -0,0 +1,111 @@
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { LabelComponent } from '@agorapulse/ui-components/labels';
+import { TagComponent } from '@agorapulse/ui-components/tag';
+import { NgFor, NgIf } from '@angular/common';
+import { ChangeDetectionStrategy, Component, ElementRef, EnvironmentInjector, EventEmitter, Input, Output, ViewEncapsulation, computed, effect, inject, runInInjectionContext, signal, } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SelectLabelMultipleComponent {
+    set _displayType(displayType) {
+        this.displayTypeSignal.set(displayType);
+    }
+    set _selectedItems(selectedItems) {
+        if (selectedItems.length !== this.selectedItemsSignal().length ||
+            selectedItems.some(item => this.selectedItemsSignal().indexOf(item) === -1)) {
+            this.selectedItemsSignal.set(selectedItems);
+        }
+    }
+    set _bindLabel(bindLabel) {
+        this.bindLabelSignal.set(bindLabel);
+    }
+    set _bindValue(bindValue) {
+        this.bindValueSignal.set(bindValue);
+    }
+    set _bindAvatarUrl(bindAvatarUrl) {
+        this.bindAvatarUrlSignal.set(bindAvatarUrl);
+    }
+    removeItem = new EventEmitter();
+    elementRef = inject(ElementRef);
+    injector = inject(EnvironmentInjector);
+    displayTypeSignal = signal('label');
+    selectedItemsSignal = signal([]);
+    bindLabelSignal = signal('');
+    bindValueSignal = signal('');
+    bindAvatarUrlSignal = signal('');
+    selectedLabels = computed(() => {
+        return this.selectedItemsSignal().map(item => {
+            return {
+                label: this.bindLabelSignal() ? item[this.bindLabelSignal()] : item,
+                avatarUrl: this.bindAvatarUrlSignal() ? item[this.bindAvatarUrlSignal()] : '',
+                value: item,
+            };
+        });
+    });
+    valueContainerWidth = signal(0);
+    hiddenCountSignal = signal(0);
+    trackByItem = (_, item) => (this.bindValueSignal() ? item.value[this.bindValueSignal()] : item.value);
+    ngAfterViewInit() {
+        const parentWidth = this.elementRef.nativeElement.parentElement?.offsetWidth;
+        this.valueContainerWidth.set(parentWidth ?? 0);
+        runInInjectionContext(this.injector, () => {
+            effect(() => {
+                const selectedValues = this.selectedItemsSignal();
+                const selectValueContainerWidthSignal = this.valueContainerWidth() - 30;
+                const timeout = setTimeout(() => {
+                    this.calculateResponsiveLabels(selectValueContainerWidthSignal, selectedValues);
+                }, 100);
+                return () => {
+                    clearTimeout(timeout);
+                };
+            }, {
+                allowSignalWrites: true,
+            });
+        });
+    }
+    calculateResponsiveLabels(containerWidth, selectedValues) {
+        if (containerWidth === 0 || !selectedValues.length) {
+            return;
+        }
+        let totalWidth = 0;
+        let hiddenCount = 0;
+        const itemGap = 4;
+        const items = this.elementRef.nativeElement.getElementsByClassName('item');
+        for (let index = 0; index < items.length; index++) {
+            const item = items[index];
+            const itemWidth = item.clientWidth + itemGap;
+            if (totalWidth + itemWidth < containerWidth && !hiddenCount) {
+                totalWidth += itemWidth;
+                item.style.visibility = 'visible';
+            }
+            else {
+                item.style.visibility = 'hidden';
+                hiddenCount++;
+            }
+        }
+        this.elementRef.nativeElement.getElementsByClassName('multiple-item')[0].style.maxWidth = `${totalWidth}px`;
+        this.hiddenCountSignal.set(hiddenCount);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { _displayType: ["displayType", "_displayType"], _selectedItems: ["selectedItems", "_selectedItems"], _bindLabel: ["bindLabel", "_bindLabel"], _bindValue: ["bindValue", "_bindValue"], _bindAvatarUrl: ["bindAvatarUrl", "_bindAvatarUrl"] }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n    <ng-container *ngFor=\"let item of selectedLabels(); trackBy: trackByItem\">\n        <ap-label\n            *ngIf=\"displayTypeSignal() === 'label'\"\n            class=\"item\"\n            color=\"blue\"\n            removable=\"true\"\n            [content]=\"item.label\"\n            (remove)=\"removeItem.emit(item.value)\" />\n        <ap-tag\n            *ngIf=\"displayTypeSignal() === 'tag'\"\n            class=\"item text-item\"\n            clearable=\"true\"\n            color=\"grey\"\n            (clear)=\"removeItem.emit(item.value)\">\n            <ap-avatar\n                *ngIf=\"item.avatarUrl\"\n                [size]=\"16\"\n                [profilePicture]=\"item.avatarUrl\"\n                [username]=\"item.label\"\n                [showInitials]=\"true\" />\n            {{ item.label }}\n        </ap-tag>\n    </ng-container>\n</div>\n<div\n    *ngIf=\"hiddenCountSignal() > 0\"\n    class=\"remaining\">\n    <ap-tag\n        *ngIf=\"displayTypeSignal() === 'tag'\"\n        class=\"text-item\"\n        color=\"grey\"\n        clearable=\"false\">\n        +{{ hiddenCountSignal() }}\n    </ap-tag>\n    <ap-label\n        *ngIf=\"displayTypeSignal() === 'label'\"\n        color=\"blue\"\n        removable=\"false\"\n        [content]=\"'+' + hiddenCountSignal()\" />\n</div>\n", styles: ["ap-select-label-multiple{display:flex}\n"], dependencies: [{ kind: "directive", type: NgFor, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-select-label-multiple', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgFor, NgIf, LabelComponent, TagComponent, AvatarComponent], template: "<div class=\"multiple-item\">\n    <ng-container *ngFor=\"let item of selectedLabels(); trackBy: trackByItem\">\n        <ap-label\n            *ngIf=\"displayTypeSignal() === 'label'\"\n            class=\"item\"\n            color=\"blue\"\n            removable=\"true\"\n            [content]=\"item.label\"\n            (remove)=\"removeItem.emit(item.value)\" />\n        <ap-tag\n            *ngIf=\"displayTypeSignal() === 'tag'\"\n            class=\"item text-item\"\n            clearable=\"true\"\n            color=\"grey\"\n            (clear)=\"removeItem.emit(item.value)\">\n            <ap-avatar\n                *ngIf=\"item.avatarUrl\"\n                [size]=\"16\"\n                [profilePicture]=\"item.avatarUrl\"\n                [username]=\"item.label\"\n                [showInitials]=\"true\" />\n            {{ item.label }}\n        </ap-tag>\n    </ng-container>\n</div>\n<div\n    *ngIf=\"hiddenCountSignal() > 0\"\n    class=\"remaining\">\n    <ap-tag\n        *ngIf=\"displayTypeSignal() === 'tag'\"\n        class=\"text-item\"\n        color=\"grey\"\n        clearable=\"false\">\n        +{{ hiddenCountSignal() }}\n    </ap-tag>\n    <ap-label\n        *ngIf=\"displayTypeSignal() === 'label'\"\n        color=\"blue\"\n        removable=\"false\"\n        [content]=\"'+' + hiddenCountSignal()\" />\n</div>\n", styles: ["ap-select-label-multiple{display:flex}\n"] }]
+        }], propDecorators: { _displayType: [{
+                type: Input,
+                args: [{ alias: 'displayType' }]
+            }], _selectedItems: [{
+                type: Input,
+                args: [{ required: true, alias: 'selectedItems' }]
+            }], _bindLabel: [{
+                type: Input,
+                args: [{ alias: 'bindLabel' }]
+            }], _bindValue: [{
+                type: Input,
+                args: [{ alias: 'bindValue' }]
+            }], _bindAvatarUrl: [{
+                type: Input,
+                args: [{ alias: 'bindAvatarUrl' }]
+            }], removeItem: [{
+                type: Output
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LWxhYmVsLW11bHRpcGxlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uL2xpYnMvdWktY29tcG9uZW50cy9zZWxlY3Qvc3JjL3NlbGVjdC1sYWJlbC1tdWx0aXBsZS9zZWxlY3QtbGFiZWwtbXVsdGlwbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGlicy91aS1jb21wb25lbnRzL3NlbGVjdC9zcmMvc2VsZWN0LWxhYmVsLW11bHRpcGxlL3NlbGVjdC1sYWJlbC1tdWx0aXBsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDbkUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLGtDQUFrQyxDQUFDO0FBQ2xFLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSwrQkFBK0IsQ0FBQztBQUM3RCxPQUFPLEVBQUUsS0FBSyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQzlDLE9BQU8sRUFFSCx1QkFBdUIsRUFDdkIsU0FBUyxFQUNULFVBQVUsRUFDVixtQkFBbUIsRUFDbkIsWUFBWSxFQUNaLEtBQUssRUFDTCxNQUFNLEVBQ04saUJBQWlCLEVBQ2pCLFFBQVEsRUFDUixNQUFNLEVBQ04sTUFBTSxFQUNOLHFCQUFxQixFQUNyQixNQUFNLEdBQ1QsTUFBTSxlQUFlLENBQUM7O0FBV3ZCLE1BQU0sT0FBTyw0QkFBNEI7SUFDckMsSUFBcUMsWUFBWSxDQUFDLFdBQTRCO1FBQzFFLElBQUksQ0FBQyxpQkFBaUIsQ0FBQyxHQUFHLENBQUMsV0FBVyxDQUFDLENBQUM7SUFDNUMsQ0FBQztJQUNELElBQXVELGNBQWMsQ0FBQyxhQUFvQjtRQUN0RixJQUNJLGFBQWEsQ0FBQyxNQUFNLEtBQUssSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUMsTUFBTTtZQUMxRCxhQUFhLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUMsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLEVBQzdFO1lBQ0UsSUFBSSxDQUFDLG1CQUFtQixDQUFDLEdBQUcsQ0FBQyxhQUFhLENBQUMsQ0FBQztTQUMvQztJQUNMLENBQUM7SUFDRCxJQUFtQyxVQUFVLENBQUMsU0FBaUI7UUFDM0QsSUFBSSxDQUFDLGVBQWUsQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUM7SUFDeEMsQ0FBQztJQUNELElBQW1DLFVBQVUsQ0FBQyxTQUFpQjtRQUMzRCxJQUFJLENBQUMsZUFBZSxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQztJQUN4QyxDQUFDO0lBQ0QsSUFBdUMsY0FBYyxDQUFDLGFBQXFCO1FBQ3ZFLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxHQUFHLENBQUMsYUFBYSxDQUFDLENBQUM7SUFDaEQsQ0FBQztJQUNTLFVBQVUsR0FBRyxJQUFJLFlBQVksRUFBTyxDQUFDO0lBRXZDLFVBQVUsR0FBRyxNQUFNLENBQUMsVUFBVSxDQUFDLENBQUM7SUFDaEMsUUFBUSxHQUFHLE1BQU0sQ0FBQyxtQkFBbUIsQ0FBQyxDQUFDO0lBRS9DLGlCQUFpQixHQUFHLE1BQU0sQ0FBa0IsT0FBTyxDQUFDLENBQUM7SUFDckQsbUJBQW1CLEdBQUcsTUFBTSxDQUFRLEVBQUUsQ0FBQyxDQUFDO0lBQ3hDLGVBQWUsR0FBRyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUM7SUFDN0IsZUFBZSxHQUFHLE1BQU0sQ0FBQyxFQUFFLENBQUMsQ0FBQztJQUM3QixtQkFBbUIsR0FBRyxNQUFNLENBQUMsRUFBRSxDQUFDLENBQUM7SUFFakMsY0FBYyxHQUFHLFFBQVEsQ0FBQyxHQUFHLEVBQUU7UUFDM0IsT0FBTyxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLEVBQUU7WUFDekMsT0FBTztnQkFDSCxLQUFLLEVBQUUsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUk7Z0JBQ25FLFNBQVMsRUFBRSxJQUFJLENBQUMsbUJBQW1CLEVBQUUsQ0FBQyxDQUFDLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxtQkFBbUIsRUFBRSxDQUFDLENBQUMsQ0FBQyxDQUFDLEVBQUU7Z0JBQzdFLEtBQUssRUFBRSxJQUFJO2FBQ2QsQ0FBQztRQUNOLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQyxDQUFDLENBQUM7SUFFSCxtQkFBbUIsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLENBQUM7SUFDaEMsaUJBQWlCLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxDQUFDO0lBRTlCLFdBQVcsR0FBRyxDQUFDLENBQVMsRUFBRSxJQUFTLEVBQUUsRUFBRSxDQUFDLENBQUMsSUFBSSxDQUFDLGVBQWUsRUFBRSxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLElBQUksQ0FBQyxlQUFlLEVBQUUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxJQUFJLENBQUMsS0FBSyxDQUFDLENBQUM7SUFFbkgsZUFBZTtRQUNYLE1BQU0sV0FBVyxHQUFJLElBQUksQ0FBQyxVQUFVLENBQUMsYUFBNkIsQ0FBQyxhQUFhLEVBQUUsV0FBVyxDQUFDO1FBQzlGLElBQUksQ0FBQyxtQkFBbUIsQ0FBQyxHQUFHLENBQUMsV0FBVyxJQUFJLENBQUMsQ0FBQyxDQUFDO1FBRS9DLHFCQUFxQixDQUFDLElBQUksQ0FBQyxRQUFRLEVBQUUsR0FBRyxFQUFFO1lBQ3RDLE1BQU0sQ0FDRixHQUFHLEVBQUU7Z0JBQ0QsTUFBTSxjQUFjLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixFQUFFLENBQUM7Z0JBQ2xELE1BQU0sK0JBQStCLEdBQUcsSUFBSSxDQUFDLG1CQUFtQixFQUFFLEdBQUcsRUFBRSxDQUFDO2dCQUN4RSxNQUFNLE9BQU8sR0FBRyxVQUFVLENBQUMsR0FBRyxFQUFFO29CQUM1QixJQUFJLENBQUMseUJBQXlCLENBQUMsK0JBQStCLEVBQUUsY0FBYyxDQUFDLENBQUM7Z0JBQ3BGLENBQUMsRUFBRSxHQUFHLENBQUMsQ0FBQztnQkFDUixPQUFPLEdBQUcsRUFBRTtvQkFDUixZQUFZLENBQUMsT0FBTyxDQUFDLENBQUM7Z0JBQzFCLENBQUMsQ0FBQztZQUNOLENBQUMsRUFDRDtnQkFDSSxpQkFBaUIsRUFBRSxJQUFJO2FBQzFCLENBQ0osQ0FBQztRQUNOLENBQUMsQ0FBQyxDQUFDO0lBQ1AsQ0FBQztJQUVELHlCQUF5QixDQUFDLGNBQXNCLEVBQUUsY0FBcUI7UUFDbkUsSUFBSSxjQUFjLEtBQUssQ0FBQyxJQUFJLENBQUMsY0FBYyxDQUFDLE1BQU0sRUFBRTtZQUNoRCxPQUFPO1NBQ1Y7UUFDRCxJQUFJLFVBQVUsR0FBRyxDQUFDLENBQUM7UUFDbkIsSUFBSSxXQUFXLEdBQUcsQ0FBQyxDQUFDO1FBQ3BCLE1BQU0sT0FBTyxHQUFHLENBQUMsQ0FBQztRQUNsQixNQUFNLEtBQUssR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxzQkFBc0IsQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUMzRSxLQUFLLElBQUksS0FBSyxHQUFHLENBQUMsRUFBRSxLQUFLLEdBQUcsS0FBSyxDQUFDLE1BQU0sRUFBRSxLQUFLLEVBQUUsRUFBRTtZQUMvQyxNQUFNLElBQUksR0FBZ0IsS0FBSyxDQUFDLEtBQUssQ0FBQyxDQUFDO1lBQ3ZDLE1BQU0sU0FBUyxHQUFHLElBQUksQ0FBQyxXQUFXLEdBQUcsT0FBTyxDQUFDO1lBQzdDLElBQUksVUFBVSxHQUFHLFNBQVMsR0FBRyxjQUFjLElBQUksQ0FBQyxXQUFXLEVBQUU7Z0JBQ3pELFVBQVUsSUFBSSxTQUFTLENBQUM7Z0JBQ3ZCLElBQW9CLENBQUMsS0FBSyxDQUFDLFVBQVUsR0FBRyxTQUFTLENBQUM7YUFDdEQ7aUJBQU07Z0JBQ0YsSUFBb0IsQ0FBQyxLQUFLLENBQUMsVUFBVSxHQUFHLFFBQVEsQ0FBQztnQkFDbEQsV0FBVyxFQUFFLENBQUM7YUFDakI7U0FDSjtRQUNELElBQUksQ0FBQyxVQUFVLENBQUMsYUFBYSxDQUFDLHNCQUFzQixDQUFDLGVBQWUsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxRQUFRLEdBQUcsR0FBRyxVQUFVLElBQUksQ0FBQztRQUM1RyxJQUFJLENBQUMsaUJBQWlCLENBQUMsR0FBRyxDQUFDLFdBQVcsQ0FBQyxDQUFDO0lBQzVDLENBQUM7d0dBM0ZRLDRCQUE0Qjs0RkFBNUIsNEJBQTRCLGtYQzlCekMsMjBDQXlDQSxrR0RiYyxLQUFLLG1IQUFFLElBQUksNkZBQUUsY0FBYyw2SEFBRSxZQUFZLHVHQUFFLGVBQWU7OzRGQUUzRCw0QkFBNEI7a0JBVHhDLFNBQVM7K0JBQ0ksMEJBQTBCLGNBR3hCLElBQUksaUJBQ0QsaUJBQWlCLENBQUMsSUFBSSxtQkFDcEIsdUJBQXVCLENBQUMsTUFBTSxXQUN0QyxDQUFDLEtBQUssRUFBRSxJQUFJLEVBQUUsY0FBYyxFQUFFLFlBQVksRUFBRSxlQUFlLENBQUM7OEJBR2hDLFlBQVk7c0JBQWhELEtBQUs7dUJBQUMsRUFBRSxLQUFLLEVBQUUsYUFBYSxFQUFFO2dCQUd3QixjQUFjO3NCQUFwRSxLQUFLO3VCQUFDLEVBQUUsUUFBUSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsZUFBZSxFQUFFO2dCQVFkLFVBQVU7c0JBQTVDLEtBQUs7dUJBQUMsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFO2dCQUdNLFVBQVU7c0JBQTVDLEtBQUs7dUJBQUMsRUFBRSxLQUFLLEVBQUUsV0FBVyxFQUFFO2dCQUdVLGNBQWM7c0JBQXBELEtBQUs7dUJBQUMsRUFBRSxLQUFLLEVBQUUsZUFBZSxFQUFFO2dCQUd2QixVQUFVO3NCQUFuQixNQUFNIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQXZhdGFyQ29tcG9uZW50IH0gZnJvbSAnQGFnb3JhcHVsc2UvdWktY29tcG9uZW50cy9hdmF0YXInO1xuaW1wb3J0IHsgTGFiZWxDb21wb25lbnQgfSBmcm9tICdAYWdvcmFwdWxzZS91aS1jb21wb25lbnRzL2xhYmVscyc7XG5pbXBvcnQgeyBUYWdDb21wb25lbnQgfSBmcm9tICdAYWdvcmFwdWxzZS91aS1jb21wb25lbnRzL3RhZyc7XG5pbXBvcnQgeyBOZ0ZvciwgTmdJZiB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQge1xuICAgIEFmdGVyVmlld0luaXQsXG4gICAgQ2hhbmdlRGV0ZWN0aW9uU3RyYXRlZ3ksXG4gICAgQ29tcG9uZW50LFxuICAgIEVsZW1lbnRSZWYsXG4gICAgRW52aXJvbm1lbnRJbmplY3RvcixcbiAgICBFdmVudEVtaXR0ZXIsXG4gICAgSW5wdXQsXG4gICAgT3V0cHV0LFxuICAgIFZpZXdFbmNhcHN1bGF0aW9uLFxuICAgIGNvbXB1dGVkLFxuICAgIGVmZmVjdCxcbiAgICBpbmplY3QsXG4gICAgcnVuSW5JbmplY3Rpb25Db250ZXh0LFxuICAgIHNpZ25hbCxcbn0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5cbkBDb21wb25lbnQoe1xuICAgIHNlbGVjdG9yOiAnYXAtc2VsZWN0LWxhYmVsLW11bHRpcGxlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0LWxhYmVsLW11bHRpcGxlLmNvbXBvbmVudC5odG1sJyxcbiAgICBzdHlsZVVybHM6IFsnLi9zZWxlY3QtbGFiZWwtbXVsdGlwbGUuY29tcG9uZW50LnNjc3MnXSxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGVuY2Fwc3VsYXRpb246IFZpZXdFbmNhcHN1bGF0aW9uLk5vbmUsXG4gICAgY2hhbmdlRGV0ZWN0aW9uOiBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneS5PblB1c2gsXG4gICAgaW1wb3J0czogW05nRm9yLCBOZ0lmLCBMYWJlbENvbXBvbmVudCwgVGFnQ29tcG9uZW50LCBBdmF0YXJDb21wb25lbnRdLFxufSlcbmV4cG9ydCBjbGFzcyBTZWxlY3RMYWJlbE11bHRpcGxlQ29tcG9uZW50IGltcGxlbWVudHMgQWZ0ZXJWaWV3SW5pdCB7XG4gICAgQElucHV0KHsgYWxpYXM6ICdkaXNwbGF5VHlwZScgfSkgc2V0IF9kaXNwbGF5VHlwZShkaXNwbGF5VHlwZTogJ3RhZycgfCAnbGFiZWwnKSB7XG4gICAgICAgIHRoaXMuZGlzcGxheVR5cGVTaWduYWwuc2V0KGRpc3BsYXlUeXBlKTtcbiAgICB9XG4gICAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUsIGFsaWFzOiAnc2VsZWN0ZWRJdGVtcycgfSkgc2V0IF9zZWxlY3RlZEl0ZW1zKHNlbGVjdGVkSXRlbXM6IGFueVtdKSB7XG4gICAgICAgIGlmIChcbiAgICAgICAgICAgIHNlbGVjdGVkSXRlbXMubGVuZ3RoICE9PSB0aGlzLnNlbGVjdGVkSXRlbXNTaWduYWwoKS5sZW5ndGggfHxcbiAgICAgICAgICAgIHNlbGVjdGVkSXRlbXMuc29tZShpdGVtID0+IHRoaXMuc2VsZWN0ZWRJdGVtc1NpZ25hbCgpLmluZGV4T2YoaXRlbSkgPT09IC0xKVxuICAgICAgICApIHtcbiAgICAgICAgICAgIHRoaXMuc2VsZWN0ZWRJdGVtc1NpZ25hbC5zZXQoc2VsZWN0ZWRJdGVtcyk7XG4gICAgICAgIH1cbiAgICB9XG4gICAgQElucHV0KHsgYWxpYXM6ICdiaW5kTGFiZWwnIH0pIHNldCBfYmluZExhYmVsKGJpbmRMYWJlbDogc3RyaW5nKSB7XG4gICAgICAgIHRoaXMuYmluZExhYmVsU2lnbmFsLnNldChiaW5kTGFiZWwpO1xuICAgIH1cbiAgICBASW5wdXQoeyBhbGlhczogJ2JpbmRWYWx1ZScgfSkgc2V0IF9iaW5kVmFsdWUoYmluZFZhbHVlOiBzdHJpbmcpIHtcbiAgICAgICAgdGhpcy5iaW5kVmFsdWVTaWduYWwuc2V0KGJpbmRWYWx1ZSk7XG4gICAgfVxuICAgIEBJbnB1dCh7IGFsaWFzOiAnYmluZEF2YXRhclVybCcgfSkgc2V0IF9iaW5kQXZhdGFyVXJsKGJpbmRBdmF0YXJVcmw6IHN0cmluZykge1xuICAgICAgICB0aGlzLmJpbmRBdmF0YXJVcmxTaWduYWwuc2V0KGJpbmRBdmF0YXJVcmwpO1xuICAgIH1cbiAgICBAT3V0cHV0KCkgcmVtb3ZlSXRlbSA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuICAgIHByaXZhdGUgaW5qZWN0b3IgPSBpbmplY3QoRW52aXJvbm1lbnRJbmplY3Rvcik7XG5cbiAgICBkaXNwbGF5VHlwZVNpZ25hbCA9IHNpZ25hbDwndGFnJyB8ICdsYWJlbCc+KCdsYWJlbCcpO1xuICAgIHNlbGVjdGVkSXRlbXNTaWduYWwgPSBzaWduYWw8YW55W10+KFtdKTtcbiAgICBiaW5kTGFiZWxTaWduYWwgPSBzaWduYWwoJycpO1xuICAgIGJpbmRWYWx1ZVNpZ25hbCA9IHNpZ25hbCgnJyk7XG4gICAgYmluZEF2YXRhclVybFNpZ25hbCA9IHNpZ25hbCgnJyk7XG5cbiAgICBzZWxlY3RlZExhYmVscyA9IGNvbXB1dGVkKCgpID0+IHtcbiAgICAgICAgcmV0dXJuIHRoaXMuc2VsZWN0ZWRJdGVtc1NpZ25hbCgpLm1hcChpdGVtID0+IHtcbiAgICAgICAgICAgIHJldHVybiB7XG4gICAgICAgICAgICAgICAgbGFiZWw6IHRoaXMuYmluZExhYmVsU2lnbmFsKCkgPyBpdGVtW3RoaXMuYmluZExhYmVsU2lnbmFsKCldIDogaXRlbSxcbiAgICAgICAgICAgICAgICBhdmF0YXJVcmw6IHRoaXMuYmluZEF2YXRhclVybFNpZ25hbCgpID8gaXRlbVt0aGlzLmJpbmRBdmF0YXJVcmxTaWduYWwoKV0gOiAnJyxcbiAgICAgICAgICAgICAgICB2YWx1ZTogaXRlbSxcbiAgICAgICAgICAgIH07XG4gICAgICAgIH0pO1xuICAgIH0pO1xuXG4gICAgdmFsdWVDb250YWluZXJXaWR0aCA9IHNpZ25hbCgwKTtcbiAgICBoaWRkZW5Db3VudFNpZ25hbCA9IHNpZ25hbCgwKTtcblxuICAgIHRyYWNrQnlJdGVtID0gKF86IG51bWJlciwgaXRlbTogYW55KSA9PiAodGhpcy5iaW5kVmFsdWVTaWduYWwoKSA/IGl0ZW0udmFsdWVbdGhpcy5iaW5kVmFsdWVTaWduYWwoKV0gOiBpdGVtLnZhbHVlKTtcblxuICAgIG5nQWZ0ZXJWaWV3SW5pdCgpOiB2b2lkIHtcbiAgICAgICAgY29uc3QgcGFyZW50V2lkdGggPSAodGhpcy5lbGVtZW50UmVmLm5hdGl2ZUVsZW1lbnQgYXMgSFRNTEVsZW1lbnQpLnBhcmVudEVsZW1lbnQ/Lm9mZnNldFdpZHRoO1xuICAgICAgICB0aGlzLnZhbHVlQ29udGFpbmVyV2lkdGguc2V0KHBhcmVudFdpZHRoID8/IDApO1xuXG4gICAgICAgIHJ1bkluSW5qZWN0aW9uQ29udGV4dCh0aGlzLmluamVjdG9yLCAoKSA9PiB7XG4gICAgICAgICAgICBlZmZlY3QoXG4gICAgICAgICAgICAgICAgKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICBjb25zdCBzZWxlY3RlZFZhbHVlcyA9IHRoaXMuc2VsZWN0ZWRJdGVtc1NpZ25hbCgpO1xuICAgICAgICAgICAgICAgICAgICBjb25zdCBzZWxlY3RWYWx1ZUNvbnRhaW5lcldpZHRoU2lnbmFsID0gdGhpcy52YWx1ZUNvbnRhaW5lcldpZHRoKCkgLSAzMDtcbiAgICAgICAgICAgICAgICAgICAgY29uc3QgdGltZW91dCA9IHNldFRpbWVvdXQoKCkgPT4ge1xuICAgICAgICAgICAgICAgICAgICAgICAgdGhpcy5jYWxjdWxhdGVSZXNwb25zaXZlTGFiZWxzKHNlbGVjdFZhbHVlQ29udGFpbmVyV2lkdGhTaWduYWwsIHNlbGVjdGVkVmFsdWVzKTtcbiAgICAgICAgICAgICAgICAgICAgfSwgMTAwKTtcbiAgICAgICAgICAgICAgICAgICAgcmV0dXJuICgpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICAgIGNsZWFyVGltZW91dCh0aW1lb3V0KTtcbiAgICAgICAgICAgICAgICAgICAgfTtcbiAgICAgICAgICAgICAgICB9LFxuICAgICAgICAgICAgICAgIHtcbiAgICAgICAgICAgICAgICAgICAgYWxsb3dTaWduYWxXcml0ZXM6IHRydWUsXG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgKTtcbiAgICAgICAgfSk7XG4gICAgfVxuXG4gICAgY2FsY3VsYXRlUmVzcG9uc2l2ZUxhYmVscyhjb250YWluZXJXaWR0aDogbnVtYmVyLCBzZWxlY3RlZFZhbHVlczogYW55W10pIHtcbiAgICAgICAgaWYgKGNvbnRhaW5lcldpZHRoID09PSAwIHx8ICFzZWxlY3RlZFZhbHVlcy5sZW5ndGgpIHtcbiAgICAgICAgICAgIHJldHVybjtcbiAgICAgICAgfVxuICAgICAgICBsZXQgdG90YWxXaWR0aCA9IDA7XG4gICAgICAgIGxldCBoaWRkZW5Db3VudCA9IDA7XG4gICAgICAgIGNvbnN0IGl0ZW1HYXAgPSA0O1xuICAgICAgICBjb25zdCBpdGVtcyA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmdldEVsZW1lbnRzQnlDbGFzc05hbWUoJ2l0ZW0nKTtcbiAgICAgICAgZm9yIChsZXQgaW5kZXggPSAwOyBpbmRleCA8IGl0ZW1zLmxlbmd0aDsgaW5kZXgrKykge1xuICAgICAgICAgICAgY29uc3QgaXRlbTogSFRNTEVsZW1lbnQgPSBpdGVtc1tpbmRleF07XG4gICAgICAgICAgICBjb25zdCBpdGVtV2lkdGggPSBpdGVtLmNsaWVudFdpZHRoICsgaXRlbUdhcDtcbiAgICAgICAgICAgIGlmICh0b3RhbFdpZHRoICsgaXRlbVdpZHRoIDwgY29udGFpbmVyV2lkdGggJiYgIWhpZGRlbkNvdW50KSB7XG4gICAgICAgICAgICAgICAgdG90YWxXaWR0aCArPSBpdGVtV2lkdGg7XG4gICAgICAgICAgICAgICAgKGl0ZW0gYXMgSFRNTEVsZW1lbnQpLnN0eWxlLnZpc2liaWxpdHkgPSAndmlzaWJsZSc7XG4gICAgICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgICAgIChpdGVtIGFzIEhUTUxFbGVtZW50KS5zdHlsZS52aXNpYmlsaXR5ID0gJ2hpZGRlbic7XG4gICAgICAgICAgICAgICAgaGlkZGVuQ291bnQrKztcbiAgICAgICAgICAgIH1cbiAgICAgICAgfVxuICAgICAgICB0aGlzLmVsZW1lbnRSZWYubmF0aXZlRWxlbWVudC5nZXRFbGVtZW50c0J5Q2xhc3NOYW1lKCdtdWx0aXBsZS1pdGVtJylbMF0uc3R5bGUubWF4V2lkdGggPSBgJHt0b3RhbFdpZHRofXB4YDtcbiAgICAgICAgdGhpcy5oaWRkZW5Db3VudFNpZ25hbC5zZXQoaGlkZGVuQ291bnQpO1xuICAgIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJtdWx0aXBsZS1pdGVtXCI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdGb3I9XCJsZXQgaXRlbSBvZiBzZWxlY3RlZExhYmVscygpOyB0cmFja0J5OiB0cmFja0J5SXRlbVwiPlxuICAgICAgICA8YXAtbGFiZWxcbiAgICAgICAgICAgICpuZ0lmPVwiZGlzcGxheVR5cGVTaWduYWwoKSA9PT0gJ2xhYmVsJ1wiXG4gICAgICAgICAgICBjbGFzcz1cIml0ZW1cIlxuICAgICAgICAgICAgY29sb3I9XCJibHVlXCJcbiAgICAgICAgICAgIHJlbW92YWJsZT1cInRydWVcIlxuICAgICAgICAgICAgW2NvbnRlbnRdPVwiaXRlbS5sYWJlbFwiXG4gICAgICAgICAgICAocmVtb3ZlKT1cInJlbW92ZUl0ZW0uZW1pdChpdGVtLnZhbHVlKVwiIC8+XG4gICAgICAgIDxhcC10YWdcbiAgICAgICAgICAgICpuZ0lmPVwiZGlzcGxheVR5cGVTaWduYWwoKSA9PT0gJ3RhZydcIlxuICAgICAgICAgICAgY2xhc3M9XCJpdGVtIHRleHQtaXRlbVwiXG4gICAgICAgICAgICBjbGVhcmFibGU9XCJ0cnVlXCJcbiAgICAgICAgICAgIGNvbG9yPVwiZ3JleVwiXG4gICAgICAgICAgICAoY2xlYXIpPVwicmVtb3ZlSXRlbS5lbWl0KGl0ZW0udmFsdWUpXCI+XG4gICAgICAgICAgICA8YXAtYXZhdGFyXG4gICAgICAgICAgICAgICAgKm5nSWY9XCJpdGVtLmF2YXRhclVybFwiXG4gICAgICAgICAgICAgICAgW3NpemVdPVwiMTZcIlxuICAgICAgICAgICAgICAgIFtwcm9maWxlUGljdHVyZV09XCJpdGVtLmF2YXRhclVybFwiXG4gICAgICAgICAgICAgICAgW3VzZXJuYW1lXT1cIml0ZW0ubGFiZWxcIlxuICAgICAgICAgICAgICAgIFtzaG93SW5pdGlhbHNdPVwidHJ1ZVwiIC8+XG4gICAgICAgICAgICB7eyBpdGVtLmxhYmVsIH19XG4gICAgICAgIDwvYXAtdGFnPlxuICAgIDwvbmctY29udGFpbmVyPlxuPC9kaXY+XG48ZGl2XG4gICAgKm5nSWY9XCJoaWRkZW5Db3VudFNpZ25hbCgpID4gMFwiXG4gICAgY2xhc3M9XCJyZW1haW5pbmdcIj5cbiAgICA8YXAtdGFnXG4gICAgICAgICpuZ0lmPVwiZGlzcGxheVR5cGVTaWduYWwoKSA9PT0gJ3RhZydcIlxuICAgICAgICBjbGFzcz1cInRleHQtaXRlbVwiXG4gICAgICAgIGNvbG9yPVwiZ3JleVwiXG4gICAgICAgIGNsZWFyYWJsZT1cImZhbHNlXCI+XG4gICAgICAgICt7eyBoaWRkZW5Db3VudFNpZ25hbCgpIH19XG4gICAgPC9hcC10YWc+XG4gICAgPGFwLWxhYmVsXG4gICAgICAgICpuZ0lmPVwiZGlzcGxheVR5cGVTaWduYWwoKSA9PT0gJ2xhYmVsJ1wiXG4gICAgICAgIGNvbG9yPVwiYmx1ZVwiXG4gICAgICAgIHJlbW92YWJsZT1cImZhbHNlXCJcbiAgICAgICAgW2NvbnRlbnRdPVwiJysnICsgaGlkZGVuQ291bnRTaWduYWwoKVwiIC8+XG48L2Rpdj5cbiJdfQ==

package/esm2022/select/select-label-single/select-label-single.component.mjs

@@ -0,0 +1,27 @@
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { LabelComponent } from '@agorapulse/ui-components/labels';
+import { TagComponent } from '@agorapulse/ui-components/tag';
+import { NgSwitch, NgSwitchCase } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Input, ViewEncapsulation } from '@angular/core';
+import * as i0 from "@angular/core";
+export class SelectLabelSingleComponent {
+    displayType = 'text';
+    label;
+    avatarUrl;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: "displayType", label: "label", avatarUrl: "avatarUrl" }, ngImport: i0, template: "<ng-container [ngSwitch]=\"displayType\">\n    <ng-container *ngSwitchCase=\"'text'\">\n        <span\n            class=\"text-item\"\n            [title]=\"label\">\n            {{ label }}\n        </span>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'label'\">\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label\" />\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'tag'\">\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            <ap-avatar\n                *ngIf=\"avatarUrl\"\n                [size]=\"16\"\n                [username]=\"label\"\n                [showInitials]=\"true\"\n                [profilePicture]=\"avatarUrl\" />\n            {{ label }}\n        </ap-tag>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'withAvatar'\">\n        <ap-avatar\n            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"true\"\n            [profilePicture]=\"avatarUrl\" />\n        <span class=\"text-item\">\n            {{ label }}\n        </span>\n    </ng-container>\n</ng-container>\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ kind: "directive", type: NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "color"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-select-label-single', standalone: true, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgSwitch, NgSwitchCase, LabelComponent, TagComponent, AvatarComponent], template: "<ng-container [ngSwitch]=\"displayType\">\n    <ng-container *ngSwitchCase=\"'text'\">\n        <span\n            class=\"text-item\"\n            [title]=\"label\">\n            {{ label }}\n        </span>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'label'\">\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label\" />\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'tag'\">\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            <ap-avatar\n                *ngIf=\"avatarUrl\"\n                [size]=\"16\"\n                [username]=\"label\"\n                [showInitials]=\"true\"\n                [profilePicture]=\"avatarUrl\" />\n            {{ label }}\n        </ap-tag>\n    </ng-container>\n    <ng-container *ngSwitchCase=\"'withAvatar'\">\n        <ap-avatar\n            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"true\"\n            [profilePicture]=\"avatarUrl\" />\n        <span class=\"text-item\">\n            {{ label }}\n        </span>\n    </ng-container>\n</ng-container>\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"] }]
+        }], propDecorators: { displayType: [{
+                type: Input
+            }], label: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], avatarUrl: [{
+                type: Input
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LWxhYmVsLXNpbmdsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvc2VsZWN0L3NyYy9zZWxlY3QtbGFiZWwtc2luZ2xlL3NlbGVjdC1sYWJlbC1zaW5nbGUuY29tcG9uZW50LnRzIiwiLi4vLi4vLi4vLi4vLi4vbGlicy91aS1jb21wb25lbnRzL3NlbGVjdC9zcmMvc2VsZWN0LWxhYmVsLXNpbmdsZS9zZWxlY3QtbGFiZWwtc2luZ2xlLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSxlQUFlLEVBQUUsTUFBTSxrQ0FBa0MsQ0FBQztBQUNuRSxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sa0NBQWtDLENBQUM7QUFDbEUsT0FBTyxFQUFFLFlBQVksRUFBRSxNQUFNLCtCQUErQixDQUFDO0FBQzdELE9BQU8sRUFBRSxRQUFRLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDekQsT0FBTyxFQUFFLHVCQUF1QixFQUFFLFNBQVMsRUFBRSxLQUFLLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxlQUFlLENBQUM7O0FBVzdGLE1BQU0sT0FBTywwQkFBMEI7SUFDMUIsV0FBVyxHQUE0QyxNQUFNLENBQUM7SUFJdkUsS0FBSyxDQUFVO0lBQ04sU0FBUyxDQUFVO3dHQU5uQiwwQkFBMEI7NEZBQTFCLDBCQUEwQixrS0NmdkMsd29DQXNDQSx5SkR6QmMsUUFBUSw2RUFBRSxZQUFZLHFGQUFFLGNBQWMsNkhBQUUsWUFBWSx1R0FBRSxlQUFlOzs0RkFFdEUsMEJBQTBCO2tCQVR0QyxTQUFTOytCQUNJLHdCQUF3QixjQUd0QixJQUFJLGlCQUNELGlCQUFpQixDQUFDLElBQUksbUJBQ3BCLHVCQUF1QixDQUFDLE1BQU0sV0FDdEMsQ0FBQyxRQUFRLEVBQUUsWUFBWSxFQUFFLGNBQWMsRUFBRSxZQUFZLEVBQUUsZUFBZSxDQUFDOzhCQUd2RSxXQUFXO3NCQUFuQixLQUFLO2dCQUlOLEtBQUs7c0JBSEosS0FBSzt1QkFBQzt3QkFDSCxRQUFRLEVBQUUsSUFBSTtxQkFDakI7Z0JBRVEsU0FBUztzQkFBakIsS0FBSyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEF2YXRhckNvbXBvbmVudCB9IGZyb20gJ0BhZ29yYXB1bHNlL3VpLWNvbXBvbmVudHMvYXZhdGFyJztcbmltcG9ydCB7IExhYmVsQ29tcG9uZW50IH0gZnJvbSAnQGFnb3JhcHVsc2UvdWktY29tcG9uZW50cy9sYWJlbHMnO1xuaW1wb3J0IHsgVGFnQ29tcG9uZW50IH0gZnJvbSAnQGFnb3JhcHVsc2UvdWktY29tcG9uZW50cy90YWcnO1xuaW1wb3J0IHsgTmdTd2l0Y2gsIE5nU3dpdGNoQ2FzZSB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbic7XG5pbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgVmlld0VuY2Fwc3VsYXRpb24gfSBmcm9tICdAYW5ndWxhci9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICdhcC1zZWxlY3QtbGFiZWwtc2luZ2xlJyxcbiAgICB0ZW1wbGF0ZVVybDogJy4vc2VsZWN0LWxhYmVsLXNpbmdsZS5jb21wb25lbnQuaHRtbCcsXG4gICAgc3R5bGVVcmxzOiBbJy4vc2VsZWN0LWxhYmVsLXNpbmdsZS5jb21wb25lbnQuc2NzcyddLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgZW5jYXBzdWxhdGlvbjogVmlld0VuY2Fwc3VsYXRpb24uTm9uZSxcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcbiAgICBpbXBvcnRzOiBbTmdTd2l0Y2gsIE5nU3dpdGNoQ2FzZSwgTGFiZWxDb21wb25lbnQsIFRhZ0NvbXBvbmVudCwgQXZhdGFyQ29tcG9uZW50XSxcbn0pXG5leHBvcnQgY2xhc3MgU2VsZWN0TGFiZWxTaW5nbGVDb21wb25lbnQge1xuICAgIEBJbnB1dCgpIGRpc3BsYXlUeXBlOiAndGV4dCcgfCAnd2l0aEF2YXRhcicgfCAndGFnJyB8ICdsYWJlbCcgPSAndGV4dCc7XG4gICAgQElucHV0KHtcbiAgICAgICAgcmVxdWlyZWQ6IHRydWUsXG4gICAgfSlcbiAgICBsYWJlbCE6IHN0cmluZztcbiAgICBASW5wdXQoKSBhdmF0YXJVcmw/OiBzdHJpbmc7XG59XG4iLCI8bmctY29udGFpbmVyIFtuZ1N3aXRjaF09XCJkaXNwbGF5VHlwZVwiPlxuICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIid0ZXh0J1wiPlxuICAgICAgICA8c3BhblxuICAgICAgICAgICAgY2xhc3M9XCJ0ZXh0LWl0ZW1cIlxuICAgICAgICAgICAgW3RpdGxlXT1cImxhYmVsXCI+XG4gICAgICAgICAgICB7eyBsYWJlbCB9fVxuICAgICAgICA8L3NwYW4+XG4gICAgPC9uZy1jb250YWluZXI+XG4gICAgPG5nLWNvbnRhaW5lciAqbmdTd2l0Y2hDYXNlPVwiJ2xhYmVsJ1wiPlxuICAgICAgICA8YXAtbGFiZWxcbiAgICAgICAgICAgIGNvbG9yPVwiYmx1ZVwiXG4gICAgICAgICAgICBbcmVtb3ZhYmxlXT1cImZhbHNlXCJcbiAgICAgICAgICAgIFtjb250ZW50XT1cImxhYmVsXCIgLz5cbiAgICA8L25nLWNvbnRhaW5lcj5cbiAgICA8bmctY29udGFpbmVyICpuZ1N3aXRjaENhc2U9XCIndGFnJ1wiPlxuICAgICAgICA8YXAtdGFnXG4gICAgICAgICAgICBjbGFzcz1cInRleHQtaXRlbVwiXG4gICAgICAgICAgICBjb2xvcj1cImdyZXlcIj5cbiAgICAgICAgICAgIDxhcC1hdmF0YXJcbiAgICAgICAgICAgICAgICAqbmdJZj1cImF2YXRhclVybFwiXG4gICAgICAgICAgICAgICAgW3NpemVdPVwiMTZcIlxuICAgICAgICAgICAgICAgIFt1c2VybmFtZV09XCJsYWJlbFwiXG4gICAgICAgICAgICAgICAgW3Nob3dJbml0aWFsc109XCJ0cnVlXCJcbiAgICAgICAgICAgICAgICBbcHJvZmlsZVBpY3R1cmVdPVwiYXZhdGFyVXJsXCIgLz5cbiAgICAgICAgICAgIHt7IGxhYmVsIH19XG4gICAgICAgIDwvYXAtdGFnPlxuICAgIDwvbmctY29udGFpbmVyPlxuICAgIDxuZy1jb250YWluZXIgKm5nU3dpdGNoQ2FzZT1cIid3aXRoQXZhdGFyJ1wiPlxuICAgICAgICA8YXAtYXZhdGFyXG4gICAgICAgICAgICBbc2l6ZV09XCIyNFwiXG4gICAgICAgICAgICBbdXNlcm5hbWVdPVwibGFiZWxcIlxuICAgICAgICAgICAgW3Nob3dJbml0aWFsc109XCJ0cnVlXCJcbiAgICAgICAgICAgIFtwcm9maWxlUGljdHVyZV09XCJhdmF0YXJVcmxcIiAvPlxuICAgICAgICA8c3BhbiBjbGFzcz1cInRleHQtaXRlbVwiPlxuICAgICAgICAgICAge3sgbGFiZWwgfX1cbiAgICAgICAgPC9zcGFuPlxuICAgIDwvbmctY29udGFpbmVyPlxuPC9uZy1jb250YWluZXI+XG4iXX0=

package/esm2022/select/select-multiple.directive.mjs

@@ -0,0 +1,34 @@
+import { Directive, inject } from '@angular/core';
+import { NgSelectComponent } from '@ng-select/ng-select';
+import { SelectBaseDirective } from './select-base.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./select-base.directive";
+export class SelectMultipleDirective {
+    selectComponent = inject(NgSelectComponent);
+    constructor() {
+        this.selectComponent.multiple = true;
+        this.selectComponent.closeOnSelect = false;
+    }
+    ngAfterViewInit() {
+        if (!this.selectComponent.multiLabelTemplate) {
+            throw new Error('multiLabelTemplate is required for apSelectMultiple');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: SelectMultipleDirective, isStandalone: true, selector: "ng-select[apSelectMultiple]", hostDirectives: [{ directive: i1.SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectMultipleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select[apSelectMultiple]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: SelectBaseDirective,
+                            inputs: ['inlineLabel', 'symbolId'],
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return []; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LW11bHRpcGxlLmRpcmVjdGl2ZS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYnMvdWktY29tcG9uZW50cy9zZWxlY3Qvc3JjL3NlbGVjdC1tdWx0aXBsZS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFpQixTQUFTLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQ2pFLE9BQU8sRUFBRSxpQkFBaUIsRUFBRSxNQUFNLHNCQUFzQixDQUFDO0FBQ3pELE9BQU8sRUFBRSxtQkFBbUIsRUFBRSxNQUFNLHlCQUF5QixDQUFDOzs7QUFhOUQsTUFBTSxPQUFPLHVCQUF1QjtJQUNmLGVBQWUsR0FBRyxNQUFNLENBQUMsaUJBQWlCLENBQUMsQ0FBQztJQUU3RDtRQUNJLElBQUksQ0FBQyxlQUFlLENBQUMsUUFBUSxHQUFHLElBQUksQ0FBQztRQUNyQyxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsR0FBRyxLQUFLLENBQUM7SUFDL0MsQ0FBQztJQUVELGVBQWU7UUFDWCxJQUFJLENBQUMsSUFBSSxDQUFDLGVBQWUsQ0FBQyxrQkFBa0IsRUFBRTtZQUMxQyxNQUFNLElBQUksS0FBSyxDQUFDLHFEQUFxRCxDQUFDLENBQUM7U0FDMUU7SUFDTCxDQUFDO3dHQVpRLHVCQUF1Qjs0RkFBdkIsdUJBQXVCOzs0RkFBdkIsdUJBQXVCO2tCQVhuQyxTQUFTO21CQUFDO29CQUNQLDhEQUE4RDtvQkFDOUQsUUFBUSxFQUFFLDZCQUE2QjtvQkFDdkMsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLGNBQWMsRUFBRTt3QkFDWjs0QkFDSSxTQUFTLEVBQUUsbUJBQW1COzRCQUM5QixNQUFNLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxDQUFDO3lCQUN0QztxQkFDSjtpQkFDSiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIERpcmVjdGl2ZSwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ1NlbGVjdENvbXBvbmVudCB9IGZyb20gJ0BuZy1zZWxlY3Qvbmctc2VsZWN0JztcbmltcG9ydCB7IFNlbGVjdEJhc2VEaXJlY3RpdmUgfSBmcm9tICcuL3NlbGVjdC1iYXNlLmRpcmVjdGl2ZSc7XG5cbkBEaXJlY3RpdmUoe1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvZGlyZWN0aXZlLXNlbGVjdG9yXG4gICAgc2VsZWN0b3I6ICduZy1zZWxlY3RbYXBTZWxlY3RNdWx0aXBsZV0nLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaG9zdERpcmVjdGl2ZXM6IFtcbiAgICAgICAge1xuICAgICAgICAgICAgZGlyZWN0aXZlOiBTZWxlY3RCYXNlRGlyZWN0aXZlLFxuICAgICAgICAgICAgaW5wdXRzOiBbJ2lubGluZUxhYmVsJywgJ3N5bWJvbElkJ10sXG4gICAgICAgIH0sXG4gICAgXSxcbn0pXG5leHBvcnQgY2xhc3MgU2VsZWN0TXVsdGlwbGVEaXJlY3RpdmUgaW1wbGVtZW50cyBBZnRlclZpZXdJbml0IHtcbiAgICBwcml2YXRlIHJlYWRvbmx5IHNlbGVjdENvbXBvbmVudCA9IGluamVjdChOZ1NlbGVjdENvbXBvbmVudCk7XG5cbiAgICBjb25zdHJ1Y3RvcigpIHtcbiAgICAgICAgdGhpcy5zZWxlY3RDb21wb25lbnQubXVsdGlwbGUgPSB0cnVlO1xuICAgICAgICB0aGlzLnNlbGVjdENvbXBvbmVudC5jbG9zZU9uU2VsZWN0ID0gZmFsc2U7XG4gICAgfVxuXG4gICAgbmdBZnRlclZpZXdJbml0KCk6IHZvaWQge1xuICAgICAgICBpZiAoIXRoaXMuc2VsZWN0Q29tcG9uZW50Lm11bHRpTGFiZWxUZW1wbGF0ZSkge1xuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdtdWx0aUxhYmVsVGVtcGxhdGUgaXMgcmVxdWlyZWQgZm9yIGFwU2VsZWN0TXVsdGlwbGUnKTtcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==

package/esm2022/select/select-single.directive.mjs

@@ -0,0 +1,34 @@
+import { Directive, inject } from '@angular/core';
+import { NgSelectComponent } from '@ng-select/ng-select';
+import { SelectBaseDirective } from './select-base.directive';
+import * as i0 from "@angular/core";
+import * as i1 from "./select-base.directive";
+export class SelectSingleDirective {
+    selectComponent = inject(NgSelectComponent);
+    constructor() {
+        this.selectComponent.multiple = false;
+        this.selectComponent.closeOnSelect = true;
+    }
+    ngAfterViewInit() {
+        if (!this.selectComponent.labelTemplate) {
+            throw new Error('labelTemplate is required for apSelectSingle');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectSingleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.10", type: SelectSingleDirective, isStandalone: true, selector: "ng-select[apSelectSingle]", hostDirectives: [{ directive: i1.SelectBaseDirective, inputs: ["inlineLabel", "inlineLabel", "symbolId", "symbolId"] }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: SelectSingleDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    // eslint-disable-next-line @angular-eslint/directive-selector
+                    selector: 'ng-select[apSelectSingle]',
+                    standalone: true,
+                    hostDirectives: [
+                        {
+                            directive: SelectBaseDirective,
+                            inputs: ['inlineLabel', 'symbolId'],
+                        },
+                    ],
+                }]
+        }], ctorParameters: function () { return []; } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic2VsZWN0LXNpbmdsZS5kaXJlY3RpdmUuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9saWJzL3VpLWNvbXBvbmVudHMvc2VsZWN0L3NyYy9zZWxlY3Qtc2luZ2xlLmRpcmVjdGl2ZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQWlCLFNBQVMsRUFBRSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDakUsT0FBTyxFQUFFLGlCQUFpQixFQUFFLE1BQU0sc0JBQXNCLENBQUM7QUFDekQsT0FBTyxFQUFFLG1CQUFtQixFQUFFLE1BQU0seUJBQXlCLENBQUM7OztBQWE5RCxNQUFNLE9BQU8scUJBQXFCO0lBQ2IsZUFBZSxHQUFHLE1BQU0sQ0FBQyxpQkFBaUIsQ0FBQyxDQUFDO0lBRTdEO1FBQ0ksSUFBSSxDQUFDLGVBQWUsQ0FBQyxRQUFRLEdBQUcsS0FBSyxDQUFDO1FBQ3RDLElBQUksQ0FBQyxlQUFlLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztJQUM5QyxDQUFDO0lBRUQsZUFBZTtRQUNYLElBQUksQ0FBQyxJQUFJLENBQUMsZUFBZSxDQUFDLGFBQWEsRUFBRTtZQUNyQyxNQUFNLElBQUksS0FBSyxDQUFDLDhDQUE4QyxDQUFDLENBQUM7U0FDbkU7SUFDTCxDQUFDO3dHQVpRLHFCQUFxQjs0RkFBckIscUJBQXFCOzs0RkFBckIscUJBQXFCO2tCQVhqQyxTQUFTO21CQUFDO29CQUNQLDhEQUE4RDtvQkFDOUQsUUFBUSxFQUFFLDJCQUEyQjtvQkFDckMsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLGNBQWMsRUFBRTt3QkFDWjs0QkFDSSxTQUFTLEVBQUUsbUJBQW1COzRCQUM5QixNQUFNLEVBQUUsQ0FBQyxhQUFhLEVBQUUsVUFBVSxDQUFDO3lCQUN0QztxQkFDSjtpQkFDSiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IEFmdGVyVmlld0luaXQsIERpcmVjdGl2ZSwgaW5qZWN0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5pbXBvcnQgeyBOZ1NlbGVjdENvbXBvbmVudCB9IGZyb20gJ0BuZy1zZWxlY3Qvbmctc2VsZWN0JztcbmltcG9ydCB7IFNlbGVjdEJhc2VEaXJlY3RpdmUgfSBmcm9tICcuL3NlbGVjdC1iYXNlLmRpcmVjdGl2ZSc7XG5cbkBEaXJlY3RpdmUoe1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAYW5ndWxhci1lc2xpbnQvZGlyZWN0aXZlLXNlbGVjdG9yXG4gICAgc2VsZWN0b3I6ICduZy1zZWxlY3RbYXBTZWxlY3RTaW5nbGVdJyxcbiAgICBzdGFuZGFsb25lOiB0cnVlLFxuICAgIGhvc3REaXJlY3RpdmVzOiBbXG4gICAgICAgIHtcbiAgICAgICAgICAgIGRpcmVjdGl2ZTogU2VsZWN0QmFzZURpcmVjdGl2ZSxcbiAgICAgICAgICAgIGlucHV0czogWydpbmxpbmVMYWJlbCcsICdzeW1ib2xJZCddLFxuICAgICAgICB9LFxuICAgIF0sXG59KVxuZXhwb3J0IGNsYXNzIFNlbGVjdFNpbmdsZURpcmVjdGl2ZSBpbXBsZW1lbnRzIEFmdGVyVmlld0luaXQge1xuICAgIHByaXZhdGUgcmVhZG9ubHkgc2VsZWN0Q29tcG9uZW50ID0gaW5qZWN0KE5nU2VsZWN0Q29tcG9uZW50KTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICB0aGlzLnNlbGVjdENvbXBvbmVudC5tdWx0aXBsZSA9IGZhbHNlO1xuICAgICAgICB0aGlzLnNlbGVjdENvbXBvbmVudC5jbG9zZU9uU2VsZWN0ID0gdHJ1ZTtcbiAgICB9XG5cbiAgICBuZ0FmdGVyVmlld0luaXQoKTogdm9pZCB7XG4gICAgICAgIGlmICghdGhpcy5zZWxlY3RDb21wb25lbnQubGFiZWxUZW1wbGF0ZSkge1xuICAgICAgICAgICAgdGhyb3cgbmV3IEVycm9yKCdsYWJlbFRlbXBsYXRlIGlzIHJlcXVpcmVkIGZvciBhcFNlbGVjdFNpbmdsZScpO1xuICAgICAgICB9XG4gICAgfVxufVxuIl19

package/esm2022/textarea/public_api.mjs

@@ -1,2 +1,2 @@
-export * from './textarea.component';
-//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYnMvdWktY29tcG9uZW50cy90ZXh0YXJlYS9zcmMvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxjQUFjLHNCQUFzQixDQUFDIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0ICogZnJvbSAnLi90ZXh0YXJlYS5jb21wb25lbnQnO1xuIl19
+export { TextareaDirective } from './textarea.directive';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljX2FwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL2xpYnMvdWktY29tcG9uZW50cy90ZXh0YXJlYS9zcmMvcHVibGljX2FwaS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsaUJBQWlCLEVBQUUsTUFBTSxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCB7IFRleHRhcmVhRGlyZWN0aXZlIH0gZnJvbSAnLi90ZXh0YXJlYS5kaXJlY3RpdmUnO1xuIl19

package/esm2022/textarea/textarea.directive.mjs

@@ -0,0 +1,40 @@
+import { Directive, ElementRef, HostBinding, Input, Renderer2, booleanAttribute, inject } from '@angular/core';
+import { InputDirective } from '@agorapulse/ui-components/input';
+import * as i0 from "@angular/core";
+import * as i1 from "@agorapulse/ui-components/input";
+export class TextareaDirective {
+    resizable = false;
+    elementRef = inject(ElementRef);
+    renderer = inject(Renderer2);
+    constructor() {
+        const textarea = this.elementRef.nativeElement;
+        if (!textarea.rows || textarea.rows < 3) {
+            textarea.rows = 3;
+        }
+        if (!textarea.style.width) {
+            this.renderer.setStyle(textarea, 'width', '256px');
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: TextareaDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "16.2.10", type: TextareaDirective, isStandalone: true, selector: "[apTextarea]", inputs: { resizable: ["resizable", "resizable", booleanAttribute] }, host: { properties: { "class.resizable": "this.resizable" }, classAttribute: "ap-textarea" }, hostDirectives: [{ directive: i1.InputDirective }], ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: TextareaDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[apTextarea]',
+                    standalone: true,
+                    hostDirectives: [InputDirective],
+                    host: {
+                        class: 'ap-textarea',
+                    },
+                }]
+        }], ctorParameters: function () { return []; }, propDecorators: { resizable: [{
+                type: HostBinding,
+                args: ['class.resizable']
+            }, {
+                type: Input,
+                args: [{
+                        transform: booleanAttribute,
+                    }]
+            }] } });
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidGV4dGFyZWEuZGlyZWN0aXZlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vbGlicy91aS1jb21wb25lbnRzL3RleHRhcmVhL3NyYy90ZXh0YXJlYS5kaXJlY3RpdmUudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBRSxVQUFVLEVBQUUsV0FBVyxFQUFFLEtBQUssRUFBRSxTQUFTLEVBQUUsZ0JBQWdCLEVBQUUsTUFBTSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBQy9HLE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7O0FBVWpFLE1BQU0sT0FBTyxpQkFBaUI7SUFLMUIsU0FBUyxHQUFZLEtBQUssQ0FBQztJQUVuQixVQUFVLEdBQUcsTUFBTSxDQUFDLFVBQVUsQ0FBQyxDQUFDO0lBQ2hDLFFBQVEsR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUM7SUFFckM7UUFDSSxNQUFNLFFBQVEsR0FBRyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQW9DLENBQUM7UUFDdEUsSUFBSSxDQUFDLFFBQVEsQ0FBQyxJQUFJLElBQUksUUFBUSxDQUFDLElBQUksR0FBRyxDQUFDLEVBQUU7WUFDckMsUUFBUSxDQUFDLElBQUksR0FBRyxDQUFDLENBQUM7U0FDckI7UUFDRCxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxLQUFLLEVBQUU7WUFDdkIsSUFBSSxDQUFDLFFBQVEsQ0FBQyxRQUFRLENBQUMsUUFBUSxFQUFFLE9BQU8sRUFBRSxPQUFPLENBQUMsQ0FBQTtTQUNyRDtJQUNMLENBQUM7d0dBbEJRLGlCQUFpQjs0RkFBakIsaUJBQWlCLGdHQUdYLGdCQUFnQjs7NEZBSHRCLGlCQUFpQjtrQkFSN0IsU0FBUzttQkFBQztvQkFDUCxRQUFRLEVBQUUsY0FBYztvQkFDeEIsVUFBVSxFQUFFLElBQUk7b0JBQ2hCLGNBQWMsRUFBRSxDQUFDLGNBQWMsQ0FBQztvQkFDaEMsSUFBSSxFQUFFO3dCQUNGLEtBQUssRUFBRSxhQUFhO3FCQUN2QjtpQkFDSjswRUFNRyxTQUFTO3NCQUpSLFdBQVc7dUJBQUMsaUJBQWlCOztzQkFDN0IsS0FBSzt1QkFBQzt3QkFDSCxTQUFTLEVBQUUsZ0JBQWdCO3FCQUM5QiIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IERpcmVjdGl2ZSwgRWxlbWVudFJlZiwgSG9zdEJpbmRpbmcsIElucHV0LCBSZW5kZXJlcjIsIGJvb2xlYW5BdHRyaWJ1dGUsIGluamVjdCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuaW1wb3J0IHsgSW5wdXREaXJlY3RpdmUgfSBmcm9tICdAYWdvcmFwdWxzZS91aS1jb21wb25lbnRzL2lucHV0JztcblxuQERpcmVjdGl2ZSh7XG4gICAgc2VsZWN0b3I6ICdbYXBUZXh0YXJlYV0nLFxuICAgIHN0YW5kYWxvbmU6IHRydWUsXG4gICAgaG9zdERpcmVjdGl2ZXM6IFtJbnB1dERpcmVjdGl2ZV0sXG4gICAgaG9zdDoge1xuICAgICAgICBjbGFzczogJ2FwLXRleHRhcmVhJyxcbiAgICB9LFxufSlcbmV4cG9ydCBjbGFzcyBUZXh0YXJlYURpcmVjdGl2ZSB7XG4gICAgQEhvc3RCaW5kaW5nKCdjbGFzcy5yZXNpemFibGUnKVxuICAgIEBJbnB1dCh7XG4gICAgICAgIHRyYW5zZm9ybTogYm9vbGVhbkF0dHJpYnV0ZSxcbiAgICB9KVxuICAgIHJlc2l6YWJsZTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gICAgcHJpdmF0ZSBlbGVtZW50UmVmID0gaW5qZWN0KEVsZW1lbnRSZWYpO1xuICAgIHByaXZhdGUgcmVuZGVyZXIgPSBpbmplY3QoUmVuZGVyZXIyKTtcblxuICAgIGNvbnN0cnVjdG9yKCkge1xuICAgICAgICBjb25zdCB0ZXh0YXJlYSA9IHRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50IGFzIEhUTUxUZXh0QXJlYUVsZW1lbnQ7XG4gICAgICAgIGlmICghdGV4dGFyZWEucm93cyB8fCB0ZXh0YXJlYS5yb3dzIDwgMykge1xuICAgICAgICAgICAgdGV4dGFyZWEucm93cyA9IDM7XG4gICAgICAgIH1cbiAgICAgICAgaWYgKCF0ZXh0YXJlYS5zdHlsZS53aWR0aCkge1xuICAgICAgICAgICAgdGhpcy5yZW5kZXJlci5zZXRTdHlsZSh0ZXh0YXJlYSwgJ3dpZHRoJywgJzI1NnB4JylcbiAgICAgICAgfVxuICAgIH1cbn1cbiJdfQ==

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

@@ -1,6 +1,8 @@
 import { LoaderComponent } from '@agorapulse/ui-animations';
 import { AvatarComponent } from '@agorapulse/ui-components/avatar';
-import { InputComponent } from '@agorapulse/ui-components/input';
+import { FormFieldComponent } from '@agorapulse/ui-components/form-field';
+import { InputDirective } from '@agorapulse/ui-components/input';
+import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
 import { SymbolRegistry, apSearchAlternate, SymbolComponent } from '@agorapulse/ui-symbol';
 import * as i2 from '@angular/cdk/overlay';
 import { OverlayModule } from '@angular/cdk/overlay';
@@ -28,7 +30,7 @@ class AutocompleteComponent {
     optionImageUrl;
     optionValue;
     optionTextTemplate;
-    input;
+    formField;
     selectOption = new EventEmitter();
     disabledSignal = signal(false);
     symbolRegistry = inject(SymbolRegistry);
@@ -58,7 +60,7 @@ class AutocompleteComponent {
         });
     }
     ngAfterViewInit() {
-        this.inputWidthSignal.set(this.input.elementRef.nativeElement.offsetWidth);
+        this.inputWidthSignal.set(this.formField.nativeElement.offsetWidth);
     }
     onSelectOption(option) {
         if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {
@@ -75,11 +77,22 @@ class AutocompleteComponent {
         this.resultsLoadingSignal.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "input", first: true, predicate: InputComponent, descendants: true, static: true }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-input\n        #trigger=\"cdkOverlayOrigin\"\n        name=\"search-input\"\n        inputType=\"text\"\n        symbolId=\"search-alternate\"\n        symbolPosition=\"left\"\n        cdkOverlayOrigin\n        [placeholder]=\"placeholder\"\n        [inputId]=\"inputId\"\n        [label]=\"label\"\n        [disabled]=\"disabledSignal()\"\n        [ngModel]=\"searchTermSignal()\"\n        (ngModelChange)=\"searchTerm$.next($event)\" />\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                <ng-container *ngIf=\"resultsLoadingSignal(); else results\">\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-template>\n    </div>\n</div>\n<ng-template #results>\n    <ng-container *ngIf=\"searchResultsSignal()?.length; else noResults\">\n        <div\n            *ngFor=\"let option of searchResultsSignal(); trackBy: trackByFn\"\n            class=\"ap-autocomplete-search-results-item\"\n            tabindex=\"0\"\n            (keydown.enter)=\"onSelectOption(option)\"\n            (click)=\"onSelectOption(option)\">\n            <ng-container *ngIf=\"!optionTextTemplate; else customTemplate\">\n                <ng-container *ngIf=\"!optionLabel || !option[optionLabel]\">\n                    <div class=\"option\">\n                        <span\n                            class=\"option-item\"\n                            [title]=\"option\">\n                            {{ option }}\n                        </span>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                    <div\n                        class=\"option\"\n                        [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                        <ng-container *ngIf=\"!optionLabel\">\n                            <span class=\"item\">\n                                {{ option }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"optionImageUrl\">\n                            <ap-avatar\n                                size=\"24\"\n                                [showInitials]=\"true\"\n                                [username]=\"optionLabel ? option[optionLabel] : option\"\n                                [profilePicture]=\"option[optionImageUrl]\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                            <div class=\"texts\">\n                                <div class=\"first-line\">\n                                    <span\n                                        class=\"label\"\n                                        [title]=\"option[optionLabel]\">\n                                        {{ option[optionLabel] }}\n                                    </span>\n                                </div>\n                                <ng-container *ngIf=\"optionCaption && option[optionCaption]\">\n                                    <span\n                                        class=\"caption\"\n                                        [title]=\"option[optionCaption]\">\n                                        {{ option[optionCaption] }}\n                                    </span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ng-container>\n            <ng-template #customTemplate>\n                <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n            </ng-template>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n    <div class=\"ap-autocomplete-search-results-not-found\">\n        {{ notFoundText }}\n    </div>\n</ng-template>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: "ngmodule", type: FormsModule }, { 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: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search-alternate\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                <ng-container *ngIf=\"resultsLoadingSignal(); else results\">\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-template>\n    </div>\n</div>\n<ng-template #results>\n    <ng-container *ngIf=\"searchResultsSignal()?.length; else noResults\">\n        <div\n            *ngFor=\"let option of searchResultsSignal(); trackBy: trackByFn\"\n            class=\"ap-autocomplete-search-results-item\"\n            tabindex=\"0\"\n            (keydown.enter)=\"onSelectOption(option)\"\n            (click)=\"onSelectOption(option)\">\n            <ng-container *ngIf=\"!optionTextTemplate; else customTemplate\">\n                <ng-container *ngIf=\"!optionLabel || !option[optionLabel]\">\n                    <div class=\"option\">\n                        <span\n                            class=\"option-item\"\n                            [title]=\"option\">\n                            {{ option }}\n                        </span>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                    <div\n                        class=\"option\"\n                        [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                        <ng-container *ngIf=\"!optionLabel\">\n                            <span class=\"item\">\n                                {{ option }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"optionImageUrl\">\n                            <ap-avatar\n                                size=\"24\"\n                                [showInitials]=\"true\"\n                                [username]=\"optionLabel ? option[optionLabel] : option\"\n                                [profilePicture]=\"option[optionImageUrl]\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                            <div class=\"texts\">\n                                <div class=\"first-line\">\n                                    <span\n                                        class=\"label\"\n                                        [title]=\"option[optionLabel]\">\n                                        {{ option[optionLabel] }}\n                                    </span>\n                                </div>\n                                <ng-container *ngIf=\"optionCaption && option[optionCaption]\">\n                                    <span\n                                        class=\"caption\"\n                                        [title]=\"option[optionCaption]\">\n                                        {{ option[optionCaption] }}\n                                    </span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ng-container>\n            <ng-template #customTemplate>\n                <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n            </ng-template>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n    <div class=\"ap-autocomplete-search-results-not-found\">\n        {{ notFoundText }}\n    </div>\n</ng-template>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { 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: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-autocomplete', standalone: true, imports: [NgIf, SymbolComponent, InputComponent, FormsModule, LoaderComponent, NgForOf, AvatarComponent, OverlayModule], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-input\n        #trigger=\"cdkOverlayOrigin\"\n        name=\"search-input\"\n        inputType=\"text\"\n        symbolId=\"search-alternate\"\n        symbolPosition=\"left\"\n        cdkOverlayOrigin\n        [placeholder]=\"placeholder\"\n        [inputId]=\"inputId\"\n        [label]=\"label\"\n        [disabled]=\"disabledSignal()\"\n        [ngModel]=\"searchTermSignal()\"\n        (ngModelChange)=\"searchTerm$.next($event)\" />\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                <ng-container *ngIf=\"resultsLoadingSignal(); else results\">\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-template>\n    </div>\n</div>\n<ng-template #results>\n    <ng-container *ngIf=\"searchResultsSignal()?.length; else noResults\">\n        <div\n            *ngFor=\"let option of searchResultsSignal(); trackBy: trackByFn\"\n            class=\"ap-autocomplete-search-results-item\"\n            tabindex=\"0\"\n            (keydown.enter)=\"onSelectOption(option)\"\n            (click)=\"onSelectOption(option)\">\n            <ng-container *ngIf=\"!optionTextTemplate; else customTemplate\">\n                <ng-container *ngIf=\"!optionLabel || !option[optionLabel]\">\n                    <div class=\"option\">\n                        <span\n                            class=\"option-item\"\n                            [title]=\"option\">\n                            {{ option }}\n                        </span>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                    <div\n                        class=\"option\"\n                        [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                        <ng-container *ngIf=\"!optionLabel\">\n                            <span class=\"item\">\n                                {{ option }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"optionImageUrl\">\n                            <ap-avatar\n                                size=\"24\"\n                                [showInitials]=\"true\"\n                                [username]=\"optionLabel ? option[optionLabel] : option\"\n                                [profilePicture]=\"option[optionImageUrl]\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                            <div class=\"texts\">\n                                <div class=\"first-line\">\n                                    <span\n                                        class=\"label\"\n                                        [title]=\"option[optionLabel]\">\n                                        {{ option[optionLabel] }}\n                                    </span>\n                                </div>\n                                <ng-container *ngIf=\"optionCaption && option[optionCaption]\">\n                                    <span\n                                        class=\"caption\"\n                                        [title]=\"option[optionCaption]\">\n                                        {{ option[optionCaption] }}\n                                    </span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ng-container>\n            <ng-template #customTemplate>\n                <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n            </ng-template>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n    <div class=\"ap-autocomplete-search-results-not-found\">\n        {{ notFoundText }}\n    </div>\n</ng-template>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-autocomplete', standalone: true, imports: [
+                        NgIf,
+                        SymbolComponent,
+                        FormFieldComponent,
+                        InputGroupComponent,
+                        FormsModule,
+                        LoaderComponent,
+                        NgForOf,
+                        InputDirective,
+                        AvatarComponent,
+                        OverlayModule,
+                    ], encapsulation: ViewEncapsulation.None, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search-alternate\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                <ng-container *ngIf=\"resultsLoadingSignal(); else results\">\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                </ng-container>\n            </div>\n        </ng-template>\n    </div>\n</div>\n<ng-template #results>\n    <ng-container *ngIf=\"searchResultsSignal()?.length; else noResults\">\n        <div\n            *ngFor=\"let option of searchResultsSignal(); trackBy: trackByFn\"\n            class=\"ap-autocomplete-search-results-item\"\n            tabindex=\"0\"\n            (keydown.enter)=\"onSelectOption(option)\"\n            (click)=\"onSelectOption(option)\">\n            <ng-container *ngIf=\"!optionTextTemplate; else customTemplate\">\n                <ng-container *ngIf=\"!optionLabel || !option[optionLabel]\">\n                    <div class=\"option\">\n                        <span\n                            class=\"option-item\"\n                            [title]=\"option\">\n                            {{ option }}\n                        </span>\n                    </div>\n                </ng-container>\n                <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                    <div\n                        class=\"option\"\n                        [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                        <ng-container *ngIf=\"!optionLabel\">\n                            <span class=\"item\">\n                                {{ option }}\n                            </span>\n                        </ng-container>\n                        <ng-container *ngIf=\"optionImageUrl\">\n                            <ap-avatar\n                                size=\"24\"\n                                [showInitials]=\"true\"\n                                [username]=\"optionLabel ? option[optionLabel] : option\"\n                                [profilePicture]=\"option[optionImageUrl]\" />\n                        </ng-container>\n                        <ng-container *ngIf=\"optionLabel && option[optionLabel]\">\n                            <div class=\"texts\">\n                                <div class=\"first-line\">\n                                    <span\n                                        class=\"label\"\n                                        [title]=\"option[optionLabel]\">\n                                        {{ option[optionLabel] }}\n                                    </span>\n                                </div>\n                                <ng-container *ngIf=\"optionCaption && option[optionCaption]\">\n                                    <span\n                                        class=\"caption\"\n                                        [title]=\"option[optionCaption]\">\n                                        {{ option[optionCaption] }}\n                                    </span>\n                                </ng-container>\n                            </div>\n                        </ng-container>\n                    </div>\n                </ng-container>\n            </ng-container>\n            <ng-template #customTemplate>\n                <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n            </ng-template>\n        </div>\n    </ng-container>\n</ng-template>\n\n<ng-template #noResults>\n    <div class=\"ap-autocomplete-search-results-not-found\">\n        {{ notFoundText }}\n    </div>\n</ng-template>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"] }]
         }], ctorParameters: function () { return []; }, propDecorators: { placeholder: [{
                 type: Input
             }], label: [{
@@ -107,9 +120,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
                 type: Input
             }], optionTextTemplate: [{
                 type: Input
-            }], input: [{
+            }], formField: [{
                 type: ViewChild,
-                args: [InputComponent, { static: true }]
+                args: ['formField', { read: ElementRef }]
             }], selectOption: [{
                 type: Output
             }] } });