@agorapulse/ui-components 0.0.3 → 1.0.0-SNAPSHOT

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

@@ -0,0 +1,651 @@
+import * as i0 from '@angular/core';
+import { Component, ViewEncapsulation, Input, EventEmitter, ChangeDetectionStrategy, Output, ViewChild, signal, TemplateRef, inject, ElementRef, EnvironmentInjector, computed, runInInjectionContext, effect, Renderer2, ViewContainerRef, Directive, NgModule } from '@angular/core';
+import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
+import { BadgeComponent } from '@agorapulse/ui-components/badge';
+import { CheckboxComponent } from '@agorapulse/ui-components/checkbox';
+import { TooltipDirective } from '@agorapulse/ui-components/tooltip';
+import { NgIf, NgFor, NgSwitch, NgSwitchCase } from '@angular/common';
+import { AvatarComponent } from '@agorapulse/ui-components/avatar';
+import { SymbolComponent, SymbolRegistry, apCheck2, apAdd2022 } from '@agorapulse/ui-symbol';
+import { LoaderComponent } from '@agorapulse/ui-animations';
+import { InputDirective } from '@agorapulse/ui-components/input';
+import { InputGroupComponent } from '@agorapulse/ui-components/input-group';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { BehaviorSubject, filter } from 'rxjs';
+import { LabelComponent } from '@agorapulse/ui-components/labels';
+import { TagComponent } from '@agorapulse/ui-components/tag';
+
+class DropdownGroupItemComponent {
+    groupLabel;
+    groupTag;
+    selectableGroup = false;
+    children = [];
+    select;
+    disabled = false;
+    disabledTooltip;
+    isGroupIntermediate() {
+        const selectedChildren = this.children.filter((child) => child.selected && !child.disabled);
+        const selectableChildren = this.children.filter((child) => !child.disabled);
+        return selectedChildren.length > 0 && selectedChildren.length < selectableChildren.length;
+    }
+    isGroupChecked() {
+        return this.children.every((child) => child.selected || child.disabled) && !this.isGroupDisabled();
+    }
+    isGroupDisabled() {
+        return this.children.every((child) => child.disabled);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownGroupItemComponent, isStandalone: true, selector: "ap-dropdown-group-item", inputs: { groupLabel: "groupLabel", groupTag: "groupTag", selectableGroup: "selectableGroup", children: "children", select: "select", disabled: "disabled", disabledTooltip: "disabledTooltip" }, ngImport: i0, template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\">\n    <ap-checkbox\n        *ngIf=\"selectableGroup; else groupLabelTpl\"\n        [name]=\"'option-group-selection-' + groupLabel\"\n        [disabled]=\"isGroupDisabled() || disabled\"\n        [indeterminate]=\"isGroupIntermediate()\"\n        [checked]=\"isGroupChecked()\">\n        <span class=\"group-label\">\n            {{ groupLabel }}\n        </span>\n        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ap-checkbox>\n    <ng-template #groupLabelTpl>\n        <span class=\"group-label\" [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ng-template>\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"], dependencies: [{ kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownGroupItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-group-item', encapsulation: ViewEncapsulation.None, standalone: true, imports: [BadgeComponent, NgIf, CheckboxComponent, TooltipDirective], template: "<div\n    class=\"group\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\">\n    <ap-checkbox\n        *ngIf=\"selectableGroup; else groupLabelTpl\"\n        [name]=\"'option-group-selection-' + groupLabel\"\n        [disabled]=\"isGroupDisabled() || disabled\"\n        [indeterminate]=\"isGroupIntermediate()\"\n        [checked]=\"isGroupChecked()\">\n        <span class=\"group-label\">\n            {{ groupLabel }}\n        </span>\n        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ap-checkbox>\n    <ng-template #groupLabelTpl>\n        <span class=\"group-label\" [title]=\"groupLabel\">\n            {{ groupLabel }}\n        </span>\n        <ap-badge\n            *ngIf=\"groupTag\"\n            color=\"blue\">\n            {{ groupTag }}\n        </ap-badge>\n    </ng-template>\n</div>\n", styles: ["ap-dropdown-group-item{display:block;width:100%}\n"] }]
+        }], propDecorators: { groupLabel: [{
+                type: Input,
+                args: [{ required: true }]
+            }], groupTag: [{
+                type: Input
+            }], selectableGroup: [{
+                type: Input
+            }], children: [{
+                type: Input,
+                args: [{ required: true }]
+            }], select: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], disabled: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }] } });
+
+class DropdownItemMultipleOneLineComponent {
+    text;
+    selected;
+    htmlId;
+    disabled = false;
+    avatarUrl;
+    symbolId;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    onlyEnabled = false;
+    onlyText;
+    selectOnly = new EventEmitter();
+    checkbox;
+    onSelectOnly() {
+        this.selectOnly.emit();
+        this.checkbox.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: "text", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl !== undefined\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <ap-symbol *ngIf=\"symbolId\" size=\"micro\" [symbolId]=\"symbolId\" />\n        <span\n            class=\"option-item\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        <ap-badge\n            *ngIf=\"badgeText\"\n            color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-multiple-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl !== undefined\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <ap-symbol *ngIf=\"symbolId\" size=\"micro\" [symbolId]=\"symbolId\" />\n        <span\n            class=\"option-item\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        <ap-badge\n            *ngIf=\"badgeText\"\n            color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-multiple-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-one-line .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], htmlId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], symbolId: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }], onlyEnabled: [{
+                type: Input
+            }], onlyText: [{
+                type: Input
+            }], selectOnly: [{
+                type: Output
+            }], checkbox: [{
+                type: ViewChild,
+                args: [CheckboxComponent]
+            }] } });
+
+class DropdownItemMultipleTwoLinesComponent {
+    text;
+    caption;
+    selected;
+    htmlId;
+    disabled = false;
+    avatarUrl;
+    symbolId;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    onlyEnabled = false;
+    onlyText;
+    selectOnly = new EventEmitter();
+    checkbox;
+    onSelectOnly() {
+        this.selectOnly.emit();
+        this.checkbox.focus();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", htmlId: "htmlId", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", onlyEnabled: "onlyEnabled", onlyText: "onlyText" }, outputs: { selectOnly: "selectOnly" }, viewQueries: [{ propertyName: "checkbox", first: true, predicate: CheckboxComponent, descendants: true }], ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl !== undefined\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <ap-symbol *ngIf=\"symbolId\" size=\"micro\" [symbolId]=\"symbolId\" />\n        <div class=\"texts\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                <ap-badge\n                    *ngIf=\"badgeText\"\n                    color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-multiple-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, CheckboxComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option multiple with-caption\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled\"\n        [name]=\"'option-selection-' + htmlId\">\n        <ap-avatar\n            *ngIf=\"avatarUrl !== undefined\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\" />\n        <ap-symbol *ngIf=\"symbolId\" size=\"micro\" [symbolId]=\"symbolId\" />\n        <div class=\"texts\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                <ap-badge\n                    *ngIf=\"badgeText\"\n                    color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n        <button\n            *ngIf=\"onlyEnabled && !disabled\"\n            class=\"standalone-link\"\n            type=\"button\"\n            (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n            {{ onlyText }}\n        </button>\n    </ap-checkbox>\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-multiple-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option ap-checkbox label{display:flex;gap:var(--ref-spacing-xxs);align-items:center}ap-dropdown-item-multiple-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-multiple-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-multiple-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], caption: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], htmlId: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], symbolId: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }], onlyEnabled: [{
+                type: Input
+            }], onlyText: [{
+                type: Input
+            }], selectOnly: [{
+                type: Output
+            }], checkbox: [{
+                type: ViewChild,
+                args: [CheckboxComponent]
+            }] } });
+
+class DropdownItemSingleOneLineComponent {
+    text;
+    selected;
+    disabled = false;
+    avatarUrl;
+    symbolId;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    network = undefined;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: "text", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n    <ap-avatar\n        *ngIf=\"avatarUrl !== undefined\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\"\n        [network]=\"network\" />\n    <ap-symbol *ngIf=\"symbolId\" size=\"micro\" [symbolId]=\"symbolId\" />\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    <ap-badge\n        *ngIf=\"badgeText\"\n        color=\"blue\">\n        {{ badgeText }}\n    </ap-badge>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-single-one-line', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\">\n    <ap-avatar\n        *ngIf=\"avatarUrl !== undefined\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\"\n        [network]=\"network\" />\n    <ap-symbol *ngIf=\"symbolId\" size=\"micro\" [symbolId]=\"symbolId\" />\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    <ap-badge\n        *ngIf=\"badgeText\"\n        color=\"blue\">\n        {{ badgeText }}\n    </ap-badge>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-one-line .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-one-line .option .option-selected{margin-left:auto}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], symbolId: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }], network: [{
+                type: Input
+            }] } });
+
+class DropdownItemSingleTwoLinesComponent {
+    text;
+    caption;
+    selected;
+    disabled = false;
+    avatarUrl;
+    symbolId;
+    disabledTooltip;
+    badgeText;
+    dividerEnabled = false;
+    network = undefined;
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: "text", caption: "caption", selected: "selected", disabled: "disabled", avatarUrl: "avatarUrl", symbolId: "symbolId", disabledTooltip: "disabledTooltip", badgeText: "badgeText", dividerEnabled: "dividerEnabled", network: "network" }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n    <ap-avatar\n        *ngIf=\"avatarUrl !== undefined\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\"\n        [network]=\"network\" />\n    <ap-symbol\n        *ngIf=\"symbolId\"\n        size=\"micro\"\n        [symbolId]=\"symbolId\" />\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            <ap-badge\n                *ngIf=\"badgeText\"\n                color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltipPosition", "apTooltip", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-item-single-two-lines', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, NgIf, BadgeComponent, TooltipDirective], template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\">\n    <ap-avatar\n        *ngIf=\"avatarUrl !== undefined\"\n        [size]=\"24\"\n        [profilePicture]=\"avatarUrl\"\n        [username]=\"text\"\n        [showInitials]=\"true\"\n        [network]=\"network\" />\n    <ap-symbol\n        *ngIf=\"symbolId\"\n        size=\"micro\"\n        [symbolId]=\"symbolId\" />\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            <ap-badge\n                *ngIf=\"badgeText\"\n                color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    <ap-symbol\n        *ngIf=\"selected\"\n        class=\"option-selected\"\n        symbolId=\"check-2\"\n        color=\"electric-blue\"\n        size=\"micro\" />\n</div>\n<div\n    *ngIf=\"dividerEnabled\"\n    class=\"divider\"></div>\n", styles: ["ap-dropdown-item-single-two-lines .option{display:flex;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .option-selected{margin-left:auto}ap-dropdown-item-single-two-lines .option .texts{flex:1;overflow:auto;display:flex;flex-direction:column}ap-dropdown-item-single-two-lines .option .texts .first-line{display:flex;align-items:center;gap:var(--ref-spacing-xxs)}ap-dropdown-item-single-two-lines .option .texts .first-line .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}\n"] }]
+        }], propDecorators: { text: [{
+                type: Input,
+                args: [{ required: true }]
+            }], caption: [{
+                type: Input,
+                args: [{ required: true }]
+            }], selected: [{
+                type: Input,
+                args: [{ required: true }]
+            }], disabled: [{
+                type: Input
+            }], avatarUrl: [{
+                type: Input
+            }], symbolId: [{
+                type: Input
+            }], disabledTooltip: [{
+                type: Input
+            }], badgeText: [{
+                type: Input
+            }], dividerEnabled: [{
+                type: Input
+            }], network: [{
+                type: Input
+            }] } });
+
+class DropdownSearchFormComponent {
+    searchPlaceholder = '';
+    createNewEnabled = false;
+    createText = 'Create';
+    select;
+    inputSearch;
+    notFoundTpl;
+    loadingTpl;
+    createNewTpl;
+    createNew = new EventEmitter();
+    searchTermSignal = signal('');
+    searchTerm$ = new BehaviorSubject('');
+    constructor() {
+        this.searchTerm$
+            .pipe(filter(() => !!this.select), takeUntilDestroyed())
+            .subscribe(term => {
+            this.searchTermSignal.set(term);
+            this.select.filter(term);
+        });
+    }
+    ngAfterViewInit() {
+        setTimeout(() => {
+            this.inputSearch.nativeElement.focus();
+        }, 100);
+        this.select.notFoundTemplate = this.notFoundTpl;
+        this.select.loadingTextTemplate = this.loadingTpl;
+        if (this.createNewEnabled) {
+            this.select.footerTemplate = this.createNewTpl;
+        }
+    }
+    onCreateNew() {
+        this.createNew.emit(this.searchTermSignal());
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.10", type: DropdownSearchFormComponent, isStandalone: true, selector: "ap-dropdown-search-form", inputs: { searchPlaceholder: "searchPlaceholder", createNewEnabled: "createNewEnabled", createText: "createText", select: "select" }, outputs: { createNew: "createNew" }, viewQueries: [{ propertyName: "inputSearch", first: true, predicate: ["inputSearch"], descendants: true }, { propertyName: "notFoundTpl", first: true, predicate: ["notFoundTpl"], descendants: true, read: TemplateRef }, { propertyName: "loadingTpl", first: true, predicate: ["loadingTpl"], descendants: true, read: TemplateRef }, { propertyName: "createNewTpl", first: true, predicate: ["createNewTpl"], descendants: true, read: TemplateRef }], ngImport: i0, template: "<ap-input-group class=\"dropdown-search-input\">\n    <ap-symbol symbolId=\"search-alternate\" />\n    <input\n        #inputSearch\n        apInput\n        [placeholder]=\"searchPlaceholder\"\n        [ngModel]=\"searchTermSignal()\"\n        (ngModelChange)=\"searchTerm$.next($event)\" />\n</ap-input-group>\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <ap-loader diameter=\"30\" />\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"add-2022\"\n            size=\"micro\" />\n        <span>\n            {{ createText }}\n            {{ searchTerm ? searchTerm : '' }}\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"], dependencies: [{ kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { 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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ap-dropdown-search-form', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [NgIf, InputGroupComponent, InputDirective, SymbolComponent, FormsModule, LoaderComponent], template: "<ap-input-group class=\"dropdown-search-input\">\n    <ap-symbol symbolId=\"search-alternate\" />\n    <input\n        #inputSearch\n        apInput\n        [placeholder]=\"searchPlaceholder\"\n        [ngModel]=\"searchTermSignal()\"\n        (ngModelChange)=\"searchTerm$.next($event)\" />\n</ap-input-group>\n\n<ng-template #notFoundTpl>\n    <div class=\"option not-found\">\n        <span>{{ select.notFoundText ? select.notFoundText : 'Not found text' }}</span>\n    </div>\n</ng-template>\n\n<ng-template #loadingTpl>\n    <div class=\"loading-state\">\n        <ap-loader diameter=\"30\" />\n        <span>\n            {{ select.loadingText ? select.loadingText : 'Loading Items' }}\n        </span>\n    </div>\n</ng-template>\n\n<ng-template\n    #createNewTpl\n    let-searchTerm=\"searchTerm\">\n    <button\n        class=\"create-new\"\n        type=\"button\"\n        (click)=\"onCreateNew()\">\n        <ap-symbol\n            symbolId=\"add-2022\"\n            size=\"micro\" />\n        <span>\n            {{ createText }}\n            {{ searchTerm ? searchTerm : '' }}\n        </span>\n    </button>\n</ng-template>\n", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input{width:100%}ap-dropdown-search-form .dropdown-search-input .ap-input-group input:placeholder-shown{text-overflow:ellipsis}\n"] }]
+        }], ctorParameters: function () { return []; }, propDecorators: { searchPlaceholder: [{
+                type: Input
+            }], createNewEnabled: [{
+                type: Input
+            }], createText: [{
+                type: Input
+            }], select: [{
+                type: Input,
+                args: [{
+                        required: true,
+                    }]
+            }], inputSearch: [{
+                type: ViewChild,
+                args: ['inputSearch']
+            }], notFoundTpl: [{
+                type: ViewChild,
+                args: ['notFoundTpl', { read: TemplateRef }]
+            }], loadingTpl: [{
+                type: ViewChild,
+                args: ['loadingTpl', { read: TemplateRef }]
+            }], createNewTpl: [{
+                type: ViewChild,
+                args: ['createNewTpl', { read: TemplateRef }]
+            }], createNew: [{
+                type: Output
+            }] } });
+
+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", "mini"], 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
+            }] } });
+
+class SelectLabelSingleComponent {
+    displayType = 'text';
+    label;
+    avatarUrl;
+    network = undefined;
+    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", network: "network" }, 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 !== undefined\"\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            [network]=\"network\" />\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", "mini"], outputs: ["clear"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], 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, NgIf], 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 !== undefined\"\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            [network]=\"network\" />\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
+            }], network: [{
+                type: Input
+            }] } });
+
+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
+            }] } });
+
+class SelectMultipleDirective {
+    selectComponent = inject(NgSelectComponent);
+    constructor() {
+        this.selectComponent.multiple = true;
+        this.selectComponent.closeOnSelect = false;
+        this.selectComponent.searchable = true; // small hack to not closed the dropdown panel when clear an item in value container
+    }
+    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: 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 []; } });
+
+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: 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 []; } });
+
+class ApSelectModule {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, imports: [SelectMultipleDirective,
+            SelectSingleDirective,
+            DropdownItemSingleOneLineComponent,
+            DropdownItemSingleTwoLinesComponent,
+            DropdownItemMultipleOneLineComponent,
+            DropdownItemMultipleTwoLinesComponent,
+            SelectLabelSingleComponent,
+            SelectLabelMultipleComponent,
+            DropdownSearchFormComponent,
+            DropdownGroupItemComponent,
+            NgSelectModule], exports: [SelectMultipleDirective,
+            SelectSingleDirective,
+            DropdownItemSingleOneLineComponent,
+            DropdownItemSingleTwoLinesComponent,
+            DropdownItemMultipleOneLineComponent,
+            DropdownItemMultipleTwoLinesComponent,
+            SelectLabelSingleComponent,
+            SelectLabelMultipleComponent,
+            DropdownSearchFormComponent,
+            DropdownGroupItemComponent,
+            NgSelectModule] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
+            DropdownItemSingleTwoLinesComponent,
+            DropdownItemMultipleOneLineComponent,
+            DropdownItemMultipleTwoLinesComponent,
+            SelectLabelSingleComponent,
+            SelectLabelMultipleComponent,
+            DropdownSearchFormComponent,
+            DropdownGroupItemComponent,
+            NgSelectModule, NgSelectModule] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [
+                        SelectMultipleDirective,
+                        SelectSingleDirective,
+                        DropdownItemSingleOneLineComponent,
+                        DropdownItemSingleTwoLinesComponent,
+                        DropdownItemMultipleOneLineComponent,
+                        DropdownItemMultipleTwoLinesComponent,
+                        SelectLabelSingleComponent,
+                        SelectLabelMultipleComponent,
+                        DropdownSearchFormComponent,
+                        DropdownGroupItemComponent,
+                        NgSelectModule,
+                    ],
+                    exports: [
+                        SelectMultipleDirective,
+                        SelectSingleDirective,
+                        DropdownItemSingleOneLineComponent,
+                        DropdownItemSingleTwoLinesComponent,
+                        DropdownItemMultipleOneLineComponent,
+                        DropdownItemMultipleTwoLinesComponent,
+                        SelectLabelSingleComponent,
+                        SelectLabelMultipleComponent,
+                        DropdownSearchFormComponent,
+                        DropdownGroupItemComponent,
+                        NgSelectModule,
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { ApSelectModule, DropdownGroupItemComponent, DropdownItemMultipleOneLineComponent, DropdownItemMultipleTwoLinesComponent, DropdownItemSingleOneLineComponent, DropdownItemSingleTwoLinesComponent, DropdownSearchFormComponent, SelectBaseDirective, SelectLabelMultipleComponent, SelectLabelSingleComponent, SelectMultipleDirective, SelectSingleDirective };
+//# sourceMappingURL=agorapulse-ui-components-select.mjs.map