@agorapulse/ui-components 22.0.1 → 22.0.3

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 { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent, InputPrefixComponent } from '@agorapulse/ui-components/input-group';\nimport { DropdownItemSingleOneLineComponent, DropdownSearchFormComponent, SelectBaseDirective } from '@agorapulse/ui-components/select';\nimport { apCheck, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { NgOptimizedImage } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    DestroyRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnInit,\n    Output,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\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 { NgSelectModule } from '@ng-select/ng-select';\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    imports: [\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    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator, OnInit {\n    private readonly destroyRef = inject(DestroyRef);\n    private readonly cdr = inject(ChangeDetectorRef);\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(\n            (acc, phoneNumberInfo) => {\n                acc[phoneNumberInfo.countryCode as string] = phoneNumberInfo;\n                return acc;\n            },\n            {} as Record<string, PhoneNumberInfo>\n        );\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            this.cdr.markForCheck();\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        </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        </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @let countryCode = formGroup.controls.countryCode.value;\n        @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n        @if (phoneNumberCode) {\n            <ap-input-prefix>{{ 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    </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 { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent, InputPrefixComponent } from '@agorapulse/ui-components/input-group';\nimport { DropdownItemSingleOneLineComponent, DropdownSearchFormComponent, SelectBaseDirective } from '@agorapulse/ui-components/select';\nimport { apCheck, SymbolRegistry } from '@agorapulse/ui-symbol';\nimport { NgOptimizedImage } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    ChangeDetectorRef,\n    Component,\n    DestroyRef,\n    EventEmitter,\n    forwardRef,\n    inject,\n    Input,\n    OnInit,\n    Output,\n    ViewEncapsulation,\n} from '@angular/core';\nimport { takeUntilDestroyed } from '@angular/core/rxjs-interop';\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 { NgSelectModule } from '@ng-select/ng-select';\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    imports: [\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    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class PhoneNumberInputComponent implements ControlValueAccessor, Validator, OnInit {\n    private readonly destroyRef = inject(DestroyRef);\n    private readonly cdr = inject(ChangeDetectorRef);\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(\n            (acc, phoneNumberInfo) => {\n                acc[phoneNumberInfo.countryCode as string] = phoneNumberInfo;\n                return acc;\n            },\n            {} as Record<string, PhoneNumberInfo>\n        );\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            this.cdr.markForCheck();\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        </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        </ng-template>\n    </ng-select>\n    <ap-input-group class=\"phone-number-input-group\">\n        @let countryCode = formGroup.controls.countryCode.value;\n        @let phoneNumberCode = countryCode ? countryCodeMappedPhoneNumberInfos[countryCode]?.phoneNumberCode : '';\n\n        @if (phoneNumberCode) {\n            <ap-input-prefix>{{ 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    </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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, ElementRef, Renderer2, ViewContainerRef, effect, Directive, HostListener, ViewChild, EventEmitter, Output, signal, computed, viewChild, viewChildren, afterRenderEffect, NgModule } from '@angular/core';
+import { inject, input, output, ViewEncapsulation, ChangeDetectionStrategy, Component, Input, ElementRef, Renderer2, ViewContainerRef, effect, Directive, HostListener, ViewChild, EventEmitter, Output, signal, computed, viewChild, viewChildren, afterRenderEffect, afterNextRender, NgModule } from '@angular/core';
 import { NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';
 import { SymbolRegistry, apPlus, SymbolComponent, apCheck } from '@agorapulse/ui-symbol';
 import { BadgeComponent } from '@agorapulse/ui-components/badge';
@@ -500,6 +500,9 @@ class DropdownItemSingleOneLineComponent {
     ...(ngDevMode ? [{ debugName: "roundedAvatar" }] : /* istanbul ignore next */ []));
     isFeatureLocked = input(false, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isFeatureLocked" }] : /* istanbul ignore next */ []));
+    /** Gives the row its own option chrome. Off by default: inside `<ng-select>`, `.ng-option` already has it. */
+    standaloneModeEnabled = input(false, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "standaloneModeEnabled" }] : /* istanbul ignore next */ []));
     lockedFeatureClicked = output();
     onClick($event) {
         if (this.isFeatureLocked()) {
@@ -508,11 +511,15 @@ class DropdownItemSingleOneLineComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownItemSingleOneLineComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", 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 }, standaloneModeEnabled: { classPropertyName: "standaloneModeEnabled", publicName: "standaloneModeEnabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { lockedFeatureClicked: "lockedFeatureClicked" }, host: { listeners: { "click": "onClick($event)" }, properties: { "class.standalone-mode": "standaloneModeEnabled()", "class.selected": "standaloneModeEnabled() && selected", "class.disabled": "standaloneModeEnabled() && disabled" } }, 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%}ap-dropdown-item-single-one-line.standalone-mode{display:block;width:100%;box-sizing:border-box;background-color:var(--comp-select-one-line-background-color);color:var(--comp-select-one-line-text-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);text-align:left;cursor:pointer;transition:background-color .1s ease}ap-dropdown-item-single-one-line.standalone-mode .option{align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}ap-dropdown-item-single-one-line.standalone-mode:hover:not(.disabled){background-color:var(--ref-color-electric-blue-10)}ap-dropdown-item-single-one-line.standalone-mode:active:not(.disabled){background-color:var(--ref-color-electric-blue-20)}ap-dropdown-item-single-one-line.standalone-mode.selected{background-color:var(--ref-color-electric-blue-10);color:var(--sys-color-accent-text);font-weight:var(--comp-select-one-line-selected-text-font-weight)}ap-dropdown-item-single-one-line.standalone-mode.disabled{color:var(--ref-color-grey-40);cursor:default}\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", "apTooltipTrigger", "apTooltipType", "apTooltipPresentationContext", "apTooltipListItems", "apTooltipShowAvatarCaption"], exportAs: ["apTooltip"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: DropdownItemSingleOneLineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-dropdown-item-single-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], 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"] }]
+            args: [{ selector: 'ap-dropdown-item-single-one-line', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [SymbolComponent, AvatarComponent, BadgeComponent, TooltipDirective], host: {
+                        '[class.standalone-mode]': 'standaloneModeEnabled()',
+                        '[class.selected]': 'standaloneModeEnabled() && selected',
+                        '[class.disabled]': 'standaloneModeEnabled() && disabled',
+                    }, 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%}ap-dropdown-item-single-one-line.standalone-mode{display:block;width:100%;box-sizing:border-box;background-color:var(--comp-select-one-line-background-color);color:var(--comp-select-one-line-text-color);font-family:var(--comp-select-one-line-text-font-family);font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);line-height:var(--comp-select-one-line-text-line-height);text-align:left;cursor:pointer;transition:background-color .1s ease}ap-dropdown-item-single-one-line.standalone-mode .option{align-items:center;box-sizing:border-box;min-height:var(--comp-select-one-line-height);padding:var(--ref-spacing-xxs) var(--comp-select-one-line-padding-horizontal)}ap-dropdown-item-single-one-line.standalone-mode:hover:not(.disabled){background-color:var(--ref-color-electric-blue-10)}ap-dropdown-item-single-one-line.standalone-mode:active:not(.disabled){background-color:var(--ref-color-electric-blue-20)}ap-dropdown-item-single-one-line.standalone-mode.selected{background-color:var(--ref-color-electric-blue-10);color:var(--sys-color-accent-text);font-weight:var(--comp-select-one-line-selected-text-font-weight)}ap-dropdown-item-single-one-line.standalone-mode.disabled{color:var(--ref-color-grey-40);cursor:default}\n"] }]
         }], ctorParameters: () => [], propDecorators: { text: [{
                 type: Input,
                 args: [{ required: true }]
@@ -535,7 +542,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImpor
                 type: Input
             }], network: [{
                 type: Input
-            }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], isFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFeatureLocked", required: false }] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], onClick: [{
+            }], roundedAvatar: [{ type: i0.Input, args: [{ isSignal: true, alias: "roundedAvatar", required: false }] }], isFeatureLocked: [{ type: i0.Input, args: [{ isSignal: true, alias: "isFeatureLocked", required: false }] }], standaloneModeEnabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "standaloneModeEnabled", required: false }] }], lockedFeatureClicked: [{ type: i0.Output, args: ["lockedFeatureClicked"] }], onClick: [{
                 type: HostListener,
                 args: ['click', ['$event']]
             }] } });
@@ -738,6 +745,15 @@ class SelectLabelMultipleComponent {
         containerEl.style.maxWidth = `${totalWidth}px`;
         this.hiddenCount.set(hiddenCount);
     });
+    // Overflow is shown via the "+N" chip, so this field must never scroll horizontally.
+    // ng-select re-focuses its off-screen search input after every change; without this the
+    // browser would scroll that input into view and shove the chip row out of the field.
+    pinHorizontalScroll = afterNextRender(() => {
+        const container = this.mainContainer().nativeElement.closest('.ng-value-container');
+        if (!container)
+            return;
+        container.addEventListener('scroll', () => (container.scrollLeft = 0), { passive: true });
+    });
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SelectLabelMultipleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.5", type: SelectLabelMultipleComponent, isStandalone: true, selector: "ap-select-label-multiple", inputs: { displayType: { classPropertyName: "displayType", publicName: "displayType", isSignal: true, isRequired: false, transformFunction: null }, tagColor: { classPropertyName: "tagColor", publicName: "tagColor", 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 }, bindNetwork: { classPropertyName: "bindNetwork", publicName: "bindNetwork", isSignal: true, isRequired: false, transformFunction: null }, bindTagColor: { classPropertyName: "bindTagColor", publicName: "bindTagColor", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { removeItem: "removeItem" }, viewQueries: [{ propertyName: "mainContainer", first: true, predicate: ["mainContainer"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "itemsElement", predicate: ["itemElement"], descendants: true, read: ElementRef, isSignal: true }], ngImport: i0, template: "<div #mainContainer class=\"multiple-item\">\n    @for (item of selectedLabels(); track trackByItem($index, item)) {\n        @if (displayType() === 'label') {\n            <ap-label\n                #itemElement\n                class=\"item\"\n                color=\"blue\"\n                [removable]=\"!item.value.disabled && !selectDisabled()\"\n                [content]=\"item.label\"\n                (remove)=\"removeItem.emit(item.value)\" />\n        }\n\n        @if (displayType() === 'tag') {\n            <ap-tag\n                #itemElement\n                class=\"item text-item\"\n                [clearable]=\"!item.value.disabled && !selectDisabled()\"\n                [color]=\"item.tagColor ?? tagColor()\"\n                (clear)=\"removeItem.emit(item.value)\">\n                @if (item.avatarUrl || item.network) {\n                    <ap-avatar\n                        [size]=\"16\"\n                        [rounded]=\"roundedAvatar()\"\n                        [profilePicture]=\"item.avatarUrl\"\n                        [username]=\"item.label\"\n                        [showInitials]=\"true\"\n                        [network]=\"item.network\"/>\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                clearable=\"false\"\n                [color]=\"tagColor()\">\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;width:100%}\n"], dependencies: [{ kind: "component", type: LabelComponent, selector: "ap-label", inputs: ["content", "selectorWidth", "removable"], outputs: ["remove"] }, { kind: "component", type: TagComponent, selector: "ap-tag", inputs: ["clearable", "add", "color", "mini"], outputs: ["clear", "added"] }, { kind: "component", type: 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 });
 }