@patter/ngx-components 21.0.7 → 21.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -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: "21.
|
|
16
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: "21.
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", 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: [{
|
|
@@ -39,13 +39,13 @@ class PtrButtonComponent {
|
|
|
39
39
|
}
|
|
40
40
|
return hostClass.join(' ');
|
|
41
41
|
}
|
|
42
|
-
style = signal('normal', ...(ngDevMode ? [{ debugName: "style" }] : []));
|
|
43
|
-
type = signal('button', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
44
|
-
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
45
|
-
href = signal(null, ...(ngDevMode ? [{ debugName: "href" }] : []));
|
|
46
|
-
routerLink = signal(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : []));
|
|
47
|
-
additionalClasses = signal('', ...(ngDevMode ? [{ debugName: "additionalClasses" }] : []));
|
|
48
|
-
smallSize = signal(false, ...(ngDevMode ? [{ debugName: "smallSize" }] : []));
|
|
42
|
+
style = signal('normal', ...(ngDevMode ? [{ debugName: "style" }] : /* istanbul ignore next */ []));
|
|
43
|
+
type = signal('button', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
|
|
44
|
+
disabled = signal(false, ...(ngDevMode ? [{ debugName: "disabled" }] : /* istanbul ignore next */ []));
|
|
45
|
+
href = signal(null, ...(ngDevMode ? [{ debugName: "href" }] : /* istanbul ignore next */ []));
|
|
46
|
+
routerLink = signal(null, ...(ngDevMode ? [{ debugName: "routerLink" }] : /* istanbul ignore next */ []));
|
|
47
|
+
additionalClasses = signal('', ...(ngDevMode ? [{ debugName: "additionalClasses" }] : /* istanbul ignore next */ []));
|
|
48
|
+
smallSize = signal(false, ...(ngDevMode ? [{ debugName: "smallSize" }] : /* istanbul ignore next */ []));
|
|
49
49
|
set buttonStyle(value) {
|
|
50
50
|
this.style.set(value);
|
|
51
51
|
}
|
|
@@ -76,7 +76,7 @@ class PtrButtonComponent {
|
|
|
76
76
|
}
|
|
77
77
|
ariaLabel = '';
|
|
78
78
|
clicked = new EventEmitter();
|
|
79
|
-
isLink = computed(() => !!this.href() || !!this.routerLink(), ...(ngDevMode ? [{ debugName: "isLink" }] : []));
|
|
79
|
+
isLink = computed(() => !!this.href() || !!this.routerLink(), ...(ngDevMode ? [{ debugName: "isLink" }] : /* istanbul ignore next */ []));
|
|
80
80
|
buttonClasses = computed(() => {
|
|
81
81
|
const classes = ['wp-block-button__link'];
|
|
82
82
|
if (this.style() !== 'normal') {
|
|
@@ -89,7 +89,7 @@ class PtrButtonComponent {
|
|
|
89
89
|
classes.push(this.additionalClasses());
|
|
90
90
|
}
|
|
91
91
|
return classes.join(' ');
|
|
92
|
-
}, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
|
|
92
|
+
}, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : /* istanbul ignore next */ []));
|
|
93
93
|
onClick(event) {
|
|
94
94
|
if (this.disabled()) {
|
|
95
95
|
event.preventDefault();
|
|
@@ -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: "21.
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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>\n <ng-content></ng-content>\n</ng-template>\n\n@if (isLink()) {\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\n (click)=\"onClick($event)\" [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</a>\n} @else {\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</button>\n}\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: "21.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", 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>\n <ng-content></ng-content>\n</ng-template>\n\n@if (isLink()) {\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\n (click)=\"onClick($event)\" [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</a>\n} @else {\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</button>\n}\n" }]
|
|
106
106
|
}], propDecorators: { hostClasses: [{
|
|
@@ -139,11 +139,11 @@ class PtrDialogListComponent {
|
|
|
139
139
|
dialogClosed = new EventEmitter();
|
|
140
140
|
searchTermChanged = new EventEmitter();
|
|
141
141
|
dialog;
|
|
142
|
-
_options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
|
|
143
|
-
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
144
|
-
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
|
|
145
|
-
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
|
|
146
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
142
|
+
_options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
|
|
143
|
+
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
144
|
+
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
145
|
+
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
|
|
146
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
147
147
|
componentId = Math.random().toString(36).substring(2);
|
|
148
148
|
listId = `${this.componentId}-list`;
|
|
149
149
|
filteredOptions = computed(() => {
|
|
@@ -157,7 +157,7 @@ class PtrDialogListComponent {
|
|
|
157
157
|
return item.label.toLowerCase().includes(term) ? [item] : [];
|
|
158
158
|
}
|
|
159
159
|
});
|
|
160
|
-
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
160
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
161
161
|
openDialog() {
|
|
162
162
|
this.dialog.nativeElement.show();
|
|
163
163
|
this.adjustDialogPosition();
|
|
@@ -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: "21.
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
295
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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'\">\n\n @if(dialogTitle) {\n <p class=\"dialog-title\">{{dialogTitle}}</p>\n }\n\n @if (showSearch) {\n <div>\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\n class=\"search-input\">\n </div>\n }\n\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\">\n @for (item of filteredOptions(); track item.label) {\n @if (item.type === 'option') {\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"item.value === value()\"\n [class.selected]=\"item.value === value()\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\n (click)=\"selectOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n {{ item.label }}\n </li>\n } @else {\n <li role=\"group\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </li>\n @for (option of item.options!; track option.value) {\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"option.value === value()\"\n [class.selected]=\"option.value === value()\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\n (click)=\"selectOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n {{ option.label }}\n </li>\n }\n }\n }\n </ul>\n\n</dialog>\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: "21.
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrDialogListComponent, decorators: [{
|
|
299
299
|
type: Component,
|
|
300
300
|
args: [{ selector: 'ptr-dialog-list', imports: [
|
|
301
301
|
FormsModule
|
|
@@ -330,7 +330,7 @@ class PtrSelectComponent {
|
|
|
330
330
|
selectionChange = new EventEmitter();
|
|
331
331
|
selectButton;
|
|
332
332
|
dialogList;
|
|
333
|
-
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
333
|
+
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
334
334
|
displayValue = computed(() => {
|
|
335
335
|
const currentValue = this.value();
|
|
336
336
|
if (currentValue === null)
|
|
@@ -338,10 +338,10 @@ class PtrSelectComponent {
|
|
|
338
338
|
const allOptions = this.flattenOptions(this.options);
|
|
339
339
|
const selectedOption = allOptions?.find(option => option.value === currentValue);
|
|
340
340
|
return selectedOption ? selectedOption.label : null;
|
|
341
|
-
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
341
|
+
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : /* istanbul ignore next */ []));
|
|
342
342
|
effectivePlaceholder = computed(() => {
|
|
343
343
|
return this.placeholder?.trim() || 'Select an option';
|
|
344
|
-
}, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : []));
|
|
344
|
+
}, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
|
|
345
345
|
componentId = Math.random().toString(36).substring(2);
|
|
346
346
|
labelId = `${this.componentId}-label`;
|
|
347
347
|
inputId = `${this.componentId}-input`;
|
|
@@ -397,8 +397,8 @@ class PtrSelectComponent {
|
|
|
397
397
|
}
|
|
398
398
|
});
|
|
399
399
|
}
|
|
400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n<div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\n <span [attr.id]=\"labelId\" class=\"select-display\">\n @if (displayValue(); as dValue) { {{dValue}} } @else {\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\n }\n </span>\n <span class=\"select-arrow\">\u23F7</span>\n </button>\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n\n <ptr-dialog-list #dialogList [options]=\"options\" (selectionChange)=\"onOptionSelected($event)\"\n [showSearch]=\"showSearch\" />\n\n</div>\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: "21.
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrSelectComponent, decorators: [{
|
|
410
410
|
type: Component,
|
|
411
411
|
args: [{ selector: 'ptr-select', imports: [
|
|
412
412
|
FormsModule,
|
|
@@ -458,11 +458,11 @@ class PtrMultiDialogListComponent {
|
|
|
458
458
|
dialogClosed = new EventEmitter();
|
|
459
459
|
searchTermChanged = new EventEmitter();
|
|
460
460
|
dialog;
|
|
461
|
-
_options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : []));
|
|
462
|
-
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
463
|
-
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : []));
|
|
464
|
-
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : []));
|
|
465
|
-
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : []));
|
|
461
|
+
_options = signal([], ...(ngDevMode ? [{ debugName: "_options" }] : /* istanbul ignore next */ []));
|
|
462
|
+
selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : /* istanbul ignore next */ []));
|
|
463
|
+
searchTerm = signal('', ...(ngDevMode ? [{ debugName: "searchTerm" }] : /* istanbul ignore next */ []));
|
|
464
|
+
highlightedIndex = signal(-1, ...(ngDevMode ? [{ debugName: "highlightedIndex" }] : /* istanbul ignore next */ []));
|
|
465
|
+
isOpen = signal(false, ...(ngDevMode ? [{ debugName: "isOpen" }] : /* istanbul ignore next */ []));
|
|
466
466
|
componentId = Math.random().toString(36).substring(2);
|
|
467
467
|
listId = `${this.componentId}-list`;
|
|
468
468
|
filteredOptions = computed(() => {
|
|
@@ -476,7 +476,7 @@ class PtrMultiDialogListComponent {
|
|
|
476
476
|
return item.label.toLowerCase().includes(term) ? [item] : [];
|
|
477
477
|
}
|
|
478
478
|
});
|
|
479
|
-
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
479
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : /* istanbul ignore next */ []));
|
|
480
480
|
// Get all available option values (for select all functionality)
|
|
481
481
|
allFilteredOptionValues = computed(() => {
|
|
482
482
|
return this.filteredOptions().flatMap(item => {
|
|
@@ -487,7 +487,7 @@ class PtrMultiDialogListComponent {
|
|
|
487
487
|
return [item.value];
|
|
488
488
|
}
|
|
489
489
|
});
|
|
490
|
-
}, ...(ngDevMode ? [{ debugName: "allFilteredOptionValues" }] : []));
|
|
490
|
+
}, ...(ngDevMode ? [{ debugName: "allFilteredOptionValues" }] : /* istanbul ignore next */ []));
|
|
491
491
|
// Check if all filtered options are selected
|
|
492
492
|
allSelectedState = computed(() => {
|
|
493
493
|
const allValues = this.allFilteredOptionValues();
|
|
@@ -500,7 +500,7 @@ class PtrMultiDialogListComponent {
|
|
|
500
500
|
if (selectedCount === allValues.length)
|
|
501
501
|
return true;
|
|
502
502
|
return 'indeterminate'; // Some but not all selected
|
|
503
|
-
}, ...(ngDevMode ? [{ debugName: "allSelectedState" }] : []));
|
|
503
|
+
}, ...(ngDevMode ? [{ debugName: "allSelectedState" }] : /* istanbul ignore next */ []));
|
|
504
504
|
// Determine if select all should be shown
|
|
505
505
|
shouldShowSelectAll = computed(() => {
|
|
506
506
|
const allValues = this.allFilteredOptionValues();
|
|
@@ -514,7 +514,7 @@ class PtrMultiDialogListComponent {
|
|
|
514
514
|
if (this.maxSelections && allValues.length > this.maxSelections)
|
|
515
515
|
return false;
|
|
516
516
|
return true;
|
|
517
|
-
}, ...(ngDevMode ? [{ debugName: "shouldShowSelectAll" }] : []));
|
|
517
|
+
}, ...(ngDevMode ? [{ debugName: "shouldShowSelectAll" }] : /* istanbul ignore next */ []));
|
|
518
518
|
openDialog() {
|
|
519
519
|
this.selectedItems.set([...this.selectedValues]);
|
|
520
520
|
this.dialog.nativeElement.show();
|
|
@@ -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: "21.
|
|
720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrMultiDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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'\">\n\n @if(dialogTitle) {\n <p class=\"dialog-title\">{{dialogTitle}}</p>\n }\n\n @if (showSearch) {\n <div>\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\n class=\"search-input\">\n </div>\n }\n<form>\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\" [attr.aria-multiselectable]=\"true\">\n @if (shouldShowSelectAll()) {\n <li role=\"option\" class=\"select-all-option\" [attr.aria-selected]=\"allSelectedState() === true\"\n [class.selected]=\"allSelectedState() === true\" [class.indeterminate]=\"allSelectedState() === 'indeterminate'\"\n (click)=\"toggleSelectAll()\" (keydown)=\"onSelectAllKeyDown($event)\" [attr.tabindex]=\"0\">\n <input type=\"checkbox\" [checked]=\"allSelectedState() === true\"\n [indeterminate]=\"allSelectedState() === 'indeterminate'\" readonly>\n Select All\n </li>\n }\n @for (item of filteredOptions(); track item.label) {\n @if (item.type === 'option') {\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"isOptionSelected(item.value!)\"\n [class.selected]=\"isOptionSelected(item.value!)\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\"\n (click)=\"toggleOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(item.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\" readonly>\n {{ item.label }}\n </li>\n } @else {\n <li role=\"group\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </li>\n @for (option of item.options!; track option.value) {\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"isOptionSelected(option.value!)\"\n [class.selected]=\"isOptionSelected(option.value!)\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\"\n (click)=\"toggleOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\" readonly>\n {{ option.label }}\n </li>\n }\n }\n }\n </ul>\n</form>\n</dialog>\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],[formArray],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]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
721
721
|
}
|
|
722
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrMultiDialogListComponent, decorators: [{
|
|
723
723
|
type: Component,
|
|
724
724
|
args: [{ selector: 'ptr-multi-dialog-list', imports: [
|
|
725
725
|
FormsModule
|
|
@@ -762,14 +762,14 @@ class PtrMultiSelectComponent {
|
|
|
762
762
|
selectionChange = new EventEmitter();
|
|
763
763
|
selectButton;
|
|
764
764
|
dialogList;
|
|
765
|
-
value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
765
|
+
value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
|
|
766
766
|
selectedOptions = computed(() => {
|
|
767
767
|
const currentValues = this.value();
|
|
768
768
|
if (currentValues.length === 0)
|
|
769
769
|
return [];
|
|
770
770
|
const allOptions = this.flattenOptions(this.options);
|
|
771
771
|
return allOptions.filter(option => currentValues.includes(option.value));
|
|
772
|
-
}, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
|
|
772
|
+
}, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : /* istanbul ignore next */ []));
|
|
773
773
|
displayText = computed(() => {
|
|
774
774
|
const selected = this.selectedOptions();
|
|
775
775
|
if (selected.length === 0)
|
|
@@ -777,10 +777,10 @@ class PtrMultiSelectComponent {
|
|
|
777
777
|
if (selected.length === 1)
|
|
778
778
|
return selected[0].label;
|
|
779
779
|
return `${selected.length} options selected`;
|
|
780
|
-
}, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
|
|
780
|
+
}, ...(ngDevMode ? [{ debugName: "displayText" }] : /* istanbul ignore next */ []));
|
|
781
781
|
effectivePlaceholder = computed(() => {
|
|
782
782
|
return this.placeholder?.trim() || 'Select options';
|
|
783
|
-
}, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : []));
|
|
783
|
+
}, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : /* istanbul ignore next */ []));
|
|
784
784
|
componentId = Math.random().toString(36).substring(2);
|
|
785
785
|
labelId = `${this.componentId}-label`;
|
|
786
786
|
inputId = `${this.componentId}-input`;
|
|
@@ -841,8 +841,8 @@ class PtrMultiSelectComponent {
|
|
|
841
841
|
}
|
|
842
842
|
});
|
|
843
843
|
}
|
|
844
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
845
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n<div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n <button #selectButton type=\"button\" class=\"multi-select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\n <span [attr.id]=\"labelId\" class=\"select-display\">\n @if (selectedOptions().length === 0) {\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\n } @else {\n <div class=\"selected-items\">\n @for (option of selectedOptions(); track option.value) {\n <span class=\"selected-chip\">\n {{option.label}}\n <button type=\"button\" class=\"remove-chip\" (click)=\"removeSelectedItem(option.value); $event.stopPropagation()\"\n [attr.aria-label]=\"'Remove ' + option.label\">\n \u00D7\n </button>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"select-arrow\">\u23F7</span>\n </button>\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n\n <ptr-multi-dialog-list #dialogList [options]=\"options\" [selectedValues]=\"value()\" [maxSelections]=\"maxSelections\"\n [showSelectAll]=\"showSelectAll\" (selectionChange)=\"onSelectionChanged($event)\" [showSearch]=\"showSearch\" />\n\n</div>\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}.multi-select-button .selected-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.multi-select-button .selected-chip{padding:2px 6px;border-radius:calc(var(--wp--custom--default-border-radius) / 3);font-size:.8em;gap:4px}.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}.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{width:16px;height:16px;font-size:12px}.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: "21.
|
|
853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrMultiSelectComponent, decorators: [{
|
|
854
854
|
type: Component,
|
|
855
855
|
args: [{ selector: 'ptr-multi-select', imports: [
|
|
856
856
|
FormsModule,
|
|
@@ -910,8 +910,8 @@ class PtrInputComponent {
|
|
|
910
910
|
searchTerms = new Subject();
|
|
911
911
|
hasSelectedOption = false;
|
|
912
912
|
inputId = `${this.componentId}-input`;
|
|
913
|
-
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
914
|
-
searchResultOptions = signal([], ...(ngDevMode ? [{ debugName: "searchResultOptions" }] : []));
|
|
913
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
|
|
914
|
+
searchResultOptions = signal([], ...(ngDevMode ? [{ debugName: "searchResultOptions" }] : /* istanbul ignore next */ []));
|
|
915
915
|
onChange = () => { };
|
|
916
916
|
onTouched = () => { };
|
|
917
917
|
onDocumentClick(event) {
|
|
@@ -975,8 +975,8 @@ class PtrInputComponent {
|
|
|
975
975
|
this.input.nativeElement.disabled = isDisabled;
|
|
976
976
|
}
|
|
977
977
|
}
|
|
978
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
978
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
979
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: [
|
|
980
980
|
{
|
|
981
981
|
provide: NG_VALUE_ACCESSOR,
|
|
982
982
|
useExisting: forwardRef(() => PtrInputComponent),
|
|
@@ -984,7 +984,7 @@ class PtrInputComponent {
|
|
|
984
984
|
}
|
|
985
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\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n <div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n @switch (type) {\n @case ('textarea') {\n <textarea #input [id]=\"inputId\" [attr.autocomplete]=\"autocomplete || null\" [attr.placeholder]=\"placeholder || null\"\n [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [rows]=\"3\"></textarea>\n }\n @default {\n <input #input [id]=\"inputId\" [type]=\"type\" [attr.autocomplete]=\"autocomplete || null\"\n [attr.placeholder]=\"placeholder || null\" [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n }\n }\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n\n @if (searchFn) {\n <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\n [dialogTitle]=\"dialogHelpText\" />\n }\n\n</div>\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 });
|
|
986
986
|
}
|
|
987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrInputComponent, decorators: [{
|
|
988
988
|
type: Component,
|
|
989
989
|
args: [{ selector: 'ptr-input', imports: [
|
|
990
990
|
FormsModule,
|
|
@@ -1041,9 +1041,9 @@ class PtrChipInputComponent {
|
|
|
1041
1041
|
dialogList;
|
|
1042
1042
|
componentId = Math.random().toString(36).substring(2);
|
|
1043
1043
|
inputId = `${this.componentId}-input`;
|
|
1044
|
-
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
1045
|
-
chipItems = signal([], ...(ngDevMode ? [{ debugName: "chipItems" }] : []));
|
|
1046
|
-
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
1044
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : /* istanbul ignore next */ []));
|
|
1045
|
+
chipItems = signal([], ...(ngDevMode ? [{ debugName: "chipItems" }] : /* istanbul ignore next */ []));
|
|
1046
|
+
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
|
|
1047
1047
|
tempInputControl = new FormControl('');
|
|
1048
1048
|
onChange = () => { };
|
|
1049
1049
|
onTouched = () => { };
|
|
@@ -1174,8 +1174,8 @@ class PtrChipInputComponent {
|
|
|
1174
1174
|
this.tempInputControl.enable();
|
|
1175
1175
|
}
|
|
1176
1176
|
}
|
|
1177
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1177
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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: [
|
|
1179
1179
|
{
|
|
1180
1180
|
provide: NG_VALUE_ACCESSOR,
|
|
1181
1181
|
useExisting: forwardRef(() => PtrChipInputComponent),
|
|
@@ -1183,7 +1183,7 @@ class PtrChipInputComponent {
|
|
|
1183
1183
|
}
|
|
1184
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\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n<div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n <div class=\"ptr-chip-container\">\n <div class=\"ptr-chip-list\">\n @for (chip of chipItems(); track chip; let i = $index) {\n <div class=\"ptr-chip\">\n <span class=\"ptr-chip-text\">{{ chip }}</span>\n <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\n aria-label=\"Remove item\">\u00D7</button>\n </div>\n }\n </div>\n\n <div class=\"ptr-chip-input-wrapper\">\n <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\n (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\" (focus)=\"openDialog()\"\n (input)=\"dialogList?.updateSearchTerm(inputValue())\"\n [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\n <ptr-button (clicked)=\"addChip()\"\n [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\n </div>\n </div>\n\n <ptr-dialog-list #dialogList [options]=\"suggestions\" [showSearch]=\"false\" [dialogTitle]=\"label\"\n (selectionChange)=\"onSuggestionSelected($event)\" />\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n</div>\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}.ptr-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.ptr-chip{padding:4px 12px;line-height:20px;margin-right:4px}.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;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.ptr-chip-remove:hover{background-color:#0000001a}.ptr-chip-remove:disabled{opacity:.5;cursor:not-allowed}.ptr-chip-remove{font-size:var(--wp--preset--font-size--medium, 16px);width:18px;height:18px;margin-left:6px}.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 });
|
|
1185
1185
|
}
|
|
1186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrChipInputComponent, decorators: [{
|
|
1187
1187
|
type: Component,
|
|
1188
1188
|
args: [{ selector: 'ptr-chip-input', imports: [
|
|
1189
1189
|
FormsModule,
|
|
@@ -1304,10 +1304,10 @@ class PtrFormComponent {
|
|
|
1304
1304
|
}
|
|
1305
1305
|
return false;
|
|
1306
1306
|
}
|
|
1307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\n\n @if (error) {\n <div class=\"gform_validation_errors\">\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\n </div>\n }\n\n @if (config.title) {\n <div class=\"gform_heading\">\n <h2 class=\"gform_title\">{{ config.title }}</h2>\n </div>\n }\n\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n\n <div class=\"gform_fields\">\n\n @for (field of config.fields; track field.name) {\n @if(isFieldVisible(field)) {\n\n <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\n [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\n\n @switch (field.type) {\n @case ('select') {\n <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\n }\n @case ('multi-select') {\n <ptr-multi-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\"\n [maxSelections]=\"field.maxSelections\" />\n }\n @case ('chips') {\n <ptr-chip-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\"\n [placeholder]=\"getFieldPlaceholder(field)\" [description]=\"field.description\"\n [maxItems]=\"field.maxItems\" [labelPosition]=\"config.labelPosition\" />\n }\n @default {\n <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\n [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\n [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\n }\n }\n\n @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\n <div class=\"gfield_description validation_message gfield_validation_message\">\n @if (formGroup.get(field.name)?.errors?.['required']) {\n This field is required.\n }\n @if (formGroup.get(field.name)?.errors?.['email']) {\n Please enter a valid email address.\n }\n @if (formGroup.get(field.name)?.errors?.['minlength']) {\n Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\n }\n @if (formGroup.get(field.name)?.errors?.['maxlength']) {\n Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\n }\n @if (formGroup.get(field.name)?.errors?.['pattern']) {\n Please match the required format.\n }\n </div>\n }\n @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid &&\n formGroup.get(field.name)?.touched) {\n @for (error of formGroup.errors | keyvalue; track error) {\n @if (field.validationMessages[error.key]) {\n <div class=\"gfield_description validation_message gfield_validation_message\">\n {{ field.validationMessages[error.key] }}\n </div>\n }\n }\n }\n </div>\n }\n }\n </div>\n\n @if(config.submitText){\n <div class=\"gform_footer\">\n <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\"\n [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{config.submitText}}</ptr-button>\n </div>\n }\n\n </form>\n</div>\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],[formArray],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 });
|
|
1309
1309
|
}
|
|
1310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrFormComponent, decorators: [{
|
|
1311
1311
|
type: Component,
|
|
1312
1312
|
args: [{ selector: 'ptr-form', imports: [
|
|
1313
1313
|
CommonModule,
|
|
@@ -1364,10 +1364,10 @@ class PtrTitleComponent {
|
|
|
1364
1364
|
}
|
|
1365
1365
|
return route;
|
|
1366
1366
|
}
|
|
1367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", inputs: { styleClass: "styleClass", wrapperStyleClass: "wrapperStyleClass", screenReaderOnly: "screenReaderOnly" }, ngImport: i0, template: "@if ((hideTitle$|async) === false) {\n @if(wrapperStyleClass) {\n <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\n </header>\n } @else {\n <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1369
1369
|
}
|
|
1370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTitleComponent, decorators: [{
|
|
1371
1371
|
type: Component,
|
|
1372
1372
|
args: [{ selector: 'ptr-title', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((hideTitle$|async) === false) {\n @if(wrapperStyleClass) {\n <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\n </header>\n } @else {\n <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\n }\n}\n" }]
|
|
1373
1373
|
}], propDecorators: { styleClass: [{
|
|
@@ -1379,10 +1379,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1379
1379
|
}] } });
|
|
1380
1380
|
|
|
1381
1381
|
class PtrLoadingSpinnerComponent {
|
|
1382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", 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 });
|
|
1384
1384
|
}
|
|
1385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
|
|
1386
1386
|
type: Component,
|
|
1387
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"] }]
|
|
1388
1388
|
}] });
|
|
@@ -1451,10 +1451,10 @@ class PtrLoadingSpinnerDirective {
|
|
|
1451
1451
|
removeBlurEffect() {
|
|
1452
1452
|
this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
|
|
1453
1453
|
}
|
|
1454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1455
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.
|
|
1454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1455
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.6", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
|
|
1456
1456
|
}
|
|
1457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
|
|
1458
1458
|
type: Directive,
|
|
1459
1459
|
args: [{
|
|
1460
1460
|
selector: '[ptrLoadingSpinner]'
|
|
@@ -1493,7 +1493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1493
1493
|
* - React to loading changes: effect(() => console.log('Loading:', this.loadingService.isLoading('areaName')()))
|
|
1494
1494
|
*/
|
|
1495
1495
|
class PtrLoadingService {
|
|
1496
|
-
globalTaskCount = signal(0, ...(ngDevMode ? [{ debugName: "globalTaskCount" }] : []));
|
|
1496
|
+
globalTaskCount = signal(0, ...(ngDevMode ? [{ debugName: "globalTaskCount" }] : /* istanbul ignore next */ []));
|
|
1497
1497
|
loadingAreas = new Map();
|
|
1498
1498
|
isLoading(area) {
|
|
1499
1499
|
if (!area) {
|
|
@@ -1551,10 +1551,10 @@ class PtrLoadingService {
|
|
|
1551
1551
|
updateTaskCount(taskCount, increment) {
|
|
1552
1552
|
taskCount.update(count => increment ? count + 1 : Math.max(0, count - 1));
|
|
1553
1553
|
}
|
|
1554
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1555
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1555
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
|
|
1556
1556
|
}
|
|
1557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrLoadingService, decorators: [{
|
|
1558
1558
|
type: Injectable,
|
|
1559
1559
|
args: [{
|
|
1560
1560
|
providedIn: 'root'
|
|
@@ -1587,10 +1587,10 @@ class PtrDialogComponent {
|
|
|
1587
1587
|
setData(data) {
|
|
1588
1588
|
this.data = data;
|
|
1589
1589
|
}
|
|
1590
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1590
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 });
|
|
1592
1592
|
}
|
|
1593
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrDialogComponent, decorators: [{
|
|
1594
1594
|
type: Component,
|
|
1595
1595
|
args: [{ selector: 'ptr-dialog', imports: [
|
|
1596
1596
|
PtrButtonComponent,
|
|
@@ -1659,10 +1659,10 @@ class PtrDialogService {
|
|
|
1659
1659
|
this.dialogComponentRef = null;
|
|
1660
1660
|
}
|
|
1661
1661
|
}
|
|
1662
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1663
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1663
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
|
|
1664
1664
|
}
|
|
1665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrDialogService, decorators: [{
|
|
1666
1666
|
type: Injectable,
|
|
1667
1667
|
args: [{
|
|
1668
1668
|
providedIn: 'root'
|
|
@@ -1686,10 +1686,10 @@ class PtrTooltipComponent {
|
|
|
1686
1686
|
this.tooltipDialog.nativeElement.close();
|
|
1687
1687
|
}, 200); // Small delay to allow moving mouse to tooltip
|
|
1688
1688
|
}
|
|
1689
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.
|
|
1689
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.6", 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\">\n <ng-content></ng-content>\n</span>\n<dialog #tooltipDialog class=\"ptr-tooltip\">\n <div class=\"ptr-tooltip__content\">{{ content }}</div>\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 });
|
|
1691
1691
|
}
|
|
1692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTooltipComponent, decorators: [{
|
|
1693
1693
|
type: Component,
|
|
1694
1694
|
args: [{ selector: 'ptr-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\n <ng-content></ng-content>\n</span>\n<dialog #tooltipDialog class=\"ptr-tooltip\">\n <div class=\"ptr-tooltip__content\">{{ content }}</div>\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"] }]
|
|
1695
1695
|
}], propDecorators: { content: [{
|
|
@@ -1707,7 +1707,7 @@ class PtrBreadcrumbsComponent {
|
|
|
1707
1707
|
breadcrumbs = computed(() => {
|
|
1708
1708
|
this.routeEvents();
|
|
1709
1709
|
return this.createBreadcrumbs(this.activatedRoute.root);
|
|
1710
|
-
}, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
1710
|
+
}, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : /* istanbul ignore next */ []));
|
|
1711
1711
|
createBreadcrumbs(route, routeUrl = '', breadcrumbs = []) {
|
|
1712
1712
|
const routeChildren = route.children;
|
|
1713
1713
|
if (routeChildren.length === 0) {
|
|
@@ -1743,10 +1743,10 @@ class PtrBreadcrumbsComponent {
|
|
|
1743
1743
|
}
|
|
1744
1744
|
return breadcrumbReturnInfo;
|
|
1745
1745
|
}
|
|
1746
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1747
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 });
|
|
1748
1748
|
}
|
|
1749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
|
|
1750
1750
|
type: Component,
|
|
1751
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"] }]
|
|
1752
1752
|
}], propDecorators: { showFirstSeparator: [{
|
|
@@ -1756,11 +1756,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1756
1756
|
class PtrTabComponent {
|
|
1757
1757
|
label;
|
|
1758
1758
|
link;
|
|
1759
|
-
active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
1760
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1759
|
+
active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : /* istanbul ignore next */ []));
|
|
1760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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 });
|
|
1762
1762
|
}
|
|
1763
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTabComponent, decorators: [{
|
|
1764
1764
|
type: Component,
|
|
1765
1765
|
args: [{
|
|
1766
1766
|
selector: 'ptr-tab',
|
|
@@ -1778,10 +1778,10 @@ class PtrTabsComponent {
|
|
|
1778
1778
|
buttons;
|
|
1779
1779
|
router = inject(Router);
|
|
1780
1780
|
destroyRef = inject(DestroyRef);
|
|
1781
|
-
tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
1782
|
-
activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : []));
|
|
1783
|
-
useLinks = signal(false, ...(ngDevMode ? [{ debugName: "useLinks" }] : []));
|
|
1784
|
-
sliderPosition = signal({ transform: 'translateX(0)', width: '0' }, ...(ngDevMode ? [{ debugName: "sliderPosition" }] : []));
|
|
1781
|
+
tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : /* istanbul ignore next */ []));
|
|
1782
|
+
activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : /* istanbul ignore next */ []));
|
|
1783
|
+
useLinks = signal(false, ...(ngDevMode ? [{ debugName: "useLinks" }] : /* istanbul ignore next */ []));
|
|
1784
|
+
sliderPosition = signal({ transform: 'translateX(0)', width: '0' }, ...(ngDevMode ? [{ debugName: "sliderPosition" }] : /* istanbul ignore next */ []));
|
|
1785
1785
|
constructor() {
|
|
1786
1786
|
effect(() => {
|
|
1787
1787
|
const activeTab = this.tabs().find(tab => tab.active());
|
|
@@ -1823,10 +1823,10 @@ class PtrTabsComponent {
|
|
|
1823
1823
|
});
|
|
1824
1824
|
}
|
|
1825
1825
|
}
|
|
1826
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1827
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", 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\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\n [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\n }\n\n <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\n</div>\n\n@if (!useLinks()) {\n<div class=\"tab-content\">\n <ng-content></ng-content>\n</div>\n}\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 });
|
|
1828
1828
|
}
|
|
1829
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrTabsComponent, decorators: [{
|
|
1830
1830
|
type: Component,
|
|
1831
1831
|
args: [{ selector: 'ptr-tabs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs-container\" role=\"tablist\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\n [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\n }\n\n <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\n</div>\n\n@if (!useLinks()) {\n<div class=\"tab-content\">\n <ng-content></ng-content>\n</div>\n}\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"] }]
|
|
1832
1832
|
}], ctorParameters: () => [], propDecorators: { tabComponents: [{
|
|
@@ -1842,7 +1842,7 @@ class PtrToasterService {
|
|
|
1842
1842
|
injector = inject(Injector);
|
|
1843
1843
|
environmentInjector = inject(EnvironmentInjector);
|
|
1844
1844
|
appRef = inject(ApplicationRef);
|
|
1845
|
-
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
|
|
1845
|
+
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : /* istanbul ignore next */ []));
|
|
1846
1846
|
counter = 0;
|
|
1847
1847
|
toasterComponentRef = null;
|
|
1848
1848
|
constructor() {
|
|
@@ -1875,10 +1875,10 @@ class PtrToasterService {
|
|
|
1875
1875
|
remove(id) {
|
|
1876
1876
|
this.toasts.update(toasts => toasts.filter(t => t.id !== id));
|
|
1877
1877
|
}
|
|
1878
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1879
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.
|
|
1878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1879
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrToasterService, providedIn: 'root' });
|
|
1880
1880
|
}
|
|
1881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrToasterService, decorators: [{
|
|
1882
1882
|
type: Injectable,
|
|
1883
1883
|
args: [{
|
|
1884
1884
|
providedIn: 'root'
|
|
@@ -1887,10 +1887,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1887
1887
|
|
|
1888
1888
|
class PtrToasterComponent {
|
|
1889
1889
|
toasterService = inject(PtrToasterService);
|
|
1890
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.
|
|
1891
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.
|
|
1890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: PtrToasterComponent, isStandalone: true, selector: "ptr-toaster", ngImport: i0, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\n @for (toast of toasterService.getToasts()(); track toast.id) {\n <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\n <span>{{toast.message}}</span>\n <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>×</span></button>\n </div>\n }\n</div>\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 });
|
|
1892
1892
|
}
|
|
1893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: PtrToasterComponent, decorators: [{
|
|
1894
1894
|
type: Component,
|
|
1895
1895
|
args: [{ selector: 'ptr-toaster', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\n @for (toast of toasterService.getToasts()(); track toast.id) {\n <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\n <span>{{toast.message}}</span>\n <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>×</span></button>\n </div>\n }\n</div>\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"] }]
|
|
1896
1896
|
}] });
|