@agorapulse/ui-components 18.1.13 → 18.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-paginator.mjs","sources":["../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.ts","../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.html","../../../libs/ui-components/paginator/src/paginator.component.ts","../../../libs/ui-components/paginator/src/paginator.component.html","../../../libs/ui-components/paginator/src/agorapulse-ui-components-paginator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';\n\n@Component({\n    selector: 'ap-paginator-button',\n    templateUrl: './paginator-button.component.html',\n    styleUrls: ['./paginator-button.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class PaginatorButtonComponent {\n    @ViewChild('button') button!: ElementRef<HTMLButtonElement>;\n\n    @Input() ariaLabel: string = '';\n    @Input() disabled = false;\n    @Input() pageIndex = 0;\n    @Input() selectedPageIndex = 0;\n\n    @Output() selectPage = new EventEmitter<number>();\n\n    focused: boolean = false;\n\n    onClickHandle(pageIndex: number): void {\n        this.button.nativeElement.blur();\n        this.selectPage.emit(pageIndex);\n    }\n\n    onBlurHandle() {\n        this.focused = false;\n    }\n\n    onFocusHandle() {\n        this.focused = true;\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused) {\n            event.preventDefault();\n            console.log('this.button.nativeElement', this.button.nativeElement);\n            this.button.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    class=\"square-button\"\n    role=\"button\"\n    type=\"button\"\n    [id]=\"'paginator-button-' + pageIndex\"\n    [class.active]=\"selectedPageIndex === pageIndex\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    (click)=\"onClickHandle(pageIndex)\"\n    (blur)=\"onBlurHandle()\"\n    (focus)=\"onFocusHandle()\">\n    <span>\n        {{ pageIndex + 1 }}\n    </span>\n</button>\n","import { SymbolComponent, SymbolRegistry, apArrowLeft, apArrowRight } from '@agorapulse/ui-symbol';\n\nimport { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, OnDestroy, Output, ViewEncapsulation } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { BehaviorSubject, Subject, combineLatest, distinctUntilChanged, takeUntil } from 'rxjs';\nimport { PaginatorButtonComponent } from './paginator-button/paginator-button.component';\n\n@Component({\n    selector: 'ap-paginator',\n    templateUrl: './paginator.component.html',\n    styleUrls: ['./paginator.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [SymbolComponent, PaginatorButtonComponent, ReactiveFormsModule, FormsModule],\n    standalone: true,\n    encapsulation: ViewEncapsulation.None,\n})\nexport class PaginatorComponent implements OnDestroy {\n    readonly DEFAULT_MIDDLE_SIZE = 3;\n    readonly DEFAULT_ITEM_COUNT = 0;\n    readonly DEFAULT_ITEM_COUNT_PER_PAGE = 10;\n    readonly DEFAULT_CURRENT_PAGE_INDEX = 0;\n    readonly DEFAULT_EDGE_SIZE = 5;\n\n    @Input() set currentPageIndex(value: number) {\n        this._currentPageIndex.next(value ?? this.DEFAULT_CURRENT_PAGE_INDEX);\n    }\n\n    get currentPageIndex(): number {\n        return this._currentPageIndex.getValue();\n    }\n\n    @Input() displayGoTo = false;\n    @Input() edgeSize: number = this.DEFAULT_EDGE_SIZE;\n    @Input() goToLabel: string = 'Go to';\n    @Input() set itemCount(value: number) {\n        this._itemCount.next(value ?? this.DEFAULT_ITEM_COUNT);\n    }\n\n    get itemCount(): number {\n        return this._itemCount.getValue();\n    }\n    @Input() set itemCountPerPage(value: number) {\n        this._itemCountPerPage.next(value ?? this.DEFAULT_ITEM_COUNT_PER_PAGE);\n    }\n\n    get itemCountPerPage(): number {\n        return this._itemCountPerPage.getValue();\n    }\n\n    private _middleSize!: number;\n    @Input() set middleSize(value: number) {\n        // make sure middle size is an odd number\n        if (value && value % 2 === 0) {\n            value++;\n        }\n        this._middleSize = value ?? this.DEFAULT_MIDDLE_SIZE;\n    }\n\n    get middleSize(): number {\n        return this._middleSize;\n    }\n\n    @Output() currentPageIndexChange = new EventEmitter<number>();\n\n    pageInput: string = '';\n    pageCount = 0;\n    firstPageDisplayed = true;\n    lastPageDisplayed = true;\n    private destroy$: Subject<void> = new Subject<void>();\n\n    private _itemCount: BehaviorSubject<number> = new BehaviorSubject<number>(this.DEFAULT_ITEM_COUNT);\n    private _itemCountPerPage: BehaviorSubject<number> = new BehaviorSubject<number>(this.DEFAULT_ITEM_COUNT_PER_PAGE);\n    private _currentPageIndex: BehaviorSubject<number> = new BehaviorSubject<number>(this.DEFAULT_CURRENT_PAGE_INDEX);\n\n    constructor(public symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([apArrowLeft, apArrowRight]);\n        combineLatest([this._itemCount, this._itemCountPerPage, this._currentPageIndex])\n            .pipe(\n                distinctUntilChanged(\n                    (\n                        [previousItemCount, previousItemCountPerPage, previousCurrentPageIndex],\n                        [itemCount, itemCountPerPage, currentPageIndex]\n                    ) => {\n                        return (\n                            previousItemCount === itemCount &&\n                            previousItemCountPerPage === itemCountPerPage &&\n                            previousCurrentPageIndex === currentPageIndex\n                        );\n                    }\n                ),\n                takeUntil(this.destroy$)\n            )\n            .subscribe(([itemCount, itemCountPerPage, currentPageIndex]) => {\n                this.pageCount = Math.ceil(itemCount / itemCountPerPage);\n                // make sure page index is between min and max page index\n                this._currentPageIndex.next(Math.max(0, Math.min(this.pageCount - 1, currentPageIndex)));\n                this.firstPageDisplayed = this.currentPageIndex === 0;\n                this.lastPageDisplayed = this.currentPageIndex === this.pageCount - 1;\n            });\n    }\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    @HostListener('keydown.enter')\n    onEnterKeydownPressed() {\n        if (this.pageInput && !isNaN(+this.pageInput) && +this.pageInput > 0 && +this.pageInput <= this.pageCount) {\n            this.onSelectPage(+this.pageInput - 1);\n        }\n        this.pageInput = '';\n    }\n\n    onSelectPage(pageIndex: number): void {\n        this._currentPageIndex.next(pageIndex);\n        this.currentPageIndexChange.emit(pageIndex);\n    }\n}\n","<div class=\"item-index-overview\">\n    {{ currentPageIndex * itemCountPerPage + 1 }}\n    - {{ lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage }} of {{ itemCount }}\n</div>\n\n<div class=\"pages\">\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Previous Page button\"\n        [disabled]=\"firstPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex - 1)\">\n        <ap-symbol size=\"sm\" symbolId=\"arrow-left\" />\n    </button>\n    @if (pageCount > edgeSize + 1) {\n        @if (currentPageIndex >= edgeSize - 1) {\n            @if (currentPageIndex <= pageCount - edgeSize) {\n                <ap-paginator-button\n                    [pageIndex]=\"0\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n                <span class=\"ellipsis\">...</span>\n                @for (dummy of [].constructor(middleSize); track dummy; let i = $index) {\n                    <ap-paginator-button\n                        [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n                        [selectedPageIndex]=\"currentPageIndex\"\n                        (selectPage)=\"onSelectPage($event)\" />\n                }\n                <span class=\"ellipsis\">...</span>\n                <ap-paginator-button\n                    [pageIndex]=\"pageCount - 1\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n            } @else {\n                <ap-paginator-button\n                    [pageIndex]=\"0\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n                <span class=\"ellipsis\">...</span>\n                @for (dummy of [].constructor(edgeSize); track dummy; let i = $index) {\n                    <ap-paginator-button\n                        [pageIndex]=\"pageCount - edgeSize + i\"\n                        [selectedPageIndex]=\"currentPageIndex\"\n                        (selectPage)=\"onSelectPage($event)\" />\n                }\n            }\n        } @else {\n            @for (dummy of [].constructor(edgeSize); track dummy; let i = $index) {\n                <ap-paginator-button\n                    [pageIndex]=\"i\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n            }\n            <span class=\"ellipsis\">...</span>\n            <ap-paginator-button\n                [pageIndex]=\"pageCount - 1\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\" />\n        }\n    } @else {\n        @for (dummy of [].constructor(pageCount); track dummy; let i = $index) {\n            <ap-paginator-button\n                [pageIndex]=\"i\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\" />\n        }\n    }\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Next Page button\"\n        [disabled]=\"lastPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex + 1)\">\n        <ap-symbol size=\"sm\" symbolId=\"arrow-right\" />\n    </button>\n</div>\n<div class=\"go-to\">\n    @if (displayGoTo) {\n        <span>{{ goToLabel }}</span>\n    }\n    @if (displayGoTo) {\n        <input\n            type=\"number\"\n            [(ngModel)]=\"pageInput\" />\n    }\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-paginator.mjs","sources":["../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.ts","../../../libs/ui-components/paginator/src/paginator-button/paginator-button.component.html","../../../libs/ui-components/paginator/src/paginator.component.ts","../../../libs/ui-components/paginator/src/paginator.component.html","../../../libs/ui-components/paginator/src/agorapulse-ui-components-paginator.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ElementRef, EventEmitter, HostListener, Input, Output, ViewChild } from '@angular/core';\n\n@Component({\n    selector: 'ap-paginator-button',\n    templateUrl: './paginator-button.component.html',\n    styleUrls: ['./paginator-button.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    standalone: true,\n})\nexport class PaginatorButtonComponent {\n    @ViewChild('button') button!: ElementRef<HTMLButtonElement>;\n\n    @Input() ariaLabel: string = '';\n    @Input() disabled = false;\n    @Input() pageIndex = 0;\n    @Input() selectedPageIndex = 0;\n\n    @Output() selectPage = new EventEmitter<number>();\n\n    focused: boolean = false;\n\n    onClickHandle(pageIndex: number): void {\n        this.button.nativeElement.blur();\n        this.selectPage.emit(pageIndex);\n    }\n\n    onBlurHandle() {\n        this.focused = false;\n    }\n\n    onFocusHandle() {\n        this.focused = true;\n    }\n\n    @HostListener('window:keyup.space', ['$event'])\n    onSpaceKeyUp(event: KeyboardEvent) {\n        if (this.focused) {\n            event.preventDefault();\n            console.log('this.button.nativeElement', this.button.nativeElement);\n            this.button.nativeElement.click();\n        }\n    }\n}\n","<button\n    #button\n    class=\"square-button\"\n    role=\"button\"\n    type=\"button\"\n    [id]=\"'paginator-button-' + pageIndex\"\n    [class.active]=\"selectedPageIndex === pageIndex\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    (click)=\"onClickHandle(pageIndex)\"\n    (blur)=\"onBlurHandle()\"\n    (focus)=\"onFocusHandle()\">\n    <span>\n        {{ pageIndex + 1 }}\n    </span>\n</button>\n","import { SymbolComponent, SymbolRegistry, apArrowLeft, apArrowRight } from '@agorapulse/ui-symbol';\n\nimport { ChangeDetectionStrategy, Component, EventEmitter, HostListener, Input, OnDestroy, Output, ViewEncapsulation } from '@angular/core';\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\nimport { BehaviorSubject, Subject, combineLatest, distinctUntilChanged, takeUntil } from 'rxjs';\nimport { PaginatorButtonComponent } from './paginator-button/paginator-button.component';\n\n@Component({\n    selector: 'ap-paginator',\n    templateUrl: './paginator.component.html',\n    styleUrls: ['./paginator.component.scss'],\n    changeDetection: ChangeDetectionStrategy.OnPush,\n    imports: [SymbolComponent, PaginatorButtonComponent, ReactiveFormsModule, FormsModule],\n    encapsulation: ViewEncapsulation.None,\n})\nexport class PaginatorComponent implements OnDestroy {\n    readonly DEFAULT_MIDDLE_SIZE = 3;\n    readonly DEFAULT_ITEM_COUNT = 0;\n    readonly DEFAULT_ITEM_COUNT_PER_PAGE = 10;\n    readonly DEFAULT_CURRENT_PAGE_INDEX = 0;\n    readonly DEFAULT_EDGE_SIZE = 5;\n\n    @Input() set currentPageIndex(value: number) {\n        this._currentPageIndex.next(value ?? this.DEFAULT_CURRENT_PAGE_INDEX);\n    }\n\n    get currentPageIndex(): number {\n        return this._currentPageIndex.getValue();\n    }\n\n    @Input() displayGoTo = false;\n    @Input() edgeSize: number = this.DEFAULT_EDGE_SIZE;\n    @Input() goToLabel: string = 'Go to';\n    @Input() set itemCount(value: number) {\n        this._itemCount.next(value ?? this.DEFAULT_ITEM_COUNT);\n    }\n\n    get itemCount(): number {\n        return this._itemCount.getValue();\n    }\n    @Input() set itemCountPerPage(value: number) {\n        this._itemCountPerPage.next(value ?? this.DEFAULT_ITEM_COUNT_PER_PAGE);\n    }\n\n    get itemCountPerPage(): number {\n        return this._itemCountPerPage.getValue();\n    }\n\n    private _middleSize!: number;\n    @Input() set middleSize(value: number) {\n        // make sure middle size is an odd number\n        if (value && value % 2 === 0) {\n            value++;\n        }\n        this._middleSize = value ?? this.DEFAULT_MIDDLE_SIZE;\n    }\n\n    get middleSize(): number {\n        return this._middleSize;\n    }\n\n    @Output() currentPageIndexChange = new EventEmitter<number>();\n\n    pageInput: string = '';\n    pageCount = 0;\n    firstPageDisplayed = true;\n    lastPageDisplayed = true;\n    private destroy$: Subject<void> = new Subject<void>();\n\n    private _itemCount: BehaviorSubject<number> = new BehaviorSubject<number>(this.DEFAULT_ITEM_COUNT);\n    private _itemCountPerPage: BehaviorSubject<number> = new BehaviorSubject<number>(this.DEFAULT_ITEM_COUNT_PER_PAGE);\n    private _currentPageIndex: BehaviorSubject<number> = new BehaviorSubject<number>(this.DEFAULT_CURRENT_PAGE_INDEX);\n\n    constructor(public symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([apArrowLeft, apArrowRight]);\n        combineLatest([this._itemCount, this._itemCountPerPage, this._currentPageIndex])\n            .pipe(\n                distinctUntilChanged(\n                    (\n                        [previousItemCount, previousItemCountPerPage, previousCurrentPageIndex],\n                        [itemCount, itemCountPerPage, currentPageIndex]\n                    ) => {\n                        return (\n                            previousItemCount === itemCount &&\n                            previousItemCountPerPage === itemCountPerPage &&\n                            previousCurrentPageIndex === currentPageIndex\n                        );\n                    }\n                ),\n                takeUntil(this.destroy$)\n            )\n            .subscribe(([itemCount, itemCountPerPage, currentPageIndex]) => {\n                this.pageCount = Math.ceil(itemCount / itemCountPerPage);\n                // make sure page index is between min and max page index\n                this._currentPageIndex.next(Math.max(0, Math.min(this.pageCount - 1, currentPageIndex)));\n                this.firstPageDisplayed = this.currentPageIndex === 0;\n                this.lastPageDisplayed = this.currentPageIndex === this.pageCount - 1;\n            });\n    }\n    ngOnDestroy(): void {\n        this.destroy$.next();\n        this.destroy$.complete();\n    }\n\n    @HostListener('keydown.enter')\n    onEnterKeydownPressed() {\n        if (this.pageInput && !isNaN(+this.pageInput) && +this.pageInput > 0 && +this.pageInput <= this.pageCount) {\n            this.onSelectPage(+this.pageInput - 1);\n        }\n        this.pageInput = '';\n    }\n\n    onSelectPage(pageIndex: number): void {\n        this._currentPageIndex.next(pageIndex);\n        this.currentPageIndexChange.emit(pageIndex);\n    }\n}\n","<div class=\"item-index-overview\">\n    {{ currentPageIndex * itemCountPerPage + 1 }}\n    - {{ lastPageDisplayed ? itemCount : (currentPageIndex + 1) * itemCountPerPage }} of {{ itemCount }}\n</div>\n\n<div class=\"pages\">\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Previous Page button\"\n        [disabled]=\"firstPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex - 1)\">\n        <ap-symbol size=\"sm\" symbolId=\"arrow-left\" />\n    </button>\n    @if (pageCount > edgeSize + 1) {\n        @if (currentPageIndex >= edgeSize - 1) {\n            @if (currentPageIndex <= pageCount - edgeSize) {\n                <ap-paginator-button\n                    [pageIndex]=\"0\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n                <span class=\"ellipsis\">...</span>\n                @for (dummy of [].constructor(middleSize); track dummy; let i = $index) {\n                    <ap-paginator-button\n                        [pageIndex]=\"currentPageIndex + i - (middleSize - 1) / 2\"\n                        [selectedPageIndex]=\"currentPageIndex\"\n                        (selectPage)=\"onSelectPage($event)\" />\n                }\n                <span class=\"ellipsis\">...</span>\n                <ap-paginator-button\n                    [pageIndex]=\"pageCount - 1\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n            } @else {\n                <ap-paginator-button\n                    [pageIndex]=\"0\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n                <span class=\"ellipsis\">...</span>\n                @for (dummy of [].constructor(edgeSize); track dummy; let i = $index) {\n                    <ap-paginator-button\n                        [pageIndex]=\"pageCount - edgeSize + i\"\n                        [selectedPageIndex]=\"currentPageIndex\"\n                        (selectPage)=\"onSelectPage($event)\" />\n                }\n            }\n        } @else {\n            @for (dummy of [].constructor(edgeSize); track dummy; let i = $index) {\n                <ap-paginator-button\n                    [pageIndex]=\"i\"\n                    [selectedPageIndex]=\"currentPageIndex\"\n                    (selectPage)=\"onSelectPage($event)\" />\n            }\n            <span class=\"ellipsis\">...</span>\n            <ap-paginator-button\n                [pageIndex]=\"pageCount - 1\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\" />\n        }\n    } @else {\n        @for (dummy of [].constructor(pageCount); track dummy; let i = $index) {\n            <ap-paginator-button\n                [pageIndex]=\"i\"\n                [selectedPageIndex]=\"currentPageIndex\"\n                (selectPage)=\"onSelectPage($event)\" />\n        }\n    }\n    <button\n        class=\"navigation-button\"\n        ariaLabel=\"Select Next Page button\"\n        [disabled]=\"lastPageDisplayed\"\n        (click)=\"onSelectPage(currentPageIndex + 1)\">\n        <ap-symbol size=\"sm\" symbolId=\"arrow-right\" />\n    </button>\n</div>\n<div class=\"go-to\">\n    @if (displayGoTo) {\n        <span>{{ goToLabel }}</span>\n    }\n    @if (displayGoTo) {\n        <input\n            type=\"number\"\n            [(ngModel)]=\"pageInput\" />\n    }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

package/fesm2022/agorapulse-ui-components-password-input.mjs

@@ -60,12 +60,12 @@ class PasswordInputComponent {
             this.changes.unsubscribe();
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordInputComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.9", type: PasswordInputComponent, isStandalone: true, selector: "ap-password-input", inputs: { name: "name", placeholder: "placeholder", fullWidth: "fullWidth" }, providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n        (click)=\"toggleInputType()\" />\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{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid #e81313}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid #45b854}.input-group-append{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PasswordInputComponent, deps: [{ token: i1.SymbolRegistry }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.1.3", type: PasswordInputComponent, isStandalone: true, selector: "ap-password-input", inputs: { name: "name", placeholder: "placeholder", fullWidth: "fullWidth" }, providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], viewQueries: [{ propertyName: "passwordInput", first: true, predicate: ["passwordInput"], descendants: true }], ngImport: i0, template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n        (click)=\"toggleInputType()\" />\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{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid #e81313}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid #45b854}.input-group-append{cursor:pointer}\n"], dependencies: [{ kind: "component", type: SymbolComponent, selector: "ap-symbol", inputs: ["symbolId", "color", "size"], outputs: ["sizeChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PasswordInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PasswordInputComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ap-password-input', providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], imports: [SymbolComponent, NgClass, ReactiveFormsModule], standalone: true, template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n        (click)=\"toggleInputType()\" />\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{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid #e81313}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid #45b854}.input-group-append{cursor:pointer}\n"] }]
+            args: [{ selector: 'ap-password-input', providers: [PASSWORD_CONTROL_VALUE_ACCESSOR], imports: [SymbolComponent, NgClass, ReactiveFormsModule], template: "<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n        (click)=\"toggleInputType()\" />\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{display:flex}:host.ng-invalid.ng-dirty.ng-touched:not([disabled]):not(.transparent)>.input-group{border:1px solid #e81313}:host.valid:not([disabled]):not(.transparent)>.input-group{border:1px solid #45b854}.input-group-append{cursor:pointer}\n"] }]
         }], ctorParameters: () => [{ type: i1.SymbolRegistry }], propDecorators: { name: [{
                 type: Input
             }], placeholder: [{

package/fesm2022/agorapulse-ui-components-password-input.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"agorapulse-ui-components-password-input.mjs","sources":["../../../libs/ui-components/password-input/src/password-input.component.ts","../../../libs/ui-components/password-input/src/password-input.component.html","../../../libs/ui-components/password-input/src/agorapulse-ui-components-password-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport { SymbolComponent, SymbolRegistry, apViewOff, apViewOn } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, forwardRef } from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport const PASSWORD_CONTROL_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => PasswordInputComponent),\n    multi: true,\n};\n\n@Component({\n    selector: 'ap-password-input',\n    templateUrl: './password-input.component.html',\n    styleUrls: ['./password-input.component.scss'],\n    providers: [PASSWORD_CONTROL_VALUE_ACCESSOR],\n    imports: [SymbolComponent, NgClass, ReactiveFormsModule],\n    standalone: true,\n})\nexport class PasswordInputComponent implements OnInit, OnDestroy, ControlValueAccessor {\n    static type = ['text', 'password'];\n    inputType: (typeof PasswordInputComponent.type)[number] = PasswordInputComponent.type[1];\n\n    @Input() name = '';\n    @Input() placeholder = '';\n    @Input() fullWidth: boolean = false;\n    disabled: boolean = false;\n\n    @ViewChild('passwordInput') passwordInput!: ElementRef;\n\n    controler: FormControl = new FormControl('');\n    changes!: Subscription;\n\n    constructor(public symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([apViewOff, apViewOn]);\n    }\n    /**\n     * Change between visible and hidden password\n     */\n    toggleInputType(): void {\n        this.inputType = PasswordInputComponent.type[PasswordInputComponent.type.indexOf(this.inputType) == 0 ? 1 : 0];\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    onChange = (password: string) => {};\n\n    onTouch = () => {};\n\n    writeValue(obj: string): void {\n        this.controler.setValue(obj);\n    }\n\n    registerOnChange(fn: (password: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouch = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    ngOnInit(): void {\n        this.changes = this.controler.valueChanges.subscribe((val: string) => {\n            if (this.onChange) {\n                this.onChange(val);\n            }\n        });\n    }\n\n    ngOnDestroy(): void {\n        if (this.changes) {\n            this.changes.unsubscribe();\n        }\n    }\n}\n","<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n        (click)=\"toggleInputType()\" />\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-password-input.mjs","sources":["../../../libs/ui-components/password-input/src/password-input.component.ts","../../../libs/ui-components/password-input/src/password-input.component.html","../../../libs/ui-components/password-input/src/agorapulse-ui-components-password-input.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-empty-function */\nimport { SymbolComponent, SymbolRegistry, apViewOff, apViewOn } from '@agorapulse/ui-symbol';\nimport { NgClass } from '@angular/common';\nimport { Component, ElementRef, Input, OnDestroy, OnInit, ViewChild, forwardRef } from '@angular/core';\nimport { ControlValueAccessor, FormControl, NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';\nimport { Subscription } from 'rxjs';\n\nexport const PASSWORD_CONTROL_VALUE_ACCESSOR: any = {\n    provide: NG_VALUE_ACCESSOR,\n    useExisting: forwardRef(() => PasswordInputComponent),\n    multi: true,\n};\n\n@Component({\n    selector: 'ap-password-input',\n    templateUrl: './password-input.component.html',\n    styleUrls: ['./password-input.component.scss'],\n    providers: [PASSWORD_CONTROL_VALUE_ACCESSOR],\n    imports: [SymbolComponent, NgClass, ReactiveFormsModule],\n})\nexport class PasswordInputComponent implements OnInit, OnDestroy, ControlValueAccessor {\n    static type = ['text', 'password'];\n    inputType: (typeof PasswordInputComponent.type)[number] = PasswordInputComponent.type[1];\n\n    @Input() name = '';\n    @Input() placeholder = '';\n    @Input() fullWidth: boolean = false;\n    disabled: boolean = false;\n\n    @ViewChild('passwordInput') passwordInput!: ElementRef;\n\n    controler: FormControl = new FormControl('');\n    changes!: Subscription;\n\n    constructor(public symbolRegistry: SymbolRegistry) {\n        this.symbolRegistry.registerSymbols([apViewOff, apViewOn]);\n    }\n    /**\n     * Change between visible and hidden password\n     */\n    toggleInputType(): void {\n        this.inputType = PasswordInputComponent.type[PasswordInputComponent.type.indexOf(this.inputType) == 0 ? 1 : 0];\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    onChange = (password: string) => {};\n\n    onTouch = () => {};\n\n    writeValue(obj: string): void {\n        this.controler.setValue(obj);\n    }\n\n    registerOnChange(fn: (password: string) => void): void {\n        this.onChange = fn;\n    }\n\n    registerOnTouched(fn: () => void): void {\n        this.onTouch = fn;\n    }\n\n    setDisabledState(isDisabled: boolean): void {\n        this.disabled = isDisabled;\n    }\n\n    ngOnInit(): void {\n        this.changes = this.controler.valueChanges.subscribe((val: string) => {\n            if (this.onChange) {\n                this.onChange(val);\n            }\n        });\n    }\n\n    ngOnDestroy(): void {\n        if (this.changes) {\n            this.changes.unsubscribe();\n        }\n    }\n}\n","<div\n    class=\"input-group\"\n    [ngClass]=\"{ disabled: disabled, 'full-width': fullWidth }\">\n    <input\n        #passwordInput\n        autocomplete=\"password\"\n        [type]=\"inputType\"\n        [name]=\"name\"\n        [placeholder]=\"placeholder\"\n        [disabled]=\"disabled\"\n        [formControl]=\"controler\"\n        (blur)=\"onTouch()\" />\n    <ap-symbol\n        class=\"input-group-append\"\n        size=\"sm\"\n        state=\"full\"\n        [symbolId]=\"inputType === 'text' ? 'view-on' : 'view-off'\"\n        (click)=\"toggleInputType()\" />\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public_api';\n"],"names":[],"mappings":"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"}

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

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

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

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

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

@@ -328,12 +328,12 @@ class PopmenuComponent {
             }
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.9", type: PopmenuComponent, isStandalone: true, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button\n    id=\"menuTrigger\"\n    class=\"button-trigger\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    (menuClosed)=\"onMenuClosed()\"\n    (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n    #menu=\"matMenu\"\n    [yPosition]=\"!below ? 'above' : 'below'\"\n    [xPosition]=\"!before ? 'after' : 'before'\"\n    [overlapTrigger]=\"false\"\n    [hasBackdrop]=\"hasBackdrop\"\n    [backdropClass]=\"backdropClass\"\n    class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n        border ? '' : shadow ? 'shadow-no-border' : ''\n    }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n    @if (arrow) {\n        <div\n            class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n            [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n    }\n    <div\n        class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n        (click)=\"$event.stopPropagation()\">\n        <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n            <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n        </div>\n    </div>\n</mat-menu>\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}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PopmenuComponent, deps: [{ token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.3", type: PopmenuComponent, isStandalone: true, selector: "ap-popmenu", inputs: { data: "data", show: "show", close: "close" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened" }, host: { properties: { "style.top": "this.hostStyleTop", "style.border-radius": "this.hostStyleBorderRadius", "style.left": "this.hostStyleLeft", "style.z-index": "this.hostStyleZIndex", "style.transition": "this.hostStyleTransition", "style.width": "this.hostStyleWidth", "style.max-width": "this.hostStyleMaxWidth", "style.pointer-events": "this.hostStylePointerEvents", "class.tooltip-show": "this.hostClassShow", "class.tooltip-shadow": "this.hostClassShadow", "class.tooltip-light": "this.hostClassLight" } }, viewQueries: [{ propertyName: "trigger", first: true, predicate: MatMenuTrigger, descendants: true }], ngImport: i0, template: "<button\n    id=\"menuTrigger\"\n    class=\"button-trigger\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    (menuClosed)=\"onMenuClosed()\"\n    (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n    #menu=\"matMenu\"\n    [yPosition]=\"!below ? 'above' : 'below'\"\n    [xPosition]=\"!before ? 'after' : 'before'\"\n    [overlapTrigger]=\"false\"\n    [hasBackdrop]=\"hasBackdrop\"\n    [backdropClass]=\"backdropClass\"\n    class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n        border ? '' : shadow ? 'shadow-no-border' : ''\n    }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n    @if (arrow) {\n        <div\n            class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n            [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n    }\n    <div\n        class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n        (click)=\"$event.stopPropagation()\">\n        <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n            <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n        </div>\n    </div>\n</mat-menu>\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}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"], dependencies: [{ kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i1.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopmenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PopmenuComponent, decorators: [{
             type: Component,
-            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', standalone: true, imports: [ButtonComponent, MatMenuModule, NgStyle, NgTemplateOutlet], template: "<button\n    id=\"menuTrigger\"\n    class=\"button-trigger\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    (menuClosed)=\"onMenuClosed()\"\n    (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n    #menu=\"matMenu\"\n    [yPosition]=\"!below ? 'above' : 'below'\"\n    [xPosition]=\"!before ? 'after' : 'before'\"\n    [overlapTrigger]=\"false\"\n    [hasBackdrop]=\"hasBackdrop\"\n    [backdropClass]=\"backdropClass\"\n    class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n        border ? '' : shadow ? 'shadow-no-border' : ''\n    }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n    @if (arrow) {\n        <div\n            class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n            [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n    }\n    <div\n        class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n        (click)=\"$event.stopPropagation()\">\n        <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n            <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n        </div>\n    </div>\n</mat-menu>\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}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
+            args: [{ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'ap-popmenu', imports: [ButtonComponent, MatMenuModule, NgStyle, NgTemplateOutlet], template: "<button\n    id=\"menuTrigger\"\n    class=\"button-trigger\"\n    mat-button\n    [matMenuTriggerFor]=\"menu\"\n    (menuClosed)=\"onMenuClosed()\"\n    (menuOpened)=\"onMenuOpened()\"></button>\n<mat-menu\n    #menu=\"matMenu\"\n    [yPosition]=\"!below ? 'above' : 'below'\"\n    [xPosition]=\"!before ? 'after' : 'before'\"\n    [overlapTrigger]=\"false\"\n    [hasBackdrop]=\"hasBackdrop\"\n    [backdropClass]=\"backdropClass\"\n    class=\"pop-menu {{ arrow ? 'arrow-before ' + arrowClass : '' }} {{ shadow ? 'shadow' : '' }} {{\n        border ? '' : shadow ? 'shadow-no-border' : ''\n    }} {{ rounded ? 'rounded-component' : '' }} {{ background ? '' : 'no-background' }} {{ panelClass }}\">\n    @if (arrow) {\n        <div\n            class=\"{{ arrow ? 'arrow-before ' + arrowClass : '' }}\"\n            [ngStyle]=\"{ left: arrowLeftPosition, right: arrowRightPosition, top: arrowTopPosition, bottom: arrowBottomPosition }\"></div>\n    }\n    <div\n        class=\"{{ rounded ? 'rounded-component' : '' }} outline-none\"\n        (click)=\"$event.stopPropagation()\">\n        <div class=\"{{ border ? 'popover-content ' : '' }} {{ rounded ? 'rounded-component' : '' }}\">\n            <ng-container *ngTemplateOutlet=\"value; context: { menu: this }\" />\n        </div>\n    </div>\n</mat-menu>\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}.mat-mdc-menu-content{padding:0}.mat-mdc-menu-item{height:inherit;width:inherit;background-color:#fff;padding:0;cursor:default;box-shadow:0 4px 10px #0000001c}.mat-mdc-menu-item:hover{background-color:#fff!important;cursor:default;box-shadow:none!important}.outline-none{outline:none}.mat-mdc-menu-item:hover:not([disabled]),.mat-mdc-menu-item.cdk-program-focused:not([disabled]),.mat-mdc-menu-item.cdk-keyboard-focused:not([disabled]),.mat-mdc-menu-item-highlighted:not([disabled]){background-color:#fff!important;cursor:default;box-shadow:none!important}:host ::ng-deep .mat-mdc-button{max-width:1px;max-height:1px;min-width:1px;min-height:1px;padding:0;margin:0}:host{position:absolute;max-width:1px;max-height:1px;display:flex}.button-trigger{padding:0;border:none;height:1px;width:1px}::ng-deep .no-background .rounded-component{position:fixed}.popover-content{border:1px solid #dfe3e9}\n"] }]
         }], ctorParameters: () => [{ type: i0.Renderer2 }, { type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { data: [{
                 type: Input
             }], menuClosed: [{
@@ -630,10 +630,10 @@ class PopmenuDirective {
             this.componentRef.instance.close = true;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopmenuDirective, deps: [{ token: PopmenuOptionsService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.9", type: PopmenuDirective, isStandalone: true, selector: "[apPopmenu]", inputs: { apPopmenuBorder: "apPopmenuBorder", apPopmenuDisabled: "apPopmenuDisabled", apPopmenuBackground: "apPopmenuBackground", arrow: "arrow", arrowOffset: "arrowOffset", arrowPosition: "arrowPosition", close: "close", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", panelClass: "panelClass", offset: "offset", offsets: "offsets", placement: "placement", pointer: "pointer", popMenuValue: ["apPopmenu", "popMenuValue"], position: "position", rounded: "rounded", shadow: "shadow", options: "options", menuOpen: "menuOpen" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", menuOpenChange: "menuOpenChange" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PopmenuDirective, deps: [{ token: PopmenuOptionsService, optional: true }, { token: i0.Renderer2 }, { token: i0.ElementRef }, { token: i0.ComponentFactoryResolver }, { token: i0.ApplicationRef }, { token: i0.Injector }], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.1.3", type: PopmenuDirective, isStandalone: true, selector: "[apPopmenu]", inputs: { apPopmenuBorder: "apPopmenuBorder", apPopmenuDisabled: "apPopmenuDisabled", apPopmenuBackground: "apPopmenuBackground", arrow: "arrow", arrowOffset: "arrowOffset", arrowPosition: "arrowPosition", close: "close", hasBackdrop: "hasBackdrop", backdropClass: "backdropClass", panelClass: "panelClass", offset: "offset", offsets: "offsets", placement: "placement", pointer: "pointer", popMenuValue: ["apPopmenu", "popMenuValue"], position: "position", rounded: "rounded", shadow: "shadow", options: "options", menuOpen: "menuOpen" }, outputs: { menuClosed: "menuClosed", menuOpened: "menuOpened", menuOpenChange: "menuOpenChange" }, host: { listeners: { "click": "onClick()" } }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopmenuDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PopmenuDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[apPopmenu]',
@@ -708,11 +708,11 @@ class PopmenuModule {
             ],
         };
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.9", ngImport: i0, type: PopmenuModule, imports: [PopmenuDirective, PopmenuComponent], exports: [PopmenuDirective] });
-    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopmenuModule, imports: [PopmenuComponent] });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PopmenuModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
+    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.1.3", ngImport: i0, type: PopmenuModule, imports: [PopmenuDirective, PopmenuComponent], exports: [PopmenuDirective] });
+    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PopmenuModule, imports: [PopmenuComponent] });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.9", ngImport: i0, type: PopmenuModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.3", ngImport: i0, type: PopmenuModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [PopmenuDirective, PopmenuComponent],