@patter/ngx-components 0.5.12 → 0.5.13
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.
- package/esm2022/lib/components/tabs/ptr-tab/ptr-tab.component.mjs +23 -0
- package/esm2022/lib/components/tabs/ptr-tabs/ptr-tabs.component.mjs +71 -0
- package/esm2022/lib/dialog/ptr-dialog/ptr-dialog.component.mjs +6 -3
- package/esm2022/lib/forms/form/form.component.mjs +5 -5
- package/esm2022/lib/forms/input/ptr-input/ptr-input.component.mjs +11 -6
- package/esm2022/lib/forms/input/select/select.component.mjs +10 -4
- package/esm2022/lib/forms/interfaces.mjs +1 -1
- package/esm2022/lib/ptr-breadcrumbs/interfaces.mjs +2 -0
- package/esm2022/lib/ptr-breadcrumbs/ptr-breadcrumbs.component.mjs +59 -0
- package/esm2022/lib/ptr-title/ptr-title.component.mjs +6 -3
- package/esm2022/public-api.mjs +4 -1
- package/fesm2022/patter-ngx-components.mjs +174 -19
- package/fesm2022/patter-ngx-components.mjs.map +1 -1
- package/lib/components/tabs/ptr-tab/ptr-tab.component.d.ts +8 -0
- package/lib/components/tabs/ptr-tabs/ptr-tabs.component.d.ts +23 -0
- package/lib/dialog/ptr-dialog/ptr-dialog.component.d.ts +2 -1
- package/lib/forms/form/form.component.d.ts +1 -1
- package/lib/forms/input/ptr-input/ptr-input.component.d.ts +3 -2
- package/lib/forms/input/select/select.component.d.ts +4 -2
- package/lib/forms/interfaces.d.ts +1 -0
- package/lib/ptr-breadcrumbs/interfaces.d.ts +8 -0
- package/lib/ptr-breadcrumbs/ptr-breadcrumbs.component.d.ts +13 -0
- package/lib/ptr-title/ptr-title.component.d.ts +2 -1
- package/package.json +1 -1
- package/public-api.d.ts +4 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, ChangeDetectionStrategy, Input, signal, EventEmitter, computed, HostBinding, Output, ViewChild, forwardRef, HostListener, inject, ChangeDetectorRef, DestroyRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, createComponent } from '@angular/core';
|
|
2
|
+
import { Component, ChangeDetectionStrategy, Input, signal, EventEmitter, computed, HostBinding, Output, ViewChild, forwardRef, HostListener, inject, ChangeDetectorRef, DestroyRef, ElementRef, ViewContainerRef, Renderer2, Directive, Injectable, createComponent, effect, ContentChildren, ViewChildren } 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';
|
|
@@ -7,7 +7,7 @@ import { CommonModule } from '@angular/common';
|
|
|
7
7
|
import * as i1$2 from '@angular/forms';
|
|
8
8
|
import { FormsModule, NG_VALUE_ACCESSOR, ReactiveFormsModule, FormBuilder } from '@angular/forms';
|
|
9
9
|
import { Subject, debounceTime, distinctUntilChanged, switchMap, of, filter, startWith, map } from 'rxjs';
|
|
10
|
-
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
10
|
+
import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
|
|
11
11
|
|
|
12
12
|
class PtrMenuComponent {
|
|
13
13
|
menuItems = [];
|
|
@@ -325,6 +325,7 @@ class PtrSelectComponent {
|
|
|
325
325
|
placeholder = 'Select an option';
|
|
326
326
|
label = '';
|
|
327
327
|
description = '';
|
|
328
|
+
labelPosition = 'top';
|
|
328
329
|
selectionChange = new EventEmitter();
|
|
329
330
|
selectButton;
|
|
330
331
|
dialogList;
|
|
@@ -337,6 +338,9 @@ class PtrSelectComponent {
|
|
|
337
338
|
const selectedOption = allOptions?.find(option => option.value === currentValue);
|
|
338
339
|
return selectedOption ? selectedOption.label : null;
|
|
339
340
|
});
|
|
341
|
+
effectivePlaceholder = computed(() => {
|
|
342
|
+
return this.placeholder ?? 'Select an option';
|
|
343
|
+
});
|
|
340
344
|
componentId = Math.random().toString(36).substring(2);
|
|
341
345
|
labelId = `${this.componentId}-label`;
|
|
342
346
|
inputId = `${this.componentId}-input`;
|
|
@@ -393,13 +397,13 @@ class PtrSelectComponent {
|
|
|
393
397
|
});
|
|
394
398
|
}
|
|
395
399
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
396
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrSelectComponent, isStandalone: true, selector: "ptr-select", inputs: { options: "options", showSearch: "showSearch", placeholder: "placeholder", label: "label", description: "description" }, outputs: { selectionChange: "selectionChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
400
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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: [
|
|
397
401
|
{
|
|
398
402
|
provide: NG_VALUE_ACCESSOR,
|
|
399
403
|
useExisting: forwardRef(() => PtrSelectComponent),
|
|
400
404
|
multi: true
|
|
401
405
|
}
|
|
402
|
-
], 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\">{{ label }}</label>\r\n@if(description){\r\n
|
|
406
|
+
], 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\">@if (displayValue(); as dValue) { {{dValue}} } @else { {{effectivePlaceholder()}} }</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);background-position:calc(100% - 4px) 50%;background-repeat:no-repeat;background-image:url(data:image/png;base64,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)}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.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 });
|
|
403
407
|
}
|
|
404
408
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrSelectComponent, decorators: [{
|
|
405
409
|
type: Component,
|
|
@@ -413,7 +417,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
413
417
|
useExisting: forwardRef(() => PtrSelectComponent),
|
|
414
418
|
multi: true
|
|
415
419
|
}
|
|
416
|
-
], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\">{{ label }}</label>\r\n@if(description){\r\n
|
|
420
|
+
], 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\">@if (displayValue(); as dValue) { {{dValue}} } @else { {{effectivePlaceholder()}} }</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);background-position:calc(100% - 4px) 50%;background-repeat:no-repeat;background-image:url(data:image/png;base64,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)}.select-button[aria-expanded=true]{border-bottom-left-radius:0;border-bottom-right-radius:0}.gfield--input-wrapper--label-inline .select-button{border-color:transparent;outline:0}\n"] }]
|
|
417
421
|
}], propDecorators: { options: [{
|
|
418
422
|
type: Input
|
|
419
423
|
}], showSearch: [{
|
|
@@ -424,6 +428,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
424
428
|
type: Input
|
|
425
429
|
}], description: [{
|
|
426
430
|
type: Input
|
|
431
|
+
}], labelPosition: [{
|
|
432
|
+
type: Input
|
|
427
433
|
}], selectionChange: [{
|
|
428
434
|
type: Output
|
|
429
435
|
}], selectButton: [{
|
|
@@ -446,6 +452,7 @@ class PtrInputComponent {
|
|
|
446
452
|
description = '';
|
|
447
453
|
dialogHelpText = '';
|
|
448
454
|
searchFn;
|
|
455
|
+
labelPosition = 'top';
|
|
449
456
|
input;
|
|
450
457
|
dialogList;
|
|
451
458
|
componentId = Math.random().toString(36).substring(2);
|
|
@@ -458,8 +465,10 @@ class PtrInputComponent {
|
|
|
458
465
|
onChange = () => { };
|
|
459
466
|
onTouched = () => { };
|
|
460
467
|
onDocumentClick(event) {
|
|
461
|
-
if (
|
|
462
|
-
this.dialogList.
|
|
468
|
+
if (this.searchFn) {
|
|
469
|
+
if (!this.dialogList?.dialog.nativeElement.contains(event.target) && this.dialogList?.isOpen()) {
|
|
470
|
+
this.dialogList.closeDialog();
|
|
471
|
+
}
|
|
463
472
|
}
|
|
464
473
|
}
|
|
465
474
|
ngOnInit() {
|
|
@@ -517,13 +526,13 @@ class PtrInputComponent {
|
|
|
517
526
|
}
|
|
518
527
|
}
|
|
519
528
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
520
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrInputComponent, isStandalone: true, selector: "ptr-input", inputs: { type: "type", label: "label", placeholder: "placeholder", autocomplete: "autocomplete", description: "description", dialogHelpText: "dialogHelpText", searchFn: "searchFn" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, providers: [
|
|
529
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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: [
|
|
521
530
|
{
|
|
522
531
|
provide: NG_VALUE_ACCESSOR,
|
|
523
532
|
useExisting: forwardRef(() => PtrInputComponent),
|
|
524
533
|
multi: true
|
|
525
534
|
}
|
|
526
|
-
], 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\">{{ 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\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 <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\r\n
|
|
535
|
+
], 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 <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 @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: CommonModule }, { 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 });
|
|
527
536
|
}
|
|
528
537
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrInputComponent, decorators: [{
|
|
529
538
|
type: Component,
|
|
@@ -538,7 +547,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
538
547
|
useExisting: forwardRef(() => PtrInputComponent),
|
|
539
548
|
multi: true
|
|
540
549
|
}
|
|
541
|
-
], template: "<label class=\"gfield_label gform-field-label\" [attr.for]=\"inputId\">{{ 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\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 <ptr-dialog-list #dialogList [options]=\"searchResultOptions()\" (selectionChange)=\"onOptionSelected($event)\"\r\n
|
|
550
|
+
], 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 <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 @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" }]
|
|
542
551
|
}], propDecorators: { type: [{
|
|
543
552
|
type: Input
|
|
544
553
|
}], label: [{
|
|
@@ -553,6 +562,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
553
562
|
type: Input
|
|
554
563
|
}], searchFn: [{
|
|
555
564
|
type: Input
|
|
565
|
+
}], labelPosition: [{
|
|
566
|
+
type: Input
|
|
556
567
|
}], input: [{
|
|
557
568
|
type: ViewChild,
|
|
558
569
|
args: ['input']
|
|
@@ -619,9 +630,9 @@ class PtrFormComponent {
|
|
|
619
630
|
}
|
|
620
631
|
getFieldPlaceholder(field) {
|
|
621
632
|
if (!field.conditional?.placeholder)
|
|
622
|
-
return field.placeholder ||
|
|
633
|
+
return field.placeholder || null;
|
|
623
634
|
const conditionalPlaceholder = this.evaluateConditionalRules(field.conditional.placeholder);
|
|
624
|
-
return conditionalPlaceholder || field.placeholder ||
|
|
635
|
+
return conditionalPlaceholder || field.placeholder || null;
|
|
625
636
|
}
|
|
626
637
|
evaluateConditionalRules(rules) {
|
|
627
638
|
for (const rule of rules) {
|
|
@@ -633,7 +644,7 @@ class PtrFormComponent {
|
|
|
633
644
|
return false;
|
|
634
645
|
}
|
|
635
646
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
636
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n @if (error) {\r\n <div class=\"gform_validation_errors\">\r\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n </div>\r\n }\r\n\r\n @if (config.title) {\r\n <div class=\"gform_heading\">\r\n <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <div class=\"gform_fields\">\r\n\r\n @for (field of config.fields; track field.name) {\r\n @if(isFieldVisible(field)) {\r\n\r\n <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\r\n [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n\r\n @switch (field.type) {\r\n @case ('textarea') {\r\n <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ getFieldLabel(field) }}</label>\r\n @if(field.description){\r\n <div class=\"gfield_description\">{{field.description}}</div>\r\n }\r\n <div class=\"gfield--input-wrapper ginput_container\">\r\n <textarea [id]=\"field.name\" [formControlName]=\"field.name\" [attr.placeholder]=\"getFieldPlaceholder(field)\"></textarea>\r\n </div>\r\n }\r\n @case ('select') {\r\n <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\"
|
|
647
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrFormComponent, isStandalone: true, selector: "ptr-form", inputs: { config: "config", loading: "loading", error: "error" }, outputs: { formSubmit: "formSubmit", formGroupCreated: "formGroupCreated" }, ngImport: i0, template: "<div [class]=\"'gform_wrapper ' + config.formClass\">\r\n\r\n @if (error) {\r\n <div class=\"gform_validation_errors\">\r\n <h2 class=\"gform_submission_error hide_summary\">{{error}}</h2>\r\n </div>\r\n }\r\n\r\n @if (config.title) {\r\n <div class=\"gform_heading\">\r\n <h2 class=\"gform_title\">{{ config.title }}</h2>\r\n </div>\r\n }\r\n\r\n <form [formGroup]=\"formGroup\" (ngSubmit)=\"onSubmit()\">\r\n\r\n <div class=\"gform_fields\">\r\n\r\n @for (field of config.fields; track field.name) {\r\n @if(isFieldVisible(field)) {\r\n\r\n <div class=\"gfield gfield--width-{{field.size}}\" [class.gform_hidden]=\"field.type === 'hidden'\"\r\n [class.gfield_error]=\"formGroup.get(field.name)?.invalid && formGroup.get(field.name)?.touched\">\r\n\r\n @switch (field.type) {\r\n @case ('textarea') {\r\n <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ getFieldLabel(field) }}</label>\r\n @if(field.description){\r\n <div class=\"gfield_description\">{{field.description}}</div>\r\n }\r\n <div class=\"gfield--input-wrapper ginput_container\">\r\n <textarea [id]=\"field.name\" [formControlName]=\"field.name\" [attr.placeholder]=\"getFieldPlaceholder(field)\"></textarea>\r\n </div>\r\n }\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 @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\">{{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: "pipe", type: i1$1.KeyValuePipe, name: "keyvalue" }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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: PtrInputComponent, selector: "ptr-input", inputs: ["type", "label", "placeholder", "autocomplete", "description", "dialogHelpText", "searchFn", "labelPosition"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
637
648
|
}
|
|
638
649
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrFormComponent, decorators: [{
|
|
639
650
|
type: Component,
|
|
@@ -643,7 +654,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
643
654
|
PtrButtonComponent,
|
|
644
655
|
PtrSelectComponent,
|
|
645
656
|
PtrInputComponent
|
|
646
|
-
], 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\">\r\n\r\n @switch (field.type) {\r\n @case ('textarea') {\r\n <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ getFieldLabel(field) }}</label>\r\n @if(field.description){\r\n <div class=\"gfield_description\">{{field.description}}</div>\r\n }\r\n <div class=\"gfield--input-wrapper ginput_container\">\r\n <textarea [id]=\"field.name\" [formControlName]=\"field.name\" [attr.placeholder]=\"getFieldPlaceholder(field)\"></textarea>\r\n </div>\r\n }\r\n @case ('select') {\r\n <ptr-select [label]=\"getFieldLabel(field)\" [formControlName]=\"field.name\" [options]=\"field.options\"\r\n [placeholder]=\"getFieldPlaceholder(field)\"
|
|
657
|
+
], 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\">\r\n\r\n @switch (field.type) {\r\n @case ('textarea') {\r\n <label class=\"gfield_label gform-field-label\" [for]=\"field.name\">{{ getFieldLabel(field) }}</label>\r\n @if(field.description){\r\n <div class=\"gfield_description\">{{field.description}}</div>\r\n }\r\n <div class=\"gfield--input-wrapper ginput_container\">\r\n <textarea [id]=\"field.name\" [formControlName]=\"field.name\" [attr.placeholder]=\"getFieldPlaceholder(field)\"></textarea>\r\n </div>\r\n }\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 @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\">{{config.submitText}}</ptr-button>\r\n </div>\r\n }\r\n\r\n </form>\r\n</div>\r\n" }]
|
|
647
658
|
}], propDecorators: { config: [{
|
|
648
659
|
type: Input
|
|
649
660
|
}], loading: [{
|
|
@@ -659,6 +670,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
659
670
|
class PtrTitleComponent {
|
|
660
671
|
styleClass = 'entry-title';
|
|
661
672
|
wrapperStyleClass = '';
|
|
673
|
+
screenReaderOnly = false;
|
|
662
674
|
router = inject(Router);
|
|
663
675
|
activatedRoute = inject(ActivatedRoute);
|
|
664
676
|
titleStrategy = inject(TitleStrategy);
|
|
@@ -690,15 +702,17 @@ class PtrTitleComponent {
|
|
|
690
702
|
return route;
|
|
691
703
|
}
|
|
692
704
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTitleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
693
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", inputs: { styleClass: "styleClass", wrapperStyleClass: "wrapperStyleClass" }, ngImport: i0, template: "@if ((hideTitle$|async) === false) {\r\n @if(wrapperStyleClass) {\r\n <header [class]=\"wrapperStyleClass\">\r\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n </header>\r\n } @else {\r\n <h1 [class]=\"styleClass\">{{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 });
|
|
705
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrTitleComponent, isStandalone: true, selector: "ptr-title", inputs: { styleClass: "styleClass", wrapperStyleClass: "wrapperStyleClass", screenReaderOnly: "screenReaderOnly" }, ngImport: i0, template: "@if ((hideTitle$|async) === false) {\r\n @if(wrapperStyleClass) {\r\n <header [class]=\"wrapperStyleClass\" [class.screen-reader-text]=\"screenReaderOnly\">\r\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n </header>\r\n } @else {\r\n <h1 [class]=\"styleClass\" [class.screen-reader-text]=\"screenReaderOnly\">{{displayTitle$|async}}</h1>\r\n }\r\n}\r\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
694
706
|
}
|
|
695
707
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTitleComponent, decorators: [{
|
|
696
708
|
type: Component,
|
|
697
|
-
args: [{ selector: 'ptr-title', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if ((hideTitle$|async) === false) {\r\n @if(wrapperStyleClass) {\r\n <header [class]=\"wrapperStyleClass\">\r\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n </header>\r\n } @else {\r\n <h1 [class]=\"styleClass\">{{displayTitle$|async}}</h1>\r\n }\r\n}\r\n" }]
|
|
709
|
+
args: [{ selector: 'ptr-title', standalone: true, 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" }]
|
|
698
710
|
}], propDecorators: { styleClass: [{
|
|
699
711
|
type: Input
|
|
700
712
|
}], wrapperStyleClass: [{
|
|
701
713
|
type: Input
|
|
714
|
+
}], screenReaderOnly: [{
|
|
715
|
+
type: Input
|
|
702
716
|
}] } });
|
|
703
717
|
|
|
704
718
|
class PtrLoadingSpinnerComponent {
|
|
@@ -873,6 +887,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
873
887
|
|
|
874
888
|
class PtrDialogComponent {
|
|
875
889
|
dialogElement;
|
|
890
|
+
title = '';
|
|
876
891
|
message = '';
|
|
877
892
|
buttonText = 'Confirm';
|
|
878
893
|
buttonStyle = 'normal';
|
|
@@ -891,16 +906,18 @@ class PtrDialogComponent {
|
|
|
891
906
|
this.closed.emit(null);
|
|
892
907
|
}
|
|
893
908
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
894
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n <div class=\"ptr-modal__content\">\r\n <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">\r\n
|
|
909
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.0", type: PtrDialogComponent, isStandalone: true, selector: "ptr-dialog", inputs: { title: "title", message: "message", buttonText: "buttonText", buttonStyle: "buttonStyle" }, outputs: { closed: "closed" }, viewQueries: [{ propertyName: "dialogElement", first: true, predicate: ["dialogElement"], descendants: true }], ngImport: i0, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n <div class=\"ptr-modal__content\">\r\n\r\n <div class=\"ptr-modal__header\">\r\n <h2 class=\"ptr-modal__title\">{{title}}</h2>\r\n <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">×</button>\r\n </div>\r\n\r\n <p>{{ message }}</p>\r\n <div class=\"ptr-modal__actions\">\r\n <ptr-button buttonStyle=\"secondary\" (clicked)=\"close()\" [isSmallSize]=\"true\">Cancel</ptr-button>\r\n <ptr-button class=\"ml-auto\" [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\"\r\n [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\r\n </div>\r\n\r\n </div>\r\n</dialog>\r\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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
|
|
895
910
|
}
|
|
896
911
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrDialogComponent, decorators: [{
|
|
897
912
|
type: Component,
|
|
898
913
|
args: [{ selector: 'ptr-dialog', standalone: true, imports: [
|
|
899
914
|
PtrButtonComponent
|
|
900
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n <div class=\"ptr-modal__content\">\r\n <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">\r\n
|
|
915
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<dialog #dialogElement class=\"ptr-modal\" (close)=\"onClose()\">\r\n <div class=\"ptr-modal__content\">\r\n\r\n <div class=\"ptr-modal__header\">\r\n <h2 class=\"ptr-modal__title\">{{title}}</h2>\r\n <button class=\"ptr-modal__close\" (click)=\"close()\" aria-label=\"Close dialog\">×</button>\r\n </div>\r\n\r\n <p>{{ message }}</p>\r\n <div class=\"ptr-modal__actions\">\r\n <ptr-button buttonStyle=\"secondary\" (clicked)=\"close()\" [isSmallSize]=\"true\">Cancel</ptr-button>\r\n <ptr-button class=\"ml-auto\" [buttonStyle]=\"buttonStyle\" (clicked)=\"confirm()\"\r\n [isSmallSize]=\"true\">{{buttonText}}</ptr-button>\r\n </div>\r\n\r\n </div>\r\n</dialog>\r\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"] }]
|
|
901
916
|
}], propDecorators: { dialogElement: [{
|
|
902
917
|
type: ViewChild,
|
|
903
918
|
args: ['dialogElement']
|
|
919
|
+
}], title: [{
|
|
920
|
+
type: Input
|
|
904
921
|
}], message: [{
|
|
905
922
|
type: Input
|
|
906
923
|
}], buttonText: [{
|
|
@@ -984,6 +1001,144 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
984
1001
|
args: ['tooltipDialog']
|
|
985
1002
|
}] } });
|
|
986
1003
|
|
|
1004
|
+
class PtrBreadcrumbsComponent {
|
|
1005
|
+
showFirstSeparator = true;
|
|
1006
|
+
router = inject(Router);
|
|
1007
|
+
activatedRoute = inject(ActivatedRoute);
|
|
1008
|
+
routeEvents = toSignal(this.router.events.pipe(filter(event => event instanceof NavigationEnd), distinctUntilChanged()));
|
|
1009
|
+
breadcrumbs = computed(() => {
|
|
1010
|
+
this.routeEvents();
|
|
1011
|
+
return this.createBreadcrumbs(this.activatedRoute.root);
|
|
1012
|
+
});
|
|
1013
|
+
createBreadcrumbs(route, routeUrl = '', breadcrumbs = []) {
|
|
1014
|
+
const routeChildren = route.children;
|
|
1015
|
+
if (routeChildren.length === 0) {
|
|
1016
|
+
return breadcrumbs;
|
|
1017
|
+
}
|
|
1018
|
+
for (const child of routeChildren) {
|
|
1019
|
+
const routeURL = child.snapshot.url.map(segment => segment.path).join('/');
|
|
1020
|
+
if (routeURL !== '') {
|
|
1021
|
+
routeUrl += `/${routeURL}`;
|
|
1022
|
+
}
|
|
1023
|
+
const { label, url } = this.getLabelForRoute(child);
|
|
1024
|
+
if (label) {
|
|
1025
|
+
breadcrumbs.push({ label, url: url ?? routeUrl });
|
|
1026
|
+
}
|
|
1027
|
+
return this.createBreadcrumbs(child, routeUrl, breadcrumbs);
|
|
1028
|
+
}
|
|
1029
|
+
return breadcrumbs;
|
|
1030
|
+
}
|
|
1031
|
+
getLabelForRoute(route) {
|
|
1032
|
+
const breadcrumbReturnInfo = {};
|
|
1033
|
+
const customBreadcrumb = route.snapshot.data['breadcrumb'];
|
|
1034
|
+
if (customBreadcrumb) {
|
|
1035
|
+
if (customBreadcrumb.label) {
|
|
1036
|
+
breadcrumbReturnInfo.label = customBreadcrumb.label;
|
|
1037
|
+
}
|
|
1038
|
+
if (customBreadcrumb.url) {
|
|
1039
|
+
breadcrumbReturnInfo.url = customBreadcrumb.url;
|
|
1040
|
+
}
|
|
1041
|
+
}
|
|
1042
|
+
else if (route.snapshot.title) {
|
|
1043
|
+
breadcrumbReturnInfo.label = route.snapshot.title;
|
|
1044
|
+
}
|
|
1045
|
+
return breadcrumbReturnInfo;
|
|
1046
|
+
}
|
|
1047
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrBreadcrumbsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1048
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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}.breadcrumb-item a{border-bottom:2px solid transparent;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 });
|
|
1049
|
+
}
|
|
1050
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrBreadcrumbsComponent, decorators: [{
|
|
1051
|
+
type: Component,
|
|
1052
|
+
args: [{ selector: 'ptr-breadcrumbs', standalone: true, 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}.breadcrumb-item a{border-bottom:2px solid transparent;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"] }]
|
|
1053
|
+
}], propDecorators: { showFirstSeparator: [{
|
|
1054
|
+
type: Input
|
|
1055
|
+
}] } });
|
|
1056
|
+
|
|
1057
|
+
class PtrTabComponent {
|
|
1058
|
+
label;
|
|
1059
|
+
link;
|
|
1060
|
+
active = signal(false);
|
|
1061
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTabComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1062
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.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 });
|
|
1063
|
+
}
|
|
1064
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTabComponent, decorators: [{
|
|
1065
|
+
type: Component,
|
|
1066
|
+
args: [{
|
|
1067
|
+
selector: 'ptr-tab',
|
|
1068
|
+
standalone: true,
|
|
1069
|
+
template: '@if(active()){<ng-content></ng-content>}',
|
|
1070
|
+
changeDetection: ChangeDetectionStrategy.OnPush
|
|
1071
|
+
}]
|
|
1072
|
+
}], propDecorators: { label: [{
|
|
1073
|
+
type: Input
|
|
1074
|
+
}], link: [{
|
|
1075
|
+
type: Input
|
|
1076
|
+
}] } });
|
|
1077
|
+
|
|
1078
|
+
class PtrTabsComponent {
|
|
1079
|
+
tabComponents;
|
|
1080
|
+
buttons;
|
|
1081
|
+
router = inject(Router);
|
|
1082
|
+
destroyRef = inject(DestroyRef);
|
|
1083
|
+
tabs = signal([]);
|
|
1084
|
+
activeTabIndex = signal(0);
|
|
1085
|
+
useLinks = signal(false);
|
|
1086
|
+
sliderPosition = signal({ transform: 'translateX(0)', width: '0' });
|
|
1087
|
+
constructor() {
|
|
1088
|
+
effect(() => {
|
|
1089
|
+
const activeTab = this.tabs().find(tab => tab.active());
|
|
1090
|
+
if (activeTab?.link) {
|
|
1091
|
+
this.router.navigate([activeTab.link]);
|
|
1092
|
+
}
|
|
1093
|
+
this.updateSliderPosition();
|
|
1094
|
+
}, { allowSignalWrites: true });
|
|
1095
|
+
}
|
|
1096
|
+
ngAfterViewInit() {
|
|
1097
|
+
this.tabComponents.changes
|
|
1098
|
+
.pipe(takeUntilDestroyed(this.destroyRef))
|
|
1099
|
+
.subscribe(() => {
|
|
1100
|
+
this.updateTabs();
|
|
1101
|
+
});
|
|
1102
|
+
this.updateTabs();
|
|
1103
|
+
}
|
|
1104
|
+
updateTabs() {
|
|
1105
|
+
this.tabs.set(this.tabComponents.toArray());
|
|
1106
|
+
this.useLinks.set(this.tabs().some(tab => !!tab.link));
|
|
1107
|
+
if (this.tabs().length > 0 && !this.tabs().some(tab => tab.active())) {
|
|
1108
|
+
this.selectTab(0);
|
|
1109
|
+
}
|
|
1110
|
+
else {
|
|
1111
|
+
this.updateSliderPosition();
|
|
1112
|
+
}
|
|
1113
|
+
}
|
|
1114
|
+
selectTab(index) {
|
|
1115
|
+
this.tabs().forEach((tab, i) => tab.active.set(i === index));
|
|
1116
|
+
this.activeTabIndex.set(index);
|
|
1117
|
+
}
|
|
1118
|
+
updateSliderPosition() {
|
|
1119
|
+
const activeButton = this.buttons?.get(this.activeTabIndex())?.nativeElement;
|
|
1120
|
+
if (activeButton) {
|
|
1121
|
+
const { offsetLeft, offsetWidth } = activeButton;
|
|
1122
|
+
this.sliderPosition.set({
|
|
1123
|
+
transform: `translateX(${offsetLeft}px)`,
|
|
1124
|
+
width: `${offsetWidth}px`
|
|
1125
|
+
});
|
|
1126
|
+
}
|
|
1127
|
+
}
|
|
1128
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTabsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1129
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: PtrTabsComponent, isStandalone: true, selector: "ptr-tabs", queries: [{ propertyName: "tabComponents", predicate: PtrTabComponent }], viewQueries: [{ propertyName: "buttons", predicate: ["tabButton"], descendants: true }], ngImport: i0, template: "<div class=\"tabs-container\" role=\"tablist\">\r\n @for (tab of tabs(); track $index; let i = $index) {\r\n <button #tabButton [attr.role]=\"tab.link ? 'link' : 'tab'\" [attr.aria-selected]=\"tab.active()\"\r\n [class.active]=\"tab.active()\" (click)=\"selectTab(i)\" [routerLink]=\"tab.link\">{{tab.label}}</button>\r\n }\r\n\r\n <div class=\"slider\" [style.transform]=\"sliderPosition().transform\" [style.width]=\"sliderPosition().width\"></div>\r\n</div>\r\n\r\n@if (!useLinks()) {\r\n<div class=\"tab-content\">\r\n <ng-content></ng-content>\r\n</div>\r\n}\r\n", styles: [".tabs-container{display:flex;position:relative}button{display:inline-flex;max-width:360px;appearance:none;padding:.5rem 1rem;border:none;background:none;cursor:pointer;font-weight:700;font-size:var(--wp--preset--font-size--small, inherit)}button:hover,button:focus{background-color:var(----wp--preset--color--light, rgba(51, 54, 70, .0392156863))}.slider{position:absolute;bottom:-2px;height:2px;background-color:var(--wp--preset--color--secondary, #0073aa);transition:transform .3s ease}.tab-content{padding:20px 0}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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 });
|
|
1130
|
+
}
|
|
1131
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: PtrTabsComponent, decorators: [{
|
|
1132
|
+
type: Component,
|
|
1133
|
+
args: [{ selector: 'ptr-tabs', standalone: true, imports: [CommonModule, 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"] }]
|
|
1134
|
+
}], ctorParameters: () => [], propDecorators: { tabComponents: [{
|
|
1135
|
+
type: ContentChildren,
|
|
1136
|
+
args: [PtrTabComponent]
|
|
1137
|
+
}], buttons: [{
|
|
1138
|
+
type: ViewChildren,
|
|
1139
|
+
args: ['tabButton']
|
|
1140
|
+
}] } });
|
|
1141
|
+
|
|
987
1142
|
/*
|
|
988
1143
|
* Public API Surface of ngx-components
|
|
989
1144
|
*/
|
|
@@ -992,5 +1147,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImpor
|
|
|
992
1147
|
* Generated bundle index. Do not edit.
|
|
993
1148
|
*/
|
|
994
1149
|
|
|
995
|
-
export { PtrButtonComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrSelectComponent, PtrTitleComponent, PtrTooltipComponent };
|
|
1150
|
+
export { PtrBreadcrumbsComponent, PtrButtonComponent, PtrDialogComponent, PtrDialogService, PtrFormComponent, PtrInputComponent, PtrLoadingService, PtrLoadingSpinnerComponent, PtrLoadingSpinnerDirective, PtrMenuComponent, PtrSelectComponent, PtrTabComponent, PtrTabsComponent, PtrTitleComponent, PtrTooltipComponent };
|
|
996
1151
|
//# sourceMappingURL=patter-ngx-components.mjs.map
|