@pecb-ui/components 1.1.3 → 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 +89 -24
- package/fesm2022/pecb-ui-components.mjs.map +1 -1
- package/index.d.ts +28 -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
|
}
|
|
@@ -5136,6 +5155,12 @@ class HierarchicalTableComponent {
|
|
|
5136
5155
|
this.scrollThumbPosition = signal(0, ...(ngDevMode ? [{ debugName: "scrollThumbPosition" }] : []));
|
|
5137
5156
|
this.tableWrapper = null;
|
|
5138
5157
|
this.scrollListener = null;
|
|
5158
|
+
// Drag state
|
|
5159
|
+
this.isDragging = false;
|
|
5160
|
+
this.dragStartX = 0;
|
|
5161
|
+
this.dragStartScrollLeft = 0;
|
|
5162
|
+
this.dragMoveListener = null;
|
|
5163
|
+
this.dragEndListener = null;
|
|
5139
5164
|
}
|
|
5140
5165
|
getCellValue(row, key) {
|
|
5141
5166
|
return key.split('.').reduce((obj, k) => obj?.[k], row);
|
|
@@ -5162,15 +5187,55 @@ class HierarchicalTableComponent {
|
|
|
5162
5187
|
if (this.tableWrapper && this.scrollListener) {
|
|
5163
5188
|
this.tableWrapper.removeEventListener('scroll', this.scrollListener);
|
|
5164
5189
|
}
|
|
5190
|
+
this.removeDragListeners();
|
|
5165
5191
|
}
|
|
5166
5192
|
onScrollbarMouseDown(event) {
|
|
5167
5193
|
if (!this.tableWrapper)
|
|
5168
5194
|
return;
|
|
5195
|
+
const target = event.target;
|
|
5169
5196
|
const track = event.currentTarget;
|
|
5170
|
-
|
|
5171
|
-
|
|
5197
|
+
if (target.classList.contains('pecb-htable__scrollbar-thumb')) {
|
|
5198
|
+
// Thumb drag — record start position and attach document-level listeners
|
|
5199
|
+
this.isDragging = true;
|
|
5200
|
+
this.dragStartX = event.clientX;
|
|
5201
|
+
this.dragStartScrollLeft = this.tableWrapper.scrollLeft;
|
|
5202
|
+
event.preventDefault();
|
|
5203
|
+
this.dragMoveListener = (e) => this.onDragMove(e, track);
|
|
5204
|
+
this.dragEndListener = () => this.onDragEnd();
|
|
5205
|
+
document.addEventListener('mousemove', this.dragMoveListener);
|
|
5206
|
+
document.addEventListener('mouseup', this.dragEndListener);
|
|
5207
|
+
}
|
|
5208
|
+
else {
|
|
5209
|
+
// Track click — jump scroll to clicked position
|
|
5210
|
+
const rect = track.getBoundingClientRect();
|
|
5211
|
+
const clickPercent = (event.clientX - rect.left) / rect.width;
|
|
5212
|
+
const maxScroll = this.tableWrapper.scrollWidth - this.tableWrapper.clientWidth;
|
|
5213
|
+
this.tableWrapper.scrollLeft = clickPercent * maxScroll;
|
|
5214
|
+
}
|
|
5215
|
+
}
|
|
5216
|
+
onDragMove(event, track) {
|
|
5217
|
+
if (!this.isDragging || !this.tableWrapper)
|
|
5218
|
+
return;
|
|
5172
5219
|
const maxScroll = this.tableWrapper.scrollWidth - this.tableWrapper.clientWidth;
|
|
5173
|
-
|
|
5220
|
+
const trackWidth = track.clientWidth;
|
|
5221
|
+
const thumbWidthPx = (this.tableWrapper.clientWidth / this.tableWrapper.scrollWidth) * trackWidth;
|
|
5222
|
+
const delta = event.clientX - this.dragStartX;
|
|
5223
|
+
const scrollDelta = (delta / (trackWidth - thumbWidthPx)) * maxScroll;
|
|
5224
|
+
this.tableWrapper.scrollLeft = Math.max(0, Math.min(maxScroll, this.dragStartScrollLeft + scrollDelta));
|
|
5225
|
+
}
|
|
5226
|
+
onDragEnd() {
|
|
5227
|
+
this.isDragging = false;
|
|
5228
|
+
this.removeDragListeners();
|
|
5229
|
+
}
|
|
5230
|
+
removeDragListeners() {
|
|
5231
|
+
if (this.dragMoveListener) {
|
|
5232
|
+
document.removeEventListener('mousemove', this.dragMoveListener);
|
|
5233
|
+
this.dragMoveListener = null;
|
|
5234
|
+
}
|
|
5235
|
+
if (this.dragEndListener) {
|
|
5236
|
+
document.removeEventListener('mouseup', this.dragEndListener);
|
|
5237
|
+
this.dragEndListener = null;
|
|
5238
|
+
}
|
|
5174
5239
|
}
|
|
5175
5240
|
updateScrollbar() {
|
|
5176
5241
|
if (!this.tableWrapper)
|
|
@@ -5186,11 +5251,11 @@ class HierarchicalTableComponent {
|
|
|
5186
5251
|
}
|
|
5187
5252
|
}
|
|
5188
5253
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HierarchicalTableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5189
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HierarchicalTableComponent, isStandalone: true, selector: "pecb-hierarchical-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClicked: "actionButtonClicked", searchChanged: "searchChanged", filterClicked: "filterClicked", rowActionClicked: "rowActionClicked", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "scrollbarTrack", first: true, predicate: ["scrollbarTrack"], descendants: true }], ngImport: i0, template: "<div\n [id]=\"id()\"\n class=\"pecb-htable\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <!-- Toolbar -->\n @if (showToolbar()) {\n <div class=\"pecb-htable__toolbar\">\n <div class=\"pecb-htable__toolbar-left\">\n @if (actionLabel()) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-btn\"\n (click)=\"actionButtonClicked.emit()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 13.5 13.5\" fill=\"none\">\n <path d=\"M6.75 0.75L6.75 12.75M12.75 6.75L0.75 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n {{ actionLabel() }}\n </button>\n }\n <ng-content select=\"[toolbarLeft]\"></ng-content>\n </div>\n <div class=\"pecb-htable__toolbar-right\">\n <ng-content select=\"[toolbarRight]\"></ng-content>\n @if (showSearch()) {\n <div class=\"pecb-htable__search\">\n <svg class=\"pecb-htable__search-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 16.5 16.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.75 15.75L12.125 12.125M14.0833 7.41667C14.0833 11.0986 11.0986 14.0833 7.41667 14.0833C3.73477 14.0833 0.75 11.0986 0.75 7.41667C0.75 3.73477 3.73477 0.75 7.41667 0.75C11.0986 0.75 14.0833 3.73477 14.0833 7.41667Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <input\n type=\"text\"\n class=\"pecb-htable__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n (input)=\"searchChanged.emit($any($event.target).value)\"\n />\n </div>\n }\n @if (showFilter()) {\n <button\n type=\"button\"\n class=\"pecb-htable__filter-btn\"\n (click)=\"filterClicked.emit()\"\n aria-label=\"Filter\"\n >\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 13.5V3.75M6 13.5C6.39782 13.5 6.77936 13.658 7.06066 13.9393C7.34196 14.2206 7.5 14.6022 7.5 15C7.5 15.3978 7.34196 15.7794 7.06066 16.0607C6.77936 16.342 6.39782 16.5 6 16.5M6 13.5C5.60218 13.5 5.22064 13.658 4.93934 13.9393C4.65804 14.2206 4.5 14.6022 4.5 15C4.5 15.3978 4.65804 15.7794 4.93934 16.0607C5.22064 16.342 5.60218 16.5 6 16.5M6 16.5V20.25M18 13.5V3.75M18 13.5C18.3978 13.5 18.7794 13.658 19.0607 13.9393C19.342 14.2206 19.5 14.6022 19.5 15C19.5 15.3978 19.342 15.7794 19.0607 16.0607C18.7794 16.342 18.3978 16.5 18 16.5M18 13.5C17.6022 13.5 17.2206 13.658 16.9393 13.9393C16.658 14.2206 16.5 14.6022 16.5 15C16.5 15.3978 16.658 15.7794 16.9393 16.0607C17.2206 16.342 17.6022 16.5 18 16.5M18 16.5V20.25M12 7.5V3.75M12 7.5C12.3978 7.5 12.7794 7.65804 13.0607 7.93934C13.342 8.22064 13.5 8.60218 13.5 9C13.5 9.39782 13.342 9.77936 13.0607 10.0607C12.7794 10.342 12.3978 10.5 12 10.5M12 7.5C11.6022 7.5 11.2206 7.65804 10.9393 7.93934C10.658 8.22064 10.5 8.60218 10.5 9C10.5 9.39782 10.658 9.77936 10.9393 10.0607C11.2206 10.342 11.6022 10.5 12 10.5M12 10.5V20.25\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Table with horizontal scroll -->\n <div class=\"pecb-htable__scroll-container\">\n <div class=\"pecb-htable__table-wrapper\">\n <table class=\"pecb-htable__table\" role=\"grid\">\n <!-- Header -->\n <thead class=\"pecb-htable__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"pecb-htable__head-cell\"\n [class.pecb-htable__head-cell--fixed]=\"col.fixed\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n scope=\"col\"\n >\n {{ col.label }}\n </th>\n }\n @if (showActions()) {\n <th class=\"pecb-htable__head-cell pecb-htable__head-cell--action pecb-htable__head-cell--fixed\" scope=\"col\">\n Action\n </th>\n }\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"pecb-htable__body\">\n @for (row of data(); track $index; let i = $index) {\n <tr class=\"pecb-htable__row\">\n @for (col of columns(); track col.key) {\n <td\n class=\"pecb-htable__cell\"\n [class.pecb-htable__cell--fixed]=\"col.fixed\"\n [style.text-align]=\"col.align || 'left'\"\n >\n @if (col.type === 'status') {\n <span class=\"pecb-htable__status-badge\">\n {{ getCellValue(row, col.key) }}\n </span>\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n @if (showActions()) {\n <td class=\"pecb-htable__cell pecb-htable__cell--action pecb-htable__cell--fixed\">\n <div class=\"pecb-htable__actions\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-icon\"\n [attr.aria-label]=\"action.label || action.id\"\n (click)=\"onAction(action.id, row, i)\"\n >\n @switch (action.icon) {\n @case ('view') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 21.6883 16\" fill=\"none\">\n <path d=\"M1.26387 8.71318C1.12769 8.49754 1.05959 8.38972 1.02147 8.22342C0.992842 8.0985 0.992842 7.9015 1.02147 7.77658C1.05959 7.61028 1.12769 7.50246 1.26387 7.28682C2.38928 5.50484 5.73915 1 10.8442 1C15.9492 1 19.299 5.50484 20.4244 7.28682C20.5606 7.50246 20.6287 7.61028 20.6668 7.77658C20.6955 7.9015 20.6955 8.0985 20.6668 8.22342C20.6287 8.38972 20.5606 8.49754 20.4244 8.71318C19.299 10.4952 15.9492 15 10.8442 15C5.73915 15 2.38928 10.4952 1.26387 8.71318Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10.8442 11C12.501 11 13.8442 9.65685 13.8442 8C13.8442 6.34315 12.501 5 10.8442 5C9.1873 5 7.84415 6.34315 7.84415 8C7.84415 9.65685 9.1873 11 10.8442 11Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('edit') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\" viewBox=\"0 0 19.6062 19.6062\" fill=\"none\">\n <path d=\"M8.875 2.85616H5.2C3.72986 2.85616 2.99479 2.85616 2.43328 3.14226C1.93935 3.39393 1.53778 3.79551 1.28611 4.28943C1 4.85095 1 5.58602 1 7.05616V14.4062C1 15.8763 1 16.6114 1.28611 17.1729C1.53778 17.6668 1.93935 18.0684 2.43328 18.32C2.99479 18.6062 3.72986 18.6062 5.2 18.6062H12.55C14.0201 18.6062 14.7552 18.6062 15.3167 18.32C15.8107 18.0684 16.2122 17.6668 16.4639 17.1729C16.75 16.6114 16.75 15.8763 16.75 14.4062V10.7312M6.24998 13.3562H7.7152C8.14324 13.3562 8.35725 13.3562 8.55866 13.3078C8.73722 13.2649 8.90792 13.1942 9.0645 13.0983C9.2411 12.9901 9.39244 12.8387 9.6951 12.5361L18.0625 4.16866C18.7874 3.44378 18.7874 2.26853 18.0625 1.54366C17.3376 0.818782 16.1624 0.818781 15.4375 1.54365L7.07008 9.91106C6.76741 10.2137 6.61608 10.3651 6.50786 10.5417C6.41191 10.6982 6.3412 10.8689 6.29833 11.0475C6.24998 11.2489 6.24998 11.4629 6.24998 11.891V13.3562Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('delete') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M7 1H13M1 4H19M17 4L16.2987 14.5193C16.1935 16.0975 16.1409 16.8867 15.8 17.485C15.4999 18.0118 15.0472 18.4353 14.5017 18.6997C13.882 19 13.0911 19 11.5093 19H8.49065C6.90891 19 6.11803 19 5.49834 18.6997C4.95276 18.4353 4.50009 18.0118 4.19998 17.485C3.85911 16.8867 3.8065 16.0975 3.70129 14.5193L3 4M8 8.5V13.5M12 8.5V13.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n }\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Custom scrollbar (Figma: bg #ececec, thumb #c2c2c2, rounded 86px, 6px) -->\n <div\n class=\"pecb-htable__scrollbar\"\n #scrollbarTrack\n (mousedown)=\"onScrollbarMouseDown($event)\"\n >\n <div\n class=\"pecb-htable__scrollbar-thumb\"\n [style.width.%]=\"scrollThumbWidth()\"\n [style.margin-left.%]=\"scrollThumbPosition()\"\n ></div>\n </div>\n </div>\n\n <!-- Pagination -->\n @if (showPagination() && totalItems() > 0) {\n <div class=\"pecb-htable__pagination\">\n <span class=\"pecb-htable__pagination-info\">\n {{ paginationStart() }}–{{ paginationEnd() }} of {{ totalItems() }} Items\n </span>\n <div class=\"pecb-htable__pagination-controls\">\n <span class=\"pecb-htable__pagination-label\">Items per page:</span>\n <span class=\"pecb-htable__pagination-size\">{{ pageSize() }} \u25BE</span>\n </div>\n <div class=\"pecb-htable__pagination-pages\">\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() <= 1\" (click)=\"onPageChange(currentPage() - 1)\" aria-label=\"Previous page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n @for (page of visiblePages(); track $index) {\n @if (page === '...') {\n <span class=\"pecb-htable__page-ellipsis\">\u2026</span>\n } @else {\n <button type=\"button\" class=\"pecb-htable__page-btn\" [class.pecb-htable__page-btn--active]=\"page === currentPage()\" (click)=\"onPageChange(+page)\" [attr.aria-label]=\"'Page ' + page\" [attr.aria-current]=\"page === currentPage() ? 'page' : null\">{{ page }}</button>\n }\n }\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() >= totalPages()\" (click)=\"onPageChange(currentPage() + 1)\" aria-label=\"Next page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".pecb-htable{display:flex;flex-direction:column;gap:16px;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-htable__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.pecb-htable__toolbar-left{display:flex;align-items:center;gap:12px}.pecb-htable__toolbar-right{display:flex;align-items:center;gap:8px;width:246px;justify-content:flex-end}.pecb-htable__action-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:8px 12px;border:none;border-radius:6px;background-color:#212427;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;white-space:nowrap;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-btn:hover{background-color:#313131}.pecb-htable__search{display:flex;align-items:center;gap:12px;height:40px;flex:1;padding:9px 10px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff}.pecb-htable__search-icon{flex-shrink:0;color:#c2c2c2}.pecb-htable__search-input{border:none;outline:none;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#313131;width:100%}.pecb-htable__search-input::placeholder{color:#c2c2c2}.pecb-htable__filter-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff;color:#c2c2c2;cursor:pointer;padding:7px;transition-property:background-color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__filter-btn:hover{background-color:#f4f4f4;border-color:#919191}.pecb-htable__scroll-container{display:flex;flex-direction:column;gap:16px}.pecb-htable__table-wrapper{border:1px solid #ececec;border-radius:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.pecb-htable__table-wrapper::-webkit-scrollbar{display:none}.pecb-htable__scrollbar{width:100%;height:6px;background-color:#ececec;border-radius:86px;overflow:hidden}.pecb-htable__scrollbar-thumb{height:100%;background-color:#c2c2c2;border-radius:86px;min-width:40px}.pecb-htable__table{width:100%;border-collapse:collapse;table-layout:auto;min-width:900px}.pecb-htable__head{background-color:#212427}.pecb-htable__head-cell{padding:20px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;line-height:18px;white-space:nowrap;text-align:left;border:none}.pecb-htable__head-cell--action{text-align:center}.pecb-htable__head-cell--fixed{position:sticky;right:0;z-index:2;background-color:#212427}.pecb-htable__body{background-color:#fff}.pecb-htable__row{height:58px;border-bottom:1px solid #ececec}.pecb-htable__row:nth-child(odd){background-color:#fff}.pecb-htable__row:nth-child(2n){background-color:#fafafa}.pecb-htable__cell{padding:20px;font-size:13px;font-weight:400;color:#212427;line-height:20px;vertical-align:middle;white-space:nowrap}.pecb-htable__cell--action{padding:9.5px 20px}.pecb-htable__cell--fixed{position:sticky;right:0;z-index:1;background-color:inherit}.pecb-htable__status-badge{display:inline-block;padding:10px 15px;background-color:#fdecea;border-radius:52px;font-size:13px;font-weight:700;color:#dc3545}.pecb-htable__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.pecb-htable__action-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:#212427;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-icon:hover{color:#a11e29}.pecb-htable__action-icon svg{display:block}.pecb-htable__pagination{display:flex;align-items:center;justify-content:space-between;padding:9px 20px;border:1px solid #ececec;border-radius:12px;background-color:#fff;flex-wrap:wrap;gap:12px}.pecb-htable__pagination-info{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-controls{display:flex;align-items:center;gap:8px}.pecb-htable__pagination-label{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-size{display:flex;align-items:center;justify-content:center;gap:7px;width:67px;padding:10px;font-size:13px;font-weight:400;color:#919191;border:1px solid #c2c2c2;border-radius:6px;cursor:pointer;text-align:center}.pecb-htable__pagination-pages{display:flex;align-items:center}.pecb-htable__page-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:4px;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#616161;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__page-btn:hover:not(:disabled):not(.pecb-htable__page-btn--active){background-color:#f4f4f4;color:#313131}.pecb-htable__page-btn--active{color:#a11e29}.pecb-htable__page-btn:disabled{color:#ececec;cursor:not-allowed}.pecb-htable__page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:16px;font-weight:600;color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5254
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: HierarchicalTableComponent, isStandalone: true, selector: "pecb-hierarchical-table", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, showActions: { classPropertyName: "showActions", publicName: "showActions", isSignal: true, isRequired: false, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, actionLabel: { classPropertyName: "actionLabel", publicName: "actionLabel", isSignal: true, isRequired: false, transformFunction: null }, searchPlaceholder: { classPropertyName: "searchPlaceholder", publicName: "searchPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, showSearch: { classPropertyName: "showSearch", publicName: "showSearch", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPagination: { classPropertyName: "showPagination", publicName: "showPagination", isSignal: true, isRequired: false, transformFunction: null }, 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 }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { actionButtonClicked: "actionButtonClicked", searchChanged: "searchChanged", filterClicked: "filterClicked", rowActionClicked: "rowActionClicked", pageChanged: "pageChanged" }, viewQueries: [{ propertyName: "scrollbarTrack", first: true, predicate: ["scrollbarTrack"], descendants: true }], ngImport: i0, template: "<div\n [id]=\"id()\"\n class=\"pecb-htable\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <!-- Toolbar -->\n @if (showToolbar()) {\n <div class=\"pecb-htable__toolbar\">\n <div class=\"pecb-htable__toolbar-left\">\n @if (actionLabel()) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-btn\"\n (click)=\"actionButtonClicked.emit()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 13.5 13.5\" fill=\"none\">\n <path d=\"M6.75 0.75L6.75 12.75M12.75 6.75L0.75 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n {{ actionLabel() }}\n </button>\n }\n <ng-content select=\"[toolbarLeft]\"></ng-content>\n </div>\n <div class=\"pecb-htable__toolbar-right\">\n <ng-content select=\"[toolbarRight]\"></ng-content>\n @if (showSearch()) {\n <div class=\"pecb-htable__search\">\n <svg class=\"pecb-htable__search-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 16.5 16.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.75 15.75L12.125 12.125M14.0833 7.41667C14.0833 11.0986 11.0986 14.0833 7.41667 14.0833C3.73477 14.0833 0.75 11.0986 0.75 7.41667C0.75 3.73477 3.73477 0.75 7.41667 0.75C11.0986 0.75 14.0833 3.73477 14.0833 7.41667Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <input\n type=\"text\"\n class=\"pecb-htable__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n (input)=\"searchChanged.emit($any($event.target).value)\"\n />\n </div>\n }\n @if (showFilter()) {\n <button\n type=\"button\"\n class=\"pecb-htable__filter-btn\"\n (click)=\"filterClicked.emit()\"\n aria-label=\"Filter\"\n >\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 13.5V3.75M6 13.5C6.39782 13.5 6.77936 13.658 7.06066 13.9393C7.34196 14.2206 7.5 14.6022 7.5 15C7.5 15.3978 7.34196 15.7794 7.06066 16.0607C6.77936 16.342 6.39782 16.5 6 16.5M6 13.5C5.60218 13.5 5.22064 13.658 4.93934 13.9393C4.65804 14.2206 4.5 14.6022 4.5 15C4.5 15.3978 4.65804 15.7794 4.93934 16.0607C5.22064 16.342 5.60218 16.5 6 16.5M6 16.5V20.25M18 13.5V3.75M18 13.5C18.3978 13.5 18.7794 13.658 19.0607 13.9393C19.342 14.2206 19.5 14.6022 19.5 15C19.5 15.3978 19.342 15.7794 19.0607 16.0607C18.7794 16.342 18.3978 16.5 18 16.5M18 13.5C17.6022 13.5 17.2206 13.658 16.9393 13.9393C16.658 14.2206 16.5 14.6022 16.5 15C16.5 15.3978 16.658 15.7794 16.9393 16.0607C17.2206 16.342 17.6022 16.5 18 16.5M18 16.5V20.25M12 7.5V3.75M12 7.5C12.3978 7.5 12.7794 7.65804 13.0607 7.93934C13.342 8.22064 13.5 8.60218 13.5 9C13.5 9.39782 13.342 9.77936 13.0607 10.0607C12.7794 10.342 12.3978 10.5 12 10.5M12 7.5C11.6022 7.5 11.2206 7.65804 10.9393 7.93934C10.658 8.22064 10.5 8.60218 10.5 9C10.5 9.39782 10.658 9.77936 10.9393 10.0607C11.2206 10.342 11.6022 10.5 12 10.5M12 10.5V20.25\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Table with horizontal scroll -->\n <div class=\"pecb-htable__scroll-container\">\n <div class=\"pecb-htable__table-wrapper\">\n <table class=\"pecb-htable__table\" role=\"grid\">\n <!-- Header -->\n <thead class=\"pecb-htable__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"pecb-htable__head-cell\"\n [class.pecb-htable__head-cell--fixed]=\"col.fixed\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n scope=\"col\"\n >\n {{ col.label }}\n </th>\n }\n @if (showActions()) {\n <th class=\"pecb-htable__head-cell pecb-htable__head-cell--action pecb-htable__head-cell--fixed\" scope=\"col\">\n Action\n </th>\n }\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"pecb-htable__body\">\n @for (row of data(); track $index; let i = $index) {\n <tr class=\"pecb-htable__row\">\n @for (col of columns(); track col.key) {\n <td\n class=\"pecb-htable__cell\"\n [class.pecb-htable__cell--fixed]=\"col.fixed\"\n [class.pecb-htable__cell--status]=\"col.type === 'status'\"\n [style.text-align]=\"col.align || 'left'\"\n >\n @if (col.type === 'status') {\n <span class=\"pecb-htable__status-badge\">\n {{ getCellValue(row, col.key) }}\n </span>\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n @if (showActions()) {\n <td class=\"pecb-htable__cell pecb-htable__cell--action pecb-htable__cell--fixed\">\n <div class=\"pecb-htable__actions\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-icon\"\n [attr.aria-label]=\"action.label || action.id\"\n (click)=\"onAction(action.id, row, i)\"\n >\n @switch (action.icon) {\n @case ('view') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 21.6883 16\" fill=\"none\">\n <path d=\"M1.26387 8.71318C1.12769 8.49754 1.05959 8.38972 1.02147 8.22342C0.992842 8.0985 0.992842 7.9015 1.02147 7.77658C1.05959 7.61028 1.12769 7.50246 1.26387 7.28682C2.38928 5.50484 5.73915 1 10.8442 1C15.9492 1 19.299 5.50484 20.4244 7.28682C20.5606 7.50246 20.6287 7.61028 20.6668 7.77658C20.6955 7.9015 20.6955 8.0985 20.6668 8.22342C20.6287 8.38972 20.5606 8.49754 20.4244 8.71318C19.299 10.4952 15.9492 15 10.8442 15C5.73915 15 2.38928 10.4952 1.26387 8.71318Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10.8442 11C12.501 11 13.8442 9.65685 13.8442 8C13.8442 6.34315 12.501 5 10.8442 5C9.1873 5 7.84415 6.34315 7.84415 8C7.84415 9.65685 9.1873 11 10.8442 11Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('edit') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\" viewBox=\"0 0 19.6062 19.6062\" fill=\"none\">\n <path d=\"M8.875 2.85616H5.2C3.72986 2.85616 2.99479 2.85616 2.43328 3.14226C1.93935 3.39393 1.53778 3.79551 1.28611 4.28943C1 4.85095 1 5.58602 1 7.05616V14.4062C1 15.8763 1 16.6114 1.28611 17.1729C1.53778 17.6668 1.93935 18.0684 2.43328 18.32C2.99479 18.6062 3.72986 18.6062 5.2 18.6062H12.55C14.0201 18.6062 14.7552 18.6062 15.3167 18.32C15.8107 18.0684 16.2122 17.6668 16.4639 17.1729C16.75 16.6114 16.75 15.8763 16.75 14.4062V10.7312M6.24998 13.3562H7.7152C8.14324 13.3562 8.35725 13.3562 8.55866 13.3078C8.73722 13.2649 8.90792 13.1942 9.0645 13.0983C9.2411 12.9901 9.39244 12.8387 9.6951 12.5361L18.0625 4.16866C18.7874 3.44378 18.7874 2.26853 18.0625 1.54366C17.3376 0.818782 16.1624 0.818781 15.4375 1.54365L7.07008 9.91106C6.76741 10.2137 6.61608 10.3651 6.50786 10.5417C6.41191 10.6982 6.3412 10.8689 6.29833 11.0475C6.24998 11.2489 6.24998 11.4629 6.24998 11.891V13.3562Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('delete') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M7 1H13M1 4H19M17 4L16.2987 14.5193C16.1935 16.0975 16.1409 16.8867 15.8 17.485C15.4999 18.0118 15.0472 18.4353 14.5017 18.6997C13.882 19 13.0911 19 11.5093 19H8.49065C6.90891 19 6.11803 19 5.49834 18.6997C4.95276 18.4353 4.50009 18.0118 4.19998 17.485C3.85911 16.8867 3.8065 16.0975 3.70129 14.5193L3 4M8 8.5V13.5M12 8.5V13.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n }\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Custom scrollbar (Figma: bg #ececec, thumb #c2c2c2, rounded 86px, 6px) -->\n <div\n class=\"pecb-htable__scrollbar\"\n #scrollbarTrack\n (mousedown)=\"onScrollbarMouseDown($event)\"\n >\n <div\n class=\"pecb-htable__scrollbar-thumb\"\n [style.width.%]=\"scrollThumbWidth()\"\n [style.left.%]=\"scrollThumbPosition()\"\n ></div>\n </div>\n </div>\n\n <!-- Pagination -->\n @if (showPagination() && totalItems() > 0) {\n <div class=\"pecb-htable__pagination\">\n <span class=\"pecb-htable__pagination-info\">\n {{ paginationStart() }}–{{ paginationEnd() }} of {{ totalItems() }} Items\n </span>\n <div class=\"pecb-htable__pagination-controls\">\n <span class=\"pecb-htable__pagination-label\">Items per page:</span>\n <span class=\"pecb-htable__pagination-size\">{{ pageSize() }} \u25BE</span>\n </div>\n <div class=\"pecb-htable__pagination-pages\">\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() <= 1\" (click)=\"onPageChange(currentPage() - 1)\" aria-label=\"Previous page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n @for (page of visiblePages(); track $index) {\n @if (page === '...') {\n <span class=\"pecb-htable__page-ellipsis\">\u2026</span>\n } @else {\n <button type=\"button\" class=\"pecb-htable__page-btn\" [class.pecb-htable__page-btn--active]=\"page === currentPage()\" (click)=\"onPageChange(+page)\" [attr.aria-label]=\"'Page ' + page\" [attr.aria-current]=\"page === currentPage() ? 'page' : null\">{{ page }}</button>\n }\n }\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() >= totalPages()\" (click)=\"onPageChange(currentPage() + 1)\" aria-label=\"Next page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".pecb-htable{display:flex;flex-direction:column;gap:16px;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-htable__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.pecb-htable__toolbar-left{display:flex;align-items:center;gap:12px}.pecb-htable__toolbar-right{display:flex;align-items:center;gap:8px;width:246px;justify-content:flex-end}.pecb-htable__action-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:8px 12px;border:none;border-radius:6px;background-color:#212427;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;white-space:nowrap;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-btn:hover{background-color:#313131}.pecb-htable__search{display:flex;align-items:center;gap:12px;height:40px;flex:1;padding:9px 10px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff}.pecb-htable__search-icon{flex-shrink:0;color:#c2c2c2}.pecb-htable__search-input{border:none;outline:none;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#313131;width:100%}.pecb-htable__search-input::placeholder{color:#c2c2c2}.pecb-htable__filter-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff;color:#c2c2c2;cursor:pointer;padding:7px;transition-property:background-color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__filter-btn:hover{background-color:#f4f4f4;border-color:#919191}.pecb-htable__scroll-container{display:flex;flex-direction:column;gap:16px}.pecb-htable__table-wrapper{border:1px solid #ececec;border-radius:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.pecb-htable__table-wrapper::-webkit-scrollbar{display:none}.pecb-htable__scrollbar{position:relative;width:100%;height:6px;background-color:#ececec;border-radius:86px;overflow:hidden;cursor:pointer}.pecb-htable__scrollbar-thumb{position:absolute;top:0;height:100%;background-color:#c2c2c2;border-radius:86px;min-width:40px;cursor:grab}.pecb-htable__scrollbar-thumb:active{cursor:grabbing}.pecb-htable__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;min-width:900px}.pecb-htable__head{background-color:#212427}.pecb-htable__head-cell{padding:20px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;line-height:18px;white-space:nowrap;text-align:left;border:none}.pecb-htable__head-cell--action{text-align:center;width:129px;min-width:129px}.pecb-htable__head-cell--fixed{position:sticky;right:0;z-index:2;background-color:#212427;box-shadow:-3px 0 4px #00000026;clip-path:inset(0 0 0 -15px)}.pecb-htable__body{background-color:#fff}.pecb-htable__row{height:58px}.pecb-htable__row:nth-child(odd){background-color:#fff}.pecb-htable__row:nth-child(2n){background-color:#fafafa}.pecb-htable__cell{padding:20px;font-size:13px;font-weight:400;color:#212427;line-height:20px;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-htable__cell--status{padding:11px 20px}.pecb-htable__cell--action{padding:9.5px 20px;width:129px;min-width:129px}.pecb-htable__cell--fixed{position:sticky;right:0;z-index:1;background-color:inherit;box-shadow:-3px 0 4px #00000026;clip-path:inset(0 0 0 -15px)}.pecb-htable__status-badge{display:inline-block;padding:10px 15px;background-color:#fdecea;border-radius:52px;font-size:13px;font-weight:700;color:#dc3545}.pecb-htable__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.pecb-htable__action-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:none;color:#212427;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-icon:hover{color:#a11e29}.pecb-htable__action-icon svg{display:block;flex-shrink:0}.pecb-htable__pagination{display:flex;align-items:center;justify-content:space-between;padding:9px 20px;border:1px solid #ececec;border-radius:12px;background-color:#fff;flex-wrap:wrap;gap:12px}.pecb-htable__pagination-info{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-controls{display:flex;align-items:center;gap:8px}.pecb-htable__pagination-label{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-size{display:flex;align-items:center;justify-content:center;gap:7px;width:67px;padding:10px;font-size:13px;font-weight:400;color:#919191;border:1px solid #c2c2c2;border-radius:6px;cursor:pointer;text-align:center}.pecb-htable__pagination-pages{display:flex;align-items:center}.pecb-htable__page-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:4px;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#616161;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__page-btn:hover:not(:disabled):not(.pecb-htable__page-btn--active){background-color:#f4f4f4;color:#313131}.pecb-htable__page-btn--active{color:#a11e29}.pecb-htable__page-btn:disabled{color:#ececec;cursor:not-allowed}.pecb-htable__page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:16px;font-weight:600;color:#616161}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5190
5255
|
}
|
|
5191
5256
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HierarchicalTableComponent, decorators: [{
|
|
5192
5257
|
type: Component,
|
|
5193
|
-
args: [{ selector: 'pecb-hierarchical-table', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"id()\"\n class=\"pecb-htable\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <!-- Toolbar -->\n @if (showToolbar()) {\n <div class=\"pecb-htable__toolbar\">\n <div class=\"pecb-htable__toolbar-left\">\n @if (actionLabel()) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-btn\"\n (click)=\"actionButtonClicked.emit()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 13.5 13.5\" fill=\"none\">\n <path d=\"M6.75 0.75L6.75 12.75M12.75 6.75L0.75 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n {{ actionLabel() }}\n </button>\n }\n <ng-content select=\"[toolbarLeft]\"></ng-content>\n </div>\n <div class=\"pecb-htable__toolbar-right\">\n <ng-content select=\"[toolbarRight]\"></ng-content>\n @if (showSearch()) {\n <div class=\"pecb-htable__search\">\n <svg class=\"pecb-htable__search-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 16.5 16.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.75 15.75L12.125 12.125M14.0833 7.41667C14.0833 11.0986 11.0986 14.0833 7.41667 14.0833C3.73477 14.0833 0.75 11.0986 0.75 7.41667C0.75 3.73477 3.73477 0.75 7.41667 0.75C11.0986 0.75 14.0833 3.73477 14.0833 7.41667Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <input\n type=\"text\"\n class=\"pecb-htable__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n (input)=\"searchChanged.emit($any($event.target).value)\"\n />\n </div>\n }\n @if (showFilter()) {\n <button\n type=\"button\"\n class=\"pecb-htable__filter-btn\"\n (click)=\"filterClicked.emit()\"\n aria-label=\"Filter\"\n >\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 13.5V3.75M6 13.5C6.39782 13.5 6.77936 13.658 7.06066 13.9393C7.34196 14.2206 7.5 14.6022 7.5 15C7.5 15.3978 7.34196 15.7794 7.06066 16.0607C6.77936 16.342 6.39782 16.5 6 16.5M6 13.5C5.60218 13.5 5.22064 13.658 4.93934 13.9393C4.65804 14.2206 4.5 14.6022 4.5 15C4.5 15.3978 4.65804 15.7794 4.93934 16.0607C5.22064 16.342 5.60218 16.5 6 16.5M6 16.5V20.25M18 13.5V3.75M18 13.5C18.3978 13.5 18.7794 13.658 19.0607 13.9393C19.342 14.2206 19.5 14.6022 19.5 15C19.5 15.3978 19.342 15.7794 19.0607 16.0607C18.7794 16.342 18.3978 16.5 18 16.5M18 13.5C17.6022 13.5 17.2206 13.658 16.9393 13.9393C16.658 14.2206 16.5 14.6022 16.5 15C16.5 15.3978 16.658 15.7794 16.9393 16.0607C17.2206 16.342 17.6022 16.5 18 16.5M18 16.5V20.25M12 7.5V3.75M12 7.5C12.3978 7.5 12.7794 7.65804 13.0607 7.93934C13.342 8.22064 13.5 8.60218 13.5 9C13.5 9.39782 13.342 9.77936 13.0607 10.0607C12.7794 10.342 12.3978 10.5 12 10.5M12 7.5C11.6022 7.5 11.2206 7.65804 10.9393 7.93934C10.658 8.22064 10.5 8.60218 10.5 9C10.5 9.39782 10.658 9.77936 10.9393 10.0607C11.2206 10.342 11.6022 10.5 12 10.5M12 10.5V20.25\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Table with horizontal scroll -->\n <div class=\"pecb-htable__scroll-container\">\n <div class=\"pecb-htable__table-wrapper\">\n <table class=\"pecb-htable__table\" role=\"grid\">\n <!-- Header -->\n <thead class=\"pecb-htable__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"pecb-htable__head-cell\"\n [class.pecb-htable__head-cell--fixed]=\"col.fixed\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n scope=\"col\"\n >\n {{ col.label }}\n </th>\n }\n @if (showActions()) {\n <th class=\"pecb-htable__head-cell pecb-htable__head-cell--action pecb-htable__head-cell--fixed\" scope=\"col\">\n Action\n </th>\n }\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"pecb-htable__body\">\n @for (row of data(); track $index; let i = $index) {\n <tr class=\"pecb-htable__row\">\n @for (col of columns(); track col.key) {\n <td\n class=\"pecb-htable__cell\"\n [class.pecb-htable__cell--fixed]=\"col.fixed\"\n [style.text-align]=\"col.align || 'left'\"\n >\n @if (col.type === 'status') {\n <span class=\"pecb-htable__status-badge\">\n {{ getCellValue(row, col.key) }}\n </span>\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n @if (showActions()) {\n <td class=\"pecb-htable__cell pecb-htable__cell--action pecb-htable__cell--fixed\">\n <div class=\"pecb-htable__actions\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-icon\"\n [attr.aria-label]=\"action.label || action.id\"\n (click)=\"onAction(action.id, row, i)\"\n >\n @switch (action.icon) {\n @case ('view') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 21.6883 16\" fill=\"none\">\n <path d=\"M1.26387 8.71318C1.12769 8.49754 1.05959 8.38972 1.02147 8.22342C0.992842 8.0985 0.992842 7.9015 1.02147 7.77658C1.05959 7.61028 1.12769 7.50246 1.26387 7.28682C2.38928 5.50484 5.73915 1 10.8442 1C15.9492 1 19.299 5.50484 20.4244 7.28682C20.5606 7.50246 20.6287 7.61028 20.6668 7.77658C20.6955 7.9015 20.6955 8.0985 20.6668 8.22342C20.6287 8.38972 20.5606 8.49754 20.4244 8.71318C19.299 10.4952 15.9492 15 10.8442 15C5.73915 15 2.38928 10.4952 1.26387 8.71318Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10.8442 11C12.501 11 13.8442 9.65685 13.8442 8C13.8442 6.34315 12.501 5 10.8442 5C9.1873 5 7.84415 6.34315 7.84415 8C7.84415 9.65685 9.1873 11 10.8442 11Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('edit') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\" viewBox=\"0 0 19.6062 19.6062\" fill=\"none\">\n <path d=\"M8.875 2.85616H5.2C3.72986 2.85616 2.99479 2.85616 2.43328 3.14226C1.93935 3.39393 1.53778 3.79551 1.28611 4.28943C1 4.85095 1 5.58602 1 7.05616V14.4062C1 15.8763 1 16.6114 1.28611 17.1729C1.53778 17.6668 1.93935 18.0684 2.43328 18.32C2.99479 18.6062 3.72986 18.6062 5.2 18.6062H12.55C14.0201 18.6062 14.7552 18.6062 15.3167 18.32C15.8107 18.0684 16.2122 17.6668 16.4639 17.1729C16.75 16.6114 16.75 15.8763 16.75 14.4062V10.7312M6.24998 13.3562H7.7152C8.14324 13.3562 8.35725 13.3562 8.55866 13.3078C8.73722 13.2649 8.90792 13.1942 9.0645 13.0983C9.2411 12.9901 9.39244 12.8387 9.6951 12.5361L18.0625 4.16866C18.7874 3.44378 18.7874 2.26853 18.0625 1.54366C17.3376 0.818782 16.1624 0.818781 15.4375 1.54365L7.07008 9.91106C6.76741 10.2137 6.61608 10.3651 6.50786 10.5417C6.41191 10.6982 6.3412 10.8689 6.29833 11.0475C6.24998 11.2489 6.24998 11.4629 6.24998 11.891V13.3562Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('delete') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M7 1H13M1 4H19M17 4L16.2987 14.5193C16.1935 16.0975 16.1409 16.8867 15.8 17.485C15.4999 18.0118 15.0472 18.4353 14.5017 18.6997C13.882 19 13.0911 19 11.5093 19H8.49065C6.90891 19 6.11803 19 5.49834 18.6997C4.95276 18.4353 4.50009 18.0118 4.19998 17.485C3.85911 16.8867 3.8065 16.0975 3.70129 14.5193L3 4M8 8.5V13.5M12 8.5V13.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n }\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Custom scrollbar (Figma: bg #ececec, thumb #c2c2c2, rounded 86px, 6px) -->\n <div\n class=\"pecb-htable__scrollbar\"\n #scrollbarTrack\n (mousedown)=\"onScrollbarMouseDown($event)\"\n >\n <div\n class=\"pecb-htable__scrollbar-thumb\"\n [style.width.%]=\"scrollThumbWidth()\"\n [style.margin-left.%]=\"scrollThumbPosition()\"\n ></div>\n </div>\n </div>\n\n <!-- Pagination -->\n @if (showPagination() && totalItems() > 0) {\n <div class=\"pecb-htable__pagination\">\n <span class=\"pecb-htable__pagination-info\">\n {{ paginationStart() }}–{{ paginationEnd() }} of {{ totalItems() }} Items\n </span>\n <div class=\"pecb-htable__pagination-controls\">\n <span class=\"pecb-htable__pagination-label\">Items per page:</span>\n <span class=\"pecb-htable__pagination-size\">{{ pageSize() }} \u25BE</span>\n </div>\n <div class=\"pecb-htable__pagination-pages\">\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() <= 1\" (click)=\"onPageChange(currentPage() - 1)\" aria-label=\"Previous page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n @for (page of visiblePages(); track $index) {\n @if (page === '...') {\n <span class=\"pecb-htable__page-ellipsis\">\u2026</span>\n } @else {\n <button type=\"button\" class=\"pecb-htable__page-btn\" [class.pecb-htable__page-btn--active]=\"page === currentPage()\" (click)=\"onPageChange(+page)\" [attr.aria-label]=\"'Page ' + page\" [attr.aria-current]=\"page === currentPage() ? 'page' : null\">{{ page }}</button>\n }\n }\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() >= totalPages()\" (click)=\"onPageChange(currentPage() + 1)\" aria-label=\"Next page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".pecb-htable{display:flex;flex-direction:column;gap:16px;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-htable__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.pecb-htable__toolbar-left{display:flex;align-items:center;gap:12px}.pecb-htable__toolbar-right{display:flex;align-items:center;gap:8px;width:246px;justify-content:flex-end}.pecb-htable__action-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:8px 12px;border:none;border-radius:6px;background-color:#212427;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;white-space:nowrap;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-btn:hover{background-color:#313131}.pecb-htable__search{display:flex;align-items:center;gap:12px;height:40px;flex:1;padding:9px 10px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff}.pecb-htable__search-icon{flex-shrink:0;color:#c2c2c2}.pecb-htable__search-input{border:none;outline:none;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#313131;width:100%}.pecb-htable__search-input::placeholder{color:#c2c2c2}.pecb-htable__filter-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff;color:#c2c2c2;cursor:pointer;padding:7px;transition-property:background-color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__filter-btn:hover{background-color:#f4f4f4;border-color:#919191}.pecb-htable__scroll-container{display:flex;flex-direction:column;gap:16px}.pecb-htable__table-wrapper{border:1px solid #ececec;border-radius:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.pecb-htable__table-wrapper::-webkit-scrollbar{display:none}.pecb-htable__scrollbar{width:100%;height:6px;background-color:#ececec;border-radius:86px;overflow:hidden}.pecb-htable__scrollbar-thumb{height:100%;background-color:#c2c2c2;border-radius:86px;min-width:40px}.pecb-htable__table{width:100%;border-collapse:collapse;table-layout:auto;min-width:900px}.pecb-htable__head{background-color:#212427}.pecb-htable__head-cell{padding:20px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;line-height:18px;white-space:nowrap;text-align:left;border:none}.pecb-htable__head-cell--action{text-align:center}.pecb-htable__head-cell--fixed{position:sticky;right:0;z-index:2;background-color:#212427}.pecb-htable__body{background-color:#fff}.pecb-htable__row{height:58px;border-bottom:1px solid #ececec}.pecb-htable__row:nth-child(odd){background-color:#fff}.pecb-htable__row:nth-child(2n){background-color:#fafafa}.pecb-htable__cell{padding:20px;font-size:13px;font-weight:400;color:#212427;line-height:20px;vertical-align:middle;white-space:nowrap}.pecb-htable__cell--action{padding:9.5px 20px}.pecb-htable__cell--fixed{position:sticky;right:0;z-index:1;background-color:inherit}.pecb-htable__status-badge{display:inline-block;padding:10px 15px;background-color:#fdecea;border-radius:52px;font-size:13px;font-weight:700;color:#dc3545}.pecb-htable__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.pecb-htable__action-icon{display:inline-flex;align-items:center;justify-content:center;padding:0;border:none;background:none;color:#212427;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-icon:hover{color:#a11e29}.pecb-htable__action-icon svg{display:block}.pecb-htable__pagination{display:flex;align-items:center;justify-content:space-between;padding:9px 20px;border:1px solid #ececec;border-radius:12px;background-color:#fff;flex-wrap:wrap;gap:12px}.pecb-htable__pagination-info{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-controls{display:flex;align-items:center;gap:8px}.pecb-htable__pagination-label{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-size{display:flex;align-items:center;justify-content:center;gap:7px;width:67px;padding:10px;font-size:13px;font-weight:400;color:#919191;border:1px solid #c2c2c2;border-radius:6px;cursor:pointer;text-align:center}.pecb-htable__pagination-pages{display:flex;align-items:center}.pecb-htable__page-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:4px;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#616161;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__page-btn:hover:not(:disabled):not(.pecb-htable__page-btn--active){background-color:#f4f4f4;color:#313131}.pecb-htable__page-btn--active{color:#a11e29}.pecb-htable__page-btn:disabled{color:#ececec;cursor:not-allowed}.pecb-htable__page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:16px;font-weight:600;color:#616161}\n"] }]
|
|
5258
|
+
args: [{ selector: 'pecb-hierarchical-table', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n [id]=\"id()\"\n class=\"pecb-htable\"\n role=\"region\"\n [attr.aria-label]=\"ariaLabel()\"\n>\n <!-- Toolbar -->\n @if (showToolbar()) {\n <div class=\"pecb-htable__toolbar\">\n <div class=\"pecb-htable__toolbar-left\">\n @if (actionLabel()) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-btn\"\n (click)=\"actionButtonClicked.emit()\"\n >\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"12\" viewBox=\"0 0 13.5 13.5\" fill=\"none\">\n <path d=\"M6.75 0.75L6.75 12.75M12.75 6.75L0.75 6.75\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\"/>\n </svg>\n {{ actionLabel() }}\n </button>\n }\n <ng-content select=\"[toolbarLeft]\"></ng-content>\n </div>\n <div class=\"pecb-htable__toolbar-right\">\n <ng-content select=\"[toolbarRight]\"></ng-content>\n @if (showSearch()) {\n <div class=\"pecb-htable__search\">\n <svg class=\"pecb-htable__search-icon\" width=\"20\" height=\"20\" viewBox=\"0 0 16.5 16.5\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M15.75 15.75L12.125 12.125M14.0833 7.41667C14.0833 11.0986 11.0986 14.0833 7.41667 14.0833C3.73477 14.0833 0.75 11.0986 0.75 7.41667C0.75 3.73477 3.73477 0.75 7.41667 0.75C11.0986 0.75 14.0833 3.73477 14.0833 7.41667Z\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n <input\n type=\"text\"\n class=\"pecb-htable__search-input\"\n [placeholder]=\"searchPlaceholder()\"\n (input)=\"searchChanged.emit($any($event.target).value)\"\n />\n </div>\n }\n @if (showFilter()) {\n <button\n type=\"button\"\n class=\"pecb-htable__filter-btn\"\n (click)=\"filterClicked.emit()\"\n aria-label=\"Filter\"\n >\n <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M6 13.5V3.75M6 13.5C6.39782 13.5 6.77936 13.658 7.06066 13.9393C7.34196 14.2206 7.5 14.6022 7.5 15C7.5 15.3978 7.34196 15.7794 7.06066 16.0607C6.77936 16.342 6.39782 16.5 6 16.5M6 13.5C5.60218 13.5 5.22064 13.658 4.93934 13.9393C4.65804 14.2206 4.5 14.6022 4.5 15C4.5 15.3978 4.65804 15.7794 4.93934 16.0607C5.22064 16.342 5.60218 16.5 6 16.5M6 16.5V20.25M18 13.5V3.75M18 13.5C18.3978 13.5 18.7794 13.658 19.0607 13.9393C19.342 14.2206 19.5 14.6022 19.5 15C19.5 15.3978 19.342 15.7794 19.0607 16.0607C18.7794 16.342 18.3978 16.5 18 16.5M18 13.5C17.6022 13.5 17.2206 13.658 16.9393 13.9393C16.658 14.2206 16.5 14.6022 16.5 15C16.5 15.3978 16.658 15.7794 16.9393 16.0607C17.2206 16.342 17.6022 16.5 18 16.5M18 16.5V20.25M12 7.5V3.75M12 7.5C12.3978 7.5 12.7794 7.65804 13.0607 7.93934C13.342 8.22064 13.5 8.60218 13.5 9C13.5 9.39782 13.342 9.77936 13.0607 10.0607C12.7794 10.342 12.3978 10.5 12 10.5M12 7.5C11.6022 7.5 11.2206 7.65804 10.9393 7.93934C10.658 8.22064 10.5 8.60218 10.5 9C10.5 9.39782 10.658 9.77936 10.9393 10.0607C11.2206 10.342 11.6022 10.5 12 10.5M12 10.5V20.25\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n }\n </div>\n </div>\n }\n\n <!-- Table with horizontal scroll -->\n <div class=\"pecb-htable__scroll-container\">\n <div class=\"pecb-htable__table-wrapper\">\n <table class=\"pecb-htable__table\" role=\"grid\">\n <!-- Header -->\n <thead class=\"pecb-htable__head\">\n <tr>\n @for (col of columns(); track col.key) {\n <th\n class=\"pecb-htable__head-cell\"\n [class.pecb-htable__head-cell--fixed]=\"col.fixed\"\n [style.width]=\"col.width || 'auto'\"\n [style.text-align]=\"col.align || 'left'\"\n scope=\"col\"\n >\n {{ col.label }}\n </th>\n }\n @if (showActions()) {\n <th class=\"pecb-htable__head-cell pecb-htable__head-cell--action pecb-htable__head-cell--fixed\" scope=\"col\">\n Action\n </th>\n }\n </tr>\n </thead>\n\n <!-- Body -->\n <tbody class=\"pecb-htable__body\">\n @for (row of data(); track $index; let i = $index) {\n <tr class=\"pecb-htable__row\">\n @for (col of columns(); track col.key) {\n <td\n class=\"pecb-htable__cell\"\n [class.pecb-htable__cell--fixed]=\"col.fixed\"\n [class.pecb-htable__cell--status]=\"col.type === 'status'\"\n [style.text-align]=\"col.align || 'left'\"\n >\n @if (col.type === 'status') {\n <span class=\"pecb-htable__status-badge\">\n {{ getCellValue(row, col.key) }}\n </span>\n } @else {\n {{ getCellValue(row, col.key) }}\n }\n </td>\n }\n @if (showActions()) {\n <td class=\"pecb-htable__cell pecb-htable__cell--action pecb-htable__cell--fixed\">\n <div class=\"pecb-htable__actions\">\n @for (action of actions(); track action.id) {\n <button\n type=\"button\"\n class=\"pecb-htable__action-icon\"\n [attr.aria-label]=\"action.label || action.id\"\n (click)=\"onAction(action.id, row, i)\"\n >\n @switch (action.icon) {\n @case ('view') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"24\" height=\"24\" viewBox=\"0 0 21.6883 16\" fill=\"none\">\n <path d=\"M1.26387 8.71318C1.12769 8.49754 1.05959 8.38972 1.02147 8.22342C0.992842 8.0985 0.992842 7.9015 1.02147 7.77658C1.05959 7.61028 1.12769 7.50246 1.26387 7.28682C2.38928 5.50484 5.73915 1 10.8442 1C15.9492 1 19.299 5.50484 20.4244 7.28682C20.5606 7.50246 20.6287 7.61028 20.6668 7.77658C20.6955 7.9015 20.6955 8.0985 20.6668 8.22342C20.6287 8.38972 20.5606 8.49754 20.4244 8.71318C19.299 10.4952 15.9492 15 10.8442 15C5.73915 15 2.38928 10.4952 1.26387 8.71318Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M10.8442 11C12.501 11 13.8442 9.65685 13.8442 8C13.8442 6.34315 12.501 5 10.8442 5C9.1873 5 7.84415 6.34315 7.84415 8C7.84415 9.65685 9.1873 11 10.8442 11Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('edit') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"21\" height=\"21\" viewBox=\"0 0 19.6062 19.6062\" fill=\"none\">\n <path d=\"M8.875 2.85616H5.2C3.72986 2.85616 2.99479 2.85616 2.43328 3.14226C1.93935 3.39393 1.53778 3.79551 1.28611 4.28943C1 4.85095 1 5.58602 1 7.05616V14.4062C1 15.8763 1 16.6114 1.28611 17.1729C1.53778 17.6668 1.93935 18.0684 2.43328 18.32C2.99479 18.6062 3.72986 18.6062 5.2 18.6062H12.55C14.0201 18.6062 14.7552 18.6062 15.3167 18.32C15.8107 18.0684 16.2122 17.6668 16.4639 17.1729C16.75 16.6114 16.75 15.8763 16.75 14.4062V10.7312M6.24998 13.3562H7.7152C8.14324 13.3562 8.35725 13.3562 8.55866 13.3078C8.73722 13.2649 8.90792 13.1942 9.0645 13.0983C9.2411 12.9901 9.39244 12.8387 9.6951 12.5361L18.0625 4.16866C18.7874 3.44378 18.7874 2.26853 18.0625 1.54366C17.3376 0.818782 16.1624 0.818781 15.4375 1.54365L7.07008 9.91106C6.76741 10.2137 6.61608 10.3651 6.50786 10.5417C6.41191 10.6982 6.3412 10.8689 6.29833 11.0475C6.24998 11.2489 6.24998 11.4629 6.24998 11.891V13.3562Z\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n @case ('delete') {\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\n <path d=\"M7 1H13M1 4H19M17 4L16.2987 14.5193C16.1935 16.0975 16.1409 16.8867 15.8 17.485C15.4999 18.0118 15.0472 18.4353 14.5017 18.6997C13.882 19 13.0911 19 11.5093 19H8.49065C6.90891 19 6.11803 19 5.49834 18.6997C4.95276 18.4353 4.50009 18.0118 4.19998 17.485C3.85911 16.8867 3.8065 16.0975 3.70129 14.5193L3 4M8 8.5V13.5M12 8.5V13.5\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n }\n }\n </button>\n }\n </div>\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n\n <!-- Custom scrollbar (Figma: bg #ececec, thumb #c2c2c2, rounded 86px, 6px) -->\n <div\n class=\"pecb-htable__scrollbar\"\n #scrollbarTrack\n (mousedown)=\"onScrollbarMouseDown($event)\"\n >\n <div\n class=\"pecb-htable__scrollbar-thumb\"\n [style.width.%]=\"scrollThumbWidth()\"\n [style.left.%]=\"scrollThumbPosition()\"\n ></div>\n </div>\n </div>\n\n <!-- Pagination -->\n @if (showPagination() && totalItems() > 0) {\n <div class=\"pecb-htable__pagination\">\n <span class=\"pecb-htable__pagination-info\">\n {{ paginationStart() }}–{{ paginationEnd() }} of {{ totalItems() }} Items\n </span>\n <div class=\"pecb-htable__pagination-controls\">\n <span class=\"pecb-htable__pagination-label\">Items per page:</span>\n <span class=\"pecb-htable__pagination-size\">{{ pageSize() }} \u25BE</span>\n </div>\n <div class=\"pecb-htable__pagination-pages\">\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() <= 1\" (click)=\"onPageChange(currentPage() - 1)\" aria-label=\"Previous page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M10 12L6 8l4-4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n @for (page of visiblePages(); track $index) {\n @if (page === '...') {\n <span class=\"pecb-htable__page-ellipsis\">\u2026</span>\n } @else {\n <button type=\"button\" class=\"pecb-htable__page-btn\" [class.pecb-htable__page-btn--active]=\"page === currentPage()\" (click)=\"onPageChange(+page)\" [attr.aria-label]=\"'Page ' + page\" [attr.aria-current]=\"page === currentPage() ? 'page' : null\">{{ page }}</button>\n }\n }\n <button type=\"button\" class=\"pecb-htable__page-btn\" [disabled]=\"currentPage() >= totalPages()\" (click)=\"onPageChange(currentPage() + 1)\" aria-label=\"Next page\">\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\"><path d=\"M6 4l4 4-4 4\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/></svg>\n </button>\n </div>\n </div>\n }\n</div>\n", styles: [".pecb-htable{display:flex;flex-direction:column;gap:16px;width:100%;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.pecb-htable__toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px}.pecb-htable__toolbar-left{display:flex;align-items:center;gap:12px}.pecb-htable__toolbar-right{display:flex;align-items:center;gap:8px;width:246px;justify-content:flex-end}.pecb-htable__action-btn{display:inline-flex;align-items:center;gap:8px;height:40px;padding:8px 12px;border:none;border-radius:6px;background-color:#212427;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:500;color:#fff;cursor:pointer;white-space:nowrap;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-btn:hover{background-color:#313131}.pecb-htable__search{display:flex;align-items:center;gap:12px;height:40px;flex:1;padding:9px 10px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff}.pecb-htable__search-icon{flex-shrink:0;color:#c2c2c2}.pecb-htable__search-input{border:none;outline:none;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#313131;width:100%}.pecb-htable__search-input::placeholder{color:#c2c2c2}.pecb-htable__filter-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border:1px solid #c2c2c2;border-radius:6px;background-color:#fff;color:#c2c2c2;cursor:pointer;padding:7px;transition-property:background-color,border-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__filter-btn:hover{background-color:#f4f4f4;border-color:#919191}.pecb-htable__scroll-container{display:flex;flex-direction:column;gap:16px}.pecb-htable__table-wrapper{border:1px solid #ececec;border-radius:12px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none}.pecb-htable__table-wrapper::-webkit-scrollbar{display:none}.pecb-htable__scrollbar{position:relative;width:100%;height:6px;background-color:#ececec;border-radius:86px;overflow:hidden;cursor:pointer}.pecb-htable__scrollbar-thumb{position:absolute;top:0;height:100%;background-color:#c2c2c2;border-radius:86px;min-width:40px;cursor:grab}.pecb-htable__scrollbar-thumb:active{cursor:grabbing}.pecb-htable__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:auto;min-width:900px}.pecb-htable__head{background-color:#212427}.pecb-htable__head-cell{padding:20px;font-size:12px;font-weight:600;color:#fff;text-transform:uppercase;line-height:18px;white-space:nowrap;text-align:left;border:none}.pecb-htable__head-cell--action{text-align:center;width:129px;min-width:129px}.pecb-htable__head-cell--fixed{position:sticky;right:0;z-index:2;background-color:#212427;box-shadow:-3px 0 4px #00000026;clip-path:inset(0 0 0 -15px)}.pecb-htable__body{background-color:#fff}.pecb-htable__row{height:58px}.pecb-htable__row:nth-child(odd){background-color:#fff}.pecb-htable__row:nth-child(2n){background-color:#fafafa}.pecb-htable__cell{padding:20px;font-size:13px;font-weight:400;color:#212427;line-height:20px;vertical-align:middle;white-space:nowrap;border-bottom:1px solid #ececec}.pecb-htable__cell--status{padding:11px 20px}.pecb-htable__cell--action{padding:9.5px 20px;width:129px;min-width:129px}.pecb-htable__cell--fixed{position:sticky;right:0;z-index:1;background-color:inherit;box-shadow:-3px 0 4px #00000026;clip-path:inset(0 0 0 -15px)}.pecb-htable__status-badge{display:inline-block;padding:10px 15px;background-color:#fdecea;border-radius:52px;font-size:13px;font-weight:700;color:#dc3545}.pecb-htable__actions{display:flex;align-items:center;justify-content:flex-end;gap:10px}.pecb-htable__action-icon{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;border:none;background:none;color:#212427;cursor:pointer;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__action-icon:hover{color:#a11e29}.pecb-htable__action-icon svg{display:block;flex-shrink:0}.pecb-htable__pagination{display:flex;align-items:center;justify-content:space-between;padding:9px 20px;border:1px solid #ececec;border-radius:12px;background-color:#fff;flex-wrap:wrap;gap:12px}.pecb-htable__pagination-info{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-controls{display:flex;align-items:center;gap:8px}.pecb-htable__pagination-label{font-size:13px;font-weight:400;color:#919191;line-height:20px}.pecb-htable__pagination-size{display:flex;align-items:center;justify-content:center;gap:7px;width:67px;padding:10px;font-size:13px;font-weight:400;color:#919191;border:1px solid #c2c2c2;border-radius:6px;cursor:pointer;text-align:center}.pecb-htable__pagination-pages{display:flex;align-items:center}.pecb-htable__page-btn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:none;border-radius:4px;background:none;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;color:#616161;cursor:pointer;transition-property:background-color,color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-htable__page-btn:hover:not(:disabled):not(.pecb-htable__page-btn--active){background-color:#f4f4f4;color:#313131}.pecb-htable__page-btn--active{color:#a11e29}.pecb-htable__page-btn:disabled{color:#ececec;cursor:not-allowed}.pecb-htable__page-ellipsis{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;font-size:16px;font-weight:600;color:#616161}\n"] }]
|
|
5194
5259
|
}], propDecorators: { scrollbarTrack: [{
|
|
5195
5260
|
type: ViewChild,
|
|
5196
5261
|
args: ['scrollbarTrack']
|
|
@@ -5636,11 +5701,11 @@ class AffixComponent {
|
|
|
5636
5701
|
}), ...(ngDevMode ? [{ debugName: "bodyStyles" }] : []));
|
|
5637
5702
|
}
|
|
5638
5703
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AffixComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5639
|
-
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 }); }
|
|
5640
5705
|
}
|
|
5641
5706
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: AffixComponent, decorators: [{
|
|
5642
5707
|
type: Component,
|
|
5643
|
-
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"] }]
|
|
5644
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 }] }] } });
|
|
5645
5710
|
|
|
5646
5711
|
/** Default languages matching the Figma design */
|
|
@@ -8283,11 +8348,11 @@ class TourComponent {
|
|
|
8283
8348
|
}
|
|
8284
8349
|
}
|
|
8285
8350
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TourComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8286
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TourComponent, isStandalone: true, selector: "pecb-tour", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, indicatorType: { classPropertyName: "indicatorType", publicName: "indicatorType", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, initialStep: { classPropertyName: "initialStep", publicName: "initialStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", previousClicked: "previousClicked", nextClicked: "nextClicked", finished: "finished", stepChanged: "stepChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"isOpen() && currentStepData() as step\"\n [id]=\"id()\"\n class=\"pecb-tour\"\n [class.pecb-tour--dark]=\"type() === 'non-modal'\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"step.title\"\n>\n <!-- Content wrapper -->\n <div class=\"pecb-tour__content-wrapper\">\n <!-- Close + Image group (gap 6px) -->\n <div class=\"pecb-tour__header-group\">\n <button\n type=\"button\"\n class=\"pecb-tour__close\"\n [class.pecb-tour__close--dark]=\"type() === 'non-modal'\"\n aria-label=\"Close tour\"\n (click)=\"onClose()\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <!-- Image (optional) -->\n <div *ngIf=\"step.image\" class=\"pecb-tour__image-wrapper\">\n <img [src]=\"step.image\" [alt]=\"step.title\" class=\"pecb-tour__image\" />\n </div>\n </div>\n\n <!-- Text content -->\n <div class=\"pecb-tour__text\">\n <p class=\"pecb-tour__title\">{{ step.title }}</p>\n <p class=\"pecb-tour__description\">{{ step.description }}</p>\n </div>\n </div>\n\n <!-- Footer -->\n <div class=\"pecb-tour__footer\">\n <!-- Indicator -->\n <div class=\"pecb-tour__indicator\">\n <ng-container *ngIf=\"indicatorType() === 'slider'\">\n <span\n *ngFor=\"let s of steps(); let i = index\"\n class=\"pecb-tour__dot\"\n [class.pecb-tour__dot--active]=\"i === currentStep()\"\n (click)=\"goToStep(i)\"\n ></span>\n </ng-container>\n <span *ngIf=\"indicatorType() === 'number'\" class=\"pecb-tour__step-number\">\n {{ currentStep() + 1 }} / {{ totalSteps() }}\n </span>\n </div>\n\n <!-- Buttons -->\n <div class=\"pecb-tour__buttons\">\n <button\n *ngIf=\"!isFirstStep()\"\n type=\"button\"\n class=\"pecb-tour__btn pecb-tour__btn--secondary\"\n (click)=\"onPrevious()\"\n >\n {{ previousLabel() }}\n </button>\n <button\n type=\"button\"\n class=\"pecb-tour__btn pecb-tour__btn--primary\"\n [class.pecb-tour__btn--primary-dark]=\"type() === 'non-modal'\"\n (click)=\"onNext()\"\n >\n {{ isLastStep() ? finishLabel() : nextLabel() }}\n </button>\n </div>\n </div>\n\n <!-- Arrows: one SVG per direction, only the matching one is shown -->\n <ng-container [ngSwitch]=\"arrowDirection()\">\n\n <!-- Points DOWN (top placements) -->\n <svg *ngSwitchCase=\"'down'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"16\" height=\"8\" viewBox=\"0 0 16 8\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 0H16L9.41 7.17C8.63 7.95 7.37 7.95 6.59 7.17L0 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points UP (bottom placements) -->\n <svg *ngSwitchCase=\"'up'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"16\" height=\"8\" viewBox=\"0 0 16 8\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 8H16L9.41 0.83C8.63 0.05 7.37 0.05 6.59 0.83L0 8Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points LEFT (right placements) -->\n <svg *ngSwitchCase=\"'left'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 0V16L0.83 9.41C0.05 8.63 0.05 7.37 0.83 6.59L8 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points RIGHT (left placements) -->\n <svg *ngSwitchCase=\"'right'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 0V16L7.17 9.41C7.95 8.63 7.95 7.37 7.17 6.59L0 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n </ng-container>\n</div>\n", styles: [".pecb-tour{position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;width:438px;padding:16px;background-color:#fff;border-radius:6px;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.pecb-tour--dark{background-color:#313131;color:#fff}.pecb-tour--dark .pecb-tour__title,.pecb-tour--dark .pecb-tour__description{color:#fff}.pecb-tour--dark .pecb-tour__dot{background-color:#ffffff4d}.pecb-tour--dark .pecb-tour__dot--active{background-color:#fff}.pecb-tour--dark .pecb-tour__step-number{color:#ffffffa6}.pecb-tour__content-wrapper{display:flex;flex-direction:column;gap:16px;align-items:flex-end;width:100%}.pecb-tour__header-group{display:flex;flex-direction:column;gap:6px;align-items:flex-end;width:100%}.pecb-tour__close{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;cursor:pointer;padding:0;border-radius:6px;color:#616161;flex-shrink:0;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__close:hover{color:#313131}.pecb-tour__close--dark{color:#ffffff73}.pecb-tour__close--dark:hover{color:#fff}.pecb-tour__image-wrapper{width:100%}.pecb-tour__image{display:block;width:100%;height:120px;object-fit:cover;background-color:#ababab}.pecb-tour__text{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}.pecb-tour__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:700;line-height:normal;color:#212427;margin:0;width:100%}.pecb-tour__description{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#212427;margin:0;width:100%}.pecb-tour__footer{display:flex;align-items:center;justify-content:space-between;width:100%}.pecb-tour__indicator{display:flex;align-items:center;gap:6px}.pecb-tour__dot{width:6px;height:6px;border-radius:50%;background-color:#c2c2c2;cursor:pointer;flex-shrink:0;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__dot--active{background-color:#a11e29}.pecb-tour__step-number{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:normal;color:#919191}.pecb-tour__buttons{display:flex;align-items:flex-start;gap:8px}.pecb-tour__btn{display:flex;align-items:center;justify-content:center;height:24px;padding:0 8px;border-radius:4px;border:none;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;white-space:nowrap;overflow:hidden;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__btn:hover{opacity:.85}.pecb-tour__btn--primary{background-color:#212427;color:#fff}.pecb-tour__btn--primary-dark{background-color:#a11e29;color:#fff}.pecb-tour__btn--secondary{background-color:#fff;color:#212427;border:1px solid #c2c2c2}.pecb-tour__arrow{position:absolute;pointer-events:none;line-height:0;font-size:0}.pecb-tour__arrow--top{bottom:-8px;left:50%;transform:translate(-50%)}.pecb-tour__arrow--top-left{bottom:-8px;right:16px}.pecb-tour__arrow--top-right{bottom:-8px;left:16px}.pecb-tour__arrow--bottom{top:-8px;left:50%;transform:translate(-50%)}.pecb-tour__arrow--bottom-left{top:-8px;right:16px}.pecb-tour__arrow--bottom-right{top:-8px;left:16px}.pecb-tour__arrow--right{left:-8px;top:50%;transform:translateY(-50%)}.pecb-tour__arrow--right-top{left:-8px;top:16px}.pecb-tour__arrow--right-bottom{left:-8px;bottom:16px}.pecb-tour__arrow--left{right:-8px;top:50%;transform:translateY(-50%)}.pecb-tour__arrow--left-top{right:-8px;bottom:16px}.pecb-tour__arrow--left-bottom{right:-8px;top:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8351
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: TourComponent, isStandalone: true, selector: "pecb-tour", inputs: { id: { classPropertyName: "id", publicName: "id", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, indicatorType: { classPropertyName: "indicatorType", publicName: "indicatorType", isSignal: true, isRequired: false, transformFunction: null }, steps: { classPropertyName: "steps", publicName: "steps", isSignal: true, isRequired: false, transformFunction: null }, isOpen: { classPropertyName: "isOpen", publicName: "isOpen", isSignal: true, isRequired: false, transformFunction: null }, previousLabel: { classPropertyName: "previousLabel", publicName: "previousLabel", isSignal: true, isRequired: false, transformFunction: null }, nextLabel: { classPropertyName: "nextLabel", publicName: "nextLabel", isSignal: true, isRequired: false, transformFunction: null }, finishLabel: { classPropertyName: "finishLabel", publicName: "finishLabel", isSignal: true, isRequired: false, transformFunction: null }, initialStep: { classPropertyName: "initialStep", publicName: "initialStep", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { closed: "closed", previousClicked: "previousClicked", nextClicked: "nextClicked", finished: "finished", stepChanged: "stepChanged" }, usesOnChanges: true, ngImport: i0, template: "<div\n *ngIf=\"isOpen() && currentStepData() as step\"\n [id]=\"id()\"\n class=\"pecb-tour\"\n [class.pecb-tour--dark]=\"type() === 'non-modal'\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"step.title\"\n>\n <!-- Content wrapper -->\n <div class=\"pecb-tour__content-wrapper\">\n <ng-container *ngIf=\"step.image; else noImageTpl\">\n <!-- With image: close alone on top, image below -->\n <div class=\"pecb-tour__header-group\">\n <button\n type=\"button\"\n class=\"pecb-tour__close\"\n [class.pecb-tour__close--dark]=\"type() === 'non-modal'\"\n aria-label=\"Close tour\"\n (click)=\"onClose()\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"pecb-tour__image-wrapper\">\n <img [src]=\"step.image\" [alt]=\"step.title\" class=\"pecb-tour__image\" />\n </div>\n </div>\n\n <div class=\"pecb-tour__text\">\n <p class=\"pecb-tour__title\">{{ step.title }}</p>\n <p class=\"pecb-tour__description\">{{ step.description }}</p>\n </div>\n </ng-container>\n\n <!-- Without image: title + close on same row, description below -->\n <ng-template #noImageTpl>\n <div class=\"pecb-tour__title-row\">\n <p class=\"pecb-tour__title\">{{ step.title }}</p>\n <button\n type=\"button\"\n class=\"pecb-tour__close\"\n [class.pecb-tour__close--dark]=\"type() === 'non-modal'\"\n aria-label=\"Close tour\"\n (click)=\"onClose()\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <p class=\"pecb-tour__description\">{{ step.description }}</p>\n </ng-template>\n </div>\n\n <!-- Footer -->\n <div class=\"pecb-tour__footer\">\n <!-- Indicator -->\n <div class=\"pecb-tour__indicator\">\n <ng-container *ngIf=\"indicatorType() === 'slider'\">\n <span\n *ngFor=\"let s of steps(); let i = index\"\n class=\"pecb-tour__dot\"\n [class.pecb-tour__dot--active]=\"i === currentStep()\"\n (click)=\"goToStep(i)\"\n ></span>\n </ng-container>\n <span *ngIf=\"indicatorType() === 'number'\" class=\"pecb-tour__step-number\">\n {{ currentStep() + 1 }} / {{ totalSteps() }}\n </span>\n </div>\n\n <!-- Buttons -->\n <div class=\"pecb-tour__buttons\">\n <button\n *ngIf=\"!isFirstStep()\"\n type=\"button\"\n class=\"pecb-tour__btn pecb-tour__btn--secondary\"\n (click)=\"onPrevious()\"\n >\n {{ previousLabel() }}\n </button>\n <button\n type=\"button\"\n class=\"pecb-tour__btn pecb-tour__btn--primary\"\n [class.pecb-tour__btn--primary-dark]=\"type() === 'non-modal'\"\n (click)=\"onNext()\"\n >\n {{ isLastStep() ? finishLabel() : nextLabel() }}\n </button>\n </div>\n </div>\n\n <!-- Arrows: one SVG per direction, only the matching one is shown -->\n <ng-container [ngSwitch]=\"arrowDirection()\">\n\n <!-- Points DOWN (top placements) -->\n <svg *ngSwitchCase=\"'down'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"16\" height=\"8\" viewBox=\"0 0 16 8\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 0H16L9.41 7.17C8.63 7.95 7.37 7.95 6.59 7.17L0 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points UP (bottom placements) -->\n <svg *ngSwitchCase=\"'up'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"16\" height=\"8\" viewBox=\"0 0 16 8\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 8H16L9.41 0.83C8.63 0.05 7.37 0.05 6.59 0.83L0 8Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points LEFT (right placements) -->\n <svg *ngSwitchCase=\"'left'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 0V16L0.83 9.41C0.05 8.63 0.05 7.37 0.83 6.59L8 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points RIGHT (left placements) -->\n <svg *ngSwitchCase=\"'right'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 0V16L7.17 9.41C7.95 8.63 7.95 7.37 7.17 6.59L0 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n </ng-container>\n</div>\n", styles: [".pecb-tour{position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;width:438px;padding:16px;background-color:#fff;border-radius:6px;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.pecb-tour--dark{background-color:#313131;color:#fff}.pecb-tour--dark .pecb-tour__title,.pecb-tour--dark .pecb-tour__description{color:#fff}.pecb-tour--dark .pecb-tour__dot{background-color:#ffffff4d}.pecb-tour--dark .pecb-tour__dot--active{background-color:#fff}.pecb-tour--dark .pecb-tour__step-number{color:#ffffffa6}.pecb-tour__content-wrapper{display:flex;flex-direction:column;gap:16px;align-items:stretch;width:100%}.pecb-tour__header-group{display:flex;flex-direction:column;gap:6px;align-items:flex-end;width:100%}.pecb-tour__title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.pecb-tour__close{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;cursor:pointer;padding:0;border-radius:6px;color:#616161;flex-shrink:0;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__close:hover{color:#313131}.pecb-tour__close--dark{color:#ffffff73}.pecb-tour__close--dark:hover{color:#fff}.pecb-tour__image-wrapper{width:100%}.pecb-tour__image{display:block;width:100%;height:120px;object-fit:cover;background-color:#ababab}.pecb-tour__text{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}.pecb-tour__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:700;line-height:normal;color:#212427;margin:0;width:100%}.pecb-tour__description{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#212427;margin:0;width:100%}.pecb-tour__footer{display:flex;align-items:center;justify-content:space-between;width:100%}.pecb-tour__indicator{display:flex;align-items:center;gap:6px}.pecb-tour__dot{width:6px;height:6px;border-radius:50%;background-color:#c2c2c2;cursor:pointer;flex-shrink:0;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__dot--active{background-color:#a11e29}.pecb-tour__step-number{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:normal;color:#919191}.pecb-tour__buttons{display:flex;align-items:flex-start;gap:8px}.pecb-tour__btn{display:flex;align-items:center;justify-content:center;height:24px;padding:0 8px;border-radius:4px;border:none;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;white-space:nowrap;overflow:hidden;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__btn:hover{opacity:.85}.pecb-tour__btn--primary{background-color:#212427;color:#fff}.pecb-tour__btn--primary-dark{background-color:#a11e29;color:#fff}.pecb-tour__btn--secondary{background-color:#fff;color:#212427;border:1px solid #c2c2c2}.pecb-tour__arrow{position:absolute;pointer-events:none;line-height:0;font-size:0}.pecb-tour__arrow--top{bottom:-8px;left:50%;transform:translate(-50%)}.pecb-tour__arrow--top-left{bottom:-8px;right:16px}.pecb-tour__arrow--top-right{bottom:-8px;left:16px}.pecb-tour__arrow--bottom{top:-8px;left:50%;transform:translate(-50%)}.pecb-tour__arrow--bottom-left{top:-8px;right:16px}.pecb-tour__arrow--bottom-right{top:-8px;left:16px}.pecb-tour__arrow--right{left:-8px;top:50%;transform:translateY(-50%)}.pecb-tour__arrow--right-top{left:-8px;top:16px}.pecb-tour__arrow--right-bottom{left:-8px;bottom:16px}.pecb-tour__arrow--left{right:-8px;top:50%;transform:translateY(-50%)}.pecb-tour__arrow--left-top{right:-8px;bottom:16px}.pecb-tour__arrow--left-bottom{right:-8px;top:16px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
8287
8352
|
}
|
|
8288
8353
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TourComponent, decorators: [{
|
|
8289
8354
|
type: Component,
|
|
8290
|
-
args: [{ selector: 'pecb-tour', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isOpen() && currentStepData() as step\"\n [id]=\"id()\"\n class=\"pecb-tour\"\n [class.pecb-tour--dark]=\"type() === 'non-modal'\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"step.title\"\n>\n <!-- Content wrapper -->\n <div class=\"pecb-tour__content-wrapper\">\n <!--
|
|
8355
|
+
args: [{ selector: 'pecb-tour', imports: [CommonModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div\n *ngIf=\"isOpen() && currentStepData() as step\"\n [id]=\"id()\"\n class=\"pecb-tour\"\n [class.pecb-tour--dark]=\"type() === 'non-modal'\"\n role=\"dialog\"\n aria-modal=\"false\"\n [attr.aria-label]=\"step.title\"\n>\n <!-- Content wrapper -->\n <div class=\"pecb-tour__content-wrapper\">\n <ng-container *ngIf=\"step.image; else noImageTpl\">\n <!-- With image: close alone on top, image below -->\n <div class=\"pecb-tour__header-group\">\n <button\n type=\"button\"\n class=\"pecb-tour__close\"\n [class.pecb-tour__close--dark]=\"type() === 'non-modal'\"\n aria-label=\"Close tour\"\n (click)=\"onClose()\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n\n <div class=\"pecb-tour__image-wrapper\">\n <img [src]=\"step.image\" [alt]=\"step.title\" class=\"pecb-tour__image\" />\n </div>\n </div>\n\n <div class=\"pecb-tour__text\">\n <p class=\"pecb-tour__title\">{{ step.title }}</p>\n <p class=\"pecb-tour__description\">{{ step.description }}</p>\n </div>\n </ng-container>\n\n <!-- Without image: title + close on same row, description below -->\n <ng-template #noImageTpl>\n <div class=\"pecb-tour__title-row\">\n <p class=\"pecb-tour__title\">{{ step.title }}</p>\n <button\n type=\"button\"\n class=\"pecb-tour__close\"\n [class.pecb-tour__close--dark]=\"type() === 'non-modal'\"\n aria-label=\"Close tour\"\n (click)=\"onClose()\"\n >\n <svg width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg>\n </button>\n </div>\n\n <p class=\"pecb-tour__description\">{{ step.description }}</p>\n </ng-template>\n </div>\n\n <!-- Footer -->\n <div class=\"pecb-tour__footer\">\n <!-- Indicator -->\n <div class=\"pecb-tour__indicator\">\n <ng-container *ngIf=\"indicatorType() === 'slider'\">\n <span\n *ngFor=\"let s of steps(); let i = index\"\n class=\"pecb-tour__dot\"\n [class.pecb-tour__dot--active]=\"i === currentStep()\"\n (click)=\"goToStep(i)\"\n ></span>\n </ng-container>\n <span *ngIf=\"indicatorType() === 'number'\" class=\"pecb-tour__step-number\">\n {{ currentStep() + 1 }} / {{ totalSteps() }}\n </span>\n </div>\n\n <!-- Buttons -->\n <div class=\"pecb-tour__buttons\">\n <button\n *ngIf=\"!isFirstStep()\"\n type=\"button\"\n class=\"pecb-tour__btn pecb-tour__btn--secondary\"\n (click)=\"onPrevious()\"\n >\n {{ previousLabel() }}\n </button>\n <button\n type=\"button\"\n class=\"pecb-tour__btn pecb-tour__btn--primary\"\n [class.pecb-tour__btn--primary-dark]=\"type() === 'non-modal'\"\n (click)=\"onNext()\"\n >\n {{ isLastStep() ? finishLabel() : nextLabel() }}\n </button>\n </div>\n </div>\n\n <!-- Arrows: one SVG per direction, only the matching one is shown -->\n <ng-container [ngSwitch]=\"arrowDirection()\">\n\n <!-- Points DOWN (top placements) -->\n <svg *ngSwitchCase=\"'down'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"16\" height=\"8\" viewBox=\"0 0 16 8\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 0H16L9.41 7.17C8.63 7.95 7.37 7.95 6.59 7.17L0 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points UP (bottom placements) -->\n <svg *ngSwitchCase=\"'up'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"16\" height=\"8\" viewBox=\"0 0 16 8\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 8H16L9.41 0.83C8.63 0.05 7.37 0.05 6.59 0.83L0 8Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points LEFT (right placements) -->\n <svg *ngSwitchCase=\"'left'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M8 0V16L0.83 9.41C0.05 8.63 0.05 7.37 0.83 6.59L8 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n <!-- Points RIGHT (left placements) -->\n <svg *ngSwitchCase=\"'right'\" class=\"pecb-tour__arrow\" [ngClass]=\"arrowClass()\"\n width=\"8\" height=\"16\" viewBox=\"0 0 8 16\" xmlns=\"http://www.w3.org/2000/svg\" aria-hidden=\"true\">\n <path d=\"M0 0V16L7.17 9.41C7.95 8.63 7.95 7.37 7.17 6.59L0 0Z\" [attr.fill]=\"type() === 'non-modal' ? '#313131' : 'white'\"/>\n </svg>\n\n </ng-container>\n</div>\n", styles: [".pecb-tour{position:relative;display:flex;flex-direction:column;gap:8px;align-items:center;width:438px;padding:16px;background-color:#fff;border-radius:6px;box-shadow:0 6px 16px #00000014,0 3px 6px -4px #0000001f,0 9px 28px 8px #0000000d}.pecb-tour--dark{background-color:#313131;color:#fff}.pecb-tour--dark .pecb-tour__title,.pecb-tour--dark .pecb-tour__description{color:#fff}.pecb-tour--dark .pecb-tour__dot{background-color:#ffffff4d}.pecb-tour--dark .pecb-tour__dot--active{background-color:#fff}.pecb-tour--dark .pecb-tour__step-number{color:#ffffffa6}.pecb-tour__content-wrapper{display:flex;flex-direction:column;gap:16px;align-items:stretch;width:100%}.pecb-tour__header-group{display:flex;flex-direction:column;gap:6px;align-items:flex-end;width:100%}.pecb-tour__title-row{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%}.pecb-tour__close{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:transparent;cursor:pointer;padding:0;border-radius:6px;color:#616161;flex-shrink:0;transition-property:color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__close:hover{color:#313131}.pecb-tour__close--dark{color:#ffffff73}.pecb-tour__close--dark:hover{color:#fff}.pecb-tour__image-wrapper{width:100%}.pecb-tour__image{display:block;width:100%;height:120px;object-fit:cover;background-color:#ababab}.pecb-tour__text{display:flex;flex-direction:column;gap:8px;align-items:flex-start;width:100%}.pecb-tour__title{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:700;line-height:normal;color:#212427;margin:0;width:100%}.pecb-tour__description{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:1.5;color:#212427;margin:0;width:100%}.pecb-tour__footer{display:flex;align-items:center;justify-content:space-between;width:100%}.pecb-tour__indicator{display:flex;align-items:center;gap:6px}.pecb-tour__dot{width:6px;height:6px;border-radius:50%;background-color:#c2c2c2;cursor:pointer;flex-shrink:0;transition-property:background-color;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__dot--active{background-color:#a11e29}.pecb-tour__step-number{font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;font-weight:400;line-height:normal;color:#919191}.pecb-tour__buttons{display:flex;align-items:flex-start;gap:8px}.pecb-tour__btn{display:flex;align-items:center;justify-content:center;height:24px;padding:0 8px;border-radius:4px;border:none;cursor:pointer;font-family:Plus Jakarta Sans,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:13px;font-weight:500;line-height:normal;white-space:nowrap;overflow:hidden;transition-property:opacity;transition-duration:.25s ease-in-out;transition-timing-function:ease-in-out}.pecb-tour__btn:hover{opacity:.85}.pecb-tour__btn--primary{background-color:#212427;color:#fff}.pecb-tour__btn--primary-dark{background-color:#a11e29;color:#fff}.pecb-tour__btn--secondary{background-color:#fff;color:#212427;border:1px solid #c2c2c2}.pecb-tour__arrow{position:absolute;pointer-events:none;line-height:0;font-size:0}.pecb-tour__arrow--top{bottom:-8px;left:50%;transform:translate(-50%)}.pecb-tour__arrow--top-left{bottom:-8px;right:16px}.pecb-tour__arrow--top-right{bottom:-8px;left:16px}.pecb-tour__arrow--bottom{top:-8px;left:50%;transform:translate(-50%)}.pecb-tour__arrow--bottom-left{top:-8px;right:16px}.pecb-tour__arrow--bottom-right{top:-8px;left:16px}.pecb-tour__arrow--right{left:-8px;top:50%;transform:translateY(-50%)}.pecb-tour__arrow--right-top{left:-8px;top:16px}.pecb-tour__arrow--right-bottom{left:-8px;bottom:16px}.pecb-tour__arrow--left{right:-8px;top:50%;transform:translateY(-50%)}.pecb-tour__arrow--left-top{right:-8px;bottom:16px}.pecb-tour__arrow--left-bottom{right:-8px;top:16px}\n"] }]
|
|
8291
8356
|
}], propDecorators: { id: [{ type: i0.Input, args: [{ isSignal: true, alias: "id", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placement: [{ type: i0.Input, args: [{ isSignal: true, alias: "placement", required: false }] }], indicatorType: [{ type: i0.Input, args: [{ isSignal: true, alias: "indicatorType", required: false }] }], steps: [{ type: i0.Input, args: [{ isSignal: true, alias: "steps", required: false }] }], isOpen: [{ type: i0.Input, args: [{ isSignal: true, alias: "isOpen", required: false }] }], previousLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "previousLabel", required: false }] }], nextLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "nextLabel", required: false }] }], finishLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "finishLabel", required: false }] }], initialStep: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialStep", required: false }] }], closed: [{ type: i0.Output, args: ["closed"] }], previousClicked: [{ type: i0.Output, args: ["previousClicked"] }], nextClicked: [{ type: i0.Output, args: ["nextClicked"] }], finished: [{ type: i0.Output, args: ["finished"] }], stepChanged: [{ type: i0.Output, args: ["stepChanged"] }] } });
|
|
8292
8357
|
|
|
8293
8358
|
const COMPONENTS = [
|