ng-fusion-ui 0.6.25 → 0.6.26

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.
@@ -5,7 +5,7 @@ import * as i4 from '@angular/forms';
5
5
  import { FormsModule } from '@angular/forms';
6
6
  import * as i1 from '@angular/platform-browser';
7
7
  import * as i3 from '@angular/common';
8
- import { CommonModule } from '@angular/common';
8
+ import { CommonModule, NgTemplateOutlet } from '@angular/common';
9
9
  import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
10
10
 
11
11
  class DataSortingService {
@@ -131,10 +131,11 @@ const link = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path
131
131
  const certificate = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M128 136a8 8 0 0 1-8 8H72a8 8 0 0 1 0-16h48a8 8 0 0 1 8 8m-8-40H72a8 8 0 0 0 0 16h48a8 8 0 0 0 0-16m112 65.47V224a8 8 0 0 1-12 7l-24-13.74L172 231a8 8 0 0 1-12-7v-24H40a16 16 0 0 1-16-16V56a16 16 0 0 1 16-16h176a16 16 0 0 1 16 16v30.53a51.88 51.88 0 0 1 0 74.94M160 184v-22.53A52 52 0 0 1 216 76V56H40v128Zm56-12a51.88 51.88 0 0 1-40 0v38.22l16-9.16a8 8 0 0 1 7.94 0l16 9.16Zm16-48a36 36 0 1 0-36 36a36 36 0 0 0 36-36" /></svg>`;
132
132
  const elevator = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="m7 2l4 4H8v4H6V6H3zm10 8l-4-4h3V2h2v4h3zM7 12h10a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2m0 2v6h10v-6z" /></svg>`;
133
133
  const report = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)"><path stroke-linecap="round" stroke-linejoin="round" d="M10 9H6m9.5 2a2.5 2.5 0 1 1 0-5a2.5 2.5 0 0 1 0 5M6 6h3m9 12l-4.5-3l-2.5 2l-5-4" /><path d="M3 20.4V3.6a.6.6 0 0 1 .6-.6h16.8a.6.6 0 0 1 .6.6v16.8a.6.6 0 0 1-.6.6H3.6a.6.6 0 0 1-.6-.6Z" /></g></svg>`;
134
- // export const templateEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M5 3c-1.11 0-2 .89-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7h-2v7H5V5h7V3zm12.78 1a.7.7 0 0 0-.48.2l-1.22 1.21l2.5 2.5L19.8 6.7c.26-.26.26-.7 0-.95L18.25 4.2c-.13-.13-.3-.2-.47-.2m-2.41 2.12L8 13.5V16h2.5l7.37-7.38z" /></svg>`;
135
- // export const draftEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" d="M4 6H2v14a2 2 0 0 0 2 2h14v-2H4zm14.7 1.35l-1 1l-2.05-2.05l1-1c.21-.22.56-.22.77 0l1.28 1.28c.22.21.22.56 0 .77M9 12.94l6.06-6.06l2.06 2.06L11.06 15H9zM20 4v12H8V4zm0-2H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2" /></svg>`;
136
134
  const templateEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 2)" fill-rule="evenodd" d="M10.944 1.25h2.112c1.838 0 3.294 0 4.433.153c1.172.158 2.121.49 2.87 1.238a.75.75 0 0 1-1.06 1.06c-.424-.422-1.004-.676-2.01-.811c-1.027-.138-2.382-.14-4.289-.14h-2c-1.907 0-3.261.002-4.29.14c-1.005.135-1.585.389-2.008.812S4.025 4.705 3.89 5.71c-.138 1.029-.14 2.383-.14 4.29v4c0 1.907.002 3.262.14 4.29c.135 1.005.389 1.585.812 2.008s1.003.677 2.009.812c1.028.138 2.382.14 4.289.14h2c1.907 0 3.262-.002 4.29-.14c1.005-.135 1.585-.389 2.008-.812c.696-.696.907-1.777.943-4.309a.75.75 0 0 1 1.5.022c-.035 2.427-.192 4.158-1.382 5.348c-.749.748-1.698 1.08-2.87 1.238c-1.14.153-2.595.153-4.433.153h-2.112c-1.838 0-3.294 0-4.433-.153c-1.172-.158-2.121-.49-2.87-1.238c-.748-.749-1.08-1.698-1.238-2.87c-.153-1.14-.153-2.595-.153-4.433V9.944c0-1.838 0-3.294.153-4.433c.158-1.172.49-2.121 1.238-2.87c.749-.748 1.698-1.08 2.87-1.238c1.14-.153 2.595-.153 4.433-.153m7.17 5.796a2.716 2.716 0 1 1 3.84 3.84L17.2 15.643a7 7 0 0 1-.63.587q-.346.27-.744.46c-.224.107-.46.185-.806.3l-2.084.695a1.28 1.28 0 0 1-1.62-1.62l.681-2.04l.014-.043c.116-.347.194-.582.301-.806a4 4 0 0 1 .46-.744c.153-.196.328-.371.587-.63l.031-.031zm2.78 1.06a1.216 1.216 0 0 0-1.72 0l-.182.182l.034.107c.094.27.273.63.611.968a2.55 2.55 0 0 0 1.075.645l.182-.182a1.216 1.216 0 0 0 0-1.72m-1.328 3.048a4 4 0 0 1-.99-.73a4 4 0 0 1-.73-.99L14.45 12.83c-.301.301-.407.409-.496.523q-.17.218-.289.467c-.062.131-.111.274-.246.678l-.4 1.2l.283.283l1.2-.4c.404-.135.547-.184.678-.246q.248-.12.467-.289c.114-.089.222-.195.523-.496zM7.25 9A.75.75 0 0 1 8 8.25h6.5a.75.75 0 0 1 0 1.5H8A.75.75 0 0 1 7.25 9m0 4a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75m0 4a.75.75 0 0 1 .75-.75h1.5a.75.75 0 0 1 0 1.5H8a.75.75 0 0 1-.75-.75" clip-rule="evenodd" /></svg>`;
137
135
  const draftEdit = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" ><path d="m18.18 8.04l.463-.464a1.966 1.966 0 1 1 2.781 2.78l-.463.464M18.18 8.04s.058.984.927 1.853s1.854.927 1.854.927M18.18 8.04l-4.26 4.26c-.29.288-.434.433-.558.592q-.22.282-.374.606c-.087.182-.151.375-.28.762l-.413 1.24l-.134.401m8.8-5.081l-4.26 4.26c-.29.29-.434.434-.593.558q-.282.22-.606.374c-.182.087-.375.151-.762.28l-1.24.413l-.401.134m0 0l-.401.134a.53.53 0 0 1-.67-.67l.133-.402m.938.938l-.938-.938" /><path stroke-linecap="round" d="M8 13h2.5M8 9h6.5M8 17h1.5M3 14v-4c0-3.771 0-5.657 1.172-6.828S7.229 2 11 2h2c3.771 0 5.657 0 6.828 1.172M21 14c0 3.771 0 5.657-1.172 6.828m-15.656 0C5.343 22 7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172m0 0c.944-.943 1.127-2.348 1.163-4.828" /></g></svg>`;
136
+ const widgets = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" d="M16.65 13L11 7.35l5.65-5.65l5.65 5.65zM3 11V3h8v8zm10 10v-8h8v8zM3 21v-8h8v8z" /></svg>`;
137
+ const starOutline = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" d="m8.85 16.825l3.15-1.9l3.15 1.925l-.825-3.6l2.775-2.4l-3.65-.325l-1.45-3.4l-1.45 3.375l-3.65.325l2.775 2.425zM5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275zM12 12.25" /></svg>`;
138
+ const starSolid = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" style="stroke-width:var(--fu-icon-stroke-width, 1.5)" d="m5.825 21l1.625-7.025L2 9.25l7.2-.625L12 2l2.8 6.625l7.2.625l-5.45 4.725L18.175 21L12 17.275z" /></svg>`;
138
139
 
139
140
  class IconRegistryService {
140
141
  constructor(sanitizer) {
@@ -180,6 +181,9 @@ class IconRegistryService {
180
181
  this.registerIcon('elevator', elevator);
181
182
  this.registerIcon('templateEdit', templateEdit);
182
183
  this.registerIcon('draftEdit', draftEdit);
184
+ this.registerIcon('widgets', widgets);
185
+ this.registerIcon('starOutline', starOutline);
186
+ this.registerIcon('starSolid', starSolid);
183
187
  }
184
188
  registerIcon(name, svg) {
185
189
  const safeSvg = this.sanitizer.bypassSecurityTrustHtml(svg);
@@ -1608,7 +1612,7 @@ class TbodyCellComponent {
1608
1612
  return children.indexOf(element);
1609
1613
  }
1610
1614
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1611
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyCellComponent, isStandalone: true, selector: "fu-tbody-cell", inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, editKey: { classPropertyName: "editKey", publicName: "editKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"cell\"", "class.sorting": "sortCell()", "class.loading": "isLoading()" } }, ngImport: i0, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (this.cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1615
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TbodyCellComponent, isStandalone: true, selector: "fu-tbody-cell", inputs: { cellValue: { classPropertyName: "cellValue", publicName: "cellValue", isSignal: true, isRequired: false, transformFunction: null }, editKey: { classPropertyName: "editKey", publicName: "editKey", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.role": "\"cell\"", "class.sorting": "sortCell()", "class.loading": "isLoading()" } }, ngImport: i0, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1612
1616
  }
1613
1617
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TbodyCellComponent, decorators: [{
1614
1618
  type: Component,
@@ -1616,7 +1620,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
1616
1620
  '[attr.role]': '"cell"',
1617
1621
  '[class.sorting]': 'sortCell()',
1618
1622
  '[class.loading]': 'isLoading()',
1619
- }, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (this.cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (this.cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"] }]
1623
+ }, template: "<div>\r\n <span class=\"fu-header-text\">{{ headerText() }}</span>\r\n\r\n @if ((isLoading() && savingIndex() < 0) || savingIndex() === rowIndex()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n @if (cellValue() !== undefined) {\r\n @if (isEditing()) {\r\n @switch (cellValueType()) {\r\n @case ('string') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('number') {\r\n <input\r\n class=\"fu-edit\"\r\n #editInput\r\n type=\"number\"\r\n [value]=\"cellValue()\"\r\n (input)=\"onInputChange(editInput.value)\"\r\n (click)=\"$event.stopPropagation()\"\r\n />\r\n }\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper\" [class.editing]=\"isEditing()\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n #editInput\r\n [id]=\"cellIndex()\"\r\n [checked]=\"cellValue()\"\r\n (change)=\"onInputChange(editInput.checked)\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label [for]=\"cellIndex()\"></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n }\r\n } @else {\r\n @switch (cellValueType()) {\r\n @case ('boolean') {\r\n <div class=\"fu-checkbox-wrapper fu-checkbox-disabled\">\r\n <input\r\n type=\"checkbox\"\r\n class=\"fu-input-checkbox\"\r\n disabled\r\n [checked]=\"cellValue()\"\r\n />\r\n <svg><use xlink:href=\"#fu-checkmark\" /></svg>\r\n <label></label>\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" style=\"display: none\">\r\n <symbol id=\"fu-checkmark\" viewBox=\"0 0 24 24\">\r\n <path\r\n stroke-linecap=\"round\"\r\n stroke-miterlimit=\"10\"\r\n fill=\"none\"\r\n d=\"M22.9 3.7l-15.2 16.6-6.6-7.1\"\r\n ></path>\r\n </symbol>\r\n </svg>\r\n </div>\r\n }\r\n @default {\r\n <span class=\"fu-cell-text\" [innerHTML]=\"highLightedText()\"></span>\r\n }\r\n }\r\n }\r\n } @else {\r\n <span class=\"fu-cell-text\" [style.display]=\"'flex'\"> <ng-content /></span>\r\n }\r\n }\r\n</div>\r\n", styles: ["fu-tbody-cell{display:table-cell;text-align:left;vertical-align:middle;height:40px;border-bottom:1px solid var(--fu-table-border-color)}fu-tbody-cell.loading{pointer-events:none}fu-tbody-cell.sorting{background-color:var(--fu-table-sort-bg-color)}fu-tbody-cell>div{padding:0 8px}fu-tbody-cell input{width:100%;padding:4px 3px;background-color:inherit;color:inherit;border:1px solid var(--fu-table-text-color);border-radius:2px;background-color:var(--fu-table-edit-input-bg-color)}fu-tbody-cell .fu-edit{margin-left:-4px}@media (max-width: 900px){fu-tbody-cell .fu-edit{margin-left:0}}fu-tbody-cell input:focus{outline:1px solid var(--fu-table-text-color)}fu-tbody-cell .fu-cell-text{display:block;overflow:hidden;text-overflow:ellipsis}@media (max-width: 900px){fu-tbody-cell .fu-cell-text{margin-left:4px}fu-tbody-cell .fu-cell-text .fu-edit{margin-left:0}}fu-tbody-cell .fu-cell-text:has(svg){margin-left:2px}fu-tbody-cell .fu-header-text{display:none}@media (max-width: 900px){fu-tbody-cell{display:block;min-height:40px;height:auto;align-content:center}fu-tbody-cell div{display:grid;grid-template-columns:40% 1fr}fu-tbody-cell .fu-header-text{font-weight:700;text-transform:capitalize;display:flex;align-items:center;margin-right:12px}}.fu-skeleton-loader{display:block;height:16px;background:var(--fu-table-skeleton-color);position:relative;overflow:hidden;border-radius:4px;animation:fade 1.5s infinite ease-in-out}@media (max-width: 900px){.fu-skeleton-loader{height:20px;margin:3.6px 0}}@keyframes fade{0%,to{opacity:.5}50%{opacity:1}}.fu-highlight{background-color:var(--fu-table-highlight-bg-color);color:var(--fu-table-highlight-color);font-weight:700}.fu-checkbox-wrapper{--size: 24px;position:relative}.fu-checkbox-wrapper *,.fu-checkbox-wrapper *:before,.fu-checkbox-wrapper *:after{box-sizing:border-box}.fu-checkbox-wrapper .fu-input-checkbox{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.fu-checkbox-wrapper input:checked~svg{height:calc(var(--size) * .6)}.fu-checkbox-wrapper label:active:after{background-color:var(--fu-table-edit-input-bg-color)}.fu-checkbox-wrapper label{color:var(--fu-table-text-color);line-height:var(--size);cursor:pointer;position:relative}.fu-checkbox-wrapper label:after{content:\"\";height:var(--size);width:var(--size);margin-right:8px;float:left;border:1.5px solid var(--fu-table-border-color);border-radius:3px;transition:.15s all ease-out}.fu-checkbox-wrapper.editing label:after{border-color:var(--fu-table-text-color)}.fu-checkbox-wrapper svg{stroke:var(--fu-table-text-color);stroke-width:3px;height:0;width:calc(var(--size) * .6);position:absolute;left:calc(var(--size) * .21);top:calc(var(--size) * .2);stroke-dasharray:33}.fu-checkbox-disabled{pointer-events:none}@-webkit-keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}@keyframes draw-checkbox-28{0%{stroke-dashoffset:33}to{stroke-dashoffset:0}}\n"] }]
1620
1624
  }] });
1621
1625
 
1622
1626
  class PopupTemplateDirective {
@@ -1703,6 +1707,7 @@ class TableComponent {
1703
1707
  this.serverPagination = input(false);
1704
1708
  this.stripedRows = input(true);
1705
1709
  this.expandable = input(false);
1710
+ this.expanded = input(false);
1706
1711
  this.showFilter = input(false);
1707
1712
  this.showPaginator = input(true);
1708
1713
  this.quickPageJump = input(true);
@@ -1909,12 +1914,12 @@ class TableComponent {
1909
1914
  this.hoveredRow.set(null);
1910
1915
  }
1911
1916
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
1912
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, serverPagination: { classPropertyName: "serverPagination", publicName: "serverPagination", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, popupOffset: { classPropertyName: "popupOffset", publicName: "popupOffset", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, setsFirstPage$: { classPropertyName: "setsFirstPage$", publicName: "setsFirstPage$", isSignal: true, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandIndex: "expandIndexChange", tableActions: "tableActions", selectRowAction: "selectRowAction" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
1917
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TableComponent, isStandalone: true, selector: "fu-table", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, localStorageKey: { classPropertyName: "localStorageKey", publicName: "localStorageKey", isSignal: true, isRequired: false, transformFunction: null }, tableLayout: { classPropertyName: "tableLayout", publicName: "tableLayout", isSignal: true, isRequired: false, transformFunction: null }, firstPageOnInit: { classPropertyName: "firstPageOnInit", publicName: "firstPageOnInit", isSignal: true, isRequired: false, transformFunction: null }, pageSizeOptions: { classPropertyName: "pageSizeOptions", publicName: "pageSizeOptions", isSignal: true, isRequired: false, transformFunction: null }, isLoading: { classPropertyName: "isLoading", publicName: "isLoading", isSignal: true, isRequired: false, transformFunction: null }, totalCount: { classPropertyName: "totalCount", publicName: "totalCount", isSignal: true, isRequired: false, transformFunction: null }, serverPagination: { classPropertyName: "serverPagination", publicName: "serverPagination", isSignal: true, isRequired: false, transformFunction: null }, stripedRows: { classPropertyName: "stripedRows", publicName: "stripedRows", isSignal: true, isRequired: false, transformFunction: null }, expandable: { classPropertyName: "expandable", publicName: "expandable", isSignal: true, isRequired: false, transformFunction: null }, expanded: { classPropertyName: "expanded", publicName: "expanded", isSignal: true, isRequired: false, transformFunction: null }, showFilter: { classPropertyName: "showFilter", publicName: "showFilter", isSignal: true, isRequired: false, transformFunction: null }, showPaginator: { classPropertyName: "showPaginator", publicName: "showPaginator", isSignal: true, isRequired: false, transformFunction: null }, quickPageJump: { classPropertyName: "quickPageJump", publicName: "quickPageJump", isSignal: true, isRequired: false, transformFunction: null }, popupOffset: { classPropertyName: "popupOffset", publicName: "popupOffset", isSignal: true, isRequired: false, transformFunction: null }, tableTitle: { classPropertyName: "tableTitle", publicName: "tableTitle", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null }, setsFirstPage$: { classPropertyName: "setsFirstPage$", publicName: "setsFirstPage$", isSignal: true, isRequired: false, transformFunction: null }, expandIndex: { classPropertyName: "expandIndex", publicName: "expandIndex", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { expandIndex: "expandIndexChange", tableActions: "tableActions", selectRowAction: "selectRowAction" }, host: { listeners: { "window:resize": "onResize($event)" } }, providers: [
1913
1918
  TableUtilityService,
1914
1919
  TableStorageService,
1915
1920
  TableSortService,
1916
1921
  TableEditService,
1917
- ], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "component", type: TablePaginatorComponent, selector: "fu-table-paginator", inputs: ["pageSizeOptions", "quickPageJump", "dataLenght"] }, { kind: "component", type: TableFilterComponent, selector: "fu-table-filter", inputs: ["title"] }, { kind: "component", type: TbodyCellComponent, selector: "fu-tbody-cell", inputs: ["cellValue", "editKey"] }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1922
+ ], queries: [{ propertyName: "noRecordsTemplate", first: true, predicate: ["noRecordsTemplate"], descendants: true, isSignal: true }, { propertyName: "footerTemplate", first: true, predicate: ["footerTemplate"], descendants: true, isSignal: true }, { propertyName: "popupTemplate", first: true, predicate: PopupTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "expandTemplate", first: true, predicate: ExpandTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "bodyTemplate", first: true, predicate: BodyTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }, { propertyName: "headerTemplate", first: true, predicate: HeaderTemplateDirective, descendants: true, read: TemplateRef, isSignal: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index ||\r\n expanded()\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n @if (isLoading() && expanded()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n }\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}.fu-expand-loading{background-color:red}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i3.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }, { kind: "component", type: TablePaginatorComponent, selector: "fu-table-paginator", inputs: ["pageSizeOptions", "quickPageJump", "dataLenght"] }, { kind: "component", type: TableFilterComponent, selector: "fu-table-filter", inputs: ["title"] }, { kind: "component", type: TbodyCellComponent, selector: "fu-tbody-cell", inputs: ["cellValue", "editKey"] }, { kind: "pipe", type: KeyMappingPipe, name: "keyMapping" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
1918
1923
  }
1919
1924
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TableComponent, decorators: [{
1920
1925
  type: Component,
@@ -1931,7 +1936,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
1931
1936
  TableStorageService,
1932
1937
  TableSortService,
1933
1938
  TableEditService,
1934
- ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"] }]
1939
+ ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<div class=\"fu-table-wrapper\" [attr.outlined]=\"variant() === 'outlined'\">\r\n <!-- Search Filter -->\r\n @if (showFilter()) {\r\n <fu-table-filter [title]=\"tableTitle()\" />\r\n } @else if (tableTitle()) {\r\n <div style=\"margin-bottom: 12px\">\r\n <h3>{{ tableTitle() }}</h3>\r\n </div>\r\n }\r\n\r\n <!-- Table -->\r\n <table [attr.role]=\"'table'\" [style.table-layout]=\"tableLayout()\">\r\n <thead [attr.role]=\"'rowgroup'\">\r\n <tr [attr.role]=\"'row'\">\r\n @if (expandable()) {\r\n <th class=\"fu-expand-head\"></th>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n headerTemplate();\r\n context: { $implicit: dataSource()[0] | keyMapping }\r\n \"\r\n />\r\n </tr>\r\n </thead>\r\n\r\n <tbody [attr.role]=\"'rowgroup'\">\r\n @if (isInitLoad()) {\r\n <ng-container *ngTemplateOutlet=\"initLoadTemplate\" />\r\n } @else {\r\n @for (row of sortedData(); track $index; let odd = $odd) {\r\n <tr\r\n [attr.outlined]=\"variant() === 'outlined'\"\r\n [attr.role]=\"'row'\"\r\n class=\"fu-body-row\"\r\n [ngClass]=\"{\r\n striped: stripedRows() && odd,\r\n hoverable: expandable() || selectRowAction.observed,\r\n }\"\r\n (mouseenter)=\"onRowHover($event, row)\"\r\n (mouseleave)=\"onRowLeave()\"\r\n (click)=\"toggleRow(row, $index)\"\r\n >\r\n @if (expandable()) {\r\n <td\r\n class=\"fu-expand-cell\"\r\n [attr.data-expand]=\"expandedRowIndex === $index\"\r\n >\r\n <fu-icon size=\"16px\" iconName=\"chevronRight\" />\r\n </td>\r\n }\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n bodyTemplate();\r\n context: {\r\n $implicit: row,\r\n index: $index,\r\n keys: row | keyMapping,\r\n }\r\n \"\r\n />\r\n </tr>\r\n\r\n @if (\r\n (expandable() && expandedRowIndex === $index) ||\r\n expandIndex() === $index ||\r\n expanded()\r\n ) {\r\n <tr class=\"fu-expand-row\" (mouseenter)=\"onExpandHover()\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n @if (isLoading() && expanded()) {\r\n <span class=\"fu-skeleton-loader\"></span>\r\n } @else {\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n expandTemplate() || null;\r\n context: { $implicit: row, index: $index }\r\n \"\r\n />\r\n }\r\n </td>\r\n </tr>\r\n }\r\n } @empty {\r\n <tr class=\"fu-empty-row\">\r\n <td [attr.colspan]=\"expandColumnSpan()\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n noRecordsTemplate() || defaultNoRecordsTemplate\r\n \"\r\n />\r\n </td>\r\n </tr>\r\n }\r\n }\r\n </tbody>\r\n </table>\r\n\r\n @if (footerTemplate()) {\r\n <div class=\"fu-table-footer\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n footerTemplate() || null;\r\n context: { $implicit: sortedData() }\r\n \"\r\n />\r\n </div>\r\n }\r\n\r\n @if (showPaginator()) {\r\n <fu-table-paginator\r\n [dataLenght]=\"totalItems()\"\r\n [quickPageJump]=\"quickPageJump()\"\r\n [pageSizeOptions]=\"pageSizeOptions()\"\r\n />\r\n }\r\n</div>\r\n\r\n@if (hoveredRow()) {\r\n <div\r\n class=\"fu-action-popup\"\r\n [style.top.px]=\"popupPosition().top\"\r\n [style.right.px]=\"popupPosition().right\"\r\n (mouseenter)=\"onPopupHover()\"\r\n (mouseleave)=\"onPopupLeave()\"\r\n >\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n popupTemplate() || null;\r\n context: { $implicit: hoveredRow() }\r\n \"\r\n />\r\n </div>\r\n}\r\n\r\n<ng-template #defaultNoRecordsTemplate>\r\n <div class=\"fu-no-records\">\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <path\r\n fill=\"none\"\r\n stroke=\"currentColor\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n stroke-width=\"1.5\"\r\n d=\"M12 8v4m0 4.01l.01-.011M9 3H4v3m0 5v2m16-2v2M15 3h5v3M9 21H4v-3m11 3h5v-3\"\r\n />\r\n </svg>\r\n <p>{{ noRecordsText() }}</p>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #initLoadTemplate>\r\n @for (item of arrayFromSize(); track $index) {\r\n <tr class=\"fu-empty-row\">\r\n @for (item of arrayFromCols(); track $index) {\r\n <fu-tbody-cell />\r\n }\r\n </tr>\r\n }\r\n</ng-template>\r\n", styles: [".fu-table-wrapper{overflow-x:auto;padding:12px;font-family:Roboto,sans-serif;font-size:14px;background-color:var(--fu-table-bg-color);color:var(--fu-table-text-color);border-radius:4px}.fu-table-wrapper[outlined=true]{border:1px solid var(--fu-table-border-color)}.fu-table-wrapper[outlined=false]{box-shadow:0 1px 4px #0000005e}table{border-collapse:collapse;width:100%;margin-bottom:12px}thead tr{background-color:var(--fu-table-header-bg-color)}thead tr .fu-expand-head{width:40px;border-bottom:1px solid var(--fu-table-border-color)}@media (max-width: 900px){thead tr .fu-expand-head{display:none}}tbody tr .fu-expand-cell{border-bottom:1px solid var(--fu-table-border-color);text-align:center;vertical-align:middle}tbody tr .fu-expand-cell fu-icon{margin-top:3px}@media (max-width: 900px){tbody tr .fu-expand-cell{display:none}}tbody tr .fu-expand-cell[data-expand=true] fu-icon{transition:.1s ease-in-out;transform:rotate(90deg)}.fu-body-row{transition:.2s ease-in-out}.fu-body-row.striped{background-color:var(--fu-table-striped-row-bg-color)}.fu-body-row.hoverable:hover{background-color:var(--fu-table-bg-hover-color);cursor:pointer}tr.fu-expand-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px}.fu-expand-loading{background-color:red}tr.fu-empty-row>td{border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color);padding:8px;text-align:center}tr.fu-empty-row>td svg{width:100px;height:100px;color:var(--fu-table-border-color)}@media (max-width: 900px){table{border:none;box-shadow:none;min-width:100%}thead{border-bottom:1px solid var(--fu-table-border-color)}tbody tr[outlined=true]{border-right:1px solid var(--fu-table-border-color);border-left:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}tbody tr:first-child{border-top:none}tbody tr:last-child{margin-bottom:0}tr{display:block;margin-bottom:12px}tr[outlined=false]{box-shadow:0 2px 1px -1px #0003,0 1px 1px #00000024,0 1px 3px #0000001f}tr.fu-expand-row{margin-top:-8px;display:block;width:100%}tr.fu-expand-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}tr.fu-empty-row>td{display:block;width:100%;padding:8px;box-sizing:border-box}}.fu-table-footer{position:relative;min-height:40px;margin-bottom:8px;background-color:var(--fu-table-header-bg-color);border-bottom:1px solid var(--fu-table-border-color);border-top:1px solid var(--fu-table-border-color)}.fu-action-popup{position:absolute;display:flex;align-items:center;gap:8px;background:var(--fu-table-bg-color);box-shadow:0 4px 6px #0000001a;border:1px solid var(--fu-table-border-color);border-radius:4px;min-height:40px;z-index:10;padding:0 8px}.fu-no-records{display:flex;flex-direction:column;justify-content:center;align-items:center;height:180px}.fu-no-records>p{color:#aeadad}\n"] }]
1935
1940
  }], propDecorators: { selectRowAction: [{
1936
1941
  type: Output
1937
1942
  }], onResize: [{
@@ -2133,14 +2138,64 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImpor
2133
2138
  }]
2134
2139
  }] });
2135
2140
 
2141
+ class TreeComponent {
2142
+ constructor() {
2143
+ this.dataSource = input.required();
2144
+ this.onExpand = output();
2145
+ this.onCollapse = output();
2146
+ this.onSelect = output();
2147
+ this.actionTemplate = contentChild('actionTemplate');
2148
+ }
2149
+ toggleExpand(event, item) {
2150
+ event.stopPropagation();
2151
+ item.isExpanded = !item.isExpanded;
2152
+ this.emitEvents(item);
2153
+ if (item.hasChildren && item.children) {
2154
+ item.children.forEach(sub => {
2155
+ sub.isExpanded = false;
2156
+ });
2157
+ }
2158
+ }
2159
+ toggleSelect(item) {
2160
+ this.onSelect.emit(item);
2161
+ }
2162
+ emitEvents(item) {
2163
+ if (item.isExpanded) {
2164
+ this.onExpand.emit(item);
2165
+ }
2166
+ else {
2167
+ this.onCollapse.emit(item);
2168
+ }
2169
+ }
2170
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
2171
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.6", type: TreeComponent, isStandalone: true, selector: "fu-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { onExpand: "onExpand", onCollapse: "onCollapse", onSelect: "onSelect" }, queries: [{ propertyName: "actionTemplate", first: true, predicate: ["actionTemplate"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"fu-tree-container\">\r\n <ul>\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveList; context: { $implicit: dataSource() }\"\r\n />\r\n </ul>\r\n</div>\r\n\r\n<ng-template #recursiveList let-items>\r\n @for (item of items; track $index) {\r\n <li>\r\n <div class=\"fu-tree-item\" (click)=\"toggleSelect(item)\">\r\n @if (item.hasChildren) {\r\n <button\r\n fuButton\r\n variant=\"text\"\r\n iconButton\r\n (click)=\"toggleExpand($event, item)\"\r\n >\r\n <fu-icon\r\n size=\"16px\"\r\n strokeWidth=\"3px\"\r\n [class.fu-rotate]=\"item.isExpanded\"\r\n iconName=\"arrowRight\"\r\n />\r\n </button>\r\n }\r\n\r\n <span\r\n [style.margin-left]=\"!item.hasChildren ? '40px' : '0'\"\r\n class=\"fu-tree-item-text\"\r\n >{{ item.label }}</span\r\n >\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionTemplate() || null;\r\n context: { $implicit: item }\r\n \"\r\n />\r\n </div>\r\n\r\n @if (item.hasChildren && item.isExpanded) {\r\n <ul style=\"padding-left: 16px\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n recursiveList;\r\n context: { $implicit: item.children }\r\n \"\r\n />\r\n </ul>\r\n }\r\n </li>\r\n }\r\n</ng-template>\r\n", styles: [".fu-tree-container{padding:8px 12px;margin:16px;box-shadow:0 1px 4px #0000005e;background-color:var(--fu-tree-bg-color);width:400px;overflow-y:auto}.fu-tree-item{display:flex;align-items:center;cursor:pointer;gap:8px;background-color:var(--fu-tree-item-bg-color);margin:6px 0;min-height:32px;transition:.1s ease-in-out}.fu-tree-item:hover{background-color:var(--fu-tree-bg-hover-color)}.fu-tree-item .fu-rotate{transform:rotate(90deg);transition:.1s ease-in-out}.fu-tree-item-text{margin-right:auto}.fu-item-current,.fu-item-access{padding:4px 0}.tree-dropdown{max-height:calc(100% - 40px)}ul{list-style-type:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:#888;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#555}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: ButtonModule }, { kind: "directive", type: ButtonDirective, selector: "[fuButton]", inputs: ["variant", "severity", "iconButton", "rounded", "compact", "raised"] }, { kind: "ngmodule", type: IconModule }, { kind: "component", type: IconComponent, selector: "fu-icon", inputs: ["iconName", "size", "strokeWidth", "color"] }] }); }
2172
+ }
2173
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeComponent, decorators: [{
2174
+ type: Component,
2175
+ args: [{ selector: 'fu-tree', imports: [NgTemplateOutlet, ButtonModule, IconModule], template: "<div class=\"fu-tree-container\">\r\n <ul>\r\n <ng-container\r\n *ngTemplateOutlet=\"recursiveList; context: { $implicit: dataSource() }\"\r\n />\r\n </ul>\r\n</div>\r\n\r\n<ng-template #recursiveList let-items>\r\n @for (item of items; track $index) {\r\n <li>\r\n <div class=\"fu-tree-item\" (click)=\"toggleSelect(item)\">\r\n @if (item.hasChildren) {\r\n <button\r\n fuButton\r\n variant=\"text\"\r\n iconButton\r\n (click)=\"toggleExpand($event, item)\"\r\n >\r\n <fu-icon\r\n size=\"16px\"\r\n strokeWidth=\"3px\"\r\n [class.fu-rotate]=\"item.isExpanded\"\r\n iconName=\"arrowRight\"\r\n />\r\n </button>\r\n }\r\n\r\n <span\r\n [style.margin-left]=\"!item.hasChildren ? '40px' : '0'\"\r\n class=\"fu-tree-item-text\"\r\n >{{ item.label }}</span\r\n >\r\n\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n actionTemplate() || null;\r\n context: { $implicit: item }\r\n \"\r\n />\r\n </div>\r\n\r\n @if (item.hasChildren && item.isExpanded) {\r\n <ul style=\"padding-left: 16px\">\r\n <ng-container\r\n *ngTemplateOutlet=\"\r\n recursiveList;\r\n context: { $implicit: item.children }\r\n \"\r\n />\r\n </ul>\r\n }\r\n </li>\r\n }\r\n</ng-template>\r\n", styles: [".fu-tree-container{padding:8px 12px;margin:16px;box-shadow:0 1px 4px #0000005e;background-color:var(--fu-tree-bg-color);width:400px;overflow-y:auto}.fu-tree-item{display:flex;align-items:center;cursor:pointer;gap:8px;background-color:var(--fu-tree-item-bg-color);margin:6px 0;min-height:32px;transition:.1s ease-in-out}.fu-tree-item:hover{background-color:var(--fu-tree-bg-hover-color)}.fu-tree-item .fu-rotate{transform:rotate(90deg);transition:.1s ease-in-out}.fu-tree-item-text{margin-right:auto}.fu-item-current,.fu-item-access{padding:4px 0}.tree-dropdown{max-height:calc(100% - 40px)}ul{list-style-type:none}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#f1f1f1;border-radius:10px}::-webkit-scrollbar-thumb{background:#888;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#555}\n"] }]
2176
+ }] });
2177
+
2178
+ class TreeModule {
2179
+ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
2180
+ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, imports: [TreeComponent], exports: [TreeComponent] }); }
2181
+ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, imports: [TreeComponent] }); }
2182
+ }
2183
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.6", ngImport: i0, type: TreeModule, decorators: [{
2184
+ type: NgModule,
2185
+ args: [{
2186
+ declarations: [],
2187
+ imports: [TreeComponent],
2188
+ exports: [TreeComponent],
2189
+ }]
2190
+ }] });
2191
+
2136
2192
  /*
2137
2193
  * Public API Surface of ng-fusion-ui
2138
2194
  */
2139
- // export * from './lib/tree/index';
2140
2195
 
2141
2196
  /**
2142
2197
  * Generated bundle index. Do not edit.
2143
2198
  */
2144
2199
 
2145
- export { BodyRowCellComponent, BodyTemplateDirective, ButtonDirective, ButtonModule, DataGridComponent, DataGridModule, DataGridPaginator, DataTableModule, ExpandTemplateDirective, FilledButtonDirective, GridBodyTemplateDirective, GridExpandTemplateDirective, GridHeaderTemplateDirective, HeadRowCellComponent, HeaderTemplateDirective, HighlightDirective, IconComponent, IconModule, OutlinedButtonDirective, PopupTemplateDirective, RowActionsComponent, TableComponent, TableFilterComponent, TableIntlService, TablePaginatorComponent, TbodyActionsComponent, TbodyCellComponent, TextButtonDirective, TheadCellComponent };
2200
+ export { BodyRowCellComponent, BodyTemplateDirective, ButtonDirective, ButtonModule, DataGridComponent, DataGridModule, DataGridPaginator, DataTableModule, ExpandTemplateDirective, FilledButtonDirective, GridBodyTemplateDirective, GridExpandTemplateDirective, GridHeaderTemplateDirective, HeadRowCellComponent, HeaderTemplateDirective, HighlightDirective, IconComponent, IconModule, OutlinedButtonDirective, PopupTemplateDirective, RowActionsComponent, TableComponent, TableFilterComponent, TableIntlService, TablePaginatorComponent, TbodyActionsComponent, TbodyCellComponent, TextButtonDirective, TheadCellComponent, TreeComponent, TreeModule };
2146
2201
  //# sourceMappingURL=ng-fusion-ui.mjs.map