@tacdaed/fragments 1.0.0-beta.17 → 1.0.0-beta.19
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 +556 -17
- package/index.d.ts +170 -9
- 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: [{
|
|
@@ -3218,6 +3218,10 @@ class InputTextComponent extends InputBase {
|
|
|
3218
3218
|
* @inheritdoc
|
|
3219
3219
|
*/
|
|
3220
3220
|
this.errorMessages = {};
|
|
3221
|
+
/**
|
|
3222
|
+
* Accent color style for border/focus.
|
|
3223
|
+
*/
|
|
3224
|
+
this.styleType = 'primary';
|
|
3221
3225
|
/**
|
|
3222
3226
|
* The type of the input element.
|
|
3223
3227
|
* Can be 'text', 'password', 'email', 'tel', etc.
|
|
@@ -3373,11 +3377,11 @@ class InputTextComponent extends InputBase {
|
|
|
3373
3377
|
this.control?.updateValueAndValidity();
|
|
3374
3378
|
}
|
|
3375
3379
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3376
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTextComponent, isStandalone: true, selector: "frg-input-text", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
3380
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTextComponent, isStandalone: true, selector: "frg-input-text", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if(type === 'password') {\r\n <ng-container *ngTemplateOutlet=\"passwordToggleTemplate\"></ng-container>\r\n }\r\n @else if(type === 'email') {\r\n <ng-container *ngTemplateOutlet=\"emailExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'tel') {\r\n <ng-container *ngTemplateOutlet=\"phoneExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'url') {\r\n <ng-container *ngTemplateOutlet=\"urlExtraTemplate\"></ng-container>\r\n }\r\n\r\n</div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n }\r\n\r\n<!-- Templates -->\r\n<ng-template #passwordToggleTemplate>\r\n <button type=\"button\" class=\"frg-input__toggle-password\" (click)=\"toggleShowPassword()\">\r\n @if(showPassword){\r\n <span class=\"far fa-eye-slash\"></span>\r\n } @else {\r\n <span class=\"far fa-eye\"></span>\r\n }\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #emailExtraTemplate>\r\n <div class=\"frg-input__email-container\">\r\n <span class=\"far fa-envelope\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneExtraTemplate>\r\n <div class=\"frg-input__phone-container\">\r\n <span class=\"fas fa-mobile-screen\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #urlExtraTemplate>\r\n <div class=\"frg-input__url-container\">\r\n <span class=\"fas fa-link\"></span>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper input{padding:.25rem .5rem;border:none;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper input:focus{outline:none}:host .frg-input__wrapper input:has(+.frg-input__toggle-password){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__email-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__phone-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__url-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper.input-error input{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(input:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}:host .frg-input__toggle-password,:host .frg-input__email-container,:host .frg-input__phone-container,:host .frg-input__url-container{position:absolute;top:50%;right:.25rem;background:transparent;border:none;font-size:1rem;color:#5e5f62;padding:0}:host .frg-input__toggle-password{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3377
3381
|
}
|
|
3378
3382
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
3379
3383
|
type: Component,
|
|
3380
|
-
args: [{ selector: 'frg-input-text', imports: [InputRequiredLabelPipe, NgTemplateOutlet, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
3384
|
+
args: [{ selector: 'frg-input-text', imports: [InputRequiredLabelPipe, NgTemplateOutlet, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n\r\n @if(type === 'password') {\r\n <ng-container *ngTemplateOutlet=\"passwordToggleTemplate\"></ng-container>\r\n }\r\n @else if(type === 'email') {\r\n <ng-container *ngTemplateOutlet=\"emailExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'tel') {\r\n <ng-container *ngTemplateOutlet=\"phoneExtraTemplate\"></ng-container>\r\n }\r\n @else if(type === 'url') {\r\n <ng-container *ngTemplateOutlet=\"urlExtraTemplate\"></ng-container>\r\n }\r\n\r\n</div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n }\r\n\r\n<!-- Templates -->\r\n<ng-template #passwordToggleTemplate>\r\n <button type=\"button\" class=\"frg-input__toggle-password\" (click)=\"toggleShowPassword()\">\r\n @if(showPassword){\r\n <span class=\"far fa-eye-slash\"></span>\r\n } @else {\r\n <span class=\"far fa-eye\"></span>\r\n }\r\n </button>\r\n</ng-template>\r\n\r\n<ng-template #emailExtraTemplate>\r\n <div class=\"frg-input__email-container\">\r\n <span class=\"far fa-envelope\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #phoneExtraTemplate>\r\n <div class=\"frg-input__phone-container\">\r\n <span class=\"fas fa-mobile-screen\"></span>\r\n </div>\r\n</ng-template>\r\n\r\n<ng-template #urlExtraTemplate>\r\n <div class=\"frg-input__url-container\">\r\n <span class=\"fas fa-link\"></span>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper input{padding:.25rem .5rem;border:none;width:100%;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper input:focus{outline:none}:host .frg-input__wrapper input:has(+.frg-input__toggle-password){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__email-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__phone-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper input:has(+.frg-input__url-container){padding:.25rem 1.75rem .25rem .5rem}:host .frg-input__wrapper.input-error input{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(input:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}:host .frg-input__toggle-password,:host .frg-input__email-container,:host .frg-input__phone-container,:host .frg-input__url-container{position:absolute;top:50%;right:.25rem;background:transparent;border:none;font-size:1rem;color:#5e5f62;padding:0}:host .frg-input__toggle-password{cursor:pointer}\n"] }]
|
|
3381
3385
|
}], propDecorators: { label: [{
|
|
3382
3386
|
type: Input
|
|
3383
3387
|
}], placeholder: [{
|
|
@@ -3388,12 +3392,511 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
3388
3392
|
type: Input
|
|
3389
3393
|
}], errorMessages: [{
|
|
3390
3394
|
type: Input
|
|
3395
|
+
}], styleType: [{
|
|
3396
|
+
type: Input
|
|
3391
3397
|
}], type: [{
|
|
3392
3398
|
type: Input
|
|
3393
3399
|
}], validatorStrictMode: [{
|
|
3394
3400
|
type: Input
|
|
3395
3401
|
}] } });
|
|
3396
3402
|
|
|
3403
|
+
class InputTextareaComponent extends InputBase {
|
|
3404
|
+
constructor() {
|
|
3405
|
+
super(...arguments);
|
|
3406
|
+
/**
|
|
3407
|
+
* @inheritdoc
|
|
3408
|
+
*/
|
|
3409
|
+
this.label = '';
|
|
3410
|
+
/**
|
|
3411
|
+
* @inheritdoc
|
|
3412
|
+
*/
|
|
3413
|
+
this.placeholder = '';
|
|
3414
|
+
/**
|
|
3415
|
+
* @inheritdoc
|
|
3416
|
+
*/
|
|
3417
|
+
this.required = false;
|
|
3418
|
+
/**
|
|
3419
|
+
* @inheritdoc
|
|
3420
|
+
*/
|
|
3421
|
+
this.showValidation = true;
|
|
3422
|
+
/**
|
|
3423
|
+
* @inheritdoc
|
|
3424
|
+
*/
|
|
3425
|
+
this.errorMessages = {};
|
|
3426
|
+
/**
|
|
3427
|
+
* Accent color style for border/focus.
|
|
3428
|
+
*/
|
|
3429
|
+
this.styleType = 'primary';
|
|
3430
|
+
/**
|
|
3431
|
+
* Number of visible text rows.
|
|
3432
|
+
*/
|
|
3433
|
+
this.rows = 4;
|
|
3434
|
+
/**
|
|
3435
|
+
* CSS resize behavior for the textarea.
|
|
3436
|
+
*/
|
|
3437
|
+
this.resize = 'vertical';
|
|
3438
|
+
/**
|
|
3439
|
+
* Maximum allowed length for textarea content.
|
|
3440
|
+
*/
|
|
3441
|
+
this.maxLength = null;
|
|
3442
|
+
}
|
|
3443
|
+
get errorList() {
|
|
3444
|
+
if (!this.control?.errors)
|
|
3445
|
+
return [];
|
|
3446
|
+
const errors = this.control.errors;
|
|
3447
|
+
return Object.keys(errors).map((key) => {
|
|
3448
|
+
if (this.errorMessages[key]) {
|
|
3449
|
+
return this.errorMessages[key];
|
|
3450
|
+
}
|
|
3451
|
+
if (key === 'minlength' && errors[key]?.requiredLength) {
|
|
3452
|
+
return `Minimum length is ${errors[key].requiredLength} characters.`;
|
|
3453
|
+
}
|
|
3454
|
+
if (key === 'maxlength' && errors[key]?.requiredLength) {
|
|
3455
|
+
return `Maximum length is ${errors[key].requiredLength} characters.`;
|
|
3456
|
+
}
|
|
3457
|
+
return DEFAULT_INPUT_TEXT_ERROR_MESSAGES[key] || 'Invalid field.';
|
|
3458
|
+
});
|
|
3459
|
+
}
|
|
3460
|
+
get warningList() {
|
|
3461
|
+
return Object.keys(this.warningMessages).map((key) => {
|
|
3462
|
+
return (this.warningMessages[key] ||
|
|
3463
|
+
DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES[key] ||
|
|
3464
|
+
'');
|
|
3465
|
+
});
|
|
3466
|
+
}
|
|
3467
|
+
get hasWarning() {
|
|
3468
|
+
return this.warningList.length > 0;
|
|
3469
|
+
}
|
|
3470
|
+
onInput(event) {
|
|
3471
|
+
const input = event.target;
|
|
3472
|
+
this.value = input.value;
|
|
3473
|
+
this.onChange(this.value);
|
|
3474
|
+
}
|
|
3475
|
+
onBlur() {
|
|
3476
|
+
this.onTouched();
|
|
3477
|
+
}
|
|
3478
|
+
updateView(_value) {
|
|
3479
|
+
// Handled by Angular binding
|
|
3480
|
+
}
|
|
3481
|
+
updateDisabledState(_isDisabled) {
|
|
3482
|
+
// Handled by Angular binding
|
|
3483
|
+
}
|
|
3484
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3485
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTextareaComponent, isStandalone: true, selector: "frg-input-textarea", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", rows: "rows", resize: "resize", maxLength: "maxLength" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n <textarea\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [rows]=\"rows\"\n [style.resize]=\"resize\"\n [attr.maxlength]=\"maxLength\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n ></textarea>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper textarea{display:block;width:100%;min-height:2.25rem;padding:.25rem .5rem;border:none;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper textarea:focus{outline:none}:host .frg-input__wrapper.input-error textarea{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(textarea:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3486
|
+
}
|
|
3487
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTextareaComponent, decorators: [{
|
|
3488
|
+
type: Component,
|
|
3489
|
+
args: [{ selector: 'frg-input-textarea', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n <textarea\n [id]=\"id\"\n [placeholder]=\"placeholder\"\n [required]=\"required\"\n [disabled]=\"disabled\"\n [rows]=\"rows\"\n [style.resize]=\"resize\"\n [attr.maxlength]=\"maxLength\"\n [value]=\"value\"\n (input)=\"onInput($event)\"\n (blur)=\"onBlur()\"\n ></textarea>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper textarea{display:block;width:100%;min-height:2.25rem;padding:.25rem .5rem;border:none;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;transition:border-color .3s}:host .frg-input__wrapper textarea:focus{outline:none}:host .frg-input__wrapper.input-error textarea{border-bottom-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__wrapper:has(textarea:focus):before{width:100%;left:0}:host .frg-input__wrapper.input-error:before{width:100%;left:0}:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__wrapper.input-error:after{background:#d66a6a;width:100%;right:0}\n"] }]
|
|
3490
|
+
}], propDecorators: { label: [{
|
|
3491
|
+
type: Input
|
|
3492
|
+
}], placeholder: [{
|
|
3493
|
+
type: Input
|
|
3494
|
+
}], required: [{
|
|
3495
|
+
type: Input
|
|
3496
|
+
}], showValidation: [{
|
|
3497
|
+
type: Input
|
|
3498
|
+
}], errorMessages: [{
|
|
3499
|
+
type: Input
|
|
3500
|
+
}], styleType: [{
|
|
3501
|
+
type: Input
|
|
3502
|
+
}], rows: [{
|
|
3503
|
+
type: Input
|
|
3504
|
+
}], resize: [{
|
|
3505
|
+
type: Input
|
|
3506
|
+
}], maxLength: [{
|
|
3507
|
+
type: Input
|
|
3508
|
+
}] } });
|
|
3509
|
+
|
|
3510
|
+
class InputRichTextComponent extends InputBase {
|
|
3511
|
+
constructor() {
|
|
3512
|
+
super(...arguments);
|
|
3513
|
+
/**
|
|
3514
|
+
* @inheritdoc
|
|
3515
|
+
*/
|
|
3516
|
+
this.label = '';
|
|
3517
|
+
/**
|
|
3518
|
+
* @inheritdoc
|
|
3519
|
+
*/
|
|
3520
|
+
this.placeholder = '';
|
|
3521
|
+
/**
|
|
3522
|
+
* @inheritdoc
|
|
3523
|
+
*/
|
|
3524
|
+
this.required = false;
|
|
3525
|
+
/**
|
|
3526
|
+
* @inheritdoc
|
|
3527
|
+
*/
|
|
3528
|
+
this.showValidation = true;
|
|
3529
|
+
/**
|
|
3530
|
+
* @inheritdoc
|
|
3531
|
+
*/
|
|
3532
|
+
this.errorMessages = {};
|
|
3533
|
+
/**
|
|
3534
|
+
* Accent color style for border/focus.
|
|
3535
|
+
*/
|
|
3536
|
+
this.styleType = 'primary';
|
|
3537
|
+
/**
|
|
3538
|
+
* Minimum editor height.
|
|
3539
|
+
*/
|
|
3540
|
+
this.minHeight = '10rem';
|
|
3541
|
+
/**
|
|
3542
|
+
* Show or hide toolbar actions.
|
|
3543
|
+
*/
|
|
3544
|
+
this.showToolbar = true;
|
|
3545
|
+
this.commandStates = {
|
|
3546
|
+
bold: false,
|
|
3547
|
+
italic: false,
|
|
3548
|
+
underline: false,
|
|
3549
|
+
insertUnorderedList: false,
|
|
3550
|
+
insertOrderedList: false,
|
|
3551
|
+
};
|
|
3552
|
+
}
|
|
3553
|
+
get errorList() {
|
|
3554
|
+
if (!this.control?.errors)
|
|
3555
|
+
return [];
|
|
3556
|
+
const errors = this.control.errors;
|
|
3557
|
+
return Object.keys(errors).map((key) => {
|
|
3558
|
+
if (this.errorMessages[key]) {
|
|
3559
|
+
return this.errorMessages[key];
|
|
3560
|
+
}
|
|
3561
|
+
if (key === 'minlength' && errors[key]?.requiredLength) {
|
|
3562
|
+
return `Minimum length is ${errors[key].requiredLength} characters.`;
|
|
3563
|
+
}
|
|
3564
|
+
if (key === 'maxlength' && errors[key]?.requiredLength) {
|
|
3565
|
+
return `Maximum length is ${errors[key].requiredLength} characters.`;
|
|
3566
|
+
}
|
|
3567
|
+
return DEFAULT_INPUT_TEXT_ERROR_MESSAGES[key] || 'Invalid field.';
|
|
3568
|
+
});
|
|
3569
|
+
}
|
|
3570
|
+
get warningList() {
|
|
3571
|
+
return Object.keys(this.warningMessages).map((key) => {
|
|
3572
|
+
return (this.warningMessages[key] ||
|
|
3573
|
+
DEFAULT_INPUT_TEXT_WARNINGS_MESSAGES[key] ||
|
|
3574
|
+
'');
|
|
3575
|
+
});
|
|
3576
|
+
}
|
|
3577
|
+
get hasWarning() {
|
|
3578
|
+
return this.warningList.length > 0;
|
|
3579
|
+
}
|
|
3580
|
+
ngAfterViewInit() {
|
|
3581
|
+
this.updateView(this.value ?? '');
|
|
3582
|
+
this.syncCommandStates();
|
|
3583
|
+
}
|
|
3584
|
+
onInput() {
|
|
3585
|
+
const editor = this.editorRef?.nativeElement;
|
|
3586
|
+
if (!editor)
|
|
3587
|
+
return;
|
|
3588
|
+
this.value = this.normalizeHtml(editor.innerHTML);
|
|
3589
|
+
this.onChange(this.value);
|
|
3590
|
+
this.syncCommandStates();
|
|
3591
|
+
}
|
|
3592
|
+
onEditorKeyUp() {
|
|
3593
|
+
this.onInput();
|
|
3594
|
+
}
|
|
3595
|
+
onEditorSelectionChange() {
|
|
3596
|
+
this.syncCommandStates();
|
|
3597
|
+
}
|
|
3598
|
+
onEditorKeyDown(event) {
|
|
3599
|
+
if (event.key !== 'Tab' || this.disabled) {
|
|
3600
|
+
return;
|
|
3601
|
+
}
|
|
3602
|
+
const li = this.getCurrentListItem();
|
|
3603
|
+
if (!li) {
|
|
3604
|
+
return;
|
|
3605
|
+
}
|
|
3606
|
+
event.preventDefault();
|
|
3607
|
+
if (event.shiftKey) {
|
|
3608
|
+
this.outdentListItem(li);
|
|
3609
|
+
}
|
|
3610
|
+
else {
|
|
3611
|
+
this.indentListItem(li);
|
|
3612
|
+
}
|
|
3613
|
+
this.onInput();
|
|
3614
|
+
}
|
|
3615
|
+
onBlur() {
|
|
3616
|
+
this.onTouched();
|
|
3617
|
+
this.syncCommandStates();
|
|
3618
|
+
}
|
|
3619
|
+
execute(command) {
|
|
3620
|
+
if (this.disabled)
|
|
3621
|
+
return;
|
|
3622
|
+
this.focusEditor();
|
|
3623
|
+
switch (command) {
|
|
3624
|
+
case 'bold':
|
|
3625
|
+
this.applyInlineFormat('strong');
|
|
3626
|
+
break;
|
|
3627
|
+
case 'italic':
|
|
3628
|
+
this.applyInlineFormat('em');
|
|
3629
|
+
break;
|
|
3630
|
+
case 'underline':
|
|
3631
|
+
this.applyInlineFormat('u');
|
|
3632
|
+
break;
|
|
3633
|
+
case 'insertUnorderedList':
|
|
3634
|
+
this.toggleList('ul');
|
|
3635
|
+
break;
|
|
3636
|
+
case 'insertOrderedList':
|
|
3637
|
+
this.toggleList('ol');
|
|
3638
|
+
break;
|
|
3639
|
+
default:
|
|
3640
|
+
return;
|
|
3641
|
+
}
|
|
3642
|
+
this.onInput();
|
|
3643
|
+
}
|
|
3644
|
+
setTextColor(event) {
|
|
3645
|
+
if (this.disabled)
|
|
3646
|
+
return;
|
|
3647
|
+
const color = event.target.value;
|
|
3648
|
+
this.focusEditor();
|
|
3649
|
+
this.applyColor(color);
|
|
3650
|
+
this.onInput();
|
|
3651
|
+
}
|
|
3652
|
+
isCommandActive(command) {
|
|
3653
|
+
return this.commandStates[command];
|
|
3654
|
+
}
|
|
3655
|
+
preventToolbarMouseDown(event) {
|
|
3656
|
+
event.preventDefault();
|
|
3657
|
+
}
|
|
3658
|
+
updateView(value) {
|
|
3659
|
+
const editor = this.editorRef?.nativeElement;
|
|
3660
|
+
if (!editor)
|
|
3661
|
+
return;
|
|
3662
|
+
editor.innerHTML = value ?? '';
|
|
3663
|
+
}
|
|
3664
|
+
updateDisabledState(isDisabled) {
|
|
3665
|
+
const editor = this.editorRef?.nativeElement;
|
|
3666
|
+
if (!editor)
|
|
3667
|
+
return;
|
|
3668
|
+
editor.contentEditable = isDisabled ? 'false' : 'true';
|
|
3669
|
+
}
|
|
3670
|
+
focusEditor() {
|
|
3671
|
+
this.editorRef?.nativeElement.focus();
|
|
3672
|
+
}
|
|
3673
|
+
applyInlineFormat(tagName) {
|
|
3674
|
+
const range = this.getCurrentRange();
|
|
3675
|
+
if (!range || range.collapsed) {
|
|
3676
|
+
return;
|
|
3677
|
+
}
|
|
3678
|
+
const wrapper = document.createElement(tagName);
|
|
3679
|
+
this.wrapRange(range, wrapper);
|
|
3680
|
+
}
|
|
3681
|
+
applyColor(color) {
|
|
3682
|
+
const range = this.getCurrentRange();
|
|
3683
|
+
if (!range || range.collapsed) {
|
|
3684
|
+
return;
|
|
3685
|
+
}
|
|
3686
|
+
const wrapper = document.createElement('span');
|
|
3687
|
+
wrapper.style.color = color;
|
|
3688
|
+
this.wrapRange(range, wrapper);
|
|
3689
|
+
}
|
|
3690
|
+
wrapRange(range, wrapper) {
|
|
3691
|
+
const extracted = range.extractContents();
|
|
3692
|
+
if (!extracted.textContent?.trim()) {
|
|
3693
|
+
range.insertNode(extracted);
|
|
3694
|
+
return;
|
|
3695
|
+
}
|
|
3696
|
+
wrapper.appendChild(extracted);
|
|
3697
|
+
range.insertNode(wrapper);
|
|
3698
|
+
const selection = document.getSelection();
|
|
3699
|
+
if (!selection)
|
|
3700
|
+
return;
|
|
3701
|
+
const newRange = document.createRange();
|
|
3702
|
+
newRange.selectNodeContents(wrapper);
|
|
3703
|
+
selection.removeAllRanges();
|
|
3704
|
+
selection.addRange(newRange);
|
|
3705
|
+
}
|
|
3706
|
+
toggleList(type) {
|
|
3707
|
+
const listItem = this.getCurrentListItem();
|
|
3708
|
+
if (listItem) {
|
|
3709
|
+
const list = listItem.parentElement;
|
|
3710
|
+
if (!list)
|
|
3711
|
+
return;
|
|
3712
|
+
if (list.tagName.toLowerCase() === type) {
|
|
3713
|
+
this.unwrapList(list);
|
|
3714
|
+
return;
|
|
3715
|
+
}
|
|
3716
|
+
this.convertListType(list, type);
|
|
3717
|
+
return;
|
|
3718
|
+
}
|
|
3719
|
+
const range = this.getCurrentRange();
|
|
3720
|
+
if (!range)
|
|
3721
|
+
return;
|
|
3722
|
+
const content = range.extractContents();
|
|
3723
|
+
const list = document.createElement(type);
|
|
3724
|
+
const li = document.createElement('li');
|
|
3725
|
+
li.appendChild(content);
|
|
3726
|
+
if (!li.textContent?.trim()) {
|
|
3727
|
+
li.textContent = 'List item';
|
|
3728
|
+
}
|
|
3729
|
+
list.appendChild(li);
|
|
3730
|
+
range.insertNode(list);
|
|
3731
|
+
this.placeCaretAtEnd(li);
|
|
3732
|
+
}
|
|
3733
|
+
unwrapList(list) {
|
|
3734
|
+
const fragment = document.createDocumentFragment();
|
|
3735
|
+
const items = Array.from(list.children).filter((child) => child.tagName === 'LI');
|
|
3736
|
+
items.forEach((item) => {
|
|
3737
|
+
const p = document.createElement('p');
|
|
3738
|
+
while (item.firstChild) {
|
|
3739
|
+
p.appendChild(item.firstChild);
|
|
3740
|
+
}
|
|
3741
|
+
fragment.appendChild(p);
|
|
3742
|
+
});
|
|
3743
|
+
list.replaceWith(fragment);
|
|
3744
|
+
}
|
|
3745
|
+
convertListType(list, type) {
|
|
3746
|
+
const nextList = document.createElement(type);
|
|
3747
|
+
while (list.firstChild) {
|
|
3748
|
+
nextList.appendChild(list.firstChild);
|
|
3749
|
+
}
|
|
3750
|
+
list.replaceWith(nextList);
|
|
3751
|
+
}
|
|
3752
|
+
getCurrentListItem() {
|
|
3753
|
+
const editor = this.editorRef?.nativeElement;
|
|
3754
|
+
const anchorElement = this.getSelectionAnchorElement();
|
|
3755
|
+
if (!editor || !anchorElement) {
|
|
3756
|
+
return null;
|
|
3757
|
+
}
|
|
3758
|
+
const li = this.findClosestTag(anchorElement, 'LI');
|
|
3759
|
+
return li && editor.contains(li) ? li : null;
|
|
3760
|
+
}
|
|
3761
|
+
indentListItem(li) {
|
|
3762
|
+
const parentList = li.parentElement;
|
|
3763
|
+
if (!parentList)
|
|
3764
|
+
return;
|
|
3765
|
+
const previousLi = li.previousElementSibling;
|
|
3766
|
+
if (!previousLi)
|
|
3767
|
+
return;
|
|
3768
|
+
let nestedList = Array.from(previousLi.children).find((child) => child.tagName === parentList.tagName);
|
|
3769
|
+
if (!nestedList) {
|
|
3770
|
+
nestedList = document.createElement(parentList.tagName.toLowerCase());
|
|
3771
|
+
previousLi.appendChild(nestedList);
|
|
3772
|
+
}
|
|
3773
|
+
nestedList.appendChild(li);
|
|
3774
|
+
this.placeCaretAtEnd(li);
|
|
3775
|
+
}
|
|
3776
|
+
outdentListItem(li) {
|
|
3777
|
+
const parentList = li.parentElement;
|
|
3778
|
+
if (!parentList)
|
|
3779
|
+
return;
|
|
3780
|
+
const parentLi = this.findClosestTag(parentList, 'LI');
|
|
3781
|
+
if (!parentLi)
|
|
3782
|
+
return;
|
|
3783
|
+
const grandList = parentLi.parentElement;
|
|
3784
|
+
if (!grandList)
|
|
3785
|
+
return;
|
|
3786
|
+
grandList.insertBefore(li, parentLi.nextSibling);
|
|
3787
|
+
if (!parentList.children.length) {
|
|
3788
|
+
parentList.remove();
|
|
3789
|
+
}
|
|
3790
|
+
this.placeCaretAtEnd(li);
|
|
3791
|
+
}
|
|
3792
|
+
getCurrentRange() {
|
|
3793
|
+
const selection = document.getSelection();
|
|
3794
|
+
if (!selection || selection.rangeCount === 0) {
|
|
3795
|
+
return null;
|
|
3796
|
+
}
|
|
3797
|
+
const range = selection.getRangeAt(0);
|
|
3798
|
+
const editor = this.editorRef?.nativeElement;
|
|
3799
|
+
if (!editor) {
|
|
3800
|
+
return null;
|
|
3801
|
+
}
|
|
3802
|
+
const container = range.commonAncestorContainer;
|
|
3803
|
+
const insideEditor = container === editor || editor.contains(container);
|
|
3804
|
+
return insideEditor ? range : null;
|
|
3805
|
+
}
|
|
3806
|
+
getSelectionAnchorElement() {
|
|
3807
|
+
const selection = document.getSelection();
|
|
3808
|
+
const anchor = selection?.anchorNode ?? null;
|
|
3809
|
+
if (!anchor) {
|
|
3810
|
+
return null;
|
|
3811
|
+
}
|
|
3812
|
+
return anchor.nodeType === Node.ELEMENT_NODE
|
|
3813
|
+
? anchor
|
|
3814
|
+
: anchor.parentElement;
|
|
3815
|
+
}
|
|
3816
|
+
findClosestTag(from, tagName) {
|
|
3817
|
+
let current = from;
|
|
3818
|
+
while (current) {
|
|
3819
|
+
if (current.tagName === tagName) {
|
|
3820
|
+
return current;
|
|
3821
|
+
}
|
|
3822
|
+
current = current.parentElement;
|
|
3823
|
+
}
|
|
3824
|
+
return null;
|
|
3825
|
+
}
|
|
3826
|
+
syncCommandStates() {
|
|
3827
|
+
const editor = this.editorRef?.nativeElement;
|
|
3828
|
+
const anchorElement = this.getSelectionAnchorElement();
|
|
3829
|
+
if (!editor || !anchorElement || !editor.contains(anchorElement)) {
|
|
3830
|
+
this.commandStates.bold = false;
|
|
3831
|
+
this.commandStates.italic = false;
|
|
3832
|
+
this.commandStates.underline = false;
|
|
3833
|
+
this.commandStates.insertUnorderedList = false;
|
|
3834
|
+
this.commandStates.insertOrderedList = false;
|
|
3835
|
+
return;
|
|
3836
|
+
}
|
|
3837
|
+
this.commandStates.bold = this.hasAnyAncestorTag(anchorElement, ['B', 'STRONG']);
|
|
3838
|
+
this.commandStates.italic = this.hasAnyAncestorTag(anchorElement, ['I', 'EM']);
|
|
3839
|
+
this.commandStates.underline = this.hasAnyAncestorTag(anchorElement, ['U']);
|
|
3840
|
+
this.commandStates.insertUnorderedList = this.hasAnyAncestorTag(anchorElement, ['UL']);
|
|
3841
|
+
this.commandStates.insertOrderedList = this.hasAnyAncestorTag(anchorElement, ['OL']);
|
|
3842
|
+
}
|
|
3843
|
+
hasAnyAncestorTag(from, tags) {
|
|
3844
|
+
let current = from;
|
|
3845
|
+
while (current) {
|
|
3846
|
+
if (tags.includes(current.tagName)) {
|
|
3847
|
+
return true;
|
|
3848
|
+
}
|
|
3849
|
+
current = current.parentElement;
|
|
3850
|
+
}
|
|
3851
|
+
return false;
|
|
3852
|
+
}
|
|
3853
|
+
placeCaretAtEnd(element) {
|
|
3854
|
+
const range = document.createRange();
|
|
3855
|
+
range.selectNodeContents(element);
|
|
3856
|
+
range.collapse(false);
|
|
3857
|
+
const selection = document.getSelection();
|
|
3858
|
+
if (!selection) {
|
|
3859
|
+
return;
|
|
3860
|
+
}
|
|
3861
|
+
selection.removeAllRanges();
|
|
3862
|
+
selection.addRange(range);
|
|
3863
|
+
}
|
|
3864
|
+
normalizeHtml(rawHtml) {
|
|
3865
|
+
const temp = document.createElement('div');
|
|
3866
|
+
temp.innerHTML = rawHtml;
|
|
3867
|
+
const textOnly = (temp.textContent || '').replaceAll('\u00a0', ' ').trim();
|
|
3868
|
+
if (!textOnly) {
|
|
3869
|
+
return '';
|
|
3870
|
+
}
|
|
3871
|
+
return rawHtml;
|
|
3872
|
+
}
|
|
3873
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputRichTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3874
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputRichTextComponent, isStandalone: true, selector: "frg-input-rich-text", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", minHeight: "minHeight", showToolbar: "showToolbar" }, viewQueries: [{ propertyName: "editorRef", first: true, predicate: ["editor"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary',\n 'frg-input__wrapper--no-toolbar': !showToolbar\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n @if(showToolbar) {\n <div class=\"frg-input__toolbar\">\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('bold')\"\n [class.is-active]=\"isCommandActive('bold')\"\n [disabled]=\"disabled\"\n aria-label=\"Bold\"\n title=\"Bold\"\n >\n <strong>B</strong>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('italic')\"\n [class.is-active]=\"isCommandActive('italic')\"\n [disabled]=\"disabled\"\n aria-label=\"Italic\"\n title=\"Italic\"\n >\n <em>I</em>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('underline')\"\n [class.is-active]=\"isCommandActive('underline')\"\n [disabled]=\"disabled\"\n aria-label=\"Underline\"\n title=\"Underline\"\n >\n <u>U</u>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertUnorderedList')\"\n [class.is-active]=\"isCommandActive('insertUnorderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Bullet list\"\n title=\"Bullet list\"\n >\n <span class=\"fas fa-list-ul\" aria-hidden=\"true\"></span>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertOrderedList')\"\n [class.is-active]=\"isCommandActive('insertOrderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Numbered list\"\n title=\"Numbered list\"\n >\n <span class=\"fas fa-list-ol\" aria-hidden=\"true\"></span>\n </button>\n <label class=\"frg-input__toolbar-color\" [attr.for]=\"id + '-text-color'\" aria-label=\"Text color\">\n <input\n [id]=\"id + '-text-color'\"\n type=\"color\"\n [disabled]=\"disabled\"\n value=\"#1f2937\"\n (input)=\"setTextColor($event)\"\n />\n </label>\n </div>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n #editor\n class=\"frg-input__editor\"\n [id]=\"id\"\n [attr.data-placeholder]=\"placeholder\"\n [style.min-height]=\"minHeight\"\n [attr.contenteditable]=\"disabled ? 'false' : 'true'\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-label]=\"label || placeholder || 'Rich text editor'\"\n (input)=\"onInput()\"\n (keydown)=\"onEditorKeyDown($event)\"\n (keyup)=\"onEditorKeyUp()\"\n (mouseup)=\"onEditorSelectionChange()\"\n (focus)=\"onEditorSelectionChange()\"\n (blur)=\"onBlur()\"\n ></div>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__toolbar{display:flex;flex-wrap:wrap;gap:.375rem;padding:.375rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:none;border-radius:.25rem .25rem 0 0;background:#f9fafb}:host .frg-input__toolbar button{border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:#fff;color:#5e5f62;border-radius:.25rem;line-height:1;padding:.375rem .5rem;cursor:pointer}:host .frg-input__toolbar button.is-active{border-color:var(--frg-input-accent);box-shadow:inset 0 0 0 1px var(--frg-input-accent);background:#eef6ff}:host .frg-input__toolbar button:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__toolbar-color{display:inline-flex;align-items:center}:host .frg-input__toolbar-color input{width:1.75rem;height:1.75rem;padding:0;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;background:#fff;cursor:pointer}:host .frg-input__toolbar-color input:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__editor{width:100%;padding:.25rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:0 0 .25rem .25rem;background:transparent;transition:border-color .3s;overflow-y:auto}:host .frg-input__editor:focus{outline:none;border-bottom-color:var(--frg-input-accent)}:host .frg-input__editor:empty:before{content:attr(data-placeholder);color:#1f293773;pointer-events:none}:host .frg-input__wrapper--no-toolbar :host .frg-input__editor{border-radius:.25rem}:host .frg-input__wrapper.input-error :host .frg-input__editor{border-color:#d66a6a;border-bottom-color:#d66a6a}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3875
|
+
}
|
|
3876
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputRichTextComponent, decorators: [{
|
|
3877
|
+
type: Component,
|
|
3878
|
+
args: [{ selector: 'frg-input-rich-text', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary',\n 'frg-input__wrapper--no-toolbar': !showToolbar\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\n }\n\n @if(showToolbar) {\n <div class=\"frg-input__toolbar\">\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('bold')\"\n [class.is-active]=\"isCommandActive('bold')\"\n [disabled]=\"disabled\"\n aria-label=\"Bold\"\n title=\"Bold\"\n >\n <strong>B</strong>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('italic')\"\n [class.is-active]=\"isCommandActive('italic')\"\n [disabled]=\"disabled\"\n aria-label=\"Italic\"\n title=\"Italic\"\n >\n <em>I</em>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('underline')\"\n [class.is-active]=\"isCommandActive('underline')\"\n [disabled]=\"disabled\"\n aria-label=\"Underline\"\n title=\"Underline\"\n >\n <u>U</u>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertUnorderedList')\"\n [class.is-active]=\"isCommandActive('insertUnorderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Bullet list\"\n title=\"Bullet list\"\n >\n <span class=\"fas fa-list-ul\" aria-hidden=\"true\"></span>\n </button>\n <button\n type=\"button\"\n (mousedown)=\"preventToolbarMouseDown($event)\"\n (click)=\"execute('insertOrderedList')\"\n [class.is-active]=\"isCommandActive('insertOrderedList')\"\n [disabled]=\"disabled\"\n aria-label=\"Numbered list\"\n title=\"Numbered list\"\n >\n <span class=\"fas fa-list-ol\" aria-hidden=\"true\"></span>\n </button>\n <label class=\"frg-input__toolbar-color\" [attr.for]=\"id + '-text-color'\" aria-label=\"Text color\">\n <input\n [id]=\"id + '-text-color'\"\n type=\"color\"\n [disabled]=\"disabled\"\n value=\"#1f2937\"\n (input)=\"setTextColor($event)\"\n />\n </label>\n </div>\n }\n\n <!-- eslint-disable-next-line @angular-eslint/template/interactive-supports-focus -->\n <div\n #editor\n class=\"frg-input__editor\"\n [id]=\"id\"\n [attr.data-placeholder]=\"placeholder\"\n [style.min-height]=\"minHeight\"\n [attr.contenteditable]=\"disabled ? 'false' : 'true'\"\n [attr.aria-disabled]=\"disabled\"\n [attr.aria-label]=\"label || placeholder || 'Rich text editor'\"\n (input)=\"onInput()\"\n (keydown)=\"onEditorKeyDown($event)\"\n (keyup)=\"onEditorKeyUp()\"\n (mouseup)=\"onEditorSelectionChange()\"\n (focus)=\"onEditorSelectionChange()\"\n (blur)=\"onBlur()\"\n ></div>\n</div>\n\n@if(showValidation) {\n <frg-input-validation\n [errorList]=\"errorList\"\n [warningList]=\"warningList\"\n [isFormInvalid]=\"hasError\"\n >\n </frg-input-validation>\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__toolbar{display:flex;flex-wrap:wrap;gap:.375rem;padding:.375rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:none;border-radius:.25rem .25rem 0 0;background:#f9fafb}:host .frg-input__toolbar button{border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);background:#fff;color:#5e5f62;border-radius:.25rem;line-height:1;padding:.375rem .5rem;cursor:pointer}:host .frg-input__toolbar button.is-active{border-color:var(--frg-input-accent);box-shadow:inset 0 0 0 1px var(--frg-input-accent);background:#eef6ff}:host .frg-input__toolbar button:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__toolbar-color{display:inline-flex;align-items:center}:host .frg-input__toolbar-color input{width:1.75rem;height:1.75rem;padding:0;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;background:#fff;cursor:pointer}:host .frg-input__toolbar-color input:disabled{cursor:not-allowed;opacity:.55}:host .frg-input__editor{width:100%;padding:.25rem .5rem;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:0 0 .25rem .25rem;background:transparent;transition:border-color .3s;overflow-y:auto}:host .frg-input__editor:focus{outline:none;border-bottom-color:var(--frg-input-accent)}:host .frg-input__editor:empty:before{content:attr(data-placeholder);color:#1f293773;pointer-events:none}:host .frg-input__wrapper--no-toolbar :host .frg-input__editor{border-radius:.25rem}:host .frg-input__wrapper.input-error :host .frg-input__editor{border-color:#d66a6a;border-bottom-color:#d66a6a}\n"] }]
|
|
3879
|
+
}], propDecorators: { editorRef: [{
|
|
3880
|
+
type: ViewChild,
|
|
3881
|
+
args: ['editor']
|
|
3882
|
+
}], label: [{
|
|
3883
|
+
type: Input
|
|
3884
|
+
}], placeholder: [{
|
|
3885
|
+
type: Input
|
|
3886
|
+
}], required: [{
|
|
3887
|
+
type: Input
|
|
3888
|
+
}], showValidation: [{
|
|
3889
|
+
type: Input
|
|
3890
|
+
}], errorMessages: [{
|
|
3891
|
+
type: Input
|
|
3892
|
+
}], styleType: [{
|
|
3893
|
+
type: Input
|
|
3894
|
+
}], minHeight: [{
|
|
3895
|
+
type: Input
|
|
3896
|
+
}], showToolbar: [{
|
|
3897
|
+
type: Input
|
|
3898
|
+
}] } });
|
|
3899
|
+
|
|
3397
3900
|
/**
|
|
3398
3901
|
* Normalizes the value of an <input type="number">.
|
|
3399
3902
|
*
|
|
@@ -3434,6 +3937,10 @@ class InputNumberComponent extends InputBase {
|
|
|
3434
3937
|
* @inheritdoc
|
|
3435
3938
|
*/
|
|
3436
3939
|
this.errorMessages = {};
|
|
3940
|
+
/**
|
|
3941
|
+
* Accent color style for border/focus.
|
|
3942
|
+
*/
|
|
3943
|
+
this.styleType = 'primary';
|
|
3437
3944
|
/**
|
|
3438
3945
|
* The type of the input element.
|
|
3439
3946
|
* Can be 'number' or 'decimal'.
|
|
@@ -3706,11 +4213,11 @@ class InputNumberComponent extends InputBase {
|
|
|
3706
4213
|
return num.toString().split('.')[1]?.length ?? 0;
|
|
3707
4214
|
}
|
|
3708
4215
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputNumberComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3709
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputNumberComponent, isStandalone: true, selector: "frg-input-number", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", min: "min", max: "max", step: "step", precision: "precision", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
4216
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputNumberComponent, isStandalone: true, selector: "frg-input-number", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", min: "min", max: "max", step: "step", precision: "precision", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__number__container\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--decrement\"\r\n (click)=\"decrease()\"\r\n aria-label=\"Decrease value\"\r\n >\r\n \u2212\r\n </button>\r\n\r\n <input\r\n [id]=\"id\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.step]=\"inputStep\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--increment\"\r\n (click)=\"increase()\"\r\n aria-label=\"Increase value\"\r\n >\r\n +\r\n </button>\r\n </div>\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\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 input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input[type=number]{-moz-appearance:textfield;appearance:none}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__wrapper:before,:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;width:0;height:.125rem;transition:width .3s ease,left .3s ease,right .3s ease}:host .frg-input__wrapper:before{left:-50%;background:var(--frg-input-accent);z-index:1}:host .frg-input__wrapper:after{right:-50%;z-index:2}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-error:after,:host .frg-input__wrapper.input-warning:after{width:100%}:host .frg-input__wrapper.input-error:after{background:#d66a6a;right:0}:host .frg-input__wrapper.input-warning:after{background:#eba566;right:0}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-warning:before{left:0}:host .frg-input__number__container{display:flex;align-items:center;box-sizing:border-box;position:relative;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);width:100%;max-width:100%;overflow:hidden}:host .frg-input__number__container input[type=number]{flex:1 1 auto;min-width:0;height:100%;border:none;margin:0;padding:.25rem .5rem;text-align:center;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\";background:transparent;color:#5e5f62;outline:none}:host .frg-input__number__container input[type=number]:disabled{background:#bfbfbf;color:#b9babc;cursor:not-allowed}:host .frg-input__number__arrow{flex:0 0 auto;height:100%;margin:0;border:none;background:transparent;cursor:pointer;font-size:1.4rem;color:#5e5f62;-webkit-user-select:none;user-select:none}:host .frg-input__number__arrow:disabled{opacity:.45;cursor:not-allowed}:host .frg-input__number__arrow:focus{outline:none}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
3710
4217
|
}
|
|
3711
4218
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
3712
4219
|
type: Component,
|
|
3713
|
-
args: [{ selector: 'frg-input-number', imports: [InputRequiredLabelPipe, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
4220
|
+
args: [{ selector: 'frg-input-number', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__number__container\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--decrement\"\r\n (click)=\"decrease()\"\r\n aria-label=\"Decrease value\"\r\n >\r\n \u2212\r\n </button>\r\n\r\n <input\r\n [id]=\"id\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.step]=\"inputStep\"\r\n [attr.min]=\"min\"\r\n [attr.max]=\"max\"\r\n [value]=\"value\"\r\n (input)=\"onInput($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__number__arrow frg-input__number__arrow--increment\"\r\n (click)=\"increase()\"\r\n aria-label=\"Increase value\"\r\n >\r\n +\r\n </button>\r\n </div>\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\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 input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host input[type=number]{-moz-appearance:textfield;appearance:none}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__wrapper:before,:host .frg-input__wrapper:after{content:\"\";position:absolute;bottom:0;width:0;height:.125rem;transition:width .3s ease,left .3s ease,right .3s ease}:host .frg-input__wrapper:before{left:-50%;background:var(--frg-input-accent);z-index:1}:host .frg-input__wrapper:after{right:-50%;z-index:2}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-error:after,:host .frg-input__wrapper.input-warning:after{width:100%}:host .frg-input__wrapper.input-error:after{background:#d66a6a;right:0}:host .frg-input__wrapper.input-warning:after{background:#eba566;right:0}:host .frg-input__wrapper:focus-within:before,:host .frg-input__wrapper.input-error:before,:host .frg-input__wrapper.input-warning:before{left:0}:host .frg-input__number__container{display:flex;align-items:center;box-sizing:border-box;position:relative;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);width:100%;max-width:100%;overflow:hidden}:host .frg-input__number__container input[type=number]{flex:1 1 auto;min-width:0;height:100%;border:none;margin:0;padding:.25rem .5rem;text-align:center;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\";background:transparent;color:#5e5f62;outline:none}:host .frg-input__number__container input[type=number]:disabled{background:#bfbfbf;color:#b9babc;cursor:not-allowed}:host .frg-input__number__arrow{flex:0 0 auto;height:100%;margin:0;border:none;background:transparent;cursor:pointer;font-size:1.4rem;color:#5e5f62;-webkit-user-select:none;user-select:none}:host .frg-input__number__arrow:disabled{opacity:.45;cursor:not-allowed}:host .frg-input__number__arrow:focus{outline:none}\n"] }]
|
|
3714
4221
|
}], propDecorators: { label: [{
|
|
3715
4222
|
type: Input
|
|
3716
4223
|
}], placeholder: [{
|
|
@@ -3721,6 +4228,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
3721
4228
|
type: Input
|
|
3722
4229
|
}], errorMessages: [{
|
|
3723
4230
|
type: Input
|
|
4231
|
+
}], styleType: [{
|
|
4232
|
+
type: Input
|
|
3724
4233
|
}], type: [{
|
|
3725
4234
|
type: Input
|
|
3726
4235
|
}], min: [{
|
|
@@ -4475,6 +4984,10 @@ class InputDateComponent extends InputBase {
|
|
|
4475
4984
|
* @inheritdoc
|
|
4476
4985
|
*/
|
|
4477
4986
|
this.errorMessages = {};
|
|
4987
|
+
/**
|
|
4988
|
+
* Accent color style for border/focus.
|
|
4989
|
+
*/
|
|
4990
|
+
this.styleType = 'primary';
|
|
4478
4991
|
/**
|
|
4479
4992
|
* The type of the input element.
|
|
4480
4993
|
* Can be 'text', 'password', 'email', 'tel', etc.
|
|
@@ -4749,11 +5262,11 @@ class InputDateComponent extends InputBase {
|
|
|
4749
5262
|
delete this.warnings[key];
|
|
4750
5263
|
}
|
|
4751
5264
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4752
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateComponent, isStandalone: true, selector: "frg-input-date", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", minDate: "minDate", maxDate: "maxDate", format: "format", validatorStrictMode: "validatorStrictMode" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
5265
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateComponent, isStandalone: true, selector: "frg-input-date", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", minDate: "minDate", maxDate: "maxDate", format: "format", validatorStrictMode: "validatorStrictMode" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\">\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <button class=\"far fa-calendar frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleCalendar()\"\r\n ></button>\r\n </div>\r\n @if(showCalendar$ | async){\r\n <frg-input-calendar\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\">\r\n </frg-input-calendar>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\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}:host .frg-input__wrapper{display:inline-block;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__calendar-button{border:none;background:transparent}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}\n"], dependencies: [{ kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: InputCalendarComponent, selector: "frg-input-calendar", inputs: ["minDate", "maxDate", "selectedValue"], outputs: ["selectDate", "handleMaxDate", "handleMinDate"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
4753
5266
|
}
|
|
4754
5267
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
4755
5268
|
type: Component,
|
|
4756
|
-
args: [{ selector: 'frg-input-date', imports: [InputValidationComponent, InputRequiredLabelPipe, InputCalendarComponent, AsyncPipe], template: "<div class=\"frg-input__wrapper\"\
|
|
5269
|
+
args: [{ selector: 'frg-input-date', imports: [InputValidationComponent, InputRequiredLabelPipe, InputCalendarComponent, AsyncPipe, NgClass], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\">\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n [type]=\"inputType\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <button class=\"far fa-calendar frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleCalendar()\"\r\n ></button>\r\n </div>\r\n @if(showCalendar$ | async){\r\n <frg-input-calendar\r\n [minDate]=\"minDate\"\r\n [maxDate]=\"maxDate\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\">\r\n </frg-input-calendar>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\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}:host .frg-input__wrapper{display:inline-block;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__calendar-button{border:none;background:transparent}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}\n"] }]
|
|
4757
5270
|
}], propDecorators: { onDocumentClick: [{
|
|
4758
5271
|
type: HostListener,
|
|
4759
5272
|
args: ['document:click', ['$event']]
|
|
@@ -4767,6 +5280,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
4767
5280
|
type: Input
|
|
4768
5281
|
}], errorMessages: [{
|
|
4769
5282
|
type: Input
|
|
5283
|
+
}], styleType: [{
|
|
5284
|
+
type: Input
|
|
4770
5285
|
}], type: [{
|
|
4771
5286
|
type: Input
|
|
4772
5287
|
}], minDate: [{
|
|
@@ -4835,6 +5350,10 @@ class InputTimeComponent extends InputBase {
|
|
|
4835
5350
|
* @inheritdoc
|
|
4836
5351
|
*/
|
|
4837
5352
|
this.errorMessages = {};
|
|
5353
|
+
/**
|
|
5354
|
+
* Accent color style for border/focus.
|
|
5355
|
+
*/
|
|
5356
|
+
this.styleType = 'primary';
|
|
4838
5357
|
/**
|
|
4839
5358
|
* The type of the input element.
|
|
4840
5359
|
* Can be 'text', 'password', 'email', 'tel', etc.
|
|
@@ -5427,11 +5946,11 @@ class InputTimeComponent extends InputBase {
|
|
|
5427
5946
|
delete this.warnings[key];
|
|
5428
5947
|
}
|
|
5429
5948
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5430
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTimeComponent, isStandalone: true, selector: "frg-input-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", type: "type", minTime: "minTime", maxTime: "maxTime", format: "format", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
5949
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputTimeComponent, isStandalone: true, selector: "frg-input-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", type: "type", minTime: "minTime", maxTime: "maxTime", format: "format", validatorStrictMode: "validatorStrictMode" }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id + '-full'\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n @if(format.includes('HH') || format.includes('hh')) {\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'hour', min:minHour, max:maxHour, placeholder: format.includes('HH') ? 'HH' : 'hh'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('mm')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'minute', min:minMinute, max:maxMinute, placeholder:'mm'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('ss')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'second', min:minSecond, max:maxSecond, placeholder:'ss'}\"></ng-container>\r\n }\r\n\r\n @if(format.includes('a')) {\r\n <div class=\"frg-input__time__container frg-input__time__meridiem\">\r\n <input\r\n [id]=\"id + '-meridiem'\"\r\n [attr.data-partialTime]=\"'meridiem'\"\r\n type=\"checkbox\"\r\n tabindex=\"0\"\r\n role=\"switch\"\r\n [checked]=\"formatTime(value, 'meridiem') === 'PM'\"\r\n aria-checked=\"{{ formatTime(value, 'meridiem') === 'PM' }}\"\r\n placeholder=\"AM/PM\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (change)=\"onInput($event)\"\r\n (keydown.enter)=\"onKeydown($event)\"\r\n />\r\n </div>\r\n <span class=\"focus-line\"></span>\r\n\r\n }\r\n\r\n <input type=\"text\" [id]=\"id + '-full'\" [value]=\"value\" hidden />\r\n </div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\r\n\r\n<ng-template #timeControl let-partial=\"partial\" let-min=\"min\" let-max=\"max\" let-placeholder=\"placeholder\">\r\n <div class=\"frg-input__time__container\" [ngClass]=\"'frg-input__time__' + partial\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--increment\"\r\n (click)=\"increase(partial)\"\r\n aria-label=\"Increase value\"\r\n >\r\n <span class=\"fas fa-chevron-up\"></span>\r\n </button>\r\n <input\r\n [id]=\"id + '-' + partial\"\r\n [attr.data-partialTime]=\"partial\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatTime(value, partial) !== placeholder ? formatTime(value, partial) : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <span class=\"focus-line\"></span>\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--decrement\"\r\n (click)=\"decrease(partial)\"\r\n aria-label=\"Decrease value\"\r\n >\r\n <span class=\"fas fa-chevron-down\"></span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .2)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .2)}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;display:block;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__field{display:inline-flex;justify-content:center;align-items:center}:host .frg-input__field input[type=number],:host .frg-input__field input[type=number]:focus,:host .frg-input__field input[type=number]:focus-visible{border:none;outline:none}:host .frg-input__field input[type=number]{background:transparent;text-align:center;padding:.5rem 0;letter-spacing:.1rem;font-size:1rem;font-weight:600;color:#737579;display:block}:host .frg-input__field .partial-label{display:block;font-size:.75rem;text-transform:capitalize;width:100%;text-align:center;color:#737579}:host .frg-input__field .colon-seprator{display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}:host .frg-input__time__container{display:flex;flex-direction:column;align-items:center}:host .frg-input__time__container .focus-line{display:block;width:50%;margin:0 auto;height:2px;background-color:var(--frg-input-accent);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease,background-color .2s ease}:host .frg-input__time__container:focus-within .focus-line{transform:scaleX(1)}.frg-input__wrapper.input-error :host .frg-input__time__container .focus-line{background-color:#d66a6a;transform:scaleX(1)}.frg-input__wrapper.input-warning :host .frg-input__time__container .focus-line{background-color:#eba566;transform:scaleX(1)}:host .frg-input__time__meridiem{position:relative;width:3.5rem;height:1.5rem}:host .frg-input__time__meridiem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:100%;height:100%;border-radius:.25rem;background-color:#e6e6e6;cursor:pointer;position:relative;overflow:hidden;transition:background-color .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:focus{outline:none}:host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-offset:.25rem;outline:2px solid #5e5f62;box-shadow:0 0 0 2px var(--frg-input-accent-focus)}.frg-input__wrapper.input-error :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#d66a6a;box-shadow:0 0 0 2px #d66a6a33}.frg-input__wrapper.input-warning :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#eba566;box-shadow:0 0 0 2px #eba56633}:host .frg-input__time__meridiem input[type=checkbox]:before,:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"AM\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;font-weight:600;color:#5e5f62;transition:transform .25s ease,opacity .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"PM\";opacity:0;transform:translate(-50%,150%);color:#fdfdfd}:host .frg-input__time__meridiem input[type=checkbox]:checked{background-color:var(--frg-input-accent)}:host .frg-input__time__meridiem input[type=checkbox]:checked:before{transform:translate(-50%,-150%);opacity:0}:host .frg-input__time__meridiem input[type=checkbox]:checked:after{transform:translate(-50%,-50%);opacity:1}:host .frg-input__time__arrow{background:transparent;color:#5e5f62;border:none;display:block;width:100%;padding:0 .5rem;cursor:pointer}\n"], dependencies: [{ kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
5431
5950
|
}
|
|
5432
5951
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputTimeComponent, decorators: [{
|
|
5433
5952
|
type: Component,
|
|
5434
|
-
args: [{ selector: 'frg-input-time', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass, NgTemplateOutlet], template: "<div class=\"frg-input__wrapper\"\
|
|
5953
|
+
args: [{ selector: 'frg-input-time', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass, NgTemplateOutlet], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id + '-full'\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n @if(format.includes('HH') || format.includes('hh')) {\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'hour', min:minHour, max:maxHour, placeholder: format.includes('HH') ? 'HH' : 'hh'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('mm')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'minute', min:minMinute, max:maxMinute, placeholder:'mm'}\"></ng-container>\r\n }\r\n \r\n @if(format.includes('ss')) {\r\n <span class=\"colon-seprator\">:</span>\r\n <ng-container *ngTemplateOutlet=\"timeControl; context:{partial:'second', min:minSecond, max:maxSecond, placeholder:'ss'}\"></ng-container>\r\n }\r\n\r\n @if(format.includes('a')) {\r\n <div class=\"frg-input__time__container frg-input__time__meridiem\">\r\n <input\r\n [id]=\"id + '-meridiem'\"\r\n [attr.data-partialTime]=\"'meridiem'\"\r\n type=\"checkbox\"\r\n tabindex=\"0\"\r\n role=\"switch\"\r\n [checked]=\"formatTime(value, 'meridiem') === 'PM'\"\r\n aria-checked=\"{{ formatTime(value, 'meridiem') === 'PM' }}\"\r\n placeholder=\"AM/PM\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (change)=\"onInput($event)\"\r\n (keydown.enter)=\"onKeydown($event)\"\r\n />\r\n </div>\r\n <span class=\"focus-line\"></span>\r\n\r\n }\r\n\r\n <input type=\"text\" [id]=\"id + '-full'\" [value]=\"value\" hidden />\r\n </div>\r\n\r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\r\n\r\n<ng-template #timeControl let-partial=\"partial\" let-min=\"min\" let-max=\"max\" let-placeholder=\"placeholder\">\r\n <div class=\"frg-input__time__container\" [ngClass]=\"'frg-input__time__' + partial\">\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--increment\"\r\n (click)=\"increase(partial)\"\r\n aria-label=\"Increase value\"\r\n >\r\n <span class=\"fas fa-chevron-up\"></span>\r\n </button>\r\n <input\r\n [id]=\"id + '-' + partial\"\r\n [attr.data-partialTime]=\"partial\"\r\n type=\"number\"\r\n [placeholder]=\"placeholder\"\r\n [min]=\"min\"\r\n [max]=\"max\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatTime(value, partial) !== placeholder ? formatTime(value, partial) : ''\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <span class=\"focus-line\"></span>\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__time__arrow frg-input__time__arrow--decrement\"\r\n (click)=\"decrease(partial)\"\r\n aria-label=\"Decrease value\"\r\n >\r\n <span class=\"fas fa-chevron-down\"></span>\r\n </button>\r\n </div>\r\n</ng-template>\r\n", styles: [":host{display:block}:host input::-webkit-outer-spin-button,:host input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}:host .frg-input__wrapper{position:relative;box-sizing:border-box;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .2)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .2)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .2)}:host .frg-input__wrapper label{font-size:.75rem;color:#5e5f62;display:block;padding:.25rem .5rem}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-warning label{color:#eba566}:host .frg-input__field{display:inline-flex;justify-content:center;align-items:center}:host .frg-input__field input[type=number],:host .frg-input__field input[type=number]:focus,:host .frg-input__field input[type=number]:focus-visible{border:none;outline:none}:host .frg-input__field input[type=number]{background:transparent;text-align:center;padding:.5rem 0;letter-spacing:.1rem;font-size:1rem;font-weight:600;color:#737579;display:block}:host .frg-input__field .partial-label{display:block;font-size:.75rem;text-transform:capitalize;width:100%;text-align:center;color:#737579}:host .frg-input__field .colon-seprator{display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:600}:host .frg-input__time__container{display:flex;flex-direction:column;align-items:center}:host .frg-input__time__container .focus-line{display:block;width:50%;margin:0 auto;height:2px;background-color:var(--frg-input-accent);transform:scaleX(0);transform-origin:left center;transition:transform .2s ease,background-color .2s ease}:host .frg-input__time__container:focus-within .focus-line{transform:scaleX(1)}.frg-input__wrapper.input-error :host .frg-input__time__container .focus-line{background-color:#d66a6a;transform:scaleX(1)}.frg-input__wrapper.input-warning :host .frg-input__time__container .focus-line{background-color:#eba566;transform:scaleX(1)}:host .frg-input__time__meridiem{position:relative;width:3.5rem;height:1.5rem}:host .frg-input__time__meridiem input[type=checkbox]{appearance:none;-webkit-appearance:none;width:100%;height:100%;border-radius:.25rem;background-color:#e6e6e6;cursor:pointer;position:relative;overflow:hidden;transition:background-color .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:focus{outline:none}:host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-offset:.25rem;outline:2px solid #5e5f62;box-shadow:0 0 0 2px var(--frg-input-accent-focus)}.frg-input__wrapper.input-error :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#d66a6a;box-shadow:0 0 0 2px #d66a6a33}.frg-input__wrapper.input-warning :host .frg-input__time__meridiem input[type=checkbox]:focus-visible{outline-color:#eba566;box-shadow:0 0 0 2px #eba56633}:host .frg-input__time__meridiem input[type=checkbox]:before,:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"AM\";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1rem;font-weight:600;color:#5e5f62;transition:transform .25s ease,opacity .25s ease}:host .frg-input__time__meridiem input[type=checkbox]:after{content:\"PM\";opacity:0;transform:translate(-50%,150%);color:#fdfdfd}:host .frg-input__time__meridiem input[type=checkbox]:checked{background-color:var(--frg-input-accent)}:host .frg-input__time__meridiem input[type=checkbox]:checked:before{transform:translate(-50%,-150%);opacity:0}:host .frg-input__time__meridiem input[type=checkbox]:checked:after{transform:translate(-50%,-50%);opacity:1}:host .frg-input__time__arrow{background:transparent;color:#5e5f62;border:none;display:block;width:100%;padding:0 .5rem;cursor:pointer}\n"] }]
|
|
5435
5954
|
}], propDecorators: { label: [{
|
|
5436
5955
|
type: Input
|
|
5437
5956
|
}], placeholder: [{
|
|
@@ -5442,6 +5961,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
5442
5961
|
type: Input
|
|
5443
5962
|
}], errorMessages: [{
|
|
5444
5963
|
type: Input
|
|
5964
|
+
}], styleType: [{
|
|
5965
|
+
type: Input
|
|
5445
5966
|
}], type: [{
|
|
5446
5967
|
type: Input
|
|
5447
5968
|
}], minTime: [{
|
|
@@ -5641,6 +6162,10 @@ class InputDateTimeComponent extends InputBase {
|
|
|
5641
6162
|
* @inheritdoc
|
|
5642
6163
|
*/
|
|
5643
6164
|
this.errorMessages = {};
|
|
6165
|
+
/**
|
|
6166
|
+
* Accent color style for border/focus.
|
|
6167
|
+
*/
|
|
6168
|
+
this.styleType = 'primary';
|
|
5644
6169
|
/**
|
|
5645
6170
|
* Minimum year selectable in the calendar
|
|
5646
6171
|
*/
|
|
@@ -5925,11 +6450,11 @@ class InputDateTimeComponent extends InputBase {
|
|
|
5925
6450
|
}
|
|
5926
6451
|
}
|
|
5927
6452
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateTimeComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5928
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateTimeComponent, isStandalone: true, selector: "frg-input-date-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", minDateTime: "minDateTime", maxDateTime: "maxDateTime", format: "format" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
6453
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputDateTimeComponent, isStandalone: true, selector: "frg-input-date-time", inputs: { label: "label", placeholder: "placeholder", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", minDateTime: "minDateTime", maxDateTime: "maxDateTime", format: "format" }, host: { listeners: { "document:click": "onDocumentClick($event)" } }, usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <div class=\"frg-input__handle-buttons\">\r\n @if(value){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__clear-button\"\r\n aria-label=\"Clear input\"\r\n (click)=\"clearValue()\"\r\n >\r\n ×\r\n </button>\r\n \r\n }\r\n <button class=\"fa-regular fa-calendar-days frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleDateTimePicker()\"\r\n ></button>\r\n </div>\r\n </div>\r\n @if(showDateTimePicker$ | async){\r\n <div class=\"frg-input__date-time-picker\">\r\n <div class=\"frg-input__date-time-panel\">\r\n <frg-input-calendar\r\n [minDate]=\"minDateTime\"\r\n [maxDate]=\"maxDateTime\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\"\r\n >\r\n </frg-input-calendar>\r\n\r\n <frg-input-clock-picker\r\n [timeFormat]=\"timeFormat\"\r\n [selectedHour]=\"value ? value.getHours().toString() : null\"\r\n [selectedMinute]=\"value ? value.getMinutes().toString() : null\"\r\n [selectedMeridiem]=\"currentMeridiem\"\r\n (selectHour)=\"selectHour($event)\"\r\n (selectMinute)=\"selectMinute($event)\"\r\n (selectMeridiem)=\"selectMeridiem($event)\">\r\n </frg-input-clock-picker>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{display:inline-block;position:relative;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__clear-button{background:transparent;border:none;font-size:1.5rem;color:#5e5f62;line-height:0;font-weight:lighter}:host .frg-input__calendar-button{border:none;background:transparent;color:#5e5f62}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}:host .frg-input__date-time-picker{position:absolute;top:calc(100% + .5rem);left:0;z-index:5}:host .frg-input__date-time-panel{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:.5rem;background:#fdfdfd;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;flex-wrap:nowrap;justify-content:center}:host .frg-input__date-time-panel frg-input-calendar,:host .frg-input__date-time-panel frg-input-clock-picker{display:block;flex:0 0 auto;margin:0}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputCalendarComponent, selector: "frg-input-calendar", inputs: ["minDate", "maxDate", "selectedValue"], outputs: ["selectDate", "handleMaxDate", "handleMinDate"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "component", type: InputClockPickerComponent, selector: "frg-input-clock-picker", inputs: ["selectedHour", "selectedMinute", "selectedMeridiem", "timeFormat"], outputs: ["selectHour", "selectMinute", "selectMeridiem", "closePicker"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }, { kind: "pipe", type: AsyncPipe, name: "async" }] }); }
|
|
5929
6454
|
}
|
|
5930
6455
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputDateTimeComponent, decorators: [{
|
|
5931
6456
|
type: Component,
|
|
5932
|
-
args: [{ selector: 'frg-input-date-time', imports: [InputRequiredLabelPipe, ReactiveFormsModule, AsyncPipe, InputCalendarComponent, InputValidationComponent, InputClockPickerComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
6457
|
+
args: [{ selector: 'frg-input-date-time', imports: [InputRequiredLabelPipe, ReactiveFormsModule, AsyncPipe, NgClass, InputCalendarComponent, InputValidationComponent, InputClockPickerComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <div class=\"frg-input__field\">\r\n <input\r\n [id]=\"id\"\r\n type=\"text\"\r\n [placeholder]=\"placeholder\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [value]=\"formatDate(value)\"\r\n (blur)=\"onBlur($event)\"\r\n (focus)=\"onFocus($event)\"\r\n (input)=\"onInput($event)\"\r\n />\r\n <div class=\"frg-input__handle-buttons\">\r\n @if(value){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__clear-button\"\r\n aria-label=\"Clear input\"\r\n (click)=\"clearValue()\"\r\n >\r\n ×\r\n </button>\r\n \r\n }\r\n <button class=\"fa-regular fa-calendar-days frg-input__calendar-button\"\r\n aria-label=\"Open calendar\"\r\n (click)=\"toggleDateTimePicker()\"\r\n ></button>\r\n </div>\r\n </div>\r\n @if(showDateTimePicker$ | async){\r\n <div class=\"frg-input__date-time-picker\">\r\n <div class=\"frg-input__date-time-panel\">\r\n <frg-input-calendar\r\n [minDate]=\"minDateTime\"\r\n [maxDate]=\"maxDateTime\"\r\n [selectedValue]=\"value\"\r\n (selectDate)=\"selectDate($event)\"\r\n >\r\n </frg-input-calendar>\r\n\r\n <frg-input-clock-picker\r\n [timeFormat]=\"timeFormat\"\r\n [selectedHour]=\"value ? value.getHours().toString() : null\"\r\n [selectedMinute]=\"value ? value.getMinutes().toString() : null\"\r\n [selectedMeridiem]=\"currentMeridiem\"\r\n (selectHour)=\"selectHour($event)\"\r\n (selectMinute)=\"selectMinute($event)\"\r\n (selectMeridiem)=\"selectMeridiem($event)\">\r\n </frg-input-clock-picker>\r\n </div>\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{display:inline-block;position:relative;width:100%;--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper.input-error .frg-input__field:after{width:100%;right:0}:host .frg-input__field{display:inline-flex;align-items:center;justify-content:space-between;padding:.25rem .5rem;border-bottom:2px solid rgb(184.7584745763,185.9194915254,188.2415254237);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\";background:transparent;position:relative;width:100%}:host .frg-input__field input{border:none;background:transparent}:host .frg-input__field input:focus{outline:none}:host .frg-input__field span{margin-left:.5rem;cursor:pointer;color:#5e5f62}:host .frg-input__field:before{content:\"\";position:absolute;bottom:-2px;left:-50%;width:0;height:.125rem;background:var(--frg-input-accent);transition:width .3s ease,left .3s ease}:host .frg-input__field:has(input:focus):before{width:100%;left:0}:host .frg-input__field:after{content:\"\";position:absolute;bottom:-2px;right:-50%;width:0;height:.125rem;background:#d66a6a;transition:width .3s ease,right .3s ease}:host .frg-input__clear-button{background:transparent;border:none;font-size:1.5rem;color:#5e5f62;line-height:0;font-weight:lighter}:host .frg-input__calendar-button{border:none;background:transparent;color:#5e5f62}:host .frg-input__calendar-button:focus,:host .frg-input__calendar-button:focus-visible,:host .frg-input__calendar-button:focus-within{border:none;outline:none}:host .frg-input__date-time-picker{position:absolute;top:calc(100% + .5rem);left:0;z-index:5}:host .frg-input__date-time-panel{display:flex;align-items:center;gap:.75rem;padding:.5rem;border-radius:.5rem;background:#fdfdfd;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;flex-wrap:nowrap;justify-content:center}:host .frg-input__date-time-panel frg-input-calendar,:host .frg-input__date-time-panel frg-input-clock-picker{display:block;flex:0 0 auto;margin:0}\n"] }]
|
|
5933
6458
|
}], propDecorators: { onDocumentClick: [{
|
|
5934
6459
|
type: HostListener,
|
|
5935
6460
|
args: ['document:click', ['$event']]
|
|
@@ -5943,6 +6468,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
5943
6468
|
type: Input
|
|
5944
6469
|
}], errorMessages: [{
|
|
5945
6470
|
type: Input
|
|
6471
|
+
}], styleType: [{
|
|
6472
|
+
type: Input
|
|
5946
6473
|
}], minDateTime: [{
|
|
5947
6474
|
type: Input
|
|
5948
6475
|
}], maxDateTime: [{
|
|
@@ -5978,6 +6505,10 @@ class InputToggleSwitchComponent extends InputBase {
|
|
|
5978
6505
|
* @inheritdoc
|
|
5979
6506
|
*/
|
|
5980
6507
|
this.showValidation = true;
|
|
6508
|
+
/**
|
|
6509
|
+
* Accent color style for checked/focus state.
|
|
6510
|
+
*/
|
|
6511
|
+
this.styleType = 'primary';
|
|
5981
6512
|
/**
|
|
5982
6513
|
* The toggle switch type
|
|
5983
6514
|
* @default 'square'
|
|
@@ -6047,11 +6578,11 @@ class InputToggleSwitchComponent extends InputBase {
|
|
|
6047
6578
|
return this.warningList.length > 0;
|
|
6048
6579
|
}
|
|
6049
6580
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputToggleSwitchComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
6050
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputToggleSwitchComponent, isStandalone: true, selector: "frg-input-toggle-switch", inputs: { label: "label", required: "required", disabled: "disabled", errorMessages: "errorMessages", warningMessages: "warningMessages", showValidation: "showValidation", type: "type" }, usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \
|
|
6581
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputToggleSwitchComponent, isStandalone: true, selector: "frg-input-toggle-switch", inputs: { label: "label", required: "required", disabled: "disabled", errorMessages: "errorMessages", warningMessages: "warningMessages", showValidation: "showValidation", styleType: "styleType", type: "type" }, usesInheritance: true, ngImport: i0, template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \n [class.frg-toggle-switch__wrapper--primary]=\"styleType === 'primary'\"\n [class.frg-toggle-switch__wrapper--secondary]=\"styleType === 'secondary'\"\n [class.frg-toggle-switch__wrapper--tertiary]=\"styleType === 'tertiary'\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"frg-toggle-switch\"\r\n [ngClass]=\"[\r\n 'frg-toggle-switch--' + type,\n 'frg-toggle-switch--tone-' + styleType,\n value ? 'frg-toggle-switch--on' : 'frg-toggle-switch--off',\n disabled ? 'disabled' : ''\n ]\"\n [aria-checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n (keydown)=\"onKeydown($event)\"\r\n >\r\n <span class=\"handle\">\r\n @if (disabled) {\r\n <span class=\"fas fa-ban\"></span>\r\n }\r\n </span>\r\n </button>\r\n \r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\n", styles: [":host label{display:flex;font-size:.75rem;color:#5e5f62}:host .input-error label{color:#d66a6a}:host .frg-toggle-switch__wrapper{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--primary{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--secondary{--frg-toggle-accent: #e6c57a;--frg-toggle-focus: rgba(230, 197, 122, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--tertiary{--frg-toggle-accent: #d97ebd;--frg-toggle-focus: rgba(217, 126, 189, .14)}:host .frg-toggle-switch{width:40px;height:20px;position:relative;display:inline-block;background:#e6e6e6;border-radius:.25rem;border:none;padding:0;box-shadow:inset 0 1px 2px #0000000f;box-sizing:content-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease,box-shadow .16s ease;vertical-align:middle;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .frg-toggle-switch:focus{outline:none}:host .frg-toggle-switch:focus-visible{box-shadow:0 0 0 4px var(--frg-toggle-focus)}:host .frg-toggle-switch.disabled{cursor:not-allowed;opacity:.65;pointer-events:none;background:#bfbfbf;border-color:#737579}:host .frg-toggle-switch--off{background:#e6e6e6}:host .frg-toggle-switch--on{background:var(--frg-toggle-accent)}:host .frg-toggle-switch .handle{width:16px;height:16px;background:#fdfdfd;border-radius:.25rem;position:absolute;top:2px;left:2px;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .12s ease;will-change:transform;display:block;font-weight:600;color:#5e5f62;text-transform:uppercase;font-size:.7rem}:host .frg-toggle-switch--circle{border-radius:20px}:host .frg-toggle-switch--circle .handle{border-radius:50%}:host .frg-toggle-switch.frg-toggle-switch--on .handle{transform:translate(20px)}:host .frg-toggle-switch:not(.disabled):hover .handle{box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a}:host .frg-toggle-switch:active .handle{transform:translate(0) scale(.98)}:host .frg-toggle-switch.frg-toggle-switch--on:active .handle{transform:translate(20px) scale(.98)}@media (prefers-reduced-motion: reduce){:host .frg-toggle-switch .handle,:host .frg-toggle-switch{transition:none!important}}\n"], dependencies: [{ kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
6051
6582
|
}
|
|
6052
6583
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputToggleSwitchComponent, decorators: [{
|
|
6053
6584
|
type: Component,
|
|
6054
|
-
args: [{ selector: 'frg-input-toggle-switch', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass], template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \
|
|
6585
|
+
args: [{ selector: 'frg-input-toggle-switch', imports: [InputRequiredLabelPipe, InputValidationComponent, NgClass], template: "\r\n<div class=\"frg-toggle-switch__wrapper\" \n [class.frg-toggle-switch__wrapper--primary]=\"styleType === 'primary'\"\n [class.frg-toggle-switch__wrapper--secondary]=\"styleType === 'secondary'\"\n [class.frg-toggle-switch__wrapper--tertiary]=\"styleType === 'tertiary'\"\n [class.input-error]=\"hasError\"\n [class.input-warning]=\"hasWarning\"\n>\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n <button\r\n type=\"button\"\r\n class=\"frg-toggle-switch\"\r\n [ngClass]=\"[\r\n 'frg-toggle-switch--' + type,\n 'frg-toggle-switch--tone-' + styleType,\n value ? 'frg-toggle-switch--on' : 'frg-toggle-switch--off',\n disabled ? 'disabled' : ''\n ]\"\n [aria-checked]=\"value\"\r\n [disabled]=\"disabled\"\r\n (click)=\"toggle()\"\r\n (keydown)=\"onKeydown($event)\"\r\n >\r\n <span class=\"handle\">\r\n @if (disabled) {\r\n <span class=\"fas fa-ban\"></span>\r\n }\r\n </span>\r\n </button>\r\n \r\n @if(showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n ></frg-input-validation>\r\n }\r\n</div>\n", styles: [":host label{display:flex;font-size:.75rem;color:#5e5f62}:host .input-error label{color:#d66a6a}:host .frg-toggle-switch__wrapper{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--primary{--frg-toggle-accent: #6ea8d9;--frg-toggle-focus: rgba(110, 168, 217, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--secondary{--frg-toggle-accent: #e6c57a;--frg-toggle-focus: rgba(230, 197, 122, .14)}:host .frg-toggle-switch__wrapper.frg-toggle-switch__wrapper--tertiary{--frg-toggle-accent: #d97ebd;--frg-toggle-focus: rgba(217, 126, 189, .14)}:host .frg-toggle-switch{width:40px;height:20px;position:relative;display:inline-block;background:#e6e6e6;border-radius:.25rem;border:none;padding:0;box-shadow:inset 0 1px 2px #0000000f;box-sizing:content-box;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;transition:background .18s ease,border-color .18s ease,box-shadow .16s ease;vertical-align:middle;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host .frg-toggle-switch:focus{outline:none}:host .frg-toggle-switch:focus-visible{box-shadow:0 0 0 4px var(--frg-toggle-focus)}:host .frg-toggle-switch.disabled{cursor:not-allowed;opacity:.65;pointer-events:none;background:#bfbfbf;border-color:#737579}:host .frg-toggle-switch--off{background:#e6e6e6}:host .frg-toggle-switch--on{background:var(--frg-toggle-accent)}:host .frg-toggle-switch .handle{width:16px;height:16px;background:#fdfdfd;border-radius:.25rem;position:absolute;top:2px;left:2px;box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a;transition:transform .16s cubic-bezier(.2,.8,.2,1),box-shadow .12s ease;will-change:transform;display:block;font-weight:600;color:#5e5f62;text-transform:uppercase;font-size:.7rem}:host .frg-toggle-switch--circle{border-radius:20px}:host .frg-toggle-switch--circle .handle{border-radius:50%}:host .frg-toggle-switch.frg-toggle-switch--on .handle{transform:translate(20px)}:host .frg-toggle-switch:not(.disabled):hover .handle{box-shadow:0 4px 6px #0000000f,0 2px 4px #0000001a}:host .frg-toggle-switch:active .handle{transform:translate(0) scale(.98)}:host .frg-toggle-switch.frg-toggle-switch--on:active .handle{transform:translate(20px) scale(.98)}@media (prefers-reduced-motion: reduce){:host .frg-toggle-switch .handle,:host .frg-toggle-switch{transition:none!important}}\n"] }]
|
|
6055
6586
|
}], propDecorators: { label: [{
|
|
6056
6587
|
type: Input
|
|
6057
6588
|
}], required: [{
|
|
@@ -6064,6 +6595,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
6064
6595
|
type: Input
|
|
6065
6596
|
}], showValidation: [{
|
|
6066
6597
|
type: Input
|
|
6598
|
+
}], styleType: [{
|
|
6599
|
+
type: Input
|
|
6067
6600
|
}], type: [{
|
|
6068
6601
|
type: Input
|
|
6069
6602
|
}] } });
|
|
@@ -6859,6 +7392,10 @@ class InputFileUploadComponent extends InputBase {
|
|
|
6859
7392
|
* @inheritdoc
|
|
6860
7393
|
*/
|
|
6861
7394
|
this.errorMessages = {};
|
|
7395
|
+
/**
|
|
7396
|
+
* Accent color style for border/focus.
|
|
7397
|
+
*/
|
|
7398
|
+
this.styleType = 'primary';
|
|
6862
7399
|
/**
|
|
6863
7400
|
* Accepted file types (e.g. ".pdf,.png" or "image/*").
|
|
6864
7401
|
*/
|
|
@@ -7137,11 +7674,11 @@ class InputFileUploadComponent extends InputBase {
|
|
|
7137
7674
|
});
|
|
7138
7675
|
}
|
|
7139
7676
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputFileUploadComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
7140
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputFileUploadComponent, isStandalone: true, selector: "frg-input-file-upload", inputs: { label: "label", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", accept: "accept", multiple: "multiple", maxFiles: "maxFiles", maxFileSize: "maxFileSize", maxTotalSize: "maxTotalSize", buttonLabel: "buttonLabel", noFileText: "noFileText", showClearButton: "showClearButton", showFileList: "showFileList", showFileSize: "showFileSize" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\
|
|
7677
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.2.3", type: InputFileUploadComponent, isStandalone: true, selector: "frg-input-file-upload", inputs: { label: "label", required: "required", showValidation: "showValidation", errorMessages: "errorMessages", styleType: "styleType", accept: "accept", multiple: "multiple", maxFiles: "maxFiles", maxFileSize: "maxFileSize", maxTotalSize: "maxTotalSize", buttonLabel: "buttonLabel", noFileText: "noFileText", showClearButton: "showClearButton", showFileList: "showFileList", showFileSize: "showFileSize" }, viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true, static: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__file\" [class.has-files]=\"hasFiles\" [class.is-dragover]=\"isDragOver\">\r\n <div class=\"frg-input__file-main\">\r\n <frg-button\n [styleType]=\"styleType\"\n [shape]=\"'pill'\"\n [size]=\"'small'\"\r\n [text]=\"buttonLabel\"\r\n [iconClass]=\"'fas fa-plus'\"\r\n [iconStyleType]=\"'light'\"\r\n [iconPosition]=\"'left'\"\r\n [disabled]=\"disabled\"\r\n (clickEvent)=\"triggerFileDialog()\"\r\n >\r\n </frg-button>\r\n\r\n <div class=\"frg-input__file-summary\">\r\n <span class=\"frg-input__file-summary-title\">{{ fileSummary }}</span>\r\n <span class=\"frg-input__file-summary-subtitle\">Drop or browse to upload</span>\r\n </div>\r\n </div>\r\n\r\n @if(showClearButton && hasFiles){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-clear\"\r\n [disabled]=\"disabled\"\r\n (click)=\"clearFiles()\"\r\n >\r\n Clear all\r\n </button>\r\n }\r\n </div>\r\n\r\n <input\r\n #fileInput\r\n [id]=\"id\"\r\n type=\"file\"\r\n class=\"frg-input__file-input\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.accept]=\"accept || null\"\r\n [attr.multiple]=\"multiple ? '' : null\"\r\n (change)=\"onFileChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n @if(showFileList && files.length){\r\n <div class=\"frg-input__file-list\">\r\n @for(file of files; track trackFile($index, file)){\r\n <div class=\"frg-input__file-chip\">\r\n <span class=\"frg-input__file-name\">{{ file.name }}</span>\r\n @if(showFileSize){\r\n <span class=\"frg-input__file-size\">{{ formatBytes(file.size) }}</span>\r\n }\r\n @if(multiple){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-remove\"\r\n [disabled]=\"disabled\"\r\n (click)=\"removeFile($index)\"\r\n aria-label=\"Remove file\"\r\n >\r\n x\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .16)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .16)}:host .frg-input__file{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .85rem;border:1px dashed rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;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;background:#fdfdfd;transition:border-color .2s ease,box-shadow .2s ease}:host .frg-input__file.has-files{border-style:solid;border-color:var(--frg-input-accent);box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file.is-dragover{border-color:var(--frg-input-accent);box-shadow:0 0 0 3px var(--frg-input-accent-focus)}:host .frg-input__file:hover{border-color:var(--frg-input-accent)}:host .frg-input__file-main{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}:host .frg-input frg-button .frg-btn{margin:0}:host .frg-input__file-summary{display:flex;flex-direction:column;gap:.15rem;min-width:0;font-size:.875rem;color:#5e5f62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-subtitle{font-size:.75rem;color:#737579}:host .frg-input__file-clear{border:1px solid #d66a6a;background:transparent;color:#d66a6a;font-size:.75rem;border-radius:999px;padding:.2rem .6rem;cursor:pointer}:host .frg-input__file-clear:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__file-input{position:absolute;inset:0;opacity:0;pointer-events:none}:host .frg-input__file-list{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.875rem;color:#5e5f62}:host .frg-input__file-chip{display:flex;align-items:center;gap:.35rem;background:#fdfdfd;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:999px;padding:.2rem .5rem;box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file-name{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-size{color:#737579;font-size:.75rem}:host .frg-input__file-remove{border:none;background:transparent;color:#d66a6a;font-size:.75rem;cursor:pointer}:host .frg-input__file-remove:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__wrapper.input-error .frg-input__file{border-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:0;width:0;height:0}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: InputValidationComponent, selector: "frg-input-validation", inputs: ["errorList", "warningList", "isFormInvalid"] }, { 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: "pipe", type: InputRequiredLabelPipe, name: "inputRequiredLabel" }] }); }
|
|
7141
7678
|
}
|
|
7142
7679
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImport: i0, type: InputFileUploadComponent, decorators: [{
|
|
7143
7680
|
type: Component,
|
|
7144
|
-
args: [{ selector: 'frg-input-file-upload', imports: [InputRequiredLabelPipe, InputValidationComponent, ButtonComponent], template: "<div class=\"frg-input__wrapper\"\
|
|
7681
|
+
args: [{ selector: 'frg-input-file-upload', imports: [InputRequiredLabelPipe, NgClass, InputValidationComponent, ButtonComponent], template: "<div class=\"frg-input__wrapper\"\n [ngClass]=\"{\n 'frg-input__wrapper--primary': styleType === 'primary',\n 'frg-input__wrapper--secondary': styleType === 'secondary',\n 'frg-input__wrapper--tertiary': styleType === 'tertiary'\n }\"\n [class.input-error]=\"hasError\"\n (dragover)=\"onDragOver($event)\"\n (dragleave)=\"onDragLeave($event)\"\r\n (drop)=\"onDrop($event)\"\r\n>\r\n @if(label){\r\n <label [for]=\"id\">{{ label | inputRequiredLabel: required }}</label>\r\n }\r\n\r\n <div class=\"frg-input__file\" [class.has-files]=\"hasFiles\" [class.is-dragover]=\"isDragOver\">\r\n <div class=\"frg-input__file-main\">\r\n <frg-button\n [styleType]=\"styleType\"\n [shape]=\"'pill'\"\n [size]=\"'small'\"\r\n [text]=\"buttonLabel\"\r\n [iconClass]=\"'fas fa-plus'\"\r\n [iconStyleType]=\"'light'\"\r\n [iconPosition]=\"'left'\"\r\n [disabled]=\"disabled\"\r\n (clickEvent)=\"triggerFileDialog()\"\r\n >\r\n </frg-button>\r\n\r\n <div class=\"frg-input__file-summary\">\r\n <span class=\"frg-input__file-summary-title\">{{ fileSummary }}</span>\r\n <span class=\"frg-input__file-summary-subtitle\">Drop or browse to upload</span>\r\n </div>\r\n </div>\r\n\r\n @if(showClearButton && hasFiles){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-clear\"\r\n [disabled]=\"disabled\"\r\n (click)=\"clearFiles()\"\r\n >\r\n Clear all\r\n </button>\r\n }\r\n </div>\r\n\r\n <input\r\n #fileInput\r\n [id]=\"id\"\r\n type=\"file\"\r\n class=\"frg-input__file-input\"\r\n [required]=\"required\"\r\n [disabled]=\"disabled\"\r\n [attr.accept]=\"accept || null\"\r\n [attr.multiple]=\"multiple ? '' : null\"\r\n (change)=\"onFileChange($event)\"\r\n (blur)=\"onBlur($event)\"\r\n />\r\n\r\n @if(showFileList && files.length){\r\n <div class=\"frg-input__file-list\">\r\n @for(file of files; track trackFile($index, file)){\r\n <div class=\"frg-input__file-chip\">\r\n <span class=\"frg-input__file-name\">{{ file.name }}</span>\r\n @if(showFileSize){\r\n <span class=\"frg-input__file-size\">{{ formatBytes(file.size) }}</span>\r\n }\r\n @if(multiple){\r\n <button\r\n type=\"button\"\r\n class=\"frg-input__file-remove\"\r\n [disabled]=\"disabled\"\r\n (click)=\"removeFile($index)\"\r\n aria-label=\"Remove file\"\r\n >\r\n x\r\n </button>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n\r\n@if (showValidation) {\r\n <frg-input-validation\r\n [errorList]=\"errorList\"\r\n [warningList]=\"warningList\"\r\n [isFormInvalid]=\"hasError\"\r\n >\r\n </frg-input-validation>\r\n}\r\n", styles: [":host{display:block}:host label{display:flex;font-size:.75rem;color:#5e5f62;padding:.25rem .5rem}:host .frg-input{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 .frg-input__wrapper{position:relative;display:inline-block;width:100%;--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--primary{--frg-input-accent: #6ea8d9;--frg-input-accent-focus: rgba(110, 168, 217, .16)}:host .frg-input__wrapper.frg-input__wrapper--secondary{--frg-input-accent: #e6c57a;--frg-input-accent-focus: rgba(230, 197, 122, .16)}:host .frg-input__wrapper.frg-input__wrapper--tertiary{--frg-input-accent: #d97ebd;--frg-input-accent-focus: rgba(217, 126, 189, .16)}:host .frg-input__file{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.75rem .85rem;border:1px dashed rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:.25rem;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;background:#fdfdfd;transition:border-color .2s ease,box-shadow .2s ease}:host .frg-input__file.has-files{border-style:solid;border-color:var(--frg-input-accent);box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file.is-dragover{border-color:var(--frg-input-accent);box-shadow:0 0 0 3px var(--frg-input-accent-focus)}:host .frg-input__file:hover{border-color:var(--frg-input-accent)}:host .frg-input__file-main{display:flex;align-items:center;gap:.75rem;flex:1;min-width:0}:host .frg-input frg-button .frg-btn{margin:0}:host .frg-input__file-summary{display:flex;flex-direction:column;gap:.15rem;min-width:0;font-size:.875rem;color:#5e5f62;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-title{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-summary-subtitle{font-size:.75rem;color:#737579}:host .frg-input__file-clear{border:1px solid #d66a6a;background:transparent;color:#d66a6a;font-size:.75rem;border-radius:999px;padding:.2rem .6rem;cursor:pointer}:host .frg-input__file-clear:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__file-input{position:absolute;inset:0;opacity:0;pointer-events:none}:host .frg-input__file-list{margin-top:.5rem;display:flex;flex-wrap:wrap;gap:.4rem;font-size:.875rem;color:#5e5f62}:host .frg-input__file-chip{display:flex;align-items:center;gap:.35rem;background:#fdfdfd;border:1px solid rgb(184.7584745763,185.9194915254,188.2415254237);border-radius:999px;padding:.2rem .5rem;box-shadow:0 1px 1.5px #fdfdfd14,0 .5px 1px #fdfdfd0f}:host .frg-input__file-name{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}:host .frg-input__file-size{color:#737579;font-size:.75rem}:host .frg-input__file-remove{border:none;background:transparent;color:#d66a6a;font-size:.75rem;cursor:pointer}:host .frg-input__file-remove:disabled{cursor:not-allowed;opacity:.6}:host .frg-input__wrapper.input-error .frg-input__file{border-color:#d66a6a}:host .frg-input__wrapper.input-error label{color:#d66a6a}:host .frg-input__wrapper:before{content:\"\";position:absolute;bottom:0;left:0;width:0;height:0}\n"] }]
|
|
7145
7682
|
}], propDecorators: { label: [{
|
|
7146
7683
|
type: Input
|
|
7147
7684
|
}], required: [{
|
|
@@ -7150,6 +7687,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
7150
7687
|
type: Input
|
|
7151
7688
|
}], errorMessages: [{
|
|
7152
7689
|
type: Input
|
|
7690
|
+
}], styleType: [{
|
|
7691
|
+
type: Input
|
|
7153
7692
|
}], accept: [{
|
|
7154
7693
|
type: Input
|
|
7155
7694
|
}], multiple: [{
|
|
@@ -10043,5 +10582,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.2.3", ngImpor
|
|
|
10043
10582
|
* Generated bundle index. Do not edit.
|
|
10044
10583
|
*/
|
|
10045
10584
|
|
|
10046
|
-
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 };
|
|
10585
|
+
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, InputRichTextComponent, InputSliderComponent, InputTextComponent, InputTextareaComponent, 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 };
|
|
10047
10586
|
//# sourceMappingURL=tacdaed-fragments.mjs.map
|