@patter/ngx-components 19.0.3 → 20.0.4

package/fesm2022/patter-ngx-components.mjs

@@ -5,17 +5,17 @@ import { RouterModule, RouterLink, Router, ActivatedRoute, TitleStrategy, Naviga
 import * as i1$1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i1$2 from '@angular/forms';
-import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormBuilder } from '@angular/forms';
+import { FormsModule, ReactiveFormsModule, NG_VALUE_ACCESSOR, FormControl, FormBuilder } from '@angular/forms';
 import { Subject, debounceTime, distinctUntilChanged, switchMap, of, filter, startWith, map, timer } from 'rxjs';
 import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
 import { take } from 'rxjs/operators';
 
 class PtrMenuComponent {
     menuItems = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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.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: "19.2.9", ngImport: i0, type: PtrMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-menu', 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: [{
@@ -97,10 +97,10 @@ class PtrButtonComponent {
         }
         this.clicked.emit(event);
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton", ariaLabel: "ariaLabel" }, 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)\" [attr.aria-label]=\"ariaLabel ?? null\">\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  [attr.aria-label]=\"ariaLabel ?? null\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}\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: "20.0.4", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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", ariaLabel: "ariaLabel" }, 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)\" [attr.aria-label]=\"ariaLabel ?? null\">\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  [attr.aria-label]=\"ariaLabel ?? null\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}\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: "19.2.9", ngImport: i0, type: PtrButtonComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrButtonComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-button', 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)\" [attr.aria-label]=\"ariaLabel ?? null\">\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  [attr.aria-label]=\"ariaLabel ?? null\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}\r\n" }]
         }], propDecorators: { hostClasses: [{
@@ -292,10 +292,10 @@ class PtrDialogListComponent {
         this.dialog.nativeElement.style.top = '';
         this.dialog.nativeElement.style.bottom = '';
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", 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: "19.2.9", ngImport: i0, type: PtrDialogListComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrDialogListComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-dialog-list', imports: [
                         FormsModule
@@ -397,8 +397,8 @@ class PtrSelectComponent {
             }
         });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrSelectComponent, isStandalone: true, selector: "ptr-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description", labelPosition: "labelPosition" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrSelectComponent, isStandalone: true, selector: "ptr-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description", labelPosition: "labelPosition" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PtrSelectComponent),
@@ -406,7 +406,7 @@ class PtrSelectComponent {
             }
         ], 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\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n  <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n    [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n    <span [attr.id]=\"labelId\">@if (displayValue(); as dValue) { {{dValue}} } @else { {{effectivePlaceholder()}} }</span>\r\n  </button>\r\n\r\n  @if (labelPosition === 'inline') {\r\n  <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n    <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n      <span>{{label}}</span>\r\n    </legend>\r\n  </fieldset>\r\n  }\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-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,iVBORw0KGgoAAAANSUhEUgAAABkAAAAeCAYAAADZ7LXbAAAACXBIWXMAAAsTAAALEwEAmpwYAAAKT2lDQ1BQaG90b3Nob3AgSUNDIHByb2ZpbGUAAHjanVNnVFPpFj333vRCS4iAlEtvUhUIIFJCi4AUkSYqIQkQSoghodkVUcERRUUEG8igiAOOjoCMFVEsDIoK2AfkIaKOg6OIisr74Xuja9a89+bN/rXXPues852zzwfACAyWSDNRNYAMqUIeEeCDx8TG4eQuQIEKJHAAEAizZCFz/SMBAPh+PDwrIsAHvgABeNMLCADATZvAMByH/w/qQplcAYCEAcB0kThLCIAUAEB6jkKmAEBGAYCdmCZTAKAEAGDLY2LjAFAtAGAnf+bTAICd+Jl7AQBblCEVAaCRACATZYhEAGg7AKzPVopFAFgwABRmS8Q5ANgtADBJV2ZIALC3AMDOEAuyAAgMADBRiIUpAAR7AGDIIyN4AISZABRG8lc88SuuEOcqAAB4mbI8uSQ5RYFbCC1xB1dXLh4ozkkXKxQ2YQJhmkAuwnmZGTKBNA/g88wAAKCRFRHgg/P9eM4Ors7ONo62Dl8t6r8G/yJiYuP+5c+rcEAAAOF0ftH+LC+zGoA7BoBt/qIl7gRoXgugdfeLZrIPQLUAoOnaV/Nw+H48PEWhkLnZ2eXk5NhKxEJbYcpXff5nwl/AV/1s+X48/Pf14L7iJIEyXYFHBPjgwsz0TKUcz5IJhGLc5o9H/LcL//wd0yLESWK5WCoU41EScY5EmozzMqUiiUKSKcUl0v9k4t8s+wM+3zUAsGo+AXuRLahdYwP2SycQWHTA4vcAAPK7b8HUKAgDgGiD4c93/+8//UegJQCAZkmScQAAXkQkLlTKsz/HCAAARKCBKrBBG/TBGCzABhzBBdzBC/xgNoRCJMTCQhBCCmSAHHJgKayCQiiGzbAdKmAv1EAdNMBRaIaTcA4uwlW4Dj1wD/phCJ7BKLyBCQRByAgTYSHaiAFiilgjjggXmYX4IcFIBBKLJCDJiBRRIkuRNUgxUopUIFVIHfI9cgI5h1xGupE7yAAygvyGvEcxlIGyUT3UDLVDuag3GoRGogvQZHQxmo8WoJvQcrQaPYw2oefQq2gP2o8+Q8cwwOgYBzPEbDAuxsNCsTgsCZNjy7EirAyrxhqwVqwDu4n1Y8+xdwQSgUXACTYEd0IgYR5BSFhMWE7YSKggHCQ0EdoJNwkDhFHCJyKTqEu0JroR+cQYYjIxh1hILCPWEo8TLxB7iEPENyQSiUMyJ7mQAkmxpFTSEtJG0m5SI+ksqZs0SBojk8naZGuyBzmULCAryIXkneTD5DPkG+Qh8lsKnWJAcaT4U+IoUspqShnlEOU05QZlmDJBVaOaUt2ooVQRNY9aQq2htlKvUYeoEzR1mjnNgxZJS6WtopXTGmgXaPdpr+h0uhHdlR5Ol9BX0svpR+iX6AP0dwwNhhWDx4hnKBmbGAcYZxl3GK+YTKYZ04sZx1QwNzHrmOeZD5lvVVgqtip8FZHKCpVKlSaVGyovVKmqpqreqgtV81XLVI+pXlN9rkZVM1PjqQnUlqtVqp1Q61MbU2epO6iHqmeob1Q/pH5Z/YkGWcNMw09DpFGgsV/jvMYgC2MZs3gsIWsNq4Z1gTXEJrHN2Xx2KruY/R27iz2qqaE5QzNKM1ezUvOUZj8H45hx+Jx0TgnnKKeX836K3hTvKeIpG6Y0TLkxZVxrqpaXllirSKtRq0frvTau7aedpr1Fu1n7gQ5Bx0onXCdHZ4/OBZ3nU9lT3acKpxZNPTr1ri6qa6UbobtEd79up+6Ynr5egJ5Mb6feeb3n+hx9L/1U/W36p/VHDFgGswwkBtsMzhg8xTVxbzwdL8fb8VFDXcNAQ6VhlWGX4YSRudE8o9VGjUYPjGnGXOMk423GbcajJgYmISZLTepN7ppSTbmmKaY7TDtMx83MzaLN1pk1mz0x1zLnm+eb15vft2BaeFostqi2uGVJsuRaplnutrxuhVo5WaVYVVpds0atna0l1rutu6cRp7lOk06rntZnw7Dxtsm2qbcZsOXYBtuutm22fWFnYhdnt8Wuw+6TvZN9un2N/T0HDYfZDqsdWh1+c7RyFDpWOt6azpzuP33F9JbpL2dYzxDP2DPjthPLKcRpnVOb00dnF2e5c4PziIuJS4LLLpc+Lpsbxt3IveRKdPVxXeF60vWdm7Obwu2o26/uNu5p7ofcn8w0nymeWTNz0MPIQ+BR5dE/C5+VMGvfrH5PQ0+BZ7XnIy9jL5FXrdewt6V3qvdh7xc+9j5yn+M+4zw33jLeWV/MN8C3yLfLT8Nvnl+F30N/I/9k/3r/0QCngCUBZwOJgUGBWwL7+Hp8Ib+OPzrbZfay2e1BjKC5QRVBj4KtguXBrSFoyOyQrSH355jOkc5pDoVQfujW0Adh5mGLw34MJ4WHhVeGP45wiFga0TGXNXfR3ENz30T6RJZE3ptnMU85ry1KNSo+qi5qPNo3ujS6P8YuZlnM1VidWElsSxw5LiquNm5svt/87fOH4p3iC+N7F5gvyF1weaHOwvSFpxapLhIsOpZATIhOOJTwQRAqqBaMJfITdyWOCnnCHcJnIi/RNtGI2ENcKh5O8kgqTXqS7JG8NXkkxTOlLOW5hCepkLxMDUzdmzqeFpp2IG0yPTq9MYOSkZBxQqohTZO2Z+pn5mZ2y6xlhbL+xW6Lty8elQfJa7OQrAVZLQq2QqboVFoo1yoHsmdlV2a/zYnKOZarnivN7cyzytuQN5zvn//tEsIS4ZK2pYZLVy0dWOa9rGo5sjxxedsK4xUFK4ZWBqw8uIq2Km3VT6vtV5eufr0mek1rgV7ByoLBtQFr6wtVCuWFfevc1+1dT1gvWd+1YfqGnRs+FYmKrhTbF5cVf9go3HjlG4dvyr+Z3JS0qavEuWTPZtJm6ebeLZ5bDpaql+aXDm4N2dq0Dd9WtO319kXbL5fNKNu7g7ZDuaO/PLi8ZafJzs07P1SkVPRU+lQ27tLdtWHX+G7R7ht7vPY07NXbW7z3/T7JvttVAVVN1WbVZftJ+7P3P66Jqun4lvttXa1ObXHtxwPSA/0HIw6217nU1R3SPVRSj9Yr60cOxx++/p3vdy0NNg1VjZzG4iNwRHnk6fcJ3/ceDTradox7rOEH0x92HWcdL2pCmvKaRptTmvtbYlu6T8w+0dbq3nr8R9sfD5w0PFl5SvNUyWna6YLTk2fyz4ydlZ19fi753GDborZ752PO32oPb++6EHTh0kX/i+c7vDvOXPK4dPKy2+UTV7hXmq86X23qdOo8/pPTT8e7nLuarrlca7nuer21e2b36RueN87d9L158Rb/1tWeOT3dvfN6b/fF9/XfFt1+cif9zsu72Xcn7q28T7xf9EDtQdlD3YfVP1v+3Njv3H9qwHeg89HcR/cGhYPP/pH1jw9DBY+Zj8uGDYbrnjg+OTniP3L96fynQ89kzyaeF/6i/suuFxYvfvjV69fO0ZjRoZfyl5O/bXyl/erA6xmv28bCxh6+yXgzMV70VvvtwXfcdx3vo98PT+R8IH8o/2j5sfVT0Kf7kxmTk/8EA5jz/GMzLdsAAAAgY0hSTQAAeiUAAICDAAD5/wAAgOkAAHUwAADqYAAAOpgAABdvkl/FRgAAAKRJREFUeNrs1TEKwkAQheEvIoI2nsk7qFdIq1hoJ3gCC5sUVpY23sDKXnvrYOUBbGITG0kQjQriPlgYhmF/3ryFjbIs82nVfEEBEiAB8k+Q+q1IkqSDNVq4lMy3scIkjuP0FSdbjNHMLys6OwyQVlnXEsOS2QP6OL8jkzlmd70jus86eBT8FIu8PqGXg6oFX6ARGthgX+V1ReFnDJAACZAfhFwHAJI7HF2lZGQaAAAAAElFTkSuQmCC)}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.gfield--input-wrapper--label-inline .select-button{border-color:transparent;outline: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: "19.2.9", ngImport: i0, type: PtrSelectComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrSelectComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-select', imports: [
                         FormsModule,
@@ -526,8 +526,8 @@ class PtrInputComponent {
             this.input.nativeElement.disabled = isDisabled;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrInputComponent, isStandalone: true, selector: "ptr-input", inputs: { type: "type", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", description: "description", dialogHelpText: "dialogHelpText", searchFn: "searchFn", labelPosition: "labelPosition" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrInputComponent, isStandalone: true, selector: "ptr-input", inputs: { type: "type", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", description: "description", dialogHelpText: "dialogHelpText", searchFn: "searchFn", labelPosition: "labelPosition" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
             {
                 provide: NG_VALUE_ACCESSOR,
                 useExisting: forwardRef(() => PtrInputComponent),
@@ -535,7 +535,7 @@ class PtrInputComponent {
             }
         ], 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\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n  <div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n  @switch (type) {\r\n  @case ('textarea') {\r\n  <textarea #input [id]=\"inputId\" [attr.autocomplete]=\"autocomplete || null\" [attr.placeholder]=\"placeholder || null\"\r\n    [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [rows]=\"3\"></textarea>\r\n  }\r\n  @default {\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  }\r\n\r\n  @if (labelPosition === 'inline') {\r\n    <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n      <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n        <span>{{label}}</span>\r\n      </legend>\r\n    </fieldset>\r\n  }\r\n\r\n  @if (searchFn) {\r\n    <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\r\n      [dialogTitle]=\"dialogHelpText\" />\r\n    }\r\n\r\n</div>\r\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"] }, { 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: "19.2.9", ngImport: i0, type: PtrInputComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrInputComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-input', imports: [
                         FormsModule,
@@ -575,6 +575,118 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
                 args: ['document:click', ['$event']]
             }] } });
 
+/* eslint-disable @typescript-eslint/no-empty-function */
+class PtrChipInputComponent {
+    label = '';
+    placeholder = 'Add item...';
+    description = '';
+    labelPosition = 'top';
+    maxItems;
+    chipInput;
+    componentId = Math.random().toString(36).substring(2);
+    inputId = `${this.componentId}-input`;
+    inputValue = signal('');
+    chipItems = signal([]);
+    isDisabled = signal(false);
+    tempInputControl = new FormControl('');
+    onChange = () => { };
+    onTouched = () => { };
+    ngOnInit() {
+        this.tempInputControl.valueChanges.subscribe(value => {
+            this.inputValue.set(value || '');
+        });
+    }
+    addChip() {
+        const value = this.inputValue().trim();
+        if (value && (!this.maxItems || this.chipItems().length < this.maxItems)) {
+            // Don't add duplicates
+            if (!this.chipItems().includes(value)) {
+                const newChips = [...this.chipItems(), value];
+                this.chipItems.set(newChips);
+                this.onChange(newChips);
+            }
+            this.tempInputControl.setValue('');
+            this.chipInput.nativeElement.focus();
+        }
+    }
+    removeChip(index) {
+        const newChips = [...this.chipItems()];
+        newChips.splice(index, 1);
+        this.chipItems.set(newChips);
+        this.onChange(newChips);
+    }
+    onKeyDown(event) {
+        if (event.key === 'Enter' || event.key === ',') {
+            event.preventDefault();
+            this.addChip();
+        }
+        else if (event.key === 'Backspace' && !this.inputValue() && this.chipItems().length > 0) {
+            // Remove the last chip when backspace is pressed and input is empty
+            this.removeChip(this.chipItems().length - 1);
+        }
+    }
+    onBlur() {
+        // Add the chip when the input loses focus if there's a value
+        if (this.inputValue().trim()) {
+            this.addChip();
+        }
+        this.onTouched();
+    }
+    writeValue(value) {
+        this.chipItems.set(value || []);
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(isDisabled) {
+        this.isDisabled.set(isDisabled);
+        if (isDisabled) {
+            this.tempInputControl.disable();
+        }
+        else {
+            this.tempInputControl.enable();
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrChipInputComponent, isStandalone: true, selector: "ptr-chip-input", inputs: { label: "label", placeholder: "placeholder", description: "description", labelPosition: "labelPosition", maxItems: "maxItems" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => PtrChipInputComponent),
+                multi: true
+            }
+        ], viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n  <div class=\"ptr-chip-container\">\r\n    <div class=\"ptr-chip-list\">\r\n      @for (chip of chipItems(); track chip; let i = $index) {\r\n      <div class=\"ptr-chip\">\r\n        <span class=\"ptr-chip-text\">{{ chip }}</span>\r\n        <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\r\n          aria-label=\"Remove item\">\u00D7</button>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ptr-chip-input-wrapper\">\r\n      <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\r\n        (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\"\r\n        [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\r\n      <ptr-button (clicked)=\"addChip()\"\r\n        [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\r\n    </div>\r\n  </div>\r\n\r\n  @if (labelPosition === 'inline') {\r\n  <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n    <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n      <span>{{label}}</span>\r\n    </legend>\r\n  </fieldset>\r\n  }\r\n</div>\r\n", styles: [".ptr-chip-container{display:flex;flex-direction:column;gap:8px;width:100%}.ptr-chip-list{display:flex;flex-wrap:wrap;gap:8px}.ptr-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, currentColor);border-radius:16px;padding:4px 12px;font-size:var(--wp--preset--font-size--small, 14px);line-height:20px;margin-right:4px;cursor:default;transition:background-color .2s ease}.ptr-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.ptr-chip-text{margin-right:6px}.ptr-chip-remove{border:none;background:none;color:var(--wp--custom--color--primary-text, currentColor);font-size:var(--wp--preset--font-size--medium, 16px);cursor:pointer;padding:0;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:background-color .2s ease}.ptr-chip-remove:hover{background-color:#0000001a}.ptr-chip-remove:disabled{opacity:.5;cursor:not-allowed}.ptr-chip-input-wrapper{display:flex;gap:8px;width:100%}\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: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrChipInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-chip-input', imports: [
+                        FormsModule,
+                        ReactiveFormsModule,
+                        PtrButtonComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => PtrChipInputComponent),
+                            multi: true
+                        }
+                    ], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n  [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n  <div class=\"ptr-chip-container\">\r\n    <div class=\"ptr-chip-list\">\r\n      @for (chip of chipItems(); track chip; let i = $index) {\r\n      <div class=\"ptr-chip\">\r\n        <span class=\"ptr-chip-text\">{{ chip }}</span>\r\n        <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\r\n          aria-label=\"Remove item\">\u00D7</button>\r\n      </div>\r\n      }\r\n    </div>\r\n\r\n    <div class=\"ptr-chip-input-wrapper\">\r\n      <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\r\n        (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\"\r\n        [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\r\n      <ptr-button (clicked)=\"addChip()\"\r\n        [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\r\n    </div>\r\n  </div>\r\n\r\n  @if (labelPosition === 'inline') {\r\n  <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n    <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n      <span>{{label}}</span>\r\n    </legend>\r\n  </fieldset>\r\n  }\r\n</div>\r\n", styles: [".ptr-chip-container{display:flex;flex-direction:column;gap:8px;width:100%}.ptr-chip-list{display:flex;flex-wrap:wrap;gap:8px}.ptr-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, currentColor);border-radius:16px;padding:4px 12px;font-size:var(--wp--preset--font-size--small, 14px);line-height:20px;margin-right:4px;cursor:default;transition:background-color .2s ease}.ptr-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.ptr-chip-text{margin-right:6px}.ptr-chip-remove{border:none;background:none;color:var(--wp--custom--color--primary-text, currentColor);font-size:var(--wp--preset--font-size--medium, 16px);cursor:pointer;padding:0;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:50%;transition:background-color .2s ease}.ptr-chip-remove:hover{background-color:#0000001a}.ptr-chip-remove:disabled{opacity:.5;cursor:not-allowed}.ptr-chip-input-wrapper{display:flex;gap:8px;width:100%}\n"] }]
+        }], propDecorators: { label: [{
+                type: Input
+            }], placeholder: [{
+                type: Input
+            }], description: [{
+                type: Input
+            }], labelPosition: [{
+                type: Input
+            }], maxItems: [{
+                type: Input
+            }], chipInput: [{
+                type: ViewChild,
+                args: ['chipInput']
+            }] } });
+
 class PtrFormComponent {
     config;
     loading = false;
@@ -594,7 +706,13 @@ class PtrFormComponent {
     buildForm() {
         const group = {};
         this.config.fields.forEach(field => {
-            group[field.name] = [field.value || '', field.validators || []];
+            // Initialize array fields with empty arrays
+            if (field.type === 'chips') {
+                group[field.name] = [field.value || [], field.validators || []];
+            }
+            else {
+                group[field.name] = [field.value || '', field.validators || []];
+            }
         });
         this.formGroup = this.fb.group(group, this.config.formValidators ? { validators: this.config.formValidators } : null);
     }
@@ -607,7 +725,12 @@ class PtrFormComponent {
         this.formGroup.reset();
         this.config.fields.forEach(field => {
             const control = this.formGroup.get(field.name);
-            control?.setValue(field.value || '', { emitEvent: false });
+            if (field.type === 'chips') {
+                control?.setValue(field.value || [], { emitEvent: false });
+            }
+            else {
+                control?.setValue(field.value || '', { emitEvent: false });
+            }
         });
         this.cdr.markForCheck();
     }
@@ -618,21 +741,24 @@ class PtrFormComponent {
         });
     }
     isFieldVisible(field) {
-        if (!field.conditional?.showWhen)
+        if (!field.conditional?.showWhen) {
             return true;
+        }
         return this.evaluateConditionalRules(field.conditional.showWhen);
     }
     getFieldLabel(field) {
-        if (!field.conditional?.label)
+        if (!field.conditional?.label) {
             return field.label;
-        const conditionalLabel = this.evaluateConditionalRules(field.conditional.label);
-        return conditionalLabel || field.label;
+        }
+        const result = this.evaluateConditionalRules(field.conditional.label);
+        return typeof result === 'string' ? result : field.label;
     }
     getFieldPlaceholder(field) {
-        if (!field.conditional?.placeholder)
-            return field.placeholder || null;
-        const conditionalPlaceholder = this.evaluateConditionalRules(field.conditional.placeholder);
-        return conditionalPlaceholder || field.placeholder || null;
+        if (!field.conditional?.placeholder) {
+            return field.placeholder || '';
+        }
+        const result = this.evaluateConditionalRules(field.conditional.placeholder);
+        return typeof result === 'string' ? result : field.placeholder || '';
     }
     evaluateConditionalRules(rules) {
         for (const rule of rules) {
@@ -643,18 +769,19 @@ class PtrFormComponent {
         }
         return false;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", 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        @if(isFieldVisible(field)) {\r\n\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\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\r\n\r\n          @switch (field.type) {\r\n            @case ('select') {\r\n              <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n                [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\r\n            }\r\n            @default {\r\n            <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\r\n              [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\r\n              [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\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              @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 &&\r\n          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 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      }\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\"\r\n          [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{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.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", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: PtrSelectComponent, selector: "ptr-select", inputs: ["options", "showSearch", "placeholder", "label", "description", "labelPosition"], outputs: ["selectionChange"] }, { kind: "component", type: PtrInputComponent, selector: "ptr-input", inputs: ["type", "label", "placeholder", "autocomplete", "description", "dialogHelpText", "searchFn", "labelPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.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\">\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        @if(isFieldVisible(field)) {\r\n\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\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\r\n\r\n          @switch (field.type) {\r\n            @case ('select') {\r\n              <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n                [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\r\n            }\r\n            @case ('chips') {\r\n              <ptr-chip-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\"\r\n                [placeholder]=\"getFieldPlaceholder(field)\" [description]=\"field.description\"\r\n                [maxItems]=\"field.maxItems\" [labelPosition]=\"config.labelPosition\" />\r\n            }\r\n            @default {\r\n            <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\r\n              [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\r\n              [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\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              @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 &&\r\n          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 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      }\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\"\r\n          [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{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.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", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: PtrSelectComponent, selector: "ptr-select", inputs: ["options", "showSearch", "placeholder", "label", "description", "labelPosition"], outputs: ["selectionChange"] }, { kind: "component", type: PtrInputComponent, selector: "ptr-input", inputs: ["type", "label", "placeholder", "autocomplete", "description", "dialogHelpText", "searchFn", "labelPosition"] }, { kind: "component", type: PtrChipInputComponent, selector: "ptr-chip-input", inputs: ["label", "placeholder", "description", "labelPosition", "maxItems"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-form', imports: [
                         CommonModule,
                         ReactiveFormsModule,
                         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        @if(isFieldVisible(field)) {\r\n\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\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\r\n\r\n          @switch (field.type) {\r\n            @case ('select') {\r\n              <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n                [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\r\n            }\r\n            @default {\r\n            <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\r\n              [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\r\n              [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\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              @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 &&\r\n          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 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      }\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\"\r\n          [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{config.submitText}}</ptr-button>\r\n      </div>\r\n    }\r\n\r\n  </form>\r\n</div>\r\n" }]
+                        PtrInputComponent,
+                        PtrChipInputComponent
+                    ], 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        @if(isFieldVisible(field)) {\r\n\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\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\r\n\r\n          @switch (field.type) {\r\n            @case ('select') {\r\n              <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n                [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\r\n            }\r\n            @case ('chips') {\r\n              <ptr-chip-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\"\r\n                [placeholder]=\"getFieldPlaceholder(field)\" [description]=\"field.description\"\r\n                [maxItems]=\"field.maxItems\" [labelPosition]=\"config.labelPosition\" />\r\n            }\r\n            @default {\r\n            <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\r\n              [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\r\n              [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\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              @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 &&\r\n          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 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      }\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\"\r\n          [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{config.submitText}}</ptr-button>\r\n      </div>\r\n    }\r\n\r\n  </form>\r\n</div>\r\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], loading: [{
@@ -701,10 +828,10 @@ class PtrTitleComponent {
         }
         return route;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", inputs: { styleClass: "styleClass", wrapperStyleClass: "wrapperStyleClass", screenReaderOnly: "screenReaderOnly" }, ngImport: i0, template: "@if ((hideTitle$|async) === false) {\r\n  @if(wrapperStyleClass) {\r\n    <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\r\n      <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n    </header>\r\n  } @else {\r\n    <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", inputs: { styleClass: "styleClass", wrapperStyleClass: "wrapperStyleClass", screenReaderOnly: "screenReaderOnly" }, ngImport: i0, template: "@if ((hideTitle$|async) === false) {\r\n  @if(wrapperStyleClass) {\r\n    <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\r\n      <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n    </header>\r\n  } @else {\r\n    <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\r\n  }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrTitleComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-title', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((hideTitle$|async) === false) {\r\n  @if(wrapperStyleClass) {\r\n    <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\r\n      <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n    </header>\r\n  } @else {\r\n    <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\r\n  }\r\n}\r\n" }]
         }], propDecorators: { styleClass: [{
@@ -716,10 +843,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
             }] } });
 
 class PtrLoadingSpinnerComponent {
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", type: PtrLoadingSpinnerComponent, isStandalone: true, selector: "ptr-loading-spinner", ngImport: i0, template: `<div class="ptr-progress-spinner"></div>`, isInline: true, styles: [":host{display:inline-block;line-height:0}.ptr-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.ptr-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}.ptr-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: "20.0.4", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.4", type: PtrLoadingSpinnerComponent, isStandalone: true, selector: "ptr-loading-spinner", ngImport: i0, template: `<div class="ptr-progress-spinner"></div>`, isInline: true, styles: [":host{display:inline-block;line-height:0}.ptr-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.ptr-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}.ptr-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: "19.2.9", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-loading-spinner', imports: [], template: `<div class="ptr-progress-spinner"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;line-height:0}.ptr-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.ptr-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}.ptr-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"] }]
         }] });
@@ -788,14 +915,13 @@ class PtrLoadingSpinnerDirective {
     removeBlurEffect() {
         this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.9", 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: "20.0.4", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0.4", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
             type: Directive,
             args: [{
-                    selector: '[ptrLoadingSpinner]',
-                    standalone: true
+                    selector: '[ptrLoadingSpinner]'
                 }]
         }], propDecorators: { hostPosition: [{
                 type: HostBinding,
@@ -889,10 +1015,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: "19.2.9", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrLoadingService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrLoadingService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -925,10 +1051,10 @@ class PtrDialogComponent {
     setData(data) {
         this.data = data;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { title: "title", message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle", contentTemplate: "contentTemplate", hasDefaultContent: "hasDefaultContent", data: "data" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\n  <div class=\"ptr-modal__content\">\n\n    <div class=\"ptr-modal__header\">\n      <h2 class=\"ptr-modal__title\">{{title}}</h2>\n      <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">&times;</button>\n    </div>\n\n    @if (hasDefaultContent && !contentTemplate) {\n      <p>{{ message }}</p>\n    }\n\n    @if (contentTemplate) {\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: {$implicit: data, dialogInstance: this}\"></ng-container>\n    }\n\n    <div class=\"ptr-modal__actions\">\n      <ptr-button buttonStyle=\"secondary\" (clicked)=\"close()\" [isSmallSize]=\"true\">Cancel</ptr-button>\n      <ptr-button class=\"ml-auto\" [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\"\n      [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\n    </div>\n\n  </div>\n</dialog>\n", styles: [".ptr-modal{border-radius:min(var(--wp--custom--default-border-radius),6px);border:none;padding:.75rem}.ptr-modal__content{padding:.75rem;position:relative}.ptr-modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ptr-modal__header h2{margin:0;font-size:calc(var(--wp--preset--font-size--medium) * 1.125)}.ptr-modal__close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1.5rem;transform:translateY(-25%)}.ptr-modal__close:hover,.ptr-modal__close:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.ptr-modal__actions{margin-top:20px;text-align:right;display:flex;justify-content:space-between}dialog.ptr-modal{opacity:0;transition:all .2s}dialog.ptr-modal[open]{opacity:1}@starting-style{dialog.ptr-modal[open]{opacity:0}}dialog.ptr-modal::backdrop{opacity:0;background-color:#0000;transition:all .2s}dialog.ptr-modal[open]::backdrop{background-color:#25273499;opacity:1}@starting-style{dialog.ptr-modal[open]::backdrop{opacity:0;background-color:#0000}}\n"], dependencies: [{ kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { title: "title", message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle", contentTemplate: "contentTemplate", hasDefaultContent: "hasDefaultContent", data: "data" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\n  <div class=\"ptr-modal__content\">\n\n    <div class=\"ptr-modal__header\">\n      <h2 class=\"ptr-modal__title\">{{title}}</h2>\n      <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">&times;</button>\n    </div>\n\n    @if (hasDefaultContent && !contentTemplate) {\n      <p>{{ message }}</p>\n    }\n\n    @if (contentTemplate) {\n      <ng-container *ngTemplateOutlet=\"contentTemplate; context: {$implicit: data, dialogInstance: this}\"></ng-container>\n    }\n\n    <div class=\"ptr-modal__actions\">\n      <ptr-button buttonStyle=\"secondary\" (clicked)=\"close()\" [isSmallSize]=\"true\">Cancel</ptr-button>\n      <ptr-button class=\"ml-auto\" [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\"\n      [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\n    </div>\n\n  </div>\n</dialog>\n", styles: [".ptr-modal{border-radius:min(var(--wp--custom--default-border-radius),6px);border:none;padding:.75rem}.ptr-modal__content{padding:.75rem;position:relative}.ptr-modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ptr-modal__header h2{margin:0;font-size:calc(var(--wp--preset--font-size--medium) * 1.125)}.ptr-modal__close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1.5rem;transform:translateY(-25%)}.ptr-modal__close:hover,.ptr-modal__close:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.ptr-modal__actions{margin-top:20px;text-align:right;display:flex;justify-content:space-between}dialog.ptr-modal{opacity:0;transition:all .2s}dialog.ptr-modal[open]{opacity:1}@starting-style{dialog.ptr-modal[open]{opacity:0}}dialog.ptr-modal::backdrop{opacity:0;background-color:#0000;transition:all .2s}dialog.ptr-modal[open]::backdrop{background-color:#25273499;opacity:1}@starting-style{dialog.ptr-modal[open]::backdrop{opacity:0;background-color:#0000}}\n"], dependencies: [{ kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrDialogComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrDialogComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-dialog', imports: [
                         PtrButtonComponent,
@@ -1001,10 +1127,10 @@ class PtrDialogService {
             this.dialogComponentRef = null;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrDialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.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: "20.0.4", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrDialogService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrDialogService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1028,10 +1154,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: "19.2.9", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.9", 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: "20.0.4", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0.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 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrTooltipComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrTooltipComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-tooltip', 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: [{
@@ -1085,10 +1211,10 @@ class PtrBreadcrumbsComponent {
         }
         return breadcrumbReturnInfo;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrBreadcrumbsComponent, isStandalone: true, selector: "ptr-breadcrumbs", inputs: { showFirstSeparator: "showFirstSeparator" }, ngImport: i0, template: "@if (breadcrumbs().length > 0) {\n  <nav aria-label=\"breadcrumb\" class=\"breadcrumb-wrapper\">\n    <ol class=\"breadcrumb\" [class.breadcrumb--show-first-separator]=\"showFirstSeparator\">\n      @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let last = $last) {\n        <li class=\"breadcrumb-item\" [class.breadcrumb-item--active]=\"last\">\n          @if (!last) {\n            <a class=\"breadcrumb-item-label\" [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n          }\n          @if (last) {\n            <span class=\"breadcrumb-item-label\">{{ breadcrumb.label }}</span>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n}\n", styles: [".breadcrumb{--breadcrumb-item-color: #ababab;--breadcrumb-item-font-size: var(--wp--preset--font-size--large, 1.25rem);list-style:none;border-radius:.25rem;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:2px}.breadcrumb-item{display:inline-block;margin:0}.breadcrumb-item--active .breadcrumb-item-label{color:inherit;font-weight:700}.breadcrumb-item-label{text-decoration:none;padding:4px;display:inline-block;color:var(--breadcrumb-item-color);font-size:var(--breadcrumb-item-font-size);font-weight:500;border-bottom:2px solid transparent}.breadcrumb-item a{transition:border-bottom .25s,color .25s}.breadcrumb-item a:hover,.breadcrumb-item a:focus{border-bottom-color:var(--wp--preset--color--primary)}.breadcrumb-item:first-child .breadcrumb-item-label{padding-left:0}.breadcrumb-item+.breadcrumb-item .breadcrumb-item-label:before{content:\"/\";padding-right:8px}.breadcrumb.breadcrumb--show-first-separator .breadcrumb-item-label:before{content:\"/\";padding-right:8px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrBreadcrumbsComponent, isStandalone: true, selector: "ptr-breadcrumbs", inputs: { showFirstSeparator: "showFirstSeparator" }, ngImport: i0, template: "@if (breadcrumbs().length > 0) {\n  <nav aria-label=\"breadcrumb\" class=\"breadcrumb-wrapper\">\n    <ol class=\"breadcrumb\" [class.breadcrumb--show-first-separator]=\"showFirstSeparator\">\n      @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let last = $last) {\n        <li class=\"breadcrumb-item\" [class.breadcrumb-item--active]=\"last\">\n          @if (!last) {\n            <a class=\"breadcrumb-item-label\" [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n          }\n          @if (last) {\n            <span class=\"breadcrumb-item-label\">{{ breadcrumb.label }}</span>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n}\n", styles: [".breadcrumb{--breadcrumb-item-color: #ababab;--breadcrumb-item-font-size: var(--wp--preset--font-size--large, 1.25rem);list-style:none;border-radius:.25rem;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:2px}.breadcrumb-item{display:inline-block;margin:0}.breadcrumb-item--active .breadcrumb-item-label{color:inherit;font-weight:700}.breadcrumb-item-label{text-decoration:none;padding:4px;display:inline-block;color:var(--breadcrumb-item-color);font-size:var(--breadcrumb-item-font-size);font-weight:500;border-bottom:2px solid transparent}.breadcrumb-item a{transition:border-bottom .25s,color .25s}.breadcrumb-item a:hover,.breadcrumb-item a:focus{border-bottom-color:var(--wp--preset--color--primary)}.breadcrumb-item:first-child .breadcrumb-item-label{padding-left:0}.breadcrumb-item+.breadcrumb-item .breadcrumb-item-label:before{content:\"/\";padding-right:8px}.breadcrumb.breadcrumb--show-first-separator .breadcrumb-item-label:before{content:\"/\";padding-right:8px}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-breadcrumbs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (breadcrumbs().length > 0) {\n  <nav aria-label=\"breadcrumb\" class=\"breadcrumb-wrapper\">\n    <ol class=\"breadcrumb\" [class.breadcrumb--show-first-separator]=\"showFirstSeparator\">\n      @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let last = $last) {\n        <li class=\"breadcrumb-item\" [class.breadcrumb-item--active]=\"last\">\n          @if (!last) {\n            <a class=\"breadcrumb-item-label\" [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n          }\n          @if (last) {\n            <span class=\"breadcrumb-item-label\">{{ breadcrumb.label }}</span>\n          }\n        </li>\n      }\n    </ol>\n  </nav>\n}\n", styles: [".breadcrumb{--breadcrumb-item-color: #ababab;--breadcrumb-item-font-size: var(--wp--preset--font-size--large, 1.25rem);list-style:none;border-radius:.25rem;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:2px}.breadcrumb-item{display:inline-block;margin:0}.breadcrumb-item--active .breadcrumb-item-label{color:inherit;font-weight:700}.breadcrumb-item-label{text-decoration:none;padding:4px;display:inline-block;color:var(--breadcrumb-item-color);font-size:var(--breadcrumb-item-font-size);font-weight:500;border-bottom:2px solid transparent}.breadcrumb-item a{transition:border-bottom .25s,color .25s}.breadcrumb-item a:hover,.breadcrumb-item a:focus{border-bottom-color:var(--wp--preset--color--primary)}.breadcrumb-item:first-child .breadcrumb-item-label{padding-left:0}.breadcrumb-item+.breadcrumb-item .breadcrumb-item-label:before{content:\"/\";padding-right:8px}.breadcrumb.breadcrumb--show-first-separator .breadcrumb-item-label:before{content:\"/\";padding-right:8px}\n"] }]
         }], propDecorators: { showFirstSeparator: [{
@@ -1099,14 +1225,13 @@ class PtrTabComponent {
     label;
     link;
     active = signal(false);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrTabComponent, isStandalone: true, selector: "ptr-tab", inputs: { label: "label", link: "link" }, ngImport: i0, template: '@if(active()){<ng-content></ng-content>}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrTabComponent, isStandalone: true, selector: "ptr-tab", inputs: { label: "label", link: "link" }, ngImport: i0, template: '@if(active()){<ng-content></ng-content>}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrTabComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrTabComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ptr-tab',
-                    standalone: true,
                     template: '@if(active()){<ng-content></ng-content>}',
                     changeDetection: ChangeDetectionStrategy.OnPush
                 }]
@@ -1166,10 +1291,10 @@ class PtrTabsComponent {
             });
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrTabsComponent, isStandalone: true, selector: "ptr-tabs", queries: [{ propertyName: "tabComponents", predicate: PtrTabComponent }], viewQueries: [{ propertyName: "buttons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\r\n  @for (tab of tabs(); track $index; let i = $index) {\r\n  <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\r\n    [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\r\n  }\r\n\r\n  <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\r\n</div>\r\n\r\n@if (!useLinks()) {\r\n<div class=\"tab-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n}\r\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrTabsComponent, isStandalone: true, selector: "ptr-tabs", queries: [{ propertyName: "tabComponents", predicate: PtrTabComponent }], viewQueries: [{ propertyName: "buttons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\r\n  @for (tab of tabs(); track $index; let i = $index) {\r\n  <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\r\n    [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\r\n  }\r\n\r\n  <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\r\n</div>\r\n\r\n@if (!useLinks()) {\r\n<div class=\"tab-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n}\r\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrTabsComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrTabsComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-tabs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs-container\" role=\"tablist\">\r\n  @for (tab of tabs(); track $index; let i = $index) {\r\n  <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\r\n    [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\r\n  }\r\n\r\n  <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\r\n</div>\r\n\r\n@if (!useLinks()) {\r\n<div class=\"tab-content\">\r\n  <ng-content></ng-content>\r\n</div>\r\n}\r\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { tabComponents: [{
@@ -1218,10 +1343,10 @@ class PtrToasterService {
     remove(id) {
         this.toasts.update(toasts => toasts.filter(t => t.id !== id));
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrToasterService, providedIn: 'root' });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrToasterService, providedIn: 'root' });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrToasterService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrToasterService, decorators: [{
             type: Injectable,
             args: [{
                     providedIn: 'root'
@@ -1230,10 +1355,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImpor
 
 class PtrToasterComponent {
     toasterService = inject(PtrToasterService);
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.9", type: PtrToasterComponent, isStandalone: true, selector: "ptr-toaster", ngImport: i0, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @for (toast of toasterService.getToasts()(); track toast.id) {\r\n  <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\r\n    <span>{{toast.message}}</span>\r\n    <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>&times;</span></button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".toaster-container{position:fixed;top:20px;right:20px;z-index:1000}.toast{padding:10px 20px;margin-bottom:10px;border-radius:calc(var(--wp--custom--default-border-radius) / 2);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 2px 4px 2px #00000026}.success{background-color:var(--wp--preset--color--primary, #28a745)}.error{background-color:var(--wp--custom--color--error, #dc3545)}.info{background-color:var(--wp--preset--color--secondary, #17a2b8)}.warning{background-color:var(--wp--preset--color--secondary, #ffc107)}button{background:none;border:none;color:inherit;font-size:2em;cursor:pointer;font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0.4", type: PtrToasterComponent, isStandalone: true, selector: "ptr-toaster", ngImport: i0, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @for (toast of toasterService.getToasts()(); track toast.id) {\r\n  <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\r\n    <span>{{toast.message}}</span>\r\n    <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>&times;</span></button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".toaster-container{position:fixed;top:20px;right:20px;z-index:1000}.toast{padding:10px 20px;margin-bottom:10px;border-radius:calc(var(--wp--custom--default-border-radius) / 2);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 2px 4px 2px #00000026}.success{background-color:var(--wp--preset--color--primary, #28a745)}.error{background-color:var(--wp--custom--color--error, #dc3545)}.info{background-color:var(--wp--preset--color--secondary, #17a2b8)}.warning{background-color:var(--wp--preset--color--secondary, #ffc107)}button{background:none;border:none;color:inherit;font-size:2em;cursor:pointer;font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.9", ngImport: i0, type: PtrToasterComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImport: i0, type: PtrToasterComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-toaster', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\r\n  @for (toast of toasterService.getToasts()(); track toast.id) {\r\n  <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\r\n    <span>{{toast.message}}</span>\r\n    <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>&times;</span></button>\r\n  </div>\r\n  }\r\n</div>\r\n", styles: [".toaster-container{position:fixed;top:20px;right:20px;z-index:1000}.toast{padding:10px 20px;margin-bottom:10px;border-radius:calc(var(--wp--custom--default-border-radius) / 2);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 2px 4px 2px #00000026}.success{background-color:var(--wp--preset--color--primary, #28a745)}.error{background-color:var(--wp--custom--color--error, #dc3545)}.info{background-color:var(--wp--preset--color--secondary, #17a2b8)}.warning{background-color:var(--wp--preset--color--secondary, #ffc107)}button{background:none;border:none;color:inherit;font-size:2em;cursor:pointer;font-family:monospace}\n"] }]
         }] });
@@ -1251,5 +1376,5 @@ var ptrToaster_component = /*#__PURE__*/Object.freeze({
  * Generated bundle index. Do not edit.
  */
 
-export { PtrBreadcrumbsComponent, PtrButtonComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrSelectComponent, PtrTabComponent, PtrTabsComponent, PtrTitleComponent, PtrToasterComponent, PtrToasterService, PtrTooltipComponent };
+export { PtrBreadcrumbsComponent, PtrButtonComponent, PtrChipInputComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrSelectComponent, PtrTabComponent, PtrTabsComponent, PtrTitleComponent, PtrToasterComponent, PtrToasterService, PtrTooltipComponent };
 //# sourceMappingURL=patter-ngx-components.mjs.map