@patter/ngx-components 0.5.2 → 0.5.4

package/fesm2022/patter-ngx-components.mjs

@@ -1,26 +1,129 @@
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
 import * as i0 from '@angular/core';
-import { Component, ChangeDetectionStrategy, Input, EventEmitter, inject, ChangeDetectorRef, DestroyRef, Output } from '@angular/core';
+import { Component, ChangeDetectionStrategy, Input, signal, EventEmitter, computed, HostBinding, Output, inject, ChangeDetectorRef, DestroyRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, ViewChild, createComponent } from '@angular/core';
 import * as i2 from '@angular/router';
-import { RouterModule, Router, ActivatedRoute, TitleStrategy, NavigationEnd } from '@angular/router';
+import { RouterModule, RouterLink, Router, ActivatedRoute, TitleStrategy, NavigationEnd } from '@angular/router';
 import * as i2$1 from '@angular/forms';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
-import { Observable, filter, map } from 'rxjs';
+import { Observable, filter, map, Subject } from 'rxjs';
 
 class PtrMenuComponent {
     menuItems = [];
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\r\n  <ul class=\"menu\">\r\n    <li class=\"menu-item\" *ngFor=\"let item of menuItems\" routerLinkActive=\"current_page_item\"\r\n      [routerLinkActiveOptions]=\"{exact: true}\">\r\n      <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\r\n    </li>\r\n  </ul>\r\n</nav>\r\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: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\r\n  <ul class=\"menu\">\r\n    <li class=\"menu-item\" *ngFor=\"let item of menuItems\" routerLinkActive=\"current_page_item\"\r\n      [routerLinkActiveOptions]=\"{exact: true}\">\r\n      <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\r\n    </li>\r\n  </ul>\r\n</nav>\r\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: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i2.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i2.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PtrMenuComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrMenuComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-menu', standalone: true, imports: [CommonModule, RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ptr-menu\">\r\n  <ul class=\"menu\">\r\n    <li class=\"menu-item\" *ngFor=\"let item of menuItems\" routerLinkActive=\"current_page_item\"\r\n      [routerLinkActiveOptions]=\"{exact: true}\">\r\n      <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\r\n    </li>\r\n  </ul>\r\n</nav>\r\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"] }]
         }], propDecorators: { menuItems: [{
                 type: Input
             }] } });
 
+class PtrButtonComponent {
+    get hostClasses() {
+        const hostClass = [];
+        if (this.style() === 'secondary') {
+            hostClass.push('is-style-outline');
+        }
+        if (this.style() === 'error') {
+            hostClass.push('is-style-error-button');
+        }
+        if (this.style() === 'icon') {
+            hostClass.push('is-style-icon-button');
+        }
+        if (this.smallSize()) {
+            hostClass.push('is-style-smaller-element');
+        }
+        return hostClass.join(' ');
+    }
+    style = signal('normal');
+    type = signal('button');
+    disabled = signal(false);
+    href = signal(null);
+    routerLink = signal(null);
+    additionalClasses = signal('');
+    smallSize = signal(false);
+    set buttonStyle(value) {
+        this.style.set(value);
+    }
+    set buttonType(value) {
+        this.type.set(value);
+    }
+    set isDisabled(value) {
+        this.disabled.set(value);
+    }
+    set hrefLink(value) {
+        this.href.set(value);
+    }
+    set routerLinkValue(value) {
+        this.routerLink.set(value);
+    }
+    set extraClasses(value) {
+        this.additionalClasses.set(value);
+    }
+    set isSmallSize(value) {
+        if (value) {
+            this.smallSize.set(true);
+        }
+    }
+    set isIconButton(value) {
+        if (value) {
+            this.style.set('icon');
+        }
+    }
+    clicked = new EventEmitter();
+    isLink = computed(() => !!this.href() || !!this.routerLink());
+    buttonClasses = computed(() => {
+        const classes = ['wp-block-button__link'];
+        if (this.style() !== 'normal') {
+            classes.push(`wp-block-button__link--${this.style()}`);
+        }
+        if (this.disabled() && this.isLink()) {
+            classes.push('disabled');
+        }
+        if (this.additionalClasses()) {
+            classes.push(this.additionalClasses());
+        }
+        return classes.join(' ');
+    });
+    onClick(event) {
+        if (this.disabled()) {
+            event.preventDefault();
+            return;
+        }
+        this.clicked.emit(event);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.1.4", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template #contentTpl>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n  (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrButtonComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-button', standalone: true, imports: [CommonModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contentTpl>\r\n  <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n  (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\">\r\n  <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}" }]
+        }], propDecorators: { hostClasses: [{
+                type: HostBinding,
+                args: ['class']
+            }], buttonStyle: [{
+                type: Input
+            }], buttonType: [{
+                type: Input
+            }], isDisabled: [{
+                type: Input
+            }], hrefLink: [{
+                type: Input
+            }], routerLinkValue: [{
+                type: Input
+            }], extraClasses: [{
+                type: Input
+            }], isSmallSize: [{
+                type: Input
+            }], isIconButton: [{
+                type: Input
+            }], clicked: [{
+                type: Output
+            }] } });
+
 class PtrFormComponent {
     config;
     loading = false;
@@ -78,15 +181,16 @@ class PtrFormComponent {
             this.flatOptions[fieldName] = options;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", 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  <div class=\"gform_validation_errors\" *ngIf=\"error\">\r\n    <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.title\" class=\"gform_heading\">\r\n    <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n  </div>\r\n\r\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <div class=\"gform_fields\">\r\n\r\n      <ng-container *ngFor=\"let field of config.fields\">\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\">\r\n\r\n          <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\r\n\r\n          <ng-container [ngSwitch]=\"field.type\">\r\n\r\n            <input *ngSwitchCase=\"'text'\" [formControlName]=\"field.name\" type=\"text\" [id]=\"field.name\" />\r\n\r\n            <textarea *ngSwitchCase=\"'textarea'\" [id]=\"field.name\" [formControlName]=\"field.name\"></textarea>\r\n\r\n            <input *ngSwitchCase=\"'date'\" [formControlName]=\"field.name\" type=\"date\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'number'\" [formControlName]=\"field.name\" type=\"number\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'email'\" [formControlName]=\"field.name\" type=\"email\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'password'\" [formControlName]=\"field.name\" type=\"password\" [id]=\"field.name\" />\r\n\r\n            <ng-container *ngSwitchCase=\"'select'\">\r\n              <select [formControlName]=\"field.name\" [id]=\"field.name\">\r\n                <!-- Render grouped options -->\r\n                <optgroup *ngFor=\"let group of groupedOptions[field.name]\" [label]=\"group.groupLabel\">\r\n                  <option *ngFor=\"let option of group.options\" [value]=\"option.value\">\r\n                    {{ option.label }}\r\n                  </option>\r\n                </optgroup>\r\n                <!-- Render flat options -->\r\n                <option *ngFor=\"let option of flatOptions[field.name]\" [value]=\"option.value\">\r\n                  {{ option.label }}\r\n                </option>\r\n              </select>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n\r\n          <div class=\"gfield_description validation_message gfield_validation_message\"\r\n            *ngIf=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['required']\">This field is required.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['email']\">Please enter a valid email\r\n              address.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['minlength']\">\r\n              Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['maxlength']\">\r\n              Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['pattern']\">\r\n              Please match the required format.\r\n            </ng-container>\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"gform_footer\">\r\n      <button type=\"submit\" [disabled]=\"loading || !formGroup.valid\">{{config.submitText}}</button>\r\n    </div>\r\n\r\n  </form>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n  <div class=\"gform_validation_errors\" *ngIf=\"error\">\r\n    <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.title\" class=\"gform_heading\">\r\n    <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n  </div>\r\n\r\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <div class=\"gform_fields\">\r\n\r\n      <ng-container *ngFor=\"let field of config.fields\">\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\">\r\n\r\n          <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\r\n\r\n          <ng-container [ngSwitch]=\"field.type\">\r\n\r\n            <input *ngSwitchCase=\"'text'\" [formControlName]=\"field.name\" type=\"text\" [id]=\"field.name\" />\r\n\r\n            <textarea *ngSwitchCase=\"'textarea'\" [id]=\"field.name\" [formControlName]=\"field.name\"></textarea>\r\n\r\n            <input *ngSwitchCase=\"'date'\" [formControlName]=\"field.name\" type=\"date\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'number'\" [formControlName]=\"field.name\" type=\"number\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'email'\" [formControlName]=\"field.name\" type=\"email\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'password'\" [formControlName]=\"field.name\" type=\"password\" [id]=\"field.name\" />\r\n\r\n            <ng-container *ngSwitchCase=\"'select'\">\r\n              <select [formControlName]=\"field.name\" [id]=\"field.name\">\r\n                <!-- Render grouped options -->\r\n                <optgroup *ngFor=\"let group of groupedOptions[field.name]\" [label]=\"group.groupLabel\">\r\n                  <option *ngFor=\"let option of group.options\" [value]=\"option.value\">\r\n                    {{ option.label }}\r\n                  </option>\r\n                </optgroup>\r\n                <!-- Render flat options -->\r\n                <option *ngFor=\"let option of flatOptions[field.name]\" [value]=\"option.value\">\r\n                  {{ option.label }}\r\n                </option>\r\n              </select>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n\r\n          <div class=\"gfield_description validation_message gfield_validation_message\"\r\n            *ngIf=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['required']\">This field is required.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['email']\">Please enter a valid email\r\n              address.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['minlength']\">\r\n              Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['maxlength']\">\r\n              Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['pattern']\">\r\n              Please match the required format.\r\n            </ng-container>\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"gform_footer\">\r\n      <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\">{{config.submitText}}</ptr-button>\r\n    </div>\r\n\r\n  </form>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PtrFormComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrFormComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ptr-form', standalone: true, imports: [
                         CommonModule,
-                        ReactiveFormsModule
-                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n  <div class=\"gform_validation_errors\" *ngIf=\"error\">\r\n    <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.title\" class=\"gform_heading\">\r\n    <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n  </div>\r\n\r\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <div class=\"gform_fields\">\r\n\r\n      <ng-container *ngFor=\"let field of config.fields\">\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\">\r\n\r\n          <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\r\n\r\n          <ng-container [ngSwitch]=\"field.type\">\r\n\r\n            <input *ngSwitchCase=\"'text'\" [formControlName]=\"field.name\" type=\"text\" [id]=\"field.name\" />\r\n\r\n            <textarea *ngSwitchCase=\"'textarea'\" [id]=\"field.name\" [formControlName]=\"field.name\"></textarea>\r\n\r\n            <input *ngSwitchCase=\"'date'\" [formControlName]=\"field.name\" type=\"date\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'number'\" [formControlName]=\"field.name\" type=\"number\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'email'\" [formControlName]=\"field.name\" type=\"email\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'password'\" [formControlName]=\"field.name\" type=\"password\" [id]=\"field.name\" />\r\n\r\n            <ng-container *ngSwitchCase=\"'select'\">\r\n              <select [formControlName]=\"field.name\" [id]=\"field.name\">\r\n                <!-- Render grouped options -->\r\n                <optgroup *ngFor=\"let group of groupedOptions[field.name]\" [label]=\"group.groupLabel\">\r\n                  <option *ngFor=\"let option of group.options\" [value]=\"option.value\">\r\n                    {{ option.label }}\r\n                  </option>\r\n                </optgroup>\r\n                <!-- Render flat options -->\r\n                <option *ngFor=\"let option of flatOptions[field.name]\" [value]=\"option.value\">\r\n                  {{ option.label }}\r\n                </option>\r\n              </select>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n\r\n          <div class=\"gfield_description validation_message gfield_validation_message\"\r\n            *ngIf=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['required']\">This field is required.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['email']\">Please enter a valid email\r\n              address.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['minlength']\">\r\n              Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['maxlength']\">\r\n              Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['pattern']\">\r\n              Please match the required format.\r\n            </ng-container>\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"gform_footer\">\r\n      <button type=\"submit\" [disabled]=\"loading || !formGroup.valid\">{{config.submitText}}</button>\r\n    </div>\r\n\r\n  </form>\r\n</div>\r\n" }]
+                        ReactiveFormsModule,
+                        PtrButtonComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n  <div class=\"gform_validation_errors\" *ngIf=\"error\">\r\n    <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n  </div>\r\n\r\n  <div *ngIf=\"config.title\" class=\"gform_heading\">\r\n    <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n  </div>\r\n\r\n  <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n    <div class=\"gform_fields\">\r\n\r\n      <ng-container *ngFor=\"let field of config.fields\">\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\">\r\n\r\n          <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ field.label }}</label>\r\n\r\n          <ng-container [ngSwitch]=\"field.type\">\r\n\r\n            <input *ngSwitchCase=\"'text'\" [formControlName]=\"field.name\" type=\"text\" [id]=\"field.name\" />\r\n\r\n            <textarea *ngSwitchCase=\"'textarea'\" [id]=\"field.name\" [formControlName]=\"field.name\"></textarea>\r\n\r\n            <input *ngSwitchCase=\"'date'\" [formControlName]=\"field.name\" type=\"date\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'number'\" [formControlName]=\"field.name\" type=\"number\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'email'\" [formControlName]=\"field.name\" type=\"email\" [id]=\"field.name\" />\r\n\r\n            <input *ngSwitchCase=\"'password'\" [formControlName]=\"field.name\" type=\"password\" [id]=\"field.name\" />\r\n\r\n            <ng-container *ngSwitchCase=\"'select'\">\r\n              <select [formControlName]=\"field.name\" [id]=\"field.name\">\r\n                <!-- Render grouped options -->\r\n                <optgroup *ngFor=\"let group of groupedOptions[field.name]\" [label]=\"group.groupLabel\">\r\n                  <option *ngFor=\"let option of group.options\" [value]=\"option.value\">\r\n                    {{ option.label }}\r\n                  </option>\r\n                </optgroup>\r\n                <!-- Render flat options -->\r\n                <option *ngFor=\"let option of flatOptions[field.name]\" [value]=\"option.value\">\r\n                  {{ option.label }}\r\n                </option>\r\n              </select>\r\n            </ng-container>\r\n\r\n          </ng-container>\r\n\r\n          <div class=\"gfield_description validation_message gfield_validation_message\"\r\n            *ngIf=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['required']\">This field is required.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['email']\">Please enter a valid email\r\n              address.</ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['minlength']\">\r\n              Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['maxlength']\">\r\n              Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n            </ng-container>\r\n            <ng-container *ngIf=\"formGroup.get(field.name)?.errors?.['pattern']\">\r\n              Please match the required format.\r\n            </ng-container>\r\n          </div>\r\n\r\n        </div>\r\n\r\n      </ng-container>\r\n    </div>\r\n\r\n    <div class=\"gform_footer\">\r\n      <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\">{{config.submitText}}</ptr-button>\r\n    </div>\r\n\r\n  </form>\r\n</div>\r\n" }]
         }], propDecorators: { config: [{
                 type: Input
             }], loading: [{
@@ -121,10 +225,10 @@ class PtrTitleComponent {
         }
         return route;
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.2", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", ngImport: i0, template: '<header class="entry-header is-layout-constrained my-3" *ngIf="!(hideTitle$ | async)"><h1 class="entry-title">{{ title$ | async }}</h1></header>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", ngImport: i0, template: '<header class="entry-header is-layout-constrained my-3" *ngIf="!(hideTitle$ | async)"><h1 class="entry-title">{{ title$ | async }}</h1></header>', isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImport: i0, type: PtrTitleComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTitleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'ptr-title',
@@ -135,14 +239,296 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.2", ngImpor
                 }]
         }] });
 
+class PtrLoadingSpinnerComponent {
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrLoadingSpinnerComponent, isStandalone: true, selector: "ptr-loading-spinner", ngImport: i0, template: `<div class="vdx-progress-spinner"></div>`, isInline: true, styles: [":host{display:inline-block;line-height:0}.vdx-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.vdx-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.vdx-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-loading-spinner', standalone: true, imports: [CommonModule], template: `<div class="vdx-progress-spinner"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;line-height:0}.vdx-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.vdx-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.vdx-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"] }]
+        }] });
+
+class PtrLoadingSpinnerDirective {
+    targetEl = inject(ElementRef);
+    viewContainerRef = inject(ViewContainerRef);
+    renderer = inject(Renderer2);
+    spinnerInstance;
+    overlay;
+    hostPosition = 'relative';
+    set ptrLoadingSpinner(loading) {
+        if (loading) {
+            this.addBlurEffect();
+            this.addOverlay();
+            this.addProgressSpinnerComponent();
+        }
+        else {
+            this.removeBlurEffect();
+            this.removeOverlay();
+            this.removeProgressSpinnerComponent();
+        }
+    }
+    ngOnDestroy() {
+        this.spinnerInstance?.destroy();
+        this.removeBlurEffect();
+    }
+    addProgressSpinnerComponent() {
+        this.spinnerInstance = this.viewContainerRef.createComponent(PtrLoadingSpinnerComponent);
+        this.overlay?.appendChild(this.spinnerInstance.location.nativeElement);
+    }
+    removeProgressSpinnerComponent() {
+        this.spinnerInstance?.destroy();
+    }
+    addOverlay() {
+        this.overlay = this.renderer.createElement('div');
+        this.renderer.setStyle(this.overlay, 'display', 'flex');
+        this.renderer.setStyle(this.overlay, 'justify-content', 'center');
+        this.renderer.setStyle(this.overlay, 'align-items', 'center');
+        this.renderer.setStyle(this.overlay, 'position', 'absolute');
+        this.renderer.setStyle(this.overlay, 'top', '0');
+        this.renderer.setStyle(this.overlay, 'left', '0');
+        this.renderer.setStyle(this.overlay, 'width', '100%');
+        this.renderer.setStyle(this.overlay, 'height', '100%');
+        this.renderer.appendChild(this.targetEl.nativeElement, this.overlay);
+    }
+    removeOverlay() {
+        if (this.overlay) {
+            this.renderer.removeChild(this.targetEl.nativeElement, this.overlay);
+            this.overlay = undefined;
+        }
+    }
+    addBlurEffect() {
+        const style = this.renderer.createElement('style');
+        const blurRule = `
+      .ptr-loading-blur > *:not(:last-child) {
+        filter: blur(2px);
+        transition: filter 0.3s ease;
+      }
+    `;
+        this.renderer.appendChild(style, this.renderer.createText(blurRule));
+        this.renderer.appendChild(document.head, style);
+        this.renderer.addClass(this.targetEl.nativeElement, 'ptr-loading-blur');
+    }
+    removeBlurEffect() {
+        this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.1.4", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[ptrLoadingSpinner]',
+                    standalone: true
+                }]
+        }], propDecorators: { hostPosition: [{
+                type: HostBinding,
+                args: ['style.position']
+            }], ptrLoadingSpinner: [{
+                type: Input,
+                args: [{ required: true }]
+            }] } });
+
+/**
+ * Optimized Async Loading Service using Angular Signals
+ * Supports global loading state and named loading areas with auto-cleanup
+ *
+ * To use as a non-singleton service, add to providers array in @Component decorator:
+ * @Component({
+ *   selector: 'app-example',
+ *   templateUrl: './example.component.html',
+ *   providers: [PtrLoadingService]
+ * })
+ *
+ * Usage:
+ * Set loading: this.loadingService.setLoading(true)
+ * - Set loading: this.loadingService.setLoading(true, 'areaName')
+ *
+ * - Get loading (template): {{ loadingService.isLoading()() }}
+ * - Get loading (template): {{ loadingService.isLoading('areaName')() }}
+ *
+ * - Get loading (component): this.loadingService.isLoading()()
+ * - Get loading (component): this.loadingService.isLoading('areaName')()
+ *
+ * - React to loading changes: effect(() => console.log('Loading:', this.loadingService.isLoading('areaName')()))
+ */
+class PtrLoadingService {
+    globalTaskCount = signal(0);
+    loadingAreas = new Map();
+    isLoading(area) {
+        if (!area) {
+            return computed(() => this.globalTaskCount() > 0);
+        }
+        return computed(() => {
+            const areaSignal = this.loadingAreas.get(area);
+            return areaSignal ? areaSignal() > 0 : false;
+        });
+    }
+    setLoading(value, area) {
+        if (!area) {
+            this.updateTaskCount(this.globalTaskCount, value);
+        }
+        else {
+            this.updateNamedAreaLoading(area, value);
+        }
+    }
+    resetLoading(area) {
+        if (!area) {
+            this.globalTaskCount.set(0);
+        }
+        else if (this.loadingAreas.has(area)) {
+            this.loadingAreas.get(area).set(0);
+            this.loadingAreas.delete(area);
+        }
+    }
+    updateNamedAreaLoading(area, increment) {
+        let areaSignal = this.loadingAreas.get(area);
+        if (!areaSignal && increment) {
+            areaSignal = signal(0);
+            this.loadingAreas.set(area, areaSignal);
+        }
+        if (areaSignal) {
+            areaSignal.update(count => {
+                const newCount = increment ? count + 1 : Math.max(0, count - 1);
+                if (newCount === 0) {
+                    this.loadingAreas.delete(area);
+                }
+                return newCount;
+            });
+        }
+    }
+    updateTaskCount(taskCount, increment) {
+        taskCount.update(count => increment ? count + 1 : Math.max(0, count - 1));
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrLoadingService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }] });
+
+class PtrDialogComponent {
+    dialogElement;
+    message = '';
+    buttonText = 'Confirm';
+    buttonStyle = 'normal';
+    closed = new EventEmitter();
+    ngAfterViewInit() {
+        this.dialogElement.nativeElement.showModal();
+    }
+    close() {
+        this.dialogElement.nativeElement.close();
+    }
+    confirm() {
+        this.closed.emit(true);
+        this.close();
+    }
+    onClose() {
+        this.closed.emit(null);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n  <div class=\"ptr-modal__content\">\r\n    <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">\r\n      &times;\r\n    </button>\r\n    <p>{{ message }}</p>\r\n    <div class=\"ptr-modal__actions\">\r\n      <ptr-button [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\" [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\r\n    </div>\r\n  </div>\r\n</dialog>", styles: [".ptr-modal{border-radius:var(--wp--custom--default-border-radius);border:none;padding:1rem}.ptr-modal__content{padding:1rem;position:relative}.ptr-modal__close{position:absolute;right:0;top:0;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1rem}.ptr-modal__actions{margin-top:20px;text-align:right}dialog.ptr-modal{opacity:0;transition:all .7s allow-discrete}dialog.ptr-modal[open]{opacity:1}dialog.ptr-modal::backdrop{background-color:#0000;transition:all .7s allow-discrete;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}dialog.ptr-modal[open]::backdrop{background-color:#0006}@starting-style{dialog[open]{opacity:0}}@starting-style{dialog[open]::backdrop{background-color:#0000}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton"], outputs: ["clicked"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-dialog', standalone: true, imports: [
+                        CommonModule,
+                        PtrButtonComponent
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n  <div class=\"ptr-modal__content\">\r\n    <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">\r\n      &times;\r\n    </button>\r\n    <p>{{ message }}</p>\r\n    <div class=\"ptr-modal__actions\">\r\n      <ptr-button [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\" [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\r\n    </div>\r\n  </div>\r\n</dialog>", styles: [".ptr-modal{border-radius:var(--wp--custom--default-border-radius);border:none;padding:1rem}.ptr-modal__content{padding:1rem;position:relative}.ptr-modal__close{position:absolute;right:0;top:0;background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1rem}.ptr-modal__actions{margin-top:20px;text-align:right}dialog.ptr-modal{opacity:0;transition:all .7s allow-discrete}dialog.ptr-modal[open]{opacity:1}dialog.ptr-modal::backdrop{background-color:#0000;transition:all .7s allow-discrete;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}dialog.ptr-modal[open]::backdrop{background-color:#0006}@starting-style{dialog[open]{opacity:0}}@starting-style{dialog[open]::backdrop{background-color:#0000}}\n"] }]
+        }], propDecorators: { dialogElement: [{
+                type: ViewChild,
+                args: ['dialogElement']
+            }], message: [{
+                type: Input
+            }], buttonText: [{
+                type: Input
+            }], buttonStyle: [{
+                type: Input
+            }], closed: [{
+                type: Output
+            }] } });
+
+class PtrDialogService {
+    appRef;
+    injector;
+    dialogComponentRef = null;
+    constructor(appRef, injector) {
+        this.appRef = appRef;
+        this.injector = injector;
+    }
+    open(options) {
+        const dialogResult$ = new Subject();
+        this.dialogComponentRef = createComponent(PtrDialogComponent, {
+            environmentInjector: this.injector,
+        });
+        const { instance } = this.dialogComponentRef;
+        instance.message = options.message;
+        instance.buttonText = options.buttonText || 'Confirm';
+        instance.buttonStyle = options.buttonStyle || 'normal';
+        instance.closed.subscribe((result) => {
+            this.removeDialog();
+            dialogResult$.next(result ?? false);
+            dialogResult$.complete();
+        });
+        document.body.appendChild(this.dialogComponentRef.location.nativeElement);
+        this.appRef.attachView(this.dialogComponentRef.hostView);
+        return dialogResult$.asObservable();
+    }
+    removeDialog() {
+        if (this.dialogComponentRef) {
+            this.appRef.detachView(this.dialogComponentRef.hostView);
+            this.dialogComponentRef.destroy();
+            this.dialogComponentRef = null;
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogService, deps: [{ token: i0.ApplicationRef }, { token: i0.EnvironmentInjector }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrDialogService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root'
+                }]
+        }], ctorParameters: () => [{ type: i0.ApplicationRef }, { type: i0.EnvironmentInjector }] });
+
+class PtrTooltipComponent {
+    content = '';
+    tooltipDialog;
+    tooltipTimer;
+    showTooltip() {
+        clearTimeout(this.tooltipTimer);
+        this.tooltipTimer = setTimeout(() => {
+            this.tooltipDialog.nativeElement.show();
+        }, 200); // Small delay to prevent flickering on quick mouse movements
+    }
+    hideTooltip() {
+        clearTimeout(this.tooltipTimer);
+        this.tooltipTimer = setTimeout(() => {
+            this.tooltipDialog.nativeElement.close();
+        }, 200); // Small delay to allow moving mouse to tooltip
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.1.4", type: PtrTooltipComponent, isStandalone: true, selector: "ptr-tooltip", inputs: { content: "content" }, viewQueries: [{ propertyName: "tooltipDialog", first: true, predicate: ["tooltipDialog"], descendants: true }], ngImport: i0, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n  <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n  <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.1.4", ngImport: i0, type: PtrTooltipComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'ptr-tooltip', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n  <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n  <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"] }]
+        }], propDecorators: { content: [{
+                type: Input
+            }], tooltipDialog: [{
+                type: ViewChild,
+                args: ['tooltipDialog']
+            }] } });
+
 /*
  * Public API Surface of ngx-components
  */
-// export { PtrTitleStrategy } from './lib/ptr-title/ptr-title-strategy';
 
 /**
  * Generated bundle index. Do not edit.
  */
 
-export { PtrFormComponent, PtrMenuComponent, PtrTitleComponent };
+export { PtrButtonComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrTitleComponent, PtrTooltipComponent };
 //# sourceMappingURL=patter-ngx-components.mjs.map