@agorapulse/ui-components 18.0.0-beta.10 → 18.0.0-beta.12

package/fesm2022/agorapulse-ui-components-phone-number-input.mjs

@@ -14,6 +14,8 @@ import { apCheck } from '@agorapulse/ui-symbol';
 
 /* eslint-disable @typescript-eslint/no-empty-function */
 const NUMBER_ONLY_PATTERN = /[0-9]/;
+const DEFAULT_COUNTRY_CODE = 'US';
+const DEFAULT_PHONE_NUMBER_CODE = '+1';
 class PhoneNumberInputComponent {
     destroyRef = inject(DestroyRef);
     set errorsDisplayForced(errorsDisplayForced) {
@@ -26,20 +28,13 @@ class PhoneNumberInputComponent {
     flagsBucketUrl;
     set phoneNumberInfos(phoneNumberInfos) {
         this.codeNumberInfos = phoneNumberInfos ?? [];
-        if (phoneNumberInfos.length > 0) {
-            // DS Behavior: select by default the first phone number code
-            const defaultValue = phoneNumberInfos[0].phoneNumberCode;
-            this.formGroup.controls.phoneNumberCode.setValue(defaultValue);
-            this.phoneNumberCode = defaultValue;
-        }
-    }
-    set initialCountryCode(initialCountryCode) {
-        const firstValue = this.codeNumberInfos.find((codeInfo) => codeInfo.countryCode === initialCountryCode)?.phoneNumberCode;
-        if (firstValue) {
-            this.formGroup.patchValue({ phoneNumberCode: firstValue });
-        }
+        this.countryCodeMappedPhoneNumberInfos = phoneNumberInfos.reduce((acc, phoneNumberInfo) => {
+            acc[phoneNumberInfo.countryCode] = phoneNumberInfo;
+            return acc;
+        }, {});
     }
     codeNumberInfos = [];
+    countryCodeMappedPhoneNumberInfos = {};
     name;
     placeholder;
     searchPlaceholder;
@@ -47,12 +42,18 @@ class PhoneNumberInputComponent {
         this.formGroup.controls.phoneNumber.setValue(phoneNumber);
     }
     set phoneNumberCode(phoneNumberCode) {
-        this.formGroup.controls.phoneNumberCode.setValue(phoneNumberCode);
+        this.formGroup.controls.countryCode.setValue(phoneNumberCode);
+    }
+    set initialCountryCode(initialCountryCode) {
+        const firstValue = this.findPhoneNumberInfoByCountryCode(initialCountryCode)?.countryCode;
+        if (firstValue) {
+            this.formGroup.patchValue({ countryCode: firstValue });
+        }
     }
     changePhoneNumber = new EventEmitter();
     changePhoneNumberCode = new EventEmitter();
     formGroup = new FormGroup({
-        phoneNumberCode: new FormControl('', [Validators.required]),
+        countryCode: new FormControl(DEFAULT_COUNTRY_CODE, [Validators.required]),
         phoneNumber: new FormControl('', [Validators.required]),
     });
     onTouched = () => { };
@@ -63,14 +64,24 @@ class PhoneNumberInputComponent {
     ngOnInit() {
         // Subscribe to form changes to propagate them to the parent component
         this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {
-            if (this.onChange) {
-                this.onChange(value);
+            let phoneNumberCode = DEFAULT_PHONE_NUMBER_CODE;
+            if (value.countryCode) {
+                const phoneNumberInfo = this.findPhoneNumberInfoByCountryCode(value.countryCode);
+                if (phoneNumberInfo) {
+                    phoneNumberCode = phoneNumberInfo.phoneNumberCode;
+                }
+            }
+            if (this.onChange && phoneNumberCode) {
+                this.onChange({
+                    phoneNumber: value.phoneNumber,
+                    phoneNumberCode,
+                });
             }
             if (value.phoneNumber !== this.phoneNumber) {
                 this.changePhoneNumber.emit(value.phoneNumber ?? '');
             }
-            if (value.phoneNumberCode !== this.phoneNumberCode) {
-                this.changePhoneNumberCode.emit(value.phoneNumberCode ?? '');
+            if (phoneNumberCode !== this.phoneNumberCode) {
+                this.changePhoneNumberCode.emit(phoneNumberCode ?? '');
             }
         });
     }
@@ -111,8 +122,11 @@ class PhoneNumberInputComponent {
             event.preventDefault();
         }
     }
+    findPhoneNumberInfoByCountryCode(countryCode) {
+        return this.codeNumberInfos.find((codeInfo) => codeInfo.countryCode === countryCode);
+    }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PhoneNumberInputComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: PhoneNumberInputComponent, isStandalone: true, selector: "ap-phone-number-input", inputs: { errorsDisplayForced: "errorsDisplayForced", flagsBucketUrl: "flagsBucketUrl", phoneNumberInfos: "phoneNumberInfos", initialCountryCode: "initialCountryCode", name: "name", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", phoneNumber: "phoneNumber", phoneNumberCode: "phoneNumberCode" }, outputs: { changePhoneNumber: "changePhoneNumber", changePhoneNumberCode: "changePhoneNumberCode" }, providers: [
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: PhoneNumberInputComponent, isStandalone: true, selector: "ap-phone-number-input", inputs: { errorsDisplayForced: "errorsDisplayForced", flagsBucketUrl: "flagsBucketUrl", phoneNumberInfos: "phoneNumberInfos", name: "name", placeholder: "placeholder", searchPlaceholder: "searchPlaceholder", phoneNumber: "phoneNumber", phoneNumberCode: "phoneNumberCode", initialCountryCode: "initialCountryCode" }, outputs: { changePhoneNumber: "changePhoneNumber", changePhoneNumberCode: "changePhoneNumberCode" }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PhoneNumberInputComponent),
@@ -123,7 +137,7 @@ class PhoneNumberInputComponent {
                 useExisting: forwardRef(() => PhoneNumberInputComponent),
                 multi: true,
             },
-        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n            #select\n            apSelectSingle\n            data-test=\"subscription-billing-infos-phoneNumberCode\"\n            class=\"ap-phone-number-code-select ap-select\"\n            bindLabel=\"countryName\"\n            bindValue=\"phoneNumberCode\"\n            notFoundText=\"\"\n            formControlName=\"phoneNumberCode\"\n            appendTo=\"body\"\n            [clearable]=\"false\"\n            [items]=\"codeNumberInfos\"\n            [searchFn]=\"phoneNumberCodeSearchFn\"\n            (blur)=\"onTouched()\">\n            <ng-template\n                let-item=\"item\"\n                ng-label-tmp>\n                @if (item && item.countryCode) {\n                    <div class=\"flag\">\n                        @if (!!flagsBucketUrl) {\n                            <img\n                                width=\"24\"\n                                height=\"16\"\n                                alt=\"flag\"\n                                [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                        } @else {\n                            <span>{{ item.countryCode }}</span>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template\n                let-item=\"item\"\n                let-item$=\"item$\"\n                ng-option-tmp>\n                <ap-dropdown-item-single-one-line\n                    [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                    [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                    [selected]=\"item$.selected\"\n                    [roundedAvatar]=\"false\"\n                />\n            </ng-template>\n            <ng-template\n                let-searchTerm=\"searchTerm\"\n                ng-header-tmp>\n                <ap-dropdown-search-form\n                  [searchPlaceholder]=\"searchPlaceholder\"\n                  [select]=\"select\"\n                />\n              </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        <ap-input-prefix>{{formGroup.controls.phoneNumberCode.value}}</ap-input-prefix>\n        <input\n                apInput\n                class=\"phone-field\"\n                data-test=\"subscription-billing-infos-phoneNumberInput\"\n                type=\"text\"\n                data-recurly=\"phone\"\n                formControlName=\"phoneNumber\"\n                [placeholder]=\"placeholder\"\n                [attr.name]=\"name\"\n                (beforeinput)=\"filterChars($event)\"\n                (blur)=\"onTouched()\"\n        />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:4px;object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: InputPrefixComponent, selector: "ap-input-prefix" }, { kind: "component", type: DropdownItemSingleOneLineComponent, selector: "ap-dropdown-item-single-one-line", inputs: ["text", "selected", "disabled", "avatarUrl", "showAvatarInitials", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked"], outputs: ["lockedFeatureClicked"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }], encapsulation: i0.ViewEncapsulation.None });
+        ], ngImport: i0, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n            #select\n            apSelectSingle\n            data-test=\"subscription-billing-infos-phoneNumberCode\"\n            class=\"ap-phone-number-code-select ap-select\"\n            bindLabel=\"countryName\"\n            bindValue=\"countryCode\"\n            notFoundText=\"\"\n            formControlName=\"countryCode\"\n            appendTo=\"body\"\n            [clearable]=\"false\"\n            [items]=\"codeNumberInfos\"\n            [searchFn]=\"phoneNumberCodeSearchFn\"\n            (blur)=\"onTouched()\">\n            <ng-template\n                let-item=\"item\"\n                ng-label-tmp>\n                @if (item && item.countryCode) {\n                    <div class=\"flag\">\n                        @if (!!flagsBucketUrl) {\n                            <img\n                                width=\"24\"\n                                height=\"16\"\n                                alt=\"flag\"\n                                [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                        } @else {\n                            <span>{{ item.countryCode }}</span>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template\n                let-item=\"item\"\n                let-item$=\"item$\"\n                ng-option-tmp>\n                <ap-dropdown-item-single-one-line\n                    [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                    [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                    [selected]=\"item$.selected\"\n                    [roundedAvatar]=\"false\"\n                />\n            </ng-template>\n            <ng-template\n                let-searchTerm=\"searchTerm\"\n                ng-header-tmp>\n                <ap-dropdown-search-form\n                  [searchPlaceholder]=\"searchPlaceholder\"\n                  [select]=\"select\"\n                />\n              </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @if (formGroup.controls.countryCode.value && countryCodeMappedPhoneNumberInfos) {\n            <ap-input-prefix>{{countryCodeMappedPhoneNumberInfos[formGroup.controls.countryCode.value]?.phoneNumberCode}}</ap-input-prefix>\n        }\n        <input\n                apInput\n                class=\"phone-field\"\n                data-test=\"subscription-billing-infos-phoneNumberInput\"\n                type=\"text\"\n                data-recurly=\"phone\"\n                formControlName=\"phoneNumber\"\n                [placeholder]=\"placeholder\"\n                [attr.name]=\"name\"\n                (beforeinput)=\"filterChars($event)\"\n                (blur)=\"onTouched()\"\n        />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:4px;object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "ngmodule", type: NgSelectModule }, { kind: "component", type: i3.NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }, { kind: "directive", type: i3.NgOptionTemplateDirective, selector: "[ng-option-tmp]" }, { kind: "directive", type: i3.NgLabelTemplateDirective, selector: "[ng-label-tmp]" }, { kind: "directive", type: i3.NgHeaderTemplateDirective, selector: "[ng-header-tmp]" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: InputPrefixComponent, selector: "ap-input-prefix" }, { kind: "component", type: DropdownItemSingleOneLineComponent, selector: "ap-dropdown-item-single-one-line", inputs: ["text", "selected", "disabled", "avatarUrl", "showAvatarInitials", "symbolId", "disabledTooltip", "badgeText", "dividerEnabled", "network", "roundedAvatar", "isFeatureLocked"], outputs: ["lockedFeatureClicked"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgOptimizedImage, selector: "img[ngSrc]", inputs: ["ngSrc", "ngSrcset", "sizes", "width", "height", "loading", "priority", "loaderParams", "disableOptimizedSrcset", "fill", "placeholder", "placeholderConfig", "src", "srcset"] }, { kind: "component", type: DropdownSearchFormComponent, selector: "ap-dropdown-search-form", inputs: ["searchPlaceholder", "createNewEnabled", "createText", "select"], outputs: ["createNew"] }], encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PhoneNumberInputComponent, decorators: [{
             type: Component,
@@ -150,7 +164,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                             useExisting: forwardRef(() => PhoneNumberInputComponent),
                             multi: true,
                         },
-                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n            #select\n            apSelectSingle\n            data-test=\"subscription-billing-infos-phoneNumberCode\"\n            class=\"ap-phone-number-code-select ap-select\"\n            bindLabel=\"countryName\"\n            bindValue=\"phoneNumberCode\"\n            notFoundText=\"\"\n            formControlName=\"phoneNumberCode\"\n            appendTo=\"body\"\n            [clearable]=\"false\"\n            [items]=\"codeNumberInfos\"\n            [searchFn]=\"phoneNumberCodeSearchFn\"\n            (blur)=\"onTouched()\">\n            <ng-template\n                let-item=\"item\"\n                ng-label-tmp>\n                @if (item && item.countryCode) {\n                    <div class=\"flag\">\n                        @if (!!flagsBucketUrl) {\n                            <img\n                                width=\"24\"\n                                height=\"16\"\n                                alt=\"flag\"\n                                [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                        } @else {\n                            <span>{{ item.countryCode }}</span>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template\n                let-item=\"item\"\n                let-item$=\"item$\"\n                ng-option-tmp>\n                <ap-dropdown-item-single-one-line\n                    [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                    [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                    [selected]=\"item$.selected\"\n                    [roundedAvatar]=\"false\"\n                />\n            </ng-template>\n            <ng-template\n                let-searchTerm=\"searchTerm\"\n                ng-header-tmp>\n                <ap-dropdown-search-form\n                  [searchPlaceholder]=\"searchPlaceholder\"\n                  [select]=\"select\"\n                />\n              </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        <ap-input-prefix>{{formGroup.controls.phoneNumberCode.value}}</ap-input-prefix>\n        <input\n                apInput\n                class=\"phone-field\"\n                data-test=\"subscription-billing-infos-phoneNumberInput\"\n                type=\"text\"\n                data-recurly=\"phone\"\n                formControlName=\"phoneNumber\"\n                [placeholder]=\"placeholder\"\n                [attr.name]=\"name\"\n                (beforeinput)=\"filterChars($event)\"\n                (blur)=\"onTouched()\"\n        />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:4px;object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"] }]
+                    ], encapsulation: ViewEncapsulation.None, template: "<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n            #select\n            apSelectSingle\n            data-test=\"subscription-billing-infos-phoneNumberCode\"\n            class=\"ap-phone-number-code-select ap-select\"\n            bindLabel=\"countryName\"\n            bindValue=\"countryCode\"\n            notFoundText=\"\"\n            formControlName=\"countryCode\"\n            appendTo=\"body\"\n            [clearable]=\"false\"\n            [items]=\"codeNumberInfos\"\n            [searchFn]=\"phoneNumberCodeSearchFn\"\n            (blur)=\"onTouched()\">\n            <ng-template\n                let-item=\"item\"\n                ng-label-tmp>\n                @if (item && item.countryCode) {\n                    <div class=\"flag\">\n                        @if (!!flagsBucketUrl) {\n                            <img\n                                width=\"24\"\n                                height=\"16\"\n                                alt=\"flag\"\n                                [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                        } @else {\n                            <span>{{ item.countryCode }}</span>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template\n                let-item=\"item\"\n                let-item$=\"item$\"\n                ng-option-tmp>\n                <ap-dropdown-item-single-one-line\n                    [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                    [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                    [selected]=\"item$.selected\"\n                    [roundedAvatar]=\"false\"\n                />\n            </ng-template>\n            <ng-template\n                let-searchTerm=\"searchTerm\"\n                ng-header-tmp>\n                <ap-dropdown-search-form\n                  [searchPlaceholder]=\"searchPlaceholder\"\n                  [select]=\"select\"\n                />\n              </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @if (formGroup.controls.countryCode.value && countryCodeMappedPhoneNumberInfos) {\n            <ap-input-prefix>{{countryCodeMappedPhoneNumberInfos[formGroup.controls.countryCode.value]?.phoneNumberCode}}</ap-input-prefix>\n        }\n        <input\n                apInput\n                class=\"phone-field\"\n                data-test=\"subscription-billing-infos-phoneNumberInput\"\n                type=\"text\"\n                data-recurly=\"phone\"\n                formControlName=\"phoneNumber\"\n                [placeholder]=\"placeholder\"\n                [attr.name]=\"name\"\n                (beforeinput)=\"filterChars($event)\"\n                (blur)=\"onTouched()\"\n        />\n    </ap-input-group>\n</ng-container>\n", styles: ["ng-dropdown-panel.ap-phone-number-code-select{width:auto!important;min-width:310px!important;max-width:310px}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line .option{display:flex;flex-direction:row;align-items:center}ng-dropdown-panel.ap-phone-number-code-select ap-dropdown-item-single-one-line ap-avatar{border:0;max-height:16px;min-height:16px;height:initial;box-shadow:unset;overflow:hidden;background:none}ap-phone-number-input{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--ref-spacing-xxs)}ap-phone-number-input .ap-phone-number-code-select{flex:0 0 70px;width:70px}ap-phone-number-input .ap-phone-number-code-select .flag{display:flex;flex-direction:row;align-items:center;justify-content:center;overflow:hidden}ap-phone-number-input .ap-phone-number-code-select .flag img{max-height:16px;max-width:24px;object-fit:cover;border-radius:4px;object-position:center center}ap-phone-number-input .ap-phone-number-code-select .ng-input{padding:2px var(--ref-spacing-sm)}ap-phone-number-input .ap-phone-number-code-select .ng-input input{display:none}ap-phone-number-input .phone-number-input-group{flex:1 0 auto}\n"] }]
         }], ctorParameters: () => [{ type: i1.SymbolRegistry }], propDecorators: { errorsDisplayForced: [{
                 type: Input
             }], flagsBucketUrl: [{
@@ -159,8 +173,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
             }], phoneNumberInfos: [{
                 type: Input,
                 args: [{ required: true }]
-            }], initialCountryCode: [{
-                type: Input
             }], name: [{
                 type: Input,
                 args: [{ required: true }]
@@ -174,6 +186,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImpor
                 type: Input
             }], phoneNumberCode: [{
                 type: Input
+            }], initialCountryCode: [{
+                type: Input
             }], changePhoneNumber: [{
                 type: Output
             }], changePhoneNumberCode: [{

package/fesm2022/agorapulse-ui-components-phone-number-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-phone-number-input.mjs","sources":["../../../libs/ui-components/phone-number-input/src/phone-number-input.component.ts","../../../libs/ui-components/phone-number-input/src/phone-number-input.component.html","../../../libs/ui-components/phone-number-input/src/agorapulse-ui-components-phone-number-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport {Component, DestroyRef, EventEmitter, forwardRef, inject, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';\nimport {\n    ControlValueAccessor,\n    FormControl,\n    FormGroup,\n    FormsModule,\n    NG_VALIDATORS,\n    NG_VALUE_ACCESSOR,\n    ReactiveFormsModule,\n    ValidationErrors,\n    Validator,\n    Validators,\n} from '@angular/forms';\nimport {CommonModule, NgOptimizedImage} from '@angular/common';\nimport {NgSelectModule} from '@ng-select/ng-select';\nimport {InputGroupComponent, InputPrefixComponent} from \"@agorapulse/ui-components/input-group\";\nimport {DropdownItemSingleOneLineComponent, DropdownSearchFormComponent, SelectBaseDirective} from \"@agorapulse/ui-components/select\";\nimport {InputDirective} from \"@agorapulse/ui-components/input\";\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { apCheck, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nexport interface PhoneNumberInfo {\n    countryCode: string;\n    countryName: string;\n    phoneNumberCode: string;\n}\n\nexport interface Phone {\n    phoneNumber: string;\n    phoneNumberCode: string;\n}\n\nconst NUMBER_ONLY_PATTERN = /[0-9]/;\n\n@Component({\n    selector: 'ap-phone-number-input',\n    templateUrl: 'phone-number-input.component.html',\n    styleUrls: ['phone-number-input.component.scss'],\n    standalone: true,\n    imports: [\n        CommonModule,\n        FormsModule,\n        NgSelectModule,\n        InputGroupComponent,\n        SelectBaseDirective,\n        InputDirective,\n        InputPrefixComponent,\n        DropdownItemSingleOneLineComponent,\n        ReactiveFormsModule,\n        NgOptimizedImage,\n        DropdownSearchFormComponent\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => PhoneNumberInputComponent),\n            multi: true,\n        },\n        {\n            provide: NG_VALIDATORS,\n            useExisting: forwardRef(() => PhoneNumberInputComponent),\n            multi: true,\n        },\n    ],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator, OnInit {\n    private readonly destroyRef = inject(DestroyRef);\n\n    @Input() set errorsDisplayForced(errorsDisplayForced: boolean) {\n        if (errorsDisplayForced) {\n            this.formGroup.markAllAsTouched();\n            Object.values(this.formGroup.controls).forEach((control) => control.markAsDirty());\n            this.formGroup.updateValueAndValidity();\n        }\n    }\n    @Input({ required: true }) flagsBucketUrl!: string;\n    @Input({ required: true }) set phoneNumberInfos(phoneNumberInfos: PhoneNumberInfo[]) {\n        this.codeNumberInfos = phoneNumberInfos ?? [];\n        if (phoneNumberInfos.length > 0) {\n            // DS Behavior: select by default the first phone number code\n            const defaultValue = phoneNumberInfos[0].phoneNumberCode;\n            this.formGroup.controls.phoneNumberCode.setValue(defaultValue);\n            this.phoneNumberCode = defaultValue;\n        }\n    }\n    @Input() set initialCountryCode(initialCountryCode: string) {\n        const firstValue = this.codeNumberInfos.find((codeInfo) => codeInfo.countryCode === initialCountryCode)?.phoneNumberCode;\n        if (firstValue) {\n            this.formGroup.patchValue({ phoneNumberCode: firstValue });\n        }\n    }\n    codeNumberInfos: PhoneNumberInfo[] = [];\n    @Input({ required: true }) name!: string;\n    @Input({ required: true }) placeholder!: string;\n    @Input({ required: true }) searchPlaceholder!: string;\n    @Input() set phoneNumber(phoneNumber: string) {\n        this.formGroup.controls.phoneNumber.setValue(phoneNumber);\n    }\n    @Input() set phoneNumberCode(phoneNumberCode: string) {\n        this.formGroup.controls.phoneNumberCode.setValue(phoneNumberCode);\n    }\n\n    @Output() changePhoneNumber: EventEmitter<string> = new EventEmitter<string>();\n    @Output() changePhoneNumberCode: EventEmitter<string> = new EventEmitter<string>();\n\n    formGroup = new FormGroup({\n        phoneNumberCode: new FormControl<string>('', [Validators.required]),\n        phoneNumber: new FormControl<string>('', [Validators.required]),\n    });\n\n    public onTouched: any = () => {};\n    public onChange: any = () => {};\n\n    constructor(symbolRegistry: SymbolRegistry) {\n        symbolRegistry.registerSymbols([apCheck]);\n    }\n\n    ngOnInit(): void {\n        // Subscribe to form changes to propagate them to the parent component\n        this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {\n            if (this.onChange) {\n                this.onChange(value);\n            }\n            if (value.phoneNumber !== this.phoneNumber) {\n                this.changePhoneNumber.emit(value.phoneNumber ?? '');\n            }\n            if (value.phoneNumberCode !== this.phoneNumberCode) {\n                this.changePhoneNumberCode.emit(value.phoneNumberCode ?? '');\n            }\n        });\n    }\n\n    registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n\n    validate(): ValidationErrors | null {\n        return this.formGroup.valid ? null : { phoneNumber: 'invalid', ...this.formGroup.errors };\n    }\n\n    writeValue(phone: Phone | null): void {\n        // Avoid setting an empty value for the phone number code, it should always have a value\n        if (phone === null || !phone.phoneNumberCode) {\n            this.formGroup.patchValue({phoneNumber: phone?.phoneNumberCode ?? ''});\n        } else {\n            this.formGroup.patchValue(phone);\n        }\n    }\n\n    phoneNumberCodeSearchFn(term: string, item: PhoneNumberInfo): boolean {\n        const termCased = term.toLocaleLowerCase();\n        return item.countryName.toLocaleLowerCase().indexOf(termCased) > -1 || item.countryCode.toLocaleLowerCase().indexOf(termCased) > -1;\n    }\n\n    markAsTouched(): void {\n        this.formGroup.markAllAsTouched();\n    }\n\n    /**\n     * Filter the phone number input to only allow numbers\n     */\n    filterChars(event: InputEvent): void {\n        if (event.inputType !== 'insertText') {\n            return;\n        }\n        const inputChar: string | null = event.data;\n        if (inputChar && !NUMBER_ONLY_PATTERN.test(inputChar)) {\n            event.preventDefault();\n        }\n    }\n}\n","<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n            #select\n            apSelectSingle\n            data-test=\"subscription-billing-infos-phoneNumberCode\"\n            class=\"ap-phone-number-code-select ap-select\"\n            bindLabel=\"countryName\"\n            bindValue=\"phoneNumberCode\"\n            notFoundText=\"\"\n            formControlName=\"phoneNumberCode\"\n            appendTo=\"body\"\n            [clearable]=\"false\"\n            [items]=\"codeNumberInfos\"\n            [searchFn]=\"phoneNumberCodeSearchFn\"\n            (blur)=\"onTouched()\">\n            <ng-template\n                let-item=\"item\"\n                ng-label-tmp>\n                @if (item && item.countryCode) {\n                    <div class=\"flag\">\n                        @if (!!flagsBucketUrl) {\n                            <img\n                                width=\"24\"\n                                height=\"16\"\n                                alt=\"flag\"\n                                [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                        } @else {\n                            <span>{{ item.countryCode }}</span>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template\n                let-item=\"item\"\n                let-item$=\"item$\"\n                ng-option-tmp>\n                <ap-dropdown-item-single-one-line\n                    [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                    [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                    [selected]=\"item$.selected\"\n                    [roundedAvatar]=\"false\"\n                />\n            </ng-template>\n            <ng-template\n                let-searchTerm=\"searchTerm\"\n                ng-header-tmp>\n                <ap-dropdown-search-form\n                  [searchPlaceholder]=\"searchPlaceholder\"\n                  [select]=\"select\"\n                />\n              </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        <ap-input-prefix>{{formGroup.controls.phoneNumberCode.value}}</ap-input-prefix>\n        <input\n                apInput\n                class=\"phone-field\"\n                data-test=\"subscription-billing-infos-phoneNumberInput\"\n                type=\"text\"\n                data-recurly=\"phone\"\n                formControlName=\"phoneNumber\"\n                [placeholder]=\"placeholder\"\n                [attr.name]=\"name\"\n                (beforeinput)=\"filterChars($event)\"\n                (blur)=\"onTouched()\"\n        />\n    </ap-input-group>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"agorapulse-ui-components-phone-number-input.mjs","sources":["../../../libs/ui-components/phone-number-input/src/phone-number-input.component.ts","../../../libs/ui-components/phone-number-input/src/phone-number-input.component.html","../../../libs/ui-components/phone-number-input/src/agorapulse-ui-components-phone-number-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport {Component, DestroyRef, EventEmitter, forwardRef, inject, Input, OnInit, Output, ViewEncapsulation} from '@angular/core';\nimport {\n    ControlValueAccessor,\n    FormControl,\n    FormGroup,\n    FormsModule,\n    NG_VALIDATORS,\n    NG_VALUE_ACCESSOR,\n    ReactiveFormsModule,\n    ValidationErrors,\n    Validator,\n    Validators,\n} from '@angular/forms';\nimport {CommonModule, NgOptimizedImage} from '@angular/common';\nimport {NgSelectModule} from '@ng-select/ng-select';\nimport {InputGroupComponent, InputPrefixComponent} from \"@agorapulse/ui-components/input-group\";\nimport {DropdownItemSingleOneLineComponent, DropdownSearchFormComponent, SelectBaseDirective} from \"@agorapulse/ui-components/select\";\nimport {InputDirective} from \"@agorapulse/ui-components/input\";\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\nimport { apCheck, SymbolRegistry } from '@agorapulse/ui-symbol';\n\nexport interface PhoneNumberInfo {\n    countryCode: string;\n    countryName: string;\n    phoneNumberCode: string;\n}\n\nexport interface Phone {\n    phoneNumber: string;\n    phoneNumberCode: string;\n}\n\nconst NUMBER_ONLY_PATTERN = /[0-9]/;\n\nconst DEFAULT_COUNTRY_CODE = 'US';\nconst DEFAULT_PHONE_NUMBER_CODE = '+1';\n\n@Component({\n    selector: 'ap-phone-number-input',\n    templateUrl: 'phone-number-input.component.html',\n    styleUrls: ['phone-number-input.component.scss'],\n    standalone: true,\n    imports: [\n        CommonModule,\n        FormsModule,\n        NgSelectModule,\n        InputGroupComponent,\n        SelectBaseDirective,\n        InputDirective,\n        InputPrefixComponent,\n        DropdownItemSingleOneLineComponent,\n        ReactiveFormsModule,\n        NgOptimizedImage,\n        DropdownSearchFormComponent\n    ],\n    providers: [\n        {\n            provide: NG_VALUE_ACCESSOR,\n            useExisting: forwardRef(() => PhoneNumberInputComponent),\n            multi: true,\n        },\n        {\n            provide: NG_VALIDATORS,\n            useExisting: forwardRef(() => PhoneNumberInputComponent),\n            multi: true,\n        },\n    ],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator, OnInit {\n    private readonly destroyRef = inject(DestroyRef);\n\n    @Input() set errorsDisplayForced(errorsDisplayForced: boolean) {\n        if (errorsDisplayForced) {\n            this.formGroup.markAllAsTouched();\n            Object.values(this.formGroup.controls).forEach((control) => control.markAsDirty());\n            this.formGroup.updateValueAndValidity();\n        }\n    }\n    @Input({ required: true }) flagsBucketUrl!: string;\n    @Input({ required: true }) set phoneNumberInfos(phoneNumberInfos: PhoneNumberInfo[]) {\n        this.codeNumberInfos = phoneNumberInfos ?? [];\n        this.countryCodeMappedPhoneNumberInfos = phoneNumberInfos.reduce((acc, phoneNumberInfo) => {\n            acc[phoneNumberInfo.countryCode as string] = phoneNumberInfo;\n            return acc;\n        }, {} as Record<string, PhoneNumberInfo>);\n    }\n    codeNumberInfos: PhoneNumberInfo[] = [];\n    countryCodeMappedPhoneNumberInfos: Record<string, PhoneNumberInfo> = {};\n\n    @Input({ required: true }) name!: string;\n    @Input({ required: true }) placeholder!: string;\n    @Input({ required: true }) searchPlaceholder!: string;\n    @Input() set phoneNumber(phoneNumber: string) {\n        this.formGroup.controls.phoneNumber.setValue(phoneNumber);\n    }\n    @Input() set phoneNumberCode(phoneNumberCode: string) {\n        this.formGroup.controls.countryCode.setValue(phoneNumberCode);\n    }\n    @Input() set initialCountryCode(initialCountryCode: string) {\n        const firstValue = this.findPhoneNumberInfoByCountryCode(initialCountryCode)?.countryCode;\n        if (firstValue) {\n            this.formGroup.patchValue({ countryCode: firstValue });\n        }\n    }\n\n    @Output() changePhoneNumber: EventEmitter<string> = new EventEmitter<string>();\n    @Output() changePhoneNumberCode: EventEmitter<string> = new EventEmitter<string>();\n\n    formGroup = new FormGroup({\n        countryCode: new FormControl<string>(DEFAULT_COUNTRY_CODE, [Validators.required]),\n        phoneNumber: new FormControl<string>('', [Validators.required]),\n    });\n\n    public onTouched: any = () => {};\n    public onChange: any = () => {};\n\n    constructor(symbolRegistry: SymbolRegistry) {\n        symbolRegistry.registerSymbols([apCheck]);\n    }\n\n    ngOnInit(): void {\n        // Subscribe to form changes to propagate them to the parent component\n        this.formGroup.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe((value) => {\n            let phoneNumberCode = DEFAULT_PHONE_NUMBER_CODE;\n            if (value.countryCode) {\n                const phoneNumberInfo = this.findPhoneNumberInfoByCountryCode(value.countryCode);\n                if (phoneNumberInfo) {\n                    phoneNumberCode = phoneNumberInfo.phoneNumberCode;\n                }\n            }\n            if (this.onChange && phoneNumberCode) {\n                this.onChange({\n                    phoneNumber: value.phoneNumber,\n                    phoneNumberCode,\n                });\n            }\n            if (value.phoneNumber !== this.phoneNumber) {\n                this.changePhoneNumber.emit(value.phoneNumber ?? '');\n            }\n            if (phoneNumberCode !== this.phoneNumberCode) {\n                this.changePhoneNumberCode.emit(phoneNumberCode ?? '');\n            }\n        });\n    }\n\n    registerOnChange(fn: any): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: any): void {\n        this.onTouched = fn;\n    }\n\n    validate(): ValidationErrors | null {\n        return this.formGroup.valid ? null : { phoneNumber: 'invalid', ...this.formGroup.errors };\n    }\n\n    writeValue(phone: Phone | null): void {\n        // Avoid setting an empty value for the phone number code, it should always have a value\n        if (phone === null || !phone.phoneNumberCode) {\n            this.formGroup.patchValue({phoneNumber: phone?.phoneNumberCode ?? ''});\n        } else {\n            this.formGroup.patchValue(phone);\n        }\n    }\n\n    phoneNumberCodeSearchFn(term: string, item: PhoneNumberInfo): boolean {\n        const termCased = term.toLocaleLowerCase();\n        return item.countryName.toLocaleLowerCase().indexOf(termCased) > -1 || item.countryCode.toLocaleLowerCase().indexOf(termCased) > -1;\n    }\n\n    markAsTouched(): void {\n        this.formGroup.markAllAsTouched();\n    }\n\n    /**\n     * Filter the phone number input to only allow numbers\n     */\n    filterChars(event: InputEvent): void {\n        if (event.inputType !== 'insertText') {\n            return;\n        }\n        const inputChar: string | null = event.data;\n        if (inputChar && !NUMBER_ONLY_PATTERN.test(inputChar)) {\n            event.preventDefault();\n        }\n    }\n\n    private findPhoneNumberInfoByCountryCode(countryCode: string): PhoneNumberInfo | undefined {\n        return this.codeNumberInfos.find((codeInfo) => codeInfo.countryCode === countryCode);\n    }\n}\n","<ng-container [formGroup]=\"formGroup\">\n    <ng-select\n            #select\n            apSelectSingle\n            data-test=\"subscription-billing-infos-phoneNumberCode\"\n            class=\"ap-phone-number-code-select ap-select\"\n            bindLabel=\"countryName\"\n            bindValue=\"countryCode\"\n            notFoundText=\"\"\n            formControlName=\"countryCode\"\n            appendTo=\"body\"\n            [clearable]=\"false\"\n            [items]=\"codeNumberInfos\"\n            [searchFn]=\"phoneNumberCodeSearchFn\"\n            (blur)=\"onTouched()\">\n            <ng-template\n                let-item=\"item\"\n                ng-label-tmp>\n                @if (item && item.countryCode) {\n                    <div class=\"flag\">\n                        @if (!!flagsBucketUrl) {\n                            <img\n                                width=\"24\"\n                                height=\"16\"\n                                alt=\"flag\"\n                                [ngSrc]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\" />\n                        } @else {\n                            <span>{{ item.countryCode }}</span>\n                        }\n                    </div>\n                }\n            </ng-template>\n            <ng-template\n                let-item=\"item\"\n                let-item$=\"item$\"\n                ng-option-tmp>\n                <ap-dropdown-item-single-one-line\n                    [text]=\"item.phoneNumberCode + ' ' + item.countryName\"\n                    [avatarUrl]=\"flagsBucketUrl + '/' + item.countryCode.toUpperCase() + '.png'\"\n                    [selected]=\"item$.selected\"\n                    [roundedAvatar]=\"false\"\n                />\n            </ng-template>\n            <ng-template\n                let-searchTerm=\"searchTerm\"\n                ng-header-tmp>\n                <ap-dropdown-search-form\n                  [searchPlaceholder]=\"searchPlaceholder\"\n                  [select]=\"select\"\n                />\n              </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @if (formGroup.controls.countryCode.value && countryCodeMappedPhoneNumberInfos) {\n            <ap-input-prefix>{{countryCodeMappedPhoneNumberInfos[formGroup.controls.countryCode.value]?.phoneNumberCode}}</ap-input-prefix>\n        }\n        <input\n                apInput\n                class=\"phone-field\"\n                data-test=\"subscription-billing-infos-phoneNumberInput\"\n                type=\"text\"\n                data-recurly=\"phone\"\n                formControlName=\"phoneNumber\"\n                [placeholder]=\"placeholder\"\n                [attr.name]=\"name\"\n                (beforeinput)=\"filterChars($event)\"\n                (blur)=\"onTouched()\"\n        />\n    </ap-input-group>\n</ng-container>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

@@ -91,7 +91,7 @@ class DropdownItemMultipleOneLineComponent {
         this.checkbox.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemMultipleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <span\n            class=\"option-item\"\n            [class.feature-locked-label]=\"isFeatureLocked()\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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}ap-dropdown-item-multiple-one-line .option-item{width:100%}\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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemMultipleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        #checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <span\n            class=\"option-item\"\n            [class.feature-locked-label]=\"isFeatureLocked()\"\n            [title]=\"text\">\n            {{ text }}\n        </span>\n        @if (badgeText) {\n            <ap-badge color=\"blue\">\n                {{ badgeText }}\n            </ap-badge>\n        }\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled && !isFeatureLocked()) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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}ap-dropdown-item-multiple-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemMultipleOneLineComponent, decorators: [{
             type: Component,
@@ -160,7 +160,7 @@ class DropdownItemMultipleTwoLinesComponent {
         this.checkbox.focus();
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemMultipleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-multiple-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, htmlId: { classPropertyName: "htmlId", publicName: "htmlId", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyEnabled: { classPropertyName: "onlyEnabled", publicName: "onlyEnabled", isSignal: false, isRequired: false, transformFunction: null }, onlyText: { classPropertyName: "onlyText", publicName: "onlyText", isSignal: false, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectOnly: "selectOnly", lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, 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\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    <ap-checkbox\n        [checked]=\"selected\"\n        [disabled]=\"disabled || isFeatureLocked()\"\n        [name]=\"'option-selection-' + htmlId\">\n        @if (avatarUrl !== undefined) {\n            <ap-avatar\n                [rounded]=\"roundedAvatar()\"\n                [size]=\"24\"\n                [profilePicture]=\"avatarUrl\"\n                [username]=\"text\"\n                [showInitials]=\"true\" />\n        }\n        @if (symbolId) {\n            <ap-symbol\n                size=\"sm\"\n                [symbolId]=\"symbolId\" />\n        }\n        <div class=\"texts\" [class.feature-locked-label]=\"isFeatureLocked()\">\n            <div class=\"first-line\">\n                <span\n                    class=\"label\"\n\n                    [title]=\"text\">\n                    {{ text }}\n                </span>\n                @if (badgeText) {\n                    <ap-badge color=\"blue\">\n                        {{ badgeText }}\n                    </ap-badge>\n                }\n            </div>\n            <span\n                class=\"caption\"\n                [title]=\"caption\">\n                {{ caption }}\n            </span>\n        </div>\n\n        @if (isFeatureLocked()) {\n            <ap-symbol\n                symbolId=\"feature-lock\"\n                color=\"purple\"\n                size=\"sm\"/>\n        }\n\n        @if (onlyEnabled && !disabled) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"$event.preventDefault(); $event.stopPropagation(); onSelectOnly()\">\n                {{ onlyText }}\n            </button>\n        }\n    </ap-checkbox>\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: CheckboxComponent, selector: "ap-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "disabled", "indeterminate", "checked", "required", "name"], outputs: ["change"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemMultipleTwoLinesComponent, decorators: [{
             type: Component,
@@ -224,7 +224,7 @@ class DropdownItemSingleOneLineComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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}ap-dropdown-item-single-one-line .option-item{width:100%}\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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemSingleOneLineComponent, isStandalone: true, selector: "ap-dropdown-item-single-one-line", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"showAvatarInitials\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <span\n        class=\"option-item\"\n        [title]=\"text\">\n        {{ text }}\n    </span>\n    @if (badgeText) {\n        <ap-badge color=\"blue\">\n            {{ badgeText }}\n        </ap-badge>\n    }\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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}ap-dropdown-item-single-one-line .option-item{width:100%}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
             type: Component,
@@ -277,7 +277,7 @@ class DropdownItemSingleTwoLinesComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: DropdownItemSingleTwoLinesComponent, isStandalone: true, selector: "ap-dropdown-item-single-two-lines", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: false, isRequired: true, transformFunction: null }, caption: { classPropertyName: "caption", publicName: "caption", isSignal: false, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: false, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: false, isRequired: false, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, symbolId: { classPropertyName: "symbolId", publicName: "symbolId", isSignal: false, isRequired: false, transformFunction: null }, disabledTooltip: { classPropertyName: "disabledTooltip", publicName: "disabledTooltip", isSignal: false, isRequired: false, transformFunction: null }, badgeText: { classPropertyName: "badgeText", publicName: "badgeText", isSignal: false, isRequired: false, transformFunction: null }, dividerEnabled: { classPropertyName: "dividerEnabled", publicName: "dividerEnabled", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null }, isFeatureLocked: { classPropertyName: "isFeatureLocked", publicName: "isFeatureLocked", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" } }, ngImport: i0, template: "<div\n    class=\"disabled-opaque\"\n    [apTooltip]=\"disabledTooltip\"\n    [apTooltipDisabled]=\"!disabled\"></div>\n<div class=\"option with-caption\" [class.feature-locked-option]=\"isFeatureLocked()\">\n    @if (avatarUrl !== undefined) {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [profilePicture]=\"avatarUrl\"\n            [username]=\"text\"\n            [showInitials]=\"true\"\n            [network]=\"network\" />\n    }\n    @if (symbolId) {\n        <ap-symbol\n            size=\"sm\"\n            [symbolId]=\"symbolId\" />\n    }\n    <div class=\"texts\">\n        <div class=\"first-line\">\n            <span\n                class=\"label\"\n                [title]=\"text\">\n                {{ text }}\n            </span>\n            @if (badgeText) {\n                <ap-badge color=\"blue\">\n                    {{ badgeText }}\n                </ap-badge>\n            }\n        </div>\n        <span\n            class=\"caption\"\n            [title]=\"caption\">\n            {{ caption }}\n        </span>\n    </div>\n    @if (isFeatureLocked()) {\n        <ap-symbol\n            symbolId=\"feature-lock\"\n            color=\"purple\"\n            size=\"sm\"/>\n    } @else if (selected) {\n        <ap-symbol\n            class=\"option-selected\"\n            symbolId=\"check\"\n            color=\"electric-blue\"\n            size=\"sm\" />\n    }\n</div>\n@if (dividerEnabled) {\n    <div class=\"divider\"></div>\n}\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: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: BadgeComponent, selector: "ap-badge", inputs: ["color"] }, { kind: "directive", type: TooltipDirective, selector: "[apTooltip]", inputs: ["apTooltip", "apTooltipPosition", "apTooltipShowDelay", "apTooltipHideDelay", "apTooltipDuration", "apTooltipDisabled", "apTooltipTruncatedTextOnly", "apTooltipTemplateContext", "apTooltipVirtualScrollElement"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownItemSingleTwoLinesComponent, decorators: [{
             type: Component,
@@ -367,7 +367,7 @@ class DropdownSearchFormComponent {
         this.createNew.emit(this.searchTermSignal());
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownSearchFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: InputSearchComponent, 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-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\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=\"plus\"\n            size=\"sm\" />\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: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", 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: InputSearchComponent, 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-search\n    class=\"dropdown-search-input\"\n    [ngModel]=\"searchTermSignal()\"\n    [placeholder]=\"searchPlaceholder\"\n    (ngModelChange)=\"searchTerm$.next($event)\" />\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=\"plus\"\n            size=\"sm\" />\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: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "component", type: InputSearchComponent, selector: "ap-input-search", inputs: ["id", "placeholder", "clearable"], outputs: ["focus", "blur", "keyup"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: DropdownSearchFormComponent, decorators: [{
             type: Component,
@@ -481,7 +481,7 @@ class SelectLabelMultipleComponent {
         this.hiddenCount.set(hiddenCount);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                class=\"item\"\n                color=\"blue\"\n                removable=\"true\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"item text-item\"\n                clearable=\"true\"\n                color=\"grey\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\" />\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                color=\"grey\"\n                clearable=\"false\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"], dependencies: [{ 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: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, selectedItems: { classPropertyName: "selectedItems", publicName: "selectedItems", isSignal: true, isRequired: true, transformFunction: null }, bindLabel: { classPropertyName: "bindLabel", publicName: "bindLabel", isSignal: true, isRequired: false, transformFunction: null }, bindValue: { classPropertyName: "bindValue", publicName: "bindValue", isSignal: true, isRequired: false, transformFunction: null }, bindAvatarUrl: { classPropertyName: "bindAvatarUrl", publicName: "bindAvatarUrl", isSignal: true, isRequired: false, transformFunction: null }, bindSymbolId: { classPropertyName: "bindSymbolId", publicName: "bindSymbolId", isSignal: true, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                class=\"item\"\n                color=\"blue\"\n                removable=\"true\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"item text-item\"\n                clearable=\"true\"\n                color=\"grey\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\" />\n                } @else if (item.symbolId) {\n                    <ap-symbol\n                        size=\"sm\"\n                        [attr.symbol-id]=\"item.symbolId\"\n                        [symbolId]=\"item.symbolId\" />\n                }\n                {{ item.label }}\n            </ap-tag>\n        }\n    }\n</div>\n\n@if (hiddenCount() > 0) {\n    <div class=\"remaining\">\n        @if (displayType() === 'tag') {\n            <ap-tag\n                class=\"text-item\"\n                color=\"grey\"\n                clearable=\"false\">\n                +{{ hiddenCount() }}\n            </ap-tag>\n        }\n        @if (displayType() === 'label') {\n            <ap-label\n                color=\"blue\"\n                removable=\"false\"\n                [content]=\"'+' + hiddenCount()\" />\n        }\n    </div>\n}\n", styles: ["ap-select-label-multiple{display:flex}\n"], dependencies: [{ 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: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }, { kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectLabelMultipleComponent, decorators: [{
             type: Component,
@@ -496,7 +496,7 @@ class SelectLabelSingleComponent {
     showAvatarInitials = true;
     roundedAvatar = input(true);
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectLabelSingleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label\">\n            {{ label }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl\" />\n            }\n            {{ label }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"showAvatarInitials\"\n            [profilePicture]=\"avatarUrl\"\n            [network]=\"network\" />\n        <span class=\"text-item\">\n            {{ label }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ 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 ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: SelectLabelSingleComponent, isStandalone: true, selector: "ap-select-label-single", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: false, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: false, isRequired: true, transformFunction: null }, avatarUrl: { classPropertyName: "avatarUrl", publicName: "avatarUrl", isSignal: false, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: false, isRequired: false, transformFunction: null }, showAvatarInitials: { classPropertyName: "showAvatarInitials", publicName: "showAvatarInitials", isSignal: false, isRequired: false, transformFunction: null }, roundedAvatar: { classPropertyName: "roundedAvatar", publicName: "roundedAvatar", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@switch (displayType) {\n    @case ('text') {\n        <span\n            class=\"text-item\"\n            [title]=\"label\">\n            {{ label }}\n        </span>\n    }\n    @case ('label') {\n        <ap-label\n            color=\"blue\"\n            [removable]=\"false\"\n            [content]=\"label\" />\n    }\n    @case ('tag') {\n        <ap-tag\n            class=\"text-item\"\n            color=\"grey\">\n            @if (avatarUrl !== undefined) {\n                <ap-avatar\n                    [rounded]=\"roundedAvatar()\"\n                    [size]=\"16\"\n                    [username]=\"label\"\n                    [showInitials]=\"true\"\n                    [profilePicture]=\"avatarUrl\" />\n            }\n            {{ label }}\n        </ap-tag>\n    }\n    @case ('withAvatar') {\n        <ap-avatar\n            [rounded]=\"roundedAvatar()\"\n            [size]=\"24\"\n            [username]=\"label\"\n            [showInitials]=\"showAvatarInitials\"\n            [profilePicture]=\"avatarUrl\"\n            [network]=\"network\" />\n        <span class=\"text-item\">\n            {{ label }}\n        </span>\n    }\n}\n", styles: ["ap-select-label-single{display:flex;gap:var(--ref-spacing-xxs);width:100%;align-items:center}\n"], dependencies: [{ 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: ["profilePicture", "alt", "network", "size", "username", "showInitials", "bigNetwork", "anonymous", "online", "youtubeAvatarMode", "rounded"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: SelectLabelSingleComponent, decorators: [{
             type: Component,
@@ -551,7 +551,7 @@ class SelectBaseDirective {
     }
     addInlineSymbol(symbolId) {
         const componentRef = this.viewContainerRef.createComponent(SymbolComponent);
-        componentRef.instance.symbolId = symbolId;
+        componentRef.setInput('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));