@agorapulse/ui-components 20.2.3 → 20.2.4-beta.1

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

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-legacy-select.mjs","sources":["../../../libs/ui-components/legacy/select/src/select.component.ts","../../../libs/ui-components/legacy/select/src/select.component.html","../../../libs/ui-components/legacy/select/src/agorapulse-ui-components-legacy-select.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { CheckboxComponent } from '@agorapulse/ui-components/checkbox';\nimport { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { InputComponent } from '@agorapulse/ui-components/legacy/input';\nimport { TagComponent } from '@agorapulse/ui-components/tag';\nimport {\n    SymbolComponent,\n    SymbolRegistry,\n    apCheck,\n    apDeleteNoCircle,\n    apErrorFill,\n    apPlus,\n    apRoundedCheckFill,\n    apSearch,\n} from '@agorapulse/ui-symbol';\nimport { AsyncPipe, NgTemplateOutlet, SlicePipe } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    DestroyRef,\n    ElementRef,\n    EnvironmentInjector,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnInit,\n    Output,\n    Provider,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    computed,\n    effect,\n    forwardRef,\n    inject,\n    runInInjectionContext,\n    signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { NgOption, NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';\nimport { Observable, debounceTime, fromEvent, of, skip, switchMap, tap } from 'rxjs';\n\nexport type DisplayType = 'text' | 'label' | 'tag' | 'withAvatar';\n\nexport const SELECT_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => SelectComponent),\n    multi: true,\n};\n\n/**\n * @deprecated use NgSelectComponent with directive apSelectSingle or apSelectMultiple\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-select',\n    styleUrls: ['./select.component.scss'],\n    imports: [\n        ReactiveFormsModule,\n        FormsModule,\n        NgSelectModule,\n        InputComponent,\n        SymbolComponent,\n        AsyncPipe,\n        SlicePipe,\n        CheckboxComponent,\n        AvatarComponent,\n        NgTemplateOutlet,\n        LabelComponent,\n        TagComponent,\n        BadgeComponent,\n        LoaderComponent,\n    ],\n    providers: [SELECT_VALUE_ACCESSOR],\n    templateUrl: './select.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class SelectComponent<T extends Record<string, unknown> | string> implements OnInit, AfterViewInit, ControlValueAccessor {\n    private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n    private destroyRef: DestroyRef = inject(DestroyRef);\n    private elementRef: ElementRef = inject(ElementRef);\n\n    @ViewChild('searchInput') searchInput!: InputComponent;\n    @ViewChild('inlineLabel') inlineLabelElement!: ElementRef<HTMLDivElement>;\n    @ViewChild('select') select!: NgSelectComponent;\n\n    @HostBinding('class.hovered') hovered: boolean = false;\n\n    optionsSignal = signal<T[]>([]);\n    @Input({ required: true }) set options(options: T[]) {\n        this.optionsSignal.set(options);\n        this.filteredOptionsSignal.set(options);\n    }\n\n    @Input() ariaLabel!: string;\n    @Input() ariaLabelledBy!: string;\n    @Input() ariaDescribedBy!: string;\n    @Input() appendTo: string = 'body';\n    @Input() clearable: boolean = false;\n    @Input() description?: string;\n    @Input() disabled: boolean = false;\n    @Input() selectId?: string;\n\n    private _inline: boolean = false;\n    @HostBinding('class.inline')\n    @Input()\n    set inlineLabel(inlineLabel: boolean) {\n        this._inline = inlineLabel;\n        if (!this.inlineLabelElement) {\n            return;\n        }\n        this.elementRef.nativeElement.style.setProperty(\n            '--placeholder-padding-left',\n            `${this.inlineLabelElement.nativeElement.clientWidth}px`\n        );\n    }\n\n    get inlineLabel(): boolean {\n        return this._inline;\n    }\n\n    @Input() create: boolean = false;\n    @Input() createText: string = 'Create';\n    @Input() group: boolean = false;\n    @Input() selectableGroup: boolean = true;\n    @Input() label: string = '';\n    @Input() multiple: boolean = false;\n    @Input() only: boolean = false;\n    @Input() onlyText: string = 'Only';\n    @Input() placeholder: string = 'Select...';\n    @Input() selectAll: boolean = false;\n    @Input() selectAllText: string = 'Select all';\n    @Input() unselectAllText: string = 'Unselect all';\n    @Input() searchable: boolean = false;\n    @Input() searchPlaceholder: string = 'Search...';\n    @Input() searchFn: (term: string) => Observable<T[]> = this.defaultSearchFn;\n    @Input() notFoundText: string = 'No results found';\n    @Input() loadingText: string = 'Loading items';\n    @Input() set displayType(displayType: DisplayType) {\n        this.displayTypeSignal.set(displayType);\n    }\n\n    @Input() optionLabel?: string;\n    @Input() optionCaption?: string;\n    @Input() optionDivider?: string = 'divider';\n    @Input() optionProfileImageUrl?: string;\n    @Input() optionBadgeLabel?: string;\n    @Input() optionValue?: string;\n    @Input() optionDisabled: string = 'disabled';\n    @Input() optionGroupLabel: string = 'group';\n    @Input() optionGroupTag?: Record<string, string>;\n    @Input() set maximumDisplayOptions(maximumDisplayOptions: number) {\n        this.maximumDisplayValuesSignal.set(maximumDisplayOptions);\n    }\n    @Input() customOptionTemplate?: TemplateRef<{ option: T }>;\n    @Input() customLabelTemplate?: TemplateRef<{ option: T }>;\n    @Input() customMultiLabelTemplate?: TemplateRef<{ options: T[] }>;\n    @Input() errorMessage?: string;\n    @Input() successMessage?: string;\n\n    @Input() compareWith!: (a: any, b: any) => boolean;\n\n    @Output() createNew: EventEmitter<string> = new EventEmitter();\n    @Output() valueChanges = new EventEmitter<unknown[]>();\n\n    private _controlValueAccessorChangeFn!: (value: unknown[]) => void;\n    onTouched!: () => void;\n    displayTypeSignal = signal<DisplayType>('text');\n\n    enabledOptions = computed<T[]>(() => {\n        return this.optionsSignal().filter((value: T) => {\n            if (typeof value === 'string') {\n                return value;\n            } else {\n                return this.optionDisabled && !value[this.optionDisabled];\n            }\n        });\n    });\n\n    itemHoveredSignal = signal<string | null>(null);\n    filteredOptionsSignal = signal<T[]>([]);\n    loadingSignal = signal<boolean>(false);\n    selectedValuesSignal = signal<unknown[]>([]);\n    searchTermSignal = signal<string>('');\n    searchTerm$ = toObservable(this.searchTermSignal);\n    maximumDisplayValuesSignal = signal<number>(-1);\n    hiddenCountSignal = signal<number>(0);\n\n    allSelectedSignal = computed<boolean>(() => {\n        return this.selectedValuesSignal().length === this.enabledOptions().length;\n    });\n    partialySelectedSignal = computed<boolean>(() => {\n        return this.selectedValuesSignal().length > 0 && this.selectedValuesSignal().length < this.enabledOptions().length;\n    });\n\n    private injector = inject(EnvironmentInjector);\n    private selectValueContainer!: HTMLElement;\n    private selectValueContainerWidthSignal = signal(0);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apCheck, apErrorFill, apRoundedCheckFill, apSearch, apPlus, apDeleteNoCircle]);\n    }\n\n    writeValue(selectedValues: unknown[] = []): void {\n        this.selectedValuesSignal.set(selectedValues);\n    }\n\n    registerOnChange(fn: (value: unknown[]) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    ngOnInit(): void {\n        if (this.multiple && (!this.displayTypeSignal() || this.displayTypeSignal() === 'text')) {\n            console.warn('Display type \"text\" is not supported for multiple select. Switching to \"label\".');\n            this.displayTypeSignal.set('label');\n        }\n        this.searchTerm$\n            .pipe(\n                debounceTime(250),\n                skip(1),\n                tap(() => {\n                    this.loadingSignal.set(true);\n                    this.optionsSignal.set([]);\n                }),\n                switchMap((term: string) => this.searchFn(term)),\n                tap(() => {\n                    this.loadingSignal.set(false);\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe((options: T[]) => {\n                this.optionsSignal.set(options);\n            });\n    }\n\n    ngAfterViewInit(): void {\n        if (this.inlineLabelElement) {\n            this.elementRef.nativeElement.style.setProperty(\n                '--placeholder-padding-left',\n                `${this.inlineLabelElement.nativeElement.clientWidth}px`\n            );\n        }\n        this.selectValueContainer = this.select.element.getElementsByClassName('ng-value-container')[0] as HTMLElement;\n        if (this.multiple) {\n            fromEvent(window, 'resize')\n                .pipe(debounceTime(200), takeUntilDestroyed(this.destroyRef))\n                .subscribe(() => {\n                    this.updateSelectValueContainerWidthSignal();\n                });\n        }\n        this.updateSelectValueContainerWidthSignal();\n        runInInjectionContext(this.injector, () => {\n            effect(\n                () => {\n                    if (this.multiple) {\n                        const selectedValues = this.selectedValuesSignal();\n                        const selectValueContainerWidthSignal = this.selectValueContainerWidthSignal();\n                        const timeout = setTimeout(() => {\n                            this.calculateResponsiveLabels(selectValueContainerWidthSignal, selectedValues);\n                        }, 100);\n                        return () => {\n                            clearTimeout(timeout);\n                        };\n                    }\n                    return;\n                },\n                {\n                    allowSignalWrites: true,\n                }\n            );\n        });\n    }\n\n    onSearchTermChange(searchTerm: string): void {\n        this.searchTermSignal.set(searchTerm);\n    }\n\n    private defaultSearchFn(term: string): Observable<T[]> {\n        return of(\n            this.filteredOptionsSignal().filter((option: T) => {\n                if (typeof option === 'string') {\n                    return option.toLowerCase().includes(term.toLowerCase());\n                }\n                if (this.optionLabel) {\n                    return String(option[this.optionLabel]).toLowerCase().includes(term.toLowerCase());\n                }\n                return option;\n            })\n        );\n    }\n\n    isGroupIndeterminate(children: NgOption[]) {\n        return children.some((child: NgOption) => child.selected) && !this.isGroupChecked(children);\n    }\n\n    isGroupDisabled(children: NgOption[]): boolean {\n        return children.every((child: NgOption) => child.disabled);\n    }\n\n    isGroupChecked(children: NgOption[]): boolean {\n        return children.every((child: NgOption) => child.disabled || child.selected) && !this.isGroupDisabled(children);\n    }\n\n    onSelectOnly(item: T): void {\n        if (typeof item === 'string') {\n            this.selectedValuesSignal.set([item]);\n        } else {\n            this.optionValue ? this.selectedValuesSignal.set([item[this.optionValue]]) : this.selectedValuesSignal.set([item]);\n        }\n        this.callControlValueAccessorChangeFn();\n    }\n\n    onSelectOpened(): void {\n        setTimeout(() => {\n            if (this.onTouched) {\n                this.onTouched();\n            }\n            if (this.searchable && !!this.searchFn) {\n                this.searchInput.focusInput();\n            }\n        });\n    }\n\n    onHoverItem(htmlid: string): void {\n        if (!this.multiple || this.disabled) {\n            return;\n        }\n        this.itemHoveredSignal.set(htmlid);\n    }\n\n    onLeaveItem(): void {\n        if (!this.multiple || this.disabled) {\n            return;\n        }\n        this.itemHoveredSignal.set(null);\n    }\n\n    onToggleAll(): void {\n        if (this.partialySelectedSignal() || this.allSelectedSignal()) {\n            this.selectedValuesSignal.set([]);\n        } else {\n            this.selectedValuesSignal.set(\n                this.enabledOptions().map((value: T) => {\n                    if (typeof value === 'string') {\n                        return value;\n                    }\n                    return this.optionValue ? value[this.optionValue] : value;\n                })\n            );\n        }\n        this.callControlValueAccessorChangeFn();\n    }\n\n    onSelectedValuesChange(selectedValues: unknown[]): void {\n        this.selectedValuesSignal.set(selectedValues);\n        this.callControlValueAccessorChangeFn();\n    }\n\n    onOpenSelect(): void {\n        this.select.open();\n    }\n\n    onInlineInputEnter(): void {\n        this.hovered = true;\n    }\n\n    onInlineInputLeave(): void {\n        this.hovered = false;\n    }\n\n    onCreateNew(): void {\n        this.createNew.emit(this.searchTermSignal());\n        this.select.close();\n    }\n\n    removeSelectedItem({ $event }: { $event: PointerEvent | MouseEvent }, item: T): void {\n        if ($event) {\n            $event.stopImmediatePropagation();\n        }\n        const selectedItemId = typeof item === 'string' ? item : this.optionValue ? item[this.optionValue] : item;\n        this.selectedValuesSignal.update((selectedValues: unknown[]) =>\n            selectedValues.filter((selectedValue: unknown) => selectedValue !== selectedItemId)\n        );\n        this.callControlValueAccessorChangeFn();\n    }\n\n    private callControlValueAccessorChangeFn() {\n        this.valueChanges.emit(this.selectedValuesSignal());\n        if (this._controlValueAccessorChangeFn) {\n            this._controlValueAccessorChangeFn(this.selectedValuesSignal());\n        }\n    }\n\n    private updateSelectValueContainerWidthSignal() {\n        if (this.selectValueContainer) {\n            const remainingPlaceHolderWidth = 100;\n            const selectValueContainerWidth = this.selectValueContainer.clientWidth - remainingPlaceHolderWidth;\n            this.selectValueContainerWidthSignal.set(selectValueContainerWidth);\n        }\n    }\n\n    private calculateResponsiveLabels(containerWidth: number, selectedValues: unknown[]): void {\n        if (!selectedValues || selectedValues.length === 0) {\n            this.hiddenCountSignal.set(0);\n            return;\n        }\n        const itemsContainer = this.selectValueContainer.getElementsByClassName('multiple-item')[0] as HTMLElement;\n        const items = this.selectValueContainer.getElementsByClassName('item');\n        let totalWidth = 0;\n        let hiddenCount = 0;\n        const itemGap = 4;\n        for (let index = 0; index < items.length; index++) {\n            const item = items[index];\n            const itemWidth = item.clientWidth + itemGap;\n            if (totalWidth + itemWidth < containerWidth && !hiddenCount) {\n                totalWidth += itemWidth;\n                (item as HTMLElement).style.visibility = 'visible';\n            } else {\n                (item as HTMLElement).style.visibility = 'hidden';\n                hiddenCount++;\n            }\n        }\n        itemsContainer.style.maxWidth = `${totalWidth}px`;\n        this.hiddenCountSignal.set(hiddenCount);\n    }\n}\n","@if (label && !inlineLabel) {\n    <label [for]=\"selectId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n@if (inlineLabel) {\n    <div\n        #inlineLabel\n        tabindex=\"0\"\n        class=\"inline-label\"\n        (click)=\"onOpenSelect()\"\n        (keydown.enter)=\"onOpenSelect()\"\n        (mouseenter)=\"onInlineInputEnter()\"\n        (mouseleave)=\"onInlineInputLeave()\">\n        @if (label && inlineLabel) {\n            <label\n                class=\"label\"\n                [for]=\"selectId\">\n                <span>\n                    {{ label }}\n                </span>\n            </label>\n        }\n        <div class=\"divider\"></div>\n    </div>\n}\n\n<ng-select\n    #select\n    class=\"ap-select-legacy\"\n    [tabIndex]=\"0\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [labelForId]=\"selectId\"\n    [searchable]=\"false\"\n    [closeOnSelect]=\"!multiple\"\n    [bindValue]=\"optionValue ? optionValue : ''\"\n    [groupBy]=\"group ? optionGroupLabel : ''\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    [markFirst]=\"false\"\n    [selectableGroup]=\"selectableGroup\"\n    [selectableGroupAsModel]=\"false\"\n    [appendTo]=\"appendTo\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [items]=\"optionsSignal()\"\n    [compareWith]=\"compareWith\"\n    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    (ngModelChange)=\"onSelectedValuesChange($event)\"\n    (open)=\"onSelectOpened()\">\n    @if (searchable || selectAll) {\n        <ng-template\n            let-item=\"item\"\n            ng-header-tmp>\n            @if (searchable) {\n                <ap-input\n                    #searchInput\n                    tabindex=\"0\"\n                    name=\"search-input\"\n                    class=\"full-width\"\n                    symbolId=\"search\"\n                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\" />\n            }\n            @if (selectAll) {\n                <ap-checkbox\n                    class=\"select-all-checkbox\"\n                    name=\"option-group-select-all\"\n                    [indeterminate]=\"partialySelectedSignal()\"\n                    [checked]=\"allSelectedSignal()\"\n                    (click)=\"onToggleAll()\">\n                    <span>\n                        {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n                    </span>\n                </ap-checkbox>\n            }\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-optgroup-tmp>\n        <div\n            class=\"group\"\n            [class.with-search]=\"searchable\"\n            [class.with-select-all]=\"selectAll\">\n            @if (!multiple) {\n                <span class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n                @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                    <ap-badge color=\"blue\">\n                        {{ optionGroupTag[item[optionGroupLabel]] }}\n                    </ap-badge>\n                }\n            }\n            @if (multiple) {\n                @if (selectableGroup) {\n                    <ap-checkbox\n                        [name]=\"'option-group-selection-' + item['group']\"\n                        [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n                        [checked]=\"isGroupChecked(item$.children)\">\n                        <span class=\"group-label\">\n                            {{ item[optionGroupLabel] }}\n                        </span>\n                        @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                            <ap-badge color=\"blue\">\n                                {{ optionGroupTag[item[optionGroupLabel]] }}\n                            </ap-badge>\n                        }\n                    </ap-checkbox>\n                }\n                @if (!selectableGroup) {\n                    <span class=\"group-label\">\n                        {{ item[optionGroupLabel] }}\n                    </span>\n                }\n            }\n        </div>\n    </ng-template>\n    <ng-template\n        let-items=\"items\"\n        let-item$=\"item$\"\n        ng-multi-label-tmp>\n        <ng-container>\n            <div class=\"multiple-item\">\n                @if (!customMultiLabelTemplate) {\n                    @for (item of items; track item) {\n                        @if (optionLabel && item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item[optionLabel]\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    color=\"blue\"\n                                    class=\"item\"\n                                    removable=\"true\"\n                                    [content]=\"item[optionLabel]\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    clearable=\"true\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    {{ item[optionLabel] }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span\n                                        class=\"text-item\"\n                                        [title]=\"item[optionLabel]\">\n                                        {{ item[optionLabel] }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                        @if (!optionLabel || !item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item\">\n                                    {{ item }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    class=\"item\"\n                                    color=\"blue\"\n                                    [removable]=\"multiple\"\n                                    [content]=\"item\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    [clearable]=\"multiple\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    {{ item }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span class=\"text-item\">\n                                        {{ item }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                    }\n                }\n                @if (customMultiLabelTemplate) {\n                    <ng-container *ngTemplateOutlet=\"customMultiLabelTemplate; context: { options: items }\" />\n                }\n            </div>\n            @if (hiddenCountSignal() > 0) {\n                <div class=\"remaining\">\n                    @if (displayTypeSignal() === 'text' || displayTypeSignal() === 'withAvatar' || !displayTypeSignal()) {\n                        <span class=\"text-item\">+{{ hiddenCountSignal() }}</span>\n                    }\n                    @if (displayTypeSignal() === 'tag') {\n                        <ap-tag\n                            class=\"text-item\"\n                            clearable=\"false\">\n                            +{{ hiddenCountSignal() }}\n                        </ap-tag>\n                    }\n                    @if (displayTypeSignal() === 'label') {\n                        <ap-label\n                            color=\"blue\"\n                            [removable]=\"false\"\n                            [content]=\"'+' + hiddenCountSignal()\" />\n                    }\n                </div>\n            }\n        </ng-container>\n    </ng-template>\n    <ng-template ng-loadingtext-tmp>\n        <div class=\"loading-state\">\n            <ap-loader diameter=\"30\" />\n            <span>\n                {{ loadingText }}\n            </span>\n        </div>\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp></ng-template>\n    @if (create) {\n        <ng-template ng-footer-tmp>\n            <button\n                class=\"create-new\"\n                type=\"button\"\n                (click)=\"onCreateNew()\">\n                <ap-symbol\n                    symbolId=\"plus\"\n                    size=\"sm\" />\n                <span>\n                    {{ createText }}\n                </span>\n                @if (searchTermSignal()) {\n                    \"{{ searchTermSignal() }}\"\n                }\n            </button>\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-option-tmp>\n        @if ((!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider]) && !customOptionTemplate) {\n            <div class=\"option\">\n                <span\n                    class=\"option-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n                @if (item$.selected && !multiple) {\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"electric-blue\"\n                        size=\"sm\" />\n                }\n            </div>\n        }\n        @if ((optionLabel && item[optionLabel]) || customOptionTemplate) {\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionCaption && item[optionCaption]\"\n                [class.multiple]=\"multiple\"\n                (mouseenter)=\"onHoverItem(item$.htmlId)\"\n                (mouseleave)=\"onLeaveItem()\">\n                <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n            </div>\n        }\n        @if (optionDivider && item[optionDivider]) {\n            <div class=\"divider\"></div>\n        }\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        ng-label-tmp>\n        @if (customLabelTemplate) {\n            <ng-container *ngTemplateOutlet=\"customLabelTemplate; context: { option: item }\" />\n        }\n        @if (!optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span\n                    class=\"text-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            }\n        }\n        @if (optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    [title]=\"item[optionLabel]\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <div class=\"with-avatar\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    <span\n                        class=\"text-item\"\n                        [title]=\"item[optionLabel]\">\n                        {{ item[optionLabel] }}\n                    </span>\n                </div>\n            }\n        }\n    </ng-template>\n    <ng-template ng-notfound-tmp>\n        <div class=\"option not-found\">\n            {{ notFoundText }}\n        </div>\n    </ng-template>\n</ng-select>\n\n<ng-template\n    #contentItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    @if (multiple) {\n        <div class=\"disabled-opaque\"></div>\n        @if (multiple) {\n            <ap-checkbox\n                [checked]=\"item$.selected\"\n                [disabled]=\"item$.disabled\"\n                [name]=\"'option-selection-' + item$.htmlId\">\n                <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n            </ap-checkbox>\n        }\n    }\n    @if (!multiple) {\n        <div class=\"disabled-opaque\"></div>\n        <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n    }\n</ng-template>\n\n<ng-template\n    #textItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <div class=\"content\">\n        @if (!customOptionTemplate) {\n            @if (!optionLabel) {\n                <span class=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (optionProfileImageUrl) {\n                <ap-avatar\n                    size=\"24\"\n                    [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                    [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                    [showInitials]=\"true\" />\n            }\n            @if (optionLabel && item[optionLabel]) {\n                <div class=\"texts\">\n                    <div class=\"first-line\">\n                        <span\n                            class=\"label\"\n                            [title]=\"item[optionLabel]\">\n                            {{ item[optionLabel] }}\n                        </span>\n                        @if (optionBadgeLabel && item[optionBadgeLabel]) {\n                            <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n                        }\n                    </div>\n                    @if (optionCaption && item[optionCaption]) {\n                        <span\n                            class=\"caption\"\n                            [title]=\"item[optionCaption]\">\n                            {{ item[optionCaption] }}\n                        </span>\n                    }\n                </div>\n            }\n        }\n        @if (customOptionTemplate) {\n            <ng-container *ngTemplateOutlet=\"customOptionTemplate; context: { option: item }\" />\n        }\n        @if (only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"onSelectOnly(item)\">\n                {{ onlyText }}\n            </button>\n        }\n        @if (item$.selected && !multiple) {\n            <ap-symbol\n                symbolId=\"check\"\n                color=\"electric-blue\"\n                size=\"sm\" />\n        }\n    </div>\n</ng-template>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgDO,MAAM,qBAAqB,GAAa;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,IAAA,KAAK,EAAE,IAAI;;AAGf;;AAEG;MAyBU,eAAe,CAAA;AAChB,IAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC;AACvD,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC;AAC3C,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC;AAEzB,IAAA,WAAW;AACX,IAAA,kBAAkB;AACvB,IAAA,MAAM;IAEG,OAAO,GAAY,KAAK;AAEtD,IAAA,aAAa,GAAG,MAAM,CAAM,EAAE,yDAAC;IAC/B,IAA+B,OAAO,CAAC,OAAY,EAAA;AAC/C,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;AAC/B,QAAA,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC;;AAGlC,IAAA,SAAS;AACT,IAAA,cAAc;AACd,IAAA,eAAe;IACf,QAAQ,GAAW,MAAM;IACzB,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;AACzB,IAAA,QAAQ;IAET,OAAO,GAAY,KAAK;IAChC,IAEI,WAAW,CAAC,WAAoB,EAAA;AAChC,QAAA,IAAI,CAAC,OAAO,GAAG,WAAW;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC1B;;QAEJ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAC3C,4BAA4B,EAC5B,CAAA,EAAG,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,WAAW,CAAA,EAAA,CAAI,CAC3D;;AAGL,IAAA,IAAI,WAAW,GAAA;QACX,OAAO,IAAI,CAAC,OAAO;;IAGd,MAAM,GAAY,KAAK;IACvB,UAAU,GAAW,QAAQ;IAC7B,KAAK,GAAY,KAAK;IACtB,eAAe,GAAY,IAAI;IAC/B,KAAK,GAAW,EAAE;IAClB,QAAQ,GAAY,KAAK;IACzB,IAAI,GAAY,KAAK;IACrB,QAAQ,GAAW,MAAM;IACzB,WAAW,GAAW,WAAW;IACjC,SAAS,GAAY,KAAK;IAC1B,aAAa,GAAW,YAAY;IACpC,eAAe,GAAW,cAAc;IACxC,UAAU,GAAY,KAAK;IAC3B,iBAAiB,GAAW,WAAW;AACvC,IAAA,QAAQ,GAAsC,IAAI,CAAC,eAAe;IAClE,YAAY,GAAW,kBAAkB;IACzC,WAAW,GAAW,eAAe;IAC9C,IAAa,WAAW,CAAC,WAAwB,EAAA;AAC7C,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC;;AAGlC,IAAA,WAAW;AACX,IAAA,aAAa;IACb,aAAa,GAAY,SAAS;AAClC,IAAA,qBAAqB;AACrB,IAAA,gBAAgB;AAChB,IAAA,WAAW;IACX,cAAc,GAAW,UAAU;IACnC,gBAAgB,GAAW,OAAO;AAClC,IAAA,cAAc;IACvB,IAAa,qBAAqB,CAAC,qBAA6B,EAAA;AAC5D,QAAA,IAAI,CAAC,0BAA0B,CAAC,GAAG,CAAC,qBAAqB,CAAC;;AAErD,IAAA,oBAAoB;AACpB,IAAA,mBAAmB;AACnB,IAAA,wBAAwB;AACxB,IAAA,YAAY;AACZ,IAAA,cAAc;AAEd,IAAA,WAAW;AAEV,IAAA,SAAS,GAAyB,IAAI,YAAY,EAAE;AACpD,IAAA,YAAY,GAAG,IAAI,YAAY,EAAa;AAE9C,IAAA,6BAA6B;AACrC,IAAA,SAAS;AACT,IAAA,iBAAiB,GAAG,MAAM,CAAc,MAAM,6DAAC;AAE/C,IAAA,cAAc,GAAG,QAAQ,CAAM,MAAK;QAChC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,KAAQ,KAAI;AAC5C,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,KAAK;;iBACT;gBACH,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC;;AAEjE,SAAC,CAAC;AACN,KAAC,0DAAC;AAEF,IAAA,iBAAiB,GAAG,MAAM,CAAgB,IAAI,6DAAC;AAC/C,IAAA,qBAAqB,GAAG,MAAM,CAAM,EAAE,iEAAC;AACvC,IAAA,aAAa,GAAG,MAAM,CAAU,KAAK,yDAAC;AACtC,IAAA,oBAAoB,GAAG,MAAM,CAAY,EAAE,gEAAC;AAC5C,IAAA,gBAAgB,GAAG,MAAM,CAAS,EAAE,4DAAC;AACrC,IAAA,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC;AACjD,IAAA,0BAA0B,GAAG,MAAM,CAAS,CAAC,CAAC,sEAAC;AAC/C,IAAA,iBAAiB,GAAG,MAAM,CAAS,CAAC,6DAAC;AAErC,IAAA,iBAAiB,GAAG,QAAQ,CAAU,MAAK;AACvC,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM;AAC9E,KAAC,6DAAC;AACF,IAAA,sBAAsB,GAAG,QAAQ,CAAU,MAAK;QAC5C,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM;AACtH,KAAC,kEAAC;AAEM,IAAA,QAAQ,GAAG,MAAM,CAAC,mBAAmB,CAAC;AACtC,IAAA,oBAAoB;AACpB,IAAA,+BAA+B,GAAG,MAAM,CAAC,CAAC,2EAAC;AAEnD,IAAA,WAAA,GAAA;AACI,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,EAAE,gBAAgB,CAAC,CAAC;;IAGvH,UAAU,CAAC,iBAA4B,EAAE,EAAA;AACrC,QAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,cAAc,CAAC;;AAGjD,IAAA,gBAAgB,CAAC,EAA8B,EAAA;AAC3C,QAAA,IAAI,CAAC,6BAA6B,GAAG,EAAE;;AAG3C,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAGvB,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;;IAG9B,QAAQ,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,KAAK,MAAM,CAAC,EAAE;AACrF,YAAA,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC;AAC/F,YAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC;;AAEvC,QAAA,IAAI,CAAC;AACA,aAAA,IAAI,CACD,YAAY,CAAC,GAAG,CAAC,EACjB,IAAI,CAAC,CAAC,CAAC,EACP,GAAG,CAAC,MAAK;AACL,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;SAC7B,CAAC,EACF,SAAS,CAAC,CAAC,IAAY,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAChD,GAAG,CAAC,MAAK;AACL,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;SAChC,CAAC,EACF,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AAEtC,aAAA,SAAS,CAAC,CAAC,OAAY,KAAI;AACxB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;AACnC,SAAC,CAAC;;IAGV,eAAe,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAC3C,4BAA4B,EAC5B,CAAA,EAAG,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,WAAW,CAAA,EAAA,CAAI,CAC3D;;AAEL,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAgB;AAC9G,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,SAAS,CAAC,MAAM,EAAE,QAAQ;AACrB,iBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;iBAC3D,SAAS,CAAC,MAAK;gBACZ,IAAI,CAAC,qCAAqC,EAAE;AAChD,aAAC,CAAC;;QAEV,IAAI,CAAC,qCAAqC,EAAE;AAC5C,QAAA,qBAAqB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAK;YACtC,MAAM,CACF,MAAK;AACD,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,oBAAA,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE;AAClD,oBAAA,MAAM,+BAA+B,GAAG,IAAI,CAAC,+BAA+B,EAAE;AAC9E,oBAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;AAC5B,wBAAA,IAAI,CAAC,yBAAyB,CAAC,+BAA+B,EAAE,cAAc,CAAC;qBAClF,EAAE,GAAG,CAAC;AACP,oBAAA,OAAO,MAAK;wBACR,YAAY,CAAC,OAAO,CAAC;AACzB,qBAAC;;gBAEL;AACJ,aAAC,EACD;AACI,gBAAA,iBAAiB,EAAE,IAAI;AAC1B,aAAA,CACJ;AACL,SAAC,CAAC;;AAGN,IAAA,kBAAkB,CAAC,UAAkB,EAAA;AACjC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC;;AAGjC,IAAA,eAAe,CAAC,IAAY,EAAA;AAChC,QAAA,OAAO,EAAE,CACL,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAC,MAAS,KAAI;AAC9C,YAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AAC5B,gBAAA,OAAO,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;AAE5D,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;AAEtF,YAAA,OAAO,MAAM;SAChB,CAAC,CACL;;AAGL,IAAA,oBAAoB,CAAC,QAAoB,EAAA;QACrC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAe,KAAK,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;;AAG/F,IAAA,eAAe,CAAC,QAAoB,EAAA;AAChC,QAAA,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAe,KAAK,KAAK,CAAC,QAAQ,CAAC;;AAG9D,IAAA,cAAc,CAAC,QAAoB,EAAA;QAC/B,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAe,KAAK,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;;AAGnH,IAAA,YAAY,CAAC,IAAO,EAAA;AAChB,QAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC1B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;;aAClC;AACH,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;;QAEtH,IAAI,CAAC,gCAAgC,EAAE;;IAG3C,cAAc,GAAA;QACV,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,SAAS,EAAE;;YAEpB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;AACpC,gBAAA,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;;AAErC,SAAC,CAAC;;AAGN,IAAA,WAAW,CAAC,MAAc,EAAA;QACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjC;;AAEJ,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC;;IAGtC,WAAW,GAAA;QACP,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjC;;AAEJ,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC;;IAGpC,WAAW,GAAA;QACP,IAAI,IAAI,CAAC,sBAAsB,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;AAC3D,YAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,EAAE,CAAC;;aAC9B;AACH,YAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CACzB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAQ,KAAI;AACnC,gBAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,oBAAA,OAAO,KAAK;;AAEhB,gBAAA,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK;aAC5D,CAAC,CACL;;QAEL,IAAI,CAAC,gCAAgC,EAAE;;AAG3C,IAAA,sBAAsB,CAAC,cAAyB,EAAA;AAC5C,QAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,cAAc,CAAC;QAC7C,IAAI,CAAC,gCAAgC,EAAE;;IAG3C,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;IAGtB,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;IAGvB,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;IAGxB,WAAW,GAAA;QACP,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAC5C,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;;AAGvB,IAAA,kBAAkB,CAAC,EAAE,MAAM,EAAyC,EAAE,IAAO,EAAA;QACzE,IAAI,MAAM,EAAE;YACR,MAAM,CAAC,wBAAwB,EAAE;;AAErC,QAAA,MAAM,cAAc,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI;QACzG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,cAAyB,KACvD,cAAc,CAAC,MAAM,CAAC,CAAC,aAAsB,KAAK,aAAa,KAAK,cAAc,CAAC,CACtF;QACD,IAAI,CAAC,gCAAgC,EAAE;;IAGnC,gCAAgC,GAAA;QACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACnD,QAAA,IAAI,IAAI,CAAC,6BAA6B,EAAE;YACpC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;;;IAI/D,qCAAqC,GAAA;AACzC,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC3B,MAAM,yBAAyB,GAAG,GAAG;YACrC,MAAM,yBAAyB,GAAG,IAAI,CAAC,oBAAoB,CAAC,WAAW,GAAG,yBAAyB;AACnG,YAAA,IAAI,CAAC,+BAA+B,CAAC,GAAG,CAAC,yBAAyB,CAAC;;;IAInE,yBAAyB,CAAC,cAAsB,EAAE,cAAyB,EAAA;QAC/E,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAChD,YAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;YAC7B;;AAEJ,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAgB;QAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,MAAM,CAAC;QACtE,IAAI,UAAU,GAAG,CAAC;QAClB,IAAI,WAAW,GAAG,CAAC;QACnB,MAAM,OAAO,GAAG,CAAC;AACjB,QAAA,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;AAC/C,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;AACzB,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,OAAO;YAC5C,IAAI,UAAU,GAAG,SAAS,GAAG,cAAc,IAAI,CAAC,WAAW,EAAE;gBACzD,UAAU,IAAI,SAAS;AACtB,gBAAA,IAAoB,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS;;iBAC/C;AACF,gBAAA,IAAoB,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ;AACjD,gBAAA,WAAW,EAAE;;;QAGrB,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAA,EAAG,UAAU,IAAI;AACjD,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC;;uGAlWlC,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,aAAA,EAAA,eAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,wBAAA,EAAA,0BAAA,EAAA,YAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,cAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAJb,CAAC,qBAAqB,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7EtC,+poBA8fA,EAAA,MAAA,EAAA,CAAA,kgvBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhcQ,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,2BAAA,EAAA,YAAA,EAAA,aAAA,EAAA,cAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,SAAA,EAAA,eAAA,EAAA,cAAA,EAAA,aAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,SAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,UAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,QAAA,EAAA,YAAA,EAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,OAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,6BAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,8BAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iCAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,WAAA,EAAA,WAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,aAAA,EAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAGf,iBAAiB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,eAAA,EAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,KAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,EAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,YAAY,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,cAAc,wEACd,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAMV,eAAe,EAAA,UAAA,EAAA,CAAA;kBAxB3B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,EAAA,OAAA,EAEZ;wBACL,mBAAmB;wBACnB,WAAW;wBACX,cAAc;wBACd,cAAc;wBACd,eAAe;wBACf,SAAS;wBACT,SAAS;wBACT,iBAAiB;wBACjB,eAAe;wBACf,gBAAgB;wBAChB,cAAc;wBACd,YAAY;wBACZ,cAAc;wBACd,eAAe;AAClB,qBAAA,EAAA,SAAA,EACU,CAAC,qBAAqB,CAAC,EAAA,aAAA,EAEnB,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,+poBAAA,EAAA,MAAA,EAAA,CAAA,kgvBAAA,CAAA,EAAA;wDAOX,WAAW,EAAA,CAAA;sBAApC,SAAS;uBAAC,aAAa;gBACE,kBAAkB,EAAA,CAAA;sBAA3C,SAAS;uBAAC,aAAa;gBACH,MAAM,EAAA,CAAA;sBAA1B,SAAS;uBAAC,QAAQ;gBAEW,OAAO,EAAA,CAAA;sBAApC,WAAW;uBAAC,eAAe;gBAGG,OAAO,EAAA,CAAA;sBAArC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAKhB,SAAS,EAAA,CAAA;sBAAjB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBAKG,WAAW,EAAA,CAAA;sBAFd,WAAW;uBAAC,cAAc;;sBAC1B;gBAgBQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACY,WAAW,EAAA,CAAA;sBAAvB;gBAIQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,qBAAqB,EAAA,CAAA;sBAA7B;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACY,qBAAqB,EAAA,CAAA;sBAAjC;gBAGQ,oBAAoB,EAAA,CAAA;sBAA5B;gBACQ,mBAAmB,EAAA,CAAA;sBAA3B;gBACQ,wBAAwB,EAAA,CAAA;sBAAhC;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBAEQ,WAAW,EAAA,CAAA;sBAAnB;gBAES,SAAS,EAAA,CAAA;sBAAlB;gBACS,YAAY,EAAA,CAAA;sBAArB;;;AEvKL;;AAEG;;;;"}
+{"version":3,"file":"agorapulse-ui-components-legacy-select.mjs","sources":["../../../libs/ui-components/legacy/select/src/select.component.ts","../../../libs/ui-components/legacy/select/src/select.component.html","../../../libs/ui-components/legacy/select/src/agorapulse-ui-components-legacy-select.ts"],"sourcesContent":["import { LoaderComponent } from '@agorapulse/ui-animations';\nimport { AvatarComponent } from '@agorapulse/ui-components/avatar';\nimport { BadgeComponent } from '@agorapulse/ui-components/badge';\nimport { CheckboxComponent } from '@agorapulse/ui-components/checkbox';\nimport { LabelComponent } from '@agorapulse/ui-components/labels';\nimport { InputComponent } from '@agorapulse/ui-components/legacy/input';\nimport { TagComponent } from '@agorapulse/ui-components/tag';\nimport {\n    SymbolComponent,\n    SymbolRegistry,\n    apCheck,\n    apClose,\n    apErrorFill,\n    apPlus,\n    apRoundedCheckFill,\n    apSearch,\n} from '@agorapulse/ui-symbol';\nimport { AsyncPipe, NgTemplateOutlet, SlicePipe } from '@angular/common';\nimport {\n    AfterViewInit,\n    ChangeDetectionStrategy,\n    Component,\n    DestroyRef,\n    ElementRef,\n    EnvironmentInjector,\n    EventEmitter,\n    HostBinding,\n    Input,\n    OnInit,\n    Output,\n    Provider,\n    TemplateRef,\n    ViewChild,\n    ViewEncapsulation,\n    computed,\n    effect,\n    forwardRef,\n    inject,\n    runInInjectionContext,\n    signal,\n} from '@angular/core';\nimport { takeUntilDestroyed, toObservable } from '@angular/core/rxjs-interop';\nimport { ControlValueAccessor, FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { NgOption, NgSelectComponent, NgSelectModule } from '@ng-select/ng-select';\nimport { Observable, debounceTime, fromEvent, of, skip, switchMap, tap } from 'rxjs';\n\nexport type DisplayType = 'text' | 'label' | 'tag' | 'withAvatar';\n\nexport const SELECT_VALUE_ACCESSOR: Provider = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => SelectComponent),\n    multi: true,\n};\n\n/**\n * @deprecated use NgSelectComponent with directive apSelectSingle or apSelectMultiple\n */\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-select',\n    styleUrls: ['./select.component.scss'],\n    imports: [\n        ReactiveFormsModule,\n        FormsModule,\n        NgSelectModule,\n        InputComponent,\n        SymbolComponent,\n        AsyncPipe,\n        SlicePipe,\n        CheckboxComponent,\n        AvatarComponent,\n        NgTemplateOutlet,\n        LabelComponent,\n        TagComponent,\n        BadgeComponent,\n        LoaderComponent,\n    ],\n    providers: [SELECT_VALUE_ACCESSOR],\n    templateUrl: './select.component.html',\n    encapsulation: ViewEncapsulation.None,\n})\nexport class SelectComponent<T extends Record<string, unknown> | string> implements OnInit, AfterViewInit, ControlValueAccessor {\n    private symbolRegistry: SymbolRegistry = inject(SymbolRegistry);\n    private destroyRef: DestroyRef = inject(DestroyRef);\n    private elementRef: ElementRef = inject(ElementRef);\n\n    @ViewChild('searchInput') searchInput!: InputComponent;\n    @ViewChild('inlineLabel') inlineLabelElement!: ElementRef<HTMLDivElement>;\n    @ViewChild('select') select!: NgSelectComponent;\n\n    @HostBinding('class.hovered') hovered: boolean = false;\n\n    optionsSignal = signal<T[]>([]);\n    @Input({ required: true }) set options(options: T[]) {\n        this.optionsSignal.set(options);\n        this.filteredOptionsSignal.set(options);\n    }\n\n    @Input() ariaLabel!: string;\n    @Input() ariaLabelledBy!: string;\n    @Input() ariaDescribedBy!: string;\n    @Input() appendTo: string = 'body';\n    @Input() clearable: boolean = false;\n    @Input() description?: string;\n    @Input() disabled: boolean = false;\n    @Input() selectId?: string;\n\n    private _inline: boolean = false;\n    @HostBinding('class.inline')\n    @Input()\n    set inlineLabel(inlineLabel: boolean) {\n        this._inline = inlineLabel;\n        if (!this.inlineLabelElement) {\n            return;\n        }\n        this.elementRef.nativeElement.style.setProperty(\n            '--placeholder-padding-left',\n            `${this.inlineLabelElement.nativeElement.clientWidth}px`\n        );\n    }\n\n    get inlineLabel(): boolean {\n        return this._inline;\n    }\n\n    @Input() create: boolean = false;\n    @Input() createText: string = 'Create';\n    @Input() group: boolean = false;\n    @Input() selectableGroup: boolean = true;\n    @Input() label: string = '';\n    @Input() multiple: boolean = false;\n    @Input() only: boolean = false;\n    @Input() onlyText: string = 'Only';\n    @Input() placeholder: string = 'Select...';\n    @Input() selectAll: boolean = false;\n    @Input() selectAllText: string = 'Select all';\n    @Input() unselectAllText: string = 'Unselect all';\n    @Input() searchable: boolean = false;\n    @Input() searchPlaceholder: string = 'Search...';\n    @Input() searchFn: (term: string) => Observable<T[]> = this.defaultSearchFn;\n    @Input() notFoundText: string = 'No results found';\n    @Input() loadingText: string = 'Loading items';\n    @Input() set displayType(displayType: DisplayType) {\n        this.displayTypeSignal.set(displayType);\n    }\n\n    @Input() optionLabel?: string;\n    @Input() optionCaption?: string;\n    @Input() optionDivider?: string = 'divider';\n    @Input() optionProfileImageUrl?: string;\n    @Input() optionBadgeLabel?: string;\n    @Input() optionValue?: string;\n    @Input() optionDisabled: string = 'disabled';\n    @Input() optionGroupLabel: string = 'group';\n    @Input() optionGroupTag?: Record<string, string>;\n    @Input() set maximumDisplayOptions(maximumDisplayOptions: number) {\n        this.maximumDisplayValuesSignal.set(maximumDisplayOptions);\n    }\n    @Input() customOptionTemplate?: TemplateRef<{ option: T }>;\n    @Input() customLabelTemplate?: TemplateRef<{ option: T }>;\n    @Input() customMultiLabelTemplate?: TemplateRef<{ options: T[] }>;\n    @Input() errorMessage?: string;\n    @Input() successMessage?: string;\n\n    @Input() compareWith!: (a: any, b: any) => boolean;\n\n    @Output() createNew: EventEmitter<string> = new EventEmitter();\n    @Output() valueChanges = new EventEmitter<unknown[]>();\n\n    private _controlValueAccessorChangeFn!: (value: unknown[]) => void;\n    onTouched!: () => void;\n    displayTypeSignal = signal<DisplayType>('text');\n\n    enabledOptions = computed<T[]>(() => {\n        return this.optionsSignal().filter((value: T) => {\n            if (typeof value === 'string') {\n                return value;\n            } else {\n                return this.optionDisabled && !value[this.optionDisabled];\n            }\n        });\n    });\n\n    itemHoveredSignal = signal<string | null>(null);\n    filteredOptionsSignal = signal<T[]>([]);\n    loadingSignal = signal<boolean>(false);\n    selectedValuesSignal = signal<unknown[]>([]);\n    searchTermSignal = signal<string>('');\n    searchTerm$ = toObservable(this.searchTermSignal);\n    maximumDisplayValuesSignal = signal<number>(-1);\n    hiddenCountSignal = signal<number>(0);\n\n    allSelectedSignal = computed<boolean>(() => {\n        return this.selectedValuesSignal().length === this.enabledOptions().length;\n    });\n    partialySelectedSignal = computed<boolean>(() => {\n        return this.selectedValuesSignal().length > 0 && this.selectedValuesSignal().length < this.enabledOptions().length;\n    });\n\n    private injector = inject(EnvironmentInjector);\n    private selectValueContainer!: HTMLElement;\n    private selectValueContainerWidthSignal = signal(0);\n\n    constructor() {\n        this.symbolRegistry.registerSymbols([apCheck, apErrorFill, apRoundedCheckFill, apSearch, apPlus, apClose]);\n    }\n\n    writeValue(selectedValues: unknown[] = []): void {\n        this.selectedValuesSignal.set(selectedValues);\n    }\n\n    registerOnChange(fn: (value: unknown[]) => void): void {\n        this._controlValueAccessorChangeFn = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouched = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    ngOnInit(): void {\n        if (this.multiple && (!this.displayTypeSignal() || this.displayTypeSignal() === 'text')) {\n            console.warn('Display type \"text\" is not supported for multiple select. Switching to \"label\".');\n            this.displayTypeSignal.set('label');\n        }\n        this.searchTerm$\n            .pipe(\n                debounceTime(250),\n                skip(1),\n                tap(() => {\n                    this.loadingSignal.set(true);\n                    this.optionsSignal.set([]);\n                }),\n                switchMap((term: string) => this.searchFn(term)),\n                tap(() => {\n                    this.loadingSignal.set(false);\n                }),\n                takeUntilDestroyed(this.destroyRef)\n            )\n            .subscribe((options: T[]) => {\n                this.optionsSignal.set(options);\n            });\n    }\n\n    ngAfterViewInit(): void {\n        if (this.inlineLabelElement) {\n            this.elementRef.nativeElement.style.setProperty(\n                '--placeholder-padding-left',\n                `${this.inlineLabelElement.nativeElement.clientWidth}px`\n            );\n        }\n        this.selectValueContainer = this.select.element.getElementsByClassName('ng-value-container')[0] as HTMLElement;\n        if (this.multiple) {\n            fromEvent(window, 'resize')\n                .pipe(debounceTime(200), takeUntilDestroyed(this.destroyRef))\n                .subscribe(() => {\n                    this.updateSelectValueContainerWidthSignal();\n                });\n        }\n        this.updateSelectValueContainerWidthSignal();\n        runInInjectionContext(this.injector, () => {\n            effect(\n                () => {\n                    if (this.multiple) {\n                        const selectedValues = this.selectedValuesSignal();\n                        const selectValueContainerWidthSignal = this.selectValueContainerWidthSignal();\n                        const timeout = setTimeout(() => {\n                            this.calculateResponsiveLabels(selectValueContainerWidthSignal, selectedValues);\n                        }, 100);\n                        return () => {\n                            clearTimeout(timeout);\n                        };\n                    }\n                    return;\n                },\n                {\n                    allowSignalWrites: true,\n                }\n            );\n        });\n    }\n\n    onSearchTermChange(searchTerm: string): void {\n        this.searchTermSignal.set(searchTerm);\n    }\n\n    private defaultSearchFn(term: string): Observable<T[]> {\n        return of(\n            this.filteredOptionsSignal().filter((option: T) => {\n                if (typeof option === 'string') {\n                    return option.toLowerCase().includes(term.toLowerCase());\n                }\n                if (this.optionLabel) {\n                    return String(option[this.optionLabel]).toLowerCase().includes(term.toLowerCase());\n                }\n                return option;\n            })\n        );\n    }\n\n    isGroupIndeterminate(children: NgOption[]) {\n        return children.some((child: NgOption) => child.selected) && !this.isGroupChecked(children);\n    }\n\n    isGroupDisabled(children: NgOption[]): boolean {\n        return children.every((child: NgOption) => child.disabled);\n    }\n\n    isGroupChecked(children: NgOption[]): boolean {\n        return children.every((child: NgOption) => child.disabled || child.selected) && !this.isGroupDisabled(children);\n    }\n\n    onSelectOnly(item: T): void {\n        if (typeof item === 'string') {\n            this.selectedValuesSignal.set([item]);\n        } else {\n            this.optionValue ? this.selectedValuesSignal.set([item[this.optionValue]]) : this.selectedValuesSignal.set([item]);\n        }\n        this.callControlValueAccessorChangeFn();\n    }\n\n    onSelectOpened(): void {\n        setTimeout(() => {\n            if (this.onTouched) {\n                this.onTouched();\n            }\n            if (this.searchable && !!this.searchFn) {\n                this.searchInput.focusInput();\n            }\n        });\n    }\n\n    onHoverItem(htmlid: string): void {\n        if (!this.multiple || this.disabled) {\n            return;\n        }\n        this.itemHoveredSignal.set(htmlid);\n    }\n\n    onLeaveItem(): void {\n        if (!this.multiple || this.disabled) {\n            return;\n        }\n        this.itemHoveredSignal.set(null);\n    }\n\n    onToggleAll(): void {\n        if (this.partialySelectedSignal() || this.allSelectedSignal()) {\n            this.selectedValuesSignal.set([]);\n        } else {\n            this.selectedValuesSignal.set(\n                this.enabledOptions().map((value: T) => {\n                    if (typeof value === 'string') {\n                        return value;\n                    }\n                    return this.optionValue ? value[this.optionValue] : value;\n                })\n            );\n        }\n        this.callControlValueAccessorChangeFn();\n    }\n\n    onSelectedValuesChange(selectedValues: unknown[]): void {\n        this.selectedValuesSignal.set(selectedValues);\n        this.callControlValueAccessorChangeFn();\n    }\n\n    onOpenSelect(): void {\n        this.select.open();\n    }\n\n    onInlineInputEnter(): void {\n        this.hovered = true;\n    }\n\n    onInlineInputLeave(): void {\n        this.hovered = false;\n    }\n\n    onCreateNew(): void {\n        this.createNew.emit(this.searchTermSignal());\n        this.select.close();\n    }\n\n    removeSelectedItem({ $event }: { $event: PointerEvent | MouseEvent }, item: T): void {\n        if ($event) {\n            $event.stopImmediatePropagation();\n        }\n        const selectedItemId = typeof item === 'string' ? item : this.optionValue ? item[this.optionValue] : item;\n        this.selectedValuesSignal.update((selectedValues: unknown[]) =>\n            selectedValues.filter((selectedValue: unknown) => selectedValue !== selectedItemId)\n        );\n        this.callControlValueAccessorChangeFn();\n    }\n\n    private callControlValueAccessorChangeFn() {\n        this.valueChanges.emit(this.selectedValuesSignal());\n        if (this._controlValueAccessorChangeFn) {\n            this._controlValueAccessorChangeFn(this.selectedValuesSignal());\n        }\n    }\n\n    private updateSelectValueContainerWidthSignal() {\n        if (this.selectValueContainer) {\n            const remainingPlaceHolderWidth = 100;\n            const selectValueContainerWidth = this.selectValueContainer.clientWidth - remainingPlaceHolderWidth;\n            this.selectValueContainerWidthSignal.set(selectValueContainerWidth);\n        }\n    }\n\n    private calculateResponsiveLabels(containerWidth: number, selectedValues: unknown[]): void {\n        if (!selectedValues || selectedValues.length === 0) {\n            this.hiddenCountSignal.set(0);\n            return;\n        }\n        const itemsContainer = this.selectValueContainer.getElementsByClassName('multiple-item')[0] as HTMLElement;\n        const items = this.selectValueContainer.getElementsByClassName('item');\n        let totalWidth = 0;\n        let hiddenCount = 0;\n        const itemGap = 4;\n        for (let index = 0; index < items.length; index++) {\n            const item = items[index];\n            const itemWidth = item.clientWidth + itemGap;\n            if (totalWidth + itemWidth < containerWidth && !hiddenCount) {\n                totalWidth += itemWidth;\n                (item as HTMLElement).style.visibility = 'visible';\n            } else {\n                (item as HTMLElement).style.visibility = 'hidden';\n                hiddenCount++;\n            }\n        }\n        itemsContainer.style.maxWidth = `${totalWidth}px`;\n        this.hiddenCountSignal.set(hiddenCount);\n    }\n}\n","@if (label && !inlineLabel) {\n    <label [for]=\"selectId\">\n        <span>\n            {{ label }}\n        </span>\n        @if (description) {\n            <span class=\"description\">\n                {{ description }}\n            </span>\n        }\n    </label>\n}\n\n@if (inlineLabel) {\n    <div\n        #inlineLabel\n        tabindex=\"0\"\n        class=\"inline-label\"\n        (click)=\"onOpenSelect()\"\n        (keydown.enter)=\"onOpenSelect()\"\n        (mouseenter)=\"onInlineInputEnter()\"\n        (mouseleave)=\"onInlineInputLeave()\">\n        @if (label && inlineLabel) {\n            <label\n                class=\"label\"\n                [for]=\"selectId\">\n                <span>\n                    {{ label }}\n                </span>\n            </label>\n        }\n        <div class=\"divider\"></div>\n    </div>\n}\n\n<ng-select\n    #select\n    class=\"ap-select-legacy\"\n    [tabIndex]=\"0\"\n    [clearable]=\"clearable\"\n    [placeholder]=\"placeholder\"\n    [labelForId]=\"selectId\"\n    [searchable]=\"false\"\n    [closeOnSelect]=\"!multiple\"\n    [bindValue]=\"optionValue ? optionValue : ''\"\n    [groupBy]=\"group ? optionGroupLabel : ''\"\n    [multiple]=\"multiple\"\n    [disabled]=\"disabled\"\n    [markFirst]=\"false\"\n    [selectableGroup]=\"selectableGroup\"\n    [selectableGroupAsModel]=\"false\"\n    [appendTo]=\"appendTo\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledBy || null\"\n    [attr.aria-describedby]=\"ariaDescribedBy || null\"\n    [attr.aria-disabled]=\"disabled?.toString()\"\n    [items]=\"optionsSignal()\"\n    [compareWith]=\"compareWith\"\n    [loading]=\"loadingSignal()\"\n    [ngModel]=\"selectedValuesSignal()\"\n    [class.with-error]=\"errorMessage\"\n    [class.with-success]=\"successMessage\"\n    (ngModelChange)=\"onSelectedValuesChange($event)\"\n    (open)=\"onSelectOpened()\">\n    @if (searchable || selectAll) {\n        <ng-template\n            let-item=\"item\"\n            ng-header-tmp>\n            @if (searchable) {\n                <ap-input\n                    #searchInput\n                    tabindex=\"0\"\n                    name=\"search-input\"\n                    class=\"full-width\"\n                    symbolId=\"search\"\n                    symbolPosition=\"right\"\n                    [placeholder]=\"searchPlaceholder\"\n                    [ngModel]=\"searchTermSignal()\"\n                    (ngModelChange)=\"onSearchTermChange($event)\" />\n            }\n            @if (selectAll) {\n                <ap-checkbox\n                    class=\"select-all-checkbox\"\n                    name=\"option-group-select-all\"\n                    [indeterminate]=\"partialySelectedSignal()\"\n                    [checked]=\"allSelectedSignal()\"\n                    (click)=\"onToggleAll()\">\n                    <span>\n                        {{ partialySelectedSignal() || allSelectedSignal() ? unselectAllText : selectAllText }}\n                    </span>\n                </ap-checkbox>\n            }\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-optgroup-tmp>\n        <div\n            class=\"group\"\n            [class.with-search]=\"searchable\"\n            [class.with-select-all]=\"selectAll\">\n            @if (!multiple) {\n                <span class=\"group-label\">\n                    {{ item[optionGroupLabel] }}\n                </span>\n                @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                    <ap-badge color=\"blue\">\n                        {{ optionGroupTag[item[optionGroupLabel]] }}\n                    </ap-badge>\n                }\n            }\n            @if (multiple) {\n                @if (selectableGroup) {\n                    <ap-checkbox\n                        [name]=\"'option-group-selection-' + item['group']\"\n                        [indeterminate]=\"isGroupIndeterminate(item$.children)\"\n                        [checked]=\"isGroupChecked(item$.children)\">\n                        <span class=\"group-label\">\n                            {{ item[optionGroupLabel] }}\n                        </span>\n                        @if (optionGroupTag && optionGroupTag[item[optionGroupLabel]]) {\n                            <ap-badge color=\"blue\">\n                                {{ optionGroupTag[item[optionGroupLabel]] }}\n                            </ap-badge>\n                        }\n                    </ap-checkbox>\n                }\n                @if (!selectableGroup) {\n                    <span class=\"group-label\">\n                        {{ item[optionGroupLabel] }}\n                    </span>\n                }\n            }\n        </div>\n    </ng-template>\n    <ng-template\n        let-items=\"items\"\n        let-item$=\"item$\"\n        ng-multi-label-tmp>\n        <ng-container>\n            <div class=\"multiple-item\">\n                @if (!customMultiLabelTemplate) {\n                    @for (item of items; track item) {\n                        @if (optionLabel && item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item[optionLabel]\">\n                                    {{ item[optionLabel] }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    color=\"blue\"\n                                    class=\"item\"\n                                    removable=\"true\"\n                                    [content]=\"item[optionLabel]\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    clearable=\"true\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    {{ item[optionLabel] }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span\n                                        class=\"text-item\"\n                                        [title]=\"item[optionLabel]\">\n                                        {{ item[optionLabel] }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                        @if (!optionLabel || !item[optionLabel]) {\n                            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                                <span\n                                    class=\"item text-item\"\n                                    [title]=\"item\">\n                                    {{ item }}\n                                </span>\n                            }\n                            @if (displayTypeSignal() === 'label') {\n                                <ap-label\n                                    class=\"item\"\n                                    color=\"blue\"\n                                    [removable]=\"multiple\"\n                                    [content]=\"item\"\n                                    (remove)=\"removeSelectedItem($event, item)\" />\n                            }\n                            @if (displayTypeSignal() === 'tag') {\n                                <ap-tag\n                                    class=\"item text-item\"\n                                    [clearable]=\"multiple\"\n                                    (clear)=\"removeSelectedItem($event, item)\">\n                                    {{ item }}\n                                </ap-tag>\n                            }\n                            @if (displayTypeSignal() === 'withAvatar') {\n                                <div class=\"item with-avatar\">\n                                    @if (optionProfileImageUrl) {\n                                        <ap-avatar\n                                            size=\"24\"\n                                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                                            [showInitials]=\"true\" />\n                                    }\n                                    <span class=\"text-item\">\n                                        {{ item }}\n                                    </span>\n                                </div>\n                            }\n                        }\n                    }\n                }\n                @if (customMultiLabelTemplate) {\n                    <ng-container *ngTemplateOutlet=\"customMultiLabelTemplate; context: { options: items }\" />\n                }\n            </div>\n            @if (hiddenCountSignal() > 0) {\n                <div class=\"remaining\">\n                    @if (displayTypeSignal() === 'text' || displayTypeSignal() === 'withAvatar' || !displayTypeSignal()) {\n                        <span class=\"text-item\">+{{ hiddenCountSignal() }}</span>\n                    }\n                    @if (displayTypeSignal() === 'tag') {\n                        <ap-tag\n                            class=\"text-item\"\n                            clearable=\"false\">\n                            +{{ hiddenCountSignal() }}\n                        </ap-tag>\n                    }\n                    @if (displayTypeSignal() === 'label') {\n                        <ap-label\n                            color=\"blue\"\n                            [removable]=\"false\"\n                            [content]=\"'+' + hiddenCountSignal()\" />\n                    }\n                </div>\n            }\n        </ng-container>\n    </ng-template>\n    <ng-template ng-loadingtext-tmp>\n        <div class=\"loading-state\">\n            <ap-loader diameter=\"30\" />\n            <span>\n                {{ loadingText }}\n            </span>\n        </div>\n    </ng-template>\n    <ng-template ng-loadingspinner-tmp></ng-template>\n    @if (create) {\n        <ng-template ng-footer-tmp>\n            <button\n                class=\"create-new\"\n                type=\"button\"\n                (click)=\"onCreateNew()\">\n                <ap-symbol\n                    symbolId=\"plus\"\n                    size=\"sm\" />\n                <span>\n                    {{ createText }}\n                </span>\n                @if (searchTermSignal()) {\n                    \"{{ searchTermSignal() }}\"\n                }\n            </button>\n        </ng-template>\n    }\n    <ng-template\n        let-item=\"item\"\n        let-item$=\"item$\"\n        ng-option-tmp>\n        @if ((!optionLabel || !item[optionLabel]) && item && (!optionDivider || !item[optionDivider]) && !customOptionTemplate) {\n            <div class=\"option\">\n                <span\n                    class=\"option-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n                @if (item$.selected && !multiple) {\n                    <ap-symbol\n                        symbolId=\"check\"\n                        color=\"electric-blue\"\n                        size=\"sm\" />\n                }\n            </div>\n        }\n        @if ((optionLabel && item[optionLabel]) || customOptionTemplate) {\n            <div\n                class=\"option\"\n                [class.with-caption]=\"optionCaption && item[optionCaption]\"\n                [class.multiple]=\"multiple\"\n                (mouseenter)=\"onHoverItem(item$.htmlId)\"\n                (mouseleave)=\"onLeaveItem()\">\n                <ng-container *ngTemplateOutlet=\"contentItem; context: { item: item, item$: item$ }\" />\n            </div>\n        }\n        @if (optionDivider && item[optionDivider]) {\n            <div class=\"divider\"></div>\n        }\n    </ng-template>\n    <ng-template\n        let-item=\"item\"\n        ng-label-tmp>\n        @if (customLabelTemplate) {\n            <ng-container *ngTemplateOutlet=\"customLabelTemplate; context: { option: item }\" />\n        }\n        @if (!optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span\n                    class=\"text-item\"\n                    [title]=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    {{ item }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <span class=\"text-item\">\n                    {{ item }}\n                </span>\n            }\n        }\n        @if (optionLabel && !customLabelTemplate) {\n            @if (displayTypeSignal() === 'text' || !displayTypeSignal()) {\n                <span class=\"text-item\">\n                    {{ item[optionLabel] }}\n                </span>\n            }\n            @if (displayTypeSignal() === 'label') {\n                <ap-label\n                    color=\"blue\"\n                    [removable]=\"multiple\"\n                    [content]=\"item[optionLabel]\"\n                    (remove)=\"removeSelectedItem($event, item)\" />\n            }\n            @if (displayTypeSignal() === 'tag') {\n                <ap-tag\n                    class=\"text-item\"\n                    [clearable]=\"multiple\"\n                    [title]=\"item[optionLabel]\"\n                    (clear)=\"removeSelectedItem($event, item)\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    {{ item[optionLabel] }}\n                </ap-tag>\n            }\n            @if (displayTypeSignal() === 'withAvatar') {\n                <div class=\"with-avatar\">\n                    @if (optionProfileImageUrl) {\n                        <ap-avatar\n                            size=\"24\"\n                            [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                            [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                            [showInitials]=\"true\" />\n                    }\n                    <span\n                        class=\"text-item\"\n                        [title]=\"item[optionLabel]\">\n                        {{ item[optionLabel] }}\n                    </span>\n                </div>\n            }\n        }\n    </ng-template>\n    <ng-template ng-notfound-tmp>\n        <div class=\"option not-found\">\n            {{ notFoundText }}\n        </div>\n    </ng-template>\n</ng-select>\n\n<ng-template\n    #contentItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    @if (multiple) {\n        <div class=\"disabled-opaque\"></div>\n        @if (multiple) {\n            <ap-checkbox\n                [checked]=\"item$.selected\"\n                [disabled]=\"item$.disabled\"\n                [name]=\"'option-selection-' + item$.htmlId\">\n                <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n            </ap-checkbox>\n        }\n    }\n    @if (!multiple) {\n        <div class=\"disabled-opaque\"></div>\n        <ng-container *ngTemplateOutlet=\"textItem; context: { item: item, item$: item$ }\" />\n    }\n</ng-template>\n\n<ng-template\n    #textItem\n    let-item=\"item\"\n    let-item$=\"item$\">\n    <div class=\"content\">\n        @if (!customOptionTemplate) {\n            @if (!optionLabel) {\n                <span class=\"item\">\n                    {{ item }}\n                </span>\n            }\n            @if (optionProfileImageUrl) {\n                <ap-avatar\n                    size=\"24\"\n                    [profilePicture]=\"item[optionProfileImageUrl] ?? ''\"\n                    [username]=\"optionLabel && item[optionLabel] ? item[optionLabel] : ''\"\n                    [showInitials]=\"true\" />\n            }\n            @if (optionLabel && item[optionLabel]) {\n                <div class=\"texts\">\n                    <div class=\"first-line\">\n                        <span\n                            class=\"label\"\n                            [title]=\"item[optionLabel]\">\n                            {{ item[optionLabel] }}\n                        </span>\n                        @if (optionBadgeLabel && item[optionBadgeLabel]) {\n                            <ap-badge color=\"blue\">{{ item[optionBadgeLabel] }}</ap-badge>\n                        }\n                    </div>\n                    @if (optionCaption && item[optionCaption]) {\n                        <span\n                            class=\"caption\"\n                            [title]=\"item[optionCaption]\">\n                            {{ item[optionCaption] }}\n                        </span>\n                    }\n                </div>\n            }\n        }\n        @if (customOptionTemplate) {\n            <ng-container *ngTemplateOutlet=\"customOptionTemplate; context: { option: item }\" />\n        }\n        @if (only && !item$.disabled && itemHoveredSignal() === item$.htmlId && multiple) {\n            <button\n                class=\"standalone-link\"\n                type=\"button\"\n                (click)=\"onSelectOnly(item)\">\n                {{ onlyText }}\n            </button>\n        }\n        @if (item$.selected && !multiple) {\n            <ap-symbol\n                symbolId=\"check\"\n                color=\"electric-blue\"\n                size=\"sm\" />\n        }\n    </div>\n</ng-template>\n\n@if (errorMessage) {\n    <div class=\"form-message error\">\n        <ap-symbol\n            symbolId=\"error_fill\"\n            size=\"sm\" />\n        <span>\n            {{ errorMessage }}\n        </span>\n    </div>\n}\n\n@if (successMessage) {\n    <div class=\"form-message success\">\n        <ap-symbol\n            symbolId=\"rounded-check_fill\"\n            size=\"sm\" />\n        <span>\n            {{ successMessage }}\n        </span>\n    </div>\n}\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;AAgDO,MAAM,qBAAqB,GAAa;AAC3C,IAAA,OAAO,EAAE,iBAAiB;AAC1B,IAAA,WAAW,EAAE,UAAU,CAAC,MAAM,eAAe,CAAC;AAC9C,IAAA,KAAK,EAAE,IAAI;;AAGf;;AAEG;MAyBU,eAAe,CAAA;AAChB,IAAA,cAAc,GAAmB,MAAM,CAAC,cAAc,CAAC;AACvD,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC;AAC3C,IAAA,UAAU,GAAe,MAAM,CAAC,UAAU,CAAC;AAEzB,IAAA,WAAW;AACX,IAAA,kBAAkB;AACvB,IAAA,MAAM;IAEG,OAAO,GAAY,KAAK;AAEtD,IAAA,aAAa,GAAG,MAAM,CAAM,EAAE,yDAAC;IAC/B,IAA+B,OAAO,CAAC,OAAY,EAAA;AAC/C,QAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;AAC/B,QAAA,IAAI,CAAC,qBAAqB,CAAC,GAAG,CAAC,OAAO,CAAC;;AAGlC,IAAA,SAAS;AACT,IAAA,cAAc;AACd,IAAA,eAAe;IACf,QAAQ,GAAW,MAAM;IACzB,SAAS,GAAY,KAAK;AAC1B,IAAA,WAAW;IACX,QAAQ,GAAY,KAAK;AACzB,IAAA,QAAQ;IAET,OAAO,GAAY,KAAK;IAChC,IAEI,WAAW,CAAC,WAAoB,EAAA;AAChC,QAAA,IAAI,CAAC,OAAO,GAAG,WAAW;AAC1B,QAAA,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;YAC1B;;QAEJ,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAC3C,4BAA4B,EAC5B,CAAA,EAAG,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,WAAW,CAAA,EAAA,CAAI,CAC3D;;AAGL,IAAA,IAAI,WAAW,GAAA;QACX,OAAO,IAAI,CAAC,OAAO;;IAGd,MAAM,GAAY,KAAK;IACvB,UAAU,GAAW,QAAQ;IAC7B,KAAK,GAAY,KAAK;IACtB,eAAe,GAAY,IAAI;IAC/B,KAAK,GAAW,EAAE;IAClB,QAAQ,GAAY,KAAK;IACzB,IAAI,GAAY,KAAK;IACrB,QAAQ,GAAW,MAAM;IACzB,WAAW,GAAW,WAAW;IACjC,SAAS,GAAY,KAAK;IAC1B,aAAa,GAAW,YAAY;IACpC,eAAe,GAAW,cAAc;IACxC,UAAU,GAAY,KAAK;IAC3B,iBAAiB,GAAW,WAAW;AACvC,IAAA,QAAQ,GAAsC,IAAI,CAAC,eAAe;IAClE,YAAY,GAAW,kBAAkB;IACzC,WAAW,GAAW,eAAe;IAC9C,IAAa,WAAW,CAAC,WAAwB,EAAA;AAC7C,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC;;AAGlC,IAAA,WAAW;AACX,IAAA,aAAa;IACb,aAAa,GAAY,SAAS;AAClC,IAAA,qBAAqB;AACrB,IAAA,gBAAgB;AAChB,IAAA,WAAW;IACX,cAAc,GAAW,UAAU;IACnC,gBAAgB,GAAW,OAAO;AAClC,IAAA,cAAc;IACvB,IAAa,qBAAqB,CAAC,qBAA6B,EAAA;AAC5D,QAAA,IAAI,CAAC,0BAA0B,CAAC,GAAG,CAAC,qBAAqB,CAAC;;AAErD,IAAA,oBAAoB;AACpB,IAAA,mBAAmB;AACnB,IAAA,wBAAwB;AACxB,IAAA,YAAY;AACZ,IAAA,cAAc;AAEd,IAAA,WAAW;AAEV,IAAA,SAAS,GAAyB,IAAI,YAAY,EAAE;AACpD,IAAA,YAAY,GAAG,IAAI,YAAY,EAAa;AAE9C,IAAA,6BAA6B;AACrC,IAAA,SAAS;AACT,IAAA,iBAAiB,GAAG,MAAM,CAAc,MAAM,6DAAC;AAE/C,IAAA,cAAc,GAAG,QAAQ,CAAM,MAAK;QAChC,OAAO,IAAI,CAAC,aAAa,EAAE,CAAC,MAAM,CAAC,CAAC,KAAQ,KAAI;AAC5C,YAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,gBAAA,OAAO,KAAK;;iBACT;gBACH,OAAO,IAAI,CAAC,cAAc,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,cAAc,CAAC;;AAEjE,SAAC,CAAC;AACN,KAAC,0DAAC;AAEF,IAAA,iBAAiB,GAAG,MAAM,CAAgB,IAAI,6DAAC;AAC/C,IAAA,qBAAqB,GAAG,MAAM,CAAM,EAAE,iEAAC;AACvC,IAAA,aAAa,GAAG,MAAM,CAAU,KAAK,yDAAC;AACtC,IAAA,oBAAoB,GAAG,MAAM,CAAY,EAAE,gEAAC;AAC5C,IAAA,gBAAgB,GAAG,MAAM,CAAS,EAAE,4DAAC;AACrC,IAAA,WAAW,GAAG,YAAY,CAAC,IAAI,CAAC,gBAAgB,CAAC;AACjD,IAAA,0BAA0B,GAAG,MAAM,CAAS,CAAC,CAAC,sEAAC;AAC/C,IAAA,iBAAiB,GAAG,MAAM,CAAS,CAAC,6DAAC;AAErC,IAAA,iBAAiB,GAAG,QAAQ,CAAU,MAAK;AACvC,QAAA,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC,MAAM,KAAK,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM;AAC9E,KAAC,6DAAC;AACF,IAAA,sBAAsB,GAAG,QAAQ,CAAU,MAAK;QAC5C,OAAO,IAAI,CAAC,oBAAoB,EAAE,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,oBAAoB,EAAE,CAAC,MAAM,GAAG,IAAI,CAAC,cAAc,EAAE,CAAC,MAAM;AACtH,KAAC,kEAAC;AAEM,IAAA,QAAQ,GAAG,MAAM,CAAC,mBAAmB,CAAC;AACtC,IAAA,oBAAoB;AACpB,IAAA,+BAA+B,GAAG,MAAM,CAAC,CAAC,2EAAC;AAEnD,IAAA,WAAA,GAAA;AACI,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,kBAAkB,EAAE,QAAQ,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC;;IAG9G,UAAU,CAAC,iBAA4B,EAAE,EAAA;AACrC,QAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,cAAc,CAAC;;AAGjD,IAAA,gBAAgB,CAAC,EAA8B,EAAA;AAC3C,QAAA,IAAI,CAAC,6BAA6B,GAAG,EAAE;;AAG3C,IAAA,iBAAiB,CAAC,EAAc,EAAA;AAC5B,QAAA,IAAI,CAAC,SAAS,GAAG,EAAE;;AAGvB,IAAA,gBAAgB,CAAC,UAAmB,EAAA;AAChC,QAAA,IAAI,CAAC,QAAQ,GAAG,UAAU;;IAG9B,QAAQ,GAAA;AACJ,QAAA,IAAI,IAAI,CAAC,QAAQ,KAAK,CAAC,IAAI,CAAC,iBAAiB,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,KAAK,MAAM,CAAC,EAAE;AACrF,YAAA,OAAO,CAAC,IAAI,CAAC,iFAAiF,CAAC;AAC/F,YAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,OAAO,CAAC;;AAEvC,QAAA,IAAI,CAAC;AACA,aAAA,IAAI,CACD,YAAY,CAAC,GAAG,CAAC,EACjB,IAAI,CAAC,CAAC,CAAC,EACP,GAAG,CAAC,MAAK;AACL,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,IAAI,CAAC;AAC5B,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,EAAE,CAAC;SAC7B,CAAC,EACF,SAAS,CAAC,CAAC,IAAY,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,EAChD,GAAG,CAAC,MAAK;AACL,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,CAAC;SAChC,CAAC,EACF,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;AAEtC,aAAA,SAAS,CAAC,CAAC,OAAY,KAAI;AACxB,YAAA,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,OAAO,CAAC;AACnC,SAAC,CAAC;;IAGV,eAAe,GAAA;AACX,QAAA,IAAI,IAAI,CAAC,kBAAkB,EAAE;YACzB,IAAI,CAAC,UAAU,CAAC,aAAa,CAAC,KAAK,CAAC,WAAW,CAC3C,4BAA4B,EAC5B,CAAA,EAAG,IAAI,CAAC,kBAAkB,CAAC,aAAa,CAAC,WAAW,CAAA,EAAA,CAAI,CAC3D;;AAEL,QAAA,IAAI,CAAC,oBAAoB,GAAG,IAAI,CAAC,MAAM,CAAC,OAAO,CAAC,sBAAsB,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAgB;AAC9G,QAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,YAAA,SAAS,CAAC,MAAM,EAAE,QAAQ;AACrB,iBAAA,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,EAAE,kBAAkB,CAAC,IAAI,CAAC,UAAU,CAAC;iBAC3D,SAAS,CAAC,MAAK;gBACZ,IAAI,CAAC,qCAAqC,EAAE;AAChD,aAAC,CAAC;;QAEV,IAAI,CAAC,qCAAqC,EAAE;AAC5C,QAAA,qBAAqB,CAAC,IAAI,CAAC,QAAQ,EAAE,MAAK;YACtC,MAAM,CACF,MAAK;AACD,gBAAA,IAAI,IAAI,CAAC,QAAQ,EAAE;AACf,oBAAA,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,EAAE;AAClD,oBAAA,MAAM,+BAA+B,GAAG,IAAI,CAAC,+BAA+B,EAAE;AAC9E,oBAAA,MAAM,OAAO,GAAG,UAAU,CAAC,MAAK;AAC5B,wBAAA,IAAI,CAAC,yBAAyB,CAAC,+BAA+B,EAAE,cAAc,CAAC;qBAClF,EAAE,GAAG,CAAC;AACP,oBAAA,OAAO,MAAK;wBACR,YAAY,CAAC,OAAO,CAAC;AACzB,qBAAC;;gBAEL;AACJ,aAAC,EACD;AACI,gBAAA,iBAAiB,EAAE,IAAI;AAC1B,aAAA,CACJ;AACL,SAAC,CAAC;;AAGN,IAAA,kBAAkB,CAAC,UAAkB,EAAA;AACjC,QAAA,IAAI,CAAC,gBAAgB,CAAC,GAAG,CAAC,UAAU,CAAC;;AAGjC,IAAA,eAAe,CAAC,IAAY,EAAA;AAChC,QAAA,OAAO,EAAE,CACL,IAAI,CAAC,qBAAqB,EAAE,CAAC,MAAM,CAAC,CAAC,MAAS,KAAI;AAC9C,YAAA,IAAI,OAAO,MAAM,KAAK,QAAQ,EAAE;AAC5B,gBAAA,OAAO,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;AAE5D,YAAA,IAAI,IAAI,CAAC,WAAW,EAAE;gBAClB,OAAO,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;;AAEtF,YAAA,OAAO,MAAM;SAChB,CAAC,CACL;;AAGL,IAAA,oBAAoB,CAAC,QAAoB,EAAA;QACrC,OAAO,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAe,KAAK,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,QAAQ,CAAC;;AAG/F,IAAA,eAAe,CAAC,QAAoB,EAAA;AAChC,QAAA,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAe,KAAK,KAAK,CAAC,QAAQ,CAAC;;AAG9D,IAAA,cAAc,CAAC,QAAoB,EAAA;QAC/B,OAAO,QAAQ,CAAC,KAAK,CAAC,CAAC,KAAe,KAAK,KAAK,CAAC,QAAQ,IAAI,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,QAAQ,CAAC;;AAGnH,IAAA,YAAY,CAAC,IAAO,EAAA;AAChB,QAAA,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE;YAC1B,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;;aAClC;AACH,YAAA,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,GAAG,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC;;QAEtH,IAAI,CAAC,gCAAgC,EAAE;;IAG3C,cAAc,GAAA;QACV,UAAU,CAAC,MAAK;AACZ,YAAA,IAAI,IAAI,CAAC,SAAS,EAAE;gBAChB,IAAI,CAAC,SAAS,EAAE;;YAEpB,IAAI,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC,IAAI,CAAC,QAAQ,EAAE;AACpC,gBAAA,IAAI,CAAC,WAAW,CAAC,UAAU,EAAE;;AAErC,SAAC,CAAC;;AAGN,IAAA,WAAW,CAAC,MAAc,EAAA;QACtB,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjC;;AAEJ,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,MAAM,CAAC;;IAGtC,WAAW,GAAA;QACP,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjC;;AAEJ,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,IAAI,CAAC;;IAGpC,WAAW,GAAA;QACP,IAAI,IAAI,CAAC,sBAAsB,EAAE,IAAI,IAAI,CAAC,iBAAiB,EAAE,EAAE;AAC3D,YAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,EAAE,CAAC;;aAC9B;AACH,YAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CACzB,IAAI,CAAC,cAAc,EAAE,CAAC,GAAG,CAAC,CAAC,KAAQ,KAAI;AACnC,gBAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC3B,oBAAA,OAAO,KAAK;;AAEhB,gBAAA,OAAO,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,KAAK;aAC5D,CAAC,CACL;;QAEL,IAAI,CAAC,gCAAgC,EAAE;;AAG3C,IAAA,sBAAsB,CAAC,cAAyB,EAAA;AAC5C,QAAA,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,cAAc,CAAC;QAC7C,IAAI,CAAC,gCAAgC,EAAE;;IAG3C,YAAY,GAAA;AACR,QAAA,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE;;IAGtB,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,IAAI;;IAGvB,kBAAkB,GAAA;AACd,QAAA,IAAI,CAAC,OAAO,GAAG,KAAK;;IAGxB,WAAW,GAAA;QACP,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC;AAC5C,QAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;;AAGvB,IAAA,kBAAkB,CAAC,EAAE,MAAM,EAAyC,EAAE,IAAO,EAAA;QACzE,IAAI,MAAM,EAAE;YACR,MAAM,CAAC,wBAAwB,EAAE;;AAErC,QAAA,MAAM,cAAc,GAAG,OAAO,IAAI,KAAK,QAAQ,GAAG,IAAI,GAAG,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI;QACzG,IAAI,CAAC,oBAAoB,CAAC,MAAM,CAAC,CAAC,cAAyB,KACvD,cAAc,CAAC,MAAM,CAAC,CAAC,aAAsB,KAAK,aAAa,KAAK,cAAc,CAAC,CACtF;QACD,IAAI,CAAC,gCAAgC,EAAE;;IAGnC,gCAAgC,GAAA;QACpC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;AACnD,QAAA,IAAI,IAAI,CAAC,6BAA6B,EAAE;YACpC,IAAI,CAAC,6BAA6B,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC;;;IAI/D,qCAAqC,GAAA;AACzC,QAAA,IAAI,IAAI,CAAC,oBAAoB,EAAE;YAC3B,MAAM,yBAAyB,GAAG,GAAG;YACrC,MAAM,yBAAyB,GAAG,IAAI,CAAC,oBAAoB,CAAC,WAAW,GAAG,yBAAyB;AACnG,YAAA,IAAI,CAAC,+BAA+B,CAAC,GAAG,CAAC,yBAAyB,CAAC;;;IAInE,yBAAyB,CAAC,cAAsB,EAAE,cAAyB,EAAA;QAC/E,IAAI,CAAC,cAAc,IAAI,cAAc,CAAC,MAAM,KAAK,CAAC,EAAE;AAChD,YAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,CAAC;YAC7B;;AAEJ,QAAA,MAAM,cAAc,GAAG,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,eAAe,CAAC,CAAC,CAAC,CAAgB;QAC1G,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,sBAAsB,CAAC,MAAM,CAAC;QACtE,IAAI,UAAU,GAAG,CAAC;QAClB,IAAI,WAAW,GAAG,CAAC;QACnB,MAAM,OAAO,GAAG,CAAC;AACjB,QAAA,KAAK,IAAI,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,KAAK,CAAC,MAAM,EAAE,KAAK,EAAE,EAAE;AAC/C,YAAA,MAAM,IAAI,GAAG,KAAK,CAAC,KAAK,CAAC;AACzB,YAAA,MAAM,SAAS,GAAG,IAAI,CAAC,WAAW,GAAG,OAAO;YAC5C,IAAI,UAAU,GAAG,SAAS,GAAG,cAAc,IAAI,CAAC,WAAW,EAAE;gBACzD,UAAU,IAAI,SAAS;AACtB,gBAAA,IAAoB,CAAC,KAAK,CAAC,UAAU,GAAG,SAAS;;iBAC/C;AACF,gBAAA,IAAoB,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ;AACjD,gBAAA,WAAW,EAAE;;;QAGrB,cAAc,CAAC,KAAK,CAAC,QAAQ,GAAG,CAAA,EAAG,UAAU,IAAI;AACjD,QAAA,IAAI,CAAC,iBAAiB,CAAC,GAAG,CAAC,WAAW,CAAC;;uGAlWlC,eAAe,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AAAf,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,eAAe,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,EAAA,OAAA,EAAA,SAAA,EAAA,SAAA,EAAA,WAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,SAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,QAAA,EAAA,UAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,KAAA,EAAA,OAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,KAAA,EAAA,OAAA,EAAA,QAAA,EAAA,UAAA,EAAA,IAAA,EAAA,MAAA,EAAA,QAAA,EAAA,UAAA,EAAA,WAAA,EAAA,aAAA,EAAA,SAAA,EAAA,WAAA,EAAA,aAAA,EAAA,eAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,YAAA,EAAA,iBAAA,EAAA,mBAAA,EAAA,QAAA,EAAA,UAAA,EAAA,YAAA,EAAA,cAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,WAAA,EAAA,aAAA,EAAA,aAAA,EAAA,eAAA,EAAA,aAAA,EAAA,eAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,gBAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,qBAAA,EAAA,uBAAA,EAAA,oBAAA,EAAA,sBAAA,EAAA,mBAAA,EAAA,qBAAA,EAAA,wBAAA,EAAA,0BAAA,EAAA,YAAA,EAAA,cAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,EAAA,OAAA,EAAA,EAAA,SAAA,EAAA,WAAA,EAAA,YAAA,EAAA,cAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,eAAA,EAAA,cAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,SAAA,EAJb,CAAC,qBAAqB,CAAC,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,oBAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,EAAA,YAAA,EAAA,QAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,QAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC7EtC,+poBA8fA,EAAA,MAAA,EAAA,CAAA,kgvBAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EDhcQ,mBAAmB,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,eAAA,EAAA,QAAA,EAAA,2CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACnB,WAAW,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,OAAA,EAAA,QAAA,EAAA,qDAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,UAAA,EAAA,SAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,eAAA,CAAA,EAAA,QAAA,EAAA,CAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,UAAA,EAAA,IAAA,EACX,cAAc,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iBAAA,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,mBAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,2BAAA,EAAA,YAAA,EAAA,aAAA,EAAA,cAAA,EAAA,YAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,SAAA,EAAA,eAAA,EAAA,cAAA,EAAA,aAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,SAAA,EAAA,YAAA,EAAA,cAAA,EAAA,eAAA,EAAA,iBAAA,EAAA,wBAAA,EAAA,UAAA,EAAA,WAAA,EAAA,kBAAA,EAAA,YAAA,EAAA,YAAA,EAAA,UAAA,EAAA,uBAAA,EAAA,UAAA,EAAA,sBAAA,EAAA,eAAA,EAAA,oBAAA,EAAA,SAAA,EAAA,WAAA,EAAA,UAAA,EAAA,QAAA,EAAA,YAAA,EAAA,WAAA,EAAA,QAAA,EAAA,OAAA,EAAA,aAAA,EAAA,kBAAA,EAAA,iBAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,MAAA,EAAA,OAAA,EAAA,QAAA,EAAA,OAAA,EAAA,KAAA,EAAA,QAAA,EAAA,QAAA,EAAA,aAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,wBAAA,EAAA,QAAA,EAAA,gBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,6BAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,yBAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,2BAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,8BAAA,EAAA,QAAA,EAAA,sBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAAA,EAAA,CAAA,iCAAA,EAAA,QAAA,EAAA,yBAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,gBAAA,EAAA,iBAAA,EAAA,UAAA,EAAA,WAAA,EAAA,WAAA,EAAA,SAAA,EAAA,MAAA,EAAA,OAAA,EAAA,aAAA,EAAA,QAAA,EAAA,QAAA,EAAA,UAAA,EAAA,aAAA,EAAA,cAAA,EAAA,gBAAA,EAAA,UAAA,EAAA,gBAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,UAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,YAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAGf,iBAAiB,EAAA,QAAA,EAAA,aAAA,EAAA,MAAA,EAAA,CAAA,YAAA,EAAA,iBAAA,EAAA,kBAAA,EAAA,UAAA,EAAA,eAAA,EAAA,SAAA,EAAA,UAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACjB,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,gBAAA,EAAA,KAAA,EAAA,SAAA,EAAA,MAAA,EAAA,UAAA,EAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,QAAA,EAAA,mBAAA,EAAA,SAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACf,gBAAgB,EAAA,QAAA,EAAA,oBAAA,EAAA,MAAA,EAAA,CAAA,yBAAA,EAAA,kBAAA,EAAA,0BAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EAChB,cAAc,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,SAAA,EAAA,eAAA,EAAA,WAAA,CAAA,EAAA,OAAA,EAAA,CAAA,QAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACd,YAAY,EAAA,QAAA,EAAA,QAAA,EAAA,MAAA,EAAA,CAAA,WAAA,EAAA,KAAA,EAAA,OAAA,EAAA,MAAA,CAAA,EAAA,OAAA,EAAA,CAAA,OAAA,EAAA,OAAA,CAAA,EAAA,EAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EACZ,cAAc,wEACd,eAAe,EAAA,QAAA,EAAA,WAAA,EAAA,MAAA,EAAA,CAAA,OAAA,EAAA,UAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAMV,eAAe,EAAA,UAAA,EAAA,CAAA;kBAxB3B,SAAS;AACW,YAAA,IAAA,EAAA,CAAA,EAAA,eAAA,EAAA,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,WAAW,EAAA,OAAA,EAEZ;wBACL,mBAAmB;wBACnB,WAAW;wBACX,cAAc;wBACd,cAAc;wBACd,eAAe;wBACf,SAAS;wBACT,SAAS;wBACT,iBAAiB;wBACjB,eAAe;wBACf,gBAAgB;wBAChB,cAAc;wBACd,YAAY;wBACZ,cAAc;wBACd,eAAe;AAClB,qBAAA,EAAA,SAAA,EACU,CAAC,qBAAqB,CAAC,EAAA,aAAA,EAEnB,iBAAiB,CAAC,IAAI,EAAA,QAAA,EAAA,+poBAAA,EAAA,MAAA,EAAA,CAAA,kgvBAAA,CAAA,EAAA;wDAOX,WAAW,EAAA,CAAA;sBAApC,SAAS;uBAAC,aAAa;gBACE,kBAAkB,EAAA,CAAA;sBAA3C,SAAS;uBAAC,aAAa;gBACH,MAAM,EAAA,CAAA;sBAA1B,SAAS;uBAAC,QAAQ;gBAEW,OAAO,EAAA,CAAA;sBAApC,WAAW;uBAAC,eAAe;gBAGG,OAAO,EAAA,CAAA;sBAArC,KAAK;uBAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;gBAKhB,SAAS,EAAA,CAAA;sBAAjB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBAKG,WAAW,EAAA,CAAA;sBAFd,WAAW;uBAAC,cAAc;;sBAC1B;gBAgBQ,MAAM,EAAA,CAAA;sBAAd;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,KAAK,EAAA,CAAA;sBAAb;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,IAAI,EAAA,CAAA;sBAAZ;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,SAAS,EAAA,CAAA;sBAAjB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,eAAe,EAAA,CAAA;sBAAvB;gBACQ,UAAU,EAAA,CAAA;sBAAlB;gBACQ,iBAAiB,EAAA,CAAA;sBAAzB;gBACQ,QAAQ,EAAA,CAAA;sBAAhB;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACY,WAAW,EAAA,CAAA;sBAAvB;gBAIQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,aAAa,EAAA,CAAA;sBAArB;gBACQ,qBAAqB,EAAA,CAAA;sBAA7B;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,WAAW,EAAA,CAAA;sBAAnB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACQ,gBAAgB,EAAA,CAAA;sBAAxB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBACY,qBAAqB,EAAA,CAAA;sBAAjC;gBAGQ,oBAAoB,EAAA,CAAA;sBAA5B;gBACQ,mBAAmB,EAAA,CAAA;sBAA3B;gBACQ,wBAAwB,EAAA,CAAA;sBAAhC;gBACQ,YAAY,EAAA,CAAA;sBAApB;gBACQ,cAAc,EAAA,CAAA;sBAAtB;gBAEQ,WAAW,EAAA,CAAA;sBAAnB;gBAES,SAAS,EAAA,CAAA;sBAAlB;gBACS,YAAY,EAAA,CAAA;sBAArB;;;AEvKL;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs

@@ -1,6 +1,6 @@
 import { FrozenGifDirective } from '@agorapulse/ui-components/directives';
 import * as i2 from '@agorapulse/ui-symbol';
-import { apClose, apChevronRight, apArrowLeft1, apArrowRight1, SymbolComponent } from '@agorapulse/ui-symbol';
+import { apClose, apArrowLeft, apArrowRight, SymbolComponent } from '@agorapulse/ui-symbol';
 import * as i0 from '@angular/core';
 import { HostListener, ViewChild, Inject, ChangeDetectionStrategy, Component } from '@angular/core';
 import * as i1 from '@angular/material/dialog';
@@ -40,7 +40,7 @@ class MediaDisplayOverlayDialogComponent {
         this.dialogRef = dialogRef;
         this.data = data;
         this.symbolRegistry = symbolRegistry;
-        this.symbolRegistry.registerSymbols([apClose, apChevronRight, apArrowLeft1, apArrowRight1]);
+        this.symbolRegistry.registerSymbols([apClose, apArrowLeft, apArrowRight]);
     }
     ngOnInit() {
         // const data = ModalService.getModal('media-display-overlay') || {};
@@ -105,11 +105,11 @@ class MediaDisplayOverlayDialogComponent {
         }
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MediaDisplayOverlayDialogComponent, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }, { token: i2.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left-1\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"chevron-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: MediaDisplayOverlayDialogComponent, isStandalone: true, selector: "ap-media-display-overlay", host: { listeners: { "window:keyup": "keyEvent($event)" } }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: FrozenGifDirective, selector: "img[apFrozenGif]", inputs: ["src", "apFrozen", "apGifEvents"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: MediaDisplayOverlayDialogComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', imports: [SymbolComponent, FrozenGifDirective], template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left-1\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"chevron-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-media-display-overlay', imports: [SymbolComponent, FrozenGifDirective], template: "<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\n    </div>\n</div>\n", styles: ["[color=facebook]{color:#0866ff}[bgcolor=facebook],[hcolor=facebook]:hover{background-color:#0866ff}[border=facebook]{border:1px solid #0866ff}[color=google]{color:#4e85e8}[bgcolor=google],[hcolor=google]:hover{background-color:#4e85e8}[border=google]{border:1px solid #4e85e8}[color=instagram]{color:#e1306c}[bgcolor=instagram],[hcolor=instagram]:hover{background-color:#e1306c}[border=instagram]{border:1px solid #e1306c}[color=instagrammagenta]{color:#c13584}[bgcolor=instagrammagenta],[hcolor=instagrammagenta]:hover{background-color:#c13584}[border=instagrammagenta]{border:1px solid #c13584}[color=instagramblue]{color:#5851db}[bgcolor=instagramblue],[hcolor=instagramblue]:hover{background-color:#5851db}[border=instagramblue]{border:1px solid #5851db}[color=instagrampurple]{color:#833ab4}[bgcolor=instagrampurple],[hcolor=instagrampurple]:hover{background-color:#833ab4}[border=instagrampurple]{border:1px solid #833ab4}[color=instagramorange]{color:#f56040}[bgcolor=instagramorange],[hcolor=instagramorange]:hover{background-color:#f56040}[border=instagramorange]{border:1px solid #f56040}[color=instagramyellow]{color:#ffdc80}[bgcolor=instagramyellow],[hcolor=instagramyellow]:hover{background-color:#ffdc80}[border=instagramyellow]{border:1px solid #ffdc80}[color=linkedin]{color:#2c67bc}[bgcolor=linkedin],[hcolor=linkedin]:hover{background-color:#2c67bc}[border=linkedin]{border:1px solid #2c67bc}[color=twitter]{color:#55acee}[bgcolor=twitter],[hcolor=twitter]:hover{background-color:#55acee}[border=twitter]{border:1px solid #55acee}[color=youtube]{color:red}[bgcolor=youtube],[hcolor=youtube]:hover{background-color:red}[border=youtube]{border:1px solid #ff0000}[color=reddit]{color:#ff4500}[bgcolor=reddit],[hcolor=reddit]:hover{background-color:#ff4500}[border=reddit]{border:1px solid #ff4500}[color=blood-orange]{color:#ff4d00}[bgcolor=blood-orange],[hcolor=blood-orange]:hover{background-color:#ff4d00}[border=blood-orange]{border:1px solid #ff4d00}[color=pinkish-orange]{color:#ff7b49}[bgcolor=pinkish-orange],[hcolor=pinkish-orange]:hover{background-color:#ff7b49}[border=pinkish-orange]{border:1px solid #ff7b49}[color=charcoal-grey]{color:#2a2f34}[bgcolor=charcoal-grey],[hcolor=charcoal-grey]:hover{background-color:#2a2f34}[border=charcoal-grey]{border:1px solid #2a2f34}[color=azure]{color:#00aeef}[bgcolor=azure],[hcolor=azure]:hover{background-color:#00aeef}[border=azure]{border:1px solid #00aeef}[color=light-azure]{color:#eaf5fd}[bgcolor=light-azure],[hcolor=light-azure]:hover{background-color:#eaf5fd}[border=light-azure]{border:1px solid #eaf5fd}[color=blue-grey]{color:#8d98a9}[bgcolor=blue-grey],[hcolor=blue-grey]:hover{background-color:#8d98a9}[border=blue-grey]{border:1px solid #8d98a9}[color=silver]{color:#ced0da}[bgcolor=silver],[hcolor=silver]:hover{background-color:#ced0da}[border=silver]{border:1px solid #ced0da}[color=pale-grey]{color:#dfe3e9}[bgcolor=pale-grey],[hcolor=pale-grey]:hover{background-color:#dfe3e9}[border=pale-grey]{border:1px solid #dfe3e9}[color=grey-white]{color:#f5f7f8}[bgcolor=grey-white],[hcolor=grey-white]:hover{background-color:#f5f7f8}[border=grey-white]{border:1px solid #f5f7f8}[color=cool-grey]{color:#b4bbc6}[bgcolor=cool-grey],[hcolor=cool-grey]:hover{background-color:#b4bbc6}[border=cool-grey]{border:1px solid #b4bbc6}[color=black]{color:#344563}[bgcolor=black],[hcolor=black]:hover{background-color:#344563}[border=black]{border:1px solid #344563}[color=grey-blue]{color:#68768c}[bgcolor=grey-blue],[hcolor=grey-blue]:hover{background-color:#68768c}[border=grey-blue]{border:1px solid #68768c}[color=strawberry]{color:#f4282d}[bgcolor=strawberry],[hcolor=strawberry]:hover{background-color:#f4282d}[border=strawberry]{border:1px solid #f4282d}[color=light-strawberry]{color:#f8eded}[bgcolor=light-strawberry],[hcolor=light-strawberry]:hover{background-color:#f8eded}[border=light-strawberry]{border:1px solid #f8eded}[color=white]{color:#fff}[bgcolor=white],[hcolor=white]:hover{background-color:#fff}[border=white]{border:1px solid #ffffff}[color=cool-green]{color:#33c15d}[bgcolor=cool-green],[hcolor=cool-green]:hover{background-color:#33c15d}[border=cool-green]{border:1px solid #33c15d}[color=light-green]{color:#ebfaef}[bgcolor=light-green],[hcolor=light-green]:hover{background-color:#ebfaef}[border=light-green]{border:1px solid #ebfaef}[color=transparent]{color:transparent}[bgcolor=transparent],[hcolor=transparent]:hover{background-color:transparent}[border=transparent]{border:1px solid transparent}[color=c0]{color:#a566a5}[bgcolor=c0],[hcolor=c0]:hover{background-color:#a566a5}[border=c0]{border:1px solid #a566a5}[color=c1]{color:#c7ab82}[bgcolor=c1],[hcolor=c1]:hover{background-color:#c7ab82}[border=c1]{border:1px solid #c7ab82}[color=c2]{color:#f2713c}[bgcolor=c2],[hcolor=c2]:hover{background-color:#f2713c}[border=c2]{border:1px solid #f2713c}[color=c3]{color:#ffd006}[bgcolor=c3],[hcolor=c3]:hover{background-color:#ffd006}[border=c3]{border:1px solid #ffd006}[color=c4]{color:#94c5aa}[bgcolor=c4],[hcolor=c4]:hover{background-color:#94c5aa}[border=c4]{border:1px solid #94c5aa}[color=c5]{color:#2a9d8f}[bgcolor=c5],[hcolor=c5]:hover{background-color:#2a9d8f}[border=c5]{border:1px solid #2a9d8f}[color=c6]{color:#78acd8}[bgcolor=c6],[hcolor=c6]:hover{background-color:#78acd8}[border=c6]{border:1px solid #78acd8}[color=c7]{color:#525a9e}[bgcolor=c7],[hcolor=c7]:hover{background-color:#525a9e}[border=c7]{border:1px solid #525a9e}[color=c8]{color:#6a2459}[bgcolor=c8],[hcolor=c8]:hover{background-color:#6a2459}[border=c8]{border:1px solid #6a2459}[color=c9]{color:#74729e}[bgcolor=c9],[hcolor=c9]:hover{background-color:#74729e}[border=c9]{border:1px solid #74729e}:host{width:100%;height:100%}.full{height:100%;width:100%}::ng-deep .full-screen-modal .mat-mdc-dialog-container .mdc-dialog__surface{background:none;padding:var(--ref-spacing-md)}.media-display{background:transparent;display:flex;flex-direction:column;width:100%;height:100%;cursor:pointer}.media-display .media-container{margin:auto;align-items:center;flex-direction:column;display:flex;cursor:default}.media-display .media-container img,.media-display .media-container video{max-width:80%}.media-display .media-container .media-container-video{display:inherit;justify-content:center;position:relative}.media-display .media-container .media-container-video .play-button{z-index:1000;position:absolute;inset:0;width:var(--ref-font-line-height-xl);height:var(--ref-font-line-height-xl);transform:scale(2);margin:auto;filter:drop-shadow(0 0 1px rgba(0,0,0,.25))}.media-display .media-container .media-container-video .play-button path{fill:#fffc}.media-display .ap-modal-content{display:block;padding-bottom:10px;margin:auto}.media-display .ap-modal-header{background:transparent;border-bottom:none;display:flex;justify-content:flex-end}.media-display .ap-modal-header .ap-modal-close{color:#fff}.media-display .ap-modal-header .ap-modal-close.ap-icon{font-size:45px}.media-display .ap-modal-footer{justify-content:flex-end;background:transparent;border:none;margin-bottom:24px;align-items:center;display:flex;flex-direction:column}.media-display .ap-modal-footer .index-container{color:#fff;font-size:24px;display:inline;background-color:#0000001a;border-radius:20px;padding:16px}.media-display .next-prev-container{display:flex;justify-content:center;align-items:center;width:60px;height:60px;position:absolute;top:45%;cursor:pointer;background-color:#0000001a;border-radius:60px;color:#fff}.media-display .next-prev-container .ap-icon{font-size:45px}.media-display .next-prev-container.right{margin-right:24px;right:0}.media-display .next-prev-container.right .icon-container{margin-left:7px}.media-display .next-prev-container[disabled] .ap-icon{color:#dfe3e9}.media-display .next-prev-container.left{margin-left:24px;left:0}.media-display .next-prev-container.left .icon-container{margin-right:5px}.media-display .next-prev-container.disabled{cursor:not-allowed}\n"] }]
         }], ctorParameters: () => [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [MAT_DIALOG_DATA]

package/fesm2022/agorapulse-ui-components-media-display-overlay.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-media-display-overlay.mjs","sources":["../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.ts","../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.html","../../../libs/ui-components/media-display-overlay/src/agorapulse-ui-components-media-display-overlay.ts"],"sourcesContent":["import { FrozenGifDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent, SymbolRegistry, apArrowLeft1, apArrowRight1, apChevronRight, apClose } from '@agorapulse/ui-symbol';\n\nimport { ChangeDetectionStrategy, Component, ElementRef, HostListener, Inject, OnInit, ViewChild } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';\n\nexport interface MediaDisplayData {\n    mediaInfo: MediaInfo[];\n    clickedMedia?: MediaInfo;\n    supportGif: boolean;\n}\n\nexport enum KEY_CODE {\n    RIGHT_ARROW = 39,\n    LEFT_ARROW = 37,\n}\n\nexport interface MediaInfo {\n    url: string;\n    type: 'PHOTO' | 'VIDEO';\n    thumbnail?: string;\n}\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-media-display-overlay',\n    styleUrls: ['./media-display-overlay-dialog.component.scss'],\n    templateUrl: './media-display-overlay-dialog.component.html',\n    imports: [SymbolComponent, FrozenGifDirective],\n})\nexport class MediaDisplayOverlayDialogComponent implements OnInit {\n    @ViewChild('videoPlayer') videoPlayer: ElementRef<HTMLVideoElement> | undefined;\n\n    static config: MatDialogConfig<MediaDisplayData> = {\n        position: {\n            top: '10px',\n            right: '10px',\n            left: '10px',\n        },\n        height: '100%',\n        width: '100%',\n        maxWidth: 'none',\n        panelClass: 'full-screen-modal',\n        backdropClass: 'dark-backdrop',\n    };\n\n    currentUrlIndex = 1;\n    mediaInfo: MediaInfo[] = []; // all urls and types\n    mediaType: 'PHOTO' | 'VIDEO' | undefined = undefined;\n    supportGif = true;\n    thumbnailCover: string | undefined = undefined;\n    isPlayingVideo = false;\n    urls: string[] = []; // all urls\n    url: string | undefined = undefined; // current displayed url\n\n    constructor(\n        public dialogRef: MatDialogRef<MediaDisplayOverlayDialogComponent>,\n        @Inject(MAT_DIALOG_DATA) public data: MediaDisplayData,\n        public symbolRegistry: SymbolRegistry\n    ) {\n        this.symbolRegistry.registerSymbols([apClose, apChevronRight, apArrowLeft1, apArrowRight1]);\n    }\n\n    ngOnInit(): void {\n        // const data = ModalService.getModal('media-display-overlay') || {};\n        if (this.data) {\n            if (this.data.mediaInfo && this.data.mediaInfo.length > 0) {\n                this.mediaInfo = this.data.mediaInfo;\n            }\n            if (this.data.clickedMedia?.url && this.data.clickedMedia.url.length > 0) {\n                const currentMedia: MediaInfo = this.data.clickedMedia;\n                if (this.mediaInfo.length === 0) {\n                    this.mediaInfo = [currentMedia];\n                }\n                this.url = this.data.clickedMedia.url;\n                this.mediaType = this.data.clickedMedia.type;\n                this.thumbnailCover = this.data.clickedMedia.thumbnail;\n                this.isPlayingVideo = false;\n                this.currentUrlIndex = this.mediaInfo.findIndex(media => media.url === currentMedia.url) + 1;\n            }\n        }\n    }\n\n    onClose() {\n        this.dialogRef.close();\n    }\n\n    onNext($event: UIEvent): void {\n        if (this.currentUrlIndex < this.mediaInfo.length) {\n            this.currentUrlIndex += 1;\n            this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n            this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n            this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n            this.isPlayingVideo = false;\n        }\n        $event.stopPropagation();\n    }\n\n    onPrevious($event: UIEvent): void {\n        if (this.currentUrlIndex > 1) {\n            this.currentUrlIndex -= 1;\n            this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n            this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n            this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n            this.isPlayingVideo = false;\n        }\n        $event.stopPropagation();\n    }\n\n    play($event: UIEvent): void {\n        if (this.videoPlayer) {\n            if (this.isPlayingVideo) {\n                this.videoPlayer.nativeElement.pause();\n            } else {\n                this.videoPlayer.nativeElement.play();\n            }\n            this.isPlayingVideo = !this.isPlayingVideo;\n            $event.stopPropagation();\n        }\n    }\n\n    @HostListener('window:keyup', ['$event'])\n    keyEvent(event: KeyboardEvent) {\n        if (event.keyCode === KEY_CODE.RIGHT_ARROW) {\n            this.onNext(event);\n        }\n\n        if (event.keyCode === KEY_CODE.LEFT_ARROW) {\n            this.onPrevious(event);\n        }\n    }\n}\n","<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left-1\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"chevron-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\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-media-display-overlay.mjs","sources":["../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.ts","../../../libs/ui-components/media-display-overlay/src/media-display-overlay-dialog.component.html","../../../libs/ui-components/media-display-overlay/src/agorapulse-ui-components-media-display-overlay.ts"],"sourcesContent":["import { FrozenGifDirective } from '@agorapulse/ui-components/directives';\nimport { SymbolComponent, SymbolRegistry, apArrowLeft, apArrowRight, apClose } from '@agorapulse/ui-symbol';\n\nimport { ChangeDetectionStrategy, Component, ElementRef, HostListener, Inject, OnInit, ViewChild } from '@angular/core';\nimport { MAT_DIALOG_DATA, MatDialogConfig, MatDialogRef } from '@angular/material/dialog';\n\nexport interface MediaDisplayData {\n    mediaInfo: MediaInfo[];\n    clickedMedia?: MediaInfo;\n    supportGif: boolean;\n}\n\nexport enum KEY_CODE {\n    RIGHT_ARROW = 39,\n    LEFT_ARROW = 37,\n}\n\nexport interface MediaInfo {\n    url: string;\n    type: 'PHOTO' | 'VIDEO';\n    thumbnail?: string;\n}\n\n@Component({\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    selector: 'ap-media-display-overlay',\n    styleUrls: ['./media-display-overlay-dialog.component.scss'],\n    templateUrl: './media-display-overlay-dialog.component.html',\n    imports: [SymbolComponent, FrozenGifDirective],\n})\nexport class MediaDisplayOverlayDialogComponent implements OnInit {\n    @ViewChild('videoPlayer') videoPlayer: ElementRef<HTMLVideoElement> | undefined;\n\n    static config: MatDialogConfig<MediaDisplayData> = {\n        position: {\n            top: '10px',\n            right: '10px',\n            left: '10px',\n        },\n        height: '100%',\n        width: '100%',\n        maxWidth: 'none',\n        panelClass: 'full-screen-modal',\n        backdropClass: 'dark-backdrop',\n    };\n\n    currentUrlIndex = 1;\n    mediaInfo: MediaInfo[] = []; // all urls and types\n    mediaType: 'PHOTO' | 'VIDEO' | undefined = undefined;\n    supportGif = true;\n    thumbnailCover: string | undefined = undefined;\n    isPlayingVideo = false;\n    urls: string[] = []; // all urls\n    url: string | undefined = undefined; // current displayed url\n\n    constructor(\n        public dialogRef: MatDialogRef<MediaDisplayOverlayDialogComponent>,\n        @Inject(MAT_DIALOG_DATA) public data: MediaDisplayData,\n        public symbolRegistry: SymbolRegistry\n    ) {\n        this.symbolRegistry.registerSymbols([apClose, apArrowLeft, apArrowRight]);\n    }\n\n    ngOnInit(): void {\n        // const data = ModalService.getModal('media-display-overlay') || {};\n        if (this.data) {\n            if (this.data.mediaInfo && this.data.mediaInfo.length > 0) {\n                this.mediaInfo = this.data.mediaInfo;\n            }\n            if (this.data.clickedMedia?.url && this.data.clickedMedia.url.length > 0) {\n                const currentMedia: MediaInfo = this.data.clickedMedia;\n                if (this.mediaInfo.length === 0) {\n                    this.mediaInfo = [currentMedia];\n                }\n                this.url = this.data.clickedMedia.url;\n                this.mediaType = this.data.clickedMedia.type;\n                this.thumbnailCover = this.data.clickedMedia.thumbnail;\n                this.isPlayingVideo = false;\n                this.currentUrlIndex = this.mediaInfo.findIndex(media => media.url === currentMedia.url) + 1;\n            }\n        }\n    }\n\n    onClose() {\n        this.dialogRef.close();\n    }\n\n    onNext($event: UIEvent): void {\n        if (this.currentUrlIndex < this.mediaInfo.length) {\n            this.currentUrlIndex += 1;\n            this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n            this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n            this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n            this.isPlayingVideo = false;\n        }\n        $event.stopPropagation();\n    }\n\n    onPrevious($event: UIEvent): void {\n        if (this.currentUrlIndex > 1) {\n            this.currentUrlIndex -= 1;\n            this.url = this.mediaInfo[this.currentUrlIndex - 1].url;\n            this.mediaType = this.mediaInfo[this.currentUrlIndex - 1].type;\n            this.thumbnailCover = this.mediaInfo[this.currentUrlIndex - 1].thumbnail;\n            this.isPlayingVideo = false;\n        }\n        $event.stopPropagation();\n    }\n\n    play($event: UIEvent): void {\n        if (this.videoPlayer) {\n            if (this.isPlayingVideo) {\n                this.videoPlayer.nativeElement.pause();\n            } else {\n                this.videoPlayer.nativeElement.play();\n            }\n            this.isPlayingVideo = !this.isPlayingVideo;\n            $event.stopPropagation();\n        }\n    }\n\n    @HostListener('window:keyup', ['$event'])\n    keyEvent(event: KeyboardEvent) {\n        if (event.keyCode === KEY_CODE.RIGHT_ARROW) {\n            this.onNext(event);\n        }\n\n        if (event.keyCode === KEY_CODE.LEFT_ARROW) {\n            this.onPrevious(event);\n        }\n    }\n}\n","<div\n    class=\"full\"\n    (click)=\"onClose()\">\n    <div class=\"media-display ap-new\">\n        <header class=\"ap-modal-header\">\n            <ap-symbol\n                symbolId=\"close\"\n                color=\"white\"\n                size=\"sm\"\n                (click)=\"onClose()\" />\n        </header>\n        <slot class=\"ap-modal-content\">\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container left\"\n                    [class.disabled]=\"currentUrlIndex <= 1\"\n                    (click)=\"onPrevious($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-left\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex <= 1 ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n            <div class=\"media-container\">\n                @if (url && mediaType === 'PHOTO') {\n                    <img\n                        apFrozenGif\n                        [apFrozen]=\"!supportGif\"\n                        [src]=\"url\"\n                        (click)=\"$event.stopPropagation()\" />\n                }\n                @if (url && mediaType === 'VIDEO') {\n                    <div class=\"media-container-video\">\n                        <video\n                            #videoPlayer\n                            controls\n                            disablepictureinpicture\n                            muted\n                            controlsList=\"nofullscreen\"\n                            [id]=\"'video-' + currentUrlIndex\"\n                            [poster]=\"thumbnailCover\"\n                            [src]=\"url\"\n                            (click)=\"play($event)\"\n                            (playing)=\"isPlayingVideo = true\"\n                            (pause)=\"isPlayingVideo = false\"\n                            (ended)=\"isPlayingVideo = false\"></video>\n                        <svg\n                            class=\"play-button\"\n                            xmlns=\"http://www.w3.org/2000/svg\"\n                            (click)=\"play($event)\">\n                            @if (!isPlayingVideo) {\n                                <path d=\"M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28\" />\n                            }\n                        </svg>\n                    </div>\n                }\n            </div>\n            @if (mediaInfo.length > 1) {\n                <div\n                    class=\"next-prev-container right\"\n                    [class.disabled]=\"currentUrlIndex >= mediaInfo.length\"\n                    (click)=\"onNext($event)\">\n                    <div class=\"icon-container\">\n                        <ap-symbol\n                            symbolId=\"arrow-right\"\n                            size=\"lg\"\n                            [color]=\"currentUrlIndex >= mediaInfo.length ? 'grey-blue' : 'white'\" />\n                    </div>\n                </div>\n            }\n        </slot>\n        @if (mediaInfo && mediaInfo.length > 1) {\n            <footer class=\"ap-modal-footer\">\n                <div class=\"index-container\">{{ currentUrlIndex }} / {{ mediaInfo.length }}</div>\n            </footer>\n        }\n    </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":";;;;;;;;IAYY;AAAZ,CAAA,UAAY,QAAQ,EAAA;AAChB,IAAA,QAAA,CAAA,QAAA,CAAA,aAAA,CAAA,GAAA,EAAA,CAAA,GAAA,aAAgB;AAChB,IAAA,QAAA,CAAA,QAAA,CAAA,YAAA,CAAA,GAAA,EAAA,CAAA,GAAA,YAAe;AACnB,CAAC,EAHW,QAAQ,KAAR,QAAQ,GAAA,EAAA,CAAA,CAAA;MAkBP,kCAAkC,CAAA;AA0BhC,IAAA,SAAA;AACyB,IAAA,IAAA;AACzB,IAAA,cAAA;AA3Be,IAAA,WAAW;IAErC,OAAO,MAAM,GAAsC;AAC/C,QAAA,QAAQ,EAAE;AACN,YAAA,GAAG,EAAE,MAAM;AACX,YAAA,KAAK,EAAE,MAAM;AACb,YAAA,IAAI,EAAE,MAAM;AACf,SAAA;AACD,QAAA,MAAM,EAAE,MAAM;AACd,QAAA,KAAK,EAAE,MAAM;AACb,QAAA,QAAQ,EAAE,MAAM;AAChB,QAAA,UAAU,EAAE,mBAAmB;AAC/B,QAAA,aAAa,EAAE,eAAe;KACjC;IAED,eAAe,GAAG,CAAC;AACnB,IAAA,SAAS,GAAgB,EAAE,CAAC;IAC5B,SAAS,GAAkC,SAAS;IACpD,UAAU,GAAG,IAAI;IACjB,cAAc,GAAuB,SAAS;IAC9C,cAAc,GAAG,KAAK;AACtB,IAAA,IAAI,GAAa,EAAE,CAAC;AACpB,IAAA,GAAG,GAAuB,SAAS,CAAC;AAEpC,IAAA,WAAA,CACW,SAA2D,EAClC,IAAsB,EAC/C,cAA8B,EAAA;QAF9B,IAAA,CAAA,SAAS,GAAT,SAAS;QACgB,IAAA,CAAA,IAAI,GAAJ,IAAI;QAC7B,IAAA,CAAA,cAAc,GAAd,cAAc;AAErB,QAAA,IAAI,CAAC,cAAc,CAAC,eAAe,CAAC,CAAC,OAAO,EAAE,WAAW,EAAE,YAAY,CAAC,CAAC;;IAG7E,QAAQ,GAAA;;AAEJ,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACX,YAAA,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE;gBACvD,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,SAAS;;YAExC,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE,GAAG,IAAI,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG,CAAC,MAAM,GAAG,CAAC,EAAE;AACtE,gBAAA,MAAM,YAAY,GAAc,IAAI,CAAC,IAAI,CAAC,YAAY;gBACtD,IAAI,IAAI,CAAC,SAAS,CAAC,MAAM,KAAK,CAAC,EAAE;AAC7B,oBAAA,IAAI,CAAC,SAAS,GAAG,CAAC,YAAY,CAAC;;gBAEnC,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,GAAG;gBACrC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI;gBAC5C,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,SAAS;AACtD,gBAAA,IAAI,CAAC,cAAc,GAAG,KAAK;gBAC3B,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,GAAG,KAAK,YAAY,CAAC,GAAG,CAAC,GAAG,CAAC;;;;IAKxG,OAAO,GAAA;AACH,QAAA,IAAI,CAAC,SAAS,CAAC,KAAK,EAAE;;AAG1B,IAAA,MAAM,CAAC,MAAe,EAAA;QAClB,IAAI,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,SAAS,CAAC,MAAM,EAAE;AAC9C,YAAA,IAAI,CAAC,eAAe,IAAI,CAAC;AACzB,YAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,GAAG;AACvD,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,IAAI;AAC9D,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;AACxE,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;QAE/B,MAAM,CAAC,eAAe,EAAE;;AAG5B,IAAA,UAAU,CAAC,MAAe,EAAA;AACtB,QAAA,IAAI,IAAI,CAAC,eAAe,GAAG,CAAC,EAAE;AAC1B,YAAA,IAAI,CAAC,eAAe,IAAI,CAAC;AACzB,YAAA,IAAI,CAAC,GAAG,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,GAAG;AACvD,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,IAAI;AAC9D,YAAA,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,eAAe,GAAG,CAAC,CAAC,CAAC,SAAS;AACxE,YAAA,IAAI,CAAC,cAAc,GAAG,KAAK;;QAE/B,MAAM,CAAC,eAAe,EAAE;;AAG5B,IAAA,IAAI,CAAC,MAAe,EAAA;AAChB,QAAA,IAAI,IAAI,CAAC,WAAW,EAAE;AAClB,YAAA,IAAI,IAAI,CAAC,cAAc,EAAE;AACrB,gBAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,KAAK,EAAE;;iBACnC;AACH,gBAAA,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,IAAI,EAAE;;AAEzC,YAAA,IAAI,CAAC,cAAc,GAAG,CAAC,IAAI,CAAC,cAAc;YAC1C,MAAM,CAAC,eAAe,EAAE;;;AAKhC,IAAA,QAAQ,CAAC,KAAoB,EAAA;QACzB,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,WAAW,EAAE;AACxC,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,CAAC;;QAGtB,IAAI,KAAK,CAAC,OAAO,KAAK,QAAQ,CAAC,UAAU,EAAE;AACvC,YAAA,IAAI,CAAC,UAAU,CAAC,KAAK,CAAC;;;AAlGrB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,kBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,QAAA,EAAA,EAAA,EAAA,IAAA,EAAA,kCAAkC,8CA2B/B,eAAe,EAAA,EAAA,EAAA,KAAA,EAAA,EAAA,CAAA,cAAA,EAAA,CAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;AA3BlB,IAAA,OAAA,IAAA,GAAA,EAAA,CAAA,oBAAA,CAAA,EAAA,UAAA,EAAA,QAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,kCAAkC,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,0BAAA,EAAA,IAAA,EAAA,EAAA,SAAA,EAAA,EAAA,cAAA,EAAA,kBAAA,EAAA,EAAA,EAAA,WAAA,EAAA,CAAA,EAAA,YAAA,EAAA,aAAA,EAAA,KAAA,EAAA,IAAA,EAAA,SAAA,EAAA,CAAA,aAAA,CAAA,EAAA,WAAA,EAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,EC9B/C,k3GAgFA,EAAA,MAAA,EAAA,CAAA,4wPAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDpDc,eAAe,sHAAE,kBAAkB,EAAA,QAAA,EAAA,kBAAA,EAAA,MAAA,EAAA,CAAA,KAAA,EAAA,UAAA,EAAA,aAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,CAAA;;2FAEpC,kCAAkC,EAAA,UAAA,EAAA,CAAA;kBAP9C,SAAS;sCACW,uBAAuB,CAAC,MAAM,EAAA,QAAA,EACrC,0BAA0B,WAG3B,CAAC,eAAe,EAAE,kBAAkB,CAAC,EAAA,QAAA,EAAA,k3GAAA,EAAA,MAAA,EAAA,CAAA,4wPAAA,CAAA,EAAA;;0BA6BzC,MAAM;2BAAC,eAAe;sEA1BD,WAAW,EAAA,CAAA;sBAApC,SAAS;uBAAC,aAAa;gBA2FxB,QAAQ,EAAA,CAAA;sBADP,YAAY;uBAAC,cAAc,EAAE,CAAC,QAAQ,CAAC;;;AEzH5C;;AAEG;;;;"}

package/fesm2022/agorapulse-ui-components-neo-datepicker.mjs

@@ -3,7 +3,7 @@ import { Pipe, EventEmitter, inject, Output, Input, ChangeDetectionStrategy, Com
 import { ButtonComponent } from '@agorapulse/ui-components/button';
 import { IconButtonComponent } from '@agorapulse/ui-components/icon-button';
 import * as i1 from '@agorapulse/ui-symbol';
-import { apArrowButtonLeft, apArrowButtonRight, SymbolComponent } from '@agorapulse/ui-symbol';
+import { apChevronLeft, apChevronRight, SymbolComponent } from '@agorapulse/ui-symbol';
 import { NgTemplateOutlet, TitleCasePipe, SlicePipe, AsyncPipe } from '@angular/common';
 import dayjs from 'dayjs';
 import 'dayjs/locale/de';
@@ -101,7 +101,7 @@ class NeoDatepickerComponent {
     destroy$ = injectDestroy();
     constructor(symbolRegistry) {
         this.symbolRegistry = symbolRegistry;
-        this.symbolRegistry.registerSymbols([apArrowButtonLeft, apArrowButtonRight]);
+        this.symbolRegistry.registerSymbols([apChevronLeft, apChevronRight]);
     }
     ngOnInit() {
         dayjs.extend(localeData);