@pecb-ui/components 1.1.3 → 1.1.4
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.
|
@@ -5136,6 +5136,12 @@ class HierarchicalTableComponent {
|
|
|
5136
5136
|
this.scrollThumbPosition = signal(0, ...(ngDevMode ? [{ debugName: "scrollThumbPosition" }] : []));
|
|
5137
5137
|
this.tableWrapper = null;
|
|
5138
5138
|
this.scrollListener = null;
|
|
5139
|
+
// Drag state
|
|
5140
|
+
this.isDragging = false;
|
|
5141
|
+
this.dragStartX = 0;
|
|
5142
|
+
this.dragStartScrollLeft = 0;
|
|
5143
|
+
this.dragMoveListener = null;
|
|
5144
|
+
this.dragEndListener = null;
|
|
5139
5145
|
}
|
|
5140
5146
|
getCellValue(row, key) {
|
|
5141
5147
|
return key.split('.').reduce((obj, k) => obj?.[k], row);
|
|
@@ -5162,15 +5168,55 @@ class HierarchicalTableComponent {
|
|
|
5162
5168
|
if (this.tableWrapper && this.scrollListener) {
|
|
5163
5169
|
this.tableWrapper.removeEventListener('scroll', this.scrollListener);
|
|
5164
5170
|
}
|
|
5171
|
+
this.removeDragListeners();
|
|
5165
5172
|
}
|
|
5166
5173
|
onScrollbarMouseDown(event) {
|
|
5167
5174
|
if (!this.tableWrapper)
|
|
5168
5175
|
return;
|
|
5176
|
+
const target = event.target;
|
|
5169
5177
|
const track = event.currentTarget;
|
|
5170
|
-
|
|
5171
|
-
|
|
5178
|
+
if (target.classList.contains('pecb-htable__scrollbar-thumb')) {
|
|
5179
|
+
// Thumb drag — record start position and attach document-level listeners
|
|
5180
|
+
this.isDragging = true;
|
|
5181
|
+
this.dragStartX = event.clientX;
|
|
5182
|
+
this.dragStartScrollLeft = this.tableWrapper.scrollLeft;
|
|
5183
|
+
event.preventDefault();
|
|
5184
|
+
this.dragMoveListener = (e) => this.onDragMove(e, track);
|
|
5185
|
+
this.dragEndListener = () => this.onDragEnd();
|
|
5186
|
+
document.addEventListener('mousemove', this.dragMoveListener);
|
|
5187
|
+
document.addEventListener('mouseup', this.dragEndListener);
|
|
5188
|
+
}
|
|
5189
|
+
else {
|
|
5190
|
+
// Track click — jump scroll to clicked position
|
|
5191
|
+
const rect = track.getBoundingClientRect();
|
|
5192
|
+
const clickPercent = (event.clientX - rect.left) / rect.width;
|
|
5193
|
+
const maxScroll = this.tableWrapper.scrollWidth - this.tableWrapper.clientWidth;
|
|
5194
|
+
this.tableWrapper.scrollLeft = clickPercent * maxScroll;
|
|
5195
|
+
}
|
|
5196
|
+
}
|
|
5197
|
+
onDragMove(event, track) {
|
|
5198
|
+
if (!this.isDragging || !this.tableWrapper)
|
|
5199
|
+
return;
|
|
5172
5200
|
const maxScroll = this.tableWrapper.scrollWidth - this.tableWrapper.clientWidth;
|
|
5173
|
-
|
|
5201
|
+
const trackWidth = track.clientWidth;
|
|
5202
|
+
const thumbWidthPx = (this.tableWrapper.clientWidth / this.tableWrapper.scrollWidth) * trackWidth;
|
|
5203
|
+
const delta = event.clientX - this.dragStartX;
|
|
5204
|
+
const scrollDelta = (delta / (trackWidth - thumbWidthPx)) * maxScroll;
|
|
5205
|
+
this.tableWrapper.scrollLeft = Math.max(0, Math.min(maxScroll, this.dragStartScrollLeft + scrollDelta));
|
|
5206
|
+
}
|
|
5207
|
+
onDragEnd() {
|
|
5208
|
+
this.isDragging = false;
|
|
5209
|
+
this.removeDragListeners();
|
|
5210
|
+
}
|
|
5211
|
+
removeDragListeners() {
|
|
5212
|
+
if (this.dragMoveListener) {
|
|
5213
|
+
document.removeEventListener('mousemove', this.dragMoveListener);
|
|
5214
|
+
this.dragMoveListener = null;
|
|
5215
|
+
}
|
|
5216
|
+
if (this.dragEndListener) {
|
|
5217
|
+
document.removeEventListener('mouseup', this.dragEndListener);
|
|
5218
|
+
this.dragEndListener = null;
|
|
5219
|
+
}
|
|
5174
5220
|
}
|
|
5175
5221
|
updateScrollbar() {
|
|
5176
5222
|
if (!this.tableWrapper)
|
|
@@ -5186,11 +5232,11 @@ class HierarchicalTableComponent {
|
|
|
5186
5232
|
}
|
|
5187
5233
|
}
|
|
5188
5234
|
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 }); }
|
|
5235
|
+
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
5236
|
}
|
|
5191
5237
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: HierarchicalTableComponent, decorators: [{
|
|
5192
5238
|
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"] }]
|
|
5239
|
+
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
5240
|
}], propDecorators: { scrollbarTrack: [{
|
|
5195
5241
|
type: ViewChild,
|
|
5196
5242
|
args: ['scrollbarTrack']
|
|
@@ -8283,11 +8329,11 @@ class TourComponent {
|
|
|
8283
8329
|
}
|
|
8284
8330
|
}
|
|
8285
8331
|
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 }); }
|
|
8332
|
+
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
8333
|
}
|
|
8288
8334
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TourComponent, decorators: [{
|
|
8289
8335
|
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 <!--
|
|
8336
|
+
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
8337
|
}], 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
8338
|
|
|
8293
8339
|
const COMPONENTS = [
|