@pecb-ui/components 1.1.4 → 1.1.5
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/fesm2022/pecb-ui-components.mjs +36 -17
- package/fesm2022/pecb-ui-components.mjs.map +1 -1
- package/index.d.ts +20 -3
- package/package.json +1 -1
|
@@ -517,11 +517,11 @@ class StatusComponent {
|
|
|
517
517
|
return classes;
|
|
518
518
|
}
|
|
519
519
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
520
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: StatusComponent, isStandalone: true, selector: "pecb-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n [id]=\"id\"\n [ngClass]=\"statusClasses\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"status\"\n>\n <ng-content></ng-content>{{ text() }}\n</span>\n", styles: [".pecb-status{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-family:inherit;font-weight:500;border-radius:9999px;white-space:nowrap;transition:all .15s ease-in-out;box-sizing:border-box}.pecb-status--outline{border-radius:8px}.pecb-status--sm{padding:2px 8px;font-size:12px;line-height:1.4}.pecb-status--md{padding:4px 12px;font-size:12px;line-height:1.5}.pecb-status--lg{padding:6px 16px;font-size:14px;line-height:1.5}.pecb-status--warning.pecb-status--accent{background-color:#fff4e5;color:#
|
|
520
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: StatusComponent, isStandalone: true, selector: "pecb-status", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, customClass: { classPropertyName: "customClass", publicName: "customClass", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<span\n [id]=\"id\"\n [ngClass]=\"statusClasses\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"status\"\n>\n <ng-content></ng-content>{{ text() }}\n</span>\n", styles: [".pecb-status{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-family:inherit;font-weight:500;border-radius:9999px;white-space:nowrap;transition:all .15s ease-in-out;box-sizing:border-box}.pecb-status--outline{border-radius:8px}.pecb-status--sm{padding:2px 8px;font-size:12px;line-height:1.4}.pecb-status--md{padding:4px 12px;font-size:12px;line-height:1.5}.pecb-status--lg{padding:6px 16px;font-size:14px;line-height:1.5}.pecb-status--warning.pecb-status--accent{background-color:#fff4e5;color:#ff9c4a}.pecb-status--action.pecb-status--accent{background-color:#e6f0fa;color:#5eacff}.pecb-status--success.pecb-status--accent{background-color:#e6f4ea;color:#57bc57}.pecb-status--error.pecb-status--accent{background-color:#fdecea;color:#ff606f}.pecb-status--different.pecb-status--accent{background-color:#eee8ff;color:#a98cff}.pecb-status--disabled.pecb-status--accent{background-color:#f4f4f4;color:#c2c2c2}.pecb-status--neutral.pecb-status--accent{background-color:#ececec;color:#919191}.pecb-status--warning.pecb-status--filled{background-color:#ff9c4a;color:#fff}.pecb-status--action.pecb-status--filled{background-color:#5eacff;color:#fff}.pecb-status--success.pecb-status--filled{background-color:#57bc57;color:#fff}.pecb-status--error.pecb-status--filled{background-color:#ff606f;color:#fff}.pecb-status--different.pecb-status--filled{background-color:#a98cff;color:#fff}.pecb-status--disabled.pecb-status--filled{background-color:#c2c2c2;color:#fff}.pecb-status--neutral.pecb-status--filled{background-color:#616161;color:#fff}.pecb-status--warning.pecb-status--outline{background-color:#fff4e5;color:#ff9c4a;border:1px solid #ff9c4a}.pecb-status--action.pecb-status--outline{background-color:#e6f0fa;color:#5eacff;border:1px solid #5eacff}.pecb-status--success.pecb-status--outline{background-color:#e6f4ea;color:#57bc57;border:1px solid #57bc57}.pecb-status--error.pecb-status--outline{background-color:#fdecea;color:#ff606f;border:1px solid #ff606f}.pecb-status--different.pecb-status--outline{background-color:#eee8ff;color:#a98cff;border:1px solid #a98cff}.pecb-status--disabled.pecb-status--outline{background-color:#f4f4f4;color:#c2c2c2;border:1px solid #ececec}.pecb-status--neutral.pecb-status--outline{background-color:#c2c2c2;color:#616161;border:1px solid #616161}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
521
521
|
}
|
|
522
522
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: StatusComponent, decorators: [{
|
|
523
523
|
type: Component,
|
|
524
|
-
args: [{ selector: 'pecb-status', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [id]=\"id\"\n [ngClass]=\"statusClasses\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"status\"\n>\n <ng-content></ng-content>{{ text() }}\n</span>\n", styles: [".pecb-status{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-family:inherit;font-weight:500;border-radius:9999px;white-space:nowrap;transition:all .15s ease-in-out;box-sizing:border-box}.pecb-status--outline{border-radius:8px}.pecb-status--sm{padding:2px 8px;font-size:12px;line-height:1.4}.pecb-status--md{padding:4px 12px;font-size:12px;line-height:1.5}.pecb-status--lg{padding:6px 16px;font-size:14px;line-height:1.5}.pecb-status--warning.pecb-status--accent{background-color:#fff4e5;color:#
|
|
524
|
+
args: [{ selector: 'pecb-status', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<span\n [id]=\"id\"\n [ngClass]=\"statusClasses\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"status\"\n>\n <ng-content></ng-content>{{ text() }}\n</span>\n", styles: [".pecb-status{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;font-family:inherit;font-weight:500;border-radius:9999px;white-space:nowrap;transition:all .15s ease-in-out;box-sizing:border-box}.pecb-status--outline{border-radius:8px}.pecb-status--sm{padding:2px 8px;font-size:12px;line-height:1.4}.pecb-status--md{padding:4px 12px;font-size:12px;line-height:1.5}.pecb-status--lg{padding:6px 16px;font-size:14px;line-height:1.5}.pecb-status--warning.pecb-status--accent{background-color:#fff4e5;color:#ff9c4a}.pecb-status--action.pecb-status--accent{background-color:#e6f0fa;color:#5eacff}.pecb-status--success.pecb-status--accent{background-color:#e6f4ea;color:#57bc57}.pecb-status--error.pecb-status--accent{background-color:#fdecea;color:#ff606f}.pecb-status--different.pecb-status--accent{background-color:#eee8ff;color:#a98cff}.pecb-status--disabled.pecb-status--accent{background-color:#f4f4f4;color:#c2c2c2}.pecb-status--neutral.pecb-status--accent{background-color:#ececec;color:#919191}.pecb-status--warning.pecb-status--filled{background-color:#ff9c4a;color:#fff}.pecb-status--action.pecb-status--filled{background-color:#5eacff;color:#fff}.pecb-status--success.pecb-status--filled{background-color:#57bc57;color:#fff}.pecb-status--error.pecb-status--filled{background-color:#ff606f;color:#fff}.pecb-status--different.pecb-status--filled{background-color:#a98cff;color:#fff}.pecb-status--disabled.pecb-status--filled{background-color:#c2c2c2;color:#fff}.pecb-status--neutral.pecb-status--filled{background-color:#616161;color:#fff}.pecb-status--warning.pecb-status--outline{background-color:#fff4e5;color:#ff9c4a;border:1px solid #ff9c4a}.pecb-status--action.pecb-status--outline{background-color:#e6f0fa;color:#5eacff;border:1px solid #5eacff}.pecb-status--success.pecb-status--outline{background-color:#e6f4ea;color:#57bc57;border:1px solid #57bc57}.pecb-status--error.pecb-status--outline{background-color:#fdecea;color:#ff606f;border:1px solid #ff606f}.pecb-status--different.pecb-status--outline{background-color:#eee8ff;color:#a98cff;border:1px solid #a98cff}.pecb-status--disabled.pecb-status--outline{background-color:#f4f4f4;color:#c2c2c2;border:1px solid #ececec}.pecb-status--neutral.pecb-status--outline{background-color:#c2c2c2;color:#616161;border:1px solid #616161}\n"] }]
|
|
525
525
|
}], propDecorators: { type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }], text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], customClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClass", required: false }] }] } });
|
|
526
526
|
|
|
527
527
|
class PaginationComponent {
|
|
@@ -669,11 +669,11 @@ class PaginationComponent {
|
|
|
669
669
|
return pages;
|
|
670
670
|
}
|
|
671
671
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
672
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: PaginationComponent, isStandalone: true, selector: "pecb-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showItemsInfo: { classPropertyName: "showItemsInfo", publicName: "showItemsInfo", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">Items per page:</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"'Select items per page'\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" aria-label=\"Page navigation\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#f7f5f5;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#f4f4f4;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#f4f4f4;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
672
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: PaginationComponent, isStandalone: true, selector: "pecb-pagination", inputs: { totalItems: { classPropertyName: "totalItems", publicName: "totalItems", isSignal: true, isRequired: false, transformFunction: null }, pageSize: { classPropertyName: "pageSize", publicName: "pageSize", isSignal: true, isRequired: false, transformFunction: null }, currentPage: { classPropertyName: "currentPage", publicName: "currentPage", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, showPageSizeSelector: { classPropertyName: "showPageSizeSelector", publicName: "showPageSizeSelector", isSignal: true, isRequired: false, transformFunction: null }, showItemsInfo: { classPropertyName: "showItemsInfo", publicName: "showItemsInfo", isSignal: true, isRequired: false, transformFunction: null }, maxVisiblePages: { classPropertyName: "maxVisiblePages", publicName: "maxVisiblePages", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "aria-label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { pageSize: "pageSizeChange", currentPage: "currentPageChange", pageChange: "pageChange", pageSizeChange: "pageSizeChange" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, ngImport: i0, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">Items per page:</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 3.5L5 7L8.5 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"'Select items per page'\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" aria-label=\"Page navigation\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#ececec;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#ececec;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#ececec;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
673
673
|
}
|
|
674
674
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PaginationComponent, decorators: [{
|
|
675
675
|
type: Component,
|
|
676
|
-
args: [{ selector: 'pecb-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">Items per page:</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M4 6L8 10L12 6\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"'Select items per page'\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" aria-label=\"Page navigation\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#f7f5f5;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#f4f4f4;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#f4f4f4;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}\n"] }]
|
|
676
|
+
args: [{ selector: 'pecb-pagination', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<nav\n [class]=\"containerClasses.join(' ')\"\n [attr.aria-label]=\"ariaLabel()\"\n role=\"navigation\"\n>\n <!-- V4: Centered variant - prev button on left -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Info section (V1, V2, V3, V4) -->\n <div class=\"pecb-pagination__info\" *ngIf=\"showItemsInfo()\">\n <span class=\"pecb-pagination__items-text\">\n {{ itemsInfoText }}\n </span>\n </div>\n\n <!-- Page size dropdown (V1 only) -->\n <div *ngIf=\"showPageSize\" class=\"pecb-pagination__page-size\">\n <span class=\"pecb-pagination__page-size-label\">Items per page:</span>\n <div class=\"pecb-pagination__dropdown\">\n <button\n type=\"button\"\n class=\"pecb-pagination__dropdown-trigger\"\n [class.pecb-pagination__dropdown-trigger--open]=\"isDropdownOpen()\"\n [disabled]=\"disabled()\"\n [attr.aria-expanded]=\"isDropdownOpen()\"\n aria-haspopup=\"listbox\"\n (click)=\"toggleDropdown()\"\n >\n <span>{{ pageSize() }}</span>\n <svg\n class=\"pecb-pagination__dropdown-icon\"\n [class.pecb-pagination__dropdown-icon--open]=\"isDropdownOpen()\"\n width=\"10\"\n height=\"10\"\n viewBox=\"0 0 10 10\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M1.5 3.5L5 7L8.5 3.5Z\"\n fill=\"currentColor\"\n />\n </svg>\n </button>\n <ul\n *ngIf=\"isDropdownOpen()\"\n class=\"pecb-pagination__dropdown-menu\"\n role=\"listbox\"\n [attr.aria-label]=\"'Select items per page'\"\n >\n <li\n *ngFor=\"let option of pageSizeOptions()\"\n class=\"pecb-pagination__dropdown-item\"\n [class.pecb-pagination__dropdown-item--selected]=\"option === pageSize()\"\n role=\"option\"\n [attr.aria-selected]=\"option === pageSize()\"\n (click)=\"onPageSizeChange(option)\"\n >\n {{ option }}\n </li>\n </ul>\n </div>\n </div>\n\n <!-- Controls section -->\n <div class=\"pecb-pagination__controls\">\n <!-- Previous button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--prev\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoPrevious\"\n [attr.aria-label]=\"'Go to previous page'\"\n (click)=\"goToPrevious()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M10 12L6 8L10 4\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n\n <!-- Page numbers (V1, V2) -->\n <div *ngIf=\"showPages\" class=\"pecb-pagination__pages\" role=\"group\" aria-label=\"Page navigation\">\n <ng-container *ngFor=\"let page of visiblePages(); trackBy: trackByPage\">\n <button\n *ngIf=\"isNumber(page)\"\n type=\"button\"\n class=\"pecb-pagination__page-button\"\n [class.pecb-pagination__page-button--active]=\"page === currentPage()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"'Page ' + page\"\n [attr.aria-current]=\"page === currentPage() ? 'page' : null\"\n (click)=\"goToPage(+page)\"\n >\n {{ page }}\n </button>\n <span\n *ngIf=\"!isNumber(page)\"\n class=\"pecb-pagination__ellipsis\"\n aria-hidden=\"true\"\n >\n {{ page }}\n </span>\n </ng-container>\n </div>\n\n <!-- Next button (V1, V2, V3) -->\n <button\n *ngIf=\"variant() !== 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next\"\n [class.pecb-pagination__nav-button--bordered]=\"variant() === 'minimal'\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n </div>\n\n <!-- V4: Centered variant - next button on right -->\n <button\n *ngIf=\"variant() === 'centered'\"\n type=\"button\"\n class=\"pecb-pagination__nav-button pecb-pagination__nav-button--next pecb-pagination__nav-button--bordered\"\n [disabled]=\"!canGoNext\"\n [attr.aria-label]=\"'Go to next page'\"\n (click)=\"goToNext()\"\n >\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 4L10 8L6 12\"\n stroke=\"currentColor\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </button>\n</nav>\n", styles: [".pecb-pagination{display:flex;align-items:center;justify-content:space-between;gap:24px;font-family:inherit;width:100%}.pecb-pagination--sm .pecb-pagination__items-text,.pecb-pagination--sm .pecb-pagination__page-size-label{font-size:12px}.pecb-pagination--sm .pecb-pagination__dropdown-trigger{height:28px;padding:0 8px;font-size:12px}.pecb-pagination--sm .pecb-pagination__nav-button,.pecb-pagination--sm .pecb-pagination__page-button{width:28px;height:28px;font-size:12px}.pecb-pagination--sm .pecb-pagination__ellipsis{width:28px;height:28px}.pecb-pagination--md .pecb-pagination__items-text,.pecb-pagination--md .pecb-pagination__page-size-label{font-size:14px}.pecb-pagination--md .pecb-pagination__dropdown-trigger{height:32px;padding:0 12px;font-size:14px}.pecb-pagination--md .pecb-pagination__nav-button,.pecb-pagination--md .pecb-pagination__page-button{width:32px;height:32px;font-size:14px}.pecb-pagination--md .pecb-pagination__ellipsis{width:32px;height:32px}.pecb-pagination--lg .pecb-pagination__items-text,.pecb-pagination--lg .pecb-pagination__page-size-label{font-size:16px}.pecb-pagination--lg .pecb-pagination__dropdown-trigger{height:40px;padding:0 16px;font-size:16px}.pecb-pagination--lg .pecb-pagination__nav-button,.pecb-pagination--lg .pecb-pagination__page-button{width:40px;height:40px;font-size:16px}.pecb-pagination--lg .pecb-pagination__ellipsis{width:40px;height:40px}.pecb-pagination--full{justify-content:space-between}.pecb-pagination--full .pecb-pagination__info{flex:1}.pecb-pagination--full .pecb-pagination__page-size{flex:0 0 auto}.pecb-pagination--full .pecb-pagination__controls{flex:1;justify-content:flex-end}.pecb-pagination--compact{justify-content:space-between}.pecb-pagination--compact .pecb-pagination__info{gap:0}.pecb-pagination--minimal{justify-content:space-between}.pecb-pagination--minimal .pecb-pagination__controls{gap:8px}.pecb-pagination--centered{justify-content:space-between}.pecb-pagination--centered .pecb-pagination__info{flex:1;justify-content:center}.pecb-pagination--centered .pecb-pagination__controls{display:none}.pecb-pagination--disabled{opacity:.5;pointer-events:none}.pecb-pagination__info{display:flex;align-items:center;gap:24px}.pecb-pagination__items-text{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__page-size{display:flex;align-items:center;gap:8px}.pecb-pagination__page-size-label{color:#919191;font-weight:400;white-space:nowrap}.pecb-pagination__dropdown{position:relative}.pecb-pagination__dropdown-trigger{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:64px;background-color:#fff;border:1px solid #ececec;border-radius:6px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.pecb-pagination__dropdown-trigger:hover:not(:disabled){border-color:#919191}.pecb-pagination__dropdown-trigger:focus{outline:none;border-color:#212427;box-shadow:0 0 0 2px #2124271a}.pecb-pagination__dropdown-trigger:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__dropdown-trigger--open{border-color:#212427}.pecb-pagination__dropdown-icon{color:#616161;transition:transform .15s ease-in-out;flex-shrink:0}.pecb-pagination__dropdown-icon--open{transform:rotate(180deg)}.pecb-pagination__dropdown-menu{position:absolute;top:calc(100% + 4px);left:0;z-index:1000;min-width:100%;margin:0;padding:8px 0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:6px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.pecb-pagination__dropdown-item{padding:8px 12px;color:#919191;font-size:14px;font-weight:400;cursor:pointer;text-align:center;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__dropdown-item:hover{color:#a11e29}.pecb-pagination__dropdown-item--selected{background-color:#ececec;color:#212427;font-weight:500;margin:0 6px;border-radius:6px}.pecb-pagination__controls{display:flex;align-items:center;gap:6px}.pecb-pagination__nav-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out,border-color .15s ease-in-out}.pecb-pagination__nav-button:hover:not(:disabled){background-color:#ececec;color:#313131}.pecb-pagination__nav-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__nav-button:disabled{color:#c2c2c2;cursor:not-allowed}.pecb-pagination__nav-button svg{width:16px;height:16px}.pecb-pagination__nav-button--bordered{background-color:#fff;border:1px solid #ececec;border-radius:8px}.pecb-pagination__nav-button--bordered:hover:not(:disabled){background-color:#fff;border-color:#c2c2c2;color:#212427}.pecb-pagination__nav-button--bordered:hover:not(:disabled) svg path{stroke:#212427}.pecb-pagination__nav-button--bordered:disabled{background-color:#fafafa;border-color:#ececec}.pecb-pagination__pages{display:flex;align-items:center;gap:6px}.pecb-pagination__page-button{display:flex;align-items:center;justify-content:center;background-color:transparent;border:none;border-radius:8px;color:#919191;font-family:inherit;font-weight:400;cursor:pointer;transition:background-color .15s ease-in-out,color .15s ease-in-out}.pecb-pagination__page-button:hover:not(:disabled):not(.pecb-pagination__page-button--active){background-color:#ececec;color:#a11e29}.pecb-pagination__page-button:focus{outline:none;box-shadow:0 0 0 2px #21242733}.pecb-pagination__page-button:disabled{cursor:not-allowed;opacity:.5}.pecb-pagination__page-button--active{background-color:transparent;color:#a11e29;font-weight:500}.pecb-pagination__page-button--active:hover{background-color:transparent}.pecb-pagination__ellipsis{display:flex;align-items:center;justify-content:center;color:#919191;font-size:14px}\n"] }]
|
|
677
677
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }], propDecorators: { totalItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "totalItems", required: false }] }], pageSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSize", required: false }] }, { type: i0.Output, args: ["pageSizeChange"] }], currentPage: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentPage", required: false }] }, { type: i0.Output, args: ["currentPageChange"] }], pageSizeOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "pageSizeOptions", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }], showPageSizeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPageSizeSelector", required: false }] }], showItemsInfo: [{ type: i0.Input, args: [{ isSignal: true, alias: "showItemsInfo", required: false }] }], maxVisiblePages: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxVisiblePages", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "aria-label", required: false }] }], pageChange: [{ type: i0.Output, args: ["pageChange"] }], pageSizeChange: [{ type: i0.Output, args: ["pageSizeChange"] }], onDocumentClick: [{
|
|
678
678
|
type: HostListener,
|
|
679
679
|
args: ['document:click', ['$event']]
|
|
@@ -1686,6 +1686,18 @@ class ToggleComponent {
|
|
|
1686
1686
|
this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
|
|
1687
1687
|
this.description = input(...(ngDevMode ? [undefined, { debugName: "description" }] : []));
|
|
1688
1688
|
this.labelPosition = input('right', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
|
|
1689
|
+
/** Track background color when checked. Falls back to the default theme color when unset. */
|
|
1690
|
+
this.onColor = input(...(ngDevMode ? [undefined, { debugName: "onColor" }] : []));
|
|
1691
|
+
/** Track background color when unchecked. Falls back to the default theme color when unset. */
|
|
1692
|
+
this.offColor = input(...(ngDevMode ? [undefined, { debugName: "offColor" }] : []));
|
|
1693
|
+
/** Thumb (slider) color. Falls back to the default theme color when unset. */
|
|
1694
|
+
this.thumbColor = input(...(ngDevMode ? [undefined, { debugName: "thumbColor" }] : []));
|
|
1695
|
+
/** Show a check icon when on and an X icon when off, on the side opposite the thumb. */
|
|
1696
|
+
this.showStatusIcons = input(false, ...(ngDevMode ? [{ debugName: "showStatusIcons" }] : []));
|
|
1697
|
+
/** Optional size override. Leave unset for the default size. */
|
|
1698
|
+
this.size = input(...(ngDevMode ? [undefined, { debugName: "size" }] : []));
|
|
1699
|
+
/** Drop shadow on the track. */
|
|
1700
|
+
this.shadow = input(false, ...(ngDevMode ? [{ debugName: "shadow" }] : []));
|
|
1689
1701
|
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
1690
1702
|
this.toggleChange = output();
|
|
1691
1703
|
this.checked = signal(false, ...(ngDevMode ? [{ debugName: "checked" }] : []));
|
|
@@ -1697,7 +1709,10 @@ class ToggleComponent {
|
|
|
1697
1709
|
'pecb-toggle',
|
|
1698
1710
|
this.disabled() ? 'pecb-toggle--disabled' : '',
|
|
1699
1711
|
this.checked() ? 'pecb-toggle--checked' : '',
|
|
1700
|
-
this.labelPosition() === 'left' ? 'pecb-toggle--label-left' : ''
|
|
1712
|
+
this.labelPosition() === 'left' ? 'pecb-toggle--label-left' : '',
|
|
1713
|
+
this.showStatusIcons() ? 'pecb-toggle--with-icons' : '',
|
|
1714
|
+
this.shadow() ? 'pecb-toggle--shadow' : '',
|
|
1715
|
+
this.size() ? `pecb-toggle--${this.size()}` : ''
|
|
1701
1716
|
].filter(Boolean);
|
|
1702
1717
|
}
|
|
1703
1718
|
onToggleChange(event) {
|
|
@@ -1724,13 +1739,13 @@ class ToggleComponent {
|
|
|
1724
1739
|
this.disabled.set(isDisabled);
|
|
1725
1740
|
}
|
|
1726
1741
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1727
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: ToggleComponent, isStandalone: true, selector: "pecb-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", toggleChange: "toggleChange" }, providers: [
|
|
1742
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: ToggleComponent, isStandalone: true, selector: "pecb-toggle", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, onColor: { classPropertyName: "onColor", publicName: "onColor", isSignal: true, isRequired: false, transformFunction: null }, offColor: { classPropertyName: "offColor", publicName: "offColor", isSignal: true, isRequired: false, transformFunction: null }, thumbColor: { classPropertyName: "thumbColor", publicName: "thumbColor", isSignal: true, isRequired: false, transformFunction: null }, showStatusIcons: { classPropertyName: "showStatusIcons", publicName: "showStatusIcons", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, shadow: { classPropertyName: "shadow", publicName: "shadow", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange", toggleChange: "toggleChange" }, providers: [
|
|
1728
1743
|
{
|
|
1729
1744
|
provide: NG_VALUE_ACCESSOR,
|
|
1730
1745
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1731
1746
|
multi: true
|
|
1732
1747
|
}
|
|
1733
|
-
], ngImport: i0, template: "<div
|
|
1748
|
+
], ngImport: i0, template: "<div\n [class]=\"wrapperClasses.join(' ')\"\n [style.--pecb-toggle-on-color]=\"onColor() || null\"\n [style.--pecb-toggle-off-color]=\"offColor() || null\"\n [style.--pecb-toggle-thumb-color]=\"thumbColor() || null\"\n>\n <label [attr.for]=\"id()\" class=\"pecb-toggle__label\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n role=\"switch\"\n class=\"pecb-toggle__input\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-describedby]=\"description() ? id() + '-description' : null\"\n [attr.aria-checked]=\"checked()\"\n (change)=\"onToggleChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span *ngIf=\"labelPosition() === 'left' && (label() || description())\" class=\"pecb-toggle__content\">\n <span *ngIf=\"label()\" class=\"pecb-toggle__text\">{{ label() }}</span>\n <span *ngIf=\"description()\" [id]=\"id() + '-description'\" class=\"pecb-toggle__description\">{{ description() }}</span>\n </span>\n <span class=\"pecb-toggle__control\">\n <span class=\"pecb-toggle__thumb\"></span>\n <svg class=\"pecb-toggle__icon pecb-toggle__icon--check\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2.5 6l2.5 2.5 4.5-5\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg class=\"pecb-toggle__icon pecb-toggle__icon--x\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"labelPosition() === 'right' && (label() || description())\" class=\"pecb-toggle__content\">\n <span *ngIf=\"label()\" class=\"pecb-toggle__text\">{{ label() }}</span>\n <span *ngIf=\"description()\" [id]=\"id() + '-description'\" class=\"pecb-toggle__description\">{{ description() }}</span>\n </span>\n </label>\n</div>\n", styles: [":host{display:inline-flex}.pecb-toggle{position:relative;display:inline-flex}.pecb-toggle__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.pecb-toggle__label:has(.pecb-toggle__text):has(.pecb-toggle__description){align-items:flex-start}.pecb-toggle__label:has(.pecb-toggle__text):has(.pecb-toggle__description) .pecb-toggle__control{margin-top:2px}.pecb-toggle__input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.pecb-toggle__control{position:relative;display:inline-flex;align-items:center;flex-shrink:0;width:44px;height:24px;margin-top:0;border-radius:12px;background-color:var(--pecb-toggle-off-color, #c2c2c2);transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-toggle__thumb{position:absolute;left:2px;width:20px;height:20px;border-radius:50%;background-color:var(--pecb-toggle-thumb-color, #ffffff);box-shadow:0 2px 4px #0003;transition-property:transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out;z-index:1}.pecb-toggle__icon{position:absolute;width:12px;height:12px;color:#fff;opacity:0;pointer-events:none;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-toggle__icon--check{left:6px}.pecb-toggle__icon--x{right:6px}.pecb-toggle--with-icons.pecb-toggle--checked .pecb-toggle__icon--check{opacity:1}.pecb-toggle--with-icons:not(.pecb-toggle--checked) .pecb-toggle__icon--x{opacity:1}.pecb-toggle--sm .pecb-toggle__control{width:40px;height:18px;border-radius:9px}.pecb-toggle--sm .pecb-toggle__thumb{width:12px;height:12px;left:3px}.pecb-toggle--sm.pecb-toggle--checked .pecb-toggle__thumb{transform:translate(22px)}.pecb-toggle--sm .pecb-toggle__icon{width:10px;height:10px}.pecb-toggle--sm .pecb-toggle__icon--check{left:7px}.pecb-toggle--sm .pecb-toggle__icon--x{right:7px}.pecb-toggle--shadow .pecb-toggle__control{box-shadow:0 4px 6px #00000026}.pecb-toggle__content{display:flex;flex-direction:column;gap:2px;flex:1}.pecb-toggle__text{font-family:inherit;font-size:16px;font-weight:500;color:#212427;line-height:1.5}.pecb-toggle__description{font-family:inherit;font-size:14px;font-weight:400;color:#616161;line-height:1.5}.pecb-toggle:not(.pecb-toggle--disabled) .pecb-toggle__label:hover .pecb-toggle__control{background-color:#919191}.pecb-toggle__input:focus-visible+.pecb-toggle__control{outline:2px solid #212427;outline-offset:2px}.pecb-toggle--checked .pecb-toggle__control{background-color:var(--pecb-toggle-on-color, #212427)}.pecb-toggle--checked .pecb-toggle__thumb{transform:translate(20px)}.pecb-toggle--checked:not(.pecb-toggle--disabled) .pecb-toggle__label:hover .pecb-toggle__control{background-color:var(--pecb-toggle-on-color, rgb(51.7, 56.4, 61.1))}.pecb-toggle--disabled .pecb-toggle__label{cursor:not-allowed}.pecb-toggle--disabled .pecb-toggle__control{background-color:#f7f5f5}.pecb-toggle--disabled .pecb-toggle__thumb{background-color:#ececec;box-shadow:none}.pecb-toggle--disabled.pecb-toggle--checked .pecb-toggle__control{background-color:#c2c2c2}.pecb-toggle--disabled .pecb-toggle__text{color:#c2c2c2}.pecb-toggle--disabled .pecb-toggle__description{color:#ececec}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1734
1749
|
}
|
|
1735
1750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ToggleComponent, decorators: [{
|
|
1736
1751
|
type: Component,
|
|
@@ -1740,8 +1755,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1740
1755
|
useExisting: forwardRef(() => ToggleComponent),
|
|
1741
1756
|
multi: true
|
|
1742
1757
|
}
|
|
1743
|
-
], template: "<div
|
|
1744
|
-
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], toggleChange: [{ type: i0.Output, args: ["toggleChange"] }] } });
|
|
1758
|
+
], template: "<div\n [class]=\"wrapperClasses.join(' ')\"\n [style.--pecb-toggle-on-color]=\"onColor() || null\"\n [style.--pecb-toggle-off-color]=\"offColor() || null\"\n [style.--pecb-toggle-thumb-color]=\"thumbColor() || null\"\n>\n <label [attr.for]=\"id()\" class=\"pecb-toggle__label\">\n <input\n [id]=\"id()\"\n type=\"checkbox\"\n role=\"switch\"\n class=\"pecb-toggle__input\"\n [name]=\"name()\"\n [checked]=\"checked()\"\n [disabled]=\"disabled()\"\n [attr.aria-label]=\"label()\"\n [attr.aria-describedby]=\"description() ? id() + '-description' : null\"\n [attr.aria-checked]=\"checked()\"\n (change)=\"onToggleChange($event)\"\n (blur)=\"onBlur()\"\n />\n <span *ngIf=\"labelPosition() === 'left' && (label() || description())\" class=\"pecb-toggle__content\">\n <span *ngIf=\"label()\" class=\"pecb-toggle__text\">{{ label() }}</span>\n <span *ngIf=\"description()\" [id]=\"id() + '-description'\" class=\"pecb-toggle__description\">{{ description() }}</span>\n </span>\n <span class=\"pecb-toggle__control\">\n <span class=\"pecb-toggle__thumb\"></span>\n <svg class=\"pecb-toggle__icon pecb-toggle__icon--check\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M2.5 6l2.5 2.5 4.5-5\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <svg class=\"pecb-toggle__icon pecb-toggle__icon--x\" viewBox=\"0 0 12 12\" fill=\"none\" aria-hidden=\"true\">\n <path d=\"M3 3l6 6M9 3l-6 6\" stroke=\"currentColor\" stroke-width=\"2.25\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </span>\n <span *ngIf=\"labelPosition() === 'right' && (label() || description())\" class=\"pecb-toggle__content\">\n <span *ngIf=\"label()\" class=\"pecb-toggle__text\">{{ label() }}</span>\n <span *ngIf=\"description()\" [id]=\"id() + '-description'\" class=\"pecb-toggle__description\">{{ description() }}</span>\n </span>\n </label>\n</div>\n", styles: [":host{display:inline-flex}.pecb-toggle{position:relative;display:inline-flex}.pecb-toggle__label{display:flex;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;gap:12px}.pecb-toggle__label:has(.pecb-toggle__text):has(.pecb-toggle__description){align-items:flex-start}.pecb-toggle__label:has(.pecb-toggle__text):has(.pecb-toggle__description) .pecb-toggle__control{margin-top:2px}.pecb-toggle__input{position:absolute;opacity:0;width:0;height:0;margin:0;padding:0;pointer-events:none}.pecb-toggle__control{position:relative;display:inline-flex;align-items:center;flex-shrink:0;width:44px;height:24px;margin-top:0;border-radius:12px;background-color:var(--pecb-toggle-off-color, #c2c2c2);transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-toggle__thumb{position:absolute;left:2px;width:20px;height:20px;border-radius:50%;background-color:var(--pecb-toggle-thumb-color, #ffffff);box-shadow:0 2px 4px #0003;transition-property:transform;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out;z-index:1}.pecb-toggle__icon{position:absolute;width:12px;height:12px;color:#fff;opacity:0;pointer-events:none;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-toggle__icon--check{left:6px}.pecb-toggle__icon--x{right:6px}.pecb-toggle--with-icons.pecb-toggle--checked .pecb-toggle__icon--check{opacity:1}.pecb-toggle--with-icons:not(.pecb-toggle--checked) .pecb-toggle__icon--x{opacity:1}.pecb-toggle--sm .pecb-toggle__control{width:40px;height:18px;border-radius:9px}.pecb-toggle--sm .pecb-toggle__thumb{width:12px;height:12px;left:3px}.pecb-toggle--sm.pecb-toggle--checked .pecb-toggle__thumb{transform:translate(22px)}.pecb-toggle--sm .pecb-toggle__icon{width:10px;height:10px}.pecb-toggle--sm .pecb-toggle__icon--check{left:7px}.pecb-toggle--sm .pecb-toggle__icon--x{right:7px}.pecb-toggle--shadow .pecb-toggle__control{box-shadow:0 4px 6px #00000026}.pecb-toggle__content{display:flex;flex-direction:column;gap:2px;flex:1}.pecb-toggle__text{font-family:inherit;font-size:16px;font-weight:500;color:#212427;line-height:1.5}.pecb-toggle__description{font-family:inherit;font-size:14px;font-weight:400;color:#616161;line-height:1.5}.pecb-toggle:not(.pecb-toggle--disabled) .pecb-toggle__label:hover .pecb-toggle__control{background-color:#919191}.pecb-toggle__input:focus-visible+.pecb-toggle__control{outline:2px solid #212427;outline-offset:2px}.pecb-toggle--checked .pecb-toggle__control{background-color:var(--pecb-toggle-on-color, #212427)}.pecb-toggle--checked .pecb-toggle__thumb{transform:translate(20px)}.pecb-toggle--checked:not(.pecb-toggle--disabled) .pecb-toggle__label:hover .pecb-toggle__control{background-color:var(--pecb-toggle-on-color, rgb(51.7, 56.4, 61.1))}.pecb-toggle--disabled .pecb-toggle__label{cursor:not-allowed}.pecb-toggle--disabled .pecb-toggle__control{background-color:#f7f5f5}.pecb-toggle--disabled .pecb-toggle__thumb{background-color:#ececec;box-shadow:none}.pecb-toggle--disabled.pecb-toggle--checked .pecb-toggle__control{background-color:#c2c2c2}.pecb-toggle--disabled .pecb-toggle__text{color:#c2c2c2}.pecb-toggle--disabled .pecb-toggle__description{color:#ececec}\n"] }]
|
|
1759
|
+
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], onColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "onColor", required: false }] }], offColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "offColor", required: false }] }], thumbColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "thumbColor", required: false }] }], showStatusIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showStatusIcons", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], shadow: [{ type: i0.Input, args: [{ isSignal: true, alias: "shadow", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], toggleChange: [{ type: i0.Output, args: ["toggleChange"] }] } });
|
|
1745
1760
|
|
|
1746
1761
|
class DropdownComponent {
|
|
1747
1762
|
constructor() {
|
|
@@ -2459,6 +2474,10 @@ class AccordionSmallComponent {
|
|
|
2459
2474
|
this.showToggle = input(true, ...(ngDevMode ? [{ debugName: "showToggle" }] : []));
|
|
2460
2475
|
/** Two-way bindable toggle switch value. Supports [(toggleValue)]. */
|
|
2461
2476
|
this.toggleValue = model(false, ...(ngDevMode ? [{ debugName: "toggleValue" }] : []));
|
|
2477
|
+
/** Track color when the toggle is on. Defaults to the design green. */
|
|
2478
|
+
this.toggleOnColor = input('#57bc57', ...(ngDevMode ? [{ debugName: "toggleOnColor" }] : []));
|
|
2479
|
+
/** Track color when the toggle is off. Defaults to the design red. */
|
|
2480
|
+
this.toggleOffColor = input('#f4633a', ...(ngDevMode ? [{ debugName: "toggleOffColor" }] : []));
|
|
2462
2481
|
/** Show/hide the download icon */
|
|
2463
2482
|
this.showDownload = input(true, ...(ngDevMode ? [{ debugName: "showDownload" }] : []));
|
|
2464
2483
|
/** Show/hide the save icon */
|
|
@@ -2486,12 +2505,12 @@ class AccordionSmallComponent {
|
|
|
2486
2505
|
this.toggleValue.set(value);
|
|
2487
2506
|
}
|
|
2488
2507
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AccordionSmallComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2489
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AccordionSmallComponent, isStandalone: true, selector: "pecb-accordion-small", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, metaLabel: { classPropertyName: "metaLabel", publicName: "metaLabel", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, toggleValue: { classPropertyName: "toggleValue", publicName: "toggleValue", isSignal: true, isRequired: false, transformFunction: null }, showDownload: { classPropertyName: "showDownload", publicName: "showDownload", isSignal: true, isRequired: false, transformFunction: null }, showSave: { classPropertyName: "showSave", publicName: "showSave", isSignal: true, isRequired: false, transformFunction: null }, showEdit: { classPropertyName: "showEdit", publicName: "showEdit", isSignal: true, isRequired: false, transformFunction: null }, showDelete: { classPropertyName: "showDelete", publicName: "showDelete", isSignal: true, isRequired: false, transformFunction: null }, showMove: { classPropertyName: "showMove", publicName: "showMove", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange", toggleValue: "toggleValueChange", downloadClicked: "downloadClicked", saveClicked: "saveClicked", editClicked: "editClicked", deleteClicked: "deleteClicked", moveClicked: "moveClicked" }, ngImport: i0, template: "<div\n class=\"pecb-accordion-small\"\n [class.pecb-accordion-small--active]=\"isActive()\"\n>\n <!-- Header row -->\n <div class=\"pecb-accordion-small__header\">\n <div class=\"pecb-accordion-small__main\" (click)=\"onHeaderClick()\" role=\"button\" [attr.aria-expanded]=\"isActive()\" tabindex=\"0\" (keydown.enter)=\"onHeaderClick()\" (keydown.space)=\"onHeaderClick()\">\n <ng-content select=\"[pecbLeading]\"></ng-content>\n <span class=\"pecb-accordion-small__label\">{{ label() }}</span>\n </div>\n\n <div class=\"pecb-accordion-small__actions\">\n @if (parentId()) {\n <span class=\"pecb-accordion-small__parent-id\">{{ metaLabel() }}: {{ parentId() }}</span>\n }\n\n @if (showToggle()) {\n <pecb-toggle [(ngModel)]=\"toggleChecked\"></pecb-toggle>\n }\n\n @if (showDownload()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Download\"\n (click)=\"downloadClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 10 12 15 17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showSave()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Save\"\n (click)=\"saveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"17 21 17 13 7 13 7 21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 3 7 8 15 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showEdit()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Edit\"\n (click)=\"editClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showDelete()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn pecb-accordion-small__action-btn--danger\"\n aria-label=\"Delete\"\n (click)=\"deleteClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showMove()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Move\"\n (click)=\"moveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n\n <!-- Body panel \u2014 animated via CSS grid -->\n <div class=\"pecb-accordion-small__body-wrap\" [attr.aria-hidden]=\"!isActive()\">\n <div class=\"pecb-accordion-small__body\">\n <div class=\"pecb-accordion-small__body-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".pecb-accordion-item{width:100%;border-radius:12px}.pecb-accordion-item--actions{transition:border-radius 0s .3s}.pecb-accordion-item--actions.pecb-accordion-item--open{border-radius:12px 12px 0 0;transition:border-radius 0s}.pecb-accordion-item__header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:inherit;background-color:#ececec;cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__header{background-color:#212427}.pecb-accordion-item__number{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid #ececec;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;box-shadow:0 1px 4px #0c0c0d0d;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__number{background-color:#fff;color:#212427}.pecb-accordion-item__content{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center}.pecb-accordion-item__badge{display:inline-flex;align-items:center;gap:3px;padding:3px 5px;border-radius:5px;border:1px solid #5eacff;background-color:#e6f0fa;color:#5eacff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;flex-shrink:0}.pecb-accordion-item__badge svg{flex-shrink:0}.pecb-accordion-item__badge--multiple-choice{border-color:#5eacff;background-color:#e6f0fa;color:#5eacff}.pecb-accordion-item__badge--true-false{border-color:#57bc57;background-color:#e6f4ea;color:green}.pecb-accordion-item__badge--essay{border-color:#a98cff;background-color:#eee8ff;color:#8e6df0}.pecb-accordion-item__badge--scenario{border-color:#ff9c4a;background-color:#fff4e5;color:#fd7e14}.pecb-accordion-item__label{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:400;line-height:normal;color:#919191;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__label{color:#c2c2c2}.pecb-accordion-item__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__title{color:#fff}.pecb-accordion-item__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.pecb-accordion-item__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background-color:#fff;color:#212427;cursor:pointer;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item__action-btn:focus{outline:none}.pecb-accordion-item__action-btn:hover{background-color:#ececec}.pecb-accordion-item__action-btn:active{background-color:#c2c2c2}.pecb-accordion-item__action-btn--danger{color:#dc3545}.pecb-accordion-item__action-btn svg{flex-shrink:0}.pecb-accordion-item__chevron{transition:transform .25s ease-in-out}.pecb-accordion-item__chevron--up{transform:rotate(180deg)}.pecb-accordion-item__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-item--open .pecb-accordion-item__body-wrap{grid-template-rows:1fr}.pecb-accordion-item__body{overflow:hidden;min-height:0}.pecb-accordion-item__body-inner{background-color:#fff;border-radius:0 0 12px 12px;padding:24px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}.pecb-accordion-item--actions .pecb-accordion-item__body-inner{background-color:#fafafa;border:1px solid #ececec;border-top:none}.pecb-accordion-small{width:100%;border-radius:6px;overflow:hidden}.pecb-accordion-small__header{display:flex;align-items:center;gap:16px;padding:12px;border-radius:inherit;background-color:#ececec;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__header:hover{background-color:#f7f5f5}.pecb-accordion-small--active .pecb-accordion-small__header{background-color:#212427}.pecb-accordion-small--active .pecb-accordion-small__header:hover{background-color:#616161}.pecb-accordion-small__main{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.pecb-accordion-small__label{flex:1 0 0;min-width:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small--active .pecb-accordion-small__label{color:#fff}.pecb-accordion-small__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.pecb-accordion-small__parent-id{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#919191;white-space:nowrap;flex-shrink:0}.pecb-accordion-small__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#212427;cursor:pointer;flex-shrink:0;transition-property:color,opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__action-btn:focus{outline:none}.pecb-accordion-small__action-btn:hover{opacity:.7}.pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small--active .pecb-accordion-small__action-btn{color:#fff}.pecb-accordion-small--active .pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small__action-btn svg{flex-shrink:0}.pecb-accordion-small__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-small--active .pecb-accordion-small__body-wrap{grid-template-rows:1fr}.pecb-accordion-small__body{overflow:hidden;min-height:0}.pecb-accordion-small__body-inner{background-color:#fff;padding:16px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "pecb-toggle", inputs: ["id", "name", "label", "description", "labelPosition", "disabled"], outputs: ["disabledChange", "toggleChange"] }, { kind: "ngmodule", type: FormsModule }, { 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 }); }
|
|
2508
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AccordionSmallComponent, isStandalone: true, selector: "pecb-accordion-small", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, parentId: { classPropertyName: "parentId", publicName: "parentId", isSignal: true, isRequired: false, transformFunction: null }, metaLabel: { classPropertyName: "metaLabel", publicName: "metaLabel", isSignal: true, isRequired: false, transformFunction: null }, isActive: { classPropertyName: "isActive", publicName: "isActive", isSignal: true, isRequired: false, transformFunction: null }, showToggle: { classPropertyName: "showToggle", publicName: "showToggle", isSignal: true, isRequired: false, transformFunction: null }, toggleValue: { classPropertyName: "toggleValue", publicName: "toggleValue", isSignal: true, isRequired: false, transformFunction: null }, toggleOnColor: { classPropertyName: "toggleOnColor", publicName: "toggleOnColor", isSignal: true, isRequired: false, transformFunction: null }, toggleOffColor: { classPropertyName: "toggleOffColor", publicName: "toggleOffColor", isSignal: true, isRequired: false, transformFunction: null }, showDownload: { classPropertyName: "showDownload", publicName: "showDownload", isSignal: true, isRequired: false, transformFunction: null }, showSave: { classPropertyName: "showSave", publicName: "showSave", isSignal: true, isRequired: false, transformFunction: null }, showEdit: { classPropertyName: "showEdit", publicName: "showEdit", isSignal: true, isRequired: false, transformFunction: null }, showDelete: { classPropertyName: "showDelete", publicName: "showDelete", isSignal: true, isRequired: false, transformFunction: null }, showMove: { classPropertyName: "showMove", publicName: "showMove", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { isActive: "isActiveChange", toggleValue: "toggleValueChange", downloadClicked: "downloadClicked", saveClicked: "saveClicked", editClicked: "editClicked", deleteClicked: "deleteClicked", moveClicked: "moveClicked" }, ngImport: i0, template: "<div\n class=\"pecb-accordion-small\"\n [class.pecb-accordion-small--active]=\"isActive()\"\n>\n <!-- Header row -->\n <div class=\"pecb-accordion-small__header\">\n <div class=\"pecb-accordion-small__main\" (click)=\"onHeaderClick()\" role=\"button\" [attr.aria-expanded]=\"isActive()\" tabindex=\"0\" (keydown.enter)=\"onHeaderClick()\" (keydown.space)=\"onHeaderClick()\">\n <ng-content select=\"[pecbLeading]\"></ng-content>\n <span class=\"pecb-accordion-small__label\">{{ label() }}</span>\n </div>\n\n <div class=\"pecb-accordion-small__actions\">\n @if (parentId()) {\n <span class=\"pecb-accordion-small__parent-id\">{{ metaLabel() }}: {{ parentId() }}</span>\n }\n\n @if (showToggle()) {\n <pecb-toggle\n size=\"sm\"\n [(ngModel)]=\"toggleChecked\"\n [onColor]=\"toggleOnColor()\"\n [offColor]=\"toggleOffColor()\"\n [showStatusIcons]=\"true\"\n ></pecb-toggle>\n }\n\n @if (showDownload()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Download\"\n (click)=\"downloadClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 10 12 15 17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showSave()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Save\"\n (click)=\"saveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"17 21 17 13 7 13 7 21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 3 7 8 15 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showEdit()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Edit\"\n (click)=\"editClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showDelete()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn pecb-accordion-small__action-btn--danger\"\n aria-label=\"Delete\"\n (click)=\"deleteClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showMove()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Move\"\n (click)=\"moveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n\n <!-- Body panel \u2014 animated via CSS grid -->\n <div class=\"pecb-accordion-small__body-wrap\" [attr.aria-hidden]=\"!isActive()\">\n <div class=\"pecb-accordion-small__body\">\n <div class=\"pecb-accordion-small__body-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".pecb-accordion-item{width:100%;border-radius:12px}.pecb-accordion-item--actions{transition:border-radius 0s .3s}.pecb-accordion-item--actions.pecb-accordion-item--open{border-radius:12px 12px 0 0;transition:border-radius 0s}.pecb-accordion-item__header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:inherit;background-color:#ececec;cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__header{background-color:#212427}.pecb-accordion-item__number{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid #ececec;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;box-shadow:0 1px 4px #0c0c0d0d;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__number{background-color:#fff;color:#212427}.pecb-accordion-item__content{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center}.pecb-accordion-item__badge{display:inline-flex;align-items:center;gap:3px;padding:3px 5px;border-radius:5px;border:1px solid #5eacff;background-color:#e6f0fa;color:#5eacff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;flex-shrink:0}.pecb-accordion-item__badge svg{flex-shrink:0}.pecb-accordion-item__badge--multiple-choice{border-color:#5eacff;background-color:#e6f0fa;color:#5eacff}.pecb-accordion-item__badge--true-false{border-color:#57bc57;background-color:#e6f4ea;color:green}.pecb-accordion-item__badge--essay{border-color:#a98cff;background-color:#eee8ff;color:#8e6df0}.pecb-accordion-item__badge--scenario{border-color:#ff9c4a;background-color:#fff4e5;color:#fd7e14}.pecb-accordion-item__label{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:400;line-height:normal;color:#919191;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__label{color:#c2c2c2}.pecb-accordion-item__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__title{color:#fff}.pecb-accordion-item__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.pecb-accordion-item__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background-color:#fff;color:#212427;cursor:pointer;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item__action-btn:focus{outline:none}.pecb-accordion-item__action-btn:hover{background-color:#ececec}.pecb-accordion-item__action-btn:active{background-color:#c2c2c2}.pecb-accordion-item__action-btn--danger{color:#dc3545}.pecb-accordion-item__action-btn svg{flex-shrink:0}.pecb-accordion-item__chevron{transition:transform .25s ease-in-out}.pecb-accordion-item__chevron--up{transform:rotate(180deg)}.pecb-accordion-item__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-item--open .pecb-accordion-item__body-wrap{grid-template-rows:1fr}.pecb-accordion-item__body{overflow:hidden;min-height:0}.pecb-accordion-item__body-inner{background-color:#fff;border-radius:0 0 12px 12px;padding:24px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}.pecb-accordion-item--actions .pecb-accordion-item__body-inner{background-color:#fafafa;border:1px solid #ececec;border-top:none}.pecb-accordion-small{width:100%;border-radius:6px;overflow:hidden}.pecb-accordion-small__header{display:flex;align-items:center;gap:16px;padding:12px;border-radius:inherit;background-color:#ececec;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__header:hover{background-color:#f7f5f5}.pecb-accordion-small--active .pecb-accordion-small__header{background-color:#212427}.pecb-accordion-small--active .pecb-accordion-small__header:hover{background-color:#616161}.pecb-accordion-small__main{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.pecb-accordion-small__label{flex:1 0 0;min-width:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small--active .pecb-accordion-small__label{color:#fff}.pecb-accordion-small__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.pecb-accordion-small__parent-id{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#919191;white-space:nowrap;flex-shrink:0}.pecb-accordion-small__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#212427;cursor:pointer;flex-shrink:0;transition-property:color,opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__action-btn:focus{outline:none}.pecb-accordion-small__action-btn:hover{opacity:.7}.pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small--active .pecb-accordion-small__action-btn{color:#fff}.pecb-accordion-small--active .pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small__action-btn svg{flex-shrink:0}.pecb-accordion-small__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-small--active .pecb-accordion-small__body-wrap{grid-template-rows:1fr}.pecb-accordion-small__body{overflow:hidden;min-height:0}.pecb-accordion-small__body-inner{background-color:#fff;padding:16px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}\n"], dependencies: [{ kind: "component", type: ToggleComponent, selector: "pecb-toggle", inputs: ["id", "name", "label", "description", "labelPosition", "onColor", "offColor", "thumbColor", "showStatusIcons", "size", "shadow", "disabled"], outputs: ["disabledChange", "toggleChange"] }, { kind: "ngmodule", type: FormsModule }, { 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 }); }
|
|
2490
2509
|
}
|
|
2491
2510
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AccordionSmallComponent, decorators: [{
|
|
2492
2511
|
type: Component,
|
|
2493
|
-
args: [{ selector: 'pecb-accordion-small', imports: [ToggleComponent, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"pecb-accordion-small\"\n [class.pecb-accordion-small--active]=\"isActive()\"\n>\n <!-- Header row -->\n <div class=\"pecb-accordion-small__header\">\n <div class=\"pecb-accordion-small__main\" (click)=\"onHeaderClick()\" role=\"button\" [attr.aria-expanded]=\"isActive()\" tabindex=\"0\" (keydown.enter)=\"onHeaderClick()\" (keydown.space)=\"onHeaderClick()\">\n <ng-content select=\"[pecbLeading]\"></ng-content>\n <span class=\"pecb-accordion-small__label\">{{ label() }}</span>\n </div>\n\n <div class=\"pecb-accordion-small__actions\">\n @if (parentId()) {\n <span class=\"pecb-accordion-small__parent-id\">{{ metaLabel() }}: {{ parentId() }}</span>\n }\n\n @if (showToggle()) {\n <pecb-toggle [(ngModel)]=\"toggleChecked\"></pecb-toggle>\n }\n\n @if (showDownload()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Download\"\n (click)=\"downloadClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 10 12 15 17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showSave()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Save\"\n (click)=\"saveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"17 21 17 13 7 13 7 21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 3 7 8 15 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showEdit()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Edit\"\n (click)=\"editClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showDelete()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn pecb-accordion-small__action-btn--danger\"\n aria-label=\"Delete\"\n (click)=\"deleteClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showMove()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Move\"\n (click)=\"moveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n\n <!-- Body panel \u2014 animated via CSS grid -->\n <div class=\"pecb-accordion-small__body-wrap\" [attr.aria-hidden]=\"!isActive()\">\n <div class=\"pecb-accordion-small__body\">\n <div class=\"pecb-accordion-small__body-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".pecb-accordion-item{width:100%;border-radius:12px}.pecb-accordion-item--actions{transition:border-radius 0s .3s}.pecb-accordion-item--actions.pecb-accordion-item--open{border-radius:12px 12px 0 0;transition:border-radius 0s}.pecb-accordion-item__header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:inherit;background-color:#ececec;cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__header{background-color:#212427}.pecb-accordion-item__number{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid #ececec;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;box-shadow:0 1px 4px #0c0c0d0d;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__number{background-color:#fff;color:#212427}.pecb-accordion-item__content{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center}.pecb-accordion-item__badge{display:inline-flex;align-items:center;gap:3px;padding:3px 5px;border-radius:5px;border:1px solid #5eacff;background-color:#e6f0fa;color:#5eacff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;flex-shrink:0}.pecb-accordion-item__badge svg{flex-shrink:0}.pecb-accordion-item__badge--multiple-choice{border-color:#5eacff;background-color:#e6f0fa;color:#5eacff}.pecb-accordion-item__badge--true-false{border-color:#57bc57;background-color:#e6f4ea;color:green}.pecb-accordion-item__badge--essay{border-color:#a98cff;background-color:#eee8ff;color:#8e6df0}.pecb-accordion-item__badge--scenario{border-color:#ff9c4a;background-color:#fff4e5;color:#fd7e14}.pecb-accordion-item__label{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:400;line-height:normal;color:#919191;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__label{color:#c2c2c2}.pecb-accordion-item__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__title{color:#fff}.pecb-accordion-item__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.pecb-accordion-item__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background-color:#fff;color:#212427;cursor:pointer;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item__action-btn:focus{outline:none}.pecb-accordion-item__action-btn:hover{background-color:#ececec}.pecb-accordion-item__action-btn:active{background-color:#c2c2c2}.pecb-accordion-item__action-btn--danger{color:#dc3545}.pecb-accordion-item__action-btn svg{flex-shrink:0}.pecb-accordion-item__chevron{transition:transform .25s ease-in-out}.pecb-accordion-item__chevron--up{transform:rotate(180deg)}.pecb-accordion-item__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-item--open .pecb-accordion-item__body-wrap{grid-template-rows:1fr}.pecb-accordion-item__body{overflow:hidden;min-height:0}.pecb-accordion-item__body-inner{background-color:#fff;border-radius:0 0 12px 12px;padding:24px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}.pecb-accordion-item--actions .pecb-accordion-item__body-inner{background-color:#fafafa;border:1px solid #ececec;border-top:none}.pecb-accordion-small{width:100%;border-radius:6px;overflow:hidden}.pecb-accordion-small__header{display:flex;align-items:center;gap:16px;padding:12px;border-radius:inherit;background-color:#ececec;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__header:hover{background-color:#f7f5f5}.pecb-accordion-small--active .pecb-accordion-small__header{background-color:#212427}.pecb-accordion-small--active .pecb-accordion-small__header:hover{background-color:#616161}.pecb-accordion-small__main{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.pecb-accordion-small__label{flex:1 0 0;min-width:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small--active .pecb-accordion-small__label{color:#fff}.pecb-accordion-small__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.pecb-accordion-small__parent-id{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#919191;white-space:nowrap;flex-shrink:0}.pecb-accordion-small__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#212427;cursor:pointer;flex-shrink:0;transition-property:color,opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__action-btn:focus{outline:none}.pecb-accordion-small__action-btn:hover{opacity:.7}.pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small--active .pecb-accordion-small__action-btn{color:#fff}.pecb-accordion-small--active .pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small__action-btn svg{flex-shrink:0}.pecb-accordion-small__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-small--active .pecb-accordion-small__body-wrap{grid-template-rows:1fr}.pecb-accordion-small__body{overflow:hidden;min-height:0}.pecb-accordion-small__body-inner{background-color:#fff;padding:16px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}\n"] }]
|
|
2494
|
-
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], metaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaLabel", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], toggleValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleValue", required: false }] }, { type: i0.Output, args: ["toggleValueChange"] }], showDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownload", required: false }] }], showSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSave", required: false }] }], showEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdit", required: false }] }], showDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelete", required: false }] }], showMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMove", required: false }] }], downloadClicked: [{ type: i0.Output, args: ["downloadClicked"] }], saveClicked: [{ type: i0.Output, args: ["saveClicked"] }], editClicked: [{ type: i0.Output, args: ["editClicked"] }], deleteClicked: [{ type: i0.Output, args: ["deleteClicked"] }], moveClicked: [{ type: i0.Output, args: ["moveClicked"] }] } });
|
|
2512
|
+
args: [{ selector: 'pecb-accordion-small', imports: [ToggleComponent, FormsModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n class=\"pecb-accordion-small\"\n [class.pecb-accordion-small--active]=\"isActive()\"\n>\n <!-- Header row -->\n <div class=\"pecb-accordion-small__header\">\n <div class=\"pecb-accordion-small__main\" (click)=\"onHeaderClick()\" role=\"button\" [attr.aria-expanded]=\"isActive()\" tabindex=\"0\" (keydown.enter)=\"onHeaderClick()\" (keydown.space)=\"onHeaderClick()\">\n <ng-content select=\"[pecbLeading]\"></ng-content>\n <span class=\"pecb-accordion-small__label\">{{ label() }}</span>\n </div>\n\n <div class=\"pecb-accordion-small__actions\">\n @if (parentId()) {\n <span class=\"pecb-accordion-small__parent-id\">{{ metaLabel() }}: {{ parentId() }}</span>\n }\n\n @if (showToggle()) {\n <pecb-toggle\n size=\"sm\"\n [(ngModel)]=\"toggleChecked\"\n [onColor]=\"toggleOnColor()\"\n [offColor]=\"toggleOffColor()\"\n [showStatusIcons]=\"true\"\n ></pecb-toggle>\n }\n\n @if (showDownload()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Download\"\n (click)=\"downloadClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 10 12 15 17 10\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <line x1=\"12\" y1=\"15\" x2=\"12\" y2=\"3\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showSave()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Save\"\n (click)=\"saveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"17 21 17 13 7 13 7 21\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <polyline points=\"7 3 7 8 15 8\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showEdit()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Edit\"\n (click)=\"editClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M17 3a2.828 2.828 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showDelete()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn pecb-accordion-small__action-btn--danger\"\n aria-label=\"Delete\"\n (click)=\"deleteClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n\n @if (showMove()) {\n <button\n type=\"button\"\n class=\"pecb-accordion-small__action-btn\"\n aria-label=\"Move\"\n (click)=\"moveClicked.emit()\"\n >\n <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M3 12h18M3 6h18M3 18h18\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n\n <!-- Body panel \u2014 animated via CSS grid -->\n <div class=\"pecb-accordion-small__body-wrap\" [attr.aria-hidden]=\"!isActive()\">\n <div class=\"pecb-accordion-small__body\">\n <div class=\"pecb-accordion-small__body-inner\">\n <ng-content></ng-content>\n </div>\n </div>\n </div>\n</div>\n", styles: [".pecb-accordion-item{width:100%;border-radius:12px}.pecb-accordion-item--actions{transition:border-radius 0s .3s}.pecb-accordion-item--actions.pecb-accordion-item--open{border-radius:12px 12px 0 0;transition:border-radius 0s}.pecb-accordion-item__header{display:flex;align-items:center;gap:16px;padding:16px 20px;border-radius:inherit;background-color:#ececec;cursor:pointer;-webkit-user-select:none;user-select:none;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__header{background-color:#212427}.pecb-accordion-item__number{flex-shrink:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:8px;border:1px solid #ececec;background-color:#212427;color:#fff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;box-shadow:0 1px 4px #0c0c0d0d;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__number{background-color:#fff;color:#212427}.pecb-accordion-item__content{flex:1 0 0;min-width:0;display:flex;flex-direction:column;gap:6px;align-items:flex-start;justify-content:center}.pecb-accordion-item__badge{display:inline-flex;align-items:center;gap:3px;padding:3px 5px;border-radius:5px;border:1px solid #5eacff;background-color:#e6f0fa;color:#5eacff;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;flex-shrink:0}.pecb-accordion-item__badge svg{flex-shrink:0}.pecb-accordion-item__badge--multiple-choice{border-color:#5eacff;background-color:#e6f0fa;color:#5eacff}.pecb-accordion-item__badge--true-false{border-color:#57bc57;background-color:#e6f4ea;color:green}.pecb-accordion-item__badge--essay{border-color:#a98cff;background-color:#eee8ff;color:#8e6df0}.pecb-accordion-item__badge--scenario{border-color:#ff9c4a;background-color:#fff4e5;color:#fd7e14}.pecb-accordion-item__label{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:400;line-height:normal;color:#919191;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__label{color:#c2c2c2}.pecb-accordion-item__title{margin:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item--open .pecb-accordion-item__title{color:#fff}.pecb-accordion-item__actions{display:flex;align-items:center;gap:6px;flex-shrink:0}.pecb-accordion-item__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:6px;background-color:#fff;color:#212427;cursor:pointer;flex-shrink:0;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-item__action-btn:focus{outline:none}.pecb-accordion-item__action-btn:hover{background-color:#ececec}.pecb-accordion-item__action-btn:active{background-color:#c2c2c2}.pecb-accordion-item__action-btn--danger{color:#dc3545}.pecb-accordion-item__action-btn svg{flex-shrink:0}.pecb-accordion-item__chevron{transition:transform .25s ease-in-out}.pecb-accordion-item__chevron--up{transform:rotate(180deg)}.pecb-accordion-item__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-item--open .pecb-accordion-item__body-wrap{grid-template-rows:1fr}.pecb-accordion-item__body{overflow:hidden;min-height:0}.pecb-accordion-item__body-inner{background-color:#fff;border-radius:0 0 12px 12px;padding:24px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}.pecb-accordion-item--actions .pecb-accordion-item__body-inner{background-color:#fafafa;border:1px solid #ececec;border-top:none}.pecb-accordion-small{width:100%;border-radius:6px;overflow:hidden}.pecb-accordion-small__header{display:flex;align-items:center;gap:16px;padding:12px;border-radius:inherit;background-color:#ececec;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__header:hover{background-color:#f7f5f5}.pecb-accordion-small--active .pecb-accordion-small__header{background-color:#212427}.pecb-accordion-small--active .pecb-accordion-small__header:hover{background-color:#616161}.pecb-accordion-small__main{flex:1 0 0;min-width:0;display:flex;align-items:center;gap:8px;cursor:pointer;-webkit-user-select:none;user-select:none}.pecb-accordion-small__label{flex:1 0 0;min-width:0;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:normal;color:#212427;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small--active .pecb-accordion-small__label{color:#fff}.pecb-accordion-small__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.pecb-accordion-small__parent-id{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;color:#919191;white-space:nowrap;flex-shrink:0}.pecb-accordion-small__action-btn{padding:0;border:none;background:none;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:18px;height:18px;color:#212427;cursor:pointer;flex-shrink:0;transition-property:color,opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-accordion-small__action-btn:focus{outline:none}.pecb-accordion-small__action-btn:hover{opacity:.7}.pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small--active .pecb-accordion-small__action-btn{color:#fff}.pecb-accordion-small--active .pecb-accordion-small__action-btn--danger{color:#dc3545}.pecb-accordion-small__action-btn svg{flex-shrink:0}.pecb-accordion-small__body-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.4,0,.2,1)}.pecb-accordion-small--active .pecb-accordion-small__body-wrap{grid-template-rows:1fr}.pecb-accordion-small__body{overflow:hidden;min-height:0}.pecb-accordion-small__body-inner{background-color:#fff;padding:16px;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.6;color:#212427}\n"] }]
|
|
2513
|
+
}], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], parentId: [{ type: i0.Input, args: [{ isSignal: true, alias: "parentId", required: false }] }], metaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "metaLabel", required: false }] }], isActive: [{ type: i0.Input, args: [{ isSignal: true, alias: "isActive", required: false }] }, { type: i0.Output, args: ["isActiveChange"] }], showToggle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToggle", required: false }] }], toggleValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleValue", required: false }] }, { type: i0.Output, args: ["toggleValueChange"] }], toggleOnColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOnColor", required: false }] }], toggleOffColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "toggleOffColor", required: false }] }], showDownload: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDownload", required: false }] }], showSave: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSave", required: false }] }], showEdit: [{ type: i0.Input, args: [{ isSignal: true, alias: "showEdit", required: false }] }], showDelete: [{ type: i0.Input, args: [{ isSignal: true, alias: "showDelete", required: false }] }], showMove: [{ type: i0.Input, args: [{ isSignal: true, alias: "showMove", required: false }] }], downloadClicked: [{ type: i0.Output, args: ["downloadClicked"] }], saveClicked: [{ type: i0.Output, args: ["saveClicked"] }], editClicked: [{ type: i0.Output, args: ["editClicked"] }], deleteClicked: [{ type: i0.Output, args: ["deleteClicked"] }], moveClicked: [{ type: i0.Output, args: ["moveClicked"] }] } });
|
|
2495
2514
|
|
|
2496
2515
|
class ButtonGroupItemComponent {
|
|
2497
2516
|
constructor() {
|
|
@@ -4238,7 +4257,7 @@ class HeaderComponent {
|
|
|
4238
4257
|
<ng-content></ng-content>
|
|
4239
4258
|
</div>
|
|
4240
4259
|
</header>
|
|
4241
|
-
`, isInline: true, styles: [".pecb-header{display:block;width:100%}.pecb-header__container{display:flex;align-items:center;justify-content:space-between;position:relative;width:100%;min-height:72px;padding:16px 24px;gap:24px;background-color:#fff;border-bottom:1px solid #ececec;box-sizing:border-box}.pecb-header__left{display:flex;align-items:center;flex-shrink:0}.pecb-header__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;margin:0;line-height:1}.pecb-header__right{display:flex;align-items:center;gap:16px;flex-shrink:1;min-width:0}.pecb-header__search{display:flex;align-items:center;position:relative;min-width:200px;max-width:320px;height:40px;border:1px solid #ececec;border-radius:8px;background-color:#fff;padding:0 12px;gap:8px;transition-property:border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__search:focus-within{border-color:#c2c2c2}.pecb-header__search--with-category{padding-right:0}.pecb-header__search-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#919191}.pecb-header__search-icon svg{width:18px;height:18px;display:block}.pecb-header__search-icon svg path,.pecb-header__search-icon svg circle,.pecb-header__search-icon svg rect,.pecb-header__search-icon svg line,.pecb-header__search-icon svg polyline,.pecb-header__search-icon svg polygon{stroke:currentColor}.pecb-header__search-input{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#313131;background:transparent;border:none;outline:none;flex:1;min-width:0;height:100%}.pecb-header__search-input::placeholder{color:#919191}.pecb-header__search-category{position:relative;flex-shrink:0;height:100%;display:flex;align-items:center;border-left:1px solid #ececec}.pecb-header__search-category-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;display:flex;align-items:center;gap:6px;padding:0 12px;height:100%;color:#313131;white-space:nowrap}.pecb-header__search-category-btn:focus{outline:none}.pecb-header__search-category-btn:hover{color:#212427}.pecb-header__language{position:relative}.pecb-header__language-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;gap:6px;padding:8px;border-radius:6px;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__language-btn:focus{outline:none}.pecb-header__language-btn:hover{background-color:#f4f4f4}.pecb-header__language-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__language-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#616161}.pecb-header__language-icon svg{width:18px;height:18px;display:block}.pecb-header__language-icon svg path,.pecb-header__language-icon svg circle,.pecb-header__language-icon svg rect,.pecb-header__language-icon svg line,.pecb-header__language-icon svg polyline,.pecb-header__language-icon svg polygon{stroke:currentColor}.pecb-header__language-label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;color:#313131;white-space:nowrap}.pecb-header__chevron{width:14px;height:14px;flex-shrink:0;color:#919191}.pecb-header__chevron-updown{width:14px;height:14px;flex-shrink:0;color:#313131}.pecb-header__dropdown-panel{position:absolute;top:calc(100% + 4px);right:0;min-width:120px;padding:6px 0;margin:0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 4px 8px -2px #0000000f,0 2px 4px -2px #0000000a;z-index:1000}.pecb-header__dropdown-option{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:8px 12px;color:#313131;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__dropdown-option:hover{background-color:#f4f4f4}.pecb-header__dropdown-option--selected{font-weight:500;color:#a11e29}.pecb-header__actions{display:flex;align-items:center;gap:8px}.pecb-header__action-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;position:relative;width:40px;height:40px;border:1px solid #
|
|
4260
|
+
`, isInline: true, styles: [".pecb-header{display:block;width:100%}.pecb-header__container{display:flex;align-items:center;justify-content:space-between;position:relative;width:100%;min-height:72px;padding:16px 24px;gap:24px;background-color:#fff;border-bottom:1px solid #ececec;box-sizing:border-box}.pecb-header__left{display:flex;align-items:center;flex-shrink:0}.pecb-header__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;margin:0;line-height:1}.pecb-header__right{display:flex;align-items:center;gap:16px;flex-shrink:1;min-width:0}.pecb-header__search{display:flex;align-items:center;position:relative;min-width:200px;max-width:320px;height:40px;border:1px solid #ececec;border-radius:8px;background-color:#fff;padding:0 12px;gap:8px;transition-property:border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__search:focus-within{border-color:#c2c2c2}.pecb-header__search--with-category{padding-right:0}.pecb-header__search-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#919191}.pecb-header__search-icon svg{width:18px;height:18px;display:block}.pecb-header__search-icon svg path,.pecb-header__search-icon svg circle,.pecb-header__search-icon svg rect,.pecb-header__search-icon svg line,.pecb-header__search-icon svg polyline,.pecb-header__search-icon svg polygon{stroke:currentColor}.pecb-header__search-input{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#313131;background:transparent;border:none;outline:none;flex:1;min-width:0;height:100%}.pecb-header__search-input::placeholder{color:#919191}.pecb-header__search-category{position:relative;flex-shrink:0;height:100%;display:flex;align-items:center;border-left:1px solid #ececec}.pecb-header__search-category-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;display:flex;align-items:center;gap:6px;padding:0 12px;height:100%;color:#313131;white-space:nowrap}.pecb-header__search-category-btn:focus{outline:none}.pecb-header__search-category-btn:hover{color:#212427}.pecb-header__language{position:relative}.pecb-header__language-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;gap:6px;padding:8px;border-radius:6px;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__language-btn:focus{outline:none}.pecb-header__language-btn:hover{background-color:#f4f4f4}.pecb-header__language-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__language-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#616161}.pecb-header__language-icon svg{width:18px;height:18px;display:block}.pecb-header__language-icon svg path,.pecb-header__language-icon svg circle,.pecb-header__language-icon svg rect,.pecb-header__language-icon svg line,.pecb-header__language-icon svg polyline,.pecb-header__language-icon svg polygon{stroke:currentColor}.pecb-header__language-label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;color:#313131;white-space:nowrap}.pecb-header__chevron{width:14px;height:14px;flex-shrink:0;color:#919191}.pecb-header__chevron-updown{width:14px;height:14px;flex-shrink:0;color:#313131}.pecb-header__dropdown-panel{position:absolute;top:calc(100% + 4px);right:0;min-width:120px;padding:6px 0;margin:0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 4px 8px -2px #0000000f,0 2px 4px -2px #0000000a;z-index:1000}.pecb-header__dropdown-option{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:8px 12px;color:#313131;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__dropdown-option:hover{background-color:#f4f4f4}.pecb-header__dropdown-option--selected{font-weight:500;color:#a11e29}.pecb-header__actions{display:flex;align-items:center;gap:8px}.pecb-header__action-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;position:relative;width:40px;height:40px;border:1px solid #c2c2c2;border-radius:8px;color:#212427;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__action-btn:focus{outline:none}.pecb-header__action-btn:hover{background-color:#f4f4f4}.pecb-header__action-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__action-icon{display:inline-flex;align-items:center}.pecb-header__action-icon svg{width:20px;height:20px;display:block}.pecb-header__action-icon svg path,.pecb-header__action-icon svg circle,.pecb-header__action-icon svg rect,.pecb-header__action-icon svg line,.pecb-header__action-icon svg polyline,.pecb-header__action-icon svg polygon{stroke:currentColor}.pecb-header__action-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9999px;background-color:#a11e29;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}.pecb-header__divider{width:1px;height:32px;background-color:#ececec;flex-shrink:0}.pecb-header__user{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;gap:12px;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__user:focus{outline:none}.pecb-header__user:hover{opacity:.85}.pecb-header__user:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__user-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.pecb-header__user-name{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;color:#313131;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.pecb-header__user-role{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:#919191;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.pecb-header__user--partner .pecb-profile{border-radius:8px;overflow:hidden}.pecb-header__search-toggle{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #ececec;border-radius:8px;color:#616161;display:none;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__search-toggle:focus{outline:none}.pecb-header__search-toggle:hover,.pecb-header__search-toggle--active{background-color:#f4f4f4;border-color:#c2c2c2;color:#313131}.pecb-header__search-toggle:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__search-toggle svg{width:18px;height:18px;display:block}.pecb-header__search-toggle svg path,.pecb-header__search-toggle svg circle,.pecb-header__search-toggle svg rect,.pecb-header__search-toggle svg line,.pecb-header__search-toggle svg polyline,.pecb-header__search-toggle svg polygon{stroke:currentColor}@media (max-width: 1023px){.pecb-header__container{padding:12px 16px;min-height:60px}.pecb-header__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:20px;font-weight:700;line-height:1.2}.pecb-header__right{gap:12px}.pecb-header__search{min-width:160px;max-width:240px}.pecb-header__user-info{display:none}.pecb-header__divider{height:24px}}@media (max-width: 767px){.pecb-header__container{padding:8px 12px;min-height:56px;gap:16px}.pecb-header__title{font-size:18px}.pecb-header__right{gap:8px}.pecb-header__search{display:none}.pecb-header__search--expanded{display:flex;position:absolute;top:100%;left:0;right:0;min-width:unset;max-width:unset;margin:0;border-radius:0;border-top:none;border-left:none;border-right:none;height:48px;padding:0 16px;z-index:1000;box-shadow:0 2px 4px #0000000f,0 1px 3px -1px #0000000a}.pecb-header__search-toggle{display:flex}.pecb-header__language-label,.pecb-header__language .pecb-header__chevron{display:none}.pecb-header__language-btn{padding:6px}.pecb-header__action-btn{width:32px;height:32px}.pecb-header__action-icon svg{width:16px;height:16px}.pecb-header__divider{height:20px}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4242
4261
|
}
|
|
4243
4262
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HeaderComponent, decorators: [{
|
|
4244
4263
|
type: Component,
|
|
@@ -4255,7 +4274,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
4255
4274
|
<ng-content></ng-content>
|
|
4256
4275
|
</div>
|
|
4257
4276
|
</header>
|
|
4258
|
-
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class]': '"pecb-header"' }, styles: [".pecb-header{display:block;width:100%}.pecb-header__container{display:flex;align-items:center;justify-content:space-between;position:relative;width:100%;min-height:72px;padding:16px 24px;gap:24px;background-color:#fff;border-bottom:1px solid #ececec;box-sizing:border-box}.pecb-header__left{display:flex;align-items:center;flex-shrink:0}.pecb-header__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;margin:0;line-height:1}.pecb-header__right{display:flex;align-items:center;gap:16px;flex-shrink:1;min-width:0}.pecb-header__search{display:flex;align-items:center;position:relative;min-width:200px;max-width:320px;height:40px;border:1px solid #ececec;border-radius:8px;background-color:#fff;padding:0 12px;gap:8px;transition-property:border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__search:focus-within{border-color:#c2c2c2}.pecb-header__search--with-category{padding-right:0}.pecb-header__search-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#919191}.pecb-header__search-icon svg{width:18px;height:18px;display:block}.pecb-header__search-icon svg path,.pecb-header__search-icon svg circle,.pecb-header__search-icon svg rect,.pecb-header__search-icon svg line,.pecb-header__search-icon svg polyline,.pecb-header__search-icon svg polygon{stroke:currentColor}.pecb-header__search-input{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#313131;background:transparent;border:none;outline:none;flex:1;min-width:0;height:100%}.pecb-header__search-input::placeholder{color:#919191}.pecb-header__search-category{position:relative;flex-shrink:0;height:100%;display:flex;align-items:center;border-left:1px solid #ececec}.pecb-header__search-category-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;display:flex;align-items:center;gap:6px;padding:0 12px;height:100%;color:#313131;white-space:nowrap}.pecb-header__search-category-btn:focus{outline:none}.pecb-header__search-category-btn:hover{color:#212427}.pecb-header__language{position:relative}.pecb-header__language-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;gap:6px;padding:8px;border-radius:6px;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__language-btn:focus{outline:none}.pecb-header__language-btn:hover{background-color:#f4f4f4}.pecb-header__language-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__language-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#616161}.pecb-header__language-icon svg{width:18px;height:18px;display:block}.pecb-header__language-icon svg path,.pecb-header__language-icon svg circle,.pecb-header__language-icon svg rect,.pecb-header__language-icon svg line,.pecb-header__language-icon svg polyline,.pecb-header__language-icon svg polygon{stroke:currentColor}.pecb-header__language-label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;color:#313131;white-space:nowrap}.pecb-header__chevron{width:14px;height:14px;flex-shrink:0;color:#919191}.pecb-header__chevron-updown{width:14px;height:14px;flex-shrink:0;color:#313131}.pecb-header__dropdown-panel{position:absolute;top:calc(100% + 4px);right:0;min-width:120px;padding:6px 0;margin:0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 4px 8px -2px #0000000f,0 2px 4px -2px #0000000a;z-index:1000}.pecb-header__dropdown-option{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:8px 12px;color:#313131;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__dropdown-option:hover{background-color:#f4f4f4}.pecb-header__dropdown-option--selected{font-weight:500;color:#a11e29}.pecb-header__actions{display:flex;align-items:center;gap:8px}.pecb-header__action-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;position:relative;width:40px;height:40px;border:1px solid #
|
|
4277
|
+
`, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { '[class]': '"pecb-header"' }, styles: [".pecb-header{display:block;width:100%}.pecb-header__container{display:flex;align-items:center;justify-content:space-between;position:relative;width:100%;min-height:72px;padding:16px 24px;gap:24px;background-color:#fff;border-bottom:1px solid #ececec;box-sizing:border-box}.pecb-header__left{display:flex;align-items:center;flex-shrink:0}.pecb-header__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:24px;font-weight:700;line-height:1.2;color:#313131;margin:0;line-height:1}.pecb-header__right{display:flex;align-items:center;gap:16px;flex-shrink:1;min-width:0}.pecb-header__search{display:flex;align-items:center;position:relative;min-width:200px;max-width:320px;height:40px;border:1px solid #ececec;border-radius:8px;background-color:#fff;padding:0 12px;gap:8px;transition-property:border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__search:focus-within{border-color:#c2c2c2}.pecb-header__search--with-category{padding-right:0}.pecb-header__search-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#919191}.pecb-header__search-icon svg{width:18px;height:18px;display:block}.pecb-header__search-icon svg path,.pecb-header__search-icon svg circle,.pecb-header__search-icon svg rect,.pecb-header__search-icon svg line,.pecb-header__search-icon svg polyline,.pecb-header__search-icon svg polygon{stroke:currentColor}.pecb-header__search-input{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#313131;background:transparent;border:none;outline:none;flex:1;min-width:0;height:100%}.pecb-header__search-input::placeholder{color:#919191}.pecb-header__search-category{position:relative;flex-shrink:0;height:100%;display:flex;align-items:center;border-left:1px solid #ececec}.pecb-header__search-category-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;display:flex;align-items:center;gap:6px;padding:0 12px;height:100%;color:#313131;white-space:nowrap}.pecb-header__search-category-btn:focus{outline:none}.pecb-header__search-category-btn:hover{color:#212427}.pecb-header__language{position:relative}.pecb-header__language-btn{border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;gap:6px;padding:8px;border-radius:6px;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__language-btn:focus{outline:none}.pecb-header__language-btn:hover{background-color:#f4f4f4}.pecb-header__language-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__language-icon{display:inline-flex;align-items:center;flex-shrink:0;color:#616161}.pecb-header__language-icon svg{width:18px;height:18px;display:block}.pecb-header__language-icon svg path,.pecb-header__language-icon svg circle,.pecb-header__language-icon svg rect,.pecb-header__language-icon svg line,.pecb-header__language-icon svg polyline,.pecb-header__language-icon svg polygon{stroke:currentColor}.pecb-header__language-label{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;color:#313131;white-space:nowrap}.pecb-header__chevron{width:14px;height:14px;flex-shrink:0;color:#919191}.pecb-header__chevron-updown{width:14px;height:14px;flex-shrink:0;color:#313131}.pecb-header__dropdown-panel{position:absolute;top:calc(100% + 4px);right:0;min-width:120px;padding:6px 0;margin:0;list-style:none;background-color:#fff;border:1px solid #ececec;border-radius:8px;box-shadow:0 4px 8px -2px #0000000f,0 2px 4px -2px #0000000a;z-index:1000}.pecb-header__dropdown-option{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;padding:8px 12px;color:#313131;cursor:pointer;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__dropdown-option:hover{background-color:#f4f4f4}.pecb-header__dropdown-option--selected{font-weight:500;color:#a11e29}.pecb-header__actions{display:flex;align-items:center;gap:8px}.pecb-header__action-btn{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;position:relative;width:40px;height:40px;border:1px solid #c2c2c2;border-radius:8px;color:#212427;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__action-btn:focus{outline:none}.pecb-header__action-btn:hover{background-color:#f4f4f4}.pecb-header__action-btn:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__action-icon{display:inline-flex;align-items:center}.pecb-header__action-icon svg{width:20px;height:20px;display:block}.pecb-header__action-icon svg path,.pecb-header__action-icon svg circle,.pecb-header__action-icon svg rect,.pecb-header__action-icon svg line,.pecb-header__action-icon svg polyline,.pecb-header__action-icon svg polygon{stroke:currentColor}.pecb-header__action-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9999px;background-color:#a11e29;color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}.pecb-header__divider{width:1px;height:32px;background-color:#ececec;flex-shrink:0}.pecb-header__user{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;gap:12px;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__user:focus{outline:none}.pecb-header__user:hover{opacity:.85}.pecb-header__user:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__user-info{display:flex;flex-direction:column;align-items:flex-end;gap:2px}.pecb-header__user-name{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;line-height:1.5;color:#313131;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.pecb-header__user-role{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:12px;font-weight:400;line-height:1.5;color:#919191;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:160px}.pecb-header__user--partner .pecb-profile{border-radius:8px;overflow:hidden}.pecb-header__search-toggle{padding:0;border:none;background:none;cursor:pointer;font:inherit;color:inherit;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #ececec;border-radius:8px;color:#616161;display:none;transition-property:background-color,border-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-header__search-toggle:focus{outline:none}.pecb-header__search-toggle:hover,.pecb-header__search-toggle--active{background-color:#f4f4f4;border-color:#c2c2c2;color:#313131}.pecb-header__search-toggle:focus-visible{outline:2px solid #a11e29;outline-offset:2px}.pecb-header__search-toggle svg{width:18px;height:18px;display:block}.pecb-header__search-toggle svg path,.pecb-header__search-toggle svg circle,.pecb-header__search-toggle svg rect,.pecb-header__search-toggle svg line,.pecb-header__search-toggle svg polyline,.pecb-header__search-toggle svg polygon{stroke:currentColor}@media (max-width: 1023px){.pecb-header__container{padding:12px 16px;min-height:60px}.pecb-header__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:20px;font-weight:700;line-height:1.2}.pecb-header__right{gap:12px}.pecb-header__search{min-width:160px;max-width:240px}.pecb-header__user-info{display:none}.pecb-header__divider{height:24px}}@media (max-width: 767px){.pecb-header__container{padding:8px 12px;min-height:56px;gap:16px}.pecb-header__title{font-size:18px}.pecb-header__right{gap:8px}.pecb-header__search{display:none}.pecb-header__search--expanded{display:flex;position:absolute;top:100%;left:0;right:0;min-width:unset;max-width:unset;margin:0;border-radius:0;border-top:none;border-left:none;border-right:none;height:48px;padding:0 16px;z-index:1000;box-shadow:0 2px 4px #0000000f,0 1px 3px -1px #0000000a}.pecb-header__search-toggle{display:flex}.pecb-header__language-label,.pecb-header__language .pecb-header__chevron{display:none}.pecb-header__language-btn{padding:6px}.pecb-header__action-btn{width:32px;height:32px}.pecb-header__action-icon svg{width:16px;height:16px}.pecb-header__divider{height:20px}}\n"] }]
|
|
4259
4278
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: true }] }], ariaLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "ariaLabel", required: false }] }] } });
|
|
4260
4279
|
// =============================================================================
|
|
4261
4280
|
// HEADER SEARCH
|
|
@@ -4488,7 +4507,7 @@ class HeaderLanguageComponent {
|
|
|
4488
4507
|
return match?.label ?? code;
|
|
4489
4508
|
}, ...(ngDevMode ? [{ debugName: "currentLabel" }] : []));
|
|
4490
4509
|
this.globeIconSvg = computed(() => {
|
|
4491
|
-
const svg = this.registry.get('globe
|
|
4510
|
+
const svg = this.registry.get('globe') ?? '';
|
|
4492
4511
|
return this.sanitizer.bypassSecurityTrustHtml(svg);
|
|
4493
4512
|
}, ...(ngDevMode ? [{ debugName: "globeIconSvg" }] : []));
|
|
4494
4513
|
}
|
|
@@ -5682,11 +5701,11 @@ class AffixComponent {
|
|
|
5682
5701
|
}), ...(ngDevMode ? [{ debugName: "bodyStyles" }] : []));
|
|
5683
5702
|
}
|
|
5684
5703
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5685
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AffixComponent, isStandalone: true, selector: "pecb-affix", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, stickyPosition: { classPropertyName: "stickyPosition", publicName: "stickyPosition", isSignal: true, isRequired: false, transformFunction: null }, stickyTop: { classPropertyName: "stickyTop", publicName: "stickyTop", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [ngClass]=\"containerClasses()\"\n role=\"region\"\n aria-label=\"Affix layout\"\n>\n <!-- Body: sidebar + content -->\n <div class=\"pecb-affix__body\" [ngStyle]=\"bodyStyles()\">\n\n <!-- Sticky sidebar -->\n <aside\n class=\"pecb-affix__sidebar\"\n [ngStyle]=\"sidebarStyles()\"\n role=\"complementary\"\n aria-label=\"Sidebar navigation\"\n >\n <ng-content select=\"[affixSidebar]\"></ng-content>\n </aside>\n\n <!-- Scrollable content -->\n <main class=\"pecb-affix__content\" role=\"main\">\n <ng-content select=\"[affixContent]\"></ng-content>\n </main>\n\n </div>\n\n <!-- Footer -->\n @if (showFooter()) {\n <footer class=\"pecb-affix__footer\">\n <ng-content select=\"[affixFooter]\"></ng-content>\n </footer>\n }\n</div>\n", styles: [".pecb-affix{display:flex;flex-direction:column;width:100%;min-height:0}.pecb-affix__body{display:flex;flex:1 1 auto;min-height:0;align-items:flex-start}.pecb-affix__sidebar{position:sticky;flex-shrink:0;align-self:flex-start;overflow-y:auto;max-height:100vh;z-index:1020}.pecb-affix__content{flex:1 1 auto;min-width:0;min-height:0}.pecb-affix__footer{flex-shrink:0;width:100%;position:sticky;bottom:0;z-index:1020;background-color:#fff;border-top:1px solid #ececec}.pecb-affix--right .pecb-affix__body{flex-direction:row-reverse}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5704
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: AffixComponent, isStandalone: true, selector: "pecb-affix", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, sidebarWidth: { classPropertyName: "sidebarWidth", publicName: "sidebarWidth", isSignal: true, isRequired: false, transformFunction: null }, stickyPosition: { classPropertyName: "stickyPosition", publicName: "stickyPosition", isSignal: true, isRequired: false, transformFunction: null }, stickyTop: { classPropertyName: "stickyTop", publicName: "stickyTop", isSignal: true, isRequired: false, transformFunction: null }, gap: { classPropertyName: "gap", publicName: "gap", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div\n [id]=\"id()\"\n [ngClass]=\"containerClasses()\"\n role=\"region\"\n aria-label=\"Affix layout\"\n>\n <!-- Body: sidebar + content -->\n <div class=\"pecb-affix__body\" [ngStyle]=\"bodyStyles()\">\n\n <!-- Sticky sidebar -->\n <aside\n class=\"pecb-affix__sidebar\"\n [ngStyle]=\"sidebarStyles()\"\n role=\"complementary\"\n aria-label=\"Sidebar navigation\"\n >\n <ng-content select=\"[affixSidebar]\"></ng-content>\n </aside>\n\n <!-- Scrollable content -->\n <main class=\"pecb-affix__content\" role=\"main\">\n <ng-content select=\"[affixContent]\"></ng-content>\n </main>\n\n </div>\n\n <!-- Footer -->\n @if (showFooter()) {\n <footer class=\"pecb-affix__footer\">\n <ng-content select=\"[affixFooter]\"></ng-content>\n </footer>\n }\n</div>\n", styles: [".pecb-affix{display:flex;flex-direction:column;width:100%;min-height:0}.pecb-affix__body{display:flex;flex:1 1 auto;min-height:0;align-items:flex-start}.pecb-affix__sidebar{position:sticky;flex-shrink:0;align-self:flex-start;overflow-y:auto;max-height:100vh;z-index:1020}.pecb-affix__content{flex:1 1 auto;min-width:0;min-height:0}.pecb-affix__footer{flex-shrink:0;width:100%;position:sticky;bottom:0;z-index:1020;background-color:#fff;border-top:1px solid #ececec}.pecb-affix--right .pecb-affix__body{flex-direction:row-reverse}.pecb-affix ::ng-deep .pecb-button--primary-2:hover:not(:disabled){background-color:#313131;border-color:#313131}.pecb-affix ::ng-deep .pecb-button--primary-2:active:not(:disabled){background-color:#212427;border-color:#212427}.pecb-affix ::ng-deep .pecb-button--primary-2:disabled{opacity:1;background-color:#c2c2c2;border-color:#c2c2c2;color:#fff}.pecb-affix ::ng-deep .pecb-button--secondary:hover:not(:disabled){background-color:#f4f4f4;border-color:#919191;color:#313131}.pecb-affix ::ng-deep .pecb-button--secondary:active:not(:disabled){background-color:#ececec;border-color:#616161}.pecb-affix ::ng-deep .pecb-button--secondary:disabled{opacity:1;background-color:#fff;border-color:#ececec;color:#919191}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5686
5705
|
}
|
|
5687
5706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AffixComponent, decorators: [{
|
|
5688
5707
|
type: Component,
|
|
5689
|
-
args: [{ selector: 'pecb-affix', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"id()\"\n [ngClass]=\"containerClasses()\"\n role=\"region\"\n aria-label=\"Affix layout\"\n>\n <!-- Body: sidebar + content -->\n <div class=\"pecb-affix__body\" [ngStyle]=\"bodyStyles()\">\n\n <!-- Sticky sidebar -->\n <aside\n class=\"pecb-affix__sidebar\"\n [ngStyle]=\"sidebarStyles()\"\n role=\"complementary\"\n aria-label=\"Sidebar navigation\"\n >\n <ng-content select=\"[affixSidebar]\"></ng-content>\n </aside>\n\n <!-- Scrollable content -->\n <main class=\"pecb-affix__content\" role=\"main\">\n <ng-content select=\"[affixContent]\"></ng-content>\n </main>\n\n </div>\n\n <!-- Footer -->\n @if (showFooter()) {\n <footer class=\"pecb-affix__footer\">\n <ng-content select=\"[affixFooter]\"></ng-content>\n </footer>\n }\n</div>\n", styles: [".pecb-affix{display:flex;flex-direction:column;width:100%;min-height:0}.pecb-affix__body{display:flex;flex:1 1 auto;min-height:0;align-items:flex-start}.pecb-affix__sidebar{position:sticky;flex-shrink:0;align-self:flex-start;overflow-y:auto;max-height:100vh;z-index:1020}.pecb-affix__content{flex:1 1 auto;min-width:0;min-height:0}.pecb-affix__footer{flex-shrink:0;width:100%;position:sticky;bottom:0;z-index:1020;background-color:#fff;border-top:1px solid #ececec}.pecb-affix--right .pecb-affix__body{flex-direction:row-reverse}\n"] }]
|
|
5708
|
+
args: [{ selector: 'pecb-affix', standalone: true, imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"id()\"\n [ngClass]=\"containerClasses()\"\n role=\"region\"\n aria-label=\"Affix layout\"\n>\n <!-- Body: sidebar + content -->\n <div class=\"pecb-affix__body\" [ngStyle]=\"bodyStyles()\">\n\n <!-- Sticky sidebar -->\n <aside\n class=\"pecb-affix__sidebar\"\n [ngStyle]=\"sidebarStyles()\"\n role=\"complementary\"\n aria-label=\"Sidebar navigation\"\n >\n <ng-content select=\"[affixSidebar]\"></ng-content>\n </aside>\n\n <!-- Scrollable content -->\n <main class=\"pecb-affix__content\" role=\"main\">\n <ng-content select=\"[affixContent]\"></ng-content>\n </main>\n\n </div>\n\n <!-- Footer -->\n @if (showFooter()) {\n <footer class=\"pecb-affix__footer\">\n <ng-content select=\"[affixFooter]\"></ng-content>\n </footer>\n }\n</div>\n", styles: [".pecb-affix{display:flex;flex-direction:column;width:100%;min-height:0}.pecb-affix__body{display:flex;flex:1 1 auto;min-height:0;align-items:flex-start}.pecb-affix__sidebar{position:sticky;flex-shrink:0;align-self:flex-start;overflow-y:auto;max-height:100vh;z-index:1020}.pecb-affix__content{flex:1 1 auto;min-width:0;min-height:0}.pecb-affix__footer{flex-shrink:0;width:100%;position:sticky;bottom:0;z-index:1020;background-color:#fff;border-top:1px solid #ececec}.pecb-affix--right .pecb-affix__body{flex-direction:row-reverse}.pecb-affix ::ng-deep .pecb-button--primary-2:hover:not(:disabled){background-color:#313131;border-color:#313131}.pecb-affix ::ng-deep .pecb-button--primary-2:active:not(:disabled){background-color:#212427;border-color:#212427}.pecb-affix ::ng-deep .pecb-button--primary-2:disabled{opacity:1;background-color:#c2c2c2;border-color:#c2c2c2;color:#fff}.pecb-affix ::ng-deep .pecb-button--secondary:hover:not(:disabled){background-color:#f4f4f4;border-color:#919191;color:#313131}.pecb-affix ::ng-deep .pecb-button--secondary:active:not(:disabled){background-color:#ececec;border-color:#616161}.pecb-affix ::ng-deep .pecb-button--secondary:disabled{opacity:1;background-color:#fff;border-color:#ececec;color:#919191}\n"] }]
|
|
5690
5709
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], sidebarWidth: [{ type: i0.Input, args: [{ isSignal: true, alias: "sidebarWidth", required: false }] }], stickyPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyPosition", required: false }] }], stickyTop: [{ type: i0.Input, args: [{ isSignal: true, alias: "stickyTop", required: false }] }], gap: [{ type: i0.Input, args: [{ isSignal: true, alias: "gap", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }] } });
|
|
5691
5710
|
|
|
5692
5711
|
/** Default languages matching the Figma design */
|