npm - @agorapulse/ui-components - Versions diffs - 16.3.13 → 17.0.0-beta.1 - Mend

@agorapulse/ui-components 16.3.13 → 17.0.0-beta.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (168) hide show

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

@@ -36,10 +36,10 @@ class DropdownGroupItemComponent {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownGroupItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
@@ -81,10 +81,10 @@ class DropdownItemMultipleOneLineComponent {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
@@ -138,10 +138,10 @@ class DropdownItemMultipleTwoLinesComponent {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
@@ -189,10 +189,10 @@ class DropdownItemSingleOneLineComponent {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
@@ -228,10 +228,10 @@ class DropdownItemSingleTwoLinesComponent {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
@@ -292,13 +292,13 @@ class DropdownSearchFormComponent {
     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 #createNewTpl 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        </span>\n        <ng-container *ngIf=\"searchTerm\">\"{{ searchTerm }}\"</ng-container>\n    </button>\n</ng-template>", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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 #createNewTpl 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        </span>\n        <ng-container *ngIf=\"searchTerm\">\"{{ searchTerm }}\"</ng-container>\n    </button>\n</ng-template>", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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 #createNewTpl 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        </span>\n        <ng-container *ngIf=\"searchTerm\">\"{{ searchTerm }}\"</ng-container>\n    </button>\n</ng-template>", styles: ["ap-dropdown-search-form .dropdown-search-input .ap-input-group{width:100%}\n"] }]
-        }], ctorParameters: function () { return []; }, propDecorators: { searchPlaceholder: [{
+        }], ctorParameters: () => [], propDecorators: { searchPlaceholder: [{
                 type: Input
             }], createNewEnabled: [{
                 type: Input
@@ -405,10 +405,10 @@ class SelectLabelMultipleComponent {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
@@ -435,10 +435,10 @@ class SelectLabelSingleComponent {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", 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: [{
@@ -500,10 +500,10 @@ class SelectBaseDirective {
         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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectBaseDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectBaseDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -513,7 +513,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
                         class: 'ap-select',
                     },
                 }]
-        }], ctorParameters: function () { return []; }, propDecorators: { inlineLabel: [{
+        }], ctorParameters: () => [], propDecorators: { inlineLabel: [{
                 type: Input
             }], symbolId: [{
                 type: Input
@@ -531,10 +531,10 @@ class SelectMultipleDirective {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectMultipleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectMultipleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -547,7 +547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
                         },
                     ],
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 class SelectSingleDirective {
     selectComponent = inject(NgSelectComponent);
@@ -560,10 +560,10 @@ class SelectSingleDirective {
             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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectSingleDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.3.3", 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: SelectSingleDirective, decorators: [{
             type: Directive,
             args: [{
                     // eslint-disable-next-line @angular-eslint/directive-selector
@@ -576,11 +576,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImpo
                         },
                     ],
                 }]
-        }], ctorParameters: function () { return []; } });
+        }], ctorParameters: () => [] });
 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,
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ApSelectModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.3.3", ngImport: i0, type: ApSelectModule, imports: [SelectMultipleDirective,
             SelectSingleDirective,
             DropdownItemSingleOneLineComponent,
             DropdownItemSingleTwoLinesComponent,
@@ -601,7 +601,7 @@ class ApSelectModule {
             DropdownSearchFormComponent,
             DropdownGroupItemComponent,
             NgSelectModule] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ApSelectModule, imports: [DropdownItemSingleOneLineComponent,
             DropdownItemSingleTwoLinesComponent,
             DropdownItemMultipleOneLineComponent,
             DropdownItemMultipleTwoLinesComponent,
@@ -611,7 +611,7 @@ class ApSelectModule {
             DropdownGroupItemComponent,
             NgSelectModule, NgSelectModule] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.10", ngImport: i0, type: ApSelectModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: ApSelectModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [