@patter/ngx-components 20.0.5 → 20.0.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Input, ChangeDetectionStrategy, Component, signal, EventEmitter, computed, Output, HostBinding, ViewChild, forwardRef, HostListener, inject,
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, signal, EventEmitter, computed, Output, HostBinding, ViewChild, forwardRef, HostListener, inject, DestroyRef, ViewEncapsulation, ChangeDetectorRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, ApplicationRef, EnvironmentInjector, createComponent, effect, ViewChildren, ContentChildren, Injector } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/router';
|
|
4
4
|
import { RouterModule, RouterLink, Router, ActivatedRoute, TitleStrategy, NavigationEnd } from '@angular/router';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -12,10 +12,10 @@ import { take } from 'rxjs/operators';
|
|
|
12
12
|
|
|
13
13
|
class PtrMenuComponent {
|
|
14
14
|
menuItems = [];
|
|
15
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
16
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\n <ul class=\"menu\">\n @for (item of menuItems; track item.label) {\n <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n </li>\n }\n </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17
17
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMenuComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
args: [{ selector: 'ptr-menu', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ptr-menu\">\n <ul class=\"menu\">\n @for (item of menuItems; track item.label) {\n <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n </li>\n }\n </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"] }]
|
|
21
21
|
}], propDecorators: { menuItems: [{
|
|
@@ -39,13 +39,13 @@ class PtrButtonComponent {
|
|
|
39
39
|
}
|
|
40
40
|
return hostClass.join(' ');
|
|
41
41
|
}
|
|
42
|
-
style = signal('normal');
|
|
43
|
-
type = signal('button');
|
|
44
|
-
disabled = signal(false);
|
|
45
|
-
href = signal(null);
|
|
46
|
-
routerLink = signal(null);
|
|
47
|
-
additionalClasses = signal('');
|
|
48
|
-
smallSize = signal(false);
|
|
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" }] : []));
|
|
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());
|
|
79
|
+
isLink = computed(() => !!this.href() || !!this.routerLink(), ...(ngDevMode ? [{ debugName: "isLink" }] : []));
|
|
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
|
-
});
|
|
92
|
+
}, ...(ngDevMode ? [{ debugName: "buttonClasses" }] : []));
|
|
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: "20.0
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template #contentTpl>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n (click)=\"onClick($event)\" [attr.aria-label]=\"ariaLabel ?? null\">\r\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\"\r\n [attr.aria-label]=\"ariaLabel ?? null\">\r\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrButtonComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
args: [{ selector: 'ptr-button', imports: [CommonModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contentTpl>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n (click)=\"onClick($event)\" [attr.aria-label]=\"ariaLabel ?? null\">\r\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\"\r\n [attr.aria-label]=\"ariaLabel ?? null\">\r\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}\r\n" }]
|
|
106
106
|
}], propDecorators: { hostClasses: [{
|
|
@@ -139,11 +139,11 @@ class PtrDialogListComponent {
|
|
|
139
139
|
dialogClosed = new EventEmitter();
|
|
140
140
|
searchTermChanged = new EventEmitter();
|
|
141
141
|
dialog;
|
|
142
|
-
_options = signal([]);
|
|
143
|
-
value = signal(null);
|
|
144
|
-
searchTerm = signal('');
|
|
145
|
-
highlightedIndex = signal(-1);
|
|
146
|
-
isOpen = signal(false);
|
|
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" }] : []));
|
|
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
|
-
});
|
|
160
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
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: "20.0
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
295
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrDialogListComponent, isStandalone: true, selector: "ptr-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\r\n\r\n @if(dialogTitle) {\r\n <p class=\"dialog-title\">{{dialogTitle}}</p>\r\n }\r\n\r\n @if (showSearch) {\r\n <div>\r\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\r\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\r\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\r\n class=\"search-input\">\r\n </div>\r\n }\r\n\r\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\">\r\n @for (item of filteredOptions(); track item.label) {\r\n @if (item.type === 'option') {\r\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"item.value === value()\"\r\n [class.selected]=\"item.value === value()\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n (click)=\"selectOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n {{ item.label }}\r\n </li>\r\n } @else {\r\n <li role=\"group\" [attr.aria-label]=\"item.label\">\r\n {{ item.label }}\r\n </li>\r\n @for (option of item.options!; track option.value) {\r\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"option.value === value()\"\r\n [class.selected]=\"option.value === value()\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n (click)=\"selectOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n {{ option.label }}\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n\r\n</dialog>\r\n", styles: [".ptr-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:350px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit)}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
297
297
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogListComponent, decorators: [{
|
|
299
299
|
type: Component,
|
|
300
300
|
args: [{ selector: 'ptr-dialog-list', imports: [
|
|
301
301
|
FormsModule
|
|
@@ -330,7 +330,7 @@ class PtrSelectComponent {
|
|
|
330
330
|
selectionChange = new EventEmitter();
|
|
331
331
|
selectButton;
|
|
332
332
|
dialogList;
|
|
333
|
-
value = signal(null);
|
|
333
|
+
value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
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
|
-
});
|
|
341
|
+
}, ...(ngDevMode ? [{ debugName: "displayValue" }] : []));
|
|
342
342
|
effectivePlaceholder = computed(() => {
|
|
343
343
|
return this.placeholder?.trim() || 'Select an option';
|
|
344
|
-
});
|
|
344
|
+
}, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : []));
|
|
345
345
|
componentId = Math.random().toString(36).substring(2);
|
|
346
346
|
labelId = `${this.componentId}-label`;
|
|
347
347
|
inputId = `${this.componentId}-input`;
|
|
@@ -397,16 +397,16 @@ class PtrSelectComponent {
|
|
|
397
397
|
}
|
|
398
398
|
});
|
|
399
399
|
}
|
|
400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrSelectComponent, isStandalone: true, selector: "ptr-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description", labelPosition: "labelPosition" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
402
402
|
{
|
|
403
403
|
provide: NG_VALUE_ACCESSOR,
|
|
404
404
|
useExisting: forwardRef(() => PtrSelectComponent),
|
|
405
405
|
multi: true
|
|
406
406
|
}
|
|
407
|
-
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n <span [attr.id]=\"labelId\"
|
|
407
|
+
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n <span [attr.id]=\"labelId\" class=\"select-display\">\r\n @if (displayValue(); as dValue) { {{dValue}} } @else {\r\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\r\n }\r\n </span>\r\n <span class=\"select-arrow\">\u23F7</span>\r\n </button>\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n\r\n <ptr-dialog-list #dialogList [options]=\"options\" (selectionChange)=\"onOptionSelected($event)\"\r\n [showSearch]=\"showSearch\" />\r\n\r\n</div>\r\n", styles: [".select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);display:flex;align-items:center;justify-content:space-between}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.select-button .select-display{flex:1;min-width:0}.select-button .placeholder{color:#999}.select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.gfield--input-wrapper--label-inline .select-button{border-color:transparent;outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
408
408
|
}
|
|
409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrSelectComponent, decorators: [{
|
|
410
410
|
type: Component,
|
|
411
411
|
args: [{ selector: 'ptr-select', imports: [
|
|
412
412
|
FormsModule,
|
|
@@ -418,7 +418,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
418
418
|
useExisting: forwardRef(() => PtrSelectComponent),
|
|
419
419
|
multi: true
|
|
420
420
|
}
|
|
421
|
-
], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n <span [attr.id]=\"labelId\"
|
|
421
|
+
], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n <span [attr.id]=\"labelId\" class=\"select-display\">\r\n @if (displayValue(); as dValue) { {{dValue}} } @else {\r\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\r\n }\r\n </span>\r\n <span class=\"select-arrow\">\u23F7</span>\r\n </button>\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n\r\n <ptr-dialog-list #dialogList [options]=\"options\" (selectionChange)=\"onOptionSelected($event)\"\r\n [showSearch]=\"showSearch\" />\r\n\r\n</div>\r\n", styles: [".select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);display:flex;align-items:center;justify-content:space-between}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.select-button .select-display{flex:1;min-width:0}.select-button .placeholder{color:#999}.select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.gfield--input-wrapper--label-inline .select-button{border-color:transparent;outline:0}\n"] }]
|
|
422
422
|
}], propDecorators: { options: [{
|
|
423
423
|
type: Input
|
|
424
424
|
}], showSearch: [{
|
|
@@ -444,6 +444,454 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
444
444
|
args: ['document:click', ['$event']]
|
|
445
445
|
}] } });
|
|
446
446
|
|
|
447
|
+
class PtrMultiDialogListComponent {
|
|
448
|
+
set options(value) {
|
|
449
|
+
this._options.set(this.processOptions(value));
|
|
450
|
+
}
|
|
451
|
+
showSearch = false;
|
|
452
|
+
searchPlaceholder = 'Search...';
|
|
453
|
+
dialogTitle = '';
|
|
454
|
+
selectedValues = [];
|
|
455
|
+
maxSelections;
|
|
456
|
+
showSelectAll = true;
|
|
457
|
+
selectionChange = new EventEmitter();
|
|
458
|
+
dialogClosed = new EventEmitter();
|
|
459
|
+
searchTermChanged = new EventEmitter();
|
|
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" }] : []));
|
|
466
|
+
componentId = Math.random().toString(36).substring(2);
|
|
467
|
+
listId = `${this.componentId}-list`;
|
|
468
|
+
filteredOptions = computed(() => {
|
|
469
|
+
const term = this.searchTerm().toLowerCase();
|
|
470
|
+
return this._options().flatMap(item => {
|
|
471
|
+
if (item.type === 'group') {
|
|
472
|
+
const filteredOptions = item.options.filter(option => option.label.toLowerCase().includes(term));
|
|
473
|
+
return filteredOptions.length > 0 ? [{ ...item, options: filteredOptions }] : [];
|
|
474
|
+
}
|
|
475
|
+
else {
|
|
476
|
+
return item.label.toLowerCase().includes(term) ? [item] : [];
|
|
477
|
+
}
|
|
478
|
+
});
|
|
479
|
+
}, ...(ngDevMode ? [{ debugName: "filteredOptions" }] : []));
|
|
480
|
+
// Get all available option values (for select all functionality)
|
|
481
|
+
allFilteredOptionValues = computed(() => {
|
|
482
|
+
return this.filteredOptions().flatMap(item => {
|
|
483
|
+
if (item.type === 'group') {
|
|
484
|
+
return item.options.map(option => option.value);
|
|
485
|
+
}
|
|
486
|
+
else {
|
|
487
|
+
return [item.value];
|
|
488
|
+
}
|
|
489
|
+
});
|
|
490
|
+
}, ...(ngDevMode ? [{ debugName: "allFilteredOptionValues" }] : []));
|
|
491
|
+
// Check if all filtered options are selected
|
|
492
|
+
allSelectedState = computed(() => {
|
|
493
|
+
const allValues = this.allFilteredOptionValues();
|
|
494
|
+
const selectedValues = this.selectedItems();
|
|
495
|
+
if (allValues.length === 0)
|
|
496
|
+
return false;
|
|
497
|
+
const selectedCount = allValues.filter(value => selectedValues.includes(value)).length;
|
|
498
|
+
if (selectedCount === 0)
|
|
499
|
+
return false;
|
|
500
|
+
if (selectedCount === allValues.length)
|
|
501
|
+
return true;
|
|
502
|
+
return 'indeterminate'; // Some but not all selected
|
|
503
|
+
}, ...(ngDevMode ? [{ debugName: "allSelectedState" }] : []));
|
|
504
|
+
// Determine if select all should be shown
|
|
505
|
+
shouldShowSelectAll = computed(() => {
|
|
506
|
+
const allValues = this.allFilteredOptionValues();
|
|
507
|
+
// Don't show if feature is disabled
|
|
508
|
+
if (!this.showSelectAll)
|
|
509
|
+
return false;
|
|
510
|
+
// Don't show if there's only 1 or no options
|
|
511
|
+
if (allValues.length <= 1)
|
|
512
|
+
return false;
|
|
513
|
+
// Don't show if there are more options than maxSelections
|
|
514
|
+
if (this.maxSelections && allValues.length > this.maxSelections)
|
|
515
|
+
return false;
|
|
516
|
+
return true;
|
|
517
|
+
}, ...(ngDevMode ? [{ debugName: "shouldShowSelectAll" }] : []));
|
|
518
|
+
openDialog() {
|
|
519
|
+
this.selectedItems.set([...this.selectedValues]);
|
|
520
|
+
this.dialog.nativeElement.show();
|
|
521
|
+
this.adjustDialogPosition();
|
|
522
|
+
this.isOpen.set(true);
|
|
523
|
+
}
|
|
524
|
+
openDialogSilent() {
|
|
525
|
+
this.selectedItems.set([...this.selectedValues]);
|
|
526
|
+
this.dialog.nativeElement.setAttribute('open', 'true');
|
|
527
|
+
this.adjustDialogPosition();
|
|
528
|
+
this.isOpen.set(true);
|
|
529
|
+
}
|
|
530
|
+
closeDialog() {
|
|
531
|
+
this.dialog.nativeElement.close();
|
|
532
|
+
this.isOpen.set(false);
|
|
533
|
+
this.searchTerm.set('');
|
|
534
|
+
this.highlightedIndex.set(-1);
|
|
535
|
+
this.dialogClosed.emit();
|
|
536
|
+
this.resetDialogPosition();
|
|
537
|
+
}
|
|
538
|
+
updateSearchTerm(term) {
|
|
539
|
+
this.searchTerm.set(term);
|
|
540
|
+
this.highlightedIndex.set(-1);
|
|
541
|
+
this.searchTermChanged.emit(term);
|
|
542
|
+
}
|
|
543
|
+
onDialogKeyDown(event) {
|
|
544
|
+
if (event.key === 'Escape') {
|
|
545
|
+
this.closeDialog();
|
|
546
|
+
event.preventDefault();
|
|
547
|
+
}
|
|
548
|
+
// When there is no search input and there are options, move input into the first option
|
|
549
|
+
if (!this.showSearch && this.filteredOptions().length > 0 && this.highlightedIndex() === -1) {
|
|
550
|
+
if (event.key === 'Tab' || event.key === 'ArrowDown') {
|
|
551
|
+
this.highlightedIndex.update(i => Math.min(i + 1, this.getTotalOptionsCount() - 1));
|
|
552
|
+
this.focusOption();
|
|
553
|
+
event.preventDefault();
|
|
554
|
+
}
|
|
555
|
+
}
|
|
556
|
+
}
|
|
557
|
+
onInputKeyDown(event) {
|
|
558
|
+
switch (event.key) {
|
|
559
|
+
case 'ArrowDown':
|
|
560
|
+
this.highlightedIndex.update(i => Math.min(i + 1, this.getTotalOptionsCount() - 1));
|
|
561
|
+
this.focusOption();
|
|
562
|
+
event.preventDefault();
|
|
563
|
+
break;
|
|
564
|
+
case 'Escape':
|
|
565
|
+
this.closeDialog();
|
|
566
|
+
event.preventDefault();
|
|
567
|
+
break;
|
|
568
|
+
}
|
|
569
|
+
}
|
|
570
|
+
onOptionKeyDown(event, optionValue) {
|
|
571
|
+
switch (event.key) {
|
|
572
|
+
case 'ArrowDown':
|
|
573
|
+
this.highlightedIndex.update(i => Math.min(i + 1, this.getTotalOptionsCount() - 1));
|
|
574
|
+
this.focusOption();
|
|
575
|
+
event.preventDefault();
|
|
576
|
+
break;
|
|
577
|
+
case 'ArrowUp':
|
|
578
|
+
this.highlightedIndex.update(i => Math.max(i - 1, -1));
|
|
579
|
+
this.focusOption();
|
|
580
|
+
event.preventDefault();
|
|
581
|
+
break;
|
|
582
|
+
case 'Enter':
|
|
583
|
+
case ' ':
|
|
584
|
+
this.toggleOption(optionValue);
|
|
585
|
+
event.preventDefault();
|
|
586
|
+
break;
|
|
587
|
+
}
|
|
588
|
+
}
|
|
589
|
+
onSelectAllKeyDown(event) {
|
|
590
|
+
switch (event.key) {
|
|
591
|
+
case 'ArrowDown':
|
|
592
|
+
this.highlightedIndex.update(i => Math.min(i + 1, this.getTotalOptionsCount() - 1));
|
|
593
|
+
this.focusOption();
|
|
594
|
+
event.preventDefault();
|
|
595
|
+
break;
|
|
596
|
+
case 'ArrowUp':
|
|
597
|
+
this.highlightedIndex.update(i => Math.max(i - 1, -1));
|
|
598
|
+
this.focusOption();
|
|
599
|
+
event.preventDefault();
|
|
600
|
+
break;
|
|
601
|
+
case 'Enter':
|
|
602
|
+
case ' ':
|
|
603
|
+
this.toggleSelectAll();
|
|
604
|
+
event.preventDefault();
|
|
605
|
+
break;
|
|
606
|
+
}
|
|
607
|
+
}
|
|
608
|
+
focusOption() {
|
|
609
|
+
if (this.highlightedIndex() >= 0) {
|
|
610
|
+
const options = this.dialog.nativeElement.querySelectorAll('li[role="option"]');
|
|
611
|
+
options[this.highlightedIndex()].focus();
|
|
612
|
+
}
|
|
613
|
+
}
|
|
614
|
+
toggleOption(optionValue) {
|
|
615
|
+
const currentSelected = this.selectedItems();
|
|
616
|
+
const isSelected = currentSelected.includes(optionValue);
|
|
617
|
+
if (isSelected) {
|
|
618
|
+
// Remove from selection
|
|
619
|
+
const newSelected = currentSelected.filter(value => value !== optionValue);
|
|
620
|
+
this.selectedItems.set(newSelected);
|
|
621
|
+
this.selectionChange.emit(newSelected);
|
|
622
|
+
}
|
|
623
|
+
else {
|
|
624
|
+
// Add to selection (if not at max)
|
|
625
|
+
if (!this.maxSelections || currentSelected.length < this.maxSelections) {
|
|
626
|
+
const newSelected = [...currentSelected, optionValue];
|
|
627
|
+
this.selectedItems.set(newSelected);
|
|
628
|
+
this.selectionChange.emit(newSelected);
|
|
629
|
+
}
|
|
630
|
+
}
|
|
631
|
+
}
|
|
632
|
+
toggleSelectAll() {
|
|
633
|
+
const allValues = this.allFilteredOptionValues();
|
|
634
|
+
const currentSelected = this.selectedItems();
|
|
635
|
+
const allSelectedState = this.allSelectedState();
|
|
636
|
+
if (allSelectedState === true) {
|
|
637
|
+
// Deselect all filtered options
|
|
638
|
+
const newSelected = currentSelected.filter(value => !allValues.includes(value));
|
|
639
|
+
this.selectedItems.set(newSelected);
|
|
640
|
+
this.selectionChange.emit(newSelected);
|
|
641
|
+
}
|
|
642
|
+
else {
|
|
643
|
+
// Select all filtered options (respecting max selections)
|
|
644
|
+
const unselectedValues = allValues.filter(value => !currentSelected.includes(value));
|
|
645
|
+
let newSelected = [...currentSelected];
|
|
646
|
+
if (this.maxSelections) {
|
|
647
|
+
const remainingSlots = this.maxSelections - currentSelected.length;
|
|
648
|
+
newSelected = [...currentSelected, ...unselectedValues.slice(0, remainingSlots)];
|
|
649
|
+
}
|
|
650
|
+
else {
|
|
651
|
+
newSelected = [...currentSelected, ...unselectedValues];
|
|
652
|
+
}
|
|
653
|
+
this.selectedItems.set(newSelected);
|
|
654
|
+
this.selectionChange.emit(newSelected);
|
|
655
|
+
}
|
|
656
|
+
}
|
|
657
|
+
isOptionSelected(optionValue) {
|
|
658
|
+
return this.selectedItems().includes(optionValue);
|
|
659
|
+
}
|
|
660
|
+
canSelectMore() {
|
|
661
|
+
if (!this.maxSelections)
|
|
662
|
+
return true;
|
|
663
|
+
return this.selectedItems().length < this.maxSelections;
|
|
664
|
+
}
|
|
665
|
+
getTotalOptionsCount() {
|
|
666
|
+
return this.filteredOptions().reduce((count, item) => {
|
|
667
|
+
if (item.type === 'group') {
|
|
668
|
+
return count + item.options.length;
|
|
669
|
+
}
|
|
670
|
+
return count + 1;
|
|
671
|
+
}, 0);
|
|
672
|
+
}
|
|
673
|
+
processOptions(options) {
|
|
674
|
+
if (!options)
|
|
675
|
+
return [];
|
|
676
|
+
return options.map(option => {
|
|
677
|
+
if (typeof option === 'string') {
|
|
678
|
+
return {
|
|
679
|
+
type: 'option',
|
|
680
|
+
label: option,
|
|
681
|
+
value: option
|
|
682
|
+
};
|
|
683
|
+
}
|
|
684
|
+
else if ('groupLabel' in option) {
|
|
685
|
+
return {
|
|
686
|
+
type: 'group',
|
|
687
|
+
label: option.groupLabel,
|
|
688
|
+
options: option.options.map(subOption => ({
|
|
689
|
+
type: 'option',
|
|
690
|
+
label: typeof subOption === 'string' ? subOption : subOption.label,
|
|
691
|
+
value: typeof subOption === 'string' ? subOption : subOption.value
|
|
692
|
+
}))
|
|
693
|
+
};
|
|
694
|
+
}
|
|
695
|
+
else {
|
|
696
|
+
return {
|
|
697
|
+
type: 'option',
|
|
698
|
+
label: option.label,
|
|
699
|
+
value: option.value
|
|
700
|
+
};
|
|
701
|
+
}
|
|
702
|
+
});
|
|
703
|
+
}
|
|
704
|
+
adjustDialogPosition() {
|
|
705
|
+
const dialogRect = this.dialog.nativeElement.getBoundingClientRect();
|
|
706
|
+
const viewportHeight = window.innerHeight;
|
|
707
|
+
const spaceBelow = viewportHeight - dialogRect.bottom;
|
|
708
|
+
if (spaceBelow > 0) {
|
|
709
|
+
this.dialog.nativeElement.style.top = '100%';
|
|
710
|
+
}
|
|
711
|
+
else {
|
|
712
|
+
this.dialog.nativeElement.style.bottom = '100%';
|
|
713
|
+
}
|
|
714
|
+
}
|
|
715
|
+
resetDialogPosition() {
|
|
716
|
+
this.dialog.nativeElement.style.top = '';
|
|
717
|
+
this.dialog.nativeElement.style.bottom = '';
|
|
718
|
+
}
|
|
719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrMultiDialogListComponent, isStandalone: true, selector: "ptr-multi-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle", selectedValues: "selectedValues", maxSelections: "maxSelections", showSelectAll: "showSelectAll" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-multi-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\r\n\r\n @if(dialogTitle) {\r\n <p class=\"dialog-title\">{{dialogTitle}}</p>\r\n }\r\n\r\n @if (showSearch) {\r\n <div>\r\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\r\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\r\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\r\n class=\"search-input\">\r\n </div>\r\n }\r\n<form>\r\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\" [attr.aria-multiselectable]=\"true\">\r\n @if (shouldShowSelectAll()) {\r\n <li role=\"option\" class=\"select-all-option\" [attr.aria-selected]=\"allSelectedState() === true\"\r\n [class.selected]=\"allSelectedState() === true\" [class.indeterminate]=\"allSelectedState() === 'indeterminate'\"\r\n (click)=\"toggleSelectAll()\" (keydown)=\"onSelectAllKeyDown($event)\" [attr.tabindex]=\"0\">\r\n <input type=\"checkbox\" [checked]=\"allSelectedState() === true\"\r\n [indeterminate]=\"allSelectedState() === 'indeterminate'\" readonly>\r\n Select All\r\n </li>\r\n }\r\n @for (item of filteredOptions(); track item.label) {\r\n @if (item.type === 'option') {\r\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"isOptionSelected(item.value!)\"\r\n [class.selected]=\"isOptionSelected(item.value!)\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\"\r\n (click)=\"toggleOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n <input type=\"checkbox\" [checked]=\"isOptionSelected(item.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\" readonly>\r\n {{ item.label }}\r\n </li>\r\n } @else {\r\n <li role=\"group\" [attr.aria-label]=\"item.label\">\r\n {{ item.label }}\r\n </li>\r\n @for (option of item.options!; track option.value) {\r\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"isOptionSelected(option.value!)\"\r\n [class.selected]=\"isOptionSelected(option.value!)\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\"\r\n (click)=\"toggleOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\" readonly>\r\n {{ option.label }}\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n</form>\r\n</dialog>\r\n", styles: [".ptr-multi-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:400px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-multi-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit);display:flex;align-items:center;gap:8px}li[role=option] input[type=checkbox]{margin:0;pointer-events:none}li[role=option].disabled{opacity:.5;cursor:not-allowed}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}.select-all-option{font-weight:500;border-bottom:1px solid var(--wp--custom--color--border)}.select-all-option.indeterminate{font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
721
|
+
}
|
|
722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiDialogListComponent, decorators: [{
|
|
723
|
+
type: Component,
|
|
724
|
+
args: [{ selector: 'ptr-multi-dialog-list', imports: [
|
|
725
|
+
FormsModule
|
|
726
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog #dialog class=\"ptr-multi-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\r\n\r\n @if(dialogTitle) {\r\n <p class=\"dialog-title\">{{dialogTitle}}</p>\r\n }\r\n\r\n @if (showSearch) {\r\n <div>\r\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\r\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\r\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\r\n class=\"search-input\">\r\n </div>\r\n }\r\n<form>\r\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\" [attr.aria-multiselectable]=\"true\">\r\n @if (shouldShowSelectAll()) {\r\n <li role=\"option\" class=\"select-all-option\" [attr.aria-selected]=\"allSelectedState() === true\"\r\n [class.selected]=\"allSelectedState() === true\" [class.indeterminate]=\"allSelectedState() === 'indeterminate'\"\r\n (click)=\"toggleSelectAll()\" (keydown)=\"onSelectAllKeyDown($event)\" [attr.tabindex]=\"0\">\r\n <input type=\"checkbox\" [checked]=\"allSelectedState() === true\"\r\n [indeterminate]=\"allSelectedState() === 'indeterminate'\" readonly>\r\n Select All\r\n </li>\r\n }\r\n @for (item of filteredOptions(); track item.label) {\r\n @if (item.type === 'option') {\r\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"isOptionSelected(item.value!)\"\r\n [class.selected]=\"isOptionSelected(item.value!)\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\"\r\n (click)=\"toggleOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n <input type=\"checkbox\" [checked]=\"isOptionSelected(item.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\" readonly>\r\n {{ item.label }}\r\n </li>\r\n } @else {\r\n <li role=\"group\" [attr.aria-label]=\"item.label\">\r\n {{ item.label }}\r\n </li>\r\n @for (option of item.options!; track option.value) {\r\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"isOptionSelected(option.value!)\"\r\n [class.selected]=\"isOptionSelected(option.value!)\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\"\r\n (click)=\"toggleOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\" readonly>\r\n {{ option.label }}\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n</form>\r\n</dialog>\r\n", styles: [".ptr-multi-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:400px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-multi-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit);display:flex;align-items:center;gap:8px}li[role=option] input[type=checkbox]{margin:0;pointer-events:none}li[role=option].disabled{opacity:.5;cursor:not-allowed}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}.select-all-option{font-weight:500;border-bottom:1px solid var(--wp--custom--color--border)}.select-all-option.indeterminate{font-style:italic}\n"] }]
|
|
727
|
+
}], propDecorators: { options: [{
|
|
728
|
+
type: Input
|
|
729
|
+
}], showSearch: [{
|
|
730
|
+
type: Input
|
|
731
|
+
}], searchPlaceholder: [{
|
|
732
|
+
type: Input
|
|
733
|
+
}], dialogTitle: [{
|
|
734
|
+
type: Input
|
|
735
|
+
}], selectedValues: [{
|
|
736
|
+
type: Input
|
|
737
|
+
}], maxSelections: [{
|
|
738
|
+
type: Input
|
|
739
|
+
}], showSelectAll: [{
|
|
740
|
+
type: Input
|
|
741
|
+
}], selectionChange: [{
|
|
742
|
+
type: Output
|
|
743
|
+
}], dialogClosed: [{
|
|
744
|
+
type: Output
|
|
745
|
+
}], searchTermChanged: [{
|
|
746
|
+
type: Output
|
|
747
|
+
}], dialog: [{
|
|
748
|
+
type: ViewChild,
|
|
749
|
+
args: ['dialog']
|
|
750
|
+
}] } });
|
|
751
|
+
|
|
752
|
+
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
753
|
+
class PtrMultiSelectComponent {
|
|
754
|
+
options;
|
|
755
|
+
showSearch = true;
|
|
756
|
+
placeholder = 'Select options';
|
|
757
|
+
label = '';
|
|
758
|
+
description = '';
|
|
759
|
+
labelPosition = 'top';
|
|
760
|
+
maxSelections;
|
|
761
|
+
showSelectAll = true;
|
|
762
|
+
selectionChange = new EventEmitter();
|
|
763
|
+
selectButton;
|
|
764
|
+
dialogList;
|
|
765
|
+
value = signal([], ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
766
|
+
selectedOptions = computed(() => {
|
|
767
|
+
const currentValues = this.value();
|
|
768
|
+
if (currentValues.length === 0)
|
|
769
|
+
return [];
|
|
770
|
+
const allOptions = this.flattenOptions(this.options);
|
|
771
|
+
return allOptions.filter(option => currentValues.includes(option.value));
|
|
772
|
+
}, ...(ngDevMode ? [{ debugName: "selectedOptions" }] : []));
|
|
773
|
+
displayText = computed(() => {
|
|
774
|
+
const selected = this.selectedOptions();
|
|
775
|
+
if (selected.length === 0)
|
|
776
|
+
return this.effectivePlaceholder();
|
|
777
|
+
if (selected.length === 1)
|
|
778
|
+
return selected[0].label;
|
|
779
|
+
return `${selected.length} options selected`;
|
|
780
|
+
}, ...(ngDevMode ? [{ debugName: "displayText" }] : []));
|
|
781
|
+
effectivePlaceholder = computed(() => {
|
|
782
|
+
return this.placeholder?.trim() || 'Select options';
|
|
783
|
+
}, ...(ngDevMode ? [{ debugName: "effectivePlaceholder" }] : []));
|
|
784
|
+
componentId = Math.random().toString(36).substring(2);
|
|
785
|
+
labelId = `${this.componentId}-label`;
|
|
786
|
+
inputId = `${this.componentId}-input`;
|
|
787
|
+
onChange = () => { };
|
|
788
|
+
onTouched = () => { };
|
|
789
|
+
onDocumentClick(event) {
|
|
790
|
+
if (!this.dialogList.dialog.nativeElement.contains(event.target) &&
|
|
791
|
+
!event.target.closest('.multi-select-button') &&
|
|
792
|
+
this.dialogList.isOpen()) {
|
|
793
|
+
this.dialogList.closeDialog();
|
|
794
|
+
}
|
|
795
|
+
}
|
|
796
|
+
toggleDialog() {
|
|
797
|
+
if (this.dialogList.isOpen()) {
|
|
798
|
+
this.dialogList.closeDialog();
|
|
799
|
+
}
|
|
800
|
+
else {
|
|
801
|
+
this.dialogList.openDialog();
|
|
802
|
+
}
|
|
803
|
+
}
|
|
804
|
+
onSelectionChanged(selectedValues) {
|
|
805
|
+
this.value.set(selectedValues);
|
|
806
|
+
this.onChange(selectedValues);
|
|
807
|
+
this.onTouched();
|
|
808
|
+
this.selectionChange.emit(selectedValues);
|
|
809
|
+
}
|
|
810
|
+
removeSelectedItem(valueToRemove) {
|
|
811
|
+
const currentValues = this.value();
|
|
812
|
+
const updatedValues = currentValues.filter(value => value !== valueToRemove);
|
|
813
|
+
this.onSelectionChanged(updatedValues);
|
|
814
|
+
}
|
|
815
|
+
writeValue(value) {
|
|
816
|
+
this.value.set(value || []);
|
|
817
|
+
}
|
|
818
|
+
registerOnChange(fn) {
|
|
819
|
+
this.onChange = fn;
|
|
820
|
+
}
|
|
821
|
+
registerOnTouched(fn) {
|
|
822
|
+
this.onTouched = fn;
|
|
823
|
+
}
|
|
824
|
+
setDisabledState(isDisabled) {
|
|
825
|
+
if (this.selectButton?.nativeElement) {
|
|
826
|
+
this.selectButton.nativeElement.disabled = isDisabled;
|
|
827
|
+
}
|
|
828
|
+
}
|
|
829
|
+
flattenOptions(options) {
|
|
830
|
+
if (!options)
|
|
831
|
+
return [];
|
|
832
|
+
return options.flatMap(option => {
|
|
833
|
+
if (typeof option === 'string') {
|
|
834
|
+
return { value: option, label: option };
|
|
835
|
+
}
|
|
836
|
+
else if ('groupLabel' in option) {
|
|
837
|
+
return option.options;
|
|
838
|
+
}
|
|
839
|
+
else {
|
|
840
|
+
return option;
|
|
841
|
+
}
|
|
842
|
+
});
|
|
843
|
+
}
|
|
844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrMultiSelectComponent, isStandalone: true, selector: "ptr-multi-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description", labelPosition: "labelPosition", maxSelections: "maxSelections", showSelectAll: "showSelectAll" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
846
|
+
{
|
|
847
|
+
provide: NG_VALUE_ACCESSOR,
|
|
848
|
+
useExisting: forwardRef(() => PtrMultiSelectComponent),
|
|
849
|
+
multi: true
|
|
850
|
+
}
|
|
851
|
+
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <button #selectButton type=\"button\" class=\"multi-select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n <span [attr.id]=\"labelId\" class=\"select-display\">\r\n @if (selectedOptions().length === 0) {\r\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\r\n } @else {\r\n <div class=\"selected-items\">\r\n @for (option of selectedOptions(); track option.value) {\r\n <span class=\"selected-chip\">\r\n {{option.label}}\r\n <button type=\"button\" class=\"remove-chip\" (click)=\"removeSelectedItem(option.value); $event.stopPropagation()\"\r\n [attr.aria-label]=\"'Remove ' + option.label\">\r\n \u00D7\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n }\r\n </span>\r\n <span class=\"select-arrow\">\u23F7</span>\r\n </button>\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n\r\n <ptr-multi-dialog-list #dialogList [options]=\"options\" [selectedValues]=\"value()\" [maxSelections]=\"maxSelections\"\r\n [showSelectAll]=\"showSelectAll\" (selectionChange)=\"onSelectionChanged($event)\" [showSearch]=\"showSearch\" />\r\n\r\n</div>\r\n", styles: [".multi-select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);display:flex;align-items:center;justify-content:space-between;min-height:42px}.multi-select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.multi-select-button .select-display{flex:1;min-width:0}.multi-select-button .placeholder{color:#999}.multi-select-button .selected-items{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.multi-select-button .selected-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease;padding:2px 6px;border-radius:calc(var(--wp--custom--default-border-radius) / 3);font-size:.8em;gap:4px}.multi-select-button .selected-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.multi-select-button .selected-chip .remove-chip{border:none;background:none;color:var(--wp--custom--color--primary-text, white);cursor:pointer;padding:0;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;width:16px;height:16px;font-size:12px}.multi-select-button .selected-chip .remove-chip:hover{background-color:#0000001a}.multi-select-button .selected-chip .remove-chip:disabled{opacity:.5;cursor:not-allowed}.multi-select-button .selected-chip .remove-chip:hover{background-color:#fff3}.multi-select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.multi-select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.gfield--input-wrapper--label-inline .multi-select-button{border-color:transparent;outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrMultiDialogListComponent, selector: "ptr-multi-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle", "selectedValues", "maxSelections", "showSelectAll"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
852
|
+
}
|
|
853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrMultiSelectComponent, decorators: [{
|
|
854
|
+
type: Component,
|
|
855
|
+
args: [{ selector: 'ptr-multi-select', imports: [
|
|
856
|
+
FormsModule,
|
|
857
|
+
ReactiveFormsModule,
|
|
858
|
+
PtrMultiDialogListComponent
|
|
859
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
860
|
+
{
|
|
861
|
+
provide: NG_VALUE_ACCESSOR,
|
|
862
|
+
useExisting: forwardRef(() => PtrMultiSelectComponent),
|
|
863
|
+
multi: true
|
|
864
|
+
}
|
|
865
|
+
], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <button #selectButton type=\"button\" class=\"multi-select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\r\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\r\n <span [attr.id]=\"labelId\" class=\"select-display\">\r\n @if (selectedOptions().length === 0) {\r\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\r\n } @else {\r\n <div class=\"selected-items\">\r\n @for (option of selectedOptions(); track option.value) {\r\n <span class=\"selected-chip\">\r\n {{option.label}}\r\n <button type=\"button\" class=\"remove-chip\" (click)=\"removeSelectedItem(option.value); $event.stopPropagation()\"\r\n [attr.aria-label]=\"'Remove ' + option.label\">\r\n \u00D7\r\n </button>\r\n </span>\r\n }\r\n </div>\r\n }\r\n </span>\r\n <span class=\"select-arrow\">\u23F7</span>\r\n </button>\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n\r\n <ptr-multi-dialog-list #dialogList [options]=\"options\" [selectedValues]=\"value()\" [maxSelections]=\"maxSelections\"\r\n [showSelectAll]=\"showSelectAll\" (selectionChange)=\"onSelectionChanged($event)\" [showSearch]=\"showSearch\" />\r\n\r\n</div>\r\n", styles: [".multi-select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);display:flex;align-items:center;justify-content:space-between;min-height:42px}.multi-select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.multi-select-button .select-display{flex:1;min-width:0}.multi-select-button .placeholder{color:#999}.multi-select-button .selected-items{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.multi-select-button .selected-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease;padding:2px 6px;border-radius:calc(var(--wp--custom--default-border-radius) / 3);font-size:.8em;gap:4px}.multi-select-button .selected-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.multi-select-button .selected-chip .remove-chip{border:none;background:none;color:var(--wp--custom--color--primary-text, white);cursor:pointer;padding:0;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;width:16px;height:16px;font-size:12px}.multi-select-button .selected-chip .remove-chip:hover{background-color:#0000001a}.multi-select-button .selected-chip .remove-chip:disabled{opacity:.5;cursor:not-allowed}.multi-select-button .selected-chip .remove-chip:hover{background-color:#fff3}.multi-select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.multi-select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.gfield--input-wrapper--label-inline .multi-select-button{border-color:transparent;outline:0}\n"] }]
|
|
866
|
+
}], propDecorators: { options: [{
|
|
867
|
+
type: Input
|
|
868
|
+
}], showSearch: [{
|
|
869
|
+
type: Input
|
|
870
|
+
}], placeholder: [{
|
|
871
|
+
type: Input
|
|
872
|
+
}], label: [{
|
|
873
|
+
type: Input
|
|
874
|
+
}], description: [{
|
|
875
|
+
type: Input
|
|
876
|
+
}], labelPosition: [{
|
|
877
|
+
type: Input
|
|
878
|
+
}], maxSelections: [{
|
|
879
|
+
type: Input
|
|
880
|
+
}], showSelectAll: [{
|
|
881
|
+
type: Input
|
|
882
|
+
}], selectionChange: [{
|
|
883
|
+
type: Output
|
|
884
|
+
}], selectButton: [{
|
|
885
|
+
type: ViewChild,
|
|
886
|
+
args: ['selectButton']
|
|
887
|
+
}], dialogList: [{
|
|
888
|
+
type: ViewChild,
|
|
889
|
+
args: ['dialogList']
|
|
890
|
+
}], onDocumentClick: [{
|
|
891
|
+
type: HostListener,
|
|
892
|
+
args: ['document:click', ['$event']]
|
|
893
|
+
}] } });
|
|
894
|
+
|
|
447
895
|
/* eslint-disable @typescript-eslint/no-empty-function */
|
|
448
896
|
class PtrInputComponent {
|
|
449
897
|
type = 'text';
|
|
@@ -456,13 +904,14 @@ class PtrInputComponent {
|
|
|
456
904
|
labelPosition = 'top';
|
|
457
905
|
input;
|
|
458
906
|
dialogList;
|
|
907
|
+
destroyRef = inject(DestroyRef);
|
|
459
908
|
componentId = Math.random().toString(36).substring(2);
|
|
460
909
|
minChars = 3;
|
|
461
910
|
searchTerms = new Subject();
|
|
462
911
|
hasSelectedOption = false;
|
|
463
912
|
inputId = `${this.componentId}-input`;
|
|
464
|
-
inputValue = signal('');
|
|
465
|
-
searchResultOptions = signal([]);
|
|
913
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
914
|
+
searchResultOptions = signal([], ...(ngDevMode ? [{ debugName: "searchResultOptions" }] : []));
|
|
466
915
|
onChange = () => { };
|
|
467
916
|
onTouched = () => { };
|
|
468
917
|
onDocumentClick(event) {
|
|
@@ -477,7 +926,7 @@ class PtrInputComponent {
|
|
|
477
926
|
}
|
|
478
927
|
setupSearch() {
|
|
479
928
|
if (this.searchFn) {
|
|
480
|
-
this.searchTerms.pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => term.length >= this.minChars ? this.searchFn(term) : of([]))).subscribe(results => {
|
|
929
|
+
this.searchTerms.pipe(debounceTime(300), distinctUntilChanged(), switchMap(term => term.length >= this.minChars ? this.searchFn(term) : of([])), takeUntilDestroyed(this.destroyRef)).subscribe(results => {
|
|
481
930
|
this.searchResultOptions.set(results);
|
|
482
931
|
if (results.length > 0 && this.dialogList) {
|
|
483
932
|
this.dialogList.openDialogSilent();
|
|
@@ -526,8 +975,8 @@ class PtrInputComponent {
|
|
|
526
975
|
this.input.nativeElement.disabled = isDisabled;
|
|
527
976
|
}
|
|
528
977
|
}
|
|
529
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
978
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
979
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrInputComponent, isStandalone: true, selector: "ptr-input", inputs: { type: "type", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", description: "description", dialogHelpText: "dialogHelpText", searchFn: "searchFn", labelPosition: "labelPosition" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
531
980
|
{
|
|
532
981
|
provide: NG_VALUE_ACCESSOR,
|
|
533
982
|
useExisting: forwardRef(() => PtrInputComponent),
|
|
@@ -535,7 +984,7 @@ class PtrInputComponent {
|
|
|
535
984
|
}
|
|
536
985
|
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n <div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n @switch (type) {\r\n @case ('textarea') {\r\n <textarea #input [id]=\"inputId\" [attr.autocomplete]=\"autocomplete || null\" [attr.placeholder]=\"placeholder || null\"\r\n [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [rows]=\"3\"></textarea>\r\n }\r\n @default {\r\n <input #input [id]=\"inputId\" [type]=\"type\" [attr.autocomplete]=\"autocomplete || null\"\r\n [attr.placeholder]=\"placeholder || null\" [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\"\r\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\r\n }\r\n }\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n\r\n @if (searchFn) {\r\n <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\r\n [dialogTitle]=\"dialogHelpText\" />\r\n }\r\n\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
537
986
|
}
|
|
538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrInputComponent, decorators: [{
|
|
539
988
|
type: Component,
|
|
540
989
|
args: [{ selector: 'ptr-input', imports: [
|
|
541
990
|
FormsModule,
|
|
@@ -582,12 +1031,19 @@ class PtrChipInputComponent {
|
|
|
582
1031
|
description = '';
|
|
583
1032
|
labelPosition = 'top';
|
|
584
1033
|
maxItems;
|
|
1034
|
+
suggestions;
|
|
1035
|
+
/**
|
|
1036
|
+
* Auto reopen the suggestions dialog after adding/selecting a chip (default true)
|
|
1037
|
+
* as long as maxItems has not been reached.
|
|
1038
|
+
*/
|
|
1039
|
+
autoReopenAfterSelect = true;
|
|
585
1040
|
chipInput;
|
|
1041
|
+
dialogList;
|
|
586
1042
|
componentId = Math.random().toString(36).substring(2);
|
|
587
1043
|
inputId = `${this.componentId}-input`;
|
|
588
|
-
inputValue = signal('');
|
|
589
|
-
chipItems = signal([]);
|
|
590
|
-
isDisabled = signal(false);
|
|
1044
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
1045
|
+
chipItems = signal([], ...(ngDevMode ? [{ debugName: "chipItems" }] : []));
|
|
1046
|
+
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
591
1047
|
tempInputControl = new FormControl('');
|
|
592
1048
|
onChange = () => { };
|
|
593
1049
|
onTouched = () => { };
|
|
@@ -607,6 +1063,7 @@ class PtrChipInputComponent {
|
|
|
607
1063
|
}
|
|
608
1064
|
this.tempInputControl.setValue('');
|
|
609
1065
|
this.chipInput.nativeElement.focus();
|
|
1066
|
+
this.maybeReopenDialog();
|
|
610
1067
|
}
|
|
611
1068
|
}
|
|
612
1069
|
removeChip(index) {
|
|
@@ -616,10 +1073,21 @@ class PtrChipInputComponent {
|
|
|
616
1073
|
this.onChange(newChips);
|
|
617
1074
|
}
|
|
618
1075
|
onKeyDown(event) {
|
|
1076
|
+
// Re-open dialog when typing if closed
|
|
1077
|
+
if (!this.dialogList?.isOpen?.() && this.hasSuggestions() && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
|
|
1078
|
+
this.openDialog();
|
|
1079
|
+
}
|
|
619
1080
|
if (event.key === 'Enter' || event.key === ',') {
|
|
620
1081
|
event.preventDefault();
|
|
621
1082
|
this.addChip();
|
|
622
1083
|
}
|
|
1084
|
+
else if (event.key === 'ArrowDown') {
|
|
1085
|
+
event.preventDefault();
|
|
1086
|
+
this.openDialog();
|
|
1087
|
+
}
|
|
1088
|
+
else if (event.key === 'Escape') {
|
|
1089
|
+
this.closeDialog();
|
|
1090
|
+
}
|
|
623
1091
|
else if (event.key === 'Backspace' && !this.inputValue() && this.chipItems().length > 0) {
|
|
624
1092
|
// Remove the last chip when backspace is pressed and input is empty
|
|
625
1093
|
this.removeChip(this.chipItems().length - 1);
|
|
@@ -627,11 +1095,67 @@ class PtrChipInputComponent {
|
|
|
627
1095
|
}
|
|
628
1096
|
onBlur() {
|
|
629
1097
|
// Add the chip when the input loses focus if there's a value
|
|
630
|
-
if
|
|
1098
|
+
// but only if the suggestions dialog isn't open
|
|
1099
|
+
if (!this.dialogList?.isOpen?.() && this.inputValue().trim()) {
|
|
631
1100
|
this.addChip();
|
|
632
1101
|
}
|
|
633
1102
|
this.onTouched();
|
|
634
1103
|
}
|
|
1104
|
+
onDocumentClick(event) {
|
|
1105
|
+
const target = event.target;
|
|
1106
|
+
const dialogEl = this.dialogList?.dialog?.nativeElement;
|
|
1107
|
+
const inputEl = this.chipInput?.nativeElement;
|
|
1108
|
+
if (this.dialogList?.isOpen?.() &&
|
|
1109
|
+
dialogEl && !dialogEl.contains(target) &&
|
|
1110
|
+
inputEl && !inputEl.contains(target)) {
|
|
1111
|
+
this.closeDialog();
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
openDialog() {
|
|
1115
|
+
if (this.isDisabled() || (this.maxItems !== undefined && this.chipItems().length >= this.maxItems))
|
|
1116
|
+
return;
|
|
1117
|
+
if (!this.suggestions || this.suggestions.length === 0)
|
|
1118
|
+
return;
|
|
1119
|
+
this.dialogList?.openDialog?.();
|
|
1120
|
+
}
|
|
1121
|
+
closeDialog() {
|
|
1122
|
+
this.dialogList?.closeDialog?.();
|
|
1123
|
+
}
|
|
1124
|
+
onSuggestionSelected(optionValue) {
|
|
1125
|
+
if (!optionValue) {
|
|
1126
|
+
this.closeDialog();
|
|
1127
|
+
return;
|
|
1128
|
+
}
|
|
1129
|
+
this.closeDialog();
|
|
1130
|
+
this.addChipFromValue(optionValue);
|
|
1131
|
+
this.maybeReopenDialog();
|
|
1132
|
+
}
|
|
1133
|
+
addChipFromValue(value) {
|
|
1134
|
+
const trimmed = value.trim();
|
|
1135
|
+
if (!trimmed)
|
|
1136
|
+
return;
|
|
1137
|
+
if (this.maxItems !== undefined && this.chipItems().length >= this.maxItems)
|
|
1138
|
+
return;
|
|
1139
|
+
if (!this.chipItems().includes(trimmed)) {
|
|
1140
|
+
const newChips = [...this.chipItems(), trimmed];
|
|
1141
|
+
this.chipItems.set(newChips);
|
|
1142
|
+
this.onChange(newChips);
|
|
1143
|
+
}
|
|
1144
|
+
// Clear input and refocus for quick entry
|
|
1145
|
+
this.tempInputControl.setValue('');
|
|
1146
|
+
this.chipInput?.nativeElement.focus();
|
|
1147
|
+
}
|
|
1148
|
+
maybeReopenDialog() {
|
|
1149
|
+
if (this.autoReopenAfterSelect &&
|
|
1150
|
+
!this.isDisabled() &&
|
|
1151
|
+
(!this.maxItems || this.chipItems().length < this.maxItems) &&
|
|
1152
|
+
this.hasSuggestions()) {
|
|
1153
|
+
queueMicrotask(() => this.openDialog());
|
|
1154
|
+
}
|
|
1155
|
+
}
|
|
1156
|
+
hasSuggestions() {
|
|
1157
|
+
return !!(this.suggestions && this.suggestions.length > 0);
|
|
1158
|
+
}
|
|
635
1159
|
writeValue(value) {
|
|
636
1160
|
this.chipItems.set(value || []);
|
|
637
1161
|
}
|
|
@@ -650,28 +1174,29 @@ class PtrChipInputComponent {
|
|
|
650
1174
|
this.tempInputControl.enable();
|
|
651
1175
|
}
|
|
652
1176
|
}
|
|
653
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1177
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrChipInputComponent, isStandalone: true, selector: "ptr-chip-input", inputs: { label: "label", placeholder: "placeholder", description: "description", labelPosition: "labelPosition", maxItems: "maxItems", suggestions: "suggestions", autoReopenAfterSelect: "autoReopenAfterSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
655
1179
|
{
|
|
656
1180
|
provide: NG_VALUE_ACCESSOR,
|
|
657
1181
|
useExisting: forwardRef(() => PtrChipInputComponent),
|
|
658
1182
|
multi: true
|
|
659
1183
|
}
|
|
660
|
-
], viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <div class=\"ptr-chip-container\">\r\n <div class=\"ptr-chip-list\">\r\n @for (chip of chipItems(); track chip; let i = $index) {\r\n <div class=\"ptr-chip\">\r\n <span class=\"ptr-chip-text\">{{ chip }}</span>\r\n <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\r\n aria-label=\"Remove item\">\u00D7</button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"ptr-chip-input-wrapper\">\r\n <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\r\n (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\"\r\n [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\r\n <ptr-button (clicked)=\"addChip()\"\r\n [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\r\n </div>\r\n </div>\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n</div>\r\n", styles: [".ptr-chip-container{display:flex;flex-direction:column;gap:8px;width:100%}.ptr-chip-list{display:flex;flex-wrap:wrap;gap:8px}.ptr-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text,
|
|
1184
|
+
], viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <div class=\"ptr-chip-container\">\r\n <div class=\"ptr-chip-list\">\r\n @for (chip of chipItems(); track chip; let i = $index) {\r\n <div class=\"ptr-chip\">\r\n <span class=\"ptr-chip-text\">{{ chip }}</span>\r\n <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\r\n aria-label=\"Remove item\">\u00D7</button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"ptr-chip-input-wrapper\">\r\n <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\r\n (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\" (focus)=\"openDialog()\"\r\n (input)=\"dialogList?.updateSearchTerm(inputValue())\"\r\n [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\r\n <ptr-button (clicked)=\"addChip()\"\r\n [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\r\n </div>\r\n </div>\r\n\r\n <ptr-dialog-list #dialogList [options]=\"suggestions\" [showSearch]=\"false\" [dialogTitle]=\"label\"\r\n (selectionChange)=\"onSuggestionSelected($event)\" />\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n</div>\r\n", styles: [".ptr-chip-container{display:flex;flex-direction:column;gap:8px;width:100%}.ptr-chip-list{display:flex;flex-wrap:wrap;gap:8px}.ptr-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease;padding:4px 12px;line-height:20px;margin-right:4px}.ptr-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.ptr-chip-text{margin-right:6px}.ptr-chip-remove{border:none;background:none;color:var(--wp--custom--color--primary-text, white);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;font-size:var(--wp--preset--font-size--medium, 16px);width:18px;height:18px;margin:0 0 0 6px}.ptr-chip-remove:hover{background-color:#0000001a}.ptr-chip-remove:disabled{opacity:.5;cursor:not-allowed}.ptr-chip-input-wrapper{display:flex;gap:8px;width:100%}.ptr-chip-input-wrapper button{text-wrap-mode:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
661
1185
|
}
|
|
662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrChipInputComponent, decorators: [{
|
|
663
1187
|
type: Component,
|
|
664
1188
|
args: [{ selector: 'ptr-chip-input', imports: [
|
|
665
1189
|
FormsModule,
|
|
666
1190
|
ReactiveFormsModule,
|
|
667
|
-
PtrButtonComponent
|
|
668
|
-
|
|
1191
|
+
PtrButtonComponent,
|
|
1192
|
+
PtrDialogListComponent
|
|
1193
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
669
1194
|
{
|
|
670
1195
|
provide: NG_VALUE_ACCESSOR,
|
|
671
1196
|
useExisting: forwardRef(() => PtrChipInputComponent),
|
|
672
1197
|
multi: true
|
|
673
1198
|
}
|
|
674
|
-
], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <div class=\"ptr-chip-container\">\r\n <div class=\"ptr-chip-list\">\r\n @for (chip of chipItems(); track chip; let i = $index) {\r\n <div class=\"ptr-chip\">\r\n <span class=\"ptr-chip-text\">{{ chip }}</span>\r\n <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\r\n aria-label=\"Remove item\">\u00D7</button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"ptr-chip-input-wrapper\">\r\n <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\r\n (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\"\r\n [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\r\n <ptr-button (clicked)=\"addChip()\"\r\n [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\r\n </div>\r\n </div>\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n</div>\r\n", styles: [".ptr-chip-container{display:flex;flex-direction:column;gap:8px;width:100%}.ptr-chip-list{display:flex;flex-wrap:wrap;gap:8px}.ptr-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text,
|
|
1199
|
+
], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\r\n@if(description){\r\n<div class=\"gfield_description\">{{description}}</div>\r\n}\r\n<div class=\"gfield--input-wrapper ginput_container\"\r\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\r\n\r\n <div class=\"ptr-chip-container\">\r\n <div class=\"ptr-chip-list\">\r\n @for (chip of chipItems(); track chip; let i = $index) {\r\n <div class=\"ptr-chip\">\r\n <span class=\"ptr-chip-text\">{{ chip }}</span>\r\n <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\r\n aria-label=\"Remove item\">\u00D7</button>\r\n </div>\r\n }\r\n </div>\r\n\r\n <div class=\"ptr-chip-input-wrapper\">\r\n <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\r\n (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\" (focus)=\"openDialog()\"\r\n (input)=\"dialogList?.updateSearchTerm(inputValue())\"\r\n [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\r\n <ptr-button (clicked)=\"addChip()\"\r\n [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\r\n </div>\r\n </div>\r\n\r\n <ptr-dialog-list #dialogList [options]=\"suggestions\" [showSearch]=\"false\" [dialogTitle]=\"label\"\r\n (selectionChange)=\"onSuggestionSelected($event)\" />\r\n\r\n @if (labelPosition === 'inline') {\r\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\r\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\r\n <span>{{label}}</span>\r\n </legend>\r\n </fieldset>\r\n }\r\n</div>\r\n", styles: [".ptr-chip-container{display:flex;flex-direction:column;gap:8px;width:100%}.ptr-chip-list{display:flex;flex-wrap:wrap;gap:8px}.ptr-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease;padding:4px 12px;line-height:20px;margin-right:4px}.ptr-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.ptr-chip-text{margin-right:6px}.ptr-chip-remove{border:none;background:none;color:var(--wp--custom--color--primary-text, white);cursor:pointer;padding:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease;font-size:var(--wp--preset--font-size--medium, 16px);width:18px;height:18px;margin:0 0 0 6px}.ptr-chip-remove:hover{background-color:#0000001a}.ptr-chip-remove:disabled{opacity:.5;cursor:not-allowed}.ptr-chip-input-wrapper{display:flex;gap:8px;width:100%}.ptr-chip-input-wrapper button{text-wrap-mode:nowrap}\n"] }]
|
|
675
1200
|
}], propDecorators: { label: [{
|
|
676
1201
|
type: Input
|
|
677
1202
|
}], placeholder: [{
|
|
@@ -682,9 +1207,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
682
1207
|
type: Input
|
|
683
1208
|
}], maxItems: [{
|
|
684
1209
|
type: Input
|
|
1210
|
+
}], suggestions: [{
|
|
1211
|
+
type: Input
|
|
1212
|
+
}], autoReopenAfterSelect: [{
|
|
1213
|
+
type: Input
|
|
685
1214
|
}], chipInput: [{
|
|
686
1215
|
type: ViewChild,
|
|
687
1216
|
args: ['chipInput']
|
|
1217
|
+
}], dialogList: [{
|
|
1218
|
+
type: ViewChild,
|
|
1219
|
+
args: ['dialogList']
|
|
1220
|
+
}], onDocumentClick: [{
|
|
1221
|
+
type: HostListener,
|
|
1222
|
+
args: ['document:click', ['$event']]
|
|
688
1223
|
}] } });
|
|
689
1224
|
|
|
690
1225
|
class PtrFormComponent {
|
|
@@ -707,7 +1242,7 @@ class PtrFormComponent {
|
|
|
707
1242
|
const group = {};
|
|
708
1243
|
this.config.fields.forEach(field => {
|
|
709
1244
|
// Initialize array fields with empty arrays
|
|
710
|
-
if (field.type === 'chips') {
|
|
1245
|
+
if (field.type === 'chips' || field.type === 'multi-select') {
|
|
711
1246
|
group[field.name] = [field.value || [], field.validators || []];
|
|
712
1247
|
}
|
|
713
1248
|
else {
|
|
@@ -725,7 +1260,7 @@ class PtrFormComponent {
|
|
|
725
1260
|
this.formGroup.reset();
|
|
726
1261
|
this.config.fields.forEach(field => {
|
|
727
1262
|
const control = this.formGroup.get(field.name);
|
|
728
|
-
if (field.type === 'chips') {
|
|
1263
|
+
if (field.type === 'chips' || field.type === 'multi-select') {
|
|
729
1264
|
control?.setValue(field.value || [], { emitEvent: false });
|
|
730
1265
|
}
|
|
731
1266
|
else {
|
|
@@ -769,19 +1304,20 @@ class PtrFormComponent {
|
|
|
769
1304
|
}
|
|
770
1305
|
return false;
|
|
771
1306
|
}
|
|
772
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
773
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n @if (error) {\r\n <div class=\"gform_validation_errors\">\r\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n </div>\r\n }\r\n\r\n @if (config.title) {\r\n <div class=\"gform_heading\">\r\n <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <div class=\"gform_fields\">\r\n\r\n @for (field of config.fields; track field.name) {\r\n @if(isFieldVisible(field)) {\r\n\r\n <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\r\n [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\r\n\r\n @switch (field.type) {\r\n @case ('select') {\r\n <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n @case ('multi-select') {\r\n <ptr-multi-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\"\r\n [maxSelections]=\"field.maxSelections\" />\r\n }\r\n @case ('chips') {\r\n <ptr-chip-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [description]=\"field.description\"\r\n [maxItems]=\"field.maxItems\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n @default {\r\n <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\r\n [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n }\r\n\r\n @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\r\n <div class=\"gfield_description validation_message gfield_validation_message\">\r\n @if (formGroup.get(field.name)?.errors?.['required']) {\r\n This field is required.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['email']) {\r\n Please enter a valid email address.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['minlength']) {\r\n Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['maxlength']) {\r\n Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['pattern']) {\r\n Please match the required format.\r\n }\r\n </div>\r\n }\r\n @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid &&\r\n formGroup.get(field.name)?.touched) {\r\n @for (error of formGroup.errors | keyvalue; track error) {\r\n @if (field.validationMessages[error.key]) {\r\n <div class=\"gfield_description validation_message gfield_validation_message\">\r\n {{ field.validationMessages[error.key] }}\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if(config.submitText){\r\n <div class=\"gform_footer\">\r\n <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\"\r\n [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{config.submitText}}</ptr-button>\r\n </div>\r\n }\r\n\r\n </form>\r\n</div>\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: PtrSelectComponent, selector: "ptr-select", inputs: ["options", "showSearch", "placeholder", "label", "description", "labelPosition"], outputs: ["selectionChange"] }, { kind: "component", type: PtrMultiSelectComponent, selector: "ptr-multi-select", inputs: ["options", "showSearch", "placeholder", "label", "description", "labelPosition", "maxSelections", "showSelectAll"], outputs: ["selectionChange"] }, { kind: "component", type: PtrInputComponent, selector: "ptr-input", inputs: ["type", "label", "placeholder", "autocomplete", "description", "dialogHelpText", "searchFn", "labelPosition"] }, { kind: "component", type: PtrChipInputComponent, selector: "ptr-chip-input", inputs: ["label", "placeholder", "description", "labelPosition", "maxItems", "suggestions", "autoReopenAfterSelect"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
774
1309
|
}
|
|
775
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrFormComponent, decorators: [{
|
|
776
1311
|
type: Component,
|
|
777
1312
|
args: [{ selector: 'ptr-form', imports: [
|
|
778
1313
|
CommonModule,
|
|
779
1314
|
ReactiveFormsModule,
|
|
780
1315
|
PtrButtonComponent,
|
|
781
1316
|
PtrSelectComponent,
|
|
1317
|
+
PtrMultiSelectComponent,
|
|
782
1318
|
PtrInputComponent,
|
|
783
1319
|
PtrChipInputComponent
|
|
784
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n @if (error) {\r\n <div class=\"gform_validation_errors\">\r\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n </div>\r\n }\r\n\r\n @if (config.title) {\r\n <div class=\"gform_heading\">\r\n <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <div class=\"gform_fields\">\r\n\r\n @for (field of config.fields; track field.name) {\r\n @if(isFieldVisible(field)) {\r\n\r\n <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\r\n [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\r\n\r\n @switch (field.type) {\r\n @case ('select') {\r\n <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n @case ('chips') {\r\n <ptr-chip-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [description]=\"field.description\"\r\n [maxItems]=\"field.maxItems\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n @default {\r\n <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\r\n [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n }\r\n\r\n @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\r\n <div class=\"gfield_description validation_message gfield_validation_message\">\r\n @if (formGroup.get(field.name)?.errors?.['required']) {\r\n This field is required.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['email']) {\r\n Please enter a valid email address.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['minlength']) {\r\n Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['maxlength']) {\r\n Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['pattern']) {\r\n Please match the required format.\r\n }\r\n </div>\r\n }\r\n @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid &&\r\n formGroup.get(field.name)?.touched) {\r\n @for (error of formGroup.errors | keyvalue; track error) {\r\n @if (field.validationMessages[error.key]) {\r\n <div class=\"gfield_description validation_message gfield_validation_message\">\r\n {{ field.validationMessages[error.key] }}\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if(config.submitText){\r\n <div class=\"gform_footer\">\r\n <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\"\r\n [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{config.submitText}}</ptr-button>\r\n </div>\r\n }\r\n\r\n </form>\r\n</div>\r\n" }]
|
|
1320
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n @if (error) {\r\n <div class=\"gform_validation_errors\">\r\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n </div>\r\n }\r\n\r\n @if (config.title) {\r\n <div class=\"gform_heading\">\r\n <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <div class=\"gform_fields\">\r\n\r\n @for (field of config.fields; track field.name) {\r\n @if(isFieldVisible(field)) {\r\n\r\n <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\r\n [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\r\n\r\n @switch (field.type) {\r\n @case ('select') {\r\n <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n @case ('multi-select') {\r\n <ptr-multi-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\"\r\n [maxSelections]=\"field.maxSelections\" />\r\n }\r\n @case ('chips') {\r\n <ptr-chip-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [description]=\"field.description\"\r\n [maxItems]=\"field.maxItems\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n @default {\r\n <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\r\n [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\r\n [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\r\n }\r\n }\r\n\r\n @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\r\n <div class=\"gfield_description validation_message gfield_validation_message\">\r\n @if (formGroup.get(field.name)?.errors?.['required']) {\r\n This field is required.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['email']) {\r\n Please enter a valid email address.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['minlength']) {\r\n Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['maxlength']) {\r\n Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\r\n }\r\n @if (formGroup.get(field.name)?.errors?.['pattern']) {\r\n Please match the required format.\r\n }\r\n </div>\r\n }\r\n @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid &&\r\n formGroup.get(field.name)?.touched) {\r\n @for (error of formGroup.errors | keyvalue; track error) {\r\n @if (field.validationMessages[error.key]) {\r\n <div class=\"gfield_description validation_message gfield_validation_message\">\r\n {{ field.validationMessages[error.key] }}\r\n </div>\r\n }\r\n }\r\n }\r\n </div>\r\n }\r\n }\r\n </div>\r\n\r\n @if(config.submitText){\r\n <div class=\"gform_footer\">\r\n <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\"\r\n [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{config.submitText}}</ptr-button>\r\n </div>\r\n }\r\n\r\n </form>\r\n</div>\r\n" }]
|
|
785
1321
|
}], propDecorators: { config: [{
|
|
786
1322
|
type: Input
|
|
787
1323
|
}], loading: [{
|
|
@@ -828,10 +1364,10 @@ class PtrTitleComponent {
|
|
|
828
1364
|
}
|
|
829
1365
|
return route;
|
|
830
1366
|
}
|
|
831
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", inputs: { styleClass: "styleClass", wrapperStyleClass: "wrapperStyleClass", screenReaderOnly: "screenReaderOnly" }, ngImport: i0, template: "@if ((hideTitle$|async) === false) {\r\n @if(wrapperStyleClass) {\r\n <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\r\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n </header>\r\n } @else {\r\n <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\r\n }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
833
1369
|
}
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTitleComponent, decorators: [{
|
|
835
1371
|
type: Component,
|
|
836
1372
|
args: [{ selector: 'ptr-title', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((hideTitle$|async) === false) {\r\n @if(wrapperStyleClass) {\r\n <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\r\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n </header>\r\n } @else {\r\n <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\r\n }\r\n}\r\n" }]
|
|
837
1373
|
}], propDecorators: { styleClass: [{
|
|
@@ -843,10 +1379,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
843
1379
|
}] } });
|
|
844
1380
|
|
|
845
1381
|
class PtrLoadingSpinnerComponent {
|
|
846
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
847
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0
|
|
1382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PtrLoadingSpinnerComponent, isStandalone: true, selector: "ptr-loading-spinner", ngImport: i0, template: `<div class="ptr-progress-spinner"></div>`, isInline: true, styles: [":host{display:inline-block;line-height:0}.ptr-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.ptr-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.ptr-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
848
1384
|
}
|
|
849
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
|
|
850
1386
|
type: Component,
|
|
851
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"] }]
|
|
852
1388
|
}] });
|
|
@@ -915,10 +1451,10 @@ class PtrLoadingSpinnerDirective {
|
|
|
915
1451
|
removeBlurEffect() {
|
|
916
1452
|
this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
|
|
917
1453
|
}
|
|
918
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
919
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.0
|
|
1454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1455
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.0", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
|
|
920
1456
|
}
|
|
921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
|
|
922
1458
|
type: Directive,
|
|
923
1459
|
args: [{
|
|
924
1460
|
selector: '[ptrLoadingSpinner]'
|
|
@@ -957,7 +1493,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
957
1493
|
* - React to loading changes: effect(() => console.log('Loading:', this.loadingService.isLoading('areaName')()))
|
|
958
1494
|
*/
|
|
959
1495
|
class PtrLoadingService {
|
|
960
|
-
globalTaskCount = signal(0);
|
|
1496
|
+
globalTaskCount = signal(0, ...(ngDevMode ? [{ debugName: "globalTaskCount" }] : []));
|
|
961
1497
|
loadingAreas = new Map();
|
|
962
1498
|
isLoading(area) {
|
|
963
1499
|
if (!area) {
|
|
@@ -1015,10 +1551,10 @@ class PtrLoadingService {
|
|
|
1015
1551
|
updateTaskCount(taskCount, increment) {
|
|
1016
1552
|
taskCount.update(count => increment ? count + 1 : Math.max(0, count - 1));
|
|
1017
1553
|
}
|
|
1018
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1019
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0
|
|
1554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1555
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
|
|
1020
1556
|
}
|
|
1021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrLoadingService, decorators: [{
|
|
1022
1558
|
type: Injectable,
|
|
1023
1559
|
args: [{
|
|
1024
1560
|
providedIn: 'root'
|
|
@@ -1051,10 +1587,10 @@ class PtrDialogComponent {
|
|
|
1051
1587
|
setData(data) {
|
|
1052
1588
|
this.data = data;
|
|
1053
1589
|
}
|
|
1054
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1055
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1590
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { title: "title", message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle", contentTemplate: "contentTemplate", hasDefaultContent: "hasDefaultContent", data: "data" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\n <div class=\"ptr-modal__content\">\n\n <div class=\"ptr-modal__header\">\n <h2 class=\"ptr-modal__title\">{{title}}</h2>\n <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">×</button>\n </div>\n\n @if (hasDefaultContent && !contentTemplate) {\n <p>{{ message }}</p>\n }\n\n @if (contentTemplate) {\n <ng-container *ngTemplateOutlet=\"contentTemplate; context: {$implicit: data, dialogInstance: this}\"></ng-container>\n }\n\n <div class=\"ptr-modal__actions\">\n <ptr-button buttonStyle=\"secondary\" (clicked)=\"close()\" [isSmallSize]=\"true\">Cancel</ptr-button>\n <ptr-button class=\"ml-auto\" [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\"\n [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\n </div>\n\n </div>\n</dialog>\n", styles: [".ptr-modal{border-radius:min(var(--wp--custom--default-border-radius),6px);border:none;padding:.75rem}.ptr-modal__content{padding:.75rem;position:relative}.ptr-modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ptr-modal__header h2{margin:0;font-size:calc(var(--wp--preset--font-size--medium) * 1.125)}.ptr-modal__close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1.5rem;transform:translateY(-25%)}.ptr-modal__close:hover,.ptr-modal__close:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.ptr-modal__actions{margin-top:20px;text-align:right;display:flex;justify-content:space-between}dialog.ptr-modal{opacity:0;transition:all .2s}dialog.ptr-modal[open]{opacity:1}@starting-style{dialog.ptr-modal[open]{opacity:0}}dialog.ptr-modal::backdrop{opacity:0;background-color:#0000;transition:all .2s}dialog.ptr-modal[open]::backdrop{background-color:#25273499;opacity:1}@starting-style{dialog.ptr-modal[open]::backdrop{opacity:0;background-color:#0000}}\n"], dependencies: [{ kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1056
1592
|
}
|
|
1057
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogComponent, decorators: [{
|
|
1058
1594
|
type: Component,
|
|
1059
1595
|
args: [{ selector: 'ptr-dialog', imports: [
|
|
1060
1596
|
PtrButtonComponent,
|
|
@@ -1082,13 +1618,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
1082
1618
|
}] } });
|
|
1083
1619
|
|
|
1084
1620
|
class PtrDialogService {
|
|
1085
|
-
appRef;
|
|
1086
|
-
injector;
|
|
1621
|
+
appRef = inject(ApplicationRef);
|
|
1622
|
+
injector = inject(EnvironmentInjector);
|
|
1087
1623
|
dialogComponentRef = null;
|
|
1088
|
-
constructor(appRef, injector) {
|
|
1089
|
-
this.appRef = appRef;
|
|
1090
|
-
this.injector = injector;
|
|
1091
|
-
}
|
|
1092
1624
|
open(options) {
|
|
1093
1625
|
const dialogResult$ = new Subject();
|
|
1094
1626
|
this.dialogComponentRef = createComponent(PtrDialogComponent, {
|
|
@@ -1127,15 +1659,15 @@ class PtrDialogService {
|
|
|
1127
1659
|
this.dialogComponentRef = null;
|
|
1128
1660
|
}
|
|
1129
1661
|
}
|
|
1130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1131
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0
|
|
1662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1663
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
|
|
1132
1664
|
}
|
|
1133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrDialogService, decorators: [{
|
|
1134
1666
|
type: Injectable,
|
|
1135
1667
|
args: [{
|
|
1136
1668
|
providedIn: 'root'
|
|
1137
1669
|
}]
|
|
1138
|
-
}]
|
|
1670
|
+
}] });
|
|
1139
1671
|
|
|
1140
1672
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1141
1673
|
class PtrTooltipComponent {
|
|
@@ -1154,10 +1686,10 @@ class PtrTooltipComponent {
|
|
|
1154
1686
|
this.tooltipDialog.nativeElement.close();
|
|
1155
1687
|
}, 200); // Small delay to allow moving mouse to tooltip
|
|
1156
1688
|
}
|
|
1157
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.0
|
|
1689
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.0", type: PtrTooltipComponent, isStandalone: true, selector: "ptr-tooltip", inputs: { content: "content" }, viewQueries: [{ propertyName: "tooltipDialog", first: true, predicate: ["tooltipDialog"], descendants: true }], ngImport: i0, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1159
1691
|
}
|
|
1160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTooltipComponent, decorators: [{
|
|
1161
1693
|
type: Component,
|
|
1162
1694
|
args: [{ selector: 'ptr-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\r\n <ng-content></ng-content>\r\n</span>\r\n<dialog #tooltipDialog class=\"ptr-tooltip\">\r\n <div class=\"ptr-tooltip__content\">{{ content }}</div>\r\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"] }]
|
|
1163
1695
|
}], propDecorators: { content: [{
|
|
@@ -1175,7 +1707,7 @@ class PtrBreadcrumbsComponent {
|
|
|
1175
1707
|
breadcrumbs = computed(() => {
|
|
1176
1708
|
this.routeEvents();
|
|
1177
1709
|
return this.createBreadcrumbs(this.activatedRoute.root);
|
|
1178
|
-
});
|
|
1710
|
+
}, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
1179
1711
|
createBreadcrumbs(route, routeUrl = '', breadcrumbs = []) {
|
|
1180
1712
|
const routeChildren = route.children;
|
|
1181
1713
|
if (routeChildren.length === 0) {
|
|
@@ -1211,10 +1743,10 @@ class PtrBreadcrumbsComponent {
|
|
|
1211
1743
|
}
|
|
1212
1744
|
return breadcrumbReturnInfo;
|
|
1213
1745
|
}
|
|
1214
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1215
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrBreadcrumbsComponent, isStandalone: true, selector: "ptr-breadcrumbs", inputs: { showFirstSeparator: "showFirstSeparator" }, ngImport: i0, template: "@if (breadcrumbs().length > 0) {\n <nav aria-label=\"breadcrumb\" class=\"breadcrumb-wrapper\">\n <ol class=\"breadcrumb\" [class.breadcrumb--show-first-separator]=\"showFirstSeparator\">\n @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let last = $last) {\n <li class=\"breadcrumb-item\" [class.breadcrumb-item--active]=\"last\">\n @if (!last) {\n <a class=\"breadcrumb-item-label\" [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n }\n @if (last) {\n <span class=\"breadcrumb-item-label\">{{ breadcrumb.label }}</span>\n }\n </li>\n }\n </ol>\n </nav>\n}\n", styles: [".breadcrumb{--breadcrumb-item-color: #ababab;--breadcrumb-item-font-size: var(--wp--preset--font-size--large, 1.25rem);list-style:none;border-radius:.25rem;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:2px}.breadcrumb-item{display:inline-block;margin:0}.breadcrumb-item--active .breadcrumb-item-label{color:inherit;font-weight:700}.breadcrumb-item-label{text-decoration:none;padding:4px;display:inline-block;color:var(--breadcrumb-item-color);font-size:var(--breadcrumb-item-font-size);font-weight:500;border-bottom:2px solid transparent}.breadcrumb-item a{transition:border-bottom .25s,color .25s}.breadcrumb-item a:hover,.breadcrumb-item a:focus{border-bottom-color:var(--wp--preset--color--primary)}.breadcrumb-item:first-child .breadcrumb-item-label{padding-left:0}.breadcrumb-item+.breadcrumb-item .breadcrumb-item-label:before{content:\"/\";padding-right:8px}.breadcrumb.breadcrumb--show-first-separator .breadcrumb-item-label:before{content:\"/\";padding-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1216
1748
|
}
|
|
1217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
|
|
1218
1750
|
type: Component,
|
|
1219
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"] }]
|
|
1220
1752
|
}], propDecorators: { showFirstSeparator: [{
|
|
@@ -1224,11 +1756,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
1224
1756
|
class PtrTabComponent {
|
|
1225
1757
|
label;
|
|
1226
1758
|
link;
|
|
1227
|
-
active = signal(false);
|
|
1228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1759
|
+
active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
1760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrTabComponent, isStandalone: true, selector: "ptr-tab", inputs: { label: "label", link: "link" }, ngImport: i0, template: '@if(active()){<ng-content></ng-content>}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1230
1762
|
}
|
|
1231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabComponent, decorators: [{
|
|
1232
1764
|
type: Component,
|
|
1233
1765
|
args: [{
|
|
1234
1766
|
selector: 'ptr-tab',
|
|
@@ -1246,10 +1778,10 @@ class PtrTabsComponent {
|
|
|
1246
1778
|
buttons;
|
|
1247
1779
|
router = inject(Router);
|
|
1248
1780
|
destroyRef = inject(DestroyRef);
|
|
1249
|
-
tabs = signal([]);
|
|
1250
|
-
activeTabIndex = signal(0);
|
|
1251
|
-
useLinks = signal(false);
|
|
1252
|
-
sliderPosition = signal({ transform: 'translateX(0)', width: '0' });
|
|
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" }] : []));
|
|
1253
1785
|
constructor() {
|
|
1254
1786
|
effect(() => {
|
|
1255
1787
|
const activeTab = this.tabs().find(tab => tab.active());
|
|
@@ -1291,10 +1823,10 @@ class PtrTabsComponent {
|
|
|
1291
1823
|
});
|
|
1292
1824
|
}
|
|
1293
1825
|
}
|
|
1294
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1295
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrTabsComponent, isStandalone: true, selector: "ptr-tabs", queries: [{ propertyName: "tabComponents", predicate: PtrTabComponent }], viewQueries: [{ propertyName: "buttons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\r\n @for (tab of tabs(); track $index; let i = $index) {\r\n <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\r\n [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\r\n }\r\n\r\n <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\r\n</div>\r\n\r\n@if (!useLinks()) {\r\n<div class=\"tab-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n}\r\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1296
1828
|
}
|
|
1297
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrTabsComponent, decorators: [{
|
|
1298
1830
|
type: Component,
|
|
1299
1831
|
args: [{ selector: 'ptr-tabs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs-container\" role=\"tablist\">\r\n @for (tab of tabs(); track $index; let i = $index) {\r\n <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\r\n [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\r\n }\r\n\r\n <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\r\n</div>\r\n\r\n@if (!useLinks()) {\r\n<div class=\"tab-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n}\r\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\n"] }]
|
|
1300
1832
|
}], ctorParameters: () => [], propDecorators: { tabComponents: [{
|
|
@@ -1310,7 +1842,7 @@ class PtrToasterService {
|
|
|
1310
1842
|
injector = inject(Injector);
|
|
1311
1843
|
environmentInjector = inject(EnvironmentInjector);
|
|
1312
1844
|
appRef = inject(ApplicationRef);
|
|
1313
|
-
toasts = signal([]);
|
|
1845
|
+
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
|
|
1314
1846
|
counter = 0;
|
|
1315
1847
|
toasterComponentRef = null;
|
|
1316
1848
|
constructor() {
|
|
@@ -1343,10 +1875,10 @@ class PtrToasterService {
|
|
|
1343
1875
|
remove(id) {
|
|
1344
1876
|
this.toasts.update(toasts => toasts.filter(t => t.id !== id));
|
|
1345
1877
|
}
|
|
1346
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1347
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.0
|
|
1878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1879
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterService, providedIn: 'root' });
|
|
1348
1880
|
}
|
|
1349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterService, decorators: [{
|
|
1350
1882
|
type: Injectable,
|
|
1351
1883
|
args: [{
|
|
1352
1884
|
providedIn: 'root'
|
|
@@ -1355,10 +1887,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
1355
1887
|
|
|
1356
1888
|
class PtrToasterComponent {
|
|
1357
1889
|
toasterService = inject(PtrToasterService);
|
|
1358
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.0
|
|
1359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.0
|
|
1890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.0", type: PtrToasterComponent, isStandalone: true, selector: "ptr-toaster", ngImport: i0, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\r\n @for (toast of toasterService.getToasts()(); track toast.id) {\r\n <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\r\n <span>{{toast.message}}</span>\r\n <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>×</span></button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".toaster-container{position:fixed;top:20px;right:20px;z-index:1000}.toast{padding:10px 20px;margin-bottom:10px;border-radius:calc(var(--wp--custom--default-border-radius) / 2);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 2px 4px 2px #00000026}.success{background-color:var(--wp--preset--color--primary, #28a745)}.error{background-color:var(--wp--custom--color--error, #dc3545)}.info{background-color:var(--wp--preset--color--secondary, #17a2b8)}.warning{background-color:var(--wp--preset--color--secondary, #ffc107)}button{background:none;border:none;color:inherit;font-size:2em;cursor:pointer;font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1360
1892
|
}
|
|
1361
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.0", ngImport: i0, type: PtrToasterComponent, decorators: [{
|
|
1362
1894
|
type: Component,
|
|
1363
1895
|
args: [{ selector: 'ptr-toaster', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\r\n @for (toast of toasterService.getToasts()(); track toast.id) {\r\n <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\r\n <span>{{toast.message}}</span>\r\n <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>×</span></button>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".toaster-container{position:fixed;top:20px;right:20px;z-index:1000}.toast{padding:10px 20px;margin-bottom:10px;border-radius:calc(var(--wp--custom--default-border-radius) / 2);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 2px 4px 2px #00000026}.success{background-color:var(--wp--preset--color--primary, #28a745)}.error{background-color:var(--wp--custom--color--error, #dc3545)}.info{background-color:var(--wp--preset--color--secondary, #17a2b8)}.warning{background-color:var(--wp--preset--color--secondary, #ffc107)}button{background:none;border:none;color:inherit;font-size:2em;cursor:pointer;font-family:monospace}\n"] }]
|
|
1364
1896
|
}] });
|
|
@@ -1376,5 +1908,5 @@ var ptrToaster_component = /*#__PURE__*/Object.freeze({
|
|
|
1376
1908
|
* Generated bundle index. Do not edit.
|
|
1377
1909
|
*/
|
|
1378
1910
|
|
|
1379
|
-
export { PtrBreadcrumbsComponent, PtrButtonComponent, PtrChipInputComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrSelectComponent, PtrTabComponent, PtrTabsComponent, PtrTitleComponent, PtrToasterComponent, PtrToasterService, PtrTooltipComponent };
|
|
1911
|
+
export { PtrBreadcrumbsComponent, PtrButtonComponent, PtrChipInputComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrMultiSelectComponent, PtrSelectComponent, PtrTabComponent, PtrTabsComponent, PtrTitleComponent, PtrToasterComponent, PtrToasterService, PtrTooltipComponent };
|
|
1380
1912
|
//# sourceMappingURL=patter-ngx-components.mjs.map
|