@patter/ngx-components 21.0.7 → 21.1.7
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -12,10 +12,10 @@ import { take } from 'rxjs/operators';
|
|
|
12
12
|
|
|
13
13
|
class PtrMenuComponent {
|
|
14
14
|
menuItems = [];
|
|
15
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
16
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
15
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
16
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrMenuComponent, isStandalone: true, selector: "ptr-menu", inputs: { menuItems: "menuItems" }, ngImport: i0, template: "<nav class=\"ptr-menu\">\n <ul class=\"menu\">\n @for (item of menuItems; track item.label) {\n <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n </li>\n }\n </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: i1.RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
17
17
|
}
|
|
18
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
18
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrMenuComponent, decorators: [{
|
|
19
19
|
type: Component,
|
|
20
20
|
args: [{ selector: 'ptr-menu', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav class=\"ptr-menu\">\n <ul class=\"menu\">\n @for (item of menuItems; track item.label) {\n <li class=\"menu-item\" routerLinkActive=\"current_page_item\" [routerLinkActiveOptions]=\"{exact: true}\">\n <a [routerLink]=\"item.link || '#'\">{{item.label}}</a>\n </li>\n }\n </ul>\n</nav>\n", styles: [".menu{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu>ul{display:flex;flex-direction:row;gap:var(--wp--custom--content--gap, 40px);align-items:center}.menu--vertical{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu--vertical>ul{flex-direction:column;align-items:flex-start;gap:calc(var(--wp--custom--content--gap, 40px) / 2)}.menu li.current-menu-item>a,.menu li.current_page_item>a,.menu li.current-menu-parent>a{opacity:1;font-weight:700}.menu a{transition:color .33s}.menu a:hover,.menu a:focus{text-decoration:none}.menu a{position:relative;text-decoration:none;padding:8px 0;font-family:var(--wp--preset--font-family--heading-font);letter-spacing:-.72px;color:var(--ptr-menu-color, var(--wp--preset--color--black))}.menu a:before,.menu a:after{content:\"\";position:absolute;bottom:2px;left:0;right:0;height:2px;background-color:var(--wp--preset--color--primary)}.menu a:before{opacity:0;transform:translateY(-8px);transition:transform 0s cubic-bezier(.175,.885,.32,1.275),opacity 0s}.menu a:after{opacity:0;transform:translateY(4px);transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:before,.menu a:hover:after,.menu a:focus:before,.menu a:focus:after{opacity:1;transform:translateY(0)}.menu a:hover:before,.menu a:focus:before{transition:transform .2s cubic-bezier(.175,.885,.32,1.275),opacity .2s}.menu a:hover:after,.menu a:focus:after{transition:transform 0s .2s cubic-bezier(.175,.885,.32,1.275),opacity 0s .2s}\n"] }]
|
|
21
21
|
}], propDecorators: { menuItems: [{
|
|
@@ -97,10 +97,10 @@ class PtrButtonComponent {
|
|
|
97
97
|
}
|
|
98
98
|
this.clicked.emit(event);
|
|
99
99
|
}
|
|
100
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
101
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
100
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
101
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrButtonComponent, isStandalone: true, selector: "ptr-button", inputs: { buttonStyle: "buttonStyle", buttonType: "buttonType", isDisabled: "isDisabled", hrefLink: "hrefLink", routerLinkValue: "routerLinkValue", extraClasses: "extraClasses", isSmallSize: "isSmallSize", isIconButton: "isIconButton", ariaLabel: "ariaLabel" }, outputs: { clicked: "clicked" }, host: { properties: { "class": "this.hostClasses" } }, ngImport: i0, template: "<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n\n@if (isLink()) {\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\n (click)=\"onClick($event)\" [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</a>\n} @else {\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</button>\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
102
102
|
}
|
|
103
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
103
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrButtonComponent, decorators: [{
|
|
104
104
|
type: Component,
|
|
105
105
|
args: [{ selector: 'ptr-button', imports: [CommonModule, RouterLink], changeDetection: ChangeDetectionStrategy.OnPush, template: "<ng-template #contentTpl>\n <ng-content></ng-content>\n</ng-template>\n\n@if (isLink()) {\n<a [attr.href]=\"href()\" [routerLink]=\"routerLink()\" [class]=\"buttonClasses()\" [attr.disabled]=\"disabled() ? '' : null\"\n (click)=\"onClick($event)\" [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</a>\n} @else {\n<button [type]=\"type()\" [class]=\"buttonClasses()\" [disabled]=\"disabled()\" (click)=\"onClick($event)\"\n [attr.aria-label]=\"ariaLabel ?? null\">\n <ng-container [ngTemplateOutlet]=\"contentTpl\"></ng-container>\n</button>\n}\n" }]
|
|
106
106
|
}], propDecorators: { hostClasses: [{
|
|
@@ -292,10 +292,10 @@ class PtrDialogListComponent {
|
|
|
292
292
|
this.dialog.nativeElement.style.top = '';
|
|
293
293
|
this.dialog.nativeElement.style.bottom = '';
|
|
294
294
|
}
|
|
295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
295
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrDialogListComponent, isStandalone: true, selector: "ptr-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\n\n @if(dialogTitle) {\n <p class=\"dialog-title\">{{dialogTitle}}</p>\n }\n\n @if (showSearch) {\n <div>\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\n class=\"search-input\">\n </div>\n }\n\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\">\n @for (item of filteredOptions(); track item.label) {\n @if (item.type === 'option') {\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"item.value === value()\"\n [class.selected]=\"item.value === value()\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\n (click)=\"selectOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n {{ item.label }}\n </li>\n } @else {\n <li role=\"group\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </li>\n @for (option of item.options!; track option.value) {\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"option.value === value()\"\n [class.selected]=\"option.value === value()\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\n (click)=\"selectOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n {{ option.label }}\n </li>\n }\n }\n }\n </ul>\n\n</dialog>\n", styles: [".ptr-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:350px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit)}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
297
297
|
}
|
|
298
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
298
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrDialogListComponent, decorators: [{
|
|
299
299
|
type: Component,
|
|
300
300
|
args: [{ selector: 'ptr-dialog-list', imports: [
|
|
301
301
|
FormsModule
|
|
@@ -397,8 +397,8 @@ class PtrSelectComponent {
|
|
|
397
397
|
}
|
|
398
398
|
});
|
|
399
399
|
}
|
|
400
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
401
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
400
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
401
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrSelectComponent, isStandalone: true, selector: "ptr-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description", labelPosition: "labelPosition" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
402
402
|
{
|
|
403
403
|
provide: NG_VALUE_ACCESSOR,
|
|
404
404
|
useExisting: forwardRef(() => PtrSelectComponent),
|
|
@@ -406,7 +406,7 @@ class PtrSelectComponent {
|
|
|
406
406
|
}
|
|
407
407
|
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n<div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n <button #selectButton type=\"button\" class=\"select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\n <span [attr.id]=\"labelId\" class=\"select-display\">\n @if (displayValue(); as dValue) { {{dValue}} } @else {\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\n }\n </span>\n <span class=\"select-arrow\">\u23F7</span>\n </button>\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n\n <ptr-dialog-list #dialogList [options]=\"options\" (selectionChange)=\"onOptionSelected($event)\"\n [showSearch]=\"showSearch\" />\n\n</div>\n", styles: [".select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);display:flex;align-items:center;justify-content:space-between}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.select-button .select-display{flex:1;min-width:0}.select-button .placeholder{color:#999}.select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.gfield--input-wrapper--label-inline .select-button{border-color:transparent;outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
408
408
|
}
|
|
409
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
409
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrSelectComponent, decorators: [{
|
|
410
410
|
type: Component,
|
|
411
411
|
args: [{ selector: 'ptr-select', imports: [
|
|
412
412
|
FormsModule,
|
|
@@ -716,10 +716,10 @@ class PtrMultiDialogListComponent {
|
|
|
716
716
|
this.dialog.nativeElement.style.top = '';
|
|
717
717
|
this.dialog.nativeElement.style.bottom = '';
|
|
718
718
|
}
|
|
719
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
720
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
719
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrMultiDialogListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
720
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrMultiDialogListComponent, isStandalone: true, selector: "ptr-multi-dialog-list", inputs: { options: "options", showSearch: "showSearch", searchPlaceholder: "searchPlaceholder", dialogTitle: "dialogTitle", selectedValues: "selectedValues", maxSelections: "maxSelections", showSelectAll: "showSelectAll" }, outputs: { selectionChange: "selectionChange", dialogClosed: "dialogClosed", searchTermChanged: "searchTermChanged" }, viewQueries: [{ propertyName: "dialog", first: true, predicate: ["dialog"], descendants: true }], ngImport: i0, template: "<dialog #dialog class=\"ptr-multi-dialog-list\" (keydown)=\"onDialogKeyDown($event)\" [attr.aria-label]=\"'Options'\">\n\n @if(dialogTitle) {\n <p class=\"dialog-title\">{{dialogTitle}}</p>\n }\n\n @if (showSearch) {\n <div>\n <input #searchInput [ngModel]=\"searchTerm()\" (ngModelChange)=\"updateSearchTerm($event)\"\n [attr.aria-expanded]=\"isOpen()\" [attr.aria-owns]=\"listId\" (keydown)=\"onInputKeyDown($event)\"\n [attr.aria-autocomplete]=\"'list'\" role=\"combobox\" [attr.aria-controls]=\"listId\" [placeholder]=\"searchPlaceholder\"\n class=\"search-input\">\n </div>\n }\n<form>\n <ul [attr.id]=\"listId\" role=\"listbox\" class=\"option-list\" [attr.aria-multiselectable]=\"true\">\n @if (shouldShowSelectAll()) {\n <li role=\"option\" class=\"select-all-option\" [attr.aria-selected]=\"allSelectedState() === true\"\n [class.selected]=\"allSelectedState() === true\" [class.indeterminate]=\"allSelectedState() === 'indeterminate'\"\n (click)=\"toggleSelectAll()\" (keydown)=\"onSelectAllKeyDown($event)\" [attr.tabindex]=\"0\">\n <input type=\"checkbox\" [checked]=\"allSelectedState() === true\"\n [indeterminate]=\"allSelectedState() === 'indeterminate'\" readonly>\n Select All\n </li>\n }\n @for (item of filteredOptions(); track item.label) {\n @if (item.type === 'option') {\n <li role=\"option\" [attr.id]=\"item.value\" [attr.aria-selected]=\"isOptionSelected(item.value!)\"\n [class.selected]=\"isOptionSelected(item.value!)\" [class.highlighted]=\"item === filteredOptions()[highlightedIndex()]\"\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\"\n (click)=\"toggleOption(item.value!)\" (keydown)=\"onOptionKeyDown($event, item.value!)\"\n [attr.tabindex]=\"item === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(item.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(item.value!)\" readonly>\n {{ item.label }}\n </li>\n } @else {\n <li role=\"group\" [attr.aria-label]=\"item.label\">\n {{ item.label }}\n </li>\n @for (option of item.options!; track option.value) {\n <li role=\"option\" [attr.id]=\"option.value\" [attr.aria-selected]=\"isOptionSelected(option.value!)\"\n [class.selected]=\"isOptionSelected(option.value!)\" [class.highlighted]=\"option === filteredOptions()[highlightedIndex()]\"\n [class.disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\"\n (click)=\"toggleOption(option.value!)\" (keydown)=\"onOptionKeyDown($event, option.value!)\"\n [attr.tabindex]=\"option === filteredOptions()[highlightedIndex()] ? 0 : -1\">\n <input type=\"checkbox\" [checked]=\"isOptionSelected(option.value!)\" [disabled]=\"!canSelectMore() && !isOptionSelected(option.value!)\" readonly>\n {{ option.label }}\n </li>\n }\n }\n }\n </ul>\n</form>\n</dialog>\n", styles: [".ptr-multi-dialog-list{margin:0;padding:0;border:1px solid var(--wp--custom--color--border);width:100%;max-height:400px;overflow-y:auto;z-index:5;border-radius:calc(var(--wp--custom--default-border-radius) / 2);border-top-left-radius:0;border-top-right-radius:0;scrollbar-width:thin}.ptr-multi-dialog-list:focus{outline:none}input.search-input{padding:calc(var(--wp--custom--content--button-input-padding-y, 12px) / 1.5) var(--wp--custom--content--button-input-padding-x, 16px)!important;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;outline:0;font-size:var(--wp--preset--font-size--small, inherit);border-radius:0!important}.dialog-title{padding:5px 10px;border:none!important;border-bottom:1px solid var(--wp--custom--color--border)!important;font-size:var(--wp--preset--font-size--small, inherit);font-weight:500;margin:0}.option-list{list-style-type:none;padding:0;margin:0}li[role=option],li[role=group]{padding:5px 10px}li[role=group]{font-weight:700;margin-top:6px}li[role=option]{cursor:pointer;font-size:var(--wp--preset--font-size--small, inherit);display:flex;align-items:center;gap:8px}li[role=option] input[type=checkbox]{margin:0;pointer-events:none}li[role=option].disabled{opacity:.5;cursor:not-allowed}li[role=option]:hover,li[role=option].selected,li[role=option].highlighted{background-color:#f0f0f0}li[role=option]:focus-within{outline:2px solid var(--wp--custom--color--border)}.select-all-option{font-weight:500;border-bottom:1px solid var(--wp--custom--color--border)}.select-all-option.indeterminate{font-style:italic}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i1$2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]):not([formArray]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
721
721
|
}
|
|
722
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
722
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrMultiDialogListComponent, decorators: [{
|
|
723
723
|
type: Component,
|
|
724
724
|
args: [{ selector: 'ptr-multi-dialog-list', imports: [
|
|
725
725
|
FormsModule
|
|
@@ -841,8 +841,8 @@ class PtrMultiSelectComponent {
|
|
|
841
841
|
}
|
|
842
842
|
});
|
|
843
843
|
}
|
|
844
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
845
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
844
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrMultiSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
845
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrMultiSelectComponent, isStandalone: true, selector: "ptr-multi-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description", labelPosition: "labelPosition", maxSelections: "maxSelections", showSelectAll: "showSelectAll" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
846
846
|
{
|
|
847
847
|
provide: NG_VALUE_ACCESSOR,
|
|
848
848
|
useExisting: forwardRef(() => PtrMultiSelectComponent),
|
|
@@ -850,7 +850,7 @@ class PtrMultiSelectComponent {
|
|
|
850
850
|
}
|
|
851
851
|
], viewQueries: [{ propertyName: "selectButton", first: true, predicate: ["selectButton"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n<div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n <button #selectButton type=\"button\" class=\"multi-select-button\" [attr.id]=\"inputId\" [attr.aria-haspopup]=\"'listbox'\"\n [attr.aria-expanded]=\"dialogList.isOpen()\" [attr.aria-labelledby]=\"labelId\" (click)=\"toggleDialog()\">\n <span [attr.id]=\"labelId\" class=\"select-display\">\n @if (selectedOptions().length === 0) {\n <span class=\"placeholder\">{{effectivePlaceholder()}}</span>\n } @else {\n <div class=\"selected-items\">\n @for (option of selectedOptions(); track option.value) {\n <span class=\"selected-chip\">\n {{option.label}}\n <button type=\"button\" class=\"remove-chip\" (click)=\"removeSelectedItem(option.value); $event.stopPropagation()\"\n [attr.aria-label]=\"'Remove ' + option.label\">\n \u00D7\n </button>\n </span>\n }\n </div>\n }\n </span>\n <span class=\"select-arrow\">\u23F7</span>\n </button>\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n\n <ptr-multi-dialog-list #dialogList [options]=\"options\" [selectedValues]=\"value()\" [maxSelections]=\"maxSelections\"\n [showSelectAll]=\"showSelectAll\" (selectionChange)=\"onSelectionChanged($event)\" [showSearch]=\"showSearch\" />\n\n</div>\n", styles: [".multi-select-button{appearance:none;background-color:#fff;text-align:left;cursor:pointer;border:1px solid var(--wp--custom--color--border);width:100%;padding:var(--wp--custom--content--button-input-padding-y, 12px) var(--wp--custom--content--button-input-padding-x, 16px);margin:0;font-size:var(--wp--preset--font-size--small, inherit);font-family:Arial,Helvetica,sans-serif;z-index:5;color:#000;border-radius:calc(var(--wp--custom--default-border-radius) / 2);transition:border-color .3s,color .3s,background-color .3s;transition-timing-function:cubic-bezier(.2,1,.3,1);display:flex;align-items:center;justify-content:space-between;min-height:42px}.multi-select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.multi-select-button .select-display{flex:1;min-width:0}.multi-select-button .placeholder{color:#999}.multi-select-button .selected-items{display:flex;flex-wrap:wrap;gap:4px;align-items:center}.multi-select-button .selected-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease}.multi-select-button .selected-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.multi-select-button .selected-chip{padding:2px 6px;border-radius:calc(var(--wp--custom--default-border-radius) / 3);font-size:.8em;gap:4px}.multi-select-button .selected-chip .remove-chip{border:none;background:none;color:var(--wp--custom--color--primary-text, white);cursor:pointer;padding:0;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.multi-select-button .selected-chip .remove-chip:hover{background-color:#0000001a}.multi-select-button .selected-chip .remove-chip:disabled{opacity:.5;cursor:not-allowed}.multi-select-button .selected-chip .remove-chip{width:16px;height:16px;font-size:12px}.multi-select-button .selected-chip .remove-chip:hover{background-color:#fff3}.multi-select-button .select-arrow{color:#999;font-size:1.3em;transition:transform .2s;line-height:.8rem}.multi-select-button[aria-expanded=true] .select-arrow{transform:rotate(180deg)}.gfield--input-wrapper--label-inline .multi-select-button{border-color:transparent;outline:0}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrMultiDialogListComponent, selector: "ptr-multi-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle", "selectedValues", "maxSelections", "showSelectAll"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
852
852
|
}
|
|
853
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
853
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrMultiSelectComponent, decorators: [{
|
|
854
854
|
type: Component,
|
|
855
855
|
args: [{ selector: 'ptr-multi-select', imports: [
|
|
856
856
|
FormsModule,
|
|
@@ -975,8 +975,8 @@ class PtrInputComponent {
|
|
|
975
975
|
this.input.nativeElement.disabled = isDisabled;
|
|
976
976
|
}
|
|
977
977
|
}
|
|
978
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
979
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
978
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
979
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrInputComponent, isStandalone: true, selector: "ptr-input", inputs: { type: "type", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", description: "description", dialogHelpText: "dialogHelpText", searchFn: "searchFn", labelPosition: "labelPosition" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
980
980
|
{
|
|
981
981
|
provide: NG_VALUE_ACCESSOR,
|
|
982
982
|
useExisting: forwardRef(() => PtrInputComponent),
|
|
@@ -984,7 +984,7 @@ class PtrInputComponent {
|
|
|
984
984
|
}
|
|
985
985
|
], viewQueries: [{ propertyName: "input", first: true, predicate: ["input"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n <div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n @switch (type) {\n @case ('textarea') {\n <textarea #input [id]=\"inputId\" [attr.autocomplete]=\"autocomplete || null\" [attr.placeholder]=\"placeholder || null\"\n [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\" (focus)=\"onFocus()\" (blur)=\"onBlur()\" [rows]=\"3\"></textarea>\n }\n @default {\n <input #input [id]=\"inputId\" [type]=\"type\" [attr.autocomplete]=\"autocomplete || null\"\n [attr.placeholder]=\"placeholder || null\" [ngModel]=\"inputValue()\" (ngModelChange)=\"onInputChange($event)\"\n (focus)=\"onFocus()\" (blur)=\"onBlur()\" />\n }\n }\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n\n @if (searchFn) {\n <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\n [dialogTitle]=\"dialogHelpText\" />\n }\n\n</div>\n", dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
986
986
|
}
|
|
987
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
987
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrInputComponent, decorators: [{
|
|
988
988
|
type: Component,
|
|
989
989
|
args: [{ selector: 'ptr-input', imports: [
|
|
990
990
|
FormsModule,
|
|
@@ -1174,8 +1174,8 @@ class PtrChipInputComponent {
|
|
|
1174
1174
|
this.tempInputControl.enable();
|
|
1175
1175
|
}
|
|
1176
1176
|
}
|
|
1177
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1178
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1177
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1178
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrChipInputComponent, isStandalone: true, selector: "ptr-chip-input", inputs: { label: "label", placeholder: "placeholder", description: "description", labelPosition: "labelPosition", maxItems: "maxItems", suggestions: "suggestions", autoReopenAfterSelect: "autoReopenAfterSelect" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
1179
1179
|
{
|
|
1180
1180
|
provide: NG_VALUE_ACCESSOR,
|
|
1181
1181
|
useExisting: forwardRef(() => PtrChipInputComponent),
|
|
@@ -1183,7 +1183,7 @@ class PtrChipInputComponent {
|
|
|
1183
1183
|
}
|
|
1184
1184
|
], viewQueries: [{ propertyName: "chipInput", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "dialogList", first: true, predicate: ["dialogList"], descendants: true }], ngImport: i0, template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">{{ label }}</label>\n@if(description){\n<div class=\"gfield_description\">{{description}}</div>\n}\n<div class=\"gfield--input-wrapper ginput_container\"\n [class.gfield--input-wrapper--label-inline]=\"labelPosition === 'inline'\">\n\n <div class=\"ptr-chip-container\">\n <div class=\"ptr-chip-list\">\n @for (chip of chipItems(); track chip; let i = $index) {\n <div class=\"ptr-chip\">\n <span class=\"ptr-chip-text\">{{ chip }}</span>\n <button type=\"button\" class=\"ptr-chip-remove\" (click)=\"removeChip(i)\" [disabled]=\"isDisabled()\"\n aria-label=\"Remove item\">\u00D7</button>\n </div>\n }\n </div>\n\n <div class=\"ptr-chip-input-wrapper\">\n <input #chipInput [id]=\"inputId\" type=\"text\" [placeholder]=\"placeholder || ''\" [formControl]=\"tempInputControl\"\n (keydown)=\"onKeyDown($event)\" (blur)=\"onBlur()\" (focus)=\"openDialog()\"\n (input)=\"dialogList?.updateSearchTerm(inputValue())\"\n [disabled]=\"isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\" />\n <ptr-button (clicked)=\"addChip()\"\n [isDisabled]=\"!inputValue().trim() || isDisabled() || (maxItems !== undefined && chipItems().length >= maxItems)\">Add</ptr-button>\n </div>\n </div>\n\n <ptr-dialog-list #dialogList [options]=\"suggestions\" [showSearch]=\"false\" [dialogTitle]=\"label\"\n (selectionChange)=\"onSuggestionSelected($event)\" />\n\n @if (labelPosition === 'inline') {\n <fieldset aria-hidden=\"true\" class=\"input-fieldset\">\n <legend class=\"input-legend gfield_label gform-field-label gform-field-label--hidden\">\n <span>{{label}}</span>\n </legend>\n </fieldset>\n }\n</div>\n", styles: [".ptr-chip-container{display:flex;flex-direction:column;gap:8px;width:100%}.ptr-chip-list{display:flex;flex-wrap:wrap;gap:8px}.ptr-chip{display:inline-flex;align-items:center;background-color:var(--wp--preset--color--primary);color:var(--wp--custom--color--primary-text, white);border-radius:16px;font-size:var(--wp--preset--font-size--small, 14px);cursor:default;transition:background-color .2s ease}.ptr-chip:hover{background-color:var(--wp--custom--color--primary-hover)}.ptr-chip{padding:4px 12px;line-height:20px;margin-right:4px}.ptr-chip-text{margin-right:6px}.ptr-chip-remove{border:none;background:none;color:var(--wp--custom--color--primary-text, white);cursor:pointer;padding:0;margin:0;line-height:1;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s ease}.ptr-chip-remove:hover{background-color:#0000001a}.ptr-chip-remove:disabled{opacity:.5;cursor:not-allowed}.ptr-chip-remove{font-size:var(--wp--preset--font-size--medium, 16px);width:18px;height:18px;margin-left:6px}.ptr-chip-input-wrapper{display:flex;gap:8px;width:100%}.ptr-chip-input-wrapper button{text-wrap-mode:nowrap}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: PtrDialogListComponent, selector: "ptr-dialog-list", inputs: ["options", "showSearch", "searchPlaceholder", "dialogTitle"], outputs: ["selectionChange", "dialogClosed", "searchTermChanged"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
|
|
1185
1185
|
}
|
|
1186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrChipInputComponent, decorators: [{
|
|
1187
1187
|
type: Component,
|
|
1188
1188
|
args: [{ selector: 'ptr-chip-input', imports: [
|
|
1189
1189
|
FormsModule,
|
|
@@ -1304,10 +1304,10 @@ class PtrFormComponent {
|
|
|
1304
1304
|
}
|
|
1305
1305
|
return false;
|
|
1306
1306
|
}
|
|
1307
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1308
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1307
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1308
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\n\n @if (error) {\n <div class=\"gform_validation_errors\">\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\n </div>\n }\n\n @if (config.title) {\n <div class=\"gform_heading\">\n <h2 class=\"gform_title\">{{ config.title }}</h2>\n </div>\n }\n\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\n\n <div class=\"gform_fields\">\n\n @for (field of config.fields; track field.name) {\n @if(isFieldVisible(field)) {\n\n <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\n [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\" [class.gfield--label-inline]=\"config.labelPosition === 'inline'\">\n\n @switch (field.type) {\n @case ('select') {\n <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\" />\n }\n @case ('multi-select') {\n <ptr-multi-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\n [placeholder]=\"getFieldPlaceholder(field)\" [labelPosition]=\"config.labelPosition\"\n [maxSelections]=\"field.maxSelections\" />\n }\n @case ('chips') {\n <ptr-chip-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\"\n [placeholder]=\"getFieldPlaceholder(field)\" [description]=\"field.description\"\n [maxItems]=\"field.maxItems\" [labelPosition]=\"config.labelPosition\" />\n }\n @default {\n <ptr-input [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [type]=\"field.type\"\n [placeholder]=\"getFieldPlaceholder(field)\" [autocomplete]=\"field.autocomplete\" [searchFn]=\"field.searchFn\"\n [dialogHelpText]=\"field.dialogHelpText\" [labelPosition]=\"config.labelPosition\" />\n }\n }\n\n @if (formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched) {\n <div class=\"gfield_description validation_message gfield_validation_message\">\n @if (formGroup.get(field.name)?.errors?.['required']) {\n This field is required.\n }\n @if (formGroup.get(field.name)?.errors?.['email']) {\n Please enter a valid email address.\n }\n @if (formGroup.get(field.name)?.errors?.['minlength']) {\n Minimum length is {{ formGroup.get(field.name)?.errors?.['minlength'].requiredLength }} characters.\n }\n @if (formGroup.get(field.name)?.errors?.['maxlength']) {\n Maximum length is {{ formGroup.get(field.name)?.errors?.['maxlength'].requiredLength }} characters.\n }\n @if (formGroup.get(field.name)?.errors?.['pattern']) {\n Please match the required format.\n }\n </div>\n }\n @if (field.validationMessages && formGroup.invalid && !formGroup.get(field.name)?.invalid &&\n formGroup.get(field.name)?.touched) {\n @for (error of formGroup.errors | keyvalue; track error) {\n @if (field.validationMessages[error.key]) {\n <div class=\"gfield_description validation_message gfield_validation_message\">\n {{ field.validationMessages[error.key] }}\n </div>\n }\n }\n }\n </div>\n }\n }\n </div>\n\n @if(config.submitText){\n <div class=\"gform_footer\">\n <ptr-button buttonType=\"submit\" [isDisabled]=\"loading || !formGroup.valid\"\n [extraClasses]=\"config.submitFullWidth ? 'gform-button--width-full' : ''\">{{config.submitText}}</ptr-button>\n </div>\n }\n\n </form>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "component", type: PtrSelectComponent, selector: "ptr-select", inputs: ["options", "showSearch", "placeholder", "label", "description", "labelPosition"], outputs: ["selectionChange"] }, { kind: "component", type: PtrMultiSelectComponent, selector: "ptr-multi-select", inputs: ["options", "showSearch", "placeholder", "label", "description", "labelPosition", "maxSelections", "showSelectAll"], outputs: ["selectionChange"] }, { kind: "component", type: PtrInputComponent, selector: "ptr-input", inputs: ["type", "label", "placeholder", "autocomplete", "description", "dialogHelpText", "searchFn", "labelPosition"] }, { kind: "component", type: PtrChipInputComponent, selector: "ptr-chip-input", inputs: ["label", "placeholder", "description", "labelPosition", "maxItems", "suggestions", "autoReopenAfterSelect"] }, { kind: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1309
1309
|
}
|
|
1310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1310
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrFormComponent, decorators: [{
|
|
1311
1311
|
type: Component,
|
|
1312
1312
|
args: [{ selector: 'ptr-form', imports: [
|
|
1313
1313
|
CommonModule,
|
|
@@ -1364,10 +1364,10 @@ class PtrTitleComponent {
|
|
|
1364
1364
|
}
|
|
1365
1365
|
return route;
|
|
1366
1366
|
}
|
|
1367
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1368
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1367
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1368
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", inputs: { styleClass: "styleClass", wrapperStyleClass: "wrapperStyleClass", screenReaderOnly: "screenReaderOnly" }, ngImport: i0, template: "@if ((hideTitle$|async) === false) {\n @if(wrapperStyleClass) {\n <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\n </header>\n } @else {\n <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\n }\n}\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1369
1369
|
}
|
|
1370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1370
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTitleComponent, decorators: [{
|
|
1371
1371
|
type: Component,
|
|
1372
1372
|
args: [{ selector: 'ptr-title', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((hideTitle$|async) === false) {\n @if(wrapperStyleClass) {\n <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\n </header>\n } @else {\n <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\n }\n}\n" }]
|
|
1373
1373
|
}], propDecorators: { styleClass: [{
|
|
@@ -1379,10 +1379,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1379
1379
|
}] } });
|
|
1380
1380
|
|
|
1381
1381
|
class PtrLoadingSpinnerComponent {
|
|
1382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
1382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrLoadingSpinnerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: PtrLoadingSpinnerComponent, isStandalone: true, selector: "ptr-loading-spinner", ngImport: i0, template: `<div class="ptr-progress-spinner"></div>`, isInline: true, styles: [":host{display:inline-block;line-height:0}.ptr-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.ptr-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.ptr-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1384
1384
|
}
|
|
1385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrLoadingSpinnerComponent, decorators: [{
|
|
1386
1386
|
type: Component,
|
|
1387
1387
|
args: [{ selector: 'ptr-loading-spinner', imports: [], template: `<div class="ptr-progress-spinner"></div>`, changeDetection: ChangeDetectionStrategy.OnPush, styles: [":host{display:inline-block;line-height:0}.ptr-progress-spinner{display:inline-block;width:25px;height:25px;transform:scaleZ(1)}.ptr-progress-spinner:before{position:absolute;content:\"\";background-image:url(\"data:image/svg+xml,%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 40 40' style='enable-background:new 0 0 40 40;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23272e3e;%7D%0A%3C/style%3E%3Ccircle class='st0' cx='34' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='6' r='6'/%3E%3Ccircle class='st0' cx='6' cy='34' r='6'/%3E%3Ccircle class='st0' cx='34' cy='34' r='6'/%3E%3C/svg%3E\");height:40px;width:40px;left:-8px;top:-8px;border:none;display:block;animation:loader-anim 1.5s 0s ease-in-out infinite}.ptr-progress-spinner:after{content:\"\";position:absolute;height:12px;width:12px;border:none;border-radius:12px;display:block;left:6px;top:6px;background-color:#272e3e;animation:loader-anim-dot 1.5s 0s ease-in-out infinite}@keyframes loader-anim{0%{transform:rotate(0) scale(0);opacity:.5}50%{transform:rotate(180deg) scale(1);opacity:1}to{transform:rotate(360deg) scale(0);opacity:.2}}@keyframes loader-anim-dot{0%{opacity:1}50%{opacity:0}to{opacity:1}}\n"] }]
|
|
1388
1388
|
}] });
|
|
@@ -1451,10 +1451,10 @@ class PtrLoadingSpinnerDirective {
|
|
|
1451
1451
|
removeBlurEffect() {
|
|
1452
1452
|
this.renderer.removeClass(this.targetEl.nativeElement, 'ptr-loading-blur');
|
|
1453
1453
|
}
|
|
1454
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1455
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0
|
|
1454
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrLoadingSpinnerDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
1455
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.1.0", type: PtrLoadingSpinnerDirective, isStandalone: true, selector: "[ptrLoadingSpinner]", inputs: { ptrLoadingSpinner: "ptrLoadingSpinner" }, host: { properties: { "style.position": "this.hostPosition" } }, ngImport: i0 });
|
|
1456
1456
|
}
|
|
1457
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrLoadingSpinnerDirective, decorators: [{
|
|
1458
1458
|
type: Directive,
|
|
1459
1459
|
args: [{
|
|
1460
1460
|
selector: '[ptrLoadingSpinner]'
|
|
@@ -1551,10 +1551,10 @@ class PtrLoadingService {
|
|
|
1551
1551
|
updateTaskCount(taskCount, increment) {
|
|
1552
1552
|
taskCount.update(count => increment ? count + 1 : Math.max(0, count - 1));
|
|
1553
1553
|
}
|
|
1554
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1555
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
1554
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrLoadingService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1555
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrLoadingService, providedIn: 'root' });
|
|
1556
1556
|
}
|
|
1557
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrLoadingService, decorators: [{
|
|
1558
1558
|
type: Injectable,
|
|
1559
1559
|
args: [{
|
|
1560
1560
|
providedIn: 'root'
|
|
@@ -1587,10 +1587,10 @@ class PtrDialogComponent {
|
|
|
1587
1587
|
setData(data) {
|
|
1588
1588
|
this.data = data;
|
|
1589
1589
|
}
|
|
1590
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1591
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1590
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1591
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { title: "title", message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle", contentTemplate: "contentTemplate", hasDefaultContent: "hasDefaultContent", data: "data" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\n <div class=\"ptr-modal__content\">\n\n <div class=\"ptr-modal__header\">\n <h2 class=\"ptr-modal__title\">{{title}}</h2>\n <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">×</button>\n </div>\n\n @if (hasDefaultContent && !contentTemplate) {\n <p>{{ message }}</p>\n }\n\n @if (contentTemplate) {\n <ng-container *ngTemplateOutlet=\"contentTemplate; context: {$implicit: data, dialogInstance: this}\"></ng-container>\n }\n\n <div class=\"ptr-modal__actions\">\n <ptr-button buttonStyle=\"secondary\" (clicked)=\"close()\" [isSmallSize]=\"true\">Cancel</ptr-button>\n <ptr-button class=\"ml-auto\" [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\"\n [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\n </div>\n\n </div>\n</dialog>\n", styles: [".ptr-modal{border-radius:min(var(--wp--custom--default-border-radius),6px);border:none;padding:.75rem}.ptr-modal__content{padding:.75rem;position:relative}.ptr-modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ptr-modal__header h2{margin:0;font-size:calc(var(--wp--preset--font-size--medium) * 1.125)}.ptr-modal__close{background:none;border:none;font-size:1.5rem;cursor:pointer;padding:0;line-height:1.5rem;transform:translateY(-25%)}.ptr-modal__close:hover,.ptr-modal__close:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.ptr-modal__actions{margin-top:20px;text-align:right;display:flex;justify-content:space-between}dialog.ptr-modal{opacity:0;transition:all .2s}dialog.ptr-modal[open]{opacity:1}@starting-style{dialog.ptr-modal[open]{opacity:0}}dialog.ptr-modal::backdrop{opacity:0;background-color:#0000;transition:all .2s}dialog.ptr-modal[open]::backdrop{background-color:#25273499;opacity:1}@starting-style{dialog.ptr-modal[open]::backdrop{opacity:0;background-color:#0000}}\n"], dependencies: [{ kind: "component", type: PtrButtonComponent, selector: "ptr-button", inputs: ["buttonStyle", "buttonType", "isDisabled", "hrefLink", "routerLinkValue", "extraClasses", "isSmallSize", "isIconButton", "ariaLabel"], outputs: ["clicked"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1592
1592
|
}
|
|
1593
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1593
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrDialogComponent, decorators: [{
|
|
1594
1594
|
type: Component,
|
|
1595
1595
|
args: [{ selector: 'ptr-dialog', imports: [
|
|
1596
1596
|
PtrButtonComponent,
|
|
@@ -1659,10 +1659,10 @@ class PtrDialogService {
|
|
|
1659
1659
|
this.dialogComponentRef = null;
|
|
1660
1660
|
}
|
|
1661
1661
|
}
|
|
1662
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1663
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
1662
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1663
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrDialogService, providedIn: 'root' });
|
|
1664
1664
|
}
|
|
1665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrDialogService, decorators: [{
|
|
1666
1666
|
type: Injectable,
|
|
1667
1667
|
args: [{
|
|
1668
1668
|
providedIn: 'root'
|
|
@@ -1686,10 +1686,10 @@ class PtrTooltipComponent {
|
|
|
1686
1686
|
this.tooltipDialog.nativeElement.close();
|
|
1687
1687
|
}, 200); // Small delay to allow moving mouse to tooltip
|
|
1688
1688
|
}
|
|
1689
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1690
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0
|
|
1689
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTooltipComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1690
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.1.0", type: PtrTooltipComponent, isStandalone: true, selector: "ptr-tooltip", inputs: { content: "content" }, viewQueries: [{ propertyName: "tooltipDialog", first: true, predicate: ["tooltipDialog"], descendants: true }], ngImport: i0, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\n <ng-content></ng-content>\n</span>\n<dialog #tooltipDialog class=\"ptr-tooltip\">\n <div class=\"ptr-tooltip__content\">{{ content }}</div>\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1691
1691
|
}
|
|
1692
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1692
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTooltipComponent, decorators: [{
|
|
1693
1693
|
type: Component,
|
|
1694
1694
|
args: [{ selector: 'ptr-tooltip', imports: [], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span (mouseenter)=\"showTooltip()\" (mouseleave)=\"hideTooltip()\" class=\"tooltip-trigger\">\n <ng-content></ng-content>\n</span>\n<dialog #tooltipDialog class=\"ptr-tooltip\">\n <div class=\"ptr-tooltip__content\">{{ content }}</div>\n</dialog>", styles: [":host{display:inline-block;position:relative}.tooltip-trigger{cursor:help}.ptr-tooltip{position:absolute;bottom:100%;left:50%;transform:translate(-50%);border:none;border-radius:3px;padding:.5rem .75rem;background-color:#212121;border:0;color:#fff;font-size:.875rem;max-width:15.5rem;min-width:12.5rem;z-index:1000;margin:0 0 8px;box-shadow:0 3px 6px #00000029,0 3px 6px #0000003b}.ptr-tooltip:before{content:\"\";position:absolute;top:100%;left:50%;transform:translate(-50%);border-left:6px solid transparent;border-right:6px solid transparent;border-top:6px solid #212121}.ptr-tooltip__content{white-space:pre-wrap;text-align:center;line-height:1.5}\n"] }]
|
|
1695
1695
|
}], propDecorators: { content: [{
|
|
@@ -1743,10 +1743,10 @@ class PtrBreadcrumbsComponent {
|
|
|
1743
1743
|
}
|
|
1744
1744
|
return breadcrumbReturnInfo;
|
|
1745
1745
|
}
|
|
1746
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1747
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1746
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1747
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrBreadcrumbsComponent, isStandalone: true, selector: "ptr-breadcrumbs", inputs: { showFirstSeparator: "showFirstSeparator" }, ngImport: i0, template: "@if (breadcrumbs().length > 0) {\n <nav aria-label=\"breadcrumb\" class=\"breadcrumb-wrapper\">\n <ol class=\"breadcrumb\" [class.breadcrumb--show-first-separator]=\"showFirstSeparator\">\n @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let last = $last) {\n <li class=\"breadcrumb-item\" [class.breadcrumb-item--active]=\"last\">\n @if (!last) {\n <a class=\"breadcrumb-item-label\" [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n }\n @if (last) {\n <span class=\"breadcrumb-item-label\">{{ breadcrumb.label }}</span>\n }\n </li>\n }\n </ol>\n </nav>\n}\n", styles: [".breadcrumb{--breadcrumb-item-color: #ababab;--breadcrumb-item-font-size: var(--wp--preset--font-size--large, 1.25rem);list-style:none;border-radius:.25rem;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:2px}.breadcrumb-item{display:inline-block;margin:0}.breadcrumb-item--active .breadcrumb-item-label{color:inherit;font-weight:700}.breadcrumb-item-label{text-decoration:none;padding:4px;display:inline-block;color:var(--breadcrumb-item-color);font-size:var(--breadcrumb-item-font-size);font-weight:500;border-bottom:2px solid transparent}.breadcrumb-item a{transition:border-bottom .25s,color .25s}.breadcrumb-item a:hover,.breadcrumb-item a:focus{border-bottom-color:var(--wp--preset--color--primary)}.breadcrumb-item:first-child .breadcrumb-item-label{padding-left:0}.breadcrumb-item+.breadcrumb-item .breadcrumb-item-label:before{content:\"/\";padding-right:8px}.breadcrumb.breadcrumb--show-first-separator .breadcrumb-item-label:before{content:\"/\";padding-right:8px}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1748
1748
|
}
|
|
1749
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1749
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
|
|
1750
1750
|
type: Component,
|
|
1751
1751
|
args: [{ selector: 'ptr-breadcrumbs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (breadcrumbs().length > 0) {\n <nav aria-label=\"breadcrumb\" class=\"breadcrumb-wrapper\">\n <ol class=\"breadcrumb\" [class.breadcrumb--show-first-separator]=\"showFirstSeparator\">\n @for (breadcrumb of breadcrumbs(); track breadcrumb.label; let last = $last) {\n <li class=\"breadcrumb-item\" [class.breadcrumb-item--active]=\"last\">\n @if (!last) {\n <a class=\"breadcrumb-item-label\" [routerLink]=\"breadcrumb.url\">{{ breadcrumb.label }}</a>\n }\n @if (last) {\n <span class=\"breadcrumb-item-label\">{{ breadcrumb.label }}</span>\n }\n </li>\n }\n </ol>\n </nav>\n}\n", styles: [".breadcrumb{--breadcrumb-item-color: #ababab;--breadcrumb-item-font-size: var(--wp--preset--font-size--large, 1.25rem);list-style:none;border-radius:.25rem;margin:0 0 20px;padding:0;display:flex;flex-wrap:wrap;gap:2px}.breadcrumb-item{display:inline-block;margin:0}.breadcrumb-item--active .breadcrumb-item-label{color:inherit;font-weight:700}.breadcrumb-item-label{text-decoration:none;padding:4px;display:inline-block;color:var(--breadcrumb-item-color);font-size:var(--breadcrumb-item-font-size);font-weight:500;border-bottom:2px solid transparent}.breadcrumb-item a{transition:border-bottom .25s,color .25s}.breadcrumb-item a:hover,.breadcrumb-item a:focus{border-bottom-color:var(--wp--preset--color--primary)}.breadcrumb-item:first-child .breadcrumb-item-label{padding-left:0}.breadcrumb-item+.breadcrumb-item .breadcrumb-item-label:before{content:\"/\";padding-right:8px}.breadcrumb.breadcrumb--show-first-separator .breadcrumb-item-label:before{content:\"/\";padding-right:8px}\n"] }]
|
|
1752
1752
|
}], propDecorators: { showFirstSeparator: [{
|
|
@@ -1757,10 +1757,10 @@ class PtrTabComponent {
|
|
|
1757
1757
|
label;
|
|
1758
1758
|
link;
|
|
1759
1759
|
active = signal(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
|
|
1760
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1761
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1760
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1761
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrTabComponent, isStandalone: true, selector: "ptr-tab", inputs: { label: "label", link: "link" }, ngImport: i0, template: '@if(active()){<ng-content></ng-content>}', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1762
1762
|
}
|
|
1763
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1763
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTabComponent, decorators: [{
|
|
1764
1764
|
type: Component,
|
|
1765
1765
|
args: [{
|
|
1766
1766
|
selector: 'ptr-tab',
|
|
@@ -1823,10 +1823,10 @@ class PtrTabsComponent {
|
|
|
1823
1823
|
});
|
|
1824
1824
|
}
|
|
1825
1825
|
}
|
|
1826
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1827
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1826
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1827
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrTabsComponent, isStandalone: true, selector: "ptr-tabs", queries: [{ propertyName: "tabComponents", predicate: PtrTabComponent }], viewQueries: [{ propertyName: "buttons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\n [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\n }\n\n <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\n</div>\n\n@if (!useLinks()) {\n<div class=\"tab-content\">\n <ng-content></ng-content>\n</div>\n}\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1.RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1828
1828
|
}
|
|
1829
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1829
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrTabsComponent, decorators: [{
|
|
1830
1830
|
type: Component,
|
|
1831
1831
|
args: [{ selector: 'ptr-tabs', imports: [RouterModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"tabs-container\" role=\"tablist\">\n @for (tab of tabs(); track $index; let i = $index) {\n <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\n [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\n }\n\n <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\n</div>\n\n@if (!useLinks()) {\n<div class=\"tab-content\">\n <ng-content></ng-content>\n</div>\n}\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\n"] }]
|
|
1832
1832
|
}], ctorParameters: () => [], propDecorators: { tabComponents: [{
|
|
@@ -1875,10 +1875,10 @@ class PtrToasterService {
|
|
|
1875
1875
|
remove(id) {
|
|
1876
1876
|
this.toasts.update(toasts => toasts.filter(t => t.id !== id));
|
|
1877
1877
|
}
|
|
1878
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1879
|
-
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0
|
|
1878
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrToasterService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
1879
|
+
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrToasterService, providedIn: 'root' });
|
|
1880
1880
|
}
|
|
1881
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1881
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrToasterService, decorators: [{
|
|
1882
1882
|
type: Injectable,
|
|
1883
1883
|
args: [{
|
|
1884
1884
|
providedIn: 'root'
|
|
@@ -1887,10 +1887,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImpor
|
|
|
1887
1887
|
|
|
1888
1888
|
class PtrToasterComponent {
|
|
1889
1889
|
toasterService = inject(PtrToasterService);
|
|
1890
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0
|
|
1891
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0
|
|
1890
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrToasterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1891
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: PtrToasterComponent, isStandalone: true, selector: "ptr-toaster", ngImport: i0, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\n @for (toast of toasterService.getToasts()(); track toast.id) {\n <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\n <span>{{toast.message}}</span>\n <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>×</span></button>\n </div>\n }\n</div>\n", styles: [".toaster-container{position:fixed;top:20px;right:20px;z-index:1000}.toast{padding:10px 20px;margin-bottom:10px;border-radius:calc(var(--wp--custom--default-border-radius) / 2);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 2px 4px 2px #00000026}.success{background-color:var(--wp--preset--color--primary, #28a745)}.error{background-color:var(--wp--custom--color--error, #dc3545)}.info{background-color:var(--wp--preset--color--secondary, #17a2b8)}.warning{background-color:var(--wp--preset--color--secondary, #ffc107)}button{background:none;border:none;color:inherit;font-size:2em;cursor:pointer;font-family:monospace}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
1892
1892
|
}
|
|
1893
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0
|
|
1893
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: PtrToasterComponent, decorators: [{
|
|
1894
1894
|
type: Component,
|
|
1895
1895
|
args: [{ selector: 'ptr-toaster', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"toaster-container\" aria-live=\"polite\" aria-atomic=\"true\">\n @for (toast of toasterService.getToasts()(); track toast.id) {\n <div class=\"toast\" [ngClass]=\"toast.type\" role=\"alert\">\n <span>{{toast.message}}</span>\n <button (click)=\"toasterService.remove(toast.id)\" aria-label=\"Close\"><span>×</span></button>\n </div>\n }\n</div>\n", styles: [".toaster-container{position:fixed;top:20px;right:20px;z-index:1000}.toast{padding:10px 20px;margin-bottom:10px;border-radius:calc(var(--wp--custom--default-border-radius) / 2);color:#fff;display:flex;justify-content:space-between;align-items:center;gap:1rem;box-shadow:0 2px 4px 2px #00000026}.success{background-color:var(--wp--preset--color--primary, #28a745)}.error{background-color:var(--wp--custom--color--error, #dc3545)}.info{background-color:var(--wp--preset--color--secondary, #17a2b8)}.warning{background-color:var(--wp--preset--color--secondary, #ffc107)}button{background:none;border:none;color:inherit;font-size:2em;cursor:pointer;font-family:monospace}\n"] }]
|
|
1896
1896
|
}] });
|
package/package.json
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@patter/ngx-components",
|
|
3
|
-
"version": "21.
|
|
3
|
+
"version": "21.1.7",
|
|
4
4
|
"peerDependencies": {
|
|
5
|
-
"@angular/common": "^21.
|
|
6
|
-
"@angular/core": "^21.
|
|
5
|
+
"@angular/common": "^21.1.0",
|
|
6
|
+
"@angular/core": "^21.1.0"
|
|
7
7
|
},
|
|
8
8
|
"dependencies": {
|
|
9
9
|
"tslib": "^2.3.0"
|
|
index 40abb9d..6496b6d 100644
|
|
|
Binary file
|