@agorapulse/ui-components 17.2.6 → 17.2.7-beta.0

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

@@ -76,7 +76,7 @@ class AutocompleteComponent {
         this.resultsLoadingSignal.set(false);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["alternativeText", "anonymous", "username", "network", "online", "profilePicture", "showInitials", "alt", "rounded", "size"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AutocompleteComponent, isStandalone: true, selector: "ap-autocomplete", inputs: { placeholder: "placeholder", label: "label", inputId: "inputId", loadingText: "loadingText", notFoundText: "notFoundText", searchFn: "searchFn", trackByFn: "trackByFn", disabled: "disabled", optionLabel: "optionLabel", optionCaption: "optionCaption", optionImageUrl: "optionImageUrl", optionValue: "optionValue", optionTextTemplate: "optionTextTemplate" }, outputs: { selectOption: "selectOption" }, viewQueries: [{ propertyName: "formField", first: true, predicate: ["formField"], descendants: true, read: ElementRef }], ngImport: i0, template: "<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\n", styles: ["ap-autocomplete{display:block}ap-autocomplete .input-autocomplete-wrapper{display:flex;flex-direction:column}ap-autocomplete .search-results-wrapper{position:relative}.ap-autocomplete-search-results{width:100%;display:flex;flex-direction:column;border-radius:var(--ref-border-radius-sm);box-shadow:var(--comp-select-shadow);padding:var(--comp-select-padding-vertical) 0;background-color:var(--comp-select-background-color);margin-top:var(--ref-spacing-xxxs);max-height:250px;overflow:auto}.ap-autocomplete-search-results-loading{display:flex;padding:var(--ref-spacing-sm) 0;flex-direction:column;justify-content:center;align-items:center;gap:var(--ref-spacing-xs)}.ap-autocomplete-search-results-loading .search-results-loading-label{font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80)}.ap-autocomplete-search-results-not-found{padding:var(--ref-spacing-xs) var(--ref-spacing-sm);font-style:italic;font-size:var(--ref-font-size-sm);color:var(--ref-color-grey-80);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item{padding:var(--ref-spacing-xxs) var(--ref-spacing-sm)}.ap-autocomplete-search-results-item .option{display:flex;align-items:center;font-size:var(--comp-select-one-line-text-size);font-weight:var(--comp-select-one-line-text-font-weight);color:var(--comp-select-one-line-text-color);line-height:var(--comp-select-one-line-text-line-height);font-family:var(--comp-select-one-line-text-font-family);gap:var(--ref-spacing-xs);min-height:24px}.ap-autocomplete-search-results-item .option .option-item{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.ap-autocomplete-search-results-item .option .texts{flex:1;overflow:auto}.ap-autocomplete-search-results-item .option .texts .first-line{display:flex}.ap-autocomplete-search-results-item .option .texts .label{display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item .option.with-caption .texts{display:flex;flex-direction:column}.ap-autocomplete-search-results-item .option.with-caption .texts .label{color:var(--comp-select-two-line-title-text-color);font-size:var(--comp-select-two-line-title-text-size);line-height:var(--comp-select-two-line-title-text-line-height);font-weight:var(--comp-select-two-line-title-text-font-weight)}.ap-autocomplete-search-results-item .option.with-caption .texts .caption{color:var(--comp-select-two-line-caption-text-color);font-size:var(--comp-select-two-line-caption-text-size);line-height:var(--comp-select-two-line-caption-text-line-height);font-weight:var(--comp-select-two-line-caption-text-font-weight);display:inline-block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;width:100%}.ap-autocomplete-search-results-item:hover{cursor:pointer;background-color:var(--ref-color-electric-blue-10)}.ap-autocomplete-search-results-item:active{background-color:var(--ref-color-electric-blue-20)}.ap-autocomplete-search-results-item:focus{background-color:var(--ref-color-electric-blue-20)}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "component", type: FormFieldComponent, selector: "ap-form-field" }, { kind: "component", type: InputGroupComponent, selector: "ap-input-group", inputs: ["symbolPosition"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: LoaderComponent, selector: "ap-loader", inputs: ["color", "diameter"] }, { kind: "directive", type: InputDirective, selector: "[apInput]" }, { kind: "component", type: AvatarComponent, selector: "ap-avatar", inputs: ["profilePicture", "alt", "network", "size", "username", "showInitials", "anonymous", "online", "rounded"] }, { kind: "ngmodule", type: OverlayModule }, { kind: "directive", type: i2.CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: i2.CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AutocompleteComponent, decorators: [{
             type: Component,

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

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    NgZone,\n    Output,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    inject,\n    signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-autocomplete',\n    styleUrls: ['./autocomplete.component.scss'],\n    standalone: true,\n    imports: [\n        SymbolComponent,\n        FormFieldComponent,\n        InputGroupComponent,\n        FormsModule,\n        LoaderComponent,\n        InputDirective,\n        AvatarComponent,\n        OverlayModule,\n    ],\n    templateUrl: './autocomplete.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> | string> implements AfterViewInit {\n    @Input() placeholder = 'Search...';\n    @Input() label = '';\n    @Input() inputId = '';\n    @Input() loadingText = 'Loading Items';\n    @Input() notFoundText = 'No result found';\n    @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n    @Input() trackByFn: (index: number, item: T) => T | T[keyof T] = (_: number, item: T) => item;\n    @Input() set disabled(value: boolean) {\n        this.disabledSignal.set(value);\n    }\n    @Input() optionLabel?: string;\n    @Input() optionCaption?: string;\n    @Input() optionImageUrl?: string;\n    @Input() optionValue?: string;\n    @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n    @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n    @Output()\n    selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n    readonly disabledSignal = signal(false);\n    readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n    readonly searchTerm$ = new BehaviorSubject<string>('');\n    readonly searchTermSignal = toSignal(this.searchTerm$);\n    readonly showResultsSignal = signal(false);\n    readonly resultsLoadingSignal = signal(false);\n    readonly searchResultsSignal = toSignal<any[]>(\n        this.searchTerm$.pipe(\n            skip(1),\n            debounceTime(250),\n            distinctUntilChanged(),\n            tap(() => this.showResultsSignal.set(false)),\n            filter(term => term.length > 0),\n            tap(() => this.showResultsSignal.set(true)),\n            tap(() => this.resultsLoadingSignal.set(true)),\n            switchMap(term => {\n                return this.searchFn(term);\n            }),\n            tap(() => this.resultsLoadingSignal.set(false))\n        )\n    );\n    private readonly ngZone = inject(NgZone);\n    private readonly el = inject(ElementRef);\n    readonly inputWidthSignal = signal(0);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apSearch]);\n        this.ngZone.runOutsideAngular(() => {\n            fromEvent(document, 'click')\n                .pipe(takeUntilDestroyed())\n                .subscribe(e => {\n                    const clickedInside = this.el.nativeElement.contains(e.target);\n                    if (!clickedInside) {\n                        this.ngZone.run(() => {\n                            this.resetAutocomplete();\n                        });\n                    }\n                });\n        });\n    }\n\n    ngAfterViewInit(): void {\n        this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n    }\n\n    onSelectOption(option: T) {\n        if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n            this.selectOption.emit(option[this.optionValue]);\n        } else {\n            this.selectOption.emit(option);\n        }\n        this.resetAutocomplete();\n    }\n\n    private resetAutocomplete() {\n        this.searchTerm$.next('');\n        this.showResultsSignal.set(false);\n        this.resultsLoadingSignal.set(false);\n    }\n}\n","<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\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-autocomplete.mjs","sources":["../../../libs/ui-components/autocomplete/src/autocomplete.component.ts","../../../libs/ui-components/autocomplete/src/autocomplete.component.html","../../../libs/ui-components/autocomplete/src/agorapulse-ui-components-autocomplete.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { FormFieldComponent } from '@agorapulse/ui-components/form-field';\nimport { InputDirective } from '@agorapulse/ui-components/input';\nimport { InputGroupComponent } from '@agorapulse/ui-components/input-group';\nimport { SymbolComponent, SymbolRegistry, apSearch } from '@agorapulse/ui-symbol';\nimport { OverlayModule } from '@angular/cdk/overlay';\n\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    EventEmitter,\n    Input,\n    NgZone,\n    Output,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    inject,\n    signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';\nimport { FormsModule } from '@angular/forms';\nimport { BehaviorSubject, Observable, debounceTime, distinctUntilChanged, filter, fromEvent, skip, switchMap, tap } from 'rxjs';\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-autocomplete',\n    styleUrls: ['./autocomplete.component.scss'],\n    standalone: true,\n    imports: [\n        SymbolComponent,\n        FormFieldComponent,\n        InputGroupComponent,\n        FormsModule,\n        LoaderComponent,\n        InputDirective,\n        AvatarComponent,\n        OverlayModule,\n    ],\n    templateUrl: './autocomplete.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class AutocompleteComponent<T extends Record<string, unknown> | string> implements AfterViewInit {\n    @Input() placeholder = 'Search...';\n    @Input() label = '';\n    @Input() inputId = '';\n    @Input() loadingText = 'Loading Items';\n    @Input() notFoundText = 'No result found';\n    @Input({ required: true }) searchFn!: (term: string) => Observable<T[]>;\n    @Input() trackByFn: (index: number, item: T) => T | T[keyof T] = (_: number, item: T) => item;\n    @Input() set disabled(value: boolean) {\n        this.disabledSignal.set(value);\n    }\n    @Input() optionLabel?: string;\n    @Input() optionCaption?: string;\n    @Input() optionImageUrl?: string;\n    @Input() optionValue?: string;\n    @Input() optionTextTemplate?: TemplateRef<{ option: T }>;\n\n    @ViewChild('formField', { read: ElementRef }) formField!: ElementRef<FormFieldComponent>;\n\n    @Output()\n    selectOption: EventEmitter<unknown> = new EventEmitter<unknown>();\n\n    readonly disabledSignal = signal(false);\n    readonly symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n    readonly searchTerm$ = new BehaviorSubject<string>('');\n    readonly searchTermSignal = toSignal(this.searchTerm$);\n    readonly showResultsSignal = signal(false);\n    readonly resultsLoadingSignal = signal(false);\n    readonly searchResultsSignal = toSignal<any[]>(\n        this.searchTerm$.pipe(\n            skip(1),\n            debounceTime(250),\n            distinctUntilChanged(),\n            tap(() => this.showResultsSignal.set(false)),\n            filter(term => term.length > 0),\n            tap(() => this.showResultsSignal.set(true)),\n            tap(() => this.resultsLoadingSignal.set(true)),\n            switchMap(term => {\n                return this.searchFn(term);\n            }),\n            tap(() => this.resultsLoadingSignal.set(false))\n        )\n    );\n    private readonly ngZone = inject(NgZone);\n    private readonly el = inject(ElementRef);\n    readonly inputWidthSignal = signal(0);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apSearch]);\n        this.ngZone.runOutsideAngular(() => {\n            fromEvent(document, 'click')\n                .pipe(takeUntilDestroyed())\n                .subscribe(e => {\n                    const clickedInside = this.el.nativeElement.contains(e.target);\n                    if (!clickedInside) {\n                        this.ngZone.run(() => {\n                            this.resetAutocomplete();\n                        });\n                    }\n                });\n        });\n    }\n\n    ngAfterViewInit(): void {\n        this.inputWidthSignal.set((this.formField.nativeElement as HTMLElement).offsetWidth);\n    }\n\n    onSelectOption(option: T) {\n        if (typeof option !== 'string' && this.optionValue && option[this.optionValue]) {\n            this.selectOption.emit(option[this.optionValue]);\n        } else {\n            this.selectOption.emit(option);\n        }\n        this.resetAutocomplete();\n    }\n\n    private resetAutocomplete() {\n        this.searchTerm$.next('');\n        this.showResultsSignal.set(false);\n        this.resultsLoadingSignal.set(false);\n    }\n}\n","<div class=\"input-autocomplete-wrapper\">\n    <ap-form-field\n        #formField\n        #trigger=\"cdkOverlayOrigin\"\n        cdkOverlayOrigin>\n        <label [for]=\"inputId\">\n            {{ label }}\n        </label>\n        <ap-input-group>\n            <ap-symbol symbolId=\"search\" />\n            <input\n                apInput\n                [id]=\"inputId\"\n                [disabled]=\"disabledSignal()\"\n                [placeholder]=\"placeholder\"\n                [ngModel]=\"searchTermSignal()\"\n                (ngModelChange)=\"searchTerm$.next($event)\" />\n        </ap-input-group>\n    </ap-form-field>\n    <div class=\"search-results-wrapper\">\n        <ng-template\n            cdkConnectedOverlay\n            [cdkConnectedOverlayOrigin]=\"trigger\"\n            [cdkConnectedOverlayWidth]=\"inputWidthSignal()\"\n            [cdkConnectedOverlayOpen]=\"showResultsSignal()\">\n            <div class=\"ap-autocomplete-search-results\">\n                @if (resultsLoadingSignal()) {\n                    <div class=\"ap-autocomplete-search-results-loading\">\n                        <ap-loader [diameter]=\"30\" />\n                        <span class=\"search-results-loading-label\">{{ loadingText }}</span>\n                    </div>\n                } @else {\n                    @if (searchResultsSignal()?.length) {\n                        @for (option of searchResultsSignal(); track trackByFn($index, option)) {\n                            <div\n                                class=\"ap-autocomplete-search-results-item\"\n                                tabindex=\"0\"\n                                (keydown.enter)=\"onSelectOption(option)\"\n                                (click)=\"onSelectOption(option)\">\n                                @if (!optionTextTemplate) {\n                                    @if (!optionLabel || !option[optionLabel]) {\n                                        <div class=\"option\">\n                                            <span\n                                                class=\"option-item\"\n                                                [title]=\"option\">\n                                                {{ option }}\n                                            </span>\n                                        </div>\n                                    }\n                                    @if (optionLabel && option[optionLabel]) {\n                                        <div\n                                            class=\"option\"\n                                            [class.with-caption]=\"optionLabel && optionCaption && option[optionCaption]\">\n                                            @if (!optionLabel) {\n                                                <span class=\"item\">\n                                                    {{ option }}\n                                                </span>\n                                            }\n                                            @if (optionImageUrl) {\n                                                <ap-avatar\n                                                    [size]=\"24\"\n                                                    [showInitials]=\"true\"\n                                                    [username]=\"optionLabel ? option[optionLabel] : option\"\n                                                    [profilePicture]=\"option[optionImageUrl]\" />\n                                            }\n                                            @if (optionLabel && option[optionLabel]) {\n                                                <div class=\"texts\">\n                                                    <div class=\"first-line\">\n                                                        <span\n                                                            class=\"label\"\n                                                            [title]=\"option[optionLabel]\">\n                                                            {{ option[optionLabel] }}\n                                                        </span>\n                                                    </div>\n                                                    @if (optionCaption && option[optionCaption]) {\n                                                        <span\n                                                            class=\"caption\"\n                                                            [title]=\"option[optionCaption]\">\n                                                            {{ option[optionCaption] }}\n                                                        </span>\n                                                    }\n                                                </div>\n                                            }\n                                        </div>\n                                    }\n                                } @else {\n                                    <ng-container *ngTemplateOutlet=\"optionTextTemplate; context: { option: option }\" />\n                                }\n                            </div>\n                        }\n                    } @else {\n                        <div class=\"ap-autocomplete-search-results-not-found\">\n                            {{ notFoundText }}\n                        </div>\n                    }\n                }\n            </div>\n        </ng-template>\n    </div>\n</div>\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-avatar.mjs

@@ -1,11 +1,24 @@
 import * as i1 from '@agorapulse/ui-symbol';
 import { apSingleNeutral, apShowTheaterMaskHappy, apFacebookOfficial, apLinkedinOfficial, apYoutubeOfficial, apTiktokOfficial, apGoogleMyBusinessOfficial, apPinterestOfficial, apXOfficial, apWebBlogs, apWebNews, SymbolComponent } from '@agorapulse/ui-symbol';
-import { NgOptimizedImage } from '@angular/common';
+import * as i2 from '@angular/common';
+import { NgOptimizedImage, NgClass, NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
-import { booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, HostBinding } from '@angular/core';
-import { LetDirective } from '@ngrx/component';
-import { BehaviorSubject, Observable, of, map, combineLatest } from 'rxjs';
+import { input, booleanAttribute, signal, computed, effect, untracked, Component, ChangeDetectionStrategy, ViewEncapsulation } from '@angular/core';
 
+const networkSymbolByNetwork = {
+    facebook: 'facebook-official',
+    instagram: 'instagram-official',
+    X: 'x-official',
+    twitter: 'x-official',
+    linkedin: 'linkedin-official',
+    tiktok: 'tiktok-official',
+    youtube: 'youtube-official',
+    pinterest: 'pinterest-official',
+    googleMyBusiness: 'google-my-business-official',
+    google: 'google-my-business-official',
+    webNews: 'web-news',
+    webBlog: 'web-blogs',
+};
 const onlineIconSizeByAvatarSize = {
     56: 16,
     48: 12,
@@ -43,80 +56,24 @@ const initialSizeByAvatarSize = {
     16: 10,
 };
 class AvatarComponent {
-    symbolRegistry;
-    elementRef;
-    networkSymbolByNetwork = {
-        facebook: 'facebook-official',
-        instagram: 'instagram-official',
-        X: 'x-official',
-        twitter: 'x-official',
-        linkedin: 'linkedin-official',
-        tiktok: 'tiktok-official',
-        youtube: 'youtube-official',
-        pinterest: 'pinterest-official',
-        googleMyBusiness: 'google-my-business-official',
-        google: 'google-my-business-official',
-        webNews: 'web-news',
-        webBlog: 'web-blogs',
-    };
-    size$ = new BehaviorSubject(40);
-    profilePicture$ = new BehaviorSubject('');
-    network$ = new BehaviorSubject(undefined);
-    alternativeText$ = new BehaviorSubject('');
-    anonymous$ = new BehaviorSubject(false);
-    username$ = new BehaviorSubject('');
-    online$ = new BehaviorSubject(false);
-    showInitials$ = new BehaviorSubject(false);
-    rounded$ = new BehaviorSubject(true);
-    set alternativeText(alternativeText) {
-        this.alternativeText$.next(alternativeText);
-    }
-    set anonymous(anonymous) {
-        this.anonymous$.next(anonymous);
-    }
-    set username(username) {
-        this.username$.next(username);
-    }
-    set network(network) {
-        this.network$.next(network);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-network-size', `${networkSizeByAvatarSize[this.size$.value]}px`);
-    }
-    set online(online) {
-        this.online$.next(online);
-    }
-    set profilePicture(profilePicture) {
-        this.profilePicture$.next(profilePicture);
-        this.imageError$.next(false);
-    }
-    set showInitials(showInitials) {
-        this.showInitials$.next(showInitials);
-    }
-    alt = '';
-    roundedAvatar = true;
-    set rounded(rounded) {
-        this.roundedAvatar = rounded;
-        this.rounded$.next(rounded);
-    }
-    // TODO - migrate to signal input and remove size input
-    set size(size) {
-        this.size$.next(+size);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `${size}px`);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[size]}px`);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-online-icon-size', `${onlineIconSizeByAvatarSize[size]}px`);
-    }
-    displayProfilePicture$ = new Observable();
-    displaySingleNeutralSvg$ = new Observable();
-    displayInitials$ = new Observable();
-    displayAnonymous$ = new Observable();
-    displayNetwork$ = new Observable();
-    displayOnline$ = new Observable();
-    imageError$ = new BehaviorSubject(false);
-    initials$ = new Observable();
-    initialsAvailable$ = of(false);
-    constructor(symbolRegistry, elementRef) {
-        this.symbolRegistry = symbolRegistry;
-        this.elementRef = elementRef;
-        this.symbolRegistry.registerSymbols([
+    ngStyle;
+    profilePicture = input();
+    alt = input('');
+    network = input(undefined);
+    size = input(40);
+    username = input('');
+    showInitials = input(false);
+    anonymous = input(false);
+    online = input(false);
+    rounded = input(true, {
+        transform: booleanAttribute,
+    });
+    imageError = signal(false);
+    backgroundView = computed(() => this.buildBackgroundView());
+    overlayView = computed(() => this.buildOverlayView());
+    constructor(symbolRegistry, ngStyle) {
+        this.ngStyle = ngStyle;
+        symbolRegistry.registerSymbols([
             apSingleNeutral,
             apShowTheaterMaskHappy,
             apFacebookOfficial,
@@ -129,96 +86,85 @@ class AvatarComponent {
             apWebBlogs,
             apWebNews,
         ]);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);
-        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);
+        effect(() => {
+            this.ngStyle.ngStyle = this.buildHostStyle();
+        });
+        effect(() => {
+            this.profilePicture(); // on change
+            untracked(() => this.imageError.set(false));
+        });
+    }
+    onImageError() {
+        this.imageError.set(true);
     }
-    ngOnInit() {
-        this.initialsAvailable$ = this.username$.pipe(map(username => {
-            return !!username;
-        }));
-        this.displayProfilePicture$ = combineLatest([this.profilePicture$, this.anonymous$, this.imageError$, this.showInitials$]).pipe(map(([profilePicture, anonymous, imageError]) => {
-            return !!profilePicture && !anonymous && !imageError;
-        }));
-        this.displayInitials$ = combineLatest([
-            this.showInitials$,
-            this.anonymous$,
-            this.initialsAvailable$,
-            this.displayProfilePicture$,
-        ]).pipe(map(([showInitials, anonymous, initialsAvailable, displayProfilePicture]) => {
-            return showInitials && !anonymous && initialsAvailable && !displayProfilePicture;
-        }));
-        this.displaySingleNeutralSvg$ = combineLatest([
-            this.profilePicture$,
-            this.imageError$,
-            this.initialsAvailable$,
-            this.showInitials$,
-            this.anonymous$,
-            this.displayInitials$,
-            this.displayProfilePicture$,
-        ]).pipe(map(([profilePicture, imageError, initialsAvailable, showInitials, anonymous, displayInitials, displayProfilePicture]) => {
-            return ((!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&
-                !anonymous &&
-                !displayInitials &&
-                !displayProfilePicture);
-        }));
-        this.displayAnonymous$ = combineLatest([this.anonymous$, this.rounded$]).pipe(map(([anonymous, rounded]) => {
-            return anonymous && rounded;
-        }));
-        this.displayOnline$ = combineLatest([this.online$, this.rounded$]).pipe(map(([online, rounded]) => {
-            return online && rounded;
-        }));
-        this.displayNetwork$ = combineLatest([this.network$, this.rounded$]).pipe(map(([network, rounded]) => {
-            return !!network && rounded;
-        }));
-        this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(map(([displayInitials, username]) => {
-            if ((displayInitials && !username) || !displayInitials) {
-                return '';
+    buildBackgroundView() {
+        let bgView = {};
+        if (this.anonymous()) {
+            if (this.rounded()) {
+                bgView = { mode: 'symbol', symbolId: 'show-theater-mask-happy' };
+            }
+        }
+        else {
+            const profilePicture = this.profilePicture();
+            if (profilePicture && !this.imageError()) {
+                bgView = {
+                    mode: 'image',
+                    image: {
+                        src: profilePicture,
+                        size: +this.size(),
+                        alt: this.alt(),
+                    },
+                };
+            }
+            else if (this.rounded()) {
+                if (this.showInitials() && this.username()) {
+                    bgView = { mode: 'initials', text: this.username().charAt(0).toUpperCase() };
+                }
+                else {
+                    bgView = { mode: 'symbol', symbolId: 'single-neutral' };
+                }
             }
-            this.elementRef.nativeElement.style.setProperty('--ap-avatar-initials-size', `${initialSizeByAvatarSize[this.size$.value]}px`);
-            const names = username?.split(' ');
-            return `${names[0].charAt(0).toUpperCase()}`;
-        }));
+        }
+        return bgView;
     }
-    onImageError() {
-        this.imageError$.next(true);
+    buildOverlayView() {
+        let ovlView = {};
+        if (this.rounded()) {
+            const network = this.network();
+            if (network) {
+                ovlView = { mode: 'network', network, symbolId: networkSymbolByNetwork[network] };
+            }
+            else if (this.online()) {
+                ovlView = { mode: 'online' };
+            }
+        }
+        return ovlView;
+    }
+    buildHostStyle() {
+        const bgMode = this.backgroundView().mode;
+        const ovlMode = this.overlayView().mode;
+        const size = this.size();
+        return {
+            '--ap-avatar-size': `${size}px`,
+            '--ap-avatar-initials-size': bgMode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',
+            '--ap-avatar-symbol-size': bgMode == 'symbol' ? `${symbolSizeByAvatarSize[size]}px` : '',
+            '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',
+            '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',
+        };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { alternativeText: "alternativeText", anonymous: "anonymous", username: "username", network: "network", online: "online", profilePicture: "profilePicture", showInitials: "showInitials", alt: "alt", rounded: ["rounded", "rounded", booleanAttribute], size: "size" }, host: { properties: { "class.rounded-avatar": "this.roundedAvatar" } }, ngImport: i0, template: "<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    @if (avatarViewModel.displayProfilePicture) {\n        <img\n            [src]=\"avatarViewModel.profilePicture\"\n            [width]=\"avatarViewModel.size\"\n            [height]=\"avatarViewModel.size\"\n            [alt]=\"alt\"\n            (error)=\"onImageError()\" />\n    }\n    @if (avatarViewModel.displaySingleNeutralSvg) {\n        <div class=\"no-profile-picture\">\n            <ap-symbol symbolId=\"single-neutral\" />\n        </div>\n    }\n\n    @if (avatarViewModel.displayAnonymous) {\n        <div class=\"anonymous\">\n            <ap-symbol symbolId=\"show-theater-mask-happy\" />\n        </div>\n    }\n    @if (avatarViewModel.displayOnline) {\n        <div class=\"online\"></div>\n    }\n    @if (avatarViewModel.displayNetwork) {\n        <div\n            class=\"network\"\n            [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n            [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n            [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n            [class.x]=\"avatarViewModel.network === 'X'\"\n            [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n            [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n            [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n            [class.tiktok]=\"avatarViewModel.network === 'tiktok'\"\n            [class.pinterest]=\"avatarViewModel.network === 'pinterest'\"\n            [class.web]=\"avatarViewModel.network === 'webBlog' || avatarViewModel.network === 'webNews'\">\n            @if (avatarViewModel.network) {\n                <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n            }\n        </div>\n    }\n\n    @if (avatarViewModel.displayInitials) {\n        <div class=\"initials\">\n            {{ avatarViewModel.initials }}\n        </div>\n    }\n</ng-container>\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}ap-avatar .anonymous{margin-top:7%}ap-avatar .online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}ap-avatar .initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}ap-avatar .network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.x,ap-avatar .network.pinterest,ap-avatar .network.web{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: LetDirective, selector: "[ngrxLet]", inputs: ["ngrxLet", "ngrxLetSuspenseTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AvatarComponent, deps: [{ token: i1.SymbolRegistry }, { token: i2.NgStyle }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.3", type: AvatarComponent, isStandalone: true, selector: "ap-avatar", inputs: { profilePicture: { classPropertyName: "profilePicture", publicName: "profilePicture", isSignal: true, isRequired: false, transformFunction: null }, alt: { classPropertyName: "alt", publicName: "alt", isSignal: true, isRequired: false, transformFunction: null }, network: { classPropertyName: "network", publicName: "network", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, username: { classPropertyName: "username", publicName: "username", isSignal: true, isRequired: false, transformFunction: null }, showInitials: { classPropertyName: "showInitials", publicName: "showInitials", isSignal: true, isRequired: false, transformFunction: null }, anonymous: { classPropertyName: "anonymous", publicName: "anonymous", isSignal: true, isRequired: false, transformFunction: null }, online: { classPropertyName: "online", publicName: "online", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.rounded-avatar": "rounded()" } }, hostDirectives: [{ directive: i2.NgStyle }], ngImport: i0, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div class=\"symbol\" [ngClass]=\"'sym-' + bgView.symbolId\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"network\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.symbolId\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"online\"></div>\n        }\n    }\n}\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .symbol{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .symbol{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .symbol ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}ap-avatar .sym-show-theater-mask-happy{margin-top:7%}ap-avatar .online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}ap-avatar .initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}ap-avatar .network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.X,ap-avatar .network.pinterest,ap-avatar .network.webBlog,ap-avatar .network.webNews{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"], dependencies: [{ 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: SymbolComponent, selector: "ap-symbol", inputs: ["color", "symbolId", "size"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.3", ngImport: i0, type: AvatarComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-avatar', standalone: true, imports: [NgOptimizedImage, SymbolComponent, LetDirective], encapsulation: ViewEncapsulation.None, template: "<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    @if (avatarViewModel.displayProfilePicture) {\n        <img\n            [src]=\"avatarViewModel.profilePicture\"\n            [width]=\"avatarViewModel.size\"\n            [height]=\"avatarViewModel.size\"\n            [alt]=\"alt\"\n            (error)=\"onImageError()\" />\n    }\n    @if (avatarViewModel.displaySingleNeutralSvg) {\n        <div class=\"no-profile-picture\">\n            <ap-symbol symbolId=\"single-neutral\" />\n        </div>\n    }\n\n    @if (avatarViewModel.displayAnonymous) {\n        <div class=\"anonymous\">\n            <ap-symbol symbolId=\"show-theater-mask-happy\" />\n        </div>\n    }\n    @if (avatarViewModel.displayOnline) {\n        <div class=\"online\"></div>\n    }\n    @if (avatarViewModel.displayNetwork) {\n        <div\n            class=\"network\"\n            [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n            [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n            [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n            [class.x]=\"avatarViewModel.network === 'X'\"\n            [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n            [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n            [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n            [class.tiktok]=\"avatarViewModel.network === 'tiktok'\"\n            [class.pinterest]=\"avatarViewModel.network === 'pinterest'\"\n            [class.web]=\"avatarViewModel.network === 'webBlog' || avatarViewModel.network === 'webNews'\">\n            @if (avatarViewModel.network) {\n                <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n            }\n        </div>\n    }\n\n    @if (avatarViewModel.displayInitials) {\n        <div class=\"initials\">\n            {{ avatarViewModel.initials }}\n        </div>\n    }\n</ng-container>\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .no-profile-picture,ap-avatar.rounded-avatar .anonymous{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .no-profile-picture,ap-avatar .anonymous{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .no-profile-picture ap-symbol,ap-avatar .anonymous ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}ap-avatar .anonymous{margin-top:7%}ap-avatar .online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}ap-avatar .initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}ap-avatar .network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.x,ap-avatar .network.pinterest,ap-avatar .network.web{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"] }]
-        }], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i0.ElementRef }], propDecorators: { alternativeText: [{
-                type: Input
-            }], anonymous: [{
-                type: Input
-            }], username: [{
-                type: Input
-            }], network: [{
-                type: Input
-            }], online: [{
-                type: Input
-            }], profilePicture: [{
-                type: Input
-            }], showInitials: [{
-                type: Input
-            }], alt: [{
-                type: Input
-            }], roundedAvatar: [{
-                type: HostBinding,
-                args: ['class.rounded-avatar']
-            }], rounded: [{
-                type: Input,
-                args: [{
-                        transform: booleanAttribute,
-                    }]
-            }], size: [{
-                type: Input
-            }] } });
+            args: [{ selector: 'ap-avatar', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, standalone: true, imports: [NgOptimizedImage, SymbolComponent, NgClass], hostDirectives: [NgStyle], host: {
+                        '[class.rounded-avatar]': 'rounded()'
+                    }, template: "<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div class=\"symbol\" [ngClass]=\"'sym-' + bgView.symbolId\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"network\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.symbolId\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"online\"></div>\n        }\n    }\n}\n", styles: ["ap-avatar{display:flex;justify-content:center;align-items:center;height:var(--ap-avatar-size);min-height:var(--ap-avatar-size);max-height:var(--ap-avatar-size);width:var(--ap-avatar-size);min-width:var(--ap-avatar-size);max-width:var(--ap-avatar-size);border-radius:var(--sys-border-radius-sm);background:var(--ref-color-grey-40);box-sizing:border-box;position:relative;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar.rounded-avatar{border-radius:100%}ap-avatar.rounded-avatar img,ap-avatar.rounded-avatar .symbol{border-radius:100%}ap-avatar img{overflow:hidden;border-radius:var(--sys-border-radius-sm);box-sizing:border-box}ap-avatar .symbol{display:flex;justify-content:center;align-items:center;background:var(--ref-color-grey-40);border-radius:var(--sys-border-radius-sm)}ap-avatar .symbol ap-symbol{color:var(--ref-color-white);width:var(--ap-avatar-symbol-size);min-width:var(--ap-avatar-symbol-size);max-width:var(--ap-avatar-symbol-size);height:var(--ap-avatar-symbol-size);min-height:var(--ap-avatar-symbol-size);max-height:var(--ap-avatar-symbol-size)}ap-avatar .sym-show-theater-mask-happy{margin-top:7%}ap-avatar .online{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-online-icon-size);max-height:var(--ap-avatar-online-icon-size);width:var(--ap-avatar-online-icon-size);min-width:var(--ap-avatar-online-icon-size);max-width:var(--ap-avatar-online-icon-size);border-radius:100%;overflow:hidden;background:var(--ref-color-grey-40);box-sizing:border-box;border:1px solid var(--ref-color-white);bottom:0;right:0;background:var(--ref-color-green-100)}ap-avatar .initials{font-weight:var(--ref-font-weight-bold);font-size:var(--ap-avatar-initials-size);line-height:var(--ref-font-line-height-xl);font-family:Averta;color:var(--ref-color-white)}ap-avatar .network{position:absolute;height:var(--ap-avatar-online-icon-size);min-height:var(--ap-avatar-network-size);max-height:var(--ap-avatar-network-size);width:var(--ap-avatar-network-size);min-width:var(--ap-avatar-network-size);max-width:var(--ap-avatar-network-size);overflow:hidden;box-sizing:border-box;bottom:0;right:0;box-shadow:0 0 0 1px var(--ref-color-grey-10)}ap-avatar .network.facebook,ap-avatar .network.twitter,ap-avatar .network.youtube,ap-avatar .network.tiktok,ap-avatar .network.X,ap-avatar .network.pinterest,ap-avatar .network.webBlog,ap-avatar .network.webNews{border-radius:100%}ap-avatar .network.instagram{border-radius:28%}ap-avatar .network.linkedin{border-radius:6%}ap-avatar .network.googleMyBusiness,ap-avatar .network.google{box-shadow:none;border-radius:unset}ap-avatar .network ap-symbol img{border-radius:0;border:none}\n"] }]
+        }], ctorParameters: () => [{ type: i1.SymbolRegistry }, { type: i2.NgStyle }] });
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { AvatarComponent };
+export { AvatarComponent, networkSymbolByNetwork };
 //# sourceMappingURL=agorapulse-ui-components-avatar.mjs.map

package/fesm2022/agorapulse-ui-components-avatar.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-avatar.mjs","sources":["../../../libs/ui-components/avatar/src/avatar.component.ts","../../../libs/ui-components/avatar/src/avatar.component.html","../../../libs/ui-components/avatar/src/agorapulse-ui-components-avatar.ts"],"sourcesContent":["import {\n    SymbolComponent,\n    SymbolRegistry,\n    apFacebookOfficial,\n    apGoogleMyBusinessOfficial,\n    apLinkedinOfficial,\n    apPinterestOfficial,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    apTiktokOfficial,\n    apWebBlogs,\n    apWebNews,\n    apXOfficial,\n    apYoutubeOfficial,\n} from '@agorapulse/ui-symbol';\nimport { NgOptimizedImage } from '@angular/common';\nimport {\n    ChangeDetectionStrategy,\n    Component,\n    ElementRef,\n    HostBinding,\n    Input,\n    OnInit,\n    ViewEncapsulation,\n    booleanAttribute,\n} from '@angular/core';\nimport { LetDirective } from '@ngrx/component';\nimport { BehaviorSubject, Observable, combineLatest, map, of } from 'rxjs';\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\nexport type AvatarNetwork =\n    | 'facebook'\n    | 'instagram'\n    | 'twitter'\n    | 'linkedin'\n    | 'tiktok'\n    | 'youtube'\n    | 'pinterest'\n    | 'googleMyBusiness'\n    | 'google'\n    | 'webNews'\n    | 'webBlog'\n    | 'X';\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 12,\n    40: 12,\n    36: 8,\n    32: 8,\n    24: 6,\n    16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 18,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 16,\n    40: 16,\n    36: 16,\n    32: 12,\n    24: 12,\n    16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 22,\n    36: 18,\n    32: 18,\n    24: 14,\n    16: 10,\n};\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-avatar',\n    styleUrls: ['./avatar.component.scss'],\n    standalone: true,\n    imports: [NgOptimizedImage, SymbolComponent, LetDirective],\n    templateUrl: './avatar.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class AvatarComponent implements OnInit {\n    readonly networkSymbolByNetwork: Record<AvatarNetwork, string> = {\n        facebook: 'facebook-official',\n        instagram: 'instagram-official',\n        X: 'x-official',\n        twitter: 'x-official',\n        linkedin: 'linkedin-official',\n        tiktok: 'tiktok-official',\n        youtube: 'youtube-official',\n        pinterest: 'pinterest-official',\n        googleMyBusiness: 'google-my-business-official',\n        google: 'google-my-business-official',\n        webNews: 'web-news',\n        webBlog: 'web-blogs',\n    };\n\n    size$: BehaviorSubject<AvatarSize> = new BehaviorSubject<AvatarSize>(40);\n    profilePicture$: BehaviorSubject<string | undefined> = new BehaviorSubject<string | undefined>('');\n    network$: BehaviorSubject<AvatarNetwork | undefined> = new BehaviorSubject<AvatarNetwork | undefined>(undefined);\n\n    private alternativeText$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n    private anonymous$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private username$: BehaviorSubject<string> = new BehaviorSubject<string>('');\n    private online$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private showInitials$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    private rounded$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(true);\n\n    @Input() set alternativeText(alternativeText: string) {\n        this.alternativeText$.next(alternativeText);\n    }\n\n    @Input() set anonymous(anonymous: boolean) {\n        this.anonymous$.next(anonymous);\n    }\n\n    @Input() set username(username: string) {\n        this.username$.next(username);\n    }\n\n    @Input() set network(network: AvatarNetwork | undefined) {\n        this.network$.next(network);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-network-size', `${networkSizeByAvatarSize[this.size$.value]}px`);\n    }\n\n    @Input() set online(online: boolean) {\n        this.online$.next(online);\n    }\n\n    @Input() set profilePicture(profilePicture: string | undefined) {\n        this.profilePicture$.next(profilePicture);\n        this.imageError$.next(false);\n    }\n\n    @Input() set showInitials(showInitials: boolean) {\n        this.showInitials$.next(showInitials);\n    }\n    @Input() alt = '';\n\n    @HostBinding('class.rounded-avatar')\n    roundedAvatar = true;\n\n    @Input({\n        transform: booleanAttribute,\n    })\n    set rounded(rounded: boolean) {\n        this.roundedAvatar = rounded;\n        this.rounded$.next(rounded);\n    }\n\n    // TODO - migrate to signal input and remove size input\n    @Input()\n    set size(size: AvatarSize | `${AvatarSize}`) {\n        this.size$.next(+size as AvatarSize);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `${size}px`);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[size]}px`);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-online-icon-size', `${onlineIconSizeByAvatarSize[size]}px`);\n    }\n\n    displayProfilePicture$: Observable<boolean> = new Observable<boolean>();\n    displaySingleNeutralSvg$: Observable<boolean> = new Observable<boolean>();\n    displayInitials$: Observable<boolean> = new Observable<boolean>();\n    displayAnonymous$: Observable<boolean> = new Observable<boolean>();\n    displayNetwork$: Observable<boolean> = new Observable<boolean>();\n    displayOnline$: Observable<boolean> = new Observable<boolean>();\n    imageError$: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);\n    initials$: Observable<string> = new Observable<string>();\n    initialsAvailable$: Observable<boolean> = of(false);\n\n    constructor(\n        private symbolRegistry: SymbolRegistry,\n        private elementRef: ElementRef\n    ) {\n        this.symbolRegistry.registerSymbols([\n            apSingleNeutral,\n            apShowTheaterMaskHappy,\n            apFacebookOfficial,\n            apLinkedinOfficial,\n            apYoutubeOfficial,\n            apTiktokOfficial,\n            apGoogleMyBusinessOfficial,\n            apPinterestOfficial,\n            apXOfficial,\n            apWebBlogs,\n            apWebNews,\n        ]);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-size', `40px`);\n        this.elementRef.nativeElement.style.setProperty('--ap-avatar-symbol-size', `${symbolSizeByAvatarSize[this.size$.value]}px`);\n    }\n\n    ngOnInit(): void {\n        this.initialsAvailable$ = this.username$.pipe(\n            map(username => {\n                return !!username;\n            })\n        );\n\n        this.displayProfilePicture$ = combineLatest([this.profilePicture$, this.anonymous$, this.imageError$, this.showInitials$]).pipe(\n            map(([profilePicture, anonymous, imageError]) => {\n                return !!profilePicture && !anonymous && !imageError;\n            })\n        );\n\n        this.displayInitials$ = combineLatest([\n            this.showInitials$,\n            this.anonymous$,\n            this.initialsAvailable$,\n            this.displayProfilePicture$,\n        ]).pipe(\n            map(([showInitials, anonymous, initialsAvailable, displayProfilePicture]) => {\n                return showInitials && !anonymous && initialsAvailable && !displayProfilePicture;\n            })\n        );\n\n        this.displaySingleNeutralSvg$ = combineLatest([\n            this.profilePicture$,\n            this.imageError$,\n            this.initialsAvailable$,\n            this.showInitials$,\n            this.anonymous$,\n            this.displayInitials$,\n            this.displayProfilePicture$,\n        ]).pipe(\n            map(([profilePicture, imageError, initialsAvailable, showInitials, anonymous, displayInitials, displayProfilePicture]) => {\n                return (\n                    (!profilePicture || imageError || !initialsAvailable || (initialsAvailable && !showInitials)) &&\n                    !anonymous &&\n                    !displayInitials &&\n                    !displayProfilePicture\n                );\n            })\n        );\n\n        this.displayAnonymous$ = combineLatest([this.anonymous$, this.rounded$]).pipe(\n            map(([anonymous, rounded]) => {\n                return anonymous && rounded;\n            })\n        );\n\n        this.displayOnline$ = combineLatest([this.online$, this.rounded$]).pipe(\n            map(([online, rounded]) => {\n                return online && rounded;\n            })\n        );\n\n        this.displayNetwork$ = combineLatest([this.network$, this.rounded$]).pipe(\n            map(([network, rounded]) => {\n                return !!network && rounded;\n            })\n        );\n\n        this.initials$ = combineLatest([this.displayInitials$, this.username$]).pipe(\n            map(([displayInitials, username]) => {\n                if ((displayInitials && !username) || !displayInitials) {\n                    return '';\n                }\n                this.elementRef.nativeElement.style.setProperty(\n                    '--ap-avatar-initials-size',\n                    `${initialSizeByAvatarSize[this.size$.value]}px`\n                );\n                const names = username?.split(' ');\n                return `${names[0].charAt(0).toUpperCase()}`;\n            })\n        );\n    }\n\n    onImageError(): void {\n        this.imageError$.next(true);\n    }\n}\n","<ng-container\n    *ngrxLet=\"{\n        displayProfilePicture: displayProfilePicture$,\n        displaySingleNeutralSvg: displaySingleNeutralSvg$,\n        displayInitials: displayInitials$,\n        displayAnonymous: displayAnonymous$,\n        displayOnline: displayOnline$,\n        displayNetwork: displayNetwork$,\n        initials: initials$,\n        profilePicture: profilePicture$,\n        size: size$,\n        network: network$\n    } as avatarViewModel\">\n    @if (avatarViewModel.displayProfilePicture) {\n        <img\n            [src]=\"avatarViewModel.profilePicture\"\n            [width]=\"avatarViewModel.size\"\n            [height]=\"avatarViewModel.size\"\n            [alt]=\"alt\"\n            (error)=\"onImageError()\" />\n    }\n    @if (avatarViewModel.displaySingleNeutralSvg) {\n        <div class=\"no-profile-picture\">\n            <ap-symbol symbolId=\"single-neutral\" />\n        </div>\n    }\n\n    @if (avatarViewModel.displayAnonymous) {\n        <div class=\"anonymous\">\n            <ap-symbol symbolId=\"show-theater-mask-happy\" />\n        </div>\n    }\n    @if (avatarViewModel.displayOnline) {\n        <div class=\"online\"></div>\n    }\n    @if (avatarViewModel.displayNetwork) {\n        <div\n            class=\"network\"\n            [class.facebook]=\"avatarViewModel.network === 'facebook'\"\n            [class.linkedin]=\"avatarViewModel.network === 'linkedin'\"\n            [class.twitter]=\"avatarViewModel.network === 'twitter'\"\n            [class.x]=\"avatarViewModel.network === 'X'\"\n            [class.youtube]=\"avatarViewModel.network === 'youtube'\"\n            [class.googleMyBusiness]=\"avatarViewModel.network === 'googleMyBusiness' || avatarViewModel.network === 'google'\"\n            [class.instagram]=\"avatarViewModel.network === 'instagram'\"\n            [class.tiktok]=\"avatarViewModel.network === 'tiktok'\"\n            [class.pinterest]=\"avatarViewModel.network === 'pinterest'\"\n            [class.web]=\"avatarViewModel.network === 'webBlog' || avatarViewModel.network === 'webNews'\">\n            @if (avatarViewModel.network) {\n                <ap-symbol [symbolId]=\"networkSymbolByNetwork[avatarViewModel.network]\" />\n            }\n        </div>\n    }\n\n    @if (avatarViewModel.displayInitials) {\n        <div class=\"initials\">\n            {{ avatarViewModel.initials }}\n        </div>\n    }\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-avatar.mjs","sources":["../../../libs/ui-components/avatar/src/avatar.component.ts","../../../libs/ui-components/avatar/src/avatar.component.html","../../../libs/ui-components/avatar/src/agorapulse-ui-components-avatar.ts"],"sourcesContent":["import {\n    apFacebookOfficial,\n    apGoogleMyBusinessOfficial,\n    apLinkedinOfficial,\n    apPinterestOfficial,\n    apShowTheaterMaskHappy,\n    apSingleNeutral,\n    APSymbolName,\n    apTiktokOfficial,\n    apWebBlogs,\n    apWebNews,\n    apXOfficial,\n    apYoutubeOfficial,\n    SymbolComponent,\n    SymbolRegistry,\n} from '@agorapulse/ui-symbol';\nimport { NgClass, NgOptimizedImage, NgStyle } from '@angular/common';\nimport {\n    booleanAttribute,\n    ChangeDetectionStrategy,\n    Component,\n    computed,\n    effect,\n    input,\n    signal,\n    untracked,\n    ViewEncapsulation,\n} from '@angular/core';\n\nexport const networkSymbolByNetwork = {\n    facebook: 'facebook-official',\n    instagram: 'instagram-official',\n    X: 'x-official',\n    twitter: 'x-official',\n    linkedin: 'linkedin-official',\n    tiktok: 'tiktok-official',\n    youtube: 'youtube-official',\n    pinterest: 'pinterest-official',\n    googleMyBusiness: 'google-my-business-official',\n    google: 'google-my-business-official',\n    webNews: 'web-news',\n    webBlog: 'web-blogs',\n} satisfies Record<string, APSymbolName>;\n\nexport type AvatarNetwork = keyof typeof networkSymbolByNetwork;\n\nexport type AvatarSize = 56 | 48 | 40 | 36 | 32 | 24 | 16;\n\nconst onlineIconSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 12,\n    40: 12,\n    36: 8,\n    32: 8,\n    24: 6,\n    16: 6,\n};\n\nconst symbolSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 20,\n    36: 18,\n    32: 16,\n    24: 12,\n    16: 8,\n};\n\nconst networkSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 16,\n    48: 16,\n    40: 16,\n    36: 16,\n    32: 12,\n    24: 12,\n    16: 8,\n};\n\nconst initialSizeByAvatarSize: Record<AvatarSize, number> = {\n    56: 28,\n    48: 24,\n    40: 22,\n    36: 18,\n    32: 18,\n    24: 14,\n    16: 10,\n};\n\ntype BackgroundView =\n    | { mode: 'image'; image: { src: string; size: number; alt?: string } }\n    | { mode: 'initials'; text: string }\n    | { mode: 'symbol'; symbolId: APSymbolName }\n    | { mode?: never };\n\ntype OverlayView =\n    | { mode: 'online' }\n    | { mode: 'network'; network: AvatarNetwork; symbolId: APSymbolName }\n    | { mode?: never };\n\n@Component({\n    selector: 'ap-avatar',\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    templateUrl: './avatar.component.html',\n    styleUrls: ['./avatar.component.scss'],\n    encapsulation: ViewEncapsulation.None,\n    standalone: true,\n    imports: [NgOptimizedImage, SymbolComponent, NgClass],\n    hostDirectives: [NgStyle],\n    host: {\n        '[class.rounded-avatar]': 'rounded()'\n    },\n})\nexport class AvatarComponent {\n    profilePicture = input<string>();\n    alt = input<string>('');\n    network = input<AvatarNetwork | undefined>(undefined);\n    size = input<AvatarSize | `${AvatarSize}`>(40);\n    username = input<string>('');\n    showInitials = input<boolean>(false);\n    anonymous = input<boolean>(false);\n    online = input<boolean>(false);\n    rounded = input(true, {\n        transform: booleanAttribute,\n    });\n\n    private imageError = signal<boolean>(false);\n\n    backgroundView = computed<BackgroundView>(() => this.buildBackgroundView());\n    overlayView = computed<OverlayView>(() => this.buildOverlayView());\n\n    constructor(\n        symbolRegistry: SymbolRegistry,\n        private ngStyle: NgStyle\n    ) {\n        symbolRegistry.registerSymbols([\n            apSingleNeutral,\n            apShowTheaterMaskHappy,\n            apFacebookOfficial,\n            apLinkedinOfficial,\n            apYoutubeOfficial,\n            apTiktokOfficial,\n            apGoogleMyBusinessOfficial,\n            apPinterestOfficial,\n            apXOfficial,\n            apWebBlogs,\n            apWebNews,\n        ]);\n\n        effect(() => {\n            this.ngStyle.ngStyle = this.buildHostStyle();\n        });\n        effect(() => {\n            this.profilePicture(); // on change\n            untracked(() => this.imageError.set(false));\n        });\n    }\n\n    onImageError(): void {\n        this.imageError.set(true);\n    }\n\n    private buildBackgroundView(): BackgroundView {\n        let bgView: BackgroundView = {};\n\n        if (this.anonymous()) {\n            if (this.rounded()) {\n                bgView = { mode: 'symbol', symbolId: 'show-theater-mask-happy' };\n            }\n        } else {\n            const profilePicture = this.profilePicture();\n\n            if (profilePicture && !this.imageError()) {\n                bgView = {\n                    mode: 'image',\n                    image: {\n                        src: profilePicture,\n                        size: +this.size(),\n                        alt: this.alt(),\n                    },\n                };\n            } else if (this.rounded()) {\n                if (this.showInitials() && this.username()) {\n                    bgView = { mode: 'initials', text: this.username().charAt(0).toUpperCase() };\n                } else {\n                    bgView = { mode: 'symbol', symbolId: 'single-neutral' };\n                }\n            }\n        }\n\n        return bgView;\n    }\n\n    private buildOverlayView(): OverlayView {\n        let ovlView: OverlayView = {};\n\n        if (this.rounded()) {\n            const network = this.network();\n\n            if (network) {\n                ovlView = { mode: 'network', network, symbolId: networkSymbolByNetwork[network] };\n            } else if (this.online()) {\n                ovlView = { mode: 'online' };\n            }\n        }\n\n        return ovlView;\n    }\n\n    private buildHostStyle() {\n        const bgMode = this.backgroundView().mode;\n        const ovlMode = this.overlayView().mode;\n        const size = this.size();\n\n        return {\n            '--ap-avatar-size': `${size}px`,\n            '--ap-avatar-initials-size': bgMode == 'initials' ? `${initialSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-symbol-size': bgMode == 'symbol' ? `${symbolSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-network-size': ovlMode == 'network' ? `${networkSizeByAvatarSize[size]}px` : '',\n            '--ap-avatar-online-icon-size': ovlMode == 'online' ? `${onlineIconSizeByAvatarSize[size]}px` : '',\n        };\n    }\n}\n","<!-- background -->\n@if (backgroundView(); as bgView) {\n    @switch (bgView.mode) {\n        @case ('image') {\n            <img\n                [ngSrc]=\"bgView.image.src\"\n                [width]=\"bgView.image.size\"\n                [height]=\"bgView.image.size\"\n                [alt]=\"bgView.image.alt\"\n                (error)=\"onImageError()\" />\n        }\n        @case ('initials') {\n            <div class=\"initials\">\n                {{ bgView.text }}\n            </div>\n        }\n        @case ('symbol') {\n            <div class=\"symbol\" [ngClass]=\"'sym-' + bgView.symbolId\">\n                <ap-symbol [symbolId]=\"bgView.symbolId\" />\n            </div>\n        }\n    }\n}\n\n<!-- overlay -->\n@if (overlayView(); as ovlView) {\n    @switch (ovlView.mode) {\n        @case ('network') {\n            <div\n                class=\"network\"\n                [ngClass]=\"ovlView.network\">\n                <ap-symbol [symbolId]=\"ovlView.symbolId\" />\n            </div>\n        }\n        @case ('online') {\n            <div class=\"online\"></div>\n        }\n    }\n}\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-form-message.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-form-message.mjs","sources":["../../../libs/ui-components/form-message/src/form-message.component.ts","../../../libs/ui-components/form-message/src/form-message.component.html","../../../libs/ui-components/form-message/src/agorapulse-ui-components-form-message.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apErrorFill, apRoundedCheckFill } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, computed, inject, signal } from '@angular/core';\n\nexport type MessageType = 'error' | 'success';\n\n@Component({\n    selector: 'ap-form-message',\n    templateUrl: './form-message.component.html',\n    styleUrls: ['./form-message.component.scss'],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [SymbolComponent],\n    host: {\n        class: 'ap-form-message',\n        '[class.error]': \"messageTypeSignal() === 'error'\",\n        '[class.success]': \"messageTypeSignal() === 'success'\",\n    },\n})\nexport class FormMessageComponent {\n    @Input({ required: true })\n    set messageType(messageType: MessageType) {\n        this.messageTypeSignal.set(messageType);\n    }\n\n    @Input({ required: true })\n    message!: string;\n\n    messageTypeSignal = signal<MessageType>('error');\n\n    symbolIdSignal = computed(() => {\n        return this.messageTypeSignal() === 'error' ? 'error_fill' : 'rounded-check_fill';\n    });\n\n    private symbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);\n    }\n}\n","<ap-symbol\n    size=\"sm\"\n    [symbolId]=\"symbolIdSignal()\" />\n<span>\n    {{ message }}\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAmBa,oBAAoB,CAAA;IAC7B,IACI,WAAW,CAAC,WAAwB,EAAA;AACpC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAC3C;AAGD,IAAA,OAAO,CAAU;AAEjB,IAAA,iBAAiB,GAAG,MAAM,CAAc,OAAO,CAAC,CAAC;AAEjD,IAAA,cAAc,GAAG,QAAQ,CAAC,MAAK;AAC3B,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,KAAK,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAAC;AACtF,KAAC,CAAC,CAAC;AAEK,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEhD,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC;KAC1E;uGAnBQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,mCAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBjC,2GAMA,EAAA,MAAA,EAAA,CAAA,glBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDMc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAOhB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAdhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAGf,UAAA,EAAA,IAAI,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,eAAe,CAAC,EACpB,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,eAAe,EAAE,iCAAiC;AAClD,wBAAA,iBAAiB,EAAE,mCAAmC;AACzD,qBAAA,EAAA,QAAA,EAAA,2GAAA,EAAA,MAAA,EAAA,CAAA,glBAAA,CAAA,EAAA,CAAA;wDAIG,WAAW,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAMzB,OAAO,EAAA,CAAA;sBADN,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;;;AEzB7B;;AAEG;;;;"}
+{"version":3,"file":"agorapulse-ui-components-form-message.mjs","sources":["../../../libs/ui-components/form-message/src/form-message.component.ts","../../../libs/ui-components/form-message/src/form-message.component.html","../../../libs/ui-components/form-message/src/agorapulse-ui-components-form-message.ts"],"sourcesContent":["import { SymbolComponent, SymbolRegistry, apErrorFill, apRoundedCheckFill, APSymbolName } from '@agorapulse/ui-symbol';\nimport { ChangeDetectionStrategy, Component, Input, ViewEncapsulation, computed, inject, signal } from '@angular/core';\n\nexport type MessageType = 'error' | 'success';\n\n@Component({\n    selector: 'ap-form-message',\n    templateUrl: './form-message.component.html',\n    styleUrls: ['./form-message.component.scss'],\n    standalone: true,\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    encapsulation: ViewEncapsulation.None,\n    imports: [SymbolComponent],\n    host: {\n        class: 'ap-form-message',\n        '[class.error]': \"messageTypeSignal() === 'error'\",\n        '[class.success]': \"messageTypeSignal() === 'success'\",\n    },\n})\nexport class FormMessageComponent {\n    @Input({ required: true })\n    set messageType(messageType: MessageType) {\n        this.messageTypeSignal.set(messageType);\n    }\n\n    @Input({ required: true })\n    message!: string;\n\n    messageTypeSignal = signal<MessageType>('error');\n\n    symbolIdSignal = computed<APSymbolName>(() => {\n        return this.messageTypeSignal() === 'error' ? 'error_fill' : 'rounded-check_fill';\n    });\n\n    private symbolRegistry = inject(SymbolRegistry);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apErrorFill, apRoundedCheckFill]);\n    }\n}\n","<ap-symbol\n    size=\"sm\"\n    [symbolId]=\"symbolIdSignal()\" />\n<span>\n    {{ message }}\n</span>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;MAmBa,oBAAoB,CAAA;IAC7B,IACI,WAAW,CAAC,WAAwB,EAAA;AACpC,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;KAC3C;AAGD,IAAA,OAAO,CAAU;AAEjB,IAAA,iBAAiB,GAAG,MAAM,CAAc,OAAO,CAAC,CAAC;AAEjD,IAAA,cAAc,GAAG,QAAQ,CAAe,MAAK;AACzC,QAAA,OAAO,IAAI,CAAC,iBAAiB,EAAE,KAAK,OAAO,GAAG,YAAY,GAAG,oBAAoB,CAAC;AACtF,KAAC,CAAC,CAAC;AAEK,IAAA,cAAc,GAAG,MAAM,CAAC,cAAc,CAAC,CAAC;AAEhD,IAAA,WAAA,GAAA;QACI,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC,CAAC;KAC1E;uGAnBQ,oBAAoB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA,CAAA;2FAApB,oBAAoB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,WAAA,EAAA,aAAA,EAAA,OAAA,EAAA,SAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,aAAA,EAAA,iCAAA,EAAA,eAAA,EAAA,mCAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBjC,2GAMA,EAAA,MAAA,EAAA,CAAA,glBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDMc,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA,CAAA;;2FAOhB,oBAAoB,EAAA,UAAA,EAAA,CAAA;kBAdhC,SAAS;AACI,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAGf,UAAA,EAAA,IAAI,EACC,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,OAAA,EAC5B,CAAC,eAAe,CAAC,EACpB,IAAA,EAAA;AACF,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,eAAe,EAAE,iCAAiC;AAClD,wBAAA,iBAAiB,EAAE,mCAAmC;AACzD,qBAAA,EAAA,QAAA,EAAA,2GAAA,EAAA,MAAA,EAAA,CAAA,glBAAA,CAAA,EAAA,CAAA;wDAIG,WAAW,EAAA,CAAA;sBADd,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;gBAMzB,OAAO,EAAA,CAAA;sBADN,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAA;;;AEzB7B;;AAEG;;;;"}