@rangertechnologies/ngnxt 2.1.95 → 2.1.97

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.
Files changed (28) hide show
  1. package/esm2022/lib/components/button/nxt-button.component.mjs +130 -0
  2. package/esm2022/lib/components/custom-table/custom-table.component.mjs +2 -2
  3. package/esm2022/lib/components/datatable/datatable.component.mjs +805 -0
  4. package/esm2022/lib/components/pagination/pagination.component.mjs +100 -0
  5. package/esm2022/lib/components/search-box/search-box.component.mjs +3 -3
  6. package/esm2022/lib/pages/questionbook/questionbook.component.mjs +3 -3
  7. package/esm2022/lib/pipe/date/date.pipe.mjs +28 -0
  8. package/esm2022/lib/pipe/editColumnCheck/edit-column-check.pipe.mjs +28 -0
  9. package/esm2022/lib/pipe/editColumnDropdown/edit-column-dropdown.pipe.mjs +20 -0
  10. package/esm2022/lib/pipe/editColumnType/edit-column-type.pipe.mjs +20 -0
  11. package/esm2022/lib/pipe/search-filter/search-filter.pipe.mjs +39 -0
  12. package/esm2022/lib/pipe/time/time.pipe.mjs +26 -0
  13. package/esm2022/public-api.mjs +3 -1
  14. package/fesm2022/rangertechnologies-ngnxt.mjs +1165 -9
  15. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  16. package/lib/components/button/nxt-button.component.d.ts +38 -0
  17. package/lib/components/datatable/datatable.component.d.ts +130 -0
  18. package/lib/components/pagination/pagination.component.d.ts +36 -0
  19. package/lib/pipe/date/date.pipe.d.ts +7 -0
  20. package/lib/pipe/editColumnCheck/edit-column-check.pipe.d.ts +7 -0
  21. package/lib/pipe/editColumnDropdown/edit-column-dropdown.pipe.d.ts +7 -0
  22. package/lib/pipe/editColumnType/edit-column-type.pipe.d.ts +7 -0
  23. package/lib/pipe/search-filter/search-filter.pipe.d.ts +8 -0
  24. package/lib/pipe/time/time.pipe.d.ts +7 -0
  25. package/package.json +1 -1
  26. package/public-api.d.ts +1 -0
  27. package/rangertechnologies-ngnxt-2.1.97.tgz +0 -0
  28. package/rangertechnologies-ngnxt-2.1.95.tgz +0 -0
package/esm2022/lib/components/button/nxt-button.component.mjs ADDED
@@ -0,0 +1,130 @@
1
+ import { CommonModule } from '@angular/common';
2
+ import { Component, EventEmitter, HostListener, Input, Output } from '@angular/core';
3
+ import * as i0 from "@angular/core";
4
+ import * as i1 from "@angular/common";
5
+ export class NxtButtonComponent {
6
+ elementRef;
7
+ buttonValue = ''; //SKS24JAN25 button text
8
+ buttonType = 'primary'; //SKS24JAN25 If the button type is 'text-only', it should display only the text without a border or outline. For 'grey-text', the button should have a border and a background color, but the text color should be gray, similar to 'blue-text'
9
+ type = 'button'; //SKS24JAN25 The button types are "button," "group," and "dropdown."
10
+ buttonDisable = false; //SKS24JAN25 use this input to disable a button when needed.
11
+ fcBtnBgColor = ''; // Use this input to set a custom background color for the button.
12
+ fcBtnBorder = ''; // Use this input to set a custom border style for the button.
13
+ fcBtnTextColor = ''; // Use this input to set a custom text color for the button.
14
+ fcBtnHeight = ''; // Use this input to set a custom height for the button.
15
+ fcBtnWidth = ''; // Use this input to set a custom width for the button.
16
+ fcBtnIconLeftSrc = ''; // Use this input to set the source of the left-side icon for the button.
17
+ fcBtnIconRightSrc = ''; // Use this input to set the source of the right-side icon for the button.
18
+ fcBtnHoverBgColor = ''; // Use this input to set the background color of the button on hover.
19
+ fcBtnHoverTextColor = ''; // Use this input to set the text color of the button on hover.
20
+ fcBtnId = 'default'; // Use this input to set a custom ID for the button. Default is 'default'.
21
+ dataDismiss = ''; // Use this input to specify the dismiss action for the button (e.g., 'modal' to close a modal).
22
+ fcButtonBorder = '0px'; // Use this input to set the border size of the button. Default is '0px' for no border.
23
+ modalToTrigger = ''; // Use this input to specify the ID or target of the modal to be triggered.
24
+ isImageSvg = false; // Use this input to determine if the image is an SVG. Default is false (non-SVG).
25
+ tabIndex = ''; // Use this input to set the tab index for the element, controlling the focus order.
26
+ buttonConfig = ''; // Use this input to pass configuration settings for the group and dropdown buttons (e.g., styles, actions).
27
+ buttonClickEmit = new EventEmitter();
28
+ iconSrc = ''; // Ensure it's always a string
29
+ isDropdownOpen = false;
30
+ // SKS24JAN25 dropdown button config
31
+ // dropdownButton = {
32
+ // fcBtnBgColor: '#007bff',
33
+ // fcBtnBorder: '1px solid #0056b3',
34
+ // fcBtnTextColor: '#ffffff',
35
+ // fcBtnHeight: '40px',
36
+ // fcBtnWidth: '150px',
37
+ // fcBtnHoverBgColor: '#0056b3',
38
+ // fcBtnHoverTextColor: '#ffffff',
39
+ // label: 'Dropdown',
40
+ // iconSrc: '',
41
+ // items: [
42
+ // { label: 'Action 1',iconSrc: '', hover: false },
43
+ // { label: 'Action 2',iconSrc: '', hover: false },
44
+ // { label: 'Action 3',iconSrc: '', hover: false }
45
+ // ]
46
+ // };
47
+ constructor(elementRef) {
48
+ this.elementRef = elementRef;
49
+ }
50
+ ngOnInit() { }
51
+ //SKS24JAN25 Function to get styles for dropdown and group buttons based on the provided configuration.
52
+ getButtonStyles(config) {
53
+ return {
54
+ '--fc-button-custom-bg': config.fcBtnBgColor || '',
55
+ '--fc-button-custom-border': config.fcBtnBorder || '',
56
+ '--fc-button-custom-color': config.fcBtnTextColor || '',
57
+ '--fc-button-custom-height': config.fcBtnHeight || '',
58
+ '--fc-button-custom-width': config.fcBtnWidth || '',
59
+ '--fc-button-hover-bg': config.fcBtnHoverBgColor || '',
60
+ '--fc-button-hover-text-color': config.fcBtnHoverTextColor || ''
61
+ };
62
+ }
63
+ buttonClicked($event) {
64
+ this.buttonClickEmit.emit($event);
65
+ if (this.isDropdownOpen) {
66
+ this.isDropdownOpen = false;
67
+ }
68
+ }
69
+ toggleDropdown() {
70
+ this.isDropdownOpen = !this.isDropdownOpen;
71
+ }
72
+ //SKS24JAN25 Listener for clicks outside the dropdown button to close or manage its state.
73
+ onClickOutside(event) {
74
+ if (this.isDropdownOpen && !this.elementRef.nativeElement.contains(event.target)) {
75
+ this.isDropdownOpen = false;
76
+ }
77
+ }
78
+ static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtButtonComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
79
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: NxtButtonComponent, isStandalone: true, selector: "nxt-button", inputs: { buttonValue: "buttonValue", buttonType: "buttonType", type: "type", buttonDisable: "buttonDisable", fcBtnBgColor: "fcBtnBgColor", fcBtnBorder: "fcBtnBorder", fcBtnTextColor: "fcBtnTextColor", fcBtnHeight: "fcBtnHeight", fcBtnWidth: "fcBtnWidth", fcBtnIconLeftSrc: "fcBtnIconLeftSrc", fcBtnIconRightSrc: "fcBtnIconRightSrc", fcBtnHoverBgColor: "fcBtnHoverBgColor", fcBtnHoverTextColor: "fcBtnHoverTextColor", fcBtnId: "fcBtnId", dataDismiss: "dataDismiss", fcButtonBorder: "fcButtonBorder", modalToTrigger: "modalToTrigger", isImageSvg: "isImageSvg", tabIndex: "tabIndex", buttonConfig: "buttonConfig" }, outputs: { buttonClickEmit: "buttonClickEmit" }, host: { listeners: { "document:click": "onClickOutside($event)" } }, ngImport: i0, template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltip }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn btn-primary fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n style=\"--fc-button-custom-bg: {{fcBtnBgColor}};--fc-button-custom-border: {{fcBtnBorder}};--fc-button-custom-color: {{fcBtnTextColor}};--fc-button-custom-height: {{fcBtnHeight}};--fc-button-custom-width: {{fcBtnWidth}};--fc-button-hover-bg: {{fcBtnHoverBgColor}};--fc-button-hover-text-color: {{fcBtnHoverTextColor}};\"\n [disabled]=\"buttonDisable\" [attr.data-bs-dismiss]='dataDismiss' (click)=\"buttonClicked($event)\"\n [attr.id]=\"fcBtnId != 'default' ? fcBtnId : null\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\"\n class=\"fc-btn-icon left-icon\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && !isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\" class=\"fc-btn-icon left-icon\">\n <span class=\"fc-btn-text\">{{buttonValue}}</span>\n <img *ngIf=\"fcBtnIconRightSrc != '' && isImageSvg\" src=\"{{fcBtnIconRightSrc}}\"\n class=\"fc-btn-icon right-icon\">\n <img *ngIf=\"fcBtnIconRightSrc != '' && !isImageSvg\" src=\"{{fcBtnIconRightSrc}}\" class=\"fc-btn-icon right-icon\">\n</button>\n\n<!-- SKS24JAN25 dropdown button -->\n<div *ngIf=\"type === 'dropdown'\" class=\"dropdown\">\n <svg class=\"clickable-img\" (click)=\"toggleDropdown()\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.3\" y=\"0.3\" width=\"39.4\" height=\"39.4\" rx=\"11.7\" fill=\"#FAFBFD\" stroke=\"#D5D5D5\" stroke-width=\"0.6\"/>\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"fc-btn-text\" style=\"padding-left: 12px;\">{{btn.name}}</span>\n </button>\n </div>\n</div>\n", styles: [".fc-button,.fc-button:hover,.fc-button:active,.fc-button:focus{outline:none;border:none;box-shadow:none}.fc-button{padding:6.5px}.fc-button:active{transform:scale(1.02)}.text-only{background:transparent;color:var(--fc-primary-color);border:none;outline:none}.grey-text{color:var(--fc-text-color)}.blue-text{color:var(--fc-primary-color)}.grey-border{color:#272525;background:transparent;border:2px solid #dddddd}.grey-border:hover{color:#272525;background:#6a2aff0a;border:2px solid #6a2aff59}.grey-border:active,.grey-border:focus{background-color:#386bf6;border:2px solid #3268ff;color:#fff}.blue-border,.blue-border:hover,.blue-border:active,.blue-border:focus{border:1px solid var(--fc-primary-color)}.bg-transparent{background-color:transparent}.custom-btn{background-color:var(--fc-button-custom-bg);border-color:var(--fc-button-custom-border);color:var(--fc-button-custom-color);height:var(--fc-button-custom-height);width:var(--fc-button-custom-width)}.custom-btn:hover,.custom-btn:active,.custom-btn:focus{border-color:var(--fc-button-custom-border);background-color:var(--fc-button-hover-bg);color:var(--fc-button-hover-text-color)}.fc-btn-text{display:inline-flex;vertical-align:middle;font-size:14px;font-weight:400;padding-left:5px;padding-right:5px}.right-icon{margin-left:5px}.left-icon{margin-right:5px}.fc-button.side-save-component,.fc-button.side-cancel-component{border:1px solid transparent}.fc-button.side-save-component:focus,.fc-button.side-cancel-component:focus{box-shadow:0 0 0 .25rem #0d6efd40;border:1px solid #86b7fe}.btn-group{background-color:#fdfeff;border:1px solid #dddddd;border-radius:7px}.btn-icon{background-color:#fdfeff;border:1px solid #dddddd}.custom-tooltip{visibility:visible;position:absolute;background-color:#0773ff;color:#fff;text-align:center;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;z-index:10;margin-bottom:10px}.tooltip-pointer{position:absolute;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0773ff}.tooltip-container:hover .custom-tooltip{visibility:visible;opacity:1}.clickable-img{position:relative;cursor:pointer;height:41px;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #dddddd;border-radius:13px}.clickable-img:hover{transform:scale(.95);border:2px solid rgb(31,105,255);border-radius:14px}.dropdown{position:relative;display:inline-block}.dropdown-menu{right:0;top:45px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;left:unset}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.dropdown-menu .btn:hover{background-color:#f1f1f1}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
80
+ }
81
+ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: NxtButtonComponent, decorators: [{
82
+ type: Component,
83
+ args: [{ selector: 'nxt-button', standalone: true, imports: [CommonModule], template: "<!-- SKS24JAN25 group button -->\n<div *ngIf=\"type === 'group'\" class=\"btn-group\" role=\"group\" aria-label=\"Button Group\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"custom-tooltip\" \n style=\"background-color:{{btn.tooltipBcColor}};\n color:{{btn.tooltipColor}};\n font-size:{{btn.tooltipFSize}}\">\n {{ btn.tooltip }}\n <div class=\"tooltip-pointer\" style=\"background-color:{{btn.tooltipBcColor}};\"></div>\n </span>\n </button>\n</div>\n \n<!-- SKS24JAN25 single button -->\n<button type=\"button\" *ngIf=\"type !== 'group' && type !== 'dropdown'\" class=\"btn btn-primary fc-button {{buttonType}}\" [tabindex]=\"tabIndex\"\n [attr.data-bs-toggle]=\"modalToTrigger != '' ? 'modal' : ''\"\n [attr.data-bs-target]=\"modalToTrigger != '' ? '#'+modalToTrigger : ''\"\n style=\"--fc-button-custom-bg: {{fcBtnBgColor}};--fc-button-custom-border: {{fcBtnBorder}};--fc-button-custom-color: {{fcBtnTextColor}};--fc-button-custom-height: {{fcBtnHeight}};--fc-button-custom-width: {{fcBtnWidth}};--fc-button-hover-bg: {{fcBtnHoverBgColor}};--fc-button-hover-text-color: {{fcBtnHoverTextColor}};\"\n [disabled]=\"buttonDisable\" [attr.data-bs-dismiss]='dataDismiss' (click)=\"buttonClicked($event)\"\n [attr.id]=\"fcBtnId != 'default' ? fcBtnId : null\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\"\n class=\"fc-btn-icon left-icon\">\n <img *ngIf=\"fcBtnIconLeftSrc != '' && !isImageSvg\" src=\"{{fcBtnIconLeftSrc}}\" class=\"fc-btn-icon left-icon\">\n <span class=\"fc-btn-text\">{{buttonValue}}</span>\n <img *ngIf=\"fcBtnIconRightSrc != '' && isImageSvg\" src=\"{{fcBtnIconRightSrc}}\"\n class=\"fc-btn-icon right-icon\">\n <img *ngIf=\"fcBtnIconRightSrc != '' && !isImageSvg\" src=\"{{fcBtnIconRightSrc}}\" class=\"fc-btn-icon right-icon\">\n</button>\n\n<!-- SKS24JAN25 dropdown button -->\n<div *ngIf=\"type === 'dropdown'\" class=\"dropdown\">\n <svg class=\"clickable-img\" (click)=\"toggleDropdown()\" width=\"40\" height=\"40\" viewBox=\"0 0 40 40\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <rect x=\"0.3\" y=\"0.3\" width=\"39.4\" height=\"39.4\" rx=\"11.7\" fill=\"#FAFBFD\" stroke=\"#D5D5D5\" stroke-width=\"0.6\"/>\n <path d=\"M19.9999 25.6667C23.6818 25.6667 26.6666 22.6819 26.6666 19C26.6666 15.3181 23.6818 12.3334 19.9999 12.3334C16.318 12.3334 13.3333 15.3181 13.3333 19C13.3333 22.6819 16.318 25.6667 19.9999 25.6667Z\" fill=\"#292D32\" stroke=\"#292D32\" stroke-width=\"1.5\" stroke-miterlimit=\"10\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n <path d=\"M17.6467 18.16L20.0001 20.5067L22.3534 18.16\" stroke=\"white\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n </svg> \n <div class=\"dropdown-menu\" *ngIf=\"isDropdownOpen\">\n <button *ngFor=\"let btn of buttonConfig.buttons\"\n type=\"button\"\n class=\"btn btn-icon {{btn.buttonType}} tooltip-container\"\n [attr.tabindex]=\"btn.tabIndex\"\n [attr.data-bs-toggle]=\"btn.modalToTrigger ? 'modal' : null\"\n [attr.data-bs-target]=\"btn.modalToTrigger ? '#' + btn.modalToTrigger : null\"\n [ngStyle]=\"getButtonStyles(btn)\"\n [disabled]=\"btn.buttonDisable\"\n [attr.data-bs-dismiss]=\"btn.dataDismiss\"\n (click)=\"buttonClicked(btn)\"\n [attr.id]=\"btn.fcBtnId !== 'default' ? btn.fcBtnId : null\">\n <img *ngIf=\"btn.isImageSvg\" [src]=\"btn.iconSrc\">\n <span class=\"fc-btn-text\" style=\"padding-left: 12px;\">{{btn.name}}</span>\n </button>\n </div>\n</div>\n", styles: [".fc-button,.fc-button:hover,.fc-button:active,.fc-button:focus{outline:none;border:none;box-shadow:none}.fc-button{padding:6.5px}.fc-button:active{transform:scale(1.02)}.text-only{background:transparent;color:var(--fc-primary-color);border:none;outline:none}.grey-text{color:var(--fc-text-color)}.blue-text{color:var(--fc-primary-color)}.grey-border{color:#272525;background:transparent;border:2px solid #dddddd}.grey-border:hover{color:#272525;background:#6a2aff0a;border:2px solid #6a2aff59}.grey-border:active,.grey-border:focus{background-color:#386bf6;border:2px solid #3268ff;color:#fff}.blue-border,.blue-border:hover,.blue-border:active,.blue-border:focus{border:1px solid var(--fc-primary-color)}.bg-transparent{background-color:transparent}.custom-btn{background-color:var(--fc-button-custom-bg);border-color:var(--fc-button-custom-border);color:var(--fc-button-custom-color);height:var(--fc-button-custom-height);width:var(--fc-button-custom-width)}.custom-btn:hover,.custom-btn:active,.custom-btn:focus{border-color:var(--fc-button-custom-border);background-color:var(--fc-button-hover-bg);color:var(--fc-button-hover-text-color)}.fc-btn-text{display:inline-flex;vertical-align:middle;font-size:14px;font-weight:400;padding-left:5px;padding-right:5px}.right-icon{margin-left:5px}.left-icon{margin-right:5px}.fc-button.side-save-component,.fc-button.side-cancel-component{border:1px solid transparent}.fc-button.side-save-component:focus,.fc-button.side-cancel-component:focus{box-shadow:0 0 0 .25rem #0d6efd40;border:1px solid #86b7fe}.btn-group{background-color:#fdfeff;border:1px solid #dddddd;border-radius:7px}.btn-icon{background-color:#fdfeff;border:1px solid #dddddd}.custom-tooltip{visibility:visible;position:absolute;background-color:#0773ff;color:#fff;text-align:center;padding:5px 10px;border-radius:4px;font-size:12px;white-space:nowrap;bottom:100%;left:50%;transform:translate(-50%);opacity:0;transition:opacity .2s;z-index:10;margin-bottom:10px}.tooltip-pointer{position:absolute;width:0;height:0;bottom:-5px;left:50%;transform:translate(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:5px solid #0773ff}.tooltip-container:hover .custom-tooltip{visibility:visible;opacity:1}.clickable-img{position:relative;cursor:pointer;height:41px;transition:transform .3s ease,box-shadow .3s ease;border:2px solid #dddddd;border-radius:13px}.clickable-img:hover{transform:scale(.95);border:2px solid rgb(31,105,255);border-radius:14px}.dropdown{position:relative;display:inline-block}.dropdown-menu{right:0;top:45px;background-color:#fff;border:1px solid #ccc;border-radius:4px;box-shadow:0 4px 8px #0000001a;left:unset}.dropdown .dropdown-menu{display:block}.dropdown-menu .btn{display:block;padding:10px;width:100%;text-align:left;background:transparent;border:none;cursor:pointer}.dropdown-menu .btn:hover{background-color:#f1f1f1}\n"] }]
84
+ }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { buttonValue: [{
85
+ type: Input
86
+ }], buttonType: [{
87
+ type: Input
88
+ }], type: [{
89
+ type: Input
90
+ }], buttonDisable: [{
91
+ type: Input
92
+ }], fcBtnBgColor: [{
93
+ type: Input
94
+ }], fcBtnBorder: [{
95
+ type: Input
96
+ }], fcBtnTextColor: [{
97
+ type: Input
98
+ }], fcBtnHeight: [{
99
+ type: Input
100
+ }], fcBtnWidth: [{
101
+ type: Input
102
+ }], fcBtnIconLeftSrc: [{
103
+ type: Input
104
+ }], fcBtnIconRightSrc: [{
105
+ type: Input
106
+ }], fcBtnHoverBgColor: [{
107
+ type: Input
108
+ }], fcBtnHoverTextColor: [{
109
+ type: Input
110
+ }], fcBtnId: [{
111
+ type: Input
112
+ }], dataDismiss: [{
113
+ type: Input
114
+ }], fcButtonBorder: [{
115
+ type: Input
116
+ }], modalToTrigger: [{
117
+ type: Input
118
+ }], isImageSvg: [{
119
+ type: Input
120
+ }], tabIndex: [{
121
+ type: Input
122
+ }], buttonConfig: [{
123
+ type: Input
124
+ }], buttonClickEmit: [{
125
+ type: Output
126
+ }], onClickOutside: [{
127
+ type: HostListener,
128
+ args: ['document:click', ['$event']]
129
+ }] } });
130
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibnh0LWJ1dHRvbi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vbnh0LWJ1dHRvbi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9ueHQtYXBwL3NyYy9saWIvY29tcG9uZW50cy9idXR0b24vbnh0LWJ1dHRvbi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsWUFBWSxFQUFFLE1BQU0saUJBQWlCLENBQUM7QUFDL0MsT0FBTyxFQUFFLFNBQVMsRUFBYyxZQUFZLEVBQUUsWUFBWSxFQUFFLEtBQUssRUFBVSxNQUFNLEVBQUUsTUFBTSxlQUFlLENBQUM7OztBQVF6RyxNQUFNLE9BQU8sa0JBQWtCO0lBK0NUO0lBN0NYLFdBQVcsR0FBVyxFQUFFLENBQUMsQ0FBQyx5QkFBeUI7SUFDbkQsVUFBVSxHQUFXLFNBQVMsQ0FBQyxDQUFDLCtPQUErTztJQUMvUSxJQUFJLEdBQVcsUUFBUSxDQUFDLENBQUMsb0VBQW9FO0lBQzdGLGFBQWEsR0FBWSxLQUFLLENBQUMsQ0FBQyw0REFBNEQ7SUFDNUYsWUFBWSxHQUFXLEVBQUUsQ0FBQyxDQUFDLGtFQUFrRTtJQUM3RixXQUFXLEdBQVcsRUFBRSxDQUFDLENBQUMsOERBQThEO0lBQ3hGLGNBQWMsR0FBVyxFQUFFLENBQUMsQ0FBQyw0REFBNEQ7SUFDekYsV0FBVyxHQUFXLEVBQUUsQ0FBQyxDQUFDLHdEQUF3RDtJQUNsRixVQUFVLEdBQVcsRUFBRSxDQUFDLENBQUMsdURBQXVEO0lBQ2hGLGdCQUFnQixHQUFXLEVBQUUsQ0FBQyxDQUFDLHlFQUF5RTtJQUN4RyxpQkFBaUIsR0FBVyxFQUFFLENBQUMsQ0FBQywwRUFBMEU7SUFDMUcsaUJBQWlCLEdBQVcsRUFBRSxDQUFDLENBQUMscUVBQXFFO0lBQ3JHLG1CQUFtQixHQUFXLEVBQUUsQ0FBQyxDQUFDLCtEQUErRDtJQUNqRyxPQUFPLEdBQVcsU0FBUyxDQUFDLENBQUMsMEVBQTBFO0lBQ3ZHLFdBQVcsR0FBVyxFQUFFLENBQUMsQ0FBQyxnR0FBZ0c7SUFDMUgsY0FBYyxHQUFXLEtBQUssQ0FBQyxDQUFDLHVGQUF1RjtJQUN2SCxjQUFjLEdBQVcsRUFBRSxDQUFDLENBQUMsMkVBQTJFO0lBQ3hHLFVBQVUsR0FBWSxLQUFLLENBQUMsQ0FBQyxrRkFBa0Y7SUFDL0csUUFBUSxHQUFRLEVBQUUsQ0FBQyxDQUFBLG9GQUFvRjtJQUN2RyxZQUFZLEdBQVEsRUFBRSxDQUFDLENBQUMsNEdBQTRHO0lBRW5JLGVBQWUsR0FBcUIsSUFBSSxZQUFZLEVBQU8sQ0FBQztJQUN0RSxPQUFPLEdBQVEsRUFBRSxDQUFDLENBQUMsOEJBQThCO0lBQ2pELGNBQWMsR0FBRyxLQUFLLENBQUM7SUFJdkIsb0NBQW9DO0lBRXBDLHFCQUFxQjtJQUNyQiw2QkFBNkI7SUFDN0Isc0NBQXNDO0lBQ3RDLCtCQUErQjtJQUMvQix5QkFBeUI7SUFDekIseUJBQXlCO0lBQ3pCLGtDQUFrQztJQUNsQyxvQ0FBb0M7SUFDcEMsdUJBQXVCO0lBQ3ZCLGlCQUFpQjtJQUNqQixhQUFhO0lBQ2IsdURBQXVEO0lBQ3ZELHVEQUF1RDtJQUN2RCxzREFBc0Q7SUFDdEQsTUFBTTtJQUNOLEtBQUs7SUFDTCxZQUFvQixVQUFzQjtRQUF0QixlQUFVLEdBQVYsVUFBVSxDQUFZO0lBQUksQ0FBQztJQUUvQyxRQUFRLEtBQVUsQ0FBQztJQUNuQix1R0FBdUc7SUFDdkcsZUFBZSxDQUFDLE1BQVc7UUFDekIsT0FBTztZQUNMLHVCQUF1QixFQUFFLE1BQU0sQ0FBQyxZQUFZLElBQUksRUFBRTtZQUNsRCwyQkFBMkIsRUFBRSxNQUFNLENBQUMsV0FBVyxJQUFJLEVBQUU7WUFDckQsMEJBQTBCLEVBQUUsTUFBTSxDQUFDLGNBQWMsSUFBSSxFQUFFO1lBQ3ZELDJCQUEyQixFQUFFLE1BQU0sQ0FBQyxXQUFXLElBQUksRUFBRTtZQUNyRCwwQkFBMEIsRUFBRSxNQUFNLENBQUMsVUFBVSxJQUFJLEVBQUU7WUFDbkQsc0JBQXNCLEVBQUUsTUFBTSxDQUFDLGlCQUFpQixJQUFJLEVBQUU7WUFDdEQsOEJBQThCLEVBQUUsTUFBTSxDQUFDLG1CQUFtQixJQUFJLEVBQUU7U0FDakUsQ0FBQztJQUNKLENBQUM7SUFHRCxhQUFhLENBQUMsTUFBVTtRQUN0QixJQUFJLENBQUMsZUFBZSxDQUFDLElBQUksQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUNsQyxJQUFHLElBQUksQ0FBQyxjQUFjLEVBQUMsQ0FBQztZQUN0QixJQUFJLENBQUMsY0FBYyxHQUFDLEtBQUssQ0FBQTtRQUMzQixDQUFDO0lBQ0gsQ0FBQztJQUVELGNBQWM7UUFDWixJQUFJLENBQUMsY0FBYyxHQUFHLENBQUMsSUFBSSxDQUFDLGNBQWMsQ0FBQztJQUM3QyxDQUFDO0lBQ0gsMEZBQTBGO0lBRXhGLGNBQWMsQ0FBQyxLQUFpQjtRQUM5QixJQUFJLElBQUksQ0FBQyxjQUFjLElBQUksQ0FBQyxJQUFJLENBQUMsVUFBVSxDQUFDLGFBQWEsQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLE1BQU0sQ0FBQyxFQUM5RSxDQUFDO1lBQ0QsSUFBSSxDQUFDLGNBQWMsR0FBRyxLQUFLLENBQUM7UUFDOUIsQ0FBQztJQUNILENBQUM7d0dBakZVLGtCQUFrQjs0RkFBbEIsa0JBQWtCLGt5QkNUL0IsK3pJQWdFQSxpNEZEM0RZLFlBQVk7OzRGQUlYLGtCQUFrQjtrQkFQOUIsU0FBUzsrQkFDRSxZQUFZLGNBQ1YsSUFBSSxXQUNQLENBQUMsWUFBWSxDQUFDOytFQU1kLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csVUFBVTtzQkFBbEIsS0FBSztnQkFDRyxJQUFJO3NCQUFaLEtBQUs7Z0JBQ0csYUFBYTtzQkFBckIsS0FBSztnQkFDRyxZQUFZO3NCQUFwQixLQUFLO2dCQUNHLFdBQVc7c0JBQW5CLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLFVBQVU7c0JBQWxCLEtBQUs7Z0JBQ0csZ0JBQWdCO3NCQUF4QixLQUFLO2dCQUNHLGlCQUFpQjtzQkFBekIsS0FBSztnQkFDRyxpQkFBaUI7c0JBQXpCLEtBQUs7Z0JBQ0csbUJBQW1CO3NCQUEzQixLQUFLO2dCQUNHLE9BQU87c0JBQWYsS0FBSztnQkFDRyxXQUFXO3NCQUFuQixLQUFLO2dCQUNHLGNBQWM7c0JBQXRCLEtBQUs7Z0JBQ0csY0FBYztzQkFBdEIsS0FBSztnQkFDRyxVQUFVO3NCQUFsQixLQUFLO2dCQUNHLFFBQVE7c0JBQWhCLEtBQUs7Z0JBQ0csWUFBWTtzQkFBcEIsS0FBSztnQkFFSSxlQUFlO3NCQUF4QixNQUFNO2dCQXFEUCxjQUFjO3NCQURiLFlBQVk7dUJBQUMsZ0JBQWdCLEVBQUUsQ0FBQyxRQUFRLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDb21tb25Nb2R1bGUgfSBmcm9tICdAYW5ndWxhci9jb21tb24nO1xuaW1wb3J0IHsgQ29tcG9uZW50LCBFbGVtZW50UmVmLCBFdmVudEVtaXR0ZXIsIEhvc3RMaXN0ZW5lciwgSW5wdXQsIE9uSW5pdCwgT3V0cHV0IH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdueHQtYnV0dG9uJyxcbiAgc3RhbmRhbG9uZTogdHJ1ZSxcbiAgaW1wb3J0czogW0NvbW1vbk1vZHVsZV0sXG4gIHRlbXBsYXRlVXJsOiAnLi9ueHQtYnV0dG9uLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbnh0LWJ1dHRvbi5jb21wb25lbnQuY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTnh0QnV0dG9uQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiBcbiAgQElucHV0KCkgYnV0dG9uVmFsdWU6IHN0cmluZyA9ICcnOyAvL1NLUzI0SkFOMjUgYnV0dG9uIHRleHQgXG4gIEBJbnB1dCgpIGJ1dHRvblR5cGU6IHN0cmluZyA9ICdwcmltYXJ5JzsgLy9TS1MyNEpBTjI1IElmIHRoZSBidXR0b24gdHlwZSBpcyAndGV4dC1vbmx5JywgaXQgc2hvdWxkIGRpc3BsYXkgb25seSB0aGUgdGV4dCB3aXRob3V0IGEgYm9yZGVyIG9yIG91dGxpbmUuIEZvciAnZ3JleS10ZXh0JywgdGhlIGJ1dHRvbiBzaG91bGQgaGF2ZSBhIGJvcmRlciBhbmQgYSBiYWNrZ3JvdW5kIGNvbG9yLCBidXQgdGhlIHRleHQgY29sb3Igc2hvdWxkIGJlIGdyYXksIHNpbWlsYXIgdG8gJ2JsdWUtdGV4dCdcbiAgQElucHV0KCkgdHlwZTogc3RyaW5nID0gJ2J1dHRvbic7IC8vU0tTMjRKQU4yNSBUaGUgYnV0dG9uIHR5cGVzIGFyZSBcImJ1dHRvbixcIiBcImdyb3VwLFwiIGFuZCBcImRyb3Bkb3duLlwiXG4gIEBJbnB1dCgpIGJ1dHRvbkRpc2FibGU6IGJvb2xlYW4gPSBmYWxzZTsgLy9TS1MyNEpBTjI1IHVzZSB0aGlzIGlucHV0IHRvIGRpc2FibGUgYSBidXR0b24gd2hlbiBuZWVkZWQuXG4gIEBJbnB1dCgpIGZjQnRuQmdDb2xvcjogc3RyaW5nID0gJyc7IC8vIFVzZSB0aGlzIGlucHV0IHRvIHNldCBhIGN1c3RvbSBiYWNrZ3JvdW5kIGNvbG9yIGZvciB0aGUgYnV0dG9uLlxuICBASW5wdXQoKSBmY0J0bkJvcmRlcjogc3RyaW5nID0gJyc7IC8vIFVzZSB0aGlzIGlucHV0IHRvIHNldCBhIGN1c3RvbSBib3JkZXIgc3R5bGUgZm9yIHRoZSBidXR0b24uXG4gIEBJbnB1dCgpIGZjQnRuVGV4dENvbG9yOiBzdHJpbmcgPSAnJzsgLy8gVXNlIHRoaXMgaW5wdXQgdG8gc2V0IGEgY3VzdG9tIHRleHQgY29sb3IgZm9yIHRoZSBidXR0b24uXG4gIEBJbnB1dCgpIGZjQnRuSGVpZ2h0OiBzdHJpbmcgPSAnJzsgLy8gVXNlIHRoaXMgaW5wdXQgdG8gc2V0IGEgY3VzdG9tIGhlaWdodCBmb3IgdGhlIGJ1dHRvbi5cbiAgQElucHV0KCkgZmNCdG5XaWR0aDogc3RyaW5nID0gJyc7IC8vIFVzZSB0aGlzIGlucHV0IHRvIHNldCBhIGN1c3RvbSB3aWR0aCBmb3IgdGhlIGJ1dHRvbi5cbiAgQElucHV0KCkgZmNCdG5JY29uTGVmdFNyYzogc3RyaW5nID0gJyc7IC8vIFVzZSB0aGlzIGlucHV0IHRvIHNldCB0aGUgc291cmNlIG9mIHRoZSBsZWZ0LXNpZGUgaWNvbiBmb3IgdGhlIGJ1dHRvbi5cbiAgQElucHV0KCkgZmNCdG5JY29uUmlnaHRTcmM6IHN0cmluZyA9ICcnOyAvLyBVc2UgdGhpcyBpbnB1dCB0byBzZXQgdGhlIHNvdXJjZSBvZiB0aGUgcmlnaHQtc2lkZSBpY29uIGZvciB0aGUgYnV0dG9uLlxuICBASW5wdXQoKSBmY0J0bkhvdmVyQmdDb2xvcjogc3RyaW5nID0gJyc7IC8vIFVzZSB0aGlzIGlucHV0IHRvIHNldCB0aGUgYmFja2dyb3VuZCBjb2xvciBvZiB0aGUgYnV0dG9uIG9uIGhvdmVyLlxuICBASW5wdXQoKSBmY0J0bkhvdmVyVGV4dENvbG9yOiBzdHJpbmcgPSAnJzsgLy8gVXNlIHRoaXMgaW5wdXQgdG8gc2V0IHRoZSB0ZXh0IGNvbG9yIG9mIHRoZSBidXR0b24gb24gaG92ZXIuXG4gIEBJbnB1dCgpIGZjQnRuSWQ6IHN0cmluZyA9ICdkZWZhdWx0JzsgLy8gVXNlIHRoaXMgaW5wdXQgdG8gc2V0IGEgY3VzdG9tIElEIGZvciB0aGUgYnV0dG9uLiBEZWZhdWx0IGlzICdkZWZhdWx0Jy5cbiAgQElucHV0KCkgZGF0YURpc21pc3M6IHN0cmluZyA9ICcnOyAvLyBVc2UgdGhpcyBpbnB1dCB0byBzcGVjaWZ5IHRoZSBkaXNtaXNzIGFjdGlvbiBmb3IgdGhlIGJ1dHRvbiAoZS5nLiwgJ21vZGFsJyB0byBjbG9zZSBhIG1vZGFsKS5cbiAgQElucHV0KCkgZmNCdXR0b25Cb3JkZXI6IHN0cmluZyA9ICcwcHgnOyAvLyBVc2UgdGhpcyBpbnB1dCB0byBzZXQgdGhlIGJvcmRlciBzaXplIG9mIHRoZSBidXR0b24uIERlZmF1bHQgaXMgJzBweCcgZm9yIG5vIGJvcmRlci5cbiAgQElucHV0KCkgbW9kYWxUb1RyaWdnZXI6IHN0cmluZyA9ICcnOyAvLyBVc2UgdGhpcyBpbnB1dCB0byBzcGVjaWZ5IHRoZSBJRCBvciB0YXJnZXQgb2YgdGhlIG1vZGFsIHRvIGJlIHRyaWdnZXJlZC5cbiAgQElucHV0KCkgaXNJbWFnZVN2ZzogYm9vbGVhbiA9IGZhbHNlOyAvLyBVc2UgdGhpcyBpbnB1dCB0byBkZXRlcm1pbmUgaWYgdGhlIGltYWdlIGlzIGFuIFNWRy4gRGVmYXVsdCBpcyBmYWxzZSAobm9uLVNWRykuXG4gIEBJbnB1dCgpIHRhYkluZGV4OiBhbnkgPSAnJzsvLyBVc2UgdGhpcyBpbnB1dCB0byBzZXQgdGhlIHRhYiBpbmRleCBmb3IgdGhlIGVsZW1lbnQsIGNvbnRyb2xsaW5nIHRoZSBmb2N1cyBvcmRlci5cbiAgQElucHV0KCkgYnV0dG9uQ29uZmlnOiBhbnkgPSAnJzsgLy8gVXNlIHRoaXMgaW5wdXQgdG8gcGFzcyBjb25maWd1cmF0aW9uIHNldHRpbmdzIGZvciB0aGUgZ3JvdXAgYW5kIGRyb3Bkb3duIGJ1dHRvbnMgKGUuZy4sIHN0eWxlcywgYWN0aW9ucykuXG5cbiAgQE91dHB1dCgpIGJ1dHRvbkNsaWNrRW1pdDpFdmVudEVtaXR0ZXI8YW55PiA9IG5ldyBFdmVudEVtaXR0ZXI8YW55PigpO1xuICBpY29uU3JjOiBhbnkgPSAnJzsgLy8gRW5zdXJlIGl0J3MgYWx3YXlzIGEgc3RyaW5nXG4gIGlzRHJvcGRvd25PcGVuID0gZmFsc2U7XG5cbiAgXG5cbiAgLy8gU0tTMjRKQU4yNSBkcm9wZG93biBidXR0b24gY29uZmlnXG5cbiAgLy8gZHJvcGRvd25CdXR0b24gPSB7XG4gIC8vICAgZmNCdG5CZ0NvbG9yOiAnIzAwN2JmZicsXG4gIC8vICAgZmNCdG5Cb3JkZXI6ICcxcHggc29saWQgIzAwNTZiMycsXG4gIC8vICAgZmNCdG5UZXh0Q29sb3I6ICcjZmZmZmZmJyxcbiAgLy8gICBmY0J0bkhlaWdodDogJzQwcHgnLFxuICAvLyAgIGZjQnRuV2lkdGg6ICcxNTBweCcsXG4gIC8vICAgZmNCdG5Ib3ZlckJnQ29sb3I6ICcjMDA1NmIzJyxcbiAgLy8gICBmY0J0bkhvdmVyVGV4dENvbG9yOiAnI2ZmZmZmZicsXG4gIC8vICAgbGFiZWw6ICdEcm9wZG93bicsXG4gIC8vICAgaWNvblNyYzogJycsXG4gIC8vICAgaXRlbXM6IFtcbiAgLy8gICAgIHsgbGFiZWw6ICdBY3Rpb24gMScsaWNvblNyYzogJycsIGhvdmVyOiBmYWxzZSB9LFxuICAvLyAgICAgeyBsYWJlbDogJ0FjdGlvbiAyJyxpY29uU3JjOiAnJywgaG92ZXI6IGZhbHNlIH0sXG4gIC8vICAgICB7IGxhYmVsOiAnQWN0aW9uIDMnLGljb25TcmM6ICcnLCBob3ZlcjogZmFsc2UgfVxuICAvLyAgIF1cbiAgLy8gfTtcbiAgY29uc3RydWN0b3IocHJpdmF0ZSBlbGVtZW50UmVmOiBFbGVtZW50UmVmKSB7IH1cblxuICBuZ09uSW5pdCgpOiB2b2lkIHt9XG4gIC8vU0tTMjRKQU4yNSBGdW5jdGlvbiB0byBnZXQgc3R5bGVzIGZvciBkcm9wZG93biBhbmQgZ3JvdXAgYnV0dG9ucyBiYXNlZCBvbiB0aGUgcHJvdmlkZWQgY29uZmlndXJhdGlvbi5cbiAgZ2V0QnV0dG9uU3R5bGVzKGNvbmZpZzogYW55KTogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfSB7XG4gICAgcmV0dXJuIHtcbiAgICAgICctLWZjLWJ1dHRvbi1jdXN0b20tYmcnOiBjb25maWcuZmNCdG5CZ0NvbG9yIHx8ICcnLFxuICAgICAgJy0tZmMtYnV0dG9uLWN1c3RvbS1ib3JkZXInOiBjb25maWcuZmNCdG5Cb3JkZXIgfHwgJycsXG4gICAgICAnLS1mYy1idXR0b24tY3VzdG9tLWNvbG9yJzogY29uZmlnLmZjQnRuVGV4dENvbG9yIHx8ICcnLFxuICAgICAgJy0tZmMtYnV0dG9uLWN1c3RvbS1oZWlnaHQnOiBjb25maWcuZmNCdG5IZWlnaHQgfHwgJycsXG4gICAgICAnLS1mYy1idXR0b24tY3VzdG9tLXdpZHRoJzogY29uZmlnLmZjQnRuV2lkdGggfHwgJycsXG4gICAgICAnLS1mYy1idXR0b24taG92ZXItYmcnOiBjb25maWcuZmNCdG5Ib3ZlckJnQ29sb3IgfHwgJycsXG4gICAgICAnLS1mYy1idXR0b24taG92ZXItdGV4dC1jb2xvcic6IGNvbmZpZy5mY0J0bkhvdmVyVGV4dENvbG9yIHx8ICcnXG4gICAgfTtcbiAgfVxuICBcblxuICBidXR0b25DbGlja2VkKCRldmVudDphbnkpe1xuICAgIHRoaXMuYnV0dG9uQ2xpY2tFbWl0LmVtaXQoJGV2ZW50KTtcbiAgICBpZih0aGlzLmlzRHJvcGRvd25PcGVuKXtcbiAgICAgIHRoaXMuaXNEcm9wZG93bk9wZW49ZmFsc2VcbiAgICB9XG4gIH1cblxuICB0b2dnbGVEcm9wZG93bigpIHtcbiAgICB0aGlzLmlzRHJvcGRvd25PcGVuID0gIXRoaXMuaXNEcm9wZG93bk9wZW47XG4gIH1cbi8vU0tTMjRKQU4yNSBMaXN0ZW5lciBmb3IgY2xpY2tzIG91dHNpZGUgdGhlIGRyb3Bkb3duIGJ1dHRvbiB0byBjbG9zZSBvciBtYW5hZ2UgaXRzIHN0YXRlLlxuICBASG9zdExpc3RlbmVyKCdkb2N1bWVudDpjbGljaycsIFsnJGV2ZW50J10pXG4gIG9uQ2xpY2tPdXRzaWRlKGV2ZW50OiBNb3VzZUV2ZW50KSB7XG4gICAgaWYgKHRoaXMuaXNEcm9wZG93bk9wZW4gJiYgIXRoaXMuZWxlbWVudFJlZi5uYXRpdmVFbGVtZW50LmNvbnRhaW5zKGV2ZW50LnRhcmdldClcbiAgICApIHtcbiAgICAgIHRoaXMuaXNEcm9wZG93bk9wZW4gPSBmYWxzZTtcbiAgICB9XG4gIH1cbn1cbiIsIjwhLS0gU0tTMjRKQU4yNSBncm91cCBidXR0b24gLS0+XG48ZGl2ICpuZ0lmPVwidHlwZSA9PT0gJ2dyb3VwJ1wiIGNsYXNzPVwiYnRuLWdyb3VwXCIgcm9sZT1cImdyb3VwXCIgYXJpYS1sYWJlbD1cIkJ1dHRvbiBHcm91cFwiPlxuICAgIDxidXR0b24gKm5nRm9yPVwibGV0IGJ0biBvZiBidXR0b25Db25maWcuYnV0dG9uc1wiXG4gICAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcbiAgICAgICAgICAgIGNsYXNzPVwiYnRuIGJ0bi1pY29uIHt7YnRuLmJ1dHRvblR5cGV9fSB0b29sdGlwLWNvbnRhaW5lclwiXG4gICAgICAgICAgICBbYXR0ci50YWJpbmRleF09XCJidG4udGFiSW5kZXhcIlxuICAgICAgICAgICAgW2F0dHIuZGF0YS1icy10b2dnbGVdPVwiYnRuLm1vZGFsVG9UcmlnZ2VyID8gJ21vZGFsJyA6IG51bGxcIlxuICAgICAgICAgICAgW2F0dHIuZGF0YS1icy10YXJnZXRdPVwiYnRuLm1vZGFsVG9UcmlnZ2VyID8gJyMnICsgYnRuLm1vZGFsVG9UcmlnZ2VyIDogbnVsbFwiXG4gICAgICAgICAgICBbbmdTdHlsZV09XCJnZXRCdXR0b25TdHlsZXMoYnRuKVwiXG4gICAgICAgICAgICBbZGlzYWJsZWRdPVwiYnRuLmJ1dHRvbkRpc2FibGVcIlxuICAgICAgICAgICAgW2F0dHIuZGF0YS1icy1kaXNtaXNzXT1cImJ0bi5kYXRhRGlzbWlzc1wiXG4gICAgICAgICAgICAoY2xpY2spPVwiYnV0dG9uQ2xpY2tlZChidG4pXCJcbiAgICAgICAgICAgIFthdHRyLmlkXT1cImJ0bi5mY0J0bklkICE9PSAnZGVmYXVsdCcgPyBidG4uZmNCdG5JZCA6IG51bGxcIj5cbiAgICAgICAgPGltZyAqbmdJZj1cImJ0bi5pc0ltYWdlU3ZnXCIgW3NyY109XCJidG4uaWNvblNyY1wiPlxuICAgICAgICA8c3BhbiBjbGFzcz1cImN1c3RvbS10b29sdGlwXCIgXG4gICAgICAgICAgICBzdHlsZT1cImJhY2tncm91bmQtY29sb3I6e3tidG4udG9vbHRpcEJjQ29sb3J9fTtcbiAgICAgICAgICAgIGNvbG9yOnt7YnRuLnRvb2x0aXBDb2xvcn19O1xuICAgICAgICAgICAgZm9udC1zaXplOnt7YnRuLnRvb2x0aXBGU2l6ZX19XCI+XG4gICAgICAgICAgICB7eyBidG4udG9vbHRpcCB9fVxuICAgICAgICAgICAgPGRpdiBjbGFzcz1cInRvb2x0aXAtcG9pbnRlclwiIHN0eWxlPVwiYmFja2dyb3VuZC1jb2xvcjp7e2J0bi50b29sdGlwQmNDb2xvcn19O1wiPjwvZGl2PlxuICAgICAgICA8L3NwYW4+XG4gICAgPC9idXR0b24+XG48L2Rpdj5cbiAgXG48IS0tIFNLUzI0SkFOMjUgc2luZ2xlIGJ1dHRvbiAtLT5cbjxidXR0b24gdHlwZT1cImJ1dHRvblwiICAqbmdJZj1cInR5cGUgIT09ICdncm91cCcgJiYgdHlwZSAhPT0gJ2Ryb3Bkb3duJ1wiIGNsYXNzPVwiYnRuIGJ0bi1wcmltYXJ5IGZjLWJ1dHRvbiB7e2J1dHRvblR5cGV9fVwiIFt0YWJpbmRleF09XCJ0YWJJbmRleFwiXG4gICAgW2F0dHIuZGF0YS1icy10b2dnbGVdPVwibW9kYWxUb1RyaWdnZXIgIT0gJycgPyAnbW9kYWwnIDogJydcIlxuICAgIFthdHRyLmRhdGEtYnMtdGFyZ2V0XT1cIm1vZGFsVG9UcmlnZ2VyICE9ICcnID8gJyMnK21vZGFsVG9UcmlnZ2VyIDogJydcIlxuICAgIHN0eWxlPVwiLS1mYy1idXR0b24tY3VzdG9tLWJnOiB7e2ZjQnRuQmdDb2xvcn19Oy0tZmMtYnV0dG9uLWN1c3RvbS1ib3JkZXI6IHt7ZmNCdG5Cb3JkZXJ9fTstLWZjLWJ1dHRvbi1jdXN0b20tY29sb3I6IHt7ZmNCdG5UZXh0Q29sb3J9fTstLWZjLWJ1dHRvbi1jdXN0b20taGVpZ2h0OiB7e2ZjQnRuSGVpZ2h0fX07LS1mYy1idXR0b24tY3VzdG9tLXdpZHRoOiB7e2ZjQnRuV2lkdGh9fTstLWZjLWJ1dHRvbi1ob3Zlci1iZzoge3tmY0J0bkhvdmVyQmdDb2xvcn19Oy0tZmMtYnV0dG9uLWhvdmVyLXRleHQtY29sb3I6IHt7ZmNCdG5Ib3ZlclRleHRDb2xvcn19O1wiXG4gICAgW2Rpc2FibGVkXT1cImJ1dHRvbkRpc2FibGVcIiBbYXR0ci5kYXRhLWJzLWRpc21pc3NdPSdkYXRhRGlzbWlzcycgKGNsaWNrKT1cImJ1dHRvbkNsaWNrZWQoJGV2ZW50KVwiXG4gICAgW2F0dHIuaWRdPVwiZmNCdG5JZCAhPSAnZGVmYXVsdCcgPyBmY0J0bklkIDogbnVsbFwiPlxuICAgIDxpbWcgKm5nSWY9XCJmY0J0bkljb25MZWZ0U3JjICE9ICcnICYmIGlzSW1hZ2VTdmdcIiBzcmM9XCJ7e2ZjQnRuSWNvbkxlZnRTcmN9fVwiXG4gICAgICAgIGNsYXNzPVwiZmMtYnRuLWljb24gbGVmdC1pY29uXCI+XG4gICAgPGltZyAqbmdJZj1cImZjQnRuSWNvbkxlZnRTcmMgIT0gJycgJiYgIWlzSW1hZ2VTdmdcIiBzcmM9XCJ7e2ZjQnRuSWNvbkxlZnRTcmN9fVwiIGNsYXNzPVwiZmMtYnRuLWljb24gbGVmdC1pY29uXCI+XG4gICAgPHNwYW4gY2xhc3M9XCJmYy1idG4tdGV4dFwiPnt7YnV0dG9uVmFsdWV9fTwvc3Bhbj5cbiAgICA8aW1nICpuZ0lmPVwiZmNCdG5JY29uUmlnaHRTcmMgIT0gJycgJiYgaXNJbWFnZVN2Z1wiIHNyYz1cInt7ZmNCdG5JY29uUmlnaHRTcmN9fVwiXG4gICAgICAgIGNsYXNzPVwiZmMtYnRuLWljb24gcmlnaHQtaWNvblwiPlxuICAgIDxpbWcgKm5nSWY9XCJmY0J0bkljb25SaWdodFNyYyAhPSAnJyAmJiAhaXNJbWFnZVN2Z1wiIHNyYz1cInt7ZmNCdG5JY29uUmlnaHRTcmN9fVwiIGNsYXNzPVwiZmMtYnRuLWljb24gcmlnaHQtaWNvblwiPlxuPC9idXR0b24+XG5cbjwhLS0gU0tTMjRKQU4yNSBkcm9wZG93biBidXR0b24gLS0+XG48ZGl2ICpuZ0lmPVwidHlwZSA9PT0gJ2Ryb3Bkb3duJ1wiIGNsYXNzPVwiZHJvcGRvd25cIj5cbiAgICA8c3ZnIGNsYXNzPVwiY2xpY2thYmxlLWltZ1wiIChjbGljayk9XCJ0b2dnbGVEcm9wZG93bigpXCIgIHdpZHRoPVwiNDBcIiBoZWlnaHQ9XCI0MFwiIHZpZXdCb3g9XCIwIDAgNDAgNDBcIiBmaWxsPVwibm9uZVwiIHhtbG5zPVwiaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmdcIj5cbiAgICAgICAgPHJlY3QgeD1cIjAuM1wiIHk9XCIwLjNcIiB3aWR0aD1cIjM5LjRcIiBoZWlnaHQ9XCIzOS40XCIgcng9XCIxMS43XCIgZmlsbD1cIiNGQUZCRkRcIiBzdHJva2U9XCIjRDVENUQ1XCIgc3Ryb2tlLXdpZHRoPVwiMC42XCIvPlxuICAgICAgICA8cGF0aCBkPVwiTTE5Ljk5OTkgMjUuNjY2N0MyMy42ODE4IDI1LjY2NjcgMjYuNjY2NiAyMi42ODE5IDI2LjY2NjYgMTlDMjYuNjY2NiAxNS4zMTgxIDIzLjY4MTggMTIuMzMzNCAxOS45OTk5IDEyLjMzMzRDMTYuMzE4IDEyLjMzMzQgMTMuMzMzMyAxNS4zMTgxIDEzLjMzMzMgMTlDMTMuMzMzMyAyMi42ODE5IDE2LjMxOCAyNS42NjY3IDE5Ljk5OTkgMjUuNjY2N1pcIiBmaWxsPVwiIzI5MkQzMlwiIHN0cm9rZT1cIiMyOTJEMzJcIiBzdHJva2Utd2lkdGg9XCIxLjVcIiBzdHJva2UtbWl0ZXJsaW1pdD1cIjEwXCIgc3Ryb2tlLWxpbmVjYXA9XCJyb3VuZFwiIHN0cm9rZS1saW5lam9pbj1cInJvdW5kXCIvPlxuICAgICAgICA8cGF0aCBkPVwiTTE3LjY0NjcgMTguMTZMMjAuMDAwMSAyMC41MDY3TDIyLjM1MzQgMTguMTZcIiBzdHJva2U9XCJ3aGl0ZVwiIHN0cm9rZS13aWR0aD1cIjEuNVwiIHN0cm9rZS1saW5lY2FwPVwicm91bmRcIiBzdHJva2UtbGluZWpvaW49XCJyb3VuZFwiLz5cbiAgICA8L3N2Zz4gIFxuICAgIDxkaXYgY2xhc3M9XCJkcm9wZG93bi1tZW51XCIgICpuZ0lmPVwiaXNEcm9wZG93bk9wZW5cIj5cbiAgICAgICAgPGJ1dHRvbiAqbmdGb3I9XCJsZXQgYnRuIG9mIGJ1dHRvbkNvbmZpZy5idXR0b25zXCJcbiAgICAgICAgICAgIHR5cGU9XCJidXR0b25cIlxuICAgICAgICAgICAgY2xhc3M9XCJidG4gYnRuLWljb24ge3tidG4uYnV0dG9uVHlwZX19IHRvb2x0aXAtY29udGFpbmVyXCJcbiAgICAgICAgICAgIFthdHRyLnRhYmluZGV4XT1cImJ0bi50YWJJbmRleFwiXG4gICAgICAgICAgICBbYXR0ci5kYXRhLWJzLXRvZ2dsZV09XCJidG4ubW9kYWxUb1RyaWdnZXIgPyAnbW9kYWwnIDogbnVsbFwiXG4gICAgICAgICAgICBbYXR0ci5kYXRhLWJzLXRhcmdldF09XCJidG4ubW9kYWxUb1RyaWdnZXIgPyAnIycgKyBidG4ubW9kYWxUb1RyaWdnZXIgOiBudWxsXCJcbiAgICAgICAgICAgIFtuZ1N0eWxlXT1cImdldEJ1dHRvblN0eWxlcyhidG4pXCJcbiAgICAgICAgICAgIFtkaXNhYmxlZF09XCJidG4uYnV0dG9uRGlzYWJsZVwiXG4gICAgICAgICAgICBbYXR0ci5kYXRhLWJzLWRpc21pc3NdPVwiYnRuLmRhdGFEaXNtaXNzXCJcbiAgICAgICAgICAgIChjbGljayk9XCJidXR0b25DbGlja2VkKGJ0bilcIlxuICAgICAgICAgICAgW2F0dHIuaWRdPVwiYnRuLmZjQnRuSWQgIT09ICdkZWZhdWx0JyA/IGJ0bi5mY0J0bklkIDogbnVsbFwiPlxuICAgICAgICAgICAgPGltZyAqbmdJZj1cImJ0bi5pc0ltYWdlU3ZnXCIgW3NyY109XCJidG4uaWNvblNyY1wiPlxuICAgICAgICAgICAgPHNwYW4gY2xhc3M9XCJmYy1idG4tdGV4dFwiIHN0eWxlPVwicGFkZGluZy1sZWZ0OiAxMnB4O1wiPnt7YnRuLm5hbWV9fTwvc3Bhbj5cbiAgICAgICAgPC9idXR0b24+XG4gICAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==
package/esm2022/lib/components/custom-table/custom-table.component.mjs CHANGED
@@ -330,11 +330,11 @@ export class CustomTableComponent {
330
330
  console.log('Component Destroyed');
331
331
  }
332
332
  static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTableComponent, deps: [{ token: i1.ChangeService }, { token: i2.I18nService }, { token: i3.SalesforceService }, { token: i4.DataService }], target: i0.ɵɵFactoryTarget.Component });
333
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange", saveTableData: "saveTableData" }, ngImport: i0, template: "<!-- RS 03FEB2025 -->\n<!-- Search Bar -->\n<!-- Search, Revert & Save in Same Line -->\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\n <!-- Search Bar -->\n <div class=\"search-container me-auto\">\n <div class=\"input-group\">\n <input \n type=\"text\" \n class=\"form-control search-input\"\n [(ngModel)]=\"searchTerm\"\n (input)=\"search()\"\n placeholder=\"Search...\"\n >\n <div class=\"search-icon\">\n <!-- RS 03FEB2025 -->\n <!-- Search icon for user input -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- Buttons -->\n <div>\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\n <button \n class=\"btn btn-secondary me-2\" \n *ngIf=\"hasUnsavedChanges\" \n (click)=\"revertChanges()\"\n >\n Cancel\n </button>\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\n <button \n class=\"btn btn-primary\" \n [disabled]=\"!hasUnsavedChanges\"\n (click)=\"saveTable()\"\n >\n Save Table\n </button>\n </div>\n</div>\n<!-- Table Container -->\n<div class=\"table-container\">\n <table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <tr>\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\n {{ header.label }}\n </th>\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of paginatedData; let i = index\">\n <td *ngFor=\"let header of tableHeader\">\n <!-- Image with text input -->\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\n <div class=\"d-flex align-items-center\">\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\n <input type=\"text\" \n [(ngModel)]=\"item[header.fieldName]\" \n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \n class=\"she-line-input table-input\">\n </div>\n </ng-container>\n\n <!-- Image only -->\n <ng-container *ngIf=\"header.fldType === 'image'\">\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\n </ng-container>\n <!--VD 23Aug24 handle readOnly -->\n <!-- Text input -->\n <ng-container *ngIf=\"header.fldType === 'Text'\">\n <input type=\"text\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n <!--VD 23Aug24 handle Number Type -->\n <!-- Number input -->\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <ng-container *ngIf=\"header.fldType === 'Number'\">\n <input type=\"number\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n\n <!-- Radio input -->\n <ng-container *ngIf=\"header.fldType === 'radio'\">\n <input type=\"radio\" \n [name]=\"item.name\" \n [checked]=\"item.value == header.fieldName\" \n (click)=\"updateRadio(item, header.fieldName)\">\n </ng-container>\n </td>\n <!-- Actions column --><!-- RS 03FEB2025 -->\n <td *ngIf=\"showActions\" class=\"actions-column\">\n <div class=\"d-flex justify-content-around\">\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#03A9F4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 20h9\" />\n <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\n <path d=\"m15 5 3 3\" />\n </svg>\n Edit\n </button>\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F44336\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 6h18\" />\n <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\n <path d=\"m10 11 1 6\" />\n <path d=\"m14 11-1 6\" />\n <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\n </svg>\n \n Delete\n </button>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<!-- Pagination --><!-- RS 03FEB2025 -->\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\n <div class=\"d-flex justify-content-end align-items-center\">\n <div class=\"items-per-page\">\n <span>Items per page:</span>\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <div class=\"page-info ms-3 me-3\">\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\n </div>\n <nav aria-label=\"Table pagination\">\n <!-- First page --><!-- RS 03FEB2025 -->\n <ul class=\"pagination mb-0\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\n </li>\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\n </li>\n <!-- Last page -->\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\n </li>\n </ul>\n </nav>\n </div>\n</div>\n<!-- RS 03FEB2025 -->\n<!-- Add Row Button -->\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\n <div class=\"circle-button\">+</div>\n</div>\n", styles: [".table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse}.table-container{max-height:400px;overflow-y:auto;overflow-x:auto;position:relative;margin-bottom:1rem}.table th,.table td{padding:3px 5px;line-height:1.2;vertical-align:middle;border:1px solid #dee2e6;white-space:nowrap}.table-bordered{border:1px solid #ddd}.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9!important}thead{background-color:#03a9f4;position:sticky;top:0;z-index:10}thead th{color:#fff;font-size:14px;text-align:center;vertical-align:bottom;border-bottom:2px solid #dee2e6;padding:12px!important}thead .permission,.permission_yes,.permission_no,.permission_na{text-align:center}th{text-align:left}tbody{color:#797979}tbody td{font-size:12px}.none-border th{border:none}.actions-column{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#fff}.actions-columns{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#03a9f4}.actions-column .btn-link{font-size:11px;color:#797979;text-decoration:none}th.actions-column{background-color:#03a9f4}tr:nth-of-type(odd) .actions-column{background-color:#f9f9f9!important}tr:nth-of-type(2n) .actions-column{background-color:#fff!important}.table-input{width:100%;padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.editInput{background-color:#fff;border-bottom:1px solid red!important;border-color:#80bdff}.search-container{margin-bottom:1rem}.search-container .input-group{max-width:300px;position:relative}.search-input{padding-right:35px;border-radius:4px!important}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:4;color:#666;pointer-events:none}.pagination-container{padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #dee2e6}.pagination-container .d-flex{justify-content:flex-end!important}.items-per-page{margin-right:20px;font-size:12px}.items-per-page select{width:60px;margin-left:8px}.page-info{margin-right:15px;font-size:12px;color:#6c757d}.pagination{margin:0}.page-link{padding:.25rem .5rem;font-size:12px}.page-item.disabled .page-link{cursor:not-allowed}.addRowClass{float:right;margin-top:1rem;margin-right:15%;text-align:center;cursor:pointer}.circle-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#007bff;color:#fff;cursor:pointer;font-size:24px;line-height:1;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#0056b3}.small-icon{width:16px;height:16px;margin-right:4px}.action{min-width:80px;text-align:center;cursor:pointer}.action:hover{color:red}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i7.GetValuePipe, name: "getValue" }] });
333
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: CustomTableComponent, selector: "app-custom-table", inputs: { question: "question", apiMeta: "apiMeta" }, outputs: { valueChange: "valueChange", saveTableData: "saveTableData" }, ngImport: i0, template: "<!-- RS 03FEB2025 -->\n<!-- Search Bar -->\n<!-- Search, Revert & Save in Same Line -->\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\n <!-- Search Bar -->\n <div class=\"search-container me-auto\">\n <div class=\"input-group\">\n <input \n type=\"text\" \n class=\"form-control search-input\"\n [(ngModel)]=\"searchTerm\"\n (input)=\"search()\"\n placeholder=\"Search...\"\n >\n <div class=\"search-icon\">\n <!-- RS 03FEB2025 -->\n <!-- Search icon for user input -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- Buttons -->\n <div>\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\n <button \n class=\"btn btn-secondary me-2\" \n *ngIf=\"hasUnsavedChanges\" \n (click)=\"revertChanges()\"\n >\n Cancel\n </button>\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\n <button \n class=\"btn btn-primary\" \n [disabled]=\"!hasUnsavedChanges\"\n (click)=\"saveTable()\"\n >\n Save Table\n </button>\n </div>\n</div>\n<!-- Table Container -->\n<div class=\"table-container\">\n <table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <tr>\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\n {{ header.label }}\n </th>\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of paginatedData; let i = index\">\n <td *ngFor=\"let header of tableHeader\">\n <!-- Image with text input -->\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\n <div class=\"d-flex align-items-center\">\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\n <input type=\"text\" \n [(ngModel)]=\"item[header.fieldName]\" \n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \n class=\"she-line-input table-input\">\n </div>\n </ng-container>\n\n <!-- Image only -->\n <ng-container *ngIf=\"header.fldType === 'image'\">\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\n </ng-container>\n <!--VD 23Aug24 handle readOnly -->\n <!-- Text input -->\n <ng-container *ngIf=\"header.fldType === 'Text'\">\n <input type=\"text\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n <!--VD 23Aug24 handle Number Type -->\n <!-- Number input -->\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <ng-container *ngIf=\"header.fldType === 'Number'\">\n <input type=\"number\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n\n <!-- Radio input -->\n <ng-container *ngIf=\"header.fldType === 'radio'\">\n <input type=\"radio\" \n [name]=\"item.name\" \n [checked]=\"item.value == header.fieldName\" \n (click)=\"updateRadio(item, header.fieldName)\">\n </ng-container>\n </td>\n <!-- Actions column --><!-- RS 03FEB2025 -->\n <td *ngIf=\"showActions\" class=\"actions-column\">\n <div class=\"d-flex justify-content-around\">\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#03A9F4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 20h9\" />\n <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\n <path d=\"m15 5 3 3\" />\n </svg>\n Edit\n </button>\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F44336\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 6h18\" />\n <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\n <path d=\"m10 11 1 6\" />\n <path d=\"m14 11-1 6\" />\n <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\n </svg>\n \n Delete\n </button>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<!-- Pagination --><!-- RS 03FEB2025 -->\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\n <div class=\"d-flex justify-content-end align-items-center\">\n <div class=\"items-per-page\">\n <span>Items per page:</span>\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <div class=\"page-info ms-3 me-3\">\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\n </div>\n <nav aria-label=\"Table pagination\">\n <!-- First page --><!-- RS 03FEB2025 -->\n <ul class=\"pagination mb-0\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\n </li>\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\n </li>\n <!-- Last page -->\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\n </li>\n </ul>\n </nav>\n </div>\n</div>\n<!-- RS 03FEB2025 -->\n<!-- Add Row Button -->\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\n <div class=\"circle-button\">+</div>\n</div>\n", styles: [".table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse}.table-container{max-height:400px;overflow-y:auto;overflow-x:auto;position:relative;margin-bottom:1rem}.table th,.table td{padding:3px 5px;line-height:1.2;vertical-align:middle;border:1px solid #dee2e6;white-space:nowrap}.table-bordered{border:1px solid #ddd}.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9!important}thead{background-color:#03a9f4;position:sticky;top:0;z-index:unset!important}thead th{color:#fff;font-size:14px;text-align:center;vertical-align:bottom;border-bottom:2px solid #dee2e6;padding:12px!important}thead .permission,.permission_yes,.permission_no,.permission_na{text-align:center}th{text-align:left}tbody{color:#797979}tbody td{font-size:12px}.none-border th{border:none}.actions-column{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#fff}.actions-columns{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#03a9f4}.actions-column .btn-link{font-size:11px;color:#797979;text-decoration:none}th.actions-column{background-color:#03a9f4}tr:nth-of-type(odd) .actions-column{background-color:#f9f9f9!important}tr:nth-of-type(2n) .actions-column{background-color:#fff!important}.table-input{width:100%;padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.editInput{background-color:#fff;border-bottom:1px solid red!important;border-color:#80bdff}.search-container{margin-bottom:1rem}.search-container .input-group{max-width:300px;position:relative}.search-input{padding-right:35px;border-radius:4px!important}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none}.pagination-container{padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #dee2e6}.pagination-container .d-flex{justify-content:flex-end!important}.items-per-page{margin-right:20px;font-size:12px}.items-per-page select{width:60px;margin-left:8px}.page-info{margin-right:15px;font-size:12px;color:#6c757d}.pagination{margin:0}.page-link{padding:.25rem .5rem;font-size:12px}.page-item.disabled .page-link{cursor:not-allowed}.addRowClass{float:right;margin-top:1rem;margin-right:15%;text-align:center;cursor:pointer}.circle-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#007bff;color:#fff;cursor:pointer;font-size:24px;line-height:1;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#0056b3}.small-icon{width:16px;height:16px;margin-right:4px}.action{min-width:80px;text-align:center;cursor:pointer}.action:hover{color:red}\n"], dependencies: [{ kind: "directive", type: i5.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i5.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i6.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i6.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i6.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i6.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i6.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i6.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: i7.GetValuePipe, name: "getValue" }] });
334
334
  }
335
335
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomTableComponent, decorators: [{
336
336
  type: Component,
337
- args: [{ selector: 'app-custom-table', template: "<!-- RS 03FEB2025 -->\n<!-- Search Bar -->\n<!-- Search, Revert & Save in Same Line -->\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\n <!-- Search Bar -->\n <div class=\"search-container me-auto\">\n <div class=\"input-group\">\n <input \n type=\"text\" \n class=\"form-control search-input\"\n [(ngModel)]=\"searchTerm\"\n (input)=\"search()\"\n placeholder=\"Search...\"\n >\n <div class=\"search-icon\">\n <!-- RS 03FEB2025 -->\n <!-- Search icon for user input -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- Buttons -->\n <div>\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\n <button \n class=\"btn btn-secondary me-2\" \n *ngIf=\"hasUnsavedChanges\" \n (click)=\"revertChanges()\"\n >\n Cancel\n </button>\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\n <button \n class=\"btn btn-primary\" \n [disabled]=\"!hasUnsavedChanges\"\n (click)=\"saveTable()\"\n >\n Save Table\n </button>\n </div>\n</div>\n<!-- Table Container -->\n<div class=\"table-container\">\n <table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <tr>\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\n {{ header.label }}\n </th>\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of paginatedData; let i = index\">\n <td *ngFor=\"let header of tableHeader\">\n <!-- Image with text input -->\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\n <div class=\"d-flex align-items-center\">\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\n <input type=\"text\" \n [(ngModel)]=\"item[header.fieldName]\" \n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \n class=\"she-line-input table-input\">\n </div>\n </ng-container>\n\n <!-- Image only -->\n <ng-container *ngIf=\"header.fldType === 'image'\">\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\n </ng-container>\n <!--VD 23Aug24 handle readOnly -->\n <!-- Text input -->\n <ng-container *ngIf=\"header.fldType === 'Text'\">\n <input type=\"text\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n <!--VD 23Aug24 handle Number Type -->\n <!-- Number input -->\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <ng-container *ngIf=\"header.fldType === 'Number'\">\n <input type=\"number\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n\n <!-- Radio input -->\n <ng-container *ngIf=\"header.fldType === 'radio'\">\n <input type=\"radio\" \n [name]=\"item.name\" \n [checked]=\"item.value == header.fieldName\" \n (click)=\"updateRadio(item, header.fieldName)\">\n </ng-container>\n </td>\n <!-- Actions column --><!-- RS 03FEB2025 -->\n <td *ngIf=\"showActions\" class=\"actions-column\">\n <div class=\"d-flex justify-content-around\">\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#03A9F4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 20h9\" />\n <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\n <path d=\"m15 5 3 3\" />\n </svg>\n Edit\n </button>\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F44336\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 6h18\" />\n <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\n <path d=\"m10 11 1 6\" />\n <path d=\"m14 11-1 6\" />\n <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\n </svg>\n \n Delete\n </button>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<!-- Pagination --><!-- RS 03FEB2025 -->\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\n <div class=\"d-flex justify-content-end align-items-center\">\n <div class=\"items-per-page\">\n <span>Items per page:</span>\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <div class=\"page-info ms-3 me-3\">\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\n </div>\n <nav aria-label=\"Table pagination\">\n <!-- First page --><!-- RS 03FEB2025 -->\n <ul class=\"pagination mb-0\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\n </li>\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\n </li>\n <!-- Last page -->\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\n </li>\n </ul>\n </nav>\n </div>\n</div>\n<!-- RS 03FEB2025 -->\n<!-- Add Row Button -->\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\n <div class=\"circle-button\">+</div>\n</div>\n", styles: [".table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse}.table-container{max-height:400px;overflow-y:auto;overflow-x:auto;position:relative;margin-bottom:1rem}.table th,.table td{padding:3px 5px;line-height:1.2;vertical-align:middle;border:1px solid #dee2e6;white-space:nowrap}.table-bordered{border:1px solid #ddd}.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9!important}thead{background-color:#03a9f4;position:sticky;top:0;z-index:10}thead th{color:#fff;font-size:14px;text-align:center;vertical-align:bottom;border-bottom:2px solid #dee2e6;padding:12px!important}thead .permission,.permission_yes,.permission_no,.permission_na{text-align:center}th{text-align:left}tbody{color:#797979}tbody td{font-size:12px}.none-border th{border:none}.actions-column{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#fff}.actions-columns{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#03a9f4}.actions-column .btn-link{font-size:11px;color:#797979;text-decoration:none}th.actions-column{background-color:#03a9f4}tr:nth-of-type(odd) .actions-column{background-color:#f9f9f9!important}tr:nth-of-type(2n) .actions-column{background-color:#fff!important}.table-input{width:100%;padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.editInput{background-color:#fff;border-bottom:1px solid red!important;border-color:#80bdff}.search-container{margin-bottom:1rem}.search-container .input-group{max-width:300px;position:relative}.search-input{padding-right:35px;border-radius:4px!important}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:4;color:#666;pointer-events:none}.pagination-container{padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #dee2e6}.pagination-container .d-flex{justify-content:flex-end!important}.items-per-page{margin-right:20px;font-size:12px}.items-per-page select{width:60px;margin-left:8px}.page-info{margin-right:15px;font-size:12px;color:#6c757d}.pagination{margin:0}.page-link{padding:.25rem .5rem;font-size:12px}.page-item.disabled .page-link{cursor:not-allowed}.addRowClass{float:right;margin-top:1rem;margin-right:15%;text-align:center;cursor:pointer}.circle-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#007bff;color:#fff;cursor:pointer;font-size:24px;line-height:1;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#0056b3}.small-icon{width:16px;height:16px;margin-right:4px}.action{min-width:80px;text-align:center;cursor:pointer}.action:hover{color:red}\n"] }]
337
+ args: [{ selector: 'app-custom-table', template: "<!-- RS 03FEB2025 -->\n<!-- Search Bar -->\n<!-- Search, Revert & Save in Same Line -->\n<div class=\"d-flex align-items-center justify-content-between mb-3\">\n <!-- Search Bar -->\n <div class=\"search-container me-auto\">\n <div class=\"input-group\">\n <input \n type=\"text\" \n class=\"form-control search-input\"\n [(ngModel)]=\"searchTerm\"\n (input)=\"search()\"\n placeholder=\"Search...\"\n >\n <div class=\"search-icon\">\n <!-- RS 03FEB2025 -->\n <!-- Search icon for user input -->\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <circle cx=\"11\" cy=\"11\" r=\"8\"></circle>\n <line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line>\n </svg>\n </div>\n </div>\n </div>\n\n <!-- Buttons -->\n <div>\n <!-- RS 03FEB2025 --><!-- Cancel button (visible only when changes are unsaved) -->\n <button \n class=\"btn btn-secondary me-2\" \n *ngIf=\"hasUnsavedChanges\" \n (click)=\"revertChanges()\"\n >\n Cancel\n </button>\n <!-- Save button (disabled if no unsaved changes) --><!-- RS 03FEB2025 -->\n <button \n class=\"btn btn-primary\" \n [disabled]=\"!hasUnsavedChanges\"\n (click)=\"saveTable()\"\n >\n Save Table\n </button>\n </div>\n</div>\n<!-- Table Container -->\n<div class=\"table-container\">\n <table class=\"table table-striped table-bordered\">\n <thead>\n <!-- HA 28DEC23 changed table header values and changed table size logic to evenly visible -->\n <!-- <th><input type=\"checkbox\" (change)=\"selectAll($event.target.checked)\"></th> -->\n <tr>\n <th *ngFor=\"let header of tableHeader\" [style.width]=\"header.width || 'auto'\">\n {{ header.label }}\n </th>\n <!-- Actions column (only if showActions is true) --><!-- RS 03FEB2025 -->\n <th *ngIf=\"showActions\" style=\"width: 140px\" class=\"actions-columns\">Actions</th>\n </tr>\n </thead>\n <tbody>\n <tr *ngFor=\"let item of paginatedData; let i = index\">\n <td *ngFor=\"let header of tableHeader\">\n <!-- Image with text input -->\n <ng-container *ngIf=\"header.fldType === 'imagetext'\">\n <div class=\"d-flex align-items-center\">\n <img [src]=\"item.imageSrc\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px; margin-right: 5px;\">\n <input type=\"text\" \n [(ngModel)]=\"item[header.fieldName]\" \n (ngModelChange)=\"updateLabel(i, header.fieldName, item[header.fieldName])\" \n class=\"she-line-input table-input\">\n </div>\n </ng-container>\n\n <!-- Image only -->\n <ng-container *ngIf=\"header.fldType === 'image'\">\n <img [src]=\"item[header.fieldName]\" [alt]=\"item.altText\" style=\"width: 35px; height: 32px;\">\n </ng-container>\n <!--VD 23Aug24 handle readOnly -->\n <!-- Text input -->\n <ng-container *ngIf=\"header.fldType === 'Text'\">\n <input type=\"text\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n <!--VD 23Aug24 handle Number Type -->\n <!-- Number input -->\n <!-- VD 26Jun24 - pipe change to handle multiple objects-->\n <ng-container *ngIf=\"header.fldType === 'Number'\">\n <input type=\"number\" \n [readonly]=\"header.readOnly\" \n [disabled]=\"!item.edit\" \n [ngClass]=\"{'editInput': item.edit && !header.readOnly}\"\n [ngModel]=\"'' | getValue: item : header.apiName\" \n (ngModelChange)=\"updateLabel(i, header.apiName,$event)\" \n class=\"she-line-input table-input\">\n </ng-container>\n\n <!-- Radio input -->\n <ng-container *ngIf=\"header.fldType === 'radio'\">\n <input type=\"radio\" \n [name]=\"item.name\" \n [checked]=\"item.value == header.fieldName\" \n (click)=\"updateRadio(item, header.fieldName)\">\n </ng-container>\n </td>\n <!-- Actions column --><!-- RS 03FEB2025 -->\n <td *ngIf=\"showActions\" class=\"actions-column\">\n <div class=\"d-flex justify-content-around\">\n <button class=\"btn btn-link p-0\" (click)=\"editRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#03A9F4\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M12 20h9\" />\n <path d=\"M16.5 3.5a2.121 2.121 0 0 1 3 3L7 19l-4 1 1-4Z\" />\n <path d=\"m15 5 3 3\" />\n </svg>\n Edit\n </button>\n <button class=\"btn btn-link p-0\" (click)=\"deleteRow(i)\">\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"#F44336\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n <path d=\"M3 6h18\" />\n <path d=\"M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2\" />\n <path d=\"m10 11 1 6\" />\n <path d=\"m14 11-1 6\" />\n <path d=\"M4 6l1 14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2l1-14\" />\n </svg>\n \n Delete\n </button>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n</div>\n\n<!-- Pagination --><!-- RS 03FEB2025 -->\n<div *ngIf=\"showPagination\" class=\"pagination-container\">\n <div class=\"d-flex justify-content-end align-items-center\">\n <div class=\"items-per-page\">\n <span>Items per page:</span>\n <select [(ngModel)]=\"itemsPerPage\" (change)=\"updatePagination()\" class=\"form-select form-select-sm\">\n <option value=\"5\">5</option>\n <option value=\"10\">10</option>\n <option value=\"20\">20</option>\n <option value=\"50\">50</option>\n </select>\n </div>\n <div class=\"page-info ms-3 me-3\">\n {{((currentPage - 1) * itemsPerPage + 1)}} - {{Math.min(currentPage * itemsPerPage, totalItems)}} of {{totalItems}}\n </div>\n <nav aria-label=\"Table pagination\">\n <!-- First page --><!-- RS 03FEB2025 -->\n <ul class=\"pagination mb-0\">\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(1)\">\u00AB</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === 1\">\n <a class=\"page-link\" (click)=\"setPage(currentPage - 1)\">\u2039</a>\n </li>\n <!-- Dynamic pagination --><!-- RS 03FEB2025 -->\n <li class=\"page-item\" *ngFor=\"let page of pages\" [class.active]=\"page === currentPage\">\n <a class=\"page-link\" (click)=\"setPage(page)\">{{page}}</a>\n </li>\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(currentPage + 1)\">\u203A</a>\n </li>\n <!-- Last page -->\n <li class=\"page-item\" [class.disabled]=\"currentPage === pages.length\">\n <a class=\"page-link\" (click)=\"setPage(pages.length)\">\u00BB</a>\n </li>\n </ul>\n </nav>\n </div>\n</div>\n<!-- RS 03FEB2025 -->\n<!-- Add Row Button -->\n<div *ngIf=\"showAddRow\" (click)=\"addRow()\" class=\"addRowClass\">\n <div class=\"circle-button\">+</div>\n</div>\n", styles: [".table{width:100%;max-width:100%;margin-bottom:1rem;background-color:transparent;border-collapse:collapse}.table-container{max-height:400px;overflow-y:auto;overflow-x:auto;position:relative;margin-bottom:1rem}.table th,.table td{padding:3px 5px;line-height:1.2;vertical-align:middle;border:1px solid #dee2e6;white-space:nowrap}.table-bordered{border:1px solid #ddd}.table-striped tbody tr:nth-of-type(odd){background-color:#f9f9f9!important}thead{background-color:#03a9f4;position:sticky;top:0;z-index:unset!important}thead th{color:#fff;font-size:14px;text-align:center;vertical-align:bottom;border-bottom:2px solid #dee2e6;padding:12px!important}thead .permission,.permission_yes,.permission_no,.permission_na{text-align:center}th{text-align:left}tbody{color:#797979}tbody td{font-size:12px}.none-border th{border:none}.actions-column{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#fff}.actions-columns{width:140px;white-space:nowrap;position:sticky;right:0;z-index:10;background-color:#03a9f4}.actions-column .btn-link{font-size:11px;color:#797979;text-decoration:none}th.actions-column{background-color:#03a9f4}tr:nth-of-type(odd) .actions-column{background-color:#f9f9f9!important}tr:nth-of-type(2n) .actions-column{background-color:#fff!important}.table-input{width:100%;padding:.375rem .75rem;border:1px solid #ced4da;border-radius:.25rem}.editInput{background-color:#fff;border-bottom:1px solid red!important;border-color:#80bdff}.search-container{margin-bottom:1rem}.search-container .input-group{max-width:300px;position:relative}.search-input{padding-right:35px;border-radius:4px!important}.search-icon{position:absolute;right:10px;top:50%;transform:translateY(-50%);color:#666;pointer-events:none}.pagination-container{padding:.5rem 1rem;background-color:#f8f9fa;border-top:1px solid #dee2e6}.pagination-container .d-flex{justify-content:flex-end!important}.items-per-page{margin-right:20px;font-size:12px}.items-per-page select{width:60px;margin-left:8px}.page-info{margin-right:15px;font-size:12px;color:#6c757d}.pagination{margin:0}.page-link{padding:.25rem .5rem;font-size:12px}.page-item.disabled .page-link{cursor:not-allowed}.addRowClass{float:right;margin-top:1rem;margin-right:15%;text-align:center;cursor:pointer}.circle-button{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;background-color:#007bff;color:#fff;cursor:pointer;font-size:24px;line-height:1;box-shadow:0 2px 4px #0003}.circle-button:hover{background-color:#0056b3}.small-icon{width:16px;height:16px;margin-right:4px}.action{min-width:80px;text-align:center;cursor:pointer}.action:hover{color:red}\n"] }]
338
338
  }], ctorParameters: () => [{ type: i1.ChangeService }, { type: i2.I18nService }, { type: i3.SalesforceService }, { type: i4.DataService }], propDecorators: { question: [{
339
339
  type: Input
340
340
  }], valueChange: [{