@tacdaed/fragments 1.0.0-beta.13 → 1.0.0-beta.15

package/fesm2022/tacdaed-fragments.mjs

@@ -1,5 +1,5 @@
 import * as i1 from '@angular/common';
-import { NgTemplateOutlet, NgClass, CommonModule, formatDate, AsyncPipe } from '@angular/common';
+import { NgTemplateOutlet, NgClass, CommonModule, formatDate, AsyncPipe, NgStyle } from '@angular/common';
 import * as i0 from '@angular/core';
 import { EventEmitter, TemplateRef, ViewChildren, ContentChild, Output, Input, Component, HostListener, inject, ChangeDetectorRef, ViewChild, ChangeDetectionStrategy, HostBinding, ElementRef, Renderer2, Directive, Pipe, Injector, LOCALE_ID, input, computed, viewChild, Injectable, signal, effect } from '@angular/core';
 import { RouterLink, RouterLinkActive, Router, ActivatedRoute, NavigationEnd } from '@angular/router';
@@ -2085,8 +2085,32 @@ class TableComponent {
             }
         }
     }
+    getCellValue(item, cell) {
+        if (!cell.fieldArrayPosition)
+            return item;
+        return this.getNestedPropertyValueByPosition(item, cell.fieldArrayPosition);
+    }
+    getNestedPropertyValueByPosition(source, positionArray) {
+        if (typeof positionArray === 'object') {
+            const current = positionArray[0];
+            const rest = positionArray.slice(1);
+            if (!source)
+                return undefined;
+            if (rest.length === 0 &&
+                typeof source === 'object' &&
+                source !== null &&
+                Object.prototype.hasOwnProperty.call(source, current)) {
+                return source[current];
+            }
+            if (rest.length === 0 && Array.isArray(source)) {
+                return source.map((entry) => entry[current]);
+            }
+            return this.getNestedPropertyValueByPosition(source[current], rest);
+        }
+        return source?.[positionArray];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TableComponent, isStandalone: true, selector: "frg-table", inputs: { configTable: "configTable", styleType: "styleType", rowSize: "rowSize" }, outputs: { reloadTableEvent: "reloadTableEvent" }, viewQueries: [{ propertyName: "tableHead", first: true, predicate: ["tableHead"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"frg-visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\r\n  @if (!cell.fieldPipe) {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TitleBarComponent, selector: "frg-title-bar", inputs: ["title", "styleType"] }, { kind: "component", type: SmallPaginationComponent, selector: "frg-small-pagination", inputs: ["totalItems", "fullData", "page", "pageSize", "hasElipsisPages", "styleType"], outputs: ["pageChange"] }, { kind: "directive", type: FragmentsTooltipDirective, selector: "[frgTooltip]", inputs: ["tooltipConfig"] }, { kind: "component", type: ButtonComponent, selector: "frg-button", inputs: ["id", "class", "textClass", "iconClass", "iconStyleType", "iconPosition", "type", "size", "buttonRouterLink", "buttonRouterLinkActive", "disabled", "styleType", "shape", "text", "ariaLabel"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FieldArrayPositionPipe, name: "fieldArrayPosition" }, { kind: "pipe", type: TypeOfArrayPipe, name: "typeOfArray" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: TableComponent, isStandalone: true, selector: "frg-table", inputs: { configTable: "configTable", styleType: "styleType", rowSize: "rowSize" }, outputs: { reloadTableEvent: "reloadTableEvent" }, viewQueries: [{ propertyName: "tableHead", first: true, predicate: ["tableHead"], descendants: true, read: ElementRef }], ngImport: i0, template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"frg-visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\n  @if (cell.template) {\n    <ng-container\n      [ngTemplateOutlet]=\"cell.template\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: item,\n        item: item,\n        value: getCellValue(item, cell),\n        cell: cell\n      }\"\n    ></ng-container>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"cellDefaultTpl\"\n      [ngTemplateOutletContext]=\"{ cells: cell, item: item }\"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #cellDefaultTpl let-cell=\"cells\" let-item=\"item\">\n  @if (!cell.fieldPipe) {\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\n</ng-template>\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "component", type: TitleBarComponent, selector: "frg-title-bar", inputs: ["title", "styleType"] }, { kind: "component", type: SmallPaginationComponent, selector: "frg-small-pagination", inputs: ["totalItems", "fullData", "page", "pageSize", "hasElipsisPages", "styleType"], outputs: ["pageChange"] }, { kind: "directive", type: FragmentsTooltipDirective, selector: "[frgTooltip]", inputs: ["tooltipConfig"] }, { kind: "component", type: ButtonComponent, selector: "frg-button", inputs: ["id", "class", "textClass", "iconClass", "iconStyleType", "iconPosition", "type", "size", "buttonRouterLink", "buttonRouterLinkActive", "disabled", "styleType", "shape", "text", "ariaLabel"], outputs: ["clickEvent"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "pipe", type: FieldArrayPositionPipe, name: "fieldArrayPosition" }, { kind: "pipe", type: TypeOfArrayPipe, name: "typeOfArray" }, { kind: "pipe", type: SafeHtmlPipe, name: "safeHtml" }, { kind: "pipe", type: DynamicPipe, name: "dynamicPipe" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, decorators: [{
             type: Component,
@@ -2102,7 +2126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
                         FragmentsTooltipDirective,
                         ButtonComponent,
                         ReactiveFormsModule,
-                    ], template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"frg-visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\r\n  @if (!cell.fieldPipe) {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"] }]
+                    ], template: "@if (configTable.tTitleBar?.title) {\r\n  <frg-title-bar\r\n    [title]=\"configTable.tTitleBar?.title ?? ''\"\r\n    [styleType]=\"styleType\"\r\n  ></frg-title-bar>\r\n}\r\n@if (configTable.tBody.data && configTable.tBody.data.length > 0) {\r\n  <div class=\"frg-table-responsive\">\r\n    <table\r\n      class=\"frg-table\"\r\n      id=\"table1\"\r\n      [ngClass]=\"{\r\n        'frg-table__primary': styleType === 'primary',\r\n        'frg-table__secondary': styleType === 'secondary',\r\n        'frg-table__tertiary': styleType === 'tertiary',\r\n        'frg-table__dark': styleType === 'dark',\r\n        'frg-table__light': styleType === 'light',\r\n        'frg-table--row-small': rowSize === 'small',\r\n        'frg-table--row-medium': rowSize === 'medium',\r\n        'frg-table--row-large': rowSize === 'large'\r\n      }\"\r\n    >\r\n      @if (configTable.tCaption && configTable.tCaption.srOnly) {\r\n        <caption class=\"frg-visually-hidden\">\r\n          {{ configTable.tCaption.srOnly }}\r\n        </caption>\r\n      }\r\n      @if (configTable.tHead.columns.length > 0) {\r\n        <thead #tableHead>\r\n          <tr>\r\n            <!--Sort-->\r\n            @if (configTable.tHead) {\r\n              @for (hColumn of configTable.tHead.columns; track $index) {\r\n                @if (hColumn.fieldOrder) {\r\n                  <th\r\n                    scope=\"col\"\r\n                    [tabindex]=\"hColumn.fieldOrder ? 0 : null\"\r\n                    [attr.aria-sort]=\"\r\n                      !(hColumn.fieldOrder === configTable.tPagination.order)\r\n                        ? null\r\n                        : configTable.tPagination.direction ===\r\n                            EnumDirectionSortTable.asc\r\n                          ? 'ascending'\r\n                          : 'descending'\r\n                    \"\r\n                    [ngClass]=\"{\r\n                      'frg-sorting': hColumn.fieldOrder,\r\n                      'frg-sorting-asc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.asc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order,\r\n                      'frg-sorting-desc':\r\n                        configTable.tPagination.direction ===\r\n                          EnumDirectionSortTable.desc &&\r\n                        hColumn.fieldOrder === configTable.tPagination.order\r\n                    }\"\r\n                    (click)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                    (keydown.enter)=\"\r\n                      hColumn.fieldOrder ? orderBy(hColumn.fieldOrder) : null\r\n                    \"\r\n                  >\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                } @else {\r\n                  <th scope=\"col\">\r\n                    <span>\r\n                      {{ hColumn.fieldLabel }}\r\n                    </span>\r\n                  </th>\r\n                }\r\n              }\r\n            }\r\n            <!--End Sort-->\r\n            @if (configTable.tHead.action) {\r\n              <th\r\n                scope=\"col\"\r\n                [ngClass]=\"configTable.tHead.action.customClass ?? ''\"\r\n              >\r\n                {{ configTable.tHead.action.label }}\r\n              </th>\r\n            }\r\n          </tr>\r\n        </thead>\r\n      }\r\n      <tbody>\r\n        @for (item of configTable.tBody.data; let i = $index; track $index) {\r\n          <tr\r\n            [attr.id]=\"i === 0 ? idFirstTr : null\"\r\n            [ngClass]=\"\r\n              configTable.tBody.rowClick?.behaviourAction?.clickEvent\r\n                ? 'cursor-pointer'\r\n                : ''\r\n            \"\r\n            [routerLink]=\"\r\n              configTable.tBody.rowClick?.disabled &&\r\n              configTable.tBody.rowClick?.disabled(item)\r\n                ? null\r\n                : configTable.tBody.rowClick?.behaviourAction?.link\r\n                  ? [\r\n                      configTable.tBody.rowClick?.behaviourAction?.link\r\n                        ? configTable.tBody.rowClick?.behaviourAction?.link\r\n                        : './',\r\n                      configTable.tBody.rowClick?.behaviourAction\r\n                        ?.customParamsLink ||\r\n                        (item | fieldArrayPosition: configTable.tBody.uniqueField)\r\n                    ]\r\n                  : null\r\n            \"\r\n            (click)=\"handleRowClick($event, item)\"\r\n            (keyup.enter)=\"handleRowClick($event, item)\"\r\n            (keydown)=\"handleRowClick($event, item)\"\r\n          >\r\n            @for (column of configTable.tBody.columns; let i = $index; track $index) {\r\n              <td>\r\n                <div [ngClass]=\"column.customClass\">\r\n                  <ng-container\r\n                    [ngTemplateOutlet]=\"\r\n                      (column.cells | typeOfArray) ? cellForTpl : cellTpl\r\n                    \"\r\n                    [ngTemplateOutletContext]=\"{\r\n                      cells: column.cells,\r\n                      item: item\r\n                    }\"\r\n                  ></ng-container>\r\n                </div>\r\n              </td>\r\n            }\r\n            @if (configTable.tBody.action ?? false) {\r\n              <td\r\n                class=\"table-action\"\r\n                [ngClass]=\"configTable.tBody.action?.customClasses ?? ''\"\r\n              >\r\n                @for (act of configTable.tBody.action?.buttons ?? []; track $index) {\r\n                  @if (act.visible && act.visible(item) ? true : null) {\r\n                    <frg-button\r\n                      [ariaLabel]=\"act.ariaLabel || 'Azione'\"\r\n                      [text]=\"''\"\r\n                      [iconClass]=\"act.iconClass ? act.iconClass(item) : ''\"\r\n                      [styleType]=\"'icon'\"\r\n                      [size]=\"'small'\"\r\n                      frgTooltip\r\n                      [tooltipConfig]=\"{\r\n                        apply:\r\n                          act.tooltip &&\r\n                          act.tooltip.apply &&\r\n                          act.visible &&\r\n                          act.visible(item)\r\n                            ? act.tooltip.apply\r\n                            : true,\r\n                        text:\r\n                          act.tooltip && act.tooltip.text\r\n                            ? act.tooltip.text(item)\r\n                            : '',\r\n                        textContent:\r\n                          act.tooltip && act.tooltip.textContent\r\n                            ? act.tooltip.textContent(item)\r\n                            : '',\r\n                        position:\r\n                          act.tooltip && act.tooltip.position\r\n                            ? act.tooltip.position\r\n                            : 'top',\r\n                        gap: act.tooltip && act.tooltip.gap ? act.tooltip.gap : 0\r\n                      }\"\r\n                      [disabled]=\"act.disabled ? act.disabled(item) : null\"\r\n                      [buttonRouterLink]=\"\r\n                        act.disabled && act.disabled(item)\r\n                          ? null\r\n                          : act.behaviourAction.link\r\n                            ? [\r\n                                act.behaviourAction.link\r\n                                  ? act.behaviourAction.link\r\n                                  : './',\r\n                                act.behaviourAction.customParamsLink ||\r\n                                  (item\r\n                                    | fieldArrayPosition\r\n                                      : configTable.tBody.uniqueField)\r\n                              ]\r\n                            : null\r\n                      \"\r\n                      (clickEvent)=\"\r\n                        act.behaviourAction.clickEvent\r\n                          ? act.behaviourAction.clickEvent(item)\r\n                          : null\r\n                      \"\r\n                      (click)=\"$event.stopPropagation()\"\r\n                      (keydown)=\"$event.stopPropagation()\"\r\n                      (keyup.enter)=\"$event.stopPropagation()\"\r\n                    >\r\n                    </frg-button>\r\n                  }\r\n                }\r\n              </td>\r\n            }\r\n          </tr>\r\n        }\r\n      </tbody>\r\n    </table>\r\n  </div>\r\n\r\n  @if (configTable.tPagination) {\r\n    <frg-small-pagination\r\n      [hasElipsisPages]=\"configTable.tPagination.hasElipsisPages ?? false\"\r\n      [pageSize]=\"configTable.tPagination.pageSize ?? 10\"\r\n      [page]=\"configTable.tPagination.page ?? 0\"\r\n      [totalItems]=\"configTable.tPagination.fullData?.length ?? 0\"\r\n      [fullData]=\"configTable.tPagination.fullData ?? []\"\r\n      [styleType]=\"styleType\"\r\n      (pageChange)=\"updateCurrentPage($event)\"\r\n    ></frg-small-pagination>\r\n  }\r\n} @else {\r\n  <div class=\"d-flex justify-content-center my-4\">\r\n    <div class=\"text-center\">No Elements</div>\r\n  </div>\r\n}\r\n\r\n<ng-template #cellForTpl let-cells=\"cells\" let-item=\"item\">\r\n  @for (cell of $any(cells); track $index) {\r\n    <ng-container\r\n      [ngTemplateOutlet]=\"cellTpl\"\r\n      [ngTemplateOutletContext]=\"{\r\n        cell: cell,\r\n        item: item\r\n      }\"\r\n    ></ng-container>\r\n    <br />\r\n  }\r\n</ng-template>\r\n\r\n<ng-template #cellTpl let-cell=\"cells\" let-item=\"item\">\n  @if (cell.template) {\n    <ng-container\n      [ngTemplateOutlet]=\"cell.template\"\n      [ngTemplateOutletContext]=\"{\n        $implicit: item,\n        item: item,\n        value: getCellValue(item, cell),\n        cell: cell\n      }\"\n    ></ng-container>\n  } @else {\n    <ng-container\n      [ngTemplateOutlet]=\"cellDefaultTpl\"\n      [ngTemplateOutletContext]=\"{ cells: cell, item: item }\"\n    ></ng-container>\n  }\n</ng-template>\n\n<ng-template #cellDefaultTpl let-cell=\"cells\" let-item=\"item\">\n  @if (!cell.fieldPipe) {\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\">\r\n      {{ item | fieldArrayPosition: cell.fieldArrayPosition }}\r\n    </span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  } @else {\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position !== 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n    <span\r\n      [innerHtml]=\"\r\n        item\r\n          | fieldArrayPosition: cell.fieldArrayPosition\r\n          | dynamicPipe: cell.fieldPipe.type : cell.fieldPipe.args\r\n          | safeHtml\r\n      \"\r\n      [ngClass]=\"cell.customClass ? cell.customClass(item) : ''\"\r\n    ></span>\r\n    @if (\r\n      cell.icon &&\r\n      cell.icon.position === 'right' &&\r\n      cell.icon.action.visible &&\r\n      cell.icon.action.visible(item)\r\n    ) {\r\n      <frg-button\r\n        [ariaLabel]=\"cell.icon.ariaLabel || 'Azione'\"\r\n        [text]=\"''\"\r\n        [iconClass]=\"cell.icon.iconClass ? cell.icon.iconClass : ''\"\r\n        [styleType]=\"'icon'\"\r\n        [size]=\"'small'\"\r\n        frgTooltip\r\n        [tooltipConfig]=\"{\r\n          apply:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.apply\r\n              ? cell.icon.action.tooltip.apply\r\n              : true,\r\n          text:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.text\r\n              ? cell.icon.action.tooltip.text(item)\r\n              : '',\r\n          textContent:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.textContent\r\n              ? cell.icon.action.tooltip.textContent(item)\r\n              : '',\r\n          position:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.position\r\n              ? cell.icon.action.tooltip.position\r\n              : 'top',\r\n          gap:\r\n            cell.icon.action.tooltip && cell.icon.action.tooltip.gap\r\n              ? cell.icon.action.tooltip.gap\r\n              : 0\r\n        }\"\r\n        [disabled]=\"\r\n          cell.icon.action.disabled\r\n            ? cell.icon.action.disabled(item)\r\n            : null\r\n        \"\r\n        (clickEvent)=\"handleIconClick(cell, item)\"\r\n        (click)=\"$event.stopPropagation()\"\r\n        (keydown)=\"$event.stopPropagation()\"\r\n        (keyup.enter)=\"$event.stopPropagation()\"\r\n      >\r\n      </frg-button>\r\n    }\r\n  }\n</ng-template>\n", styles: [".frg-title-bar{color:#3d3d3d;font-weight:400;font-size:1.25rem;box-shadow:0 2px 4px #0000001a;font-family:Open Sans,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Helvetica Neue,sans-serif}.frg-title-bar__primary{background-color:#4c7aae;color:#fdfdfd}.frg-title-bar__primary .frg-title-bar-title button{color:#4c7aae}.frg-title-bar__primary .frg-title-bar-filter,.frg-title-bar__primary .frg-title-bar-search{background-color:#6ea8d9}.frg-title-bar__secondary{background-color:#c9a24e;color:#fdfdfd}.frg-title-bar__secondary .frg-title-bar-title button{color:#c9a24e}.frg-title-bar__secondary .frg-title-bar-filter,.frg-title-bar__secondary .frg-title-bar-search{background-color:#e6c57a}.frg-title-bar__tertiary{background-color:#b05a99;color:#fdfdfd}.frg-title-bar__tertiary .frg-title-bar-title button{color:#b05a99}.frg-title-bar__tertiary .frg-title-bar-filter,.frg-title-bar__tertiary .frg-title-bar-search{background-color:#d97ebd}.frg-title-bar__dark{background-color:#3d3d3d;color:#fff}.frg-title-bar__light{background-color:#fdfdfd}.frg-title-bar .frg-title-bar-title{padding:15px 25px}.frg-title-bar .frg-title-bar-title button{outline:none;border:none;border-radius:50%;width:25px;height:25px;padding:15px;font-size:1rem}.frg-title-bar .frg-title-bar-title button:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;outline:3px solid #6ea8d9;box-shadow:none}.frg-title-bar .frg-title-bar-title button:focus-visible{outline-offset:5px}.frg-title-bar .frg-title-bar-filter__container{padding:25px}.frg-title-bar .frg-title-bar-filter label{display:block;font-size:.8rem;font-weight:lighter}.frg-title-bar .frg-title-bar-search__container{padding:25px}.frg-title-bar .frg-title-bar-search label{display:block;font-size:.8rem;font-weight:lighter}.frg-filter label,.frg-search label{display:block;font-size:.875rem;font-weight:400;margin-bottom:.5rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";text-transform:uppercase;letter-spacing:.05rem}.frg-filter input,.frg-search input{display:block;width:100%;padding:10px;font-size:1rem;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";line-height:1.5;color:#3d3d3d;background-color:#fdfdfd;background-clip:padding-box;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out}.frg-filter input::placeholder,.frg-search input::placeholder{color:#737579;opacity:1}.frg-filter input:focus,.frg-search input:focus{color:#3d3d3d;background-color:#fdfdfd;border-color:#6ea8d9;outline:0;box-shadow:0 0 0 .2rem #2e6ea640}.frg-filter input.is-invalid,.frg-search input.is-invalid{border-color:#d66a6a;padding-right:calc(10px + 2rem);background-image:url(data:image/svg+xml,\\ ...);background-repeat:no-repeat;background-position:center right 5px;background-size:6.6666666667px 6.6666666667px}.frg-filter input.is-invalid:focus,.frg-search input.is-invalid:focus{border-color:#d66a6a;box-shadow:0 0 0 .2rem #da1e2840}.frg-filter input:disabled,.frg-search input:disabled{background-color:#bfbfbf;border-color:#737579}.frg-table-responsive{border:1px solid #e6e9ef;border-radius:.25rem;overflow:hidden;background-color:#fdfdfd}frg-title-bar+.frg-table-responsive{border-top:none;border-radius:0 0 .25rem .25rem}.frg-table{width:100%;border-collapse:separate;border-spacing:0;font-size:.95rem;background-color:#fdfdfd}.frg-table-responsive{border-radius:0 0 .25rem .25rem;border:1px solid #e6e9ef;overflow:hidden;background-color:#fdfdfd}.frg-table td,.frg-table th{text-align:left;padding:.75rem .9rem;border-bottom:1px solid #e6e9ef;vertical-align:middle}.frg-table--row-small td,.frg-table--row-small th{padding:.35rem .6rem}.frg-table--row-medium td,.frg-table--row-medium th{padding:.75rem .9rem}.frg-table--row-large td,.frg-table--row-large th{padding:1rem 1.2rem}.frg-table thead th{background-color:#edf0f6;font-weight:600;color:#1f252e;letter-spacing:.01em;border-bottom:1px solid #e6e9ef}.frg-table tbody tr{transition:background-color .18s ease}.frg-table tbody tr:hover{background-color:#f1f4f9}.frg-table .frg-sorting{position:relative;cursor:pointer;padding-right:1.4rem}.frg-table .frg-sorting:before,.frg-table .frg-sorting:after{content:\"\";position:absolute;right:.65rem;border-left:4px solid transparent;border-right:4px solid transparent;opacity:.5}.frg-table .frg-sorting:before{top:calc(50% - 6px);border-bottom:5px solid currentColor}.frg-table .frg-sorting:after{top:calc(50% + 2px);border-top:5px solid currentColor}.frg-table .frg-sorting-asc:after{opacity:.5}.frg-table .frg-sorting-asc:before{opacity:1}.frg-table .frg-sorting-desc:before{opacity:.5}.frg-table .frg-sorting-desc:after{opacity:1}.frg-table__primary{overflow:hidden}.frg-table__primary thead th,.frg-table__primary.frg-table thead th{background-color:#83b5de;color:#fdfdfd;border-bottom-color:#a1c6e6}.frg-table__primary tbody tr:hover{background-color:#e8f0f8}.frg-table__secondary{overflow:hidden}.frg-table__secondary thead th,.frg-table__secondary.frg-table thead th{background-color:#e9cd8e;color:#fdfdfd;border-bottom-color:#efd9a9}.frg-table__secondary tbody tr:hover{background-color:#faf5e9}.frg-table__tertiary{overflow:hidden}.frg-table__tertiary thead th,.frg-table__tertiary.frg-table thead th{background-color:#de91c7;color:#fdfdfd;border-bottom-color:#e6abd4}.frg-table__tertiary tbody tr:hover{background-color:#f8eaf3}.frg-table__dark{background-color:#3d3d3d;color:#fdfdfd}.frg-table__dark td,.frg-table__dark th{border-bottom-color:#fdfdfd1f}.frg-table__dark thead th{background-color:#505050;color:#fdfdfd;border-bottom-color:#fdfdfd29}.frg-table__dark tbody tr:hover{background-color:#4d4d4d}.frg-table__light,.frg-table__light thead th{background-color:#fdfdfd;color:#3d3d3d}.frg-table__light tbody tr:hover{background-color:#f1f4f9}@media screen and (max-width: 768px){.frg-table-responsive{overflow:auto}}\n"] }]
         }], propDecorators: { configTable: [{
                 type: Input
             }], styleType: [{
@@ -7412,11 +7436,65 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
 class SelectionListBase extends InputBase {
     constructor() {
         super(...arguments);
+        this.dropdownGap = 4;
+        this.dropdownMaxHeight = 240;
+        this.isOpen = false;
+        this.dropdownStyles = {};
+        this.onViewportChange = () => {
+            if (this.isOpen) {
+                this.updateDropdownPosition();
+            }
+        };
         /**
          * Direction of selection list when it opens.
          */
         this.openDirection = 'down';
     }
+    ngOnInit() {
+        super.ngOnInit();
+        window.addEventListener('scroll', this.onViewportChange, true);
+    }
+    ngOnDestroy() {
+        window.removeEventListener('scroll', this.onViewportChange, true);
+    }
+    onWindowResize() {
+        this.onViewportChange();
+    }
+    updateDropdownPosition() {
+        const anchorElement = this.getDropdownAnchorElement();
+        if (!anchorElement)
+            return;
+        const rect = anchorElement.getBoundingClientRect();
+        const viewportHeight = window.innerHeight;
+        const viewportWidth = window.innerWidth;
+        const dropdownHeight = this.dropdownMaxHeight;
+        const spaceBelow = viewportHeight - rect.bottom - this.dropdownGap;
+        const spaceAbove = rect.top - this.dropdownGap;
+        const openUp = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
+        const availableHeight = openUp ? spaceAbove : spaceBelow;
+        const maxHeight = Math.max(80, Math.min(dropdownHeight, availableHeight));
+        const left = Math.min(Math.max(this.dropdownGap, rect.left), Math.max(this.dropdownGap, viewportWidth - rect.width - this.dropdownGap));
+        const commonStyles = {
+            position: 'fixed',
+            left: `${left}px`,
+            width: `${rect.width}px`,
+            'max-height': `${maxHeight}px`,
+            'z-index': '1065'
+        };
+        if (openUp) {
+            this.openDirection = 'top';
+            this.dropdownStyles = {
+                ...commonStyles,
+                bottom: `${Math.max(this.dropdownGap, viewportHeight - rect.top + this.dropdownGap)}px`
+            };
+            return;
+        }
+        this.openDirection = 'down';
+        this.dropdownStyles = {
+            ...commonStyles,
+            top: `${Math.max(this.dropdownGap, rect.bottom + this.dropdownGap)}px`
+        };
+    }
     /**
      * Handles selection change event.
      * Subclasses can override to provide custom behavior.
@@ -7424,11 +7502,14 @@ class SelectionListBase extends InputBase {
      */
     onSelectionChange(_) { }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListBase, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
-    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: SelectionListBase, isStandalone: true, usesInheritance: true, ngImport: i0 }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.2.3", type: SelectionListBase, isStandalone: true, host: { listeners: { "window:resize": "onWindowResize()" } }, usesInheritance: true, ngImport: i0 }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListBase, decorators: [{
             type: Directive
-        }] });
+        }], propDecorators: { onWindowResize: [{
+                type: HostListener,
+                args: ['window:resize']
+            }] } });
 
 //#region [ERRORS]
 const DEFAULT_SELECTION_LIST_ERROR_MESSAGES = {
@@ -7453,7 +7534,6 @@ class SelectionListComponent extends SelectionListBase {
         this.elementRef = inject(ElementRef);
         this.items = [];
         this.hasSearch = false;
-        this.isOpen = false;
         this.searchTerm = "";
         this.selectedId = "";
         this.focusedIndex = -1;
@@ -7520,7 +7600,7 @@ class SelectionListComponent extends SelectionListBase {
             return;
         this.isOpen = !this.isOpen;
         if (this.isOpen) {
-            this.setDropdownDirection();
+            this.updateDropdownPosition();
             setTimeout(() => {
                 if (this.hasSearch && this.searchInput) {
                     this.searchInput.nativeElement.focus();
@@ -7571,8 +7651,10 @@ class SelectionListComponent extends SelectionListBase {
                 break;
             case "ArrowDown":
                 event.preventDefault();
-                if (!this.isOpen)
+                if (!this.isOpen) {
                     this.isOpen = true;
+                    this.updateDropdownPosition();
+                }
                 setTimeout(() => {
                     if (this.hasSearch && this.searchInput) {
                         this.searchInput.nativeElement.focus();
@@ -7625,7 +7707,12 @@ class SelectionListComponent extends SelectionListBase {
     onFocus() {
         if (!this.disabled) {
             this.isOpen = true;
-            this.setDropdownDirection();
+            this.updateDropdownPosition();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.updateView(this.value);
         }
     }
     onSearch(event) {
@@ -7657,8 +7744,15 @@ class SelectionListComponent extends SelectionListBase {
     updateDisabledState(_isDisabled) {
         //Intentionally left void, to implement in case is needed
     }
-    updateView(_value) {
-        //Intentionally left void, to implement in case is needed
+    updateView(value) {
+        const matchedItem = this.findItemByValue(value);
+        this.selectedId = matchedItem?.id ?? '';
+        if (this.hasSearch) {
+            this.searchTerm = matchedItem?.label ?? '';
+        }
+    }
+    getDropdownAnchorElement() {
+        return this.elementRef.nativeElement.querySelector('.custom-select, .options-search__input');
     }
     focusFirstItem() {
         const buttons = this.getEnabledButtons();
@@ -7688,32 +7782,33 @@ class SelectionListComponent extends SelectionListBase {
             ? this.optionButtons.map(ref => ref.nativeElement).filter(btn => !btn.disabled)
             : [];
     }
-    setDropdownDirection() {
-        const trigger = this.elementRef.nativeElement.querySelector('.custom-select');
-        const searchTrigger = this.elementRef.nativeElement.querySelector('.options-search__input');
-        const dropdownHeight = 240;
-        if (trigger || searchTrigger) {
-            const rect = trigger?.getBoundingClientRect() || searchTrigger?.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - (rect?.bottom ?? 0);
-            const spaceAbove = (rect?.top ?? 0);
-            if (spaceBelow >= dropdownHeight) {
-                this.openDirection = 'down';
-            }
-            else if (spaceAbove >= dropdownHeight) {
-                this.openDirection = 'top';
-            }
-            else {
-                this.openDirection = spaceBelow > spaceAbove ? 'down' : 'top';
-            }
+    findItemByValue(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const strictMatch = this.items.find((item) => item.value === value);
+        if (strictMatch) {
+            return strictMatch;
+        }
+        const valueId = this.extractComparableId(value);
+        if (valueId === null) {
+            return null;
         }
+        return this.items.find((item) => this.extractComparableId(item.value) === valueId) ?? null;
+    }
+    extractComparableId(value) {
+        if (!value || typeof value !== 'object') {
+            return null;
+        }
+        const id = value['id'];
+        return typeof id === 'string' || typeof id === 'number' ? id : null;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SelectionListComponent, isStandalone: true, selector: "frg-selection-list", inputs: { items: "items", optionTemplate: "optionTemplate", hasSearch: "hasSearch" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-selection-list\"\r\n  [class.selection-list-error]=\"hasError\"\r\n>\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Select\u2026'\"\r\n        aria-label=\"Search options\"\r\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <div class=\"selection-list__actions\">\r\n        @if(searchTerm.length){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n          <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"frg-selection-list__handle-buttons\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"custom-select\"\r\n        [id]=\"id + '-options'\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [class.open]=\"isOpen\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-expanded]=\"isOpen\"\r\n        (click)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-controls]=\"id + '-options'\"\r\n      >\r\n        <span class=\"item-label\" [class.selected]=\"selectedItem\">\r\n          {{ selectedItem?.label || placeholder || 'Select\u2026' }}\r\n        </span>\r\n      </button> \r\n\r\n      <div class=\"selection-list__actions\">\r\n        @if(value && selectedItem){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  >\r\n  </frg-input-validation>\r\n\r\n  @if (isOpen) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\n      @for (item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"item.id === selectedId\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          @if(optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-selection-list{position:relative;display:inline-block;width:100%}:host .frg-selection-list .options-search{position:relative;display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-selection-list .options-search.focus,:host .frg-selection-list .options-search:hover{border-color:#6ea8d9}:host .frg-selection-list .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-selection-list .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-selection-list .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons{display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-selection-list__handle-buttons:hover,:host .frg-selection-list__handle-buttons.focus{border-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;display:flex;align-items:center;font-size:1rem}:host .frg-selection-list__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-selection-list__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select .item-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;color:#5e5f62;opacity:.7}:host .frg-selection-list__handle-buttons .custom-select .selected{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;opacity:1;color:#5e5f62}:host .frg-selection-list .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-selection-list .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-selection-list .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-selection-list .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-selection-list .options .option{display:block;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-selection-list .options .option:hover:not(:disabled),:host .frg-selection-list .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-selection-list .options .option.selected{background-color:#e9f2f9}:host .frg-selection-list .options .option:disabled,:host .frg-selection-list .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-selection-list .options.open-down{top:calc(100% + .25rem)}:host .frg-selection-list .options.open-up{bottom:calc(100% + .25rem)}:host .frg-selection-list .clear-button,:host .frg-selection-list .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-selection-list .clear-button{font-size:.75rem}:host .frg-selection-list .clear-button .fas{line-height:1}:host .frg-selection-list .selection-list__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.125rem;padding-right:.25rem}:host .frg-selection-list .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-selection-list .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-selection-list .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-selection-list .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-selection-list.selection-list-error .options-search,:host .frg-selection-list.selection-list-error .frg-selection-list__handle-buttons{border-bottom-color:#d66a6a}:host .frg-selection-list.selection-list-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SelectionListComponent, isStandalone: true, selector: "frg-selection-list", inputs: { items: "items", optionTemplate: "optionTemplate", hasSearch: "hasSearch" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"frg-selection-list\"\r\n  [class.selection-list-error]=\"hasError\"\r\n>\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Select\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <div class=\"selection-list__actions\">\r\n        @if(searchTerm.length){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n          <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"frg-selection-list__handle-buttons\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"custom-select\"\r\n        [id]=\"id + '-options'\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [class.open]=\"isOpen\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-expanded]=\"isOpen\"\r\n        (click)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-controls]=\"id + '-options'\"\r\n      >\r\n        <span class=\"item-label\" [class.selected]=\"selectedItem\">\r\n          {{ selectedItem?.label || placeholder || 'Select\u2026' }}\r\n        </span>\r\n      </button> \r\n\r\n      <div class=\"selection-list__actions\">\r\n        @if(value && selectedItem){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  >\r\n  </frg-input-validation>\r\n\r\n  @if (isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for (item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"item.id === selectedId\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          @if(optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-selection-list{position:relative;display:inline-block;width:100%}:host .frg-selection-list .options-search{position:relative;display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-selection-list .options-search.focus,:host .frg-selection-list .options-search:hover{border-color:#6ea8d9}:host .frg-selection-list .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-selection-list .options-search:has(.options-search__input:disabled):hover,:host .frg-selection-list .options-search:has(.options-search__input:disabled).focus{border-color:#b9babc}:host .frg-selection-list .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-selection-list .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-selection-list .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons{display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-selection-list__handle-buttons:hover,:host .frg-selection-list__handle-buttons.focus{border-color:#6ea8d9}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled){cursor:not-allowed}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled):hover,:host .frg-selection-list__handle-buttons:has(.custom-select:disabled).focus{border-color:#b9babc}:host .frg-selection-list__handle-buttons .custom-select{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;display:flex;align-items:center;font-size:1rem}:host .frg-selection-list__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-selection-list__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select .item-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;color:#5e5f62;opacity:.7}:host .frg-selection-list__handle-buttons .custom-select .selected{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;opacity:1;color:#5e5f62}:host .frg-selection-list .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-selection-list .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-selection-list .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-selection-list .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-selection-list .options .option{display:block;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-selection-list .options .option:hover:not(:disabled),:host .frg-selection-list .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-selection-list .options .option.selected{background-color:#e9f2f9}:host .frg-selection-list .options .option:disabled,:host .frg-selection-list .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-selection-list .options.open-down{top:calc(100% + .25rem)}:host .frg-selection-list .options.open-up{bottom:calc(100% + .25rem)}:host .frg-selection-list .clear-button,:host .frg-selection-list .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-selection-list .clear-button{font-size:.75rem}:host .frg-selection-list .clear-button .fas{line-height:1}:host .frg-selection-list .selection-list__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.125rem;padding-right:.25rem}:host .frg-selection-list .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-selection-list .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-selection-list .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-selection-list .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-selection-list.selection-list-error .options-search,:host .frg-selection-list.selection-list-error .frg-selection-list__handle-buttons{border-bottom-color:#d66a6a}:host .frg-selection-list.selection-list-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListComponent, decorators: [{
             type: Component,
-            args: [{ selector: "frg-selection-list", imports: [NgTemplateOutlet, InputValidationComponent], template: "<div class=\"frg-selection-list\"\r\n  [class.selection-list-error]=\"hasError\"\r\n>\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Select\u2026'\"\r\n        aria-label=\"Search options\"\r\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <div class=\"selection-list__actions\">\r\n        @if(searchTerm.length){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n          <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"frg-selection-list__handle-buttons\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"custom-select\"\r\n        [id]=\"id + '-options'\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [class.open]=\"isOpen\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-expanded]=\"isOpen\"\r\n        (click)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-controls]=\"id + '-options'\"\r\n      >\r\n        <span class=\"item-label\" [class.selected]=\"selectedItem\">\r\n          {{ selectedItem?.label || placeholder || 'Select\u2026' }}\r\n        </span>\r\n      </button> \r\n\r\n      <div class=\"selection-list__actions\">\r\n        @if(value && selectedItem){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  >\r\n  </frg-input-validation>\r\n\r\n  @if (isOpen) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\n      @for (item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"item.id === selectedId\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          @if(optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-selection-list{position:relative;display:inline-block;width:100%}:host .frg-selection-list .options-search{position:relative;display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-selection-list .options-search.focus,:host .frg-selection-list .options-search:hover{border-color:#6ea8d9}:host .frg-selection-list .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-selection-list .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-selection-list .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons{display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-selection-list__handle-buttons:hover,:host .frg-selection-list__handle-buttons.focus{border-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;display:flex;align-items:center;font-size:1rem}:host .frg-selection-list__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-selection-list__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select .item-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;color:#5e5f62;opacity:.7}:host .frg-selection-list__handle-buttons .custom-select .selected{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;opacity:1;color:#5e5f62}:host .frg-selection-list .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-selection-list .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-selection-list .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-selection-list .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-selection-list .options .option{display:block;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-selection-list .options .option:hover:not(:disabled),:host .frg-selection-list .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-selection-list .options .option.selected{background-color:#e9f2f9}:host .frg-selection-list .options .option:disabled,:host .frg-selection-list .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-selection-list .options.open-down{top:calc(100% + .25rem)}:host .frg-selection-list .options.open-up{bottom:calc(100% + .25rem)}:host .frg-selection-list .clear-button,:host .frg-selection-list .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-selection-list .clear-button{font-size:.75rem}:host .frg-selection-list .clear-button .fas{line-height:1}:host .frg-selection-list .selection-list__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.125rem;padding-right:.25rem}:host .frg-selection-list .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-selection-list .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-selection-list .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-selection-list .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-selection-list.selection-list-error .options-search,:host .frg-selection-list.selection-list-error .frg-selection-list__handle-buttons{border-bottom-color:#d66a6a}:host .frg-selection-list.selection-list-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: "frg-selection-list", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent], template: "<div class=\"frg-selection-list\"\r\n  [class.selection-list-error]=\"hasError\"\r\n>\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n\r\n  @if(hasSearch){\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Select\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <div class=\"selection-list__actions\">\r\n        @if(searchTerm.length){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n          <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  } @else {\r\n    <div class=\"frg-selection-list__handle-buttons\">\r\n      <button\r\n        type=\"button\"\r\n        class=\"custom-select\"\r\n        [id]=\"id + '-options'\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [class.open]=\"isOpen\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-expanded]=\"isOpen\"\r\n        (click)=\"toggleDropdown($event)\"\r\n        (keydown)=\"onKeyDown($event)\"\r\n        [attr.aria-controls]=\"id + '-options'\"\r\n      >\r\n        <span class=\"item-label\" [class.selected]=\"selectedItem\">\r\n          {{ selectedItem?.label || placeholder || 'Select\u2026' }}\r\n        </span>\r\n      </button> \r\n\r\n      <div class=\"selection-list__actions\">\r\n        @if(value && selectedItem){\r\n          <button\r\n            type=\"button\"\r\n            class=\"clear-button\"\r\n            aria-label=\"Clear input\"\r\n            (click)=\"clearValue($event)\"\r\n          >\r\n            <span class=\"fas fa-xmark\"></span>\r\n          </button>\r\n        }\r\n\r\n        <button\r\n          type=\"button\"\r\n          class=\"arrow-button\"\r\n          [class.open]=\"isOpen\"\r\n          aria-label=\"Toggle dropdown\"\r\n          (click)=\"toggleDropdown($event)\"\r\n        >\r\n          <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n        </button>\r\n      </div>\r\n    </div>\r\n  }\r\n  \r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  >\r\n  </frg-input-validation>\r\n\r\n  @if (isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for (item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"item.id === selectedId\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          @if(optionTemplate) {\r\n            <ng-container *ngTemplateOutlet=\"optionTemplate; context: { $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-selection-list{position:relative;display:inline-block;width:100%}:host .frg-selection-list .options-search{position:relative;display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-selection-list .options-search.focus,:host .frg-selection-list .options-search:hover{border-color:#6ea8d9}:host .frg-selection-list .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-selection-list .options-search:has(.options-search__input:disabled):hover,:host .frg-selection-list .options-search:has(.options-search__input:disabled).focus{border-color:#b9babc}:host .frg-selection-list .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-selection-list .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-selection-list .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons{display:flex;align-items:center;gap:0;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-selection-list__handle-buttons:hover,:host .frg-selection-list__handle-buttons.focus{border-color:#6ea8d9}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled){cursor:not-allowed}:host .frg-selection-list__handle-buttons:has(.custom-select:disabled):hover,:host .frg-selection-list__handle-buttons:has(.custom-select:disabled).focus{border-color:#b9babc}:host .frg-selection-list__handle-buttons .custom-select{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;display:flex;align-items:center;font-size:1rem}:host .frg-selection-list__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-selection-list__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-selection-list__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-selection-list__handle-buttons .custom-select .item-label{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;color:#5e5f62;opacity:.7}:host .frg-selection-list__handle-buttons .custom-select .selected{flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;margin-right:.5rem;opacity:1;color:#5e5f62}:host .frg-selection-list .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-selection-list .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-selection-list .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-selection-list .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-selection-list .options .option{display:block;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-selection-list .options .option:hover:not(:disabled),:host .frg-selection-list .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-selection-list .options .option.selected{background-color:#e9f2f9}:host .frg-selection-list .options .option:disabled,:host .frg-selection-list .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-selection-list .options.open-down{top:calc(100% + .25rem)}:host .frg-selection-list .options.open-up{bottom:calc(100% + .25rem)}:host .frg-selection-list .clear-button,:host .frg-selection-list .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-selection-list .clear-button{font-size:.75rem}:host .frg-selection-list .clear-button .fas{line-height:1}:host .frg-selection-list .selection-list__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;gap:.125rem;padding-right:.25rem}:host .frg-selection-list .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-selection-list .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-selection-list .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-selection-list .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-selection-list.selection-list-error .options-search,:host .frg-selection-list.selection-list-error .frg-selection-list__handle-buttons{border-bottom-color:#d66a6a}:host .frg-selection-list.selection-list-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], optionTemplate: [{
@@ -7828,7 +7923,6 @@ class MultiSelectComponent extends SelectionListBase {
         this.hasSearch = false;
         this.showChips = false;
         this.chipsStyle = "light";
-        this.isOpen = false;
         this.searchTerm = "";
         this.selectedIds = [];
         this.focusedIndex = -1;
@@ -7886,7 +7980,7 @@ class MultiSelectComponent extends SelectionListBase {
             return;
         this.isOpen = !this.isOpen;
         if (this.isOpen) {
-            this.setDropdownDirection();
+            this.updateDropdownPosition();
             setTimeout(() => {
                 if (this.hasSearch && this.searchInput) {
                     this.searchInput.nativeElement.focus();
@@ -7964,8 +8058,10 @@ class MultiSelectComponent extends SelectionListBase {
                 break;
             case "ArrowDown":
                 event.preventDefault();
-                if (!this.isOpen)
+                if (!this.isOpen) {
                     this.isOpen = true;
+                    this.updateDropdownPosition();
+                }
                 setTimeout(() => {
                     if (this.hasSearch && this.searchInput) {
                         this.searchInput.nativeElement.focus();
@@ -8013,7 +8109,12 @@ class MultiSelectComponent extends SelectionListBase {
     onFocus() {
         if (!this.disabled) {
             this.isOpen = true;
-            this.setDropdownDirection();
+            this.updateDropdownPosition();
+        }
+    }
+    ngOnChanges(changes) {
+        if (changes['items']) {
+            this.updateView(this.value);
         }
     }
     onSearch(event) {
@@ -8054,8 +8155,21 @@ class MultiSelectComponent extends SelectionListBase {
             this.selectedIds.push(item.id);
         }
     }
-    updateView(_value) {
-        //Intentionally left void, to implement in case is needed
+    updateView(value) {
+        const nextValues = Array.isArray(value) ? value : [];
+        const matchedItems = nextValues
+            .map((currentValue) => this.findItemByValue(currentValue))
+            .filter((item) => item !== null);
+        const matchedIds = new Set(matchedItems.map((item) => item.id));
+        for (const item of this.items) {
+            item.selected = matchedIds.has(item.id);
+        }
+        this.selectedIds = this.items
+            .filter((item) => item.selected)
+            .map((item) => item.id);
+    }
+    getDropdownAnchorElement() {
+        return this.elementRef.nativeElement.querySelector('.custom-select, .options-search__input');
     }
     focusFirstItem() {
         const buttons = this.getEnabledButtons();
@@ -8085,25 +8199,26 @@ class MultiSelectComponent extends SelectionListBase {
             ? this.optionButtons.map(ref => ref.nativeElement).filter(btn => !btn.disabled)
             : [];
     }
-    setDropdownDirection() {
-        const trigger = this.elementRef.nativeElement.querySelector('.custom-select');
-        const searchTrigger = this.elementRef.nativeElement.querySelector('.options-search__input');
-        const dropdownHeight = 240;
-        if (trigger || searchTrigger) {
-            const rect = trigger?.getBoundingClientRect() || searchTrigger?.getBoundingClientRect();
-            const viewportHeight = window.innerHeight;
-            const spaceBelow = viewportHeight - (rect?.bottom ?? 0);
-            const spaceAbove = (rect?.top ?? 0);
-            if (spaceBelow >= dropdownHeight) {
-                this.openDirection = 'down';
-            }
-            else if (spaceAbove >= dropdownHeight) {
-                this.openDirection = 'top';
-            }
-            else {
-                this.openDirection = spaceBelow > spaceAbove ? 'down' : 'top';
-            }
+    findItemByValue(value) {
+        if (value === null || value === undefined) {
+            return null;
+        }
+        const strictMatch = this.items.find((item) => item.value === value);
+        if (strictMatch) {
+            return strictMatch;
+        }
+        const valueId = this.extractComparableId(value);
+        if (valueId === null) {
+            return null;
         }
+        return this.items.find((item) => this.extractComparableId(item.value) === valueId) ?? null;
+    }
+    extractComparableId(value) {
+        if (!value || typeof value !== 'object') {
+            return null;
+        }
+        const id = value['id'];
+        return typeof id === 'string' || typeof id === 'number' ? id : null;
     }
     /**
      * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
@@ -8123,11 +8238,11 @@ class MultiSelectComponent extends SelectionListBase {
         return this.warningList.length > 0;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MultiSelectComponent, isStandalone: true, selector: "frg-multi-select", inputs: { items: "items", hasSearch: "hasSearch", optionTemplate: "optionTemplate", valuesTemplate: "valuesTemplate", showChips: "showChips", chipsStyle: "chipsStyle" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Search\u2026'\"\r\n        aria-label=\"Search options\"\r\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if(showChips && selectedItems.length) {\n      <div class=\"selected-chips selected-chips--below\">\n        @for(item of selectedItems; track item.id) {\n          <frg-chip\n            [id]=\"item.id\"\n            [label]=\"item.label || ''\"\n            size=\"sm\"\n            [style]=\"chipsStyle\"\n            [removable]=\"true\"\n            [disabled]=\"disabled\"\n            (removed)=\"removeItemById($event)\"\n          ></frg-chip>\n        }\n      </div>\n    } @else if(selectedItems.length) {\n      <div class=\"selected-labels\">\n        {{ selectedLabels }}\n      </div>\n    }\n  } @else {\n    <div class=\"frg-multi-select__handle-buttons\">\n      @if(showChips) {\n        <div\n          class=\"custom-select custom-select--chips\"\n          [id]=\"id + '-options'\"\n          [attr.name]=\"id + '-options'\"\n          [class.open]=\"isOpen\"\n          [class.disabled]=\"disabled\"\n          [attr.tabindex]=\"disabled ? -1 : 0\"\n          [attr.aria-expanded]=\"isOpen\"\n          (click)=\"toggleDropdown($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [attr.aria-controls]=\"id + '-options'\"\n        >\n          @if(selectedItems.length) {\n            <div class=\"selected-chips\">\n              @for(item of selectedItems; track item.id) {\n                <frg-chip\n                  [id]=\"item.id\"\n                  [label]=\"item.label || ''\"\n                  size=\"sm\"\n                  [style]=\"chipsStyle\"\n                  [removable]=\"true\"\n                  [disabled]=\"disabled\"\n                  (removed)=\"removeItemById($event)\"\n                ></frg-chip>\n              }\n            </div>\n          } @else {\n            <span class=\"selected-labels__text selected-labels__placeholder\">{{ placeholder || 'Select.' }}</span>\n          }\n        </div>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"custom-select\"\n          [id]=\"id + '-options'\"\n          [attr.name]=\"id + '-options'\"\n          [class.open]=\"isOpen\"\n          [disabled]=\"disabled\"\n          [attr.aria-expanded]=\"isOpen\"\n          (click)=\"toggleDropdown($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [attr.aria-controls]=\"id + '-options'\"\n        >\n          @if(valuesTemplate) {\n            <ng-container \n              [ngTemplateOutlet]=\"valuesTemplate\" \n              [ngTemplateOutletContext]=\"{ $implicit: selectedItems }\"\n            ></ng-container>\n          } @else {\n            <span class=\"selected-labels__text\" [class.selected-labels__placeholder]=\"!selectedItems.length\">{{ selectedLabels }}</span>\n          }\n        </button>\n      }\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\n    </div>\n  }\n\r\n  @if(isOpen) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\n      @for(item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"selectedIds.includes(item.id)\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            [attr.id]=\"id + '-option-' + idx\"\r\n            [attr.name]=\"id + '-option'\"\r\n            [checked]=\"item.selected\"\r\n            readonly\r\n          />\r\n          @if(optionTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  ></frg-input-validation>\r\n</div>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"multi-select__actions\">\r\n    @if((value && selectedItems.length) || (hasSearch && searchTerm.length)) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        aria-label=\"Clear selection\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <span class=\"fas fa-xmark\"></span>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"arrow-button\"\r\n      [class.open]=\"isOpen\"\r\n      aria-label=\"Toggle dropdown\"\r\n      (click)=\"toggleDropdown($event)\"\r\n    >\r\n      <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-multi-select{position:relative;display:inline-block;width:100%}:host .frg-multi-select .options-search{position:relative;display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-multi-select .options-search:has(.open){border-color:#6ea8d9}:host .frg-multi-select .options-search.focus,:host .frg-multi-select .options-search:focus-visible,:host .frg-multi-select .options-search:hover{border-color:#6ea8d9}:host .frg-multi-select .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-multi-select .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons{display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-multi-select__handle-buttons:has(.open){border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:hover,:host .frg-multi-select__handle-buttons:focus-visible,:host .frg-multi-select__handle-buttons.focus{border-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;font-size:1rem;overflow:hidden}:host .frg-multi-select__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-multi-select__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select .item-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.7}:host .frg-multi-select__handle-buttons .custom-select .selected{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .frg-multi-select__handle-buttons .custom-select--chips{min-height:2.25rem;cursor:pointer}:host .frg-multi-select__handle-buttons .custom-select--chips.disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select .multi-select__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding-right:.25rem}:host .frg-multi-select .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-multi-select .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-multi-select .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-multi-select .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-multi-select .options .option{display:inline-flex;gap:.75rem;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-multi-select .options .option:hover:not(:disabled),:host .frg-multi-select .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-multi-select .options .option.selected{background-color:#e9f2f9}:host .frg-multi-select .options .option:disabled,:host .frg-multi-select .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-multi-select .options.open-down{top:calc(100% + .25rem)}:host .frg-multi-select .options.open-up{bottom:calc(100% + .25rem)}:host .frg-multi-select .clear-button,:host .frg-multi-select .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-multi-select .clear-button .fas{line-height:1}:host .frg-multi-select .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-multi-select .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-multi-select .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-multi-select .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-multi-select .selected-labels{padding:.2rem .5rem;font-size:.875rem;color:#5e5f62}:host .frg-multi-select .selected-labels__text{color:#5e5f62}:host .frg-multi-select .selected-labels__placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .selected-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:1.5rem}:host .frg-multi-select .selected-chips--below{padding:.25rem .5rem 0}:host .frg-multi-select .custom-select--chips.disabled frg-chip{pointer-events:none;opacity:.6}:host .frg-multi-select.multi-select-error .options-search,:host .frg-multi-select.multi-select-error .frg-multi-select__handle-buttons{border-bottom-color:#d66a6a}:host .frg-multi-select.multi-select-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: ChipComponent, selector: "frg-chip", inputs: ["id", "label", "style", "size", "icon", "iconPosition", "disabled", "removable"], outputs: ["removed"] }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MultiSelectComponent, isStandalone: true, selector: "frg-multi-select", inputs: { items: "items", hasSearch: "hasSearch", optionTemplate: "optionTemplate", valuesTemplate: "valuesTemplate", showChips: "showChips", chipsStyle: "chipsStyle" }, host: { listeners: { "document:click": "closeDropdown($event)" } }, viewQueries: [{ propertyName: "searchInput", first: true, predicate: ["searchInput"], descendants: true, read: ElementRef }, { propertyName: "optionButtons", predicate: ["optionButton"], descendants: true }], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Search\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if(showChips && selectedItems.length) {\r\n      <div class=\"selected-chips selected-chips--below\">\r\n        @for(item of selectedItems; track item.id) {\r\n          <frg-chip\r\n            [id]=\"item.id\"\r\n            [label]=\"item.label || ''\"\r\n            size=\"sm\"\r\n            [style]=\"chipsStyle\"\r\n            [removable]=\"true\"\r\n            [disabled]=\"disabled\"\r\n            (removed)=\"removeItemById($event)\"\r\n          ></frg-chip>\r\n        }\r\n      </div>\r\n    } @else if(selectedItems.length) {\r\n      <div class=\"selected-labels\">\r\n        {{ selectedLabels }}\r\n      </div>\r\n    }\r\n  } @else {\r\n    <div class=\"frg-multi-select__handle-buttons\">\r\n      @if(showChips) {\r\n        <div\r\n          class=\"custom-select custom-select--chips\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [class.disabled]=\"disabled\"\r\n          [attr.tabindex]=\"disabled ? -1 : 0\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(selectedItems.length) {\r\n            <div class=\"selected-chips\">\r\n              @for(item of selectedItems; track item.id) {\r\n                <frg-chip\r\n                  [id]=\"item.id\"\r\n                  [label]=\"item.label || ''\"\r\n                  size=\"sm\"\r\n                  [style]=\"chipsStyle\"\r\n                  [removable]=\"true\"\r\n                  [disabled]=\"disabled\"\r\n                  (removed)=\"removeItemById($event)\"\r\n                ></frg-chip>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <span class=\"selected-labels__text selected-labels__placeholder\">{{ placeholder || 'Select.' }}</span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"custom-select\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [disabled]=\"disabled\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(valuesTemplate) {\r\n            <ng-container \r\n              [ngTemplateOutlet]=\"valuesTemplate\" \r\n              [ngTemplateOutletContext]=\"{ $implicit: selectedItems }\"\r\n            ></ng-container>\r\n          } @else {\r\n            <span class=\"selected-labels__text\" [class.selected-labels__placeholder]=\"!selectedItems.length\">{{ selectedLabels }}</span>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if(isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for(item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"selectedIds.includes(item.id)\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            [attr.id]=\"id + '-option-' + idx\"\r\n            [attr.name]=\"id + '-option'\"\r\n            [checked]=\"item.selected\"\r\n            readonly\r\n          />\r\n          @if(optionTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  ></frg-input-validation>\r\n</div>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"multi-select__actions\">\r\n    @if((value && selectedItems.length) || (hasSearch && searchTerm.length)) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        aria-label=\"Clear selection\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <span class=\"fas fa-xmark\"></span>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"arrow-button\"\r\n      [class.open]=\"isOpen\"\r\n      aria-label=\"Toggle dropdown\"\r\n      (click)=\"toggleDropdown($event)\"\r\n    >\r\n      <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-multi-select{position:relative;display:inline-block;width:100%}:host .frg-multi-select .options-search{position:relative;display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-multi-select .options-search:has(.open){border-color:#6ea8d9}:host .frg-multi-select .options-search.focus,:host .frg-multi-select .options-search:focus-visible,:host .frg-multi-select .options-search:hover{border-color:#6ea8d9}:host .frg-multi-select .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-multi-select .options-search:has(.options-search__input:disabled):hover,:host .frg-multi-select .options-search:has(.options-search__input:disabled).focus,:host .frg-multi-select .options-search:has(.options-search__input:disabled):focus-visible{border-color:#b9babc}:host .frg-multi-select .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-multi-select .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons{display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-multi-select__handle-buttons:has(.open){border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:hover,:host .frg-multi-select__handle-buttons:focus-visible,:host .frg-multi-select__handle-buttons.focus{border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled),:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled){cursor:not-allowed}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled).focus,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled).focus{border-color:#b9babc}:host .frg-multi-select__handle-buttons .custom-select{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;font-size:1rem;overflow:hidden}:host .frg-multi-select__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-multi-select__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select .item-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.7}:host .frg-multi-select__handle-buttons .custom-select .selected{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .frg-multi-select__handle-buttons .custom-select--chips{min-height:2.25rem;cursor:pointer}:host .frg-multi-select__handle-buttons .custom-select--chips.disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select .multi-select__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding-right:.25rem}:host .frg-multi-select .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-multi-select .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-multi-select .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-multi-select .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-multi-select .options .option{display:inline-flex;gap:.75rem;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-multi-select .options .option:hover:not(:disabled),:host .frg-multi-select .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-multi-select .options .option.selected{background-color:#e9f2f9}:host .frg-multi-select .options .option:disabled,:host .frg-multi-select .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-multi-select .options.open-down{top:calc(100% + .25rem)}:host .frg-multi-select .options.open-up{bottom:calc(100% + .25rem)}:host .frg-multi-select .clear-button,:host .frg-multi-select .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-multi-select .clear-button .fas{line-height:1}:host .frg-multi-select .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-multi-select .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-multi-select .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-multi-select .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-multi-select .selected-labels{padding:.2rem .5rem;font-size:.875rem;color:#5e5f62}:host .frg-multi-select .selected-labels__text{color:#5e5f62}:host .frg-multi-select .selected-labels__placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .selected-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:1.5rem}:host .frg-multi-select .selected-chips--below{padding:.25rem .5rem 0}:host .frg-multi-select .custom-select--chips.disabled frg-chip{pointer-events:none;opacity:.6}:host .frg-multi-select.multi-select-error .options-search,:host .frg-multi-select.multi-select-error .frg-multi-select__handle-buttons{border-bottom-color:#d66a6a}:host .frg-multi-select.multi-select-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: ChipComponent, selector: "frg-chip", inputs: ["id", "label", "style", "size", "icon", "iconPosition", "disabled", "removable"], outputs: ["removed"] }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
             type: Component,
-            args: [{ selector: "frg-multi-select", imports: [NgTemplateOutlet, InputValidationComponent, ChipComponent], template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\r\n        #searchInput\r\n        type=\"text\"\r\n        [attr.name]=\"id + '-options'\"\r\n        [attr.id]=\"id + '-options'\"\r\n        class=\"options-search__input\"\r\n        [class.open]=\"isOpen\"\r\n        [attr.placeholder]=\"'Search\u2026'\"\r\n        aria-label=\"Search options\"\r\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if(showChips && selectedItems.length) {\n      <div class=\"selected-chips selected-chips--below\">\n        @for(item of selectedItems; track item.id) {\n          <frg-chip\n            [id]=\"item.id\"\n            [label]=\"item.label || ''\"\n            size=\"sm\"\n            [style]=\"chipsStyle\"\n            [removable]=\"true\"\n            [disabled]=\"disabled\"\n            (removed)=\"removeItemById($event)\"\n          ></frg-chip>\n        }\n      </div>\n    } @else if(selectedItems.length) {\n      <div class=\"selected-labels\">\n        {{ selectedLabels }}\n      </div>\n    }\n  } @else {\n    <div class=\"frg-multi-select__handle-buttons\">\n      @if(showChips) {\n        <div\n          class=\"custom-select custom-select--chips\"\n          [id]=\"id + '-options'\"\n          [attr.name]=\"id + '-options'\"\n          [class.open]=\"isOpen\"\n          [class.disabled]=\"disabled\"\n          [attr.tabindex]=\"disabled ? -1 : 0\"\n          [attr.aria-expanded]=\"isOpen\"\n          (click)=\"toggleDropdown($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [attr.aria-controls]=\"id + '-options'\"\n        >\n          @if(selectedItems.length) {\n            <div class=\"selected-chips\">\n              @for(item of selectedItems; track item.id) {\n                <frg-chip\n                  [id]=\"item.id\"\n                  [label]=\"item.label || ''\"\n                  size=\"sm\"\n                  [style]=\"chipsStyle\"\n                  [removable]=\"true\"\n                  [disabled]=\"disabled\"\n                  (removed)=\"removeItemById($event)\"\n                ></frg-chip>\n              }\n            </div>\n          } @else {\n            <span class=\"selected-labels__text selected-labels__placeholder\">{{ placeholder || 'Select.' }}</span>\n          }\n        </div>\n      } @else {\n        <button\n          type=\"button\"\n          class=\"custom-select\"\n          [id]=\"id + '-options'\"\n          [attr.name]=\"id + '-options'\"\n          [class.open]=\"isOpen\"\n          [disabled]=\"disabled\"\n          [attr.aria-expanded]=\"isOpen\"\n          (click)=\"toggleDropdown($event)\"\n          (keydown)=\"onKeyDown($event)\"\n          [attr.aria-controls]=\"id + '-options'\"\n        >\n          @if(valuesTemplate) {\n            <ng-container \n              [ngTemplateOutlet]=\"valuesTemplate\" \n              [ngTemplateOutletContext]=\"{ $implicit: selectedItems }\"\n            ></ng-container>\n          } @else {\n            <span class=\"selected-labels__text\" [class.selected-labels__placeholder]=\"!selectedItems.length\">{{ selectedLabels }}</span>\n          }\n        </button>\n      }\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\n    </div>\n  }\n\r\n  @if(isOpen) {\r\n    <div \r\n      class=\"options\"\r\n      [id]=\"id + '-options'\"\r\n      [class.open-up]=\"openDirection === 'top'\"\r\n      [class.open-down]=\"openDirection === 'down'\"\r\n    >\r\n      @for(item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"selectedIds.includes(item.id)\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            [attr.id]=\"id + '-option-' + idx\"\r\n            [attr.name]=\"id + '-option'\"\r\n            [checked]=\"item.selected\"\r\n            readonly\r\n          />\r\n          @if(optionTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  ></frg-input-validation>\r\n</div>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"multi-select__actions\">\r\n    @if((value && selectedItems.length) || (hasSearch && searchTerm.length)) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        aria-label=\"Clear selection\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <span class=\"fas fa-xmark\"></span>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"arrow-button\"\r\n      [class.open]=\"isOpen\"\r\n      aria-label=\"Toggle dropdown\"\r\n      (click)=\"toggleDropdown($event)\"\r\n    >\r\n      <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-multi-select{position:relative;display:inline-block;width:100%}:host .frg-multi-select .options-search{position:relative;display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-multi-select .options-search:has(.open){border-color:#6ea8d9}:host .frg-multi-select .options-search.focus,:host .frg-multi-select .options-search:focus-visible,:host .frg-multi-select .options-search:hover{border-color:#6ea8d9}:host .frg-multi-select .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-multi-select .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons{display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-multi-select__handle-buttons:has(.open){border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:hover,:host .frg-multi-select__handle-buttons:focus-visible,:host .frg-multi-select__handle-buttons.focus{border-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;font-size:1rem;overflow:hidden}:host .frg-multi-select__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-multi-select__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select .item-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.7}:host .frg-multi-select__handle-buttons .custom-select .selected{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .frg-multi-select__handle-buttons .custom-select--chips{min-height:2.25rem;cursor:pointer}:host .frg-multi-select__handle-buttons .custom-select--chips.disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select .multi-select__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding-right:.25rem}:host .frg-multi-select .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-multi-select .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-multi-select .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-multi-select .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-multi-select .options .option{display:inline-flex;gap:.75rem;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-multi-select .options .option:hover:not(:disabled),:host .frg-multi-select .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-multi-select .options .option.selected{background-color:#e9f2f9}:host .frg-multi-select .options .option:disabled,:host .frg-multi-select .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-multi-select .options.open-down{top:calc(100% + .25rem)}:host .frg-multi-select .options.open-up{bottom:calc(100% + .25rem)}:host .frg-multi-select .clear-button,:host .frg-multi-select .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-multi-select .clear-button .fas{line-height:1}:host .frg-multi-select .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-multi-select .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-multi-select .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-multi-select .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-multi-select .selected-labels{padding:.2rem .5rem;font-size:.875rem;color:#5e5f62}:host .frg-multi-select .selected-labels__text{color:#5e5f62}:host .frg-multi-select .selected-labels__placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .selected-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:1.5rem}:host .frg-multi-select .selected-chips--below{padding:.25rem .5rem 0}:host .frg-multi-select .custom-select--chips.disabled frg-chip{pointer-events:none;opacity:.6}:host .frg-multi-select.multi-select-error .options-search,:host .frg-multi-select.multi-select-error .frg-multi-select__handle-buttons{border-bottom-color:#d66a6a}:host .frg-multi-select.multi-select-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+            args: [{ selector: "frg-multi-select", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent, ChipComponent], template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n  <label [attr.for]=\"id + '-options'\">{{ label }}</label>\r\n \r\n  @if(hasSearch) {\r\n    <div class=\"options-search\">\r\n      <input\n        #searchInput\n        type=\"text\"\n        [attr.name]=\"id + '-options'\"\n        [attr.id]=\"id + '-options'\"\n        class=\"options-search__input\"\n        [disabled]=\"disabled\"\n        [class.open]=\"isOpen\"\n        [attr.placeholder]=\"'Search\u2026'\"\n        aria-label=\"Search options\"\n        role=\"searchbox\"\r\n        [value]=\"searchTerm\"\r\n        (input)=\"onSearch($event)\"\r\n        (blur)=\"onBlur($event)\"\r\n        (focus)=\"onFocus()\"\r\n        (keydown)=\"onSearchKeyDown($event)\"\r\n      />\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n\r\n    @if(showChips && selectedItems.length) {\r\n      <div class=\"selected-chips selected-chips--below\">\r\n        @for(item of selectedItems; track item.id) {\r\n          <frg-chip\r\n            [id]=\"item.id\"\r\n            [label]=\"item.label || ''\"\r\n            size=\"sm\"\r\n            [style]=\"chipsStyle\"\r\n            [removable]=\"true\"\r\n            [disabled]=\"disabled\"\r\n            (removed)=\"removeItemById($event)\"\r\n          ></frg-chip>\r\n        }\r\n      </div>\r\n    } @else if(selectedItems.length) {\r\n      <div class=\"selected-labels\">\r\n        {{ selectedLabels }}\r\n      </div>\r\n    }\r\n  } @else {\r\n    <div class=\"frg-multi-select__handle-buttons\">\r\n      @if(showChips) {\r\n        <div\r\n          class=\"custom-select custom-select--chips\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [class.disabled]=\"disabled\"\r\n          [attr.tabindex]=\"disabled ? -1 : 0\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(selectedItems.length) {\r\n            <div class=\"selected-chips\">\r\n              @for(item of selectedItems; track item.id) {\r\n                <frg-chip\r\n                  [id]=\"item.id\"\r\n                  [label]=\"item.label || ''\"\r\n                  size=\"sm\"\r\n                  [style]=\"chipsStyle\"\r\n                  [removable]=\"true\"\r\n                  [disabled]=\"disabled\"\r\n                  (removed)=\"removeItemById($event)\"\r\n                ></frg-chip>\r\n              }\r\n            </div>\r\n          } @else {\r\n            <span class=\"selected-labels__text selected-labels__placeholder\">{{ placeholder || 'Select.' }}</span>\r\n          }\r\n        </div>\r\n      } @else {\r\n        <button\r\n          type=\"button\"\r\n          class=\"custom-select\"\r\n          [id]=\"id + '-options'\"\r\n          [attr.name]=\"id + '-options'\"\r\n          [class.open]=\"isOpen\"\r\n          [disabled]=\"disabled\"\r\n          [attr.aria-expanded]=\"isOpen\"\r\n          (click)=\"toggleDropdown($event)\"\r\n          (keydown)=\"onKeyDown($event)\"\r\n          [attr.aria-controls]=\"id + '-options'\"\r\n        >\r\n          @if(valuesTemplate) {\r\n            <ng-container \r\n              [ngTemplateOutlet]=\"valuesTemplate\" \r\n              [ngTemplateOutletContext]=\"{ $implicit: selectedItems }\"\r\n            ></ng-container>\r\n          } @else {\r\n            <span class=\"selected-labels__text\" [class.selected-labels__placeholder]=\"!selectedItems.length\">{{ selectedLabels }}</span>\r\n          }\r\n        </button>\r\n      }\r\n      <ng-container [ngTemplateOutlet]=\"buttonsTemplate\"></ng-container>\r\n    </div>\r\n  }\r\n\r\n  @if(isOpen) {\n    <div \n      class=\"options\"\n      [id]=\"id + '-options'\"\n      [ngStyle]=\"dropdownStyles\"\n      [class.open-up]=\"openDirection === 'top'\"\n      [class.open-down]=\"openDirection === 'down'\"\n    >\n      @for(item of filteredItems; track item.id; let idx = $index) {\r\n        <button\r\n          #optionButton\r\n          type=\"button\"\r\n          class=\"option\"\r\n          [class.disabled]=\"item.disabled\"\r\n          [class.selected]=\"selectedIds.includes(item.id)\"\r\n          [disabled]=\"item.disabled\"\r\n          (focus)=\"onFocus()\"\r\n          (blur)=\"onBlur($event)\"\r\n          (click)=\"selectItem(item, $event)\"\r\n          (keydown)=\"onOptionKeyDown($event, item, idx)\"\r\n        >\r\n          <input\r\n            type=\"checkbox\"\r\n            [attr.id]=\"id + '-option-' + idx\"\r\n            [attr.name]=\"id + '-option'\"\r\n            [checked]=\"item.selected\"\r\n            readonly\r\n          />\r\n          @if(optionTemplate) {\r\n            <ng-container [ngTemplateOutlet]=\"optionTemplate\" [ngTemplateOutletContext]=\"{ $implicit: item }\"></ng-container>\r\n          } @else {\r\n            {{ item.label }}\r\n          }\r\n        </button>\r\n      }\r\n    </div>\r\n  }\r\n\r\n  <frg-input-validation\r\n    [errorList]=\"errorList\"\r\n    [isFormInvalid]=\"hasError\"\r\n  ></frg-input-validation>\r\n</div>\r\n\r\n<ng-template #buttonsTemplate>\r\n  <div class=\"multi-select__actions\">\r\n    @if((value && selectedItems.length) || (hasSearch && searchTerm.length)) {\r\n      <button\r\n        type=\"button\"\r\n        class=\"clear-button\"\r\n        aria-label=\"Clear selection\"\r\n        (click)=\"clearValue($event)\"\r\n      >\r\n        <span class=\"fas fa-xmark\"></span>\r\n      </button>\r\n    }\r\n    <button\r\n      type=\"button\"\r\n      class=\"arrow-button\"\r\n      [class.open]=\"isOpen\"\r\n      aria-label=\"Toggle dropdown\"\r\n      (click)=\"toggleDropdown($event)\"\r\n    >\r\n      <span class=\"arrow-icon fas fa-chevron-down\"></span>\r\n    </button>\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [":host{display:block;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\"}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem 0}:host .frg-multi-select{position:relative;display:inline-block;width:100%}:host .frg-multi-select .options-search{position:relative;display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);transition:border-color .3s}:host .frg-multi-select .options-search:has(.open){border-color:#6ea8d9}:host .frg-multi-select .options-search.focus,:host .frg-multi-select .options-search:focus-visible,:host .frg-multi-select .options-search:hover{border-color:#6ea8d9}:host .frg-multi-select .options-search:has(.options-search__input:disabled){cursor:not-allowed}:host .frg-multi-select .options-search:has(.options-search__input:disabled):hover,:host .frg-multi-select .options-search:has(.options-search__input:disabled).focus,:host .frg-multi-select .options-search:has(.options-search__input:disabled):focus-visible{border-color:#b9babc}:host .frg-multi-select .options-search__input{flex:1;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";font-size:1rem;color:#5e5f62;cursor:pointer;outline:none}:host .frg-multi-select .options-search__input::placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .options-search__input:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons{display:flex;align-items:center;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:transparent;font-family:Open Sans,Roboto,system-ui,-apple-system,Segoe UI,Helvetica Neue,Noto Sans,Liberation Sans,Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",Segoe UI Symbol,\"Noto Color Emoji\";color:#5e5f62;cursor:pointer;transition:border-color .3s;position:relative}:host .frg-multi-select__handle-buttons:has(.open){border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:hover,:host .frg-multi-select__handle-buttons:focus-visible,:host .frg-multi-select__handle-buttons.focus{border-color:#6ea8d9}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled),:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled){cursor:not-allowed}:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select:disabled).focus,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):hover,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled):focus-visible,:host .frg-multi-select__handle-buttons:has(.custom-select--chips.disabled).focus{border-color:#b9babc}:host .frg-multi-select__handle-buttons .custom-select{flex:1 1 auto;min-width:0;display:flex;align-items:center;padding:.25rem 3rem .25rem .5rem;border:none;background:transparent;text-align:left;font-size:1rem;overflow:hidden}:host .frg-multi-select__handle-buttons .custom-select:focus-visible{outline:none}:host .frg-multi-select__handle-buttons .custom-select:disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select__handle-buttons .custom-select.open{border-bottom-color:#6ea8d9}:host .frg-multi-select__handle-buttons .custom-select .item-label{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;opacity:.7}:host .frg-multi-select__handle-buttons .custom-select .selected{flex:1 1 auto;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host .frg-multi-select__handle-buttons .custom-select--chips{min-height:2.25rem;cursor:pointer}:host .frg-multi-select__handle-buttons .custom-select--chips.disabled{cursor:not-allowed;opacity:.6}:host .frg-multi-select .multi-select__actions{position:absolute;right:0;top:50%;transform:translateY(-50%);display:inline-flex;align-items:center;padding-right:.25rem}:host .frg-multi-select .options{position:absolute;left:0;right:0;background:#fff;border-radius:.25rem;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;z-index:10;max-height:240px;overflow-y:auto;animation:dropdown-fade-in .2s ease-in-out}:host .frg-multi-select .options::-webkit-scrollbar{width:.3rem;background-color:transparent}:host .frg-multi-select .options::-webkit-scrollbar-thumb{background-color:#6ea8d9;border-radius:.1rem}:host .frg-multi-select .options::-webkit-scrollbar-thumb:hover{background-color:#4690ce}:host .frg-multi-select .options .option{display:inline-flex;gap:.75rem;width:100%;padding:.5rem 1rem;background:transparent;border:none;text-align:left;color:#5e5f62;font-size:.95rem;cursor:pointer;transition:background-color .15s ease,color .15s ease}:host .frg-multi-select .options .option:hover:not(:disabled),:host .frg-multi-select .options .option:focus-visible:not(:disabled){background-color:#f1f6fb;outline:none}:host .frg-multi-select .options .option.selected{background-color:#e9f2f9}:host .frg-multi-select .options .option:disabled,:host .frg-multi-select .options .option.disabled{opacity:.5;cursor:not-allowed}:host .frg-multi-select .options.open-down{top:calc(100% + .25rem)}:host .frg-multi-select .options.open-up{bottom:calc(100% + .25rem)}:host .frg-multi-select .clear-button,:host .frg-multi-select .arrow-button{background:transparent;border:none;cursor:pointer;padding:0;width:1.25rem;height:1.25rem;display:flex;align-items:center;justify-content:center;font-size:.75rem;line-height:1;color:#5e5f62}:host .frg-multi-select .clear-button .fas{line-height:1}:host .frg-multi-select .arrow-button{display:flex;align-items:center;justify-content:center;background:transparent;border:none;cursor:pointer;transition:transform .3s ease}:host .frg-multi-select .arrow-button:disabled{cursor:not-allowed;opacity:.5}:host .frg-multi-select .arrow-icon{font-size:.75rem;transition:transform .3s ease}:host .frg-multi-select .arrow-button.open .arrow-icon{transform:rotate(180deg)}:host .frg-multi-select .selected-labels{padding:.2rem .5rem;font-size:.875rem;color:#5e5f62}:host .frg-multi-select .selected-labels__text{color:#5e5f62}:host .frg-multi-select .selected-labels__placeholder{color:#5e5f62;opacity:.7}:host .frg-multi-select .selected-chips{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;min-height:1.5rem}:host .frg-multi-select .selected-chips--below{padding:.25rem .5rem 0}:host .frg-multi-select .custom-select--chips.disabled frg-chip{pointer-events:none;opacity:.6}:host .frg-multi-select.multi-select-error .options-search,:host .frg-multi-select.multi-select-error .frg-multi-select__handle-buttons{border-bottom-color:#d66a6a}:host .frg-multi-select.multi-select-error label{color:#d66a6a}@keyframes dropdown-fade-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}\n"] }]
         }], propDecorators: { items: [{
                 type: Input
             }], hasSearch: [{
@@ -8549,6 +8664,7 @@ class NebulaComponent {
                     baseFrequency: `${startFreq} ${endFreq}`,
                     duration: 8000,
                     direction: 'alternate',
+                    alternate: true,
                     loop: true,
                     ease: 'easeInOutSine'
                 }));

package/index.d.ts

@@ -908,6 +908,13 @@ interface ITBodyCell {
     icon?: ITBodyCellIcon;
     fieldPipe?: IFieldPipe;
     customClass?: GenericFunction<string>;
+    template?: TemplateRef<ITableCellTemplateContext<any>>;
+}
+interface ITableCellTemplateContext<T> {
+    $implicit: T;
+    item: T;
+    value: unknown;
+    cell: ITBodyCell;
 }
 interface ITBodyCellIcon {
     iconClass: string;
@@ -1007,6 +1014,8 @@ declare class TableComponent<T> implements OnInit {
      * @see ITBodyCell
      */
     handleIconClick(cell: ITBodyCell, item: T): void;
+    getCellValue(item: T, cell: ITBodyCell): unknown;
+    private getNestedPropertyValueByPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<TableComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<TableComponent<any>, "frg-table", never, { "configTable": { "alias": "configTable"; "required": false; }; "styleType": { "alias": "styleType"; "required": false; }; "rowSize": { "alias": "rowSize"; "required": false; }; }, { "reloadTableEvent": "reloadTableEvent"; }, never, never, true, never>;
 }
@@ -3109,15 +3118,25 @@ type SelectionListPosition = 'top' | 'down';
  *
  * @see ControlValueAccessor
  */
-declare abstract class SelectionListBase<T> extends InputBase<T> implements ControlValueAccessor, OnInit {
+declare abstract class SelectionListBase<T> extends InputBase<T> implements ControlValueAccessor, OnInit, OnDestroy {
+    protected readonly dropdownGap = 4;
+    protected readonly dropdownMaxHeight = 240;
+    protected isOpen: boolean;
+    protected dropdownStyles: Record<string, string>;
+    private readonly onViewportChange;
     /**
      * Direction of selection list when it opens.
      */
     protected openDirection: SelectionListPosition;
+    ngOnInit(): void;
+    ngOnDestroy(): void;
+    protected onWindowResize(): void;
     /**
      * Clear the value of input
      */
     protected abstract clearValue(event: Event): void;
+    protected abstract getDropdownAnchorElement(): HTMLElement | null;
+    protected updateDropdownPosition(): void;
     /**
      * Handles selection change event.
      * Subclasses can override to provide custom behavior.
@@ -3136,14 +3155,13 @@ interface SelectionListItem<T> {
     disabled?: boolean;
 }
 
-declare class SelectionListComponent<T> extends SelectionListBase<T> {
+declare class SelectionListComponent<T> extends SelectionListBase<T> implements OnChanges {
     private readonly elementRef;
     items: Array<SelectionListItem<T>>;
     optionTemplate?: TemplateRef<unknown>;
     hasSearch: boolean;
     optionButtons: QueryList<ElementRef<HTMLButtonElement>>;
     searchInput?: ElementRef<HTMLInputElement>;
-    protected isOpen: boolean;
     protected searchTerm: string;
     protected selectedId: string;
     private focusedIndex;
@@ -3167,15 +3185,18 @@ declare class SelectionListComponent<T> extends SelectionListBase<T> {
     protected onOptionKeyDown(event: KeyboardEvent, item: SelectionListItem<T>, index: number): void;
     protected onBlur(event: FocusEvent): void;
     protected onFocus(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     protected onSearch(event: Event): void;
     protected onSearchKeyDown(event: KeyboardEvent): void;
     protected updateDisabledState(_isDisabled: boolean): void;
-    protected updateView(_value: T | null): void;
+    protected updateView(value: T | null): void;
+    protected getDropdownAnchorElement(): HTMLElement | null;
     private focusFirstItem;
     private focusNextItem;
     private focusPreviousItem;
     private getEnabledButtons;
-    private setDropdownDirection;
+    private findItemByValue;
+    private extractComparableId;
     static ɵfac: i0.ɵɵFactoryDeclaration<SelectionListComponent<any>, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<SelectionListComponent<any>, "frg-selection-list", never, { "items": { "alias": "items"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; }, {}, never, never, true, never>;
 }
@@ -3320,7 +3341,7 @@ interface Chip extends StatusIndicator {
     removable?: boolean;
 }
 
-declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> {
+declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> implements OnChanges {
     private readonly elementRef;
     items: Array<SelectionListItem<T>>;
     hasSearch: boolean;
@@ -3330,7 +3351,6 @@ declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> {
     chipsStyle: TChipType;
     optionButtons: QueryList<ElementRef<HTMLButtonElement>>;
     searchInput?: ElementRef<HTMLInputElement>;
-    protected isOpen: boolean;
     protected searchTerm: string;
     protected selectedIds: Array<string>;
     private focusedIndex;
@@ -3348,16 +3368,19 @@ declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> {
     protected onOptionKeyDown(event: KeyboardEvent, item: SelectionListItem<T>, index: number): void;
     protected onBlur(event: FocusEvent): void;
     protected onFocus(): void;
+    ngOnChanges(changes: SimpleChanges): void;
     protected onSearch(event: Event): void;
     protected onSearchKeyDown(event: KeyboardEvent): void;
     protected updateDisabledState(_isDisabled: boolean): void;
     protected updateSelection(item: SelectionListItem<T>, isAlreadySelected: boolean): void;
-    protected updateView(_value: Array<T> | null): void;
+    protected updateView(value: Array<T> | null): void;
+    protected getDropdownAnchorElement(): HTMLElement | null;
     private focusFirstItem;
     private focusNextItem;
     private focusPreviousItem;
     private getEnabledButtons;
-    private setDropdownDirection;
+    private findItemByValue;
+    private extractComparableId;
     /**
      * Returns warning messages. Consumers may pass arbitrary warnings via `warningMessages`.
      * Falls back to DEFAULT_INPUT_MULTI_SELECT_WARNINGS_MESSAGES or a generic message.
@@ -4424,4 +4447,4 @@ declare class TextAnimateDirective implements OnDestroy {
 }
 
 export { AccordionComponent, AnimateDirective, BlobMorphComponent, BreadcrumbComponent, ButtonComponent, CardComponent, ChipComponent, ChunkPipe, CodeBlockComponent, ComponentAnimateDirective, ContainerComponent, ContentBlurComponent, DEFAULT_CONFIG, DividerComponent, DynamicPipe, EnumDirectionSortTable, FieldArrayPositionPipe, FragmentsAnimateService, FragmentsPopoverDirective, FragmentsTooltipDirective, FrgBadgeDirective, GalaxyComponent, HoverAnimateDirective, InputCalendarComponent, InputCheckboxComponent, InputCheckboxGroupComponent, InputClockPickerComponent, InputDateComponent, InputDateTimeComponent, InputFileUploadComponent, InputNumberComponent, InputRadioGroupComponent, InputSliderComponent, InputTextComponent, InputTimeComponent, InputToggleSwitchComponent, InputValidationComponent, ModalComponent, MultiSelectComponent, NEBULA_DEFAULT_CONFIG, NebulaComponent, PillComponent, ProgressBarComponent, PulseLoaderComponent, SafeHtmlPipe, SanitizeHtmlPipe, SectionComponent, SelectionListComponent, SeparatorComponent, SideNavComponent, SkeletonLoaderComponent, SmallPaginationComponent, SnackbarComponent, SparkleSectionComponent, SpinnerComponent, StaggerAnimateDirective, StepperComponent, TableComponent, TabsComponent, TagComponent, TextAnimateDirective, TimelineAnimateDirective, TitleBarComponent, ToastComponent, ToastStackComponent, TypeOfArrayPipe, deepMerge, generateId, generateNumberId, generateUUID, generateUniqueId, getActivatedRouteChild, getTimestampISO, getTimestampMillis, isObjectEmpty, normalizeNumber, orderList, paginationList, sortTable };
-export type { AccordionItem, AccordionItemContext, AccordionToggleEvent, ArrayOneOrMore, Badge, BreadcrumbItem, Chip, CodeBlockBody, CodeBlockConfig, CodeBlockFooter, CodeBlockHeader, DateFormat, DateTimeFormat, DeepRequired, FragnimateBaseAnimation, FragnimateComponentParams, FragnimateHoverParams, FragnimateParams, FragnimateStaggerParams, FragnimateTextParams, FragnimateTimelineParams, GalaxyConfig, GenericFunction, IActionElement, IBaseAction, IConfigTable, IEventAction, IFieldPipe, ILinkAction, IPaginationOutput, ISideNavConfig, ISideNavItem, ISideNavSection, ITBody, ITBodyAction, ITBodyCell, ITBodyCellIcon, ITBodyColumn, ITCaption, ITHead, ITHeadAction, ITHeadColumn, ITPagination, ITSort, ITTitleBar, ITTitleBarFilter, ITTitleBarSearch, ITooltipElement, InputCheckboxGroupItem, InputRadioGroupItem, ModalCloseEvent, NebulaAnimations, NebulaBlob, NebulaColors, NebulaConfig, NebulaCoreConfig, NgClassValue, Pill, SelectionListItem, SnackbarCloseEvent, Star, StatusIndicator, StepChangeEvent, StepItem, StepItemContext, StepValidationContext, StepValidationEvent, StepValidator, TAccordionSize, TAccordionStyle, TBasePosition, TBaseSideNavSize, TBaseSideNavStyle, TBaseSize, TBaseStatusIconPosition, TBaseStatusSize, TBaseStatusStyle, TBaseStyle, TBehaviourAction, TButtonIconPosition, TButtonShape, TButtonSize, TButtonStyle, TButtonType, TCardStyle, TChipIconPosition, TChipSize, TChipType, TContainerSize, TCustomNgClass, TDividerOrientation, TDividerSpacing, THLJSLanguage, TIconPosition, TInputType, TModalCloseReason, TModalSize, TNebulaBlendMode, TPillIconPosition, TPillSize, TPillType, TProgressBarAnimation, TProgressBarSize, TProgressBarType, TPulseLoaderSize, TPulseLoaderType, TSectionHeading, TSectionSpacing, TSeparatorSize, TSideNavLink, TSkeletonLoaderSize, TSkeletonLoaderType, TSnackbarCloseReason, TSnackbarPosition, TSnackbarSize, TSnackbarStyle, TSpinnerSize, TSpinnerType, TStepNavigationSource, TStepperMotion, TStepperOrientation, TTabSize, TTabStyle, TTagIconPosition, TTagSize, TTagType, TToastCloseReason, TToastPosition, TToastSize, TToastStyle, TabChangeEvent, TabItem, TabItemContext, Tag, TimeFormat, ToastCloseEvent, ToastStackCloseEvent, ToastStackItem, TooltipPosition, TypeForm, Without, XOR };
+export type { AccordionItem, AccordionItemContext, AccordionToggleEvent, ArrayOneOrMore, Badge, BreadcrumbItem, Chip, CodeBlockBody, CodeBlockConfig, CodeBlockFooter, CodeBlockHeader, DateFormat, DateTimeFormat, DeepRequired, FragnimateBaseAnimation, FragnimateComponentParams, FragnimateHoverParams, FragnimateParams, FragnimateStaggerParams, FragnimateTextParams, FragnimateTimelineParams, GalaxyConfig, GenericFunction, IActionElement, IBaseAction, IConfigTable, IEventAction, IFieldPipe, ILinkAction, IPaginationOutput, ISideNavConfig, ISideNavItem, ISideNavSection, ITBody, ITBodyAction, ITBodyCell, ITBodyCellIcon, ITBodyColumn, ITCaption, ITHead, ITHeadAction, ITHeadColumn, ITPagination, ITSort, ITTitleBar, ITTitleBarFilter, ITTitleBarSearch, ITableCellTemplateContext, ITooltipElement, InputCheckboxGroupItem, InputRadioGroupItem, ModalCloseEvent, NebulaAnimations, NebulaBlob, NebulaColors, NebulaConfig, NebulaCoreConfig, NgClassValue, Pill, SelectionListItem, SnackbarCloseEvent, Star, StatusIndicator, StepChangeEvent, StepItem, StepItemContext, StepValidationContext, StepValidationEvent, StepValidator, TAccordionSize, TAccordionStyle, TBasePosition, TBaseSideNavSize, TBaseSideNavStyle, TBaseSize, TBaseStatusIconPosition, TBaseStatusSize, TBaseStatusStyle, TBaseStyle, TBehaviourAction, TButtonIconPosition, TButtonShape, TButtonSize, TButtonStyle, TButtonType, TCardStyle, TChipIconPosition, TChipSize, TChipType, TContainerSize, TCustomNgClass, TDividerOrientation, TDividerSpacing, THLJSLanguage, TIconPosition, TInputType, TModalCloseReason, TModalSize, TNebulaBlendMode, TPillIconPosition, TPillSize, TPillType, TProgressBarAnimation, TProgressBarSize, TProgressBarType, TPulseLoaderSize, TPulseLoaderType, TSectionHeading, TSectionSpacing, TSeparatorSize, TSideNavLink, TSkeletonLoaderSize, TSkeletonLoaderType, TSnackbarCloseReason, TSnackbarPosition, TSnackbarSize, TSnackbarStyle, TSpinnerSize, TSpinnerType, TStepNavigationSource, TStepperMotion, TStepperOrientation, TTabSize, TTabStyle, TTagIconPosition, TTagSize, TTagType, TToastCloseReason, TToastPosition, TToastSize, TToastStyle, TabChangeEvent, TabItem, TabItemContext, Tag, TimeFormat, ToastCloseEvent, ToastStackCloseEvent, ToastStackItem, TooltipPosition, TypeForm, Without, XOR };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tacdaed/fragments",
-  "version": "1.0.0-beta.13",
+  "version": "1.0.0-beta.15",
   "peerDependencies": {
     "@angular/common": "^20.2.0",
     "@angular/core": "^20.2.0",