@patter/ngx-components 20.0.4 → 20.0.6
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, ChangeDetectorRef, DestroyRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, createComponent, effect, ViewChildren, ContentChildren, Injector
|
|
2
|
+
import { Input, ChangeDetectionStrategy, Component, signal, EventEmitter, computed, Output, HostBinding, ViewChild, forwardRef, HostListener, ViewEncapsulation, inject, ChangeDetectorRef, DestroyRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, ApplicationRef, EnvironmentInjector, createComponent, effect, ViewChildren, ContentChildren, Injector } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/router';
|
|
4
4
|
import { RouterModule, RouterLink, Router, ActivatedRoute, TitleStrategy, NavigationEnd } from '@angular/router';
|
|
5
5
|
import * as i1$1 from '@angular/common';
|
|
@@ -12,10 +12,10 @@ import { take } from 'rxjs/operators';
|
|
|
12
12
|
|
|
13
13
|
class PtrMenuComponent {
|
|
14
14
|
menuItems = [];
|
|
15
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
16
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\n <ul class=\"menu\">\n @for (item of menuItems; track item.label) {\n <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n </li>\n }\n </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17
17
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template #contentTpl>\r\n <ng-content></ng-content>\r\n</ng-template>\r\n\r\n@if (isLink()) {\r\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\r\n (click)=\"onClick($event)\" [attr.aria-label]=\"ariaLabel ?? null\">\r\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</a>\r\n} @else {\r\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\"\r\n [attr.aria-label]=\"ariaLabel ?? null\">\r\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\r\n</button>\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
295
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: PtrDialogListComponent, isStandalone: true, selector: "ptr-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\r\n\r\n @if(dialogTitle) {\r\n <p class=\"dialog-title\">{{dialogTitle}}</p>\r\n }\r\n\r\n @if (showSearch) {\r\n <div>\r\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\r\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\r\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\r\n class=\"search-input\">\r\n </div>\r\n }\r\n\r\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\">\r\n @for (item of filteredOptions(); track item.label) {\r\n @if (item.type === 'option') {\r\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"item.value === value()\"\r\n [class.selected]=\"item.value === value()\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\r\n (click)=\"selectOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\r\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n {{ item.label }}\r\n </li>\r\n } @else {\r\n <li role=\"group\" [attr.aria-label]=\"item.label\">\r\n {{ item.label }}\r\n </li>\r\n @for (option of item.options!; track option.value) {\r\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"option.value === value()\"\r\n [class.selected]=\"option.value === value()\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\r\n (click)=\"selectOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\r\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\r\n {{ option.label }}\r\n </li>\r\n }\r\n }\r\n }\r\n </ul>\r\n\r\n</dialog>\r\n", styles: [".ptr-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:350px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit)}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
297
297
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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
|
-
return this.placeholder
|
|
344
|
-
});
|
|
343
|
+
return this.placeholder?.trim() || 'Select an option';
|
|
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.
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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.
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", 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.2.3", ngImport: i0, type: PtrMultiDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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.2.3", 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.2.3", ngImport: i0, type: PtrMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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.2.3", 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';
|
|
@@ -461,8 +909,8 @@ class PtrInputComponent {
|
|
|
461
909
|
searchTerms = new Subject();
|
|
462
910
|
hasSelectedOption = false;
|
|
463
911
|
inputId = `${this.componentId}-input`;
|
|
464
|
-
inputValue = signal('');
|
|
465
|
-
searchResultOptions = signal([]);
|
|
912
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
913
|
+
searchResultOptions = signal([], ...(ngDevMode ? [{ debugName: "searchResultOptions" }] : []));
|
|
466
914
|
onChange = () => { };
|
|
467
915
|
onTouched = () => { };
|
|
468
916
|
onDocumentClick(event) {
|
|
@@ -526,8 +974,8 @@ class PtrInputComponent {
|
|
|
526
974
|
this.input.nativeElement.disabled = isDisabled;
|
|
527
975
|
}
|
|
528
976
|
}
|
|
529
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
530
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
977
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
978
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
979
|
{
|
|
532
980
|
provide: NG_VALUE_ACCESSOR,
|
|
533
981
|
useExisting: forwardRef(() => PtrInputComponent),
|
|
@@ -535,7 +983,7 @@ class PtrInputComponent {
|
|
|
535
983
|
}
|
|
536
984
|
], 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
985
|
}
|
|
538
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
986
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrInputComponent, decorators: [{
|
|
539
987
|
type: Component,
|
|
540
988
|
args: [{ selector: 'ptr-input', imports: [
|
|
541
989
|
FormsModule,
|
|
@@ -582,12 +1030,19 @@ class PtrChipInputComponent {
|
|
|
582
1030
|
description = '';
|
|
583
1031
|
labelPosition = 'top';
|
|
584
1032
|
maxItems;
|
|
1033
|
+
suggestions;
|
|
1034
|
+
/**
|
|
1035
|
+
* Auto reopen the suggestions dialog after adding/selecting a chip (default true)
|
|
1036
|
+
* as long as maxItems has not been reached.
|
|
1037
|
+
*/
|
|
1038
|
+
autoReopenAfterSelect = true;
|
|
585
1039
|
chipInput;
|
|
1040
|
+
dialogList;
|
|
586
1041
|
componentId = Math.random().toString(36).substring(2);
|
|
587
1042
|
inputId = `${this.componentId}-input`;
|
|
588
|
-
inputValue = signal('');
|
|
589
|
-
chipItems = signal([]);
|
|
590
|
-
isDisabled = signal(false);
|
|
1043
|
+
inputValue = signal('', ...(ngDevMode ? [{ debugName: "inputValue" }] : []));
|
|
1044
|
+
chipItems = signal([], ...(ngDevMode ? [{ debugName: "chipItems" }] : []));
|
|
1045
|
+
isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
591
1046
|
tempInputControl = new FormControl('');
|
|
592
1047
|
onChange = () => { };
|
|
593
1048
|
onTouched = () => { };
|
|
@@ -607,6 +1062,7 @@ class PtrChipInputComponent {
|
|
|
607
1062
|
}
|
|
608
1063
|
this.tempInputControl.setValue('');
|
|
609
1064
|
this.chipInput.nativeElement.focus();
|
|
1065
|
+
this.maybeReopenDialog();
|
|
610
1066
|
}
|
|
611
1067
|
}
|
|
612
1068
|
removeChip(index) {
|
|
@@ -616,10 +1072,21 @@ class PtrChipInputComponent {
|
|
|
616
1072
|
this.onChange(newChips);
|
|
617
1073
|
}
|
|
618
1074
|
onKeyDown(event) {
|
|
1075
|
+
// Re-open dialog when typing if closed
|
|
1076
|
+
if (!this.dialogList?.isOpen?.() && this.hasSuggestions() && event.key.length === 1 && !event.metaKey && !event.ctrlKey && !event.altKey) {
|
|
1077
|
+
this.openDialog();
|
|
1078
|
+
}
|
|
619
1079
|
if (event.key === 'Enter' || event.key === ',') {
|
|
620
1080
|
event.preventDefault();
|
|
621
1081
|
this.addChip();
|
|
622
1082
|
}
|
|
1083
|
+
else if (event.key === 'ArrowDown') {
|
|
1084
|
+
event.preventDefault();
|
|
1085
|
+
this.openDialog();
|
|
1086
|
+
}
|
|
1087
|
+
else if (event.key === 'Escape') {
|
|
1088
|
+
this.closeDialog();
|
|
1089
|
+
}
|
|
623
1090
|
else if (event.key === 'Backspace' && !this.inputValue() && this.chipItems().length > 0) {
|
|
624
1091
|
// Remove the last chip when backspace is pressed and input is empty
|
|
625
1092
|
this.removeChip(this.chipItems().length - 1);
|
|
@@ -627,11 +1094,67 @@ class PtrChipInputComponent {
|
|
|
627
1094
|
}
|
|
628
1095
|
onBlur() {
|
|
629
1096
|
// Add the chip when the input loses focus if there's a value
|
|
630
|
-
if
|
|
1097
|
+
// but only if the suggestions dialog isn't open
|
|
1098
|
+
if (!this.dialogList?.isOpen?.() && this.inputValue().trim()) {
|
|
631
1099
|
this.addChip();
|
|
632
1100
|
}
|
|
633
1101
|
this.onTouched();
|
|
634
1102
|
}
|
|
1103
|
+
onDocumentClick(event) {
|
|
1104
|
+
const target = event.target;
|
|
1105
|
+
const dialogEl = this.dialogList?.dialog?.nativeElement;
|
|
1106
|
+
const inputEl = this.chipInput?.nativeElement;
|
|
1107
|
+
if (this.dialogList?.isOpen?.() &&
|
|
1108
|
+
dialogEl && !dialogEl.contains(target) &&
|
|
1109
|
+
inputEl && !inputEl.contains(target)) {
|
|
1110
|
+
this.closeDialog();
|
|
1111
|
+
}
|
|
1112
|
+
}
|
|
1113
|
+
openDialog() {
|
|
1114
|
+
if (this.isDisabled() || (this.maxItems !== undefined && this.chipItems().length >= this.maxItems))
|
|
1115
|
+
return;
|
|
1116
|
+
if (!this.suggestions || this.suggestions.length === 0)
|
|
1117
|
+
return;
|
|
1118
|
+
this.dialogList?.openDialog?.();
|
|
1119
|
+
}
|
|
1120
|
+
closeDialog() {
|
|
1121
|
+
this.dialogList?.closeDialog?.();
|
|
1122
|
+
}
|
|
1123
|
+
onSuggestionSelected(optionValue) {
|
|
1124
|
+
if (!optionValue) {
|
|
1125
|
+
this.closeDialog();
|
|
1126
|
+
return;
|
|
1127
|
+
}
|
|
1128
|
+
this.closeDialog();
|
|
1129
|
+
this.addChipFromValue(optionValue);
|
|
1130
|
+
this.maybeReopenDialog();
|
|
1131
|
+
}
|
|
1132
|
+
addChipFromValue(value) {
|
|
1133
|
+
const trimmed = value.trim();
|
|
1134
|
+
if (!trimmed)
|
|
1135
|
+
return;
|
|
1136
|
+
if (this.maxItems !== undefined && this.chipItems().length >= this.maxItems)
|
|
1137
|
+
return;
|
|
1138
|
+
if (!this.chipItems().includes(trimmed)) {
|
|
1139
|
+
const newChips = [...this.chipItems(), trimmed];
|
|
1140
|
+
this.chipItems.set(newChips);
|
|
1141
|
+
this.onChange(newChips);
|
|
1142
|
+
}
|
|
1143
|
+
// Clear input and refocus for quick entry
|
|
1144
|
+
this.tempInputControl.setValue('');
|
|
1145
|
+
this.chipInput?.nativeElement.focus();
|
|
1146
|
+
}
|
|
1147
|
+
maybeReopenDialog() {
|
|
1148
|
+
if (this.autoReopenAfterSelect &&
|
|
1149
|
+
!this.isDisabled() &&
|
|
1150
|
+
(!this.maxItems || this.chipItems().length < this.maxItems) &&
|
|
1151
|
+
this.hasSuggestions()) {
|
|
1152
|
+
queueMicrotask(() => this.openDialog());
|
|
1153
|
+
}
|
|
1154
|
+
}
|
|
1155
|
+
hasSuggestions() {
|
|
1156
|
+
return !!(this.suggestions && this.suggestions.length > 0);
|
|
1157
|
+
}
|
|
635
1158
|
writeValue(value) {
|
|
636
1159
|
this.chipItems.set(value || []);
|
|
637
1160
|
}
|
|
@@ -650,28 +1173,29 @@ class PtrChipInputComponent {
|
|
|
650
1173
|
this.tempInputControl.enable();
|
|
651
1174
|
}
|
|
652
1175
|
}
|
|
653
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
654
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1176
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1177
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1178
|
{
|
|
656
1179
|
provide: NG_VALUE_ACCESSOR,
|
|
657
1180
|
useExisting: forwardRef(() => PtrChipInputComponent),
|
|
658
1181
|
multi: true
|
|
659
1182
|
}
|
|
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,
|
|
1183
|
+
], 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
1184
|
}
|
|
662
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1185
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrChipInputComponent, decorators: [{
|
|
663
1186
|
type: Component,
|
|
664
1187
|
args: [{ selector: 'ptr-chip-input', imports: [
|
|
665
1188
|
FormsModule,
|
|
666
1189
|
ReactiveFormsModule,
|
|
667
|
-
PtrButtonComponent
|
|
668
|
-
|
|
1190
|
+
PtrButtonComponent,
|
|
1191
|
+
PtrDialogListComponent
|
|
1192
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, providers: [
|
|
669
1193
|
{
|
|
670
1194
|
provide: NG_VALUE_ACCESSOR,
|
|
671
1195
|
useExisting: forwardRef(() => PtrChipInputComponent),
|
|
672
1196
|
multi: true
|
|
673
1197
|
}
|
|
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,
|
|
1198
|
+
], 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
1199
|
}], propDecorators: { label: [{
|
|
676
1200
|
type: Input
|
|
677
1201
|
}], placeholder: [{
|
|
@@ -682,9 +1206,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
682
1206
|
type: Input
|
|
683
1207
|
}], maxItems: [{
|
|
684
1208
|
type: Input
|
|
1209
|
+
}], suggestions: [{
|
|
1210
|
+
type: Input
|
|
1211
|
+
}], autoReopenAfterSelect: [{
|
|
1212
|
+
type: Input
|
|
685
1213
|
}], chipInput: [{
|
|
686
1214
|
type: ViewChild,
|
|
687
1215
|
args: ['chipInput']
|
|
1216
|
+
}], dialogList: [{
|
|
1217
|
+
type: ViewChild,
|
|
1218
|
+
args: ['dialogList']
|
|
1219
|
+
}], onDocumentClick: [{
|
|
1220
|
+
type: HostListener,
|
|
1221
|
+
args: ['document:click', ['$event']]
|
|
688
1222
|
}] } });
|
|
689
1223
|
|
|
690
1224
|
class PtrFormComponent {
|
|
@@ -707,7 +1241,7 @@ class PtrFormComponent {
|
|
|
707
1241
|
const group = {};
|
|
708
1242
|
this.config.fields.forEach(field => {
|
|
709
1243
|
// Initialize array fields with empty arrays
|
|
710
|
-
if (field.type === 'chips') {
|
|
1244
|
+
if (field.type === 'chips' || field.type === 'multi-select') {
|
|
711
1245
|
group[field.name] = [field.value || [], field.validators || []];
|
|
712
1246
|
}
|
|
713
1247
|
else {
|
|
@@ -725,7 +1259,7 @@ class PtrFormComponent {
|
|
|
725
1259
|
this.formGroup.reset();
|
|
726
1260
|
this.config.fields.forEach(field => {
|
|
727
1261
|
const control = this.formGroup.get(field.name);
|
|
728
|
-
if (field.type === 'chips') {
|
|
1262
|
+
if (field.type === 'chips' || field.type === 'multi-select') {
|
|
729
1263
|
control?.setValue(field.value || [], { emitEvent: false });
|
|
730
1264
|
}
|
|
731
1265
|
else {
|
|
@@ -769,19 +1303,20 @@ class PtrFormComponent {
|
|
|
769
1303
|
}
|
|
770
1304
|
return false;
|
|
771
1305
|
}
|
|
772
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
773
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1306
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1307
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1308
|
}
|
|
775
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1309
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrFormComponent, decorators: [{
|
|
776
1310
|
type: Component,
|
|
777
1311
|
args: [{ selector: 'ptr-form', imports: [
|
|
778
1312
|
CommonModule,
|
|
779
1313
|
ReactiveFormsModule,
|
|
780
1314
|
PtrButtonComponent,
|
|
781
1315
|
PtrSelectComponent,
|
|
1316
|
+
PtrMultiSelectComponent,
|
|
782
1317
|
PtrInputComponent,
|
|
783
1318
|
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" }]
|
|
1319
|
+
], 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
1320
|
}], propDecorators: { config: [{
|
|
786
1321
|
type: Input
|
|
787
1322
|
}], loading: [{
|
|
@@ -828,10 +1363,10 @@ class PtrTitleComponent {
|
|
|
828
1363
|
}
|
|
829
1364
|
return route;
|
|
830
1365
|
}
|
|
831
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
832
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1366
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1367
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1368
|
}
|
|
834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1369
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTitleComponent, decorators: [{
|
|
835
1370
|
type: Component,
|
|
836
1371
|
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
1372
|
}], propDecorators: { styleClass: [{
|
|
@@ -843,10 +1378,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
843
1378
|
}] } });
|
|
844
1379
|
|
|
845
1380
|
class PtrLoadingSpinnerComponent {
|
|
846
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
847
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1381
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1382
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", 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
1383
|
}
|
|
849
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
|
|
850
1385
|
type: Component,
|
|
851
1386
|
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
1387
|
}] });
|
|
@@ -915,10 +1450,10 @@ class PtrLoadingSpinnerDirective {
|
|
|
915
1450
|
removeBlurEffect() {
|
|
916
1451
|
this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
|
|
917
1452
|
}
|
|
918
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
919
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.
|
|
1453
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1454
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
|
|
920
1455
|
}
|
|
921
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1456
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
|
|
922
1457
|
type: Directive,
|
|
923
1458
|
args: [{
|
|
924
1459
|
selector: '[ptrLoadingSpinner]'
|
|
@@ -957,7 +1492,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
957
1492
|
* - React to loading changes: effect(() => console.log('Loading:', this.loadingService.isLoading('areaName')()))
|
|
958
1493
|
*/
|
|
959
1494
|
class PtrLoadingService {
|
|
960
|
-
globalTaskCount = signal(0);
|
|
1495
|
+
globalTaskCount = signal(0, ...(ngDevMode ? [{ debugName: "globalTaskCount" }] : []));
|
|
961
1496
|
loadingAreas = new Map();
|
|
962
1497
|
isLoading(area) {
|
|
963
1498
|
if (!area) {
|
|
@@ -1015,10 +1550,10 @@ class PtrLoadingService {
|
|
|
1015
1550
|
updateTaskCount(taskCount, increment) {
|
|
1016
1551
|
taskCount.update(count => increment ? count + 1 : Math.max(0, count - 1));
|
|
1017
1552
|
}
|
|
1018
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1019
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1553
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1554
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
|
|
1020
1555
|
}
|
|
1021
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1556
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrLoadingService, decorators: [{
|
|
1022
1557
|
type: Injectable,
|
|
1023
1558
|
args: [{
|
|
1024
1559
|
providedIn: 'root'
|
|
@@ -1051,10 +1586,10 @@ class PtrDialogComponent {
|
|
|
1051
1586
|
setData(data) {
|
|
1052
1587
|
this.data = data;
|
|
1053
1588
|
}
|
|
1054
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1055
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1589
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1590
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1591
|
}
|
|
1057
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1592
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrDialogComponent, decorators: [{
|
|
1058
1593
|
type: Component,
|
|
1059
1594
|
args: [{ selector: 'ptr-dialog', imports: [
|
|
1060
1595
|
PtrButtonComponent,
|
|
@@ -1082,13 +1617,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
1082
1617
|
}] } });
|
|
1083
1618
|
|
|
1084
1619
|
class PtrDialogService {
|
|
1085
|
-
appRef;
|
|
1086
|
-
injector;
|
|
1620
|
+
appRef = inject(ApplicationRef);
|
|
1621
|
+
injector = inject(EnvironmentInjector);
|
|
1087
1622
|
dialogComponentRef = null;
|
|
1088
|
-
constructor(appRef, injector) {
|
|
1089
|
-
this.appRef = appRef;
|
|
1090
|
-
this.injector = injector;
|
|
1091
|
-
}
|
|
1092
1623
|
open(options) {
|
|
1093
1624
|
const dialogResult$ = new Subject();
|
|
1094
1625
|
this.dialogComponentRef = createComponent(PtrDialogComponent, {
|
|
@@ -1127,15 +1658,15 @@ class PtrDialogService {
|
|
|
1127
1658
|
this.dialogComponentRef = null;
|
|
1128
1659
|
}
|
|
1129
1660
|
}
|
|
1130
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1131
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1661
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1662
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
|
|
1132
1663
|
}
|
|
1133
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrDialogService, decorators: [{
|
|
1134
1665
|
type: Injectable,
|
|
1135
1666
|
args: [{
|
|
1136
1667
|
providedIn: 'root'
|
|
1137
1668
|
}]
|
|
1138
|
-
}]
|
|
1669
|
+
}] });
|
|
1139
1670
|
|
|
1140
1671
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
1141
1672
|
class PtrTooltipComponent {
|
|
@@ -1154,10 +1685,10 @@ class PtrTooltipComponent {
|
|
|
1154
1685
|
this.tooltipDialog.nativeElement.close();
|
|
1155
1686
|
}, 200); // Small delay to allow moving mouse to tooltip
|
|
1156
1687
|
}
|
|
1157
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1158
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.
|
|
1688
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1689
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.2.3", 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
1690
|
}
|
|
1160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1691
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTooltipComponent, decorators: [{
|
|
1161
1692
|
type: Component,
|
|
1162
1693
|
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
1694
|
}], propDecorators: { content: [{
|
|
@@ -1175,7 +1706,7 @@ class PtrBreadcrumbsComponent {
|
|
|
1175
1706
|
breadcrumbs = computed(() => {
|
|
1176
1707
|
this.routeEvents();
|
|
1177
1708
|
return this.createBreadcrumbs(this.activatedRoute.root);
|
|
1178
|
-
});
|
|
1709
|
+
}, ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
1179
1710
|
createBreadcrumbs(route, routeUrl = '', breadcrumbs = []) {
|
|
1180
1711
|
const routeChildren = route.children;
|
|
1181
1712
|
if (routeChildren.length === 0) {
|
|
@@ -1211,10 +1742,10 @@ class PtrBreadcrumbsComponent {
|
|
|
1211
1742
|
}
|
|
1212
1743
|
return breadcrumbReturnInfo;
|
|
1213
1744
|
}
|
|
1214
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1215
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1745
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1746
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1747
|
}
|
|
1217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1748
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
|
|
1218
1749
|
type: Component,
|
|
1219
1750
|
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
1751
|
}], propDecorators: { showFirstSeparator: [{
|
|
@@ -1224,11 +1755,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
1224
1755
|
class PtrTabComponent {
|
|
1225
1756
|
label;
|
|
1226
1757
|
link;
|
|
1227
|
-
active = signal(false);
|
|
1228
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1229
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1758
|
+
active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
1759
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1760
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1761
|
}
|
|
1231
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTabComponent, decorators: [{
|
|
1232
1763
|
type: Component,
|
|
1233
1764
|
args: [{
|
|
1234
1765
|
selector: 'ptr-tab',
|
|
@@ -1246,10 +1777,10 @@ class PtrTabsComponent {
|
|
|
1246
1777
|
buttons;
|
|
1247
1778
|
router = inject(Router);
|
|
1248
1779
|
destroyRef = inject(DestroyRef);
|
|
1249
|
-
tabs = signal([]);
|
|
1250
|
-
activeTabIndex = signal(0);
|
|
1251
|
-
useLinks = signal(false);
|
|
1252
|
-
sliderPosition = signal({ transform: 'translateX(0)', width: '0' });
|
|
1780
|
+
tabs = signal([], ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
1781
|
+
activeTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "activeTabIndex" }] : []));
|
|
1782
|
+
useLinks = signal(false, ...(ngDevMode ? [{ debugName: "useLinks" }] : []));
|
|
1783
|
+
sliderPosition = signal({ transform: 'translateX(0)', width: '0' }, ...(ngDevMode ? [{ debugName: "sliderPosition" }] : []));
|
|
1253
1784
|
constructor() {
|
|
1254
1785
|
effect(() => {
|
|
1255
1786
|
const activeTab = this.tabs().find(tab => tab.active());
|
|
@@ -1291,10 +1822,10 @@ class PtrTabsComponent {
|
|
|
1291
1822
|
});
|
|
1292
1823
|
}
|
|
1293
1824
|
}
|
|
1294
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1295
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1825
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1826
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1827
|
}
|
|
1297
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1828
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrTabsComponent, decorators: [{
|
|
1298
1829
|
type: Component,
|
|
1299
1830
|
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
1831
|
}], ctorParameters: () => [], propDecorators: { tabComponents: [{
|
|
@@ -1310,7 +1841,7 @@ class PtrToasterService {
|
|
|
1310
1841
|
injector = inject(Injector);
|
|
1311
1842
|
environmentInjector = inject(EnvironmentInjector);
|
|
1312
1843
|
appRef = inject(ApplicationRef);
|
|
1313
|
-
toasts = signal([]);
|
|
1844
|
+
toasts = signal([], ...(ngDevMode ? [{ debugName: "toasts" }] : []));
|
|
1314
1845
|
counter = 0;
|
|
1315
1846
|
toasterComponentRef = null;
|
|
1316
1847
|
constructor() {
|
|
@@ -1343,10 +1874,10 @@ class PtrToasterService {
|
|
|
1343
1874
|
remove(id) {
|
|
1344
1875
|
this.toasts.update(toasts => toasts.filter(t => t.id !== id));
|
|
1345
1876
|
}
|
|
1346
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1347
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.
|
|
1877
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1878
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrToasterService, providedIn: 'root' });
|
|
1348
1879
|
}
|
|
1349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1880
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrToasterService, decorators: [{
|
|
1350
1881
|
type: Injectable,
|
|
1351
1882
|
args: [{
|
|
1352
1883
|
providedIn: 'root'
|
|
@@ -1355,10 +1886,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.0.4", ngImpor
|
|
|
1355
1886
|
|
|
1356
1887
|
class PtrToasterComponent {
|
|
1357
1888
|
toasterService = inject(PtrToasterService);
|
|
1358
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.
|
|
1359
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.
|
|
1889
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1890
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", 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
1891
|
}
|
|
1361
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.
|
|
1892
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: PtrToasterComponent, decorators: [{
|
|
1362
1893
|
type: Component,
|
|
1363
1894
|
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
1895
|
}] });
|
|
@@ -1376,5 +1907,5 @@ var ptrToaster_component = /*#__PURE__*/Object.freeze({
|
|
|
1376
1907
|
* Generated bundle index. Do not edit.
|
|
1377
1908
|
*/
|
|
1378
1909
|
|
|
1379
|
-
export { PtrBreadcrumbsComponent, PtrButtonComponent, PtrChipInputComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrSelectComponent, PtrTabComponent, PtrTabsComponent, PtrTitleComponent, PtrToasterComponent, PtrToasterService, PtrTooltipComponent };
|
|
1910
|
+
export { PtrBreadcrumbsComponent, PtrButtonComponent, PtrChipInputComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrMultiSelectComponent, PtrSelectComponent, PtrTabComponent, PtrTabsComponent, PtrTitleComponent, PtrToasterComponent, PtrToasterService, PtrTooltipComponent };
|
|
1380
1911
|
//# sourceMappingURL=patter-ngx-components.mjs.map
|