npm - @patter/ngx-components - Versions diffs - 0.5.6 → 0.5.8 - Mend

@patter/ngx-components 0.5.6 → 0.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (29) hide show

package/fesm2022/patter-ngx-components.mjs CHANGED Viewed

@@ -1,22 +1,21 @@
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, signal, EventEmitter, computed, HostBinding, Output, inject, ChangeDetectorRef, DestroyRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, ViewChild, createComponent } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, signal, EventEmitter, computed, HostBinding, Output, ViewChild, forwardRef, HostListener, inject, ChangeDetectorRef, DestroyRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, createComponent } from '@angular/core';
 import * as i1 from '@angular/router';
 import { RouterModule, RouterLink, Router, ActivatedRoute, TitleStrategy, NavigationEnd } from '@angular/router';
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
-import * as i2 from '@angular/forms';
-import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
-import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Observable, filter, map, Subject } from 'rxjs';
+import * as i1$2 from '@angular/forms';
+import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormBuilder } from '@angular/forms';
+import { Subject, debounceTime, distinctUntilChanged, switchMap, of, filter, map } from 'rxjs';
 class PtrMenuComponent {
     menuItems = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\n  <ul class=\"menu\">\n    @for (item of menuItems; track item) {\n      <li class=\"menu-item\" routerLinkActive=\"current_page_item\"\n        [routerLinkActiveOptions]=\"{exact: true}\">\n        <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n      </li>\n    }\n  </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\n  <ul class=\"menu\">\n    @for (item of menuItems; track item.label) {\n    <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n      <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n    </li>\n    }\n  </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrMenuComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ptr-menu', standalone: true, imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ptr-menu\">\n  <ul class=\"menu\">\n    @for (item of menuItems; track item) {\n      <li class=\"menu-item\" routerLinkActive=\"current_page_item\"\n        [routerLinkActiveOptions]=\"{exact: true}\">\n        <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n      </li>\n    }\n  </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"] }]
+            args: [{ selector: 'ptr-menu', standalone: true, imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ptr-menu\">\n  <ul class=\"menu\">\n    @for (item of menuItems; track item.label) {\n    <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n      <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n    </li>\n    }\n  </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"] }]
         }], propDecorators: { menuItems: [{
                 type: Input
             }] } });
@@ -95,10 +94,10 @@ class PtrButtonComponent {
         }
         this.clicked.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template #contentTpl>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n  (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template #contentTpl>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n  (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-button', standalone: true, imports: [CommonModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contentTpl>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n  (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}" }]
         }], propDecorators: { hostClasses: [{
@@ -124,34 +123,430 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
                 type: Output
             }] } });
+class PtrDialogListComponent {
+    set options(value) {
+        this._options.set(this.processOptions(value));
+    }
+    showSearch = false;
+    searchPlaceholder = 'Search...';
+    dialogTitle = '';
+    selectionChange = new EventEmitter();
+    dialogClosed = new EventEmitter();
+    searchTermChanged = new EventEmitter();
+    dialog;
+    _options = signal([]);
+    value = signal(null);
+    searchTerm = signal('');
+    highlightedIndex = signal(-1);
+    isOpen = signal(false);
+    componentId = Math.random().toString(36).substring(2);
+    listId = `${this.componentId}-list`;
+    filteredOptions = computed(() => {
+        const term = this.searchTerm().toLowerCase();
+        return this._options().flatMap(item => {
+            if (item.type === 'group') {
+                const filteredOptions = item.options.filter(option => option.label.toLowerCase().includes(term));
+                return filteredOptions.length > 0 ? [{ ...item, options: filteredOptions }] : [];
+            }
+            else {
+                return item.label.toLowerCase().includes(term) ? [item] : [];
+            }
+        });
+    });
+    openDialog() {
+        this.dialog.nativeElement.show();
+        this.isOpen.set(true);
+    }
+    closeDialog() {
+        this.dialog.nativeElement.close();
+        this.isOpen.set(false);
+        this.searchTerm.set('');
+        this.highlightedIndex.set(-1);
+        this.dialogClosed.emit();
+    }
+    updateSearchTerm(term) {
+        this.searchTerm.set(term);
+        this.highlightedIndex.set(-1);
+        this.searchTermChanged.emit(term);
+    }
+    onDialogKeyDown(event) {
+        if (event.key === 'Escape') {
+            this.closeDialog();
+            event.preventDefault();
+        }
+        // When there is no search input and there are options, move input into the first option
+        if (!this.showSearch && this.filteredOptions().length > 0 && this.highlightedIndex() === -1) {
+            if (event.key === 'Tab' || event.key === 'ArrowDown') {
+                this.highlightedIndex.update(i => Math.min(i + 1, this.getTotalOptionsCount() - 1));
+                this.focusOption();
+                event.preventDefault();
+            }
+        }
+    }
+    onInputKeyDown(event) {
+        switch (event.key) {
+            case 'ArrowDown':
+                this.highlightedIndex.update(i => Math.min(i + 1, this.getTotalOptionsCount() - 1));
+                this.focusOption();
+                event.preventDefault();
+                break;
+            case 'Escape':
+                this.closeDialog();
+                event.preventDefault();
+                break;
+        }
+    }
+    onOptionKeyDown(event, optionValue) {
+        switch (event.key) {
+            case 'ArrowDown':
+                this.highlightedIndex.update(i => Math.min(i + 1, this.getTotalOptionsCount() - 1));
+                this.focusOption();
+                event.preventDefault();
+                break;
+            case 'ArrowUp':
+                this.highlightedIndex.update(i => Math.max(i - 1, -1));
+                this.focusOption();
+                event.preventDefault();
+                break;
+            case 'Enter':
+            case ' ':
+                this.selectOption(optionValue);
+                event.preventDefault();
+                break;
+        }
+    }
+    focusOption() {
+        if (this.highlightedIndex() >= 0) {
+            const options = this.dialog.nativeElement.querySelectorAll('li[role="option"]');
+            options[this.highlightedIndex()].focus();
+        }
+    }
+    selectOption(optionValue) {
+        this.value.set(optionValue);
+        this.selectionChange.emit(optionValue);
+        this.closeDialog();
+    }
+    getTotalOptionsCount() {
+        return this.filteredOptions().reduce((count, item) => {
+            if (item.type === 'group') {
+                return count + item.options.length;
+            }
+            return count + 1;
+        }, 0);
+    }
+    processOptions(options) {
+        if (!options)
+            return [];
+        return options.map(option => {
+            if (typeof option === 'string') {
+                return {
+                    type: 'option',
+                    label: option,
+                    value: option
+                };
+            }
+            else if ('groupLabel' in option) {
+                return {
+                    type: 'group',
+                    label: option.groupLabel,
+                    options: option.options.map(subOption => ({
+                        type: 'option',
+                        label: typeof subOption === 'string' ? subOption : subOption.label,
+                        value: typeof subOption === 'string' ? subOption : subOption.value
+                    }))
+                };
+            }
+            else {
+                return {
+                    type: 'option',
+                    label: option.label,
+                    value: option.value
+                };
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrDialogListComponent, isStandalone: true, selector: "ptr-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\r\n\r\n  @if(dialogTitle) {\r\n  <p class=\"dialog-title\">{{dialogTitle}}</p>\r\n  }\r\n\r\n  @if (showSearch) {\r\n  <div>\r\n    <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\r\n      [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\r\n      [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\r\n      class=\"search-input\">\r\n  </div>\r\n  }\r\n\r\n  <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\">\r\n    @for (item of filteredOptions(); track item.label) {\r\n    @if (item.type === 'option') {\r\n    <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"item.value === value()\"\r\n      [class.selected]=\"item.value === value()\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n      (click)=\"selectOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n      [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n      {{ item.label }}\r\n    </li>\r\n    } @else {\r\n    <li role=\"group\" [attr.aria-label]=\"item.label\">\r\n      {{ item.label }}\r\n    </li>\r\n    @for (option of item.options!; track option.value) {\r\n    <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"option.value === value()\"\r\n      [class.selected]=\"option.value === value()\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n      (click)=\"selectOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n      [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n      {{ option.label }}\r\n    </li>\r\n    }\r\n    }\r\n    }\r\n  </ul>\r\n\r\n</dialog>\r\n", styles: [".ptr-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:350px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit)}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogListComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-dialog-list', standalone: true, imports: [
+                        FormsModule
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog #dialog class=\"ptr-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\r\n\r\n  @if(dialogTitle) {\r\n  <p class=\"dialog-title\">{{dialogTitle}}</p>\r\n  }\r\n\r\n  @if (showSearch) {\r\n  <div>\r\n    <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\r\n      [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\r\n      [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\r\n      class=\"search-input\">\r\n  </div>\r\n  }\r\n\r\n  <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\">\r\n    @for (item of filteredOptions(); track item.label) {\r\n    @if (item.type === 'option') {\r\n    <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"item.value === value()\"\r\n      [class.selected]=\"item.value === value()\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n      (click)=\"selectOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n      [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n      {{ item.label }}\r\n    </li>\r\n    } @else {\r\n    <li role=\"group\" [attr.aria-label]=\"item.label\">\r\n      {{ item.label }}\r\n    </li>\r\n    @for (option of item.options!; track option.value) {\r\n    <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"option.value === value()\"\r\n      [class.selected]=\"option.value === value()\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n      (click)=\"selectOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n      [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n      {{ option.label }}\r\n    </li>\r\n    }\r\n    }\r\n    }\r\n  </ul>\r\n\r\n</dialog>\r\n", styles: [".ptr-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:350px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit)}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], searchPlaceholder: [{
+                type: Input
+            }], dialogTitle: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], dialogClosed: [{
+                type: Output
+            }], searchTermChanged: [{
+                type: Output
+            }], dialog: [{
+                type: ViewChild,
+                args: ['dialog']
+            }] } });
+/* eslint-disable @typescript-eslint/no-empty-function */
+class PtrSelectComponent {
+    options;
+    showSearch = true;
+    placeholder = 'Select an option';
+    label = '';
+    selectionChange = new EventEmitter();
+    selectButton;
+    dialogList;
+    value = signal(null);
+    isOpen = signal(false);
+    displayValue = computed(() => {
+        const currentValue = this.value();
+        if (currentValue === null)
+            return null;
+        const allOptions = this.flattenOptions(this.options);
+        const selectedOption = allOptions?.find(option => option.value === currentValue);
+        return selectedOption ? selectedOption.label : null;
+    });
+    componentId = Math.random().toString(36).substring(2);
+    labelId = `${this.componentId}-label`;
+    inputId = `${this.componentId}-input`;
+    onChange = () => { };
+    onTouched = () => { };
+    onDocumentClick(event) {
+        if (!this.dialogList.dialog.nativeElement.contains(event.target) &&
+            !event.target.closest('.select-button') &&
+            this.isOpen()) {
+            this.dialogList.closeDialog();
+            this.isOpen.set(false);
+        }
+    }
+    toggleDialog() {
+        if (this.isOpen()) {
+            this.dialogList.closeDialog();
+        }
+        else {
+            this.dialogList.openDialog();
+        }
+        this.isOpen.update(v => !v);
+    }
+    onOptionSelected(optionValue) {
+        this.value.set(optionValue);
+        this.onChange(optionValue);
+        this.onTouched();
+        this.selectionChange.emit(optionValue);
+        this.isOpen.set(false);
+    }
+    writeValue(value) {
+        this.value.set(value);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.selectButton?.nativeElement) {
+            this.selectButton.nativeElement.disabled = isDisabled;
+        }
+    }
+    flattenOptions(options) {
+        if (!options)
+            return [];
+        return options.flatMap(option => {
+            if (typeof option === 'string') {
+                return { value: option, label: option };
+            }
+            else if ('groupLabel' in option) {
+                return option.options;
+            }
+            else {
+                return option;
+            }
+        });
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrSelectComponent, isStandalone: true, selector: "ptr-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PtrSelectComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\">{{ label }}</label>\r\n<div class=\"select-container\">\r\n\r\n  <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n    <span [attr.id]=\"labelId\">@if (displayValue(); as dValue) { {{dValue}} } @else { {{placeholder}} }</span>\r\n  </button>\r\n\r\n  <ptr-dialog-list #dialogList [options]=\"options\" (selectionChange)=\"onOptionSelected($event)\"\r\n    [showSearch]=\"showSearch\" />\r\n\r\n</div>\r\n", styles: [".select-container{position:relative}.select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);background-position:calc(100% - 4px) 50%;background-repeat:no-repeat;background-image:url(data:image/png;base64,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)}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrSelectComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-select', standalone: true, imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PtrDialogListComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PtrSelectComponent),
+                            multi: true
+                        }
+                    ], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\">{{ label }}</label>\r\n<div class=\"select-container\">\r\n\r\n  <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-expanded]=\"isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n    <span [attr.id]=\"labelId\">@if (displayValue(); as dValue) { {{dValue}} } @else { {{placeholder}} }</span>\r\n  </button>\r\n\r\n  <ptr-dialog-list #dialogList [options]=\"options\" (selectionChange)=\"onOptionSelected($event)\"\r\n    [showSearch]=\"showSearch\" />\r\n\r\n</div>\r\n", styles: [".select-container{position:relative}.select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);background-position:calc(100% - 4px) 50%;background-repeat:no-repeat;background-image:url(data:image/png;base64,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)}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}\n"] }]
+        }], propDecorators: { options: [{
+                type: Input
+            }], showSearch: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], selectionChange: [{
+                type: Output
+            }], selectButton: [{
+                type: ViewChild,
+                args: ['selectButton']
+            }], dialogList: [{
+                type: ViewChild,
+                args: ['dialogList']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
+/* eslint-disable @typescript-eslint/no-empty-function */
+class PtrInputComponent {
+    type = 'text';
+    label = '';
+    placeholder = '';
+    autocomplete = '';
+    dialogHelpText = '';
+    searchFn;
+    input;
+    dialogList;
+    componentId = Math.random().toString(36).substring(2);
+    minChars = 3;
+    searchTerms = new Subject();
+    hasSelectedOption = false;
+    inputId = `${this.componentId}-input`;
+    inputValue = signal('');
+    searchResultOptions = signal([]);
+    onChange = () => { };
+    onTouched = () => { };
+    onDocumentClick(event) {
+        if (!this.dialogList.dialog.nativeElement.contains(event.target) && this.dialogList.isOpen()) {
+            this.dialogList.closeDialog();
+        }
+    }
+    ngOnInit() {
+        this.setupSearch();
+    }
+    setupSearch() {
+        if (this.searchFn) {
+            this.searchTerms.pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => term.length >= this.minChars ? this.searchFn(term) : of([]))).subscribe(results => {
+                this.searchResultOptions.set(results);
+                if (results.length > 0 && this.dialogList) {
+                    this.dialogList.openDialog();
+                }
+            });
+        }
+    }
+    onInputChange(value) {
+        this.inputValue.set(value);
+        this.onChange(value);
+        if (!this.hasSelectedOption && this.searchFn && value.length >= this.minChars) {
+            this.searchTerms.next(value);
+        }
+        this.hasSelectedOption = false;
+    }
+    onOptionSelected(optionValue) {
+        this.hasSelectedOption = true;
+        this.inputValue.set(optionValue ?? '');
+        this.onChange(optionValue ?? '');
+        if (this.dialogList) {
+            this.dialogList.closeDialog();
+        }
+    }
+    onFocus() {
+        if (this.searchResultOptions().length > 0 && this.dialogList && !this.hasSelectedOption) {
+            this.dialogList.openDialog();
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.inputValue.set(value ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        if (this.input?.nativeElement) {
+            this.input.nativeElement.disabled = isDisabled;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PtrInputComponent, isStandalone: true, selector: "ptr-input", inputs: { type: "type", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", dialogHelpText: "dialogHelpText", searchFn: "searchFn" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PtrInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\">{{ label }}</label>\r\n<div class=\"gfield--input-wrapper\">\r\n\r\n  <input #input [id]=\"inputId\" [type]=\"type\" [attr.autocomplete]=\"autocomplete || null\"\r\n    [attr.placeholder]=\"placeholder || null\" [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\"\r\n    (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\r\n\r\n  <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\r\n    [dialogTitle]=\"dialogHelpText\" />\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-input', standalone: true, imports: [
+                        CommonModule,
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PtrDialogListComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PtrInputComponent),
+                            multi: true
+                        }
+                    ], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\">{{ label }}</label>\r\n<div class=\"gfield--input-wrapper\">\r\n\r\n  <input #input [id]=\"inputId\" [type]=\"type\" [attr.autocomplete]=\"autocomplete || null\"\r\n    [attr.placeholder]=\"placeholder || null\" [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\"\r\n    (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\r\n\r\n  <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\r\n    [dialogTitle]=\"dialogHelpText\" />\r\n\r\n</div>\r\n" }]
+        }], propDecorators: { type: [{
+                type: Input
+            }], label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], autocomplete: [{
+                type: Input
+            }], dialogHelpText: [{
+                type: Input
+            }], searchFn: [{
+                type: Input
+            }], input: [{
+                type: ViewChild,
+                args: ['input']
+            }], dialogList: [{
+                type: ViewChild,
+                args: ['dialogList']
+            }], onDocumentClick: [{
+                type: HostListener,
+                args: ['document:click', ['$event']]
+            }] } });
 class PtrFormComponent {
     config;
     loading = false;
     error = null;
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     formSubmit = new EventEmitter();
     formGroupCreated = new EventEmitter();
     formGroup;
-    flatOptions = {};
-    groupedOptions = {};
     fb = inject(FormBuilder);
     cdr = inject(ChangeDetectorRef);
     destroyRef = inject(DestroyRef);
     ngOnInit() {
         this.buildForm();
         this.formGroupCreated.emit(this.formGroup);
-        this.config.fields.forEach(field => {
-            if (field.type === 'select' && field.options instanceof Observable) {
-                field.options
-                    .pipe(takeUntilDestroyed(this.destroyRef))
-                    .subscribe(options => {
-                    this.processOptions(field.name, options);
-                    this.cdr.markForCheck(); // Trigger change detection after options are loaded
-                });
-            }
-            else if (field.type === 'select' && Array.isArray(field.options)) {
-                this.processOptions(field.name, field.options);
-            }
-        });
     }
     buildForm() {
         const group = {};
@@ -173,24 +568,18 @@ class PtrFormComponent {
         });
         this.cdr.markForCheck();
     }
-    processOptions(fieldName, options) {
-        if (options.length > 0 && 'options' in options[0]) {
-            this.groupedOptions[fieldName] = options;
-        }
-        else {
-            this.flatOptions[fieldName] = options;
-        }
-    }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\n\n  @if (error) {\n    <div class=\"gform_validation_errors\">\n      <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\n    </div>\n  }\n\n  @if (config.title) {\n    <div class=\"gform_heading\">\n      <h2 class=\"gform_title\">{{ config.title }}</h2>\n    </div>\n  }\n\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n\n    <div class=\"gform_fields\">\n\n      @for (field of config.fields; track field.name) {\n        <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\n          [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\n          <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\n          @switch (field.type) {\n            @case ('textarea') {\n              <textarea [id]=\"field.name\" [formControlName]=\"field.name\"></textarea>\n            }\n            @case ('select') {\n              <select [formControlName]=\"field.name\" [id]=\"field.name\">\n                <!-- Render grouped options -->\n                @for (group of groupedOptions[field.name]; track group) {\n                  <optgroup [label]=\"group.groupLabel\">\n                    @for (option of group.options; track option) {\n                      <option [value]=\"option.value\">\n                        {{ option.label }}\n                      </option>\n                    }\n                  </optgroup>\n                }\n                <!-- Render flat options -->\n                @for (option of flatOptions[field.name]; track option) {\n                  <option [value]=\"option.value\">\n                    {{ option.label }}\n                  </option>\n                }\n              </select>\n            }\n            @default {\n              <input [formControlName]=\"field.name\" [id]=\"field.name\" [type]=\"field.type\"\n                [autocomplete]=\"field.autocomplete ?? ''\" />\n              }\n            }\n            @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\n              <div class=\"gfield_description validation_message gfield_validation_message\"\n                >\n                @if (formGroup.get(field.name)?.errors?.['required']) {\n                  This field is required.\n                }\n                @if (formGroup.get(field.name)?.errors?.['email']) {\n                  Please enter a valid email\n                  address.\n                }\n                @if (formGroup.get(field.name)?.errors?.['minlength']) {\n                  Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\n                }\n                @if (formGroup.get(field.name)?.errors?.['maxlength']) {\n                  Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\n                }\n                @if (formGroup.get(field.name)?.errors?.['pattern']) {\n                  Please match the required format.\n                }\n              </div>\n            }\n            @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\n              @for (error of formGroup.errors | keyvalue; track error) {\n                @if (field.validationMessages[error.key]) {\n                  <div\n                    class=\"gfield_description validation_message gfield_validation_message\">\n                    {{ field.validationMessages[error.key] }}\n                  </div>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"gform_footer\">\n        <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\">{{config.submitText}}</ptr-button>\n      </div>\n\n    </form>\n  </div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { 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: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n  @if (error) {\r\n    <div class=\"gform_validation_errors\">\r\n      <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n    </div>\r\n  }\r\n\r\n  @if (config.title) {\r\n    <div class=\"gform_heading\">\r\n      <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n    </div>\r\n  }\r\n\r\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <div class=\"gform_fields\">\r\n\r\n      @for (field of config.fields; track field.name) {\r\n        <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\r\n          [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n\r\n          @switch (field.type) {\r\n            @case ('textarea') {\r\n              <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\r\n              <textarea [id]=\"field.name\" [formControlName]=\"field.name\" [attr.placeholder]=\"field.placeholder || null\"></textarea>\r\n            }\r\n            @case ('select') {\r\n              <ptr-select [label]=\"field.label\" [formControlName]=\"field.name\" [options]=\"field.options\" [placeholder]=\"field.placeholder\"></ptr-select>\r\n            }\r\n            @default {\r\n              <ptr-input [label]=\"field.label\" [formControlName]=\"field.name\" [type]=\"field.type\" [placeholder]=\"field.placeholder\"\r\n                [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\" [dialogHelpText]=\"field.dialogHelpText\" />\r\n              }\r\n            }\r\n\r\n            @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\r\n              <div class=\"gfield_description validation_message gfield_validation_message\"\r\n                >\r\n                @if (formGroup.get(field.name)?.errors?.['required']) {\r\n                  This field is required.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['email']) {\r\n                  Please enter a valid email address.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['minlength']) {\r\n                  Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['maxlength']) {\r\n                  Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['pattern']) {\r\n                  Please match the required format.\r\n                }\r\n              </div>\r\n            }\r\n            @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\r\n              @for (error of formGroup.errors | keyvalue; track error) {\r\n                @if (field.validationMessages[error.key]) {\r\n                  <div\r\n                    class=\"gfield_description validation_message gfield_validation_message\">\r\n                    {{ field.validationMessages[error.key] }}\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n        @if(config.submitText){\r\n          <div class=\"gform_footer\">\r\n            <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\">{{config.submitText}}</ptr-button>\r\n          </div>\r\n        }\r\n\r\n    </form>\r\n  </div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton"], outputs: ["clicked"] }, { kind: "component", type: PtrSelectComponent, selector: "ptr-select", inputs: ["options", "showSearch", "placeholder", "label"], outputs: ["selectionChange"] }, { kind: "component", type: PtrInputComponent, selector: "ptr-input", inputs: ["type", "label", "placeholder", "autocomplete", "dialogHelpText", "searchFn"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-form', standalone: true, imports: [
                         CommonModule,
                         ReactiveFormsModule,
-                        PtrButtonComponent
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\n\n  @if (error) {\n    <div class=\"gform_validation_errors\">\n      <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\n    </div>\n  }\n\n  @if (config.title) {\n    <div class=\"gform_heading\">\n      <h2 class=\"gform_title\">{{ config.title }}</h2>\n    </div>\n  }\n\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n\n    <div class=\"gform_fields\">\n\n      @for (field of config.fields; track field.name) {\n        <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\n          [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\n          <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\n          @switch (field.type) {\n            @case ('textarea') {\n              <textarea [id]=\"field.name\" [formControlName]=\"field.name\"></textarea>\n            }\n            @case ('select') {\n              <select [formControlName]=\"field.name\" [id]=\"field.name\">\n                <!-- Render grouped options -->\n                @for (group of groupedOptions[field.name]; track group) {\n                  <optgroup [label]=\"group.groupLabel\">\n                    @for (option of group.options; track option) {\n                      <option [value]=\"option.value\">\n                        {{ option.label }}\n                      </option>\n                    }\n                  </optgroup>\n                }\n                <!-- Render flat options -->\n                @for (option of flatOptions[field.name]; track option) {\n                  <option [value]=\"option.value\">\n                    {{ option.label }}\n                  </option>\n                }\n              </select>\n            }\n            @default {\n              <input [formControlName]=\"field.name\" [id]=\"field.name\" [type]=\"field.type\"\n                [autocomplete]=\"field.autocomplete ?? ''\" />\n              }\n            }\n            @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\n              <div class=\"gfield_description validation_message gfield_validation_message\"\n                >\n                @if (formGroup.get(field.name)?.errors?.['required']) {\n                  This field is required.\n                }\n                @if (formGroup.get(field.name)?.errors?.['email']) {\n                  Please enter a valid email\n                  address.\n                }\n                @if (formGroup.get(field.name)?.errors?.['minlength']) {\n                  Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\n                }\n                @if (formGroup.get(field.name)?.errors?.['maxlength']) {\n                  Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\n                }\n                @if (formGroup.get(field.name)?.errors?.['pattern']) {\n                  Please match the required format.\n                }\n              </div>\n            }\n            @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\n              @for (error of formGroup.errors | keyvalue; track error) {\n                @if (field.validationMessages[error.key]) {\n                  <div\n                    class=\"gfield_description validation_message gfield_validation_message\">\n                    {{ field.validationMessages[error.key] }}\n                  </div>\n                }\n              }\n            }\n          </div>\n        }\n      </div>\n\n      <div class=\"gform_footer\">\n        <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\">{{config.submitText}}</ptr-button>\n      </div>\n\n    </form>\n  </div>\n" }]
+                        PtrButtonComponent,
+                        PtrSelectComponent,
+                        PtrInputComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n  @if (error) {\r\n    <div class=\"gform_validation_errors\">\r\n      <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n    </div>\r\n  }\r\n\r\n  @if (config.title) {\r\n    <div class=\"gform_heading\">\r\n      <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n    </div>\r\n  }\r\n\r\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <div class=\"gform_fields\">\r\n\r\n      @for (field of config.fields; track field.name) {\r\n        <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\r\n          [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n\r\n          @switch (field.type) {\r\n            @case ('textarea') {\r\n              <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\r\n              <textarea [id]=\"field.name\" [formControlName]=\"field.name\" [attr.placeholder]=\"field.placeholder || null\"></textarea>\r\n            }\r\n            @case ('select') {\r\n              <ptr-select [label]=\"field.label\" [formControlName]=\"field.name\" [options]=\"field.options\" [placeholder]=\"field.placeholder\"></ptr-select>\r\n            }\r\n            @default {\r\n              <ptr-input [label]=\"field.label\" [formControlName]=\"field.name\" [type]=\"field.type\" [placeholder]=\"field.placeholder\"\r\n                [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\" [dialogHelpText]=\"field.dialogHelpText\" />\r\n              }\r\n            }\r\n\r\n            @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\r\n              <div class=\"gfield_description validation_message gfield_validation_message\"\r\n                >\r\n                @if (formGroup.get(field.name)?.errors?.['required']) {\r\n                  This field is required.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['email']) {\r\n                  Please enter a valid email address.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['minlength']) {\r\n                  Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['maxlength']) {\r\n                  Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n                }\r\n                @if (formGroup.get(field.name)?.errors?.['pattern']) {\r\n                  Please match the required format.\r\n                }\r\n              </div>\r\n            }\r\n            @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\r\n              @for (error of formGroup.errors | keyvalue; track error) {\r\n                @if (field.validationMessages[error.key]) {\r\n                  <div\r\n                    class=\"gfield_description validation_message gfield_validation_message\">\r\n                    {{ field.validationMessages[error.key] }}\r\n                  </div>\r\n                }\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n      </div>\r\n\r\n        @if(config.submitText){\r\n          <div class=\"gform_footer\">\r\n            <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\">{{config.submitText}}</ptr-button>\r\n          </div>\r\n        }\r\n\r\n    </form>\r\n  </div>\r\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], loading: [{
@@ -207,16 +596,25 @@ class PtrTitleComponent {
     router = inject(Router);
     activatedRoute = inject(ActivatedRoute);
     titleStrategy = inject(TitleStrategy);
-    title$;
+    displayTitle$;
     hideTitle$;
     ngOnInit() {
         const routeEvents$ = this.router.events.pipe(filter((event) => event instanceof NavigationEnd), map(() => this.getRoute(this.activatedRoute)));
         this.hideTitle$ = routeEvents$.pipe(map(route => !!route.snapshot.data['hideTitle']));
-        this.title$ = routeEvents$.pipe(map(route => {
+        this.displayTitle$ = routeEvents$.pipe(map(route => {
             if (route.snapshot.data['hideTitle']) {
                 return '';
             }
-            return this.titleStrategy.getResolvedTitleForRoute(route.snapshot) || '';
+            // Check for a custom display title in the route data
+            const customDisplayTitle = route.snapshot.data['displayTitle'];
+            if (customDisplayTitle) {
+                return customDisplayTitle;
+            }
+            // If no custom display title, use the resolved title from TitleStrategy
+            const resolvedTitle = this.titleStrategy.getResolvedTitleForRoute(route.snapshot) || '';
+            return resolvedTitle;
+            // Remove any common suffix (checking for both ' | ' and ' - ' separators)
+            // return this.removeCommonSuffix(resolvedTitle);
         }));
     }
     getRoute(route) {
@@ -225,25 +623,35 @@ class PtrTitleComponent {
         }
         return route;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", ngImport: i0, template: '@if (!(hideTitle$ | async)) {<header class="entry-header is-layout-constrained my-3"><h1 class="entry-title">{{ title$ | async }}</h1></header>}', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    removeCommonSuffix(title) {
+        const separators = [' | ', ' - '];
+        for (const separator of separators) {
+            const parts = title.split(separator);
+            if (parts.length > 1) {
+                return parts[0].trim();
+            }
+        }
+        return title.trim();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", ngImport: i0, template: '@if ((hideTitle$|async) === false) {<header class="entry-header is-layout-constrained my-3"><h1 class="entry-title">{{ displayTitle$ | async }}</h1></header>}', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ptr-title',
                     standalone: true,
                     imports: [CommonModule],
-                    template: '@if (!(hideTitle$ | async)) {<header class="entry-header is-layout-constrained my-3"><h1 class="entry-title">{{ title$ | async }}</h1></header>}',
+                    template: '@if ((hideTitle$|async) === false) {<header class="entry-header is-layout-constrained my-3"><h1 class="entry-title">{{ displayTitle$ | async }}</h1></header>}',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
         }] });
 class PtrLoadingSpinnerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrLoadingSpinnerComponent, isStandalone: true, selector: "ptr-loading-spinner", ngImport: i0, template: `<div class="vdx-progress-spinner"></div>`, isInline: true, styles: [":host{display:inline-block;line-height:0}.vdx-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.vdx-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.vdx-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PtrLoadingSpinnerComponent, isStandalone: true, selector: "ptr-loading-spinner", ngImport: i0, template: `<div class="vdx-progress-spinner"></div>`, isInline: true, styles: [":host{display:inline-block;line-height:0}.vdx-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.vdx-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.vdx-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-loading-spinner', standalone: true, imports: [], template: `<div class="vdx-progress-spinner"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;line-height:0}.vdx-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.vdx-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.vdx-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"] }]
         }] });
@@ -311,10 +719,10 @@ class PtrLoadingSpinnerDirective {
     removeBlurEffect() {
         this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[ptrLoadingSpinner]',
@@ -399,10 +807,10 @@ class PtrLoadingService {
     updateTaskCount(taskCount, increment) {
         taskCount.update(count => increment ? count + 1 : Math.max(0, count - 1));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrLoadingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -428,10 +836,10 @@ class PtrDialogComponent {
     onClose() {
         this.closed.emit(null);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n  <div class=\"ptr-modal__content\">\r\n    <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">\r\n      &times;\r\n    </button>\r\n    <p>{{ message }}</p>\r\n    <div class=\"ptr-modal__actions\">\r\n      <ptr-button [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\" [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\r\n    </div>\r\n  </div>\r\n</dialog>", styles: [".ptr-modal{border-radius:var(--wp--custom--default-border-radius);border:none;padding:1rem}.ptr-modal__content{padding:1rem;position:relative}.ptr-modal__close{position:absolute;right:0;top:0;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1rem}.ptr-modal__actions{margin-top:20px;text-align:right}dialog.ptr-modal{opacity:0;transition:all .7s allow-discrete}dialog.ptr-modal[open]{opacity:1}dialog.ptr-modal::backdrop{background-color:#0000;transition:all .7s allow-discrete;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}dialog.ptr-modal[open]::backdrop{background-color:#0006}@starting-style{dialog[open]{opacity:0}}@starting-style{dialog[open]::backdrop{background-color:#0000}}\n"], dependencies: [{ kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n  <div class=\"ptr-modal__content\">\r\n    <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">\r\n      &times;\r\n    </button>\r\n    <p>{{ message }}</p>\r\n    <div class=\"ptr-modal__actions\">\r\n      <ptr-button [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\" [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\r\n    </div>\r\n  </div>\r\n</dialog>", styles: [".ptr-modal{border-radius:var(--wp--custom--default-border-radius);border:none;padding:1rem}.ptr-modal__content{padding:1rem;position:relative}.ptr-modal__close{position:absolute;right:0;top:0;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1rem}.ptr-modal__actions{margin-top:20px;text-align:right}dialog.ptr-modal{opacity:0;transition:all .7s allow-discrete}dialog.ptr-modal[open]{opacity:1}dialog.ptr-modal::backdrop{background-color:#0000;transition:all .7s allow-discrete;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}dialog.ptr-modal[open]::backdrop{background-color:#0006}@starting-style{dialog[open]{opacity:0}}@starting-style{dialog[open]::backdrop{background-color:#0000}}\n"], dependencies: [{ kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-dialog', standalone: true, imports: [
                         PtrButtonComponent
@@ -482,16 +890,17 @@ class PtrDialogService {
             this.dialogComponentRef = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
                 }]
         }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
+/* eslint-disable @typescript-eslint/no-explicit-any */
 class PtrTooltipComponent {
     content = '';
     tooltipDialog;
@@ -508,10 +917,10 @@ class PtrTooltipComponent {
             this.tooltipDialog.nativeElement.close();
         }, 200); // Small delay to allow moving mouse to tooltip
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrTooltipComponent, isStandalone: true, selector: "ptr-tooltip", inputs: { content: "content" }, viewQueries: [{ propertyName: "tooltipDialog", first: true, predicate: ["tooltipDialog"], descendants: true }], ngImport: i0, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n  <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n  <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PtrTooltipComponent, isStandalone: true, selector: "ptr-tooltip", inputs: { content: "content" }, viewQueries: [{ propertyName: "tooltipDialog", first: true, predicate: ["tooltipDialog"], descendants: true }], ngImport: i0, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n  <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n  <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-tooltip', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n  <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n  <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"] }]
         }], propDecorators: { content: [{
@@ -529,5 +938,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImpor
  * Generated bundle index. Do not edit.
  */
-export { PtrButtonComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrTitleComponent, PtrTooltipComponent };
+export { PtrButtonComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrSelectComponent, PtrTitleComponent, PtrTooltipComponent };
 //# sourceMappingURL=patter-ngx-components.mjs.map