@patter/ngx-components 20.0.6 → 20.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, signal, EventEmitter, computed, Output, HostBinding, ViewChild, forwardRef, HostListener,
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, signal, EventEmitter, computed, Output, HostBinding, ViewChild, forwardRef, HostListener, inject, DestroyRef, ViewEncapsulation, ChangeDetectorRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, ApplicationRef, EnvironmentInjector, createComponent, effect, ViewChildren, ContentChildren, Injector } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/router';
|
|
4
4
|
import { RouterModule, RouterLink, Router, ActivatedRoute, TitleStrategy, NavigationEnd } from '@angular/router';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -12,10 +12,10 @@ import { take } from 'rxjs/operators';
|
|
|
12
12
|
|
|
13
13
|
class PtrMenuComponent {
|
|
14
14
|
menuItems = [];
|
|
15
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
16
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\n <ul class=\"menu\">\n @for (item of menuItems; track item.label) {\n <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n </li>\n }\n </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17
17
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMenuComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
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"] }]
|
|
21
21
|
}], propDecorators: { menuItems: [{
|
|
@@ -97,10 +97,10 @@ class PtrButtonComponent {
|
|
|
97
97
|
}
|
|
98
98
|
this.clicked.emit(event);
|
|
99
99
|
}
|
|
100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton", 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 });
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrButtonComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
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" }]
|
|
106
106
|
}], propDecorators: { hostClasses: [{
|
|
@@ -292,10 +292,10 @@ class PtrDialogListComponent {
|
|
|
292
292
|
this.dialog.nativeElement.style.top = '';
|
|
293
293
|
this.dialog.nativeElement.style.bottom = '';
|
|
294
294
|
}
|
|
295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
295
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrDialogListComponent, isStandalone: true, selector: "ptr-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\r\n\r\n @if(dialogTitle) {\r\n <p class=\"dialog-title\">{{dialogTitle}}</p>\r\n }\r\n\r\n @if (showSearch) {\r\n <div>\r\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\r\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\r\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\r\n class=\"search-input\">\r\n </div>\r\n }\r\n\r\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\">\r\n @for (item of filteredOptions(); track item.label) {\r\n @if (item.type === 'option') {\r\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"item.value === value()\"\r\n [class.selected]=\"item.value === value()\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n (click)=\"selectOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n {{ item.label }}\r\n </li>\r\n } @else {\r\n <li role=\"group\" [attr.aria-label]=\"item.label\">\r\n {{ item.label }}\r\n </li>\r\n @for (option of item.options!; track option.value) {\r\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"option.value === value()\"\r\n [class.selected]=\"option.value === value()\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n (click)=\"selectOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n {{ option.label }}\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n\r\n</dialog>\r\n", styles: [".ptr-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:350px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit)}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
297
297
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogListComponent, decorators: [{
|
|
299
299
|
type: Component,
|
|
300
300
|
args: [{ selector: 'ptr-dialog-list', imports: [
|
|
301
301
|
FormsModule
|
|
@@ -397,8 +397,8 @@ class PtrSelectComponent {
|
|
|
397
397
|
}
|
|
398
398
|
});
|
|
399
399
|
}
|
|
400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: [
|
|
402
402
|
{
|
|
403
403
|
provide: NG_VALUE_ACCESSOR,
|
|
404
404
|
useExisting: forwardRef(() => PtrSelectComponent),
|
|
@@ -406,7 +406,7 @@ class PtrSelectComponent {
|
|
|
406
406
|
}
|
|
407
407
|
], 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\" class=\"select-display\">\r\n @if (displayValue(); as dValue) { {{dValue}} } @else {\r\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\r\n }\r\n </span>\r\n <span class=\"select-arrow\">\u23F7</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);display:flex;align-items:center;justify-content:space-between}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.select-button .select-display{flex:1;min-width:0}.select-button .placeholder{color:#999}.select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.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 });
|
|
408
408
|
}
|
|
409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrSelectComponent, decorators: [{
|
|
410
410
|
type: Component,
|
|
411
411
|
args: [{ selector: 'ptr-select', imports: [
|
|
412
412
|
FormsModule,
|
|
@@ -716,10 +716,10 @@ class PtrMultiDialogListComponent {
|
|
|
716
716
|
this.dialog.nativeElement.style.top = '';
|
|
717
717
|
this.dialog.nativeElement.style.bottom = '';
|
|
718
718
|
}
|
|
719
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrMultiDialogListComponent, isStandalone: true, selector: "ptr-multi-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle", selectedValues: "selectedValues", maxSelections: "maxSelections", showSelectAll: "showSelectAll" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-multi-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<form>\r\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\" [attr.aria-multiselectable]=\"true\">\r\n @if (shouldShowSelectAll()) {\r\n <li role=\"option\" class=\"select-all-option\" [attr.aria-selected]=\"allSelectedState() === true\"\r\n [class.selected]=\"allSelectedState() === true\" [class.indeterminate]=\"allSelectedState() === 'indeterminate'\"\r\n (click)=\"toggleSelectAll()\" (keydown)=\"onSelectAllKeyDown($event)\" [attr.tabindex]=\"0\">\r\n <input type=\"checkbox\" [checked]=\"allSelectedState() === true\"\r\n [indeterminate]=\"allSelectedState() === 'indeterminate'\" readonly>\r\n Select All\r\n </li>\r\n }\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]=\"isOptionSelected(item.value!)\"\r\n [class.selected]=\"isOptionSelected(item.value!)\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\"\r\n (click)=\"toggleOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n <input type=\"checkbox\" [checked]=\"isOptionSelected(item.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\" readonly>\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]=\"isOptionSelected(option.value!)\"\r\n [class.selected]=\"isOptionSelected(option.value!)\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\"\r\n (click)=\"toggleOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\" readonly>\r\n {{ option.label }}\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n</form>\r\n</dialog>\r\n", styles: [".ptr-multi-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:400px;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-multi-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);display:flex;align-items:center;gap:8px}li[role=option] input[type=checkbox]{margin:0;pointer-events:none}li[role=option].disabled{opacity:.5;cursor:not-allowed}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)}.select-all-option{font-weight:500;border-bottom:1px solid var(--wp--custom--color--border)}.select-all-option.indeterminate{font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
721
721
|
}
|
|
722
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiDialogListComponent, decorators: [{
|
|
723
723
|
type: Component,
|
|
724
724
|
args: [{ selector: 'ptr-multi-dialog-list', imports: [
|
|
725
725
|
FormsModule
|
|
@@ -841,8 +841,8 @@ class PtrMultiSelectComponent {
|
|
|
841
841
|
}
|
|
842
842
|
});
|
|
843
843
|
}
|
|
844
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
845
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrMultiSelectComponent, isStandalone: true, selector: "ptr-multi-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description", labelPosition: "labelPosition", maxSelections: "maxSelections", showSelectAll: "showSelectAll" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
846
846
|
{
|
|
847
847
|
provide: NG_VALUE_ACCESSOR,
|
|
848
848
|
useExisting: forwardRef(() => PtrMultiSelectComponent),
|
|
@@ -850,7 +850,7 @@ class PtrMultiSelectComponent {
|
|
|
850
850
|
}
|
|
851
851
|
], 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=\"multi-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\" class=\"select-display\">\r\n @if (selectedOptions().length === 0) {\r\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\r\n } @else {\r\n <div class=\"selected-items\">\r\n @for (option of selectedOptions(); track option.value) {\r\n <span class=\"selected-chip\">\r\n {{option.label}}\r\n <button type=\"button\" class=\"remove-chip\" (click)=\"removeSelectedItem(option.value); $event.stopPropagation()\"\r\n [attr.aria-label]=\"'Remove ' + option.label\">\r\n \u00D7\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n }\r\n </span>\r\n <span class=\"select-arrow\">\u23F7</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-multi-dialog-list #dialogList [options]=\"options\" [selectedValues]=\"value()\" [maxSelections]=\"maxSelections\"\r\n [showSelectAll]=\"showSelectAll\" (selectionChange)=\"onSelectionChanged($event)\" [showSearch]=\"showSearch\" />\r\n\r\n</div>\r\n", styles: [".multi-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);display:flex;align-items:center;justify-content:space-between;min-height:42px}.multi-select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.multi-select-button .select-display{flex:1;min-width:0}.multi-select-button .placeholder{color:#999}.multi-select-button .selected-items{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.multi-select-button .selected-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease;padding:2px 6px;border-radius:calc(var(--wp--custom--default-border-radius) / 3);font-size:.8em;gap:4px}.multi-select-button .selected-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.multi-select-button .selected-chip .remove-chip{border:none;background:none;color:var(--wp--custom--color--primary-text, white);cursor:pointer;padding:0;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;width:16px;height:16px;font-size:12px}.multi-select-button .selected-chip .remove-chip:hover{background-color:#0000001a}.multi-select-button .selected-chip .remove-chip:disabled{opacity:.5;cursor:not-allowed}.multi-select-button .selected-chip .remove-chip:hover{background-color:#fff3}.multi-select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.multi-select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.gfield--input-wrapper--label-inline .multi-select-button{border-color:transparent;outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrMultiDialogListComponent, selector: "ptr-multi-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle", "selectedValues", "maxSelections", "showSelectAll"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
852
852
|
}
|
|
853
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiSelectComponent, decorators: [{
|
|
854
854
|
type: Component,
|
|
855
855
|
args: [{ selector: 'ptr-multi-select', imports: [
|
|
856
856
|
FormsModule,
|
|
@@ -904,6 +904,7 @@ class PtrInputComponent {
|
|
|
904
904
|
labelPosition = 'top';
|
|
905
905
|
input;
|
|
906
906
|
dialogList;
|
|
907
|
+
destroyRef = inject(DestroyRef);
|
|
907
908
|
componentId = Math.random().toString(36).substring(2);
|
|
908
909
|
minChars = 3;
|
|
909
910
|
searchTerms = new Subject();
|
|
@@ -925,7 +926,7 @@ class PtrInputComponent {
|
|
|
925
926
|
}
|
|
926
927
|
setupSearch() {
|
|
927
928
|
if (this.searchFn) {
|
|
928
|
-
this.searchTerms.pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => term.length >= this.minChars ? this.searchFn(term) : of([]))).subscribe(results => {
|
|
929
|
+
this.searchTerms.pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => term.length >= this.minChars ? this.searchFn(term) : of([])), takeUntilDestroyed(this.destroyRef)).subscribe(results => {
|
|
929
930
|
this.searchResultOptions.set(results);
|
|
930
931
|
if (results.length > 0 && this.dialogList) {
|
|
931
932
|
this.dialogList.openDialogSilent();
|
|
@@ -974,8 +975,8 @@ class PtrInputComponent {
|
|
|
974
975
|
this.input.nativeElement.disabled = isDisabled;
|
|
975
976
|
}
|
|
976
977
|
}
|
|
977
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
978
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
978
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
979
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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: [
|
|
979
980
|
{
|
|
980
981
|
provide: NG_VALUE_ACCESSOR,
|
|
981
982
|
useExisting: forwardRef(() => PtrInputComponent),
|
|
@@ -983,7 +984,7 @@ class PtrInputComponent {
|
|
|
983
984
|
}
|
|
984
985
|
], 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 });
|
|
985
986
|
}
|
|
986
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrInputComponent, decorators: [{
|
|
987
988
|
type: Component,
|
|
988
989
|
args: [{ selector: 'ptr-input', imports: [
|
|
989
990
|
FormsModule,
|
|
@@ -1173,8 +1174,8 @@ class PtrChipInputComponent {
|
|
|
1173
1174
|
this.tempInputControl.enable();
|
|
1174
1175
|
}
|
|
1175
1176
|
}
|
|
1176
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1177
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1177
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrChipInputComponent, isStandalone: true, selector: "ptr-chip-input", inputs: { label: "label", placeholder: "placeholder", description: "description", labelPosition: "labelPosition", maxItems: "maxItems", suggestions: "suggestions", autoReopenAfterSelect: "autoReopenAfterSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1178
1179
|
{
|
|
1179
1180
|
provide: NG_VALUE_ACCESSOR,
|
|
1180
1181
|
useExisting: forwardRef(() => PtrChipInputComponent),
|
|
@@ -1182,7 +1183,7 @@ class PtrChipInputComponent {
|
|
|
1182
1183
|
}
|
|
1183
1184
|
], viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["chipInput"], 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 <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()\" (focus)=\"openDialog()\"\r\n (input)=\"dialogList?.updateSearchTerm(inputValue())\"\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 <ptr-dialog-list #dialogList [options]=\"suggestions\" [showSearch]=\"false\" [dialogTitle]=\"label\"\r\n (selectionChange)=\"onSuggestionSelected($event)\" />\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, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease;padding:4px 12px;line-height:20px;margin-right:4px}.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, white);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;font-size:var(--wp--preset--font-size--medium, 16px);width:18px;height:18px;margin:0 0 0 6px}.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%}.ptr-chip-input-wrapper button{text-wrap-mode:nowrap}\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"] }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1184
1185
|
}
|
|
1185
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrChipInputComponent, decorators: [{
|
|
1186
1187
|
type: Component,
|
|
1187
1188
|
args: [{ selector: 'ptr-chip-input', imports: [
|
|
1188
1189
|
FormsModule,
|
|
@@ -1303,10 +1304,10 @@ class PtrFormComponent {
|
|
|
1303
1304
|
}
|
|
1304
1305
|
return false;
|
|
1305
1306
|
}
|
|
1306
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1307
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n @if (error) {\r\n <div class=\"gform_validation_errors\">\r\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n </div>\r\n }\r\n\r\n @if (config.title) {\r\n <div class=\"gform_heading\">\r\n <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <div class=\"gform_fields\">\r\n\r\n @for (field of config.fields; track field.name) {\r\n @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 ('multi-select') {\r\n <ptr-multi-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\"\r\n [maxSelections]=\"field.maxSelections\" />\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: "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: PtrMultiSelectComponent, selector: "ptr-multi-select", inputs: ["options", "showSearch", "placeholder", "label", "description", "labelPosition", "maxSelections", "showSelectAll"], 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", "suggestions", "autoReopenAfterSelect"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1308
1309
|
}
|
|
1309
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrFormComponent, decorators: [{
|
|
1310
1311
|
type: Component,
|
|
1311
1312
|
args: [{ selector: 'ptr-form', imports: [
|
|
1312
1313
|
CommonModule,
|
|
@@ -1363,10 +1364,10 @@ class PtrTitleComponent {
|
|
|
1363
1364
|
}
|
|
1364
1365
|
return route;
|
|
1365
1366
|
}
|
|
1366
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1367
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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 });
|
|
1368
1369
|
}
|
|
1369
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTitleComponent, decorators: [{
|
|
1370
1371
|
type: Component,
|
|
1371
1372
|
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" }]
|
|
1372
1373
|
}], propDecorators: { styleClass: [{
|
|
@@ -1378,10 +1379,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1378
1379
|
}] } });
|
|
1379
1380
|
|
|
1380
1381
|
class PtrLoadingSpinnerComponent {
|
|
1381
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1382
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", 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 });
|
|
1383
1384
|
}
|
|
1384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
|
|
1385
1386
|
type: Component,
|
|
1386
1387
|
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"] }]
|
|
1387
1388
|
}] });
|
|
@@ -1450,10 +1451,10 @@ class PtrLoadingSpinnerDirective {
|
|
|
1450
1451
|
removeBlurEffect() {
|
|
1451
1452
|
this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
|
|
1452
1453
|
}
|
|
1453
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1454
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1455
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
|
|
1455
1456
|
}
|
|
1456
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
|
|
1457
1458
|
type: Directive,
|
|
1458
1459
|
args: [{
|
|
1459
1460
|
selector: '[ptrLoadingSpinner]'
|
|
@@ -1550,10 +1551,10 @@ class PtrLoadingService {
|
|
|
1550
1551
|
updateTaskCount(taskCount, increment) {
|
|
1551
1552
|
taskCount.update(count => increment ? count + 1 : Math.max(0, count - 1));
|
|
1552
1553
|
}
|
|
1553
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1554
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1555
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
|
|
1555
1556
|
}
|
|
1556
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingService, decorators: [{
|
|
1557
1558
|
type: Injectable,
|
|
1558
1559
|
args: [{
|
|
1559
1560
|
providedIn: 'root'
|
|
@@ -1586,10 +1587,10 @@ class PtrDialogComponent {
|
|
|
1586
1587
|
setData(data) {
|
|
1587
1588
|
this.data = data;
|
|
1588
1589
|
}
|
|
1589
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1590
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1590
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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\">×</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 });
|
|
1591
1592
|
}
|
|
1592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogComponent, decorators: [{
|
|
1593
1594
|
type: Component,
|
|
1594
1595
|
args: [{ selector: 'ptr-dialog', imports: [
|
|
1595
1596
|
PtrButtonComponent,
|
|
@@ -1658,10 +1659,10 @@ class PtrDialogService {
|
|
|
1658
1659
|
this.dialogComponentRef = null;
|
|
1659
1660
|
}
|
|
1660
1661
|
}
|
|
1661
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1662
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1663
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
|
|
1663
1664
|
}
|
|
1664
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogService, decorators: [{
|
|
1665
1666
|
type: Injectable,
|
|
1666
1667
|
args: [{
|
|
1667
1668
|
providedIn: 'root'
|
|
@@ -1685,10 +1686,10 @@ class PtrTooltipComponent {
|
|
|
1685
1686
|
this.tooltipDialog.nativeElement.close();
|
|
1686
1687
|
}, 200); // Small delay to allow moving mouse to tooltip
|
|
1687
1688
|
}
|
|
1688
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1689
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1689
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PtrTooltipComponent, isStandalone: true, selector: "ptr-tooltip", inputs: { content: "content" }, viewQueries: [{ propertyName: "tooltipDialog", first: true, predicate: ["tooltipDialog"], descendants: true }], ngImport: i0, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1690
1691
|
}
|
|
1691
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTooltipComponent, decorators: [{
|
|
1692
1693
|
type: Component,
|
|
1693
1694
|
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"] }]
|
|
1694
1695
|
}], propDecorators: { content: [{
|
|
@@ -1742,10 +1743,10 @@ class PtrBreadcrumbsComponent {
|
|
|
1742
1743
|
}
|
|
1743
1744
|
return breadcrumbReturnInfo;
|
|
1744
1745
|
}
|
|
1745
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1746
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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 });
|
|
1747
1748
|
}
|
|
1748
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
|
|
1749
1750
|
type: Component,
|
|
1750
1751
|
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"] }]
|
|
1751
1752
|
}], propDecorators: { showFirstSeparator: [{
|
|
@@ -1756,10 +1757,10 @@ class PtrTabComponent {
|
|
|
1756
1757
|
label;
|
|
1757
1758
|
link;
|
|
1758
1759
|
active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
1759
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1760
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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 });
|
|
1761
1762
|
}
|
|
1762
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabComponent, decorators: [{
|
|
1763
1764
|
type: Component,
|
|
1764
1765
|
args: [{
|
|
1765
1766
|
selector: 'ptr-tab',
|
|
@@ -1822,10 +1823,10 @@ class PtrTabsComponent {
|
|
|
1822
1823
|
});
|
|
1823
1824
|
}
|
|
1824
1825
|
}
|
|
1825
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1826
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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 });
|
|
1827
1828
|
}
|
|
1828
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabsComponent, decorators: [{
|
|
1829
1830
|
type: Component,
|
|
1830
1831
|
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"] }]
|
|
1831
1832
|
}], ctorParameters: () => [], propDecorators: { tabComponents: [{
|
|
@@ -1874,10 +1875,10 @@ class PtrToasterService {
|
|
|
1874
1875
|
remove(id) {
|
|
1875
1876
|
this.toasts.update(toasts => toasts.filter(t => t.id !== id));
|
|
1876
1877
|
}
|
|
1877
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1878
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1879
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterService, providedIn: 'root' });
|
|
1879
1880
|
}
|
|
1880
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterService, decorators: [{
|
|
1881
1882
|
type: Injectable,
|
|
1882
1883
|
args: [{
|
|
1883
1884
|
providedIn: 'root'
|
|
@@ -1886,10 +1887,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
1886
1887
|
|
|
1887
1888
|
class PtrToasterComponent {
|
|
1888
1889
|
toasterService = inject(PtrToasterService);
|
|
1889
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1890
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", 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>×</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 });
|
|
1891
1892
|
}
|
|
1892
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterComponent, decorators: [{
|
|
1893
1894
|
type: Component,
|
|
1894
1895
|
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>×</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"] }]
|
|
1895
1896
|
}] });
|