@tacdaed/fragments 1.0.0-beta.16 → 1.0.0-beta.18
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/tacdaed-fragments.mjs +32 -8
- package/index.d.ts +11 -3
- package/package.json +1 -1
|
@@ -2110,7 +2110,7 @@ class TableComponent {
|
|
|
2110
2110
|
return source?.[positionArray];
|
|
2111
2111
|
}
|
|
2112
2112
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2113
|
-
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" }] }); }
|
|
2113
|
+
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.template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"cell.template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: item,\r\n item: item,\r\n value: getCellValue(item, cell),\r\n cell: cell\r\n }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"cellDefaultTpl\"\r\n [ngTemplateOutletContext]=\"{ cells: cell, item: item }\"\r\n ></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cellDefaultTpl 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" }] }); }
|
|
2114
2114
|
}
|
|
2115
2115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: TableComponent, decorators: [{
|
|
2116
2116
|
type: Component,
|
|
@@ -2126,7 +2126,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
2126
2126
|
FragmentsTooltipDirective,
|
|
2127
2127
|
ButtonComponent,
|
|
2128
2128
|
ReactiveFormsModule,
|
|
2129
|
-
], 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"] }]
|
|
2129
|
+
], 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.template) {\r\n <ng-container\r\n [ngTemplateOutlet]=\"cell.template\"\r\n [ngTemplateOutletContext]=\"{\r\n $implicit: item,\r\n item: item,\r\n value: getCellValue(item, cell),\r\n cell: cell\r\n }\"\r\n ></ng-container>\r\n } @else {\r\n <ng-container\r\n [ngTemplateOutlet]=\"cellDefaultTpl\"\r\n [ngTemplateOutletContext]=\"{ cells: cell, item: item }\"\r\n ></ng-container>\r\n }\r\n</ng-template>\r\n\r\n<ng-template #cellDefaultTpl 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"] }]
|
|
2130
2130
|
}], propDecorators: { configTable: [{
|
|
2131
2131
|
type: Input
|
|
2132
2132
|
}], styleType: [{
|
|
@@ -7532,6 +7532,10 @@ class SelectionListComponent extends SelectionListBase {
|
|
|
7532
7532
|
constructor() {
|
|
7533
7533
|
super(...arguments);
|
|
7534
7534
|
this.elementRef = inject(ElementRef);
|
|
7535
|
+
this.required = false;
|
|
7536
|
+
this.label = '';
|
|
7537
|
+
this.placeholder = '';
|
|
7538
|
+
this.showValidation = true;
|
|
7535
7539
|
this.items = [];
|
|
7536
7540
|
this.hasSearch = false;
|
|
7537
7541
|
this.searchTerm = "";
|
|
@@ -7806,12 +7810,20 @@ class SelectionListComponent extends SelectionListBase {
|
|
|
7806
7810
|
return typeof id === 'string' || typeof id === 'number' ? id : null;
|
|
7807
7811
|
}
|
|
7808
7812
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7809
|
-
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\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear input\"\n [disabled]=\"disabled\"\n (click)=\"clearValue($event)\"\n >\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\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear input\"\n [disabled]=\"disabled\"\n (click)=\"clearValue($event)\"\n >\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"] }] }); }
|
|
7813
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: SelectionListComponent, isStandalone: true, selector: "frg-selection-list", inputs: { required: "required", label: "label", placeholder: "placeholder", showValidation: "showValidation", 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 | inputRequiredLabel: required }}</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 [disabled]=\"disabled\"\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 [disabled]=\"disabled\"\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 [disabled]=\"disabled\"\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 @if(showValidation){\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n }\r\n\r\n @if (isOpen) {\r\n <div \r\n class=\"options\"\r\n [id]=\"id + '-options'\"\r\n [ngStyle]=\"dropdownStyles\"\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: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"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
7810
7814
|
}
|
|
7811
7815
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: SelectionListComponent, decorators: [{
|
|
7812
7816
|
type: Component,
|
|
7813
|
-
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\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear input\"\n [disabled]=\"disabled\"\n (click)=\"clearValue($event)\"\n >\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\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear input\"\n [disabled]=\"disabled\"\n (click)=\"clearValue($event)\"\n >\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"] }]
|
|
7814
|
-
}], propDecorators: {
|
|
7817
|
+
args: [{ selector: "frg-selection-list", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent, InputRequiredLabelPipe], template: "<div class=\"frg-selection-list\"\r\n [class.selection-list-error]=\"hasError\"\r\n>\r\n <label [attr.for]=\"id + '-options'\">{{ label | inputRequiredLabel: required }}</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 [disabled]=\"disabled\"\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 [disabled]=\"disabled\"\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 [disabled]=\"disabled\"\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 @if(showValidation){\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n }\r\n\r\n @if (isOpen) {\r\n <div \r\n class=\"options\"\r\n [id]=\"id + '-options'\"\r\n [ngStyle]=\"dropdownStyles\"\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: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"] }]
|
|
7818
|
+
}], propDecorators: { required: [{
|
|
7819
|
+
type: Input
|
|
7820
|
+
}], label: [{
|
|
7821
|
+
type: Input
|
|
7822
|
+
}], placeholder: [{
|
|
7823
|
+
type: Input
|
|
7824
|
+
}], showValidation: [{
|
|
7825
|
+
type: Input
|
|
7826
|
+
}], items: [{
|
|
7815
7827
|
type: Input
|
|
7816
7828
|
}], optionTemplate: [{
|
|
7817
7829
|
type: Input
|
|
@@ -7921,6 +7933,10 @@ class MultiSelectComponent extends SelectionListBase {
|
|
|
7921
7933
|
constructor() {
|
|
7922
7934
|
super(...arguments);
|
|
7923
7935
|
this.elementRef = inject(ElementRef);
|
|
7936
|
+
this.required = false;
|
|
7937
|
+
this.label = '';
|
|
7938
|
+
this.placeholder = '';
|
|
7939
|
+
this.showValidation = true;
|
|
7924
7940
|
this.items = [];
|
|
7925
7941
|
this.hasSearch = false;
|
|
7926
7942
|
this.showChips = false;
|
|
@@ -8242,12 +8258,20 @@ class MultiSelectComponent extends SelectionListBase {
|
|
|
8242
8258
|
return this.warningList.length > 0;
|
|
8243
8259
|
}
|
|
8244
8260
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MultiSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
8245
|
-
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\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear selection\"\n [disabled]=\"disabled\"\n (click)=\"clearValue($event)\"\n >\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"] }] }); }
|
|
8261
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: MultiSelectComponent, isStandalone: true, selector: "frg-multi-select", inputs: { required: "required", label: "label", placeholder: "placeholder", showValidation: "showValidation", 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 | inputRequiredLabel: required }}</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 [disabled]=\"disabled\"\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) {\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) {\r\n <div \r\n class=\"options\"\r\n [id]=\"id + '-options'\"\r\n [ngStyle]=\"dropdownStyles\"\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 @if(showValidation){\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\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 [disabled]=\"disabled\"\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"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
8246
8262
|
}
|
|
8247
8263
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: MultiSelectComponent, decorators: [{
|
|
8248
8264
|
type: Component,
|
|
8249
|
-
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\n type=\"button\"\n class=\"clear-button\"\n aria-label=\"Clear selection\"\n [disabled]=\"disabled\"\n (click)=\"clearValue($event)\"\n >\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"] }]
|
|
8250
|
-
}], propDecorators: {
|
|
8265
|
+
args: [{ selector: "frg-multi-select", imports: [NgTemplateOutlet, NgStyle, InputValidationComponent, ChipComponent, InputRequiredLabelPipe], template: "<div class=\"frg-multi-select\" [class.multi-select-error]=\"hasError\">\r\n <label [attr.for]=\"id + '-options'\">{{ label | inputRequiredLabel: required }}</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 [disabled]=\"disabled\"\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) {\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) {\r\n <div \r\n class=\"options\"\r\n [id]=\"id + '-options'\"\r\n [ngStyle]=\"dropdownStyles\"\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 @if(showValidation){\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\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 [disabled]=\"disabled\"\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"] }]
|
|
8266
|
+
}], propDecorators: { required: [{
|
|
8267
|
+
type: Input
|
|
8268
|
+
}], label: [{
|
|
8269
|
+
type: Input
|
|
8270
|
+
}], placeholder: [{
|
|
8271
|
+
type: Input
|
|
8272
|
+
}], showValidation: [{
|
|
8273
|
+
type: Input
|
|
8274
|
+
}], items: [{
|
|
8251
8275
|
type: Input
|
|
8252
8276
|
}], hasSearch: [{
|
|
8253
8277
|
type: Input
|
package/index.d.ts
CHANGED
|
@@ -3157,6 +3157,10 @@ interface SelectionListItem<T> {
|
|
|
3157
3157
|
|
|
3158
3158
|
declare class SelectionListComponent<T> extends SelectionListBase<T> implements OnChanges {
|
|
3159
3159
|
private readonly elementRef;
|
|
3160
|
+
required: boolean;
|
|
3161
|
+
label: string;
|
|
3162
|
+
placeholder: string;
|
|
3163
|
+
showValidation: boolean;
|
|
3160
3164
|
items: Array<SelectionListItem<T>>;
|
|
3161
3165
|
optionTemplate?: TemplateRef<unknown>;
|
|
3162
3166
|
hasSearch: boolean;
|
|
@@ -3198,7 +3202,7 @@ declare class SelectionListComponent<T> extends SelectionListBase<T> implements
|
|
|
3198
3202
|
private findItemByValue;
|
|
3199
3203
|
private extractComparableId;
|
|
3200
3204
|
static ɵfac: i0.ɵɵFactoryDeclaration<SelectionListComponent<any>, never>;
|
|
3201
|
-
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>;
|
|
3205
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<SelectionListComponent<any>, "frg-selection-list", never, { "required": { "alias": "required"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showValidation": { "alias": "showValidation"; "required": false; }; "items": { "alias": "items"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; }, {}, never, never, true, never>;
|
|
3202
3206
|
}
|
|
3203
3207
|
|
|
3204
3208
|
/**
|
|
@@ -3343,6 +3347,10 @@ interface Chip extends StatusIndicator {
|
|
|
3343
3347
|
|
|
3344
3348
|
declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> implements OnChanges {
|
|
3345
3349
|
private readonly elementRef;
|
|
3350
|
+
required: boolean;
|
|
3351
|
+
label: string;
|
|
3352
|
+
placeholder: string;
|
|
3353
|
+
showValidation: boolean;
|
|
3346
3354
|
items: Array<SelectionListItem<T>>;
|
|
3347
3355
|
hasSearch: boolean;
|
|
3348
3356
|
optionTemplate?: TemplateRef<unknown>;
|
|
@@ -3391,7 +3399,7 @@ declare class MultiSelectComponent<T> extends SelectionListBase<Array<T>> implem
|
|
|
3391
3399
|
*/
|
|
3392
3400
|
protected get hasWarning(): boolean;
|
|
3393
3401
|
static ɵfac: i0.ɵɵFactoryDeclaration<MultiSelectComponent<any>, never>;
|
|
3394
|
-
static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent<any>, "frg-multi-select", never, { "items": { "alias": "items"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "valuesTemplate": { "alias": "valuesTemplate"; "required": false; }; "showChips": { "alias": "showChips"; "required": false; }; "chipsStyle": { "alias": "chipsStyle"; "required": false; }; }, {}, never, never, true, never>;
|
|
3402
|
+
static ɵcmp: i0.ɵɵComponentDeclaration<MultiSelectComponent<any>, "frg-multi-select", never, { "required": { "alias": "required"; "required": false; }; "label": { "alias": "label"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "showValidation": { "alias": "showValidation"; "required": false; }; "items": { "alias": "items"; "required": false; }; "hasSearch": { "alias": "hasSearch"; "required": false; }; "optionTemplate": { "alias": "optionTemplate"; "required": false; }; "valuesTemplate": { "alias": "valuesTemplate"; "required": false; }; "showChips": { "alias": "showChips"; "required": false; }; "chipsStyle": { "alias": "chipsStyle"; "required": false; }; }, {}, never, never, true, never>;
|
|
3395
3403
|
}
|
|
3396
3404
|
|
|
3397
3405
|
/**
|
|
@@ -4447,4 +4455,4 @@ declare class TextAnimateDirective implements OnDestroy {
|
|
|
4447
4455
|
}
|
|
4448
4456
|
|
|
4449
4457
|
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 };
|
|
4450
|
-
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 };
|
|
4458
|
+
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, IConfigTooltip, IConfigTooltipButtton, IConfigTooltipPopover, IEventAction, IFieldPipe, ILinkAction, IPaginationOutput, ISideNavConfig, ISideNavItem, ISideNavSection, ITBody, ITBodyAction, ITBodyCell, ITBodyCellIcon, ITBodyColumn, ITCaption, ITHead, ITHeadAction, ITHeadColumn, ITPagination, ITSort, ITTitleBar, ITTitleBarFilter, ITTitleBarSearch, ITableCellTemplateContext, ITooltipElement, ITooltipEventAction, ITooltipLinkAction, 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 };
|