master-control 0.3.25 → 0.3.27
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/esm2022/lib/button/button.component.mjs +3 -3
- package/esm2022/lib/directives/customized.tooltip.directive.mjs +117 -0
- package/esm2022/lib/suffix-textbox/suffix-textbox.component.mjs +6 -4
- package/esm2022/lib/toggle-button/toggle-button.component.mjs +5 -4
- package/fesm2022/master-control.mjs +125 -9
- package/fesm2022/master-control.mjs.map +1 -1
- package/lib/directives/customized.tooltip.directive.d.ts +16 -0
- package/master-control-0.3.27.tgz +0 -0
- package/package.json +1 -1
- package/master-control-0.3.25.tgz +0 -0
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Injectable, input, EventEmitter, Component, Output, ViewChild, Input, HostListener, output, effect } from '@angular/core';
|
|
2
|
+
import { Injectable, input, EventEmitter, Component, Output, ViewChild, Directive, Input, HostListener, output, effect } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/material/input';
|
|
4
4
|
import { MatInputModule } from '@angular/material/input';
|
|
5
5
|
import * as i2 from '@angular/material/form-field';
|
|
@@ -424,11 +424,11 @@ class ButtonComponent {
|
|
|
424
424
|
}
|
|
425
425
|
field = input.required();
|
|
426
426
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, deps: [{ token: MasterControlService }], target: i0.ɵɵFactoryTarget.Component });
|
|
427
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<Button\r\n class=\"button\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [disabled]=\"field()?.isDisable\"\r\n [ngStyle]=\"\r\n {\r\n '--button-border-width': field()?.controlStyle?.borderWidth ,\r\n '--button-border-color': field()?.controlStyle?.borderColor ,\r\n '--button-border-style': field()?.controlStyle?.borderStyle ,\r\n '--button-width': field()?.controlStyle?.width ,\r\n '--button-font-size': field()?.controlStyle?.fontSize ,\r\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--button-background': field()?.controlStyle?.background ,\r\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\r\n '--button-text-color': field()?.controlStyle?.color ,\r\n '--button-margin': field()?.controlStyle?.margin ,\r\n }\"\r\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\r\n>\r\n<span class=\"button-text\">\r\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\r\n<span>{{field()?.label}}</span>\r\n</span>\r\n</Button>\r\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
427
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "18.2.13", type: ButtonComponent, isStandalone: true, selector: "lib-button", inputs: { field: { classPropertyName: "field", publicName: "field", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<Button\r\n class=\"button\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [disabled]=\"field()?.isDisable\"\r\n [ngStyle]=\"\r\n {\r\n '--button-border-width': field()?.controlStyle?.borderWidth ,\r\n '--button-border-color': field()?.controlStyle?.borderColor ,\r\n '--button-border-style': field()?.controlStyle?.borderStyle ,\r\n '--button-width': field()?.controlStyle?.width ,\r\n '--button-font-size': field()?.controlStyle?.fontSize ,\r\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--button-background': field()?.controlStyle?.background ,\r\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\r\n '--button-text-color': field()?.controlStyle?.color ,\r\n '--button-margin': field()?.controlStyle?.margin ,\r\n }\"\r\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\r\n>\r\n<span class=\"button-text\">\r\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\r\n<span>{{field()?.label}}</span>\r\n</span>\r\n</Button>\r\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] });
|
|
428
428
|
}
|
|
429
429
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
430
430
|
type: Component,
|
|
431
|
-
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule], template: "<Button\r\n class=\"button\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [disabled]=\"field()?.isDisable\"\r\n [ngStyle]=\"\r\n {\r\n '--button-border-width': field()?.controlStyle?.borderWidth ,\r\n '--button-border-color': field()?.controlStyle?.borderColor ,\r\n '--button-border-style': field()?.controlStyle?.borderStyle ,\r\n '--button-width': field()?.controlStyle?.width ,\r\n '--button-font-size': field()?.controlStyle?.fontSize ,\r\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--button-background': field()?.controlStyle?.background ,\r\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\r\n '--button-text-color': field()?.controlStyle?.color ,\r\n '--button-margin': field()?.controlStyle?.margin ,\r\n }\"\r\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\r\n>\r\n<span class=\"button-text\">\r\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\r\n<span>{{field()?.label}}</span>\r\n</span>\r\n</Button>\r\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}\n"] }]
|
|
431
|
+
args: [{ selector: 'lib-button', standalone: true, imports: [CommonModule], template: "<Button\r\n class=\"button\"\r\n *ngIf=\"field() && field()?.isVisible\"\r\n [disabled]=\"field()?.isDisable\"\r\n [ngStyle]=\"\r\n {\r\n '--button-border-width': field()?.controlStyle?.borderWidth ,\r\n '--button-border-color': field()?.controlStyle?.borderColor ,\r\n '--button-border-style': field()?.controlStyle?.borderStyle ,\r\n '--button-width': field()?.controlStyle?.width ,\r\n '--button-font-size': field()?.controlStyle?.fontSize ,\r\n '--button-font-weight': field()?.controlStyle?.fontWeight ,\r\n '--button-background': field()?.controlStyle?.background ,\r\n '--button-border-radius': field()?.controlStyle?.borderRadius ,\r\n '--button-text-color': field()?.controlStyle?.color ,\r\n '--button-margin': field()?.controlStyle?.margin ,\r\n }\"\r\n [ngClass]=\"field()?.isDisable ? 'button-disable' : 'button'\"\r\n>\r\n<span class=\"button-text\">\r\n<img *ngIf=\"field()?.imageUrl\" [src]='field().imageUrl'>\r\n<span>{{field()?.label}}</span>\r\n</span>\r\n</Button>\r\n", styles: [".button{height:var(--button-height, 32px)!important;min-width:var(--button-width, 164px)!important;background:var(--button-background, #ffbb00)!important;border-width:var(--button-border-width, 0px)!important;border-color:var(--button-border-color, #fb0)!important;border-style:var(--button-border-style, solid)!important;border-radius:var(--button-border-radius, 8px)!important;font-size:var(--button-font-size, 12px)!important;font-weight:var(--button-font-weight, 800)!important;color:var(--button-text-color, #444)!important;max-width:fit-content}.button-text{display:flex;justify-content:center;gap:4px}.button-text img{margin-top:3px}*{font-family:Mulish!important}.button-disable{background:#ececec!important}@media screen and (max-width: 768px){.button{height:40px!important}}\n"] }]
|
|
432
432
|
}], ctorParameters: () => [{ type: MasterControlService }] });
|
|
433
433
|
|
|
434
434
|
class SelectComponent {
|
|
@@ -1713,6 +1713,121 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1713
1713
|
type: Output
|
|
1714
1714
|
}] } });
|
|
1715
1715
|
|
|
1716
|
+
class CustomizedTooltipDirective {
|
|
1717
|
+
el;
|
|
1718
|
+
vcr;
|
|
1719
|
+
template;
|
|
1720
|
+
tooltipElement = null;
|
|
1721
|
+
showTimeout = null;
|
|
1722
|
+
hideTimeout = null;
|
|
1723
|
+
constructor(el, vcr) {
|
|
1724
|
+
this.el = el;
|
|
1725
|
+
this.vcr = vcr;
|
|
1726
|
+
}
|
|
1727
|
+
showTooltip() {
|
|
1728
|
+
// Clear any existing hide timeout
|
|
1729
|
+
if (this.hideTimeout) {
|
|
1730
|
+
clearTimeout(this.hideTimeout);
|
|
1731
|
+
this.hideTimeout = null;
|
|
1732
|
+
}
|
|
1733
|
+
// If tooltip already exists, don't create another
|
|
1734
|
+
if (this.tooltipElement) {
|
|
1735
|
+
return;
|
|
1736
|
+
}
|
|
1737
|
+
// Small delay to prevent flickering
|
|
1738
|
+
this.showTimeout = setTimeout(() => {
|
|
1739
|
+
if (!this.tooltipElement && this.template) {
|
|
1740
|
+
// Create tooltip container
|
|
1741
|
+
this.tooltipElement = document.createElement('div');
|
|
1742
|
+
this.tooltipElement.className = 'tooltip-text';
|
|
1743
|
+
// Add pointer-events none to prevent mouse interference
|
|
1744
|
+
this.tooltipElement.style.pointerEvents = 'none';
|
|
1745
|
+
// Render the template content
|
|
1746
|
+
const embeddedView = this.vcr.createEmbeddedView(this.template);
|
|
1747
|
+
embeddedView.detectChanges();
|
|
1748
|
+
embeddedView.rootNodes.forEach((node) => {
|
|
1749
|
+
this.tooltipElement?.appendChild(node);
|
|
1750
|
+
});
|
|
1751
|
+
// Position the tooltip
|
|
1752
|
+
document.body.appendChild(this.tooltipElement);
|
|
1753
|
+
const rect = this.el.nativeElement.getBoundingClientRect();
|
|
1754
|
+
this.tooltipElement.style.position = 'absolute';
|
|
1755
|
+
this.tooltipElement.style.top = (rect.bottom + 10) + 'px';
|
|
1756
|
+
this.tooltipElement.style.left = (rect.left - 10) + 'px';
|
|
1757
|
+
this.tooltipElement.style.visibility = 'visible';
|
|
1758
|
+
this.tooltipElement.style.opacity = '1';
|
|
1759
|
+
// Wait a frame for the tooltip to be fully rendered with its content
|
|
1760
|
+
requestAnimationFrame(() => {
|
|
1761
|
+
if (this.tooltipElement) {
|
|
1762
|
+
// Find the image element inside the span to get its actual dimensions
|
|
1763
|
+
const imgElement = this.el.nativeElement.querySelector('img');
|
|
1764
|
+
let iconCenterX;
|
|
1765
|
+
if (imgElement) {
|
|
1766
|
+
const imgRect = imgElement.getBoundingClientRect();
|
|
1767
|
+
iconCenterX = imgRect.left + (imgRect.width / 2);
|
|
1768
|
+
}
|
|
1769
|
+
else {
|
|
1770
|
+
// Fallback to span center if no image found
|
|
1771
|
+
iconCenterX = rect.left + (rect.width / 2);
|
|
1772
|
+
}
|
|
1773
|
+
// Get the actual tooltip position after it's rendered
|
|
1774
|
+
const tooltipRect = this.tooltipElement.getBoundingClientRect();
|
|
1775
|
+
const arrowPosition = iconCenterX - tooltipRect.left;
|
|
1776
|
+
this.tooltipElement.style.setProperty('--arrow-left-position', `${arrowPosition}px`);
|
|
1777
|
+
}
|
|
1778
|
+
});
|
|
1779
|
+
}
|
|
1780
|
+
}, 100);
|
|
1781
|
+
}
|
|
1782
|
+
hideTooltip() {
|
|
1783
|
+
// Clear any existing show timeout
|
|
1784
|
+
if (this.showTimeout) {
|
|
1785
|
+
clearTimeout(this.showTimeout);
|
|
1786
|
+
this.showTimeout = null;
|
|
1787
|
+
}
|
|
1788
|
+
// Small delay before hiding to prevent flickering
|
|
1789
|
+
this.hideTimeout = setTimeout(() => {
|
|
1790
|
+
if (this.tooltipElement) {
|
|
1791
|
+
document.body.removeChild(this.tooltipElement);
|
|
1792
|
+
this.tooltipElement = null;
|
|
1793
|
+
this.vcr.clear();
|
|
1794
|
+
}
|
|
1795
|
+
}, 50);
|
|
1796
|
+
}
|
|
1797
|
+
ngOnDestroy() {
|
|
1798
|
+
// Clean up timeouts
|
|
1799
|
+
if (this.showTimeout) {
|
|
1800
|
+
clearTimeout(this.showTimeout);
|
|
1801
|
+
}
|
|
1802
|
+
if (this.hideTimeout) {
|
|
1803
|
+
clearTimeout(this.hideTimeout);
|
|
1804
|
+
}
|
|
1805
|
+
// Clean up tooltip
|
|
1806
|
+
if (this.tooltipElement) {
|
|
1807
|
+
document.body.removeChild(this.tooltipElement);
|
|
1808
|
+
this.tooltipElement = null;
|
|
1809
|
+
}
|
|
1810
|
+
}
|
|
1811
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomizedTooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
1812
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.13", type: CustomizedTooltipDirective, isStandalone: true, selector: "[appTooltipTemplate]", inputs: { template: ["appTooltipTemplate", "template"] }, host: { listeners: { "mouseenter": "showTooltip()", "mouseleave": "hideTooltip()" } }, ngImport: i0 });
|
|
1813
|
+
}
|
|
1814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: CustomizedTooltipDirective, decorators: [{
|
|
1815
|
+
type: Directive,
|
|
1816
|
+
args: [{
|
|
1817
|
+
selector: '[appTooltipTemplate]',
|
|
1818
|
+
standalone: true,
|
|
1819
|
+
}]
|
|
1820
|
+
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ViewContainerRef }], propDecorators: { template: [{
|
|
1821
|
+
type: Input,
|
|
1822
|
+
args: ['appTooltipTemplate']
|
|
1823
|
+
}], showTooltip: [{
|
|
1824
|
+
type: HostListener,
|
|
1825
|
+
args: ['mouseenter']
|
|
1826
|
+
}], hideTooltip: [{
|
|
1827
|
+
type: HostListener,
|
|
1828
|
+
args: ['mouseleave']
|
|
1829
|
+
}] } });
|
|
1830
|
+
|
|
1716
1831
|
class SuffixTextboxComponent {
|
|
1717
1832
|
field = input.required();
|
|
1718
1833
|
inputValue = null;
|
|
@@ -1747,7 +1862,7 @@ class SuffixTextboxComponent {
|
|
|
1747
1862
|
useExisting: SuffixTextboxComponent,
|
|
1748
1863
|
multi: true
|
|
1749
1864
|
}
|
|
1750
|
-
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n >\r\n <img class=\"ms-1\" [src]=\"field().configData?.labelIconUrl\" [title]=\"field().configData?.tooltipMessage\" />\r\n </label\r\n>\r\n<mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\">\r\n@if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n}@else {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n [value]=\"inputValue\"\r\n />\r\n}\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\r\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\r\n </span>\r\n <span matSuffix class=\"mx-3 right-input-text\" *ngIf=\"field().configData?.suffix\"> {{field().configData?.suffix}} </span>\r\n</mat-form-field>\r\n<div *ngIf=\"field().configData?.isShowTagAs\">\r\n <span class=\"checkbox-tag\">Tag as:</span>\r\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\r\n <mat-checkbox class=\"optional-checkbox\">\r\n {{ option.label }}\r\n </mat-checkbox>\r\n </span>\r\n</div>\r\n<div *ngIf=\"field().configData?.infoMessage\">\r\n <span class=\"below-input-text\">{{field().configData?.infoMessage}}</span>\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.right-input-text{font-weight:400;font-size:12px;color:#696969}.error-message{color:red}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}*{font-family:mulish!important}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important;font-size:12px!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.ms-1{width:12px!important;height:12px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }] });
|
|
1865
|
+
], ngImport: i0, template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n >\r\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\r\n <img [src]=\"field().configData?.labelIconUrl\" />\r\n</span>\r\n<ng-template #HtmlContent>\r\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\r\n</ng-template>\r\n </label\r\n>\r\n<mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\">\r\n@if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n}@else {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n [value]=\"inputValue\"\r\n />\r\n}\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\r\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\r\n </span>\r\n <span matSuffix class=\"mx-3 right-input-text\" *ngIf=\"field().configData?.suffix\"> {{field().configData?.suffix}} </span>\r\n</mat-form-field>\r\n<div *ngIf=\"field().configData?.isShowTagAs\">\r\n <span class=\"checkbox-tag\">Tag as:</span>\r\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\r\n <mat-checkbox class=\"optional-checkbox\">\r\n {{ option.label }}\r\n </mat-checkbox>\r\n </span>\r\n</div>\r\n<div *ngIf=\"field().configData?.infoMessage\">\r\n <span class=\"below-input-text\">{{field().configData?.infoMessage}}</span>\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.right-input-text{font-weight:400;font-size:12px;color:#696969}.error-message{color:red}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}*{font-family:mulish!important}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important;font-size:12px!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.ms-1{width:12px!important;height:12px!important}\n"], dependencies: [{ kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i4$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
1751
1866
|
}
|
|
1752
1867
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: SuffixTextboxComponent, decorators: [{
|
|
1753
1868
|
type: Component,
|
|
@@ -1756,14 +1871,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
1756
1871
|
CommonModule,
|
|
1757
1872
|
MatInputModule,
|
|
1758
1873
|
MatCheckboxModule,
|
|
1759
|
-
ReactiveFormsModule
|
|
1874
|
+
ReactiveFormsModule,
|
|
1875
|
+
CustomizedTooltipDirective
|
|
1760
1876
|
], providers: [
|
|
1761
1877
|
{
|
|
1762
1878
|
provide: NG_VALUE_ACCESSOR,
|
|
1763
1879
|
useExisting: SuffixTextboxComponent,
|
|
1764
1880
|
multi: true
|
|
1765
1881
|
}
|
|
1766
|
-
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n >\r\n <
|
|
1882
|
+
], template: "<label class=\"field-lable\" *ngIf=\"field() && field()?.isVisible && field().isShowLabel\"\r\n >{{ field()?.label\r\n }}<span style=\"color: red\" *ngIf=\"field() && field()?.validators?.isRequired\"\r\n >*</span\r\n >\r\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\r\n <img [src]=\"field().configData?.labelIconUrl\" />\r\n</span>\r\n<ng-template #HtmlContent>\r\n <span [innerHTML]=\"field().configData?.tooltipMessage\"></span>\r\n</ng-template>\r\n </label\r\n>\r\n<mat-form-field class=\"w-100\" appearance=\"outline\" [ngStyle]=\"{\r\n'--custom-border-color': field()?.controlStyle?.borderColor ,\r\n'--custom-border-width': field()?.controlStyle?.borderWidth ,\r\n'--custom-border-radius': field()?.controlStyle?.borderRadius ,\r\n'--custom-bg-color': field()?.controlStyle?.background ,\r\n'--custom-border-color-focus': field()?.controlStyle?.focusBorderColor ,\r\n'--custom-border-width-focus': field()?.controlStyle?.focusBorderWidth ,\r\n'--custom-bg-color-focus': field()?.controlStyle?.focusBackground ,\r\n'--custom-border-color-hover': field()?.controlStyle?.hoverBorderColor ,\r\n'--custom-border-width-hover': field()?.controlStyle?.hoverBorderWidth ,\r\n'--custom-border-color-error': field()?.controlStyle?.errorBorderColor ,\r\n'--custom-border-width-error': field()?.controlStyle?.errorBorderWidth ,\r\n'--custom-font-size': field()?.controlStyle?.fontSize ,\r\n'--custom-font-weight': field()?.controlStyle?.fontWeight ,\r\n'--custom-font-family': field()?.controlStyle?.fontFamily ,\r\n'--custom-font-color': field()?.controlStyle?.color ,\r\n'--custom-caret-color': field()?.controlStyle?.caretColor ,\r\n'--custom-font-color-disabled' : field()?.controlStyle?.disableColor ,\r\n'--custom-bg-color-disabled' : field()?.controlStyle?.disableBackground ,\r\n}\">\r\n@if(reactiveFormControlobject()) {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n [value]=\"inputValue\"\r\n [formControl]=\"reactiveFormControlobject()\"\r\n />\r\n}@else {\r\n <input\r\n matInput\r\n autocomplete=\"none\"\r\n [type]=\"field()?.controlType\"\r\n [name]=\"field()?.fieldName\"\r\n [id]=\"field()?.fieldName\"\r\n [placeholder]=\"field()?.placeHolder\"\r\n [maxLength]=\"field()?.validators?.maxLength\"\r\n [minLength]=\"field()?.validators?.minLength\"\r\n [disabled]=\"field()?.isDisable\"\r\n [required]=\"field()?.validators?.isRequired\"\r\n [pattern]=\"field()?.validators?.pattern\"\r\n (input)=\"onInputChange($event)\"\r\n (blur)=\"onInputBlur()\"\r\n [value]=\"inputValue\"\r\n />\r\n}\r\n\r\n <mat-error *ngIf=\"false\">\r\n {{ field()?.validators?.requiredMessage }}\r\n </mat-error>\r\n <span matSuffix class=\"mx-3\" *ngIf=\"false\">\r\n <img src=\"https://cdn.godigit.com/retail-life/check-circle-ou.svg\" alt=\"\" />\r\n </span>\r\n <span matSuffix class=\"mx-3 right-input-text\" *ngIf=\"field().configData?.suffix\"> {{field().configData?.suffix}} </span>\r\n</mat-form-field>\r\n<div *ngIf=\"field().configData?.isShowTagAs\">\r\n <span class=\"checkbox-tag\">Tag as:</span>\r\n <span *ngFor=\"let option of field()?.options\" class=\"checkbox\">\r\n <mat-checkbox class=\"optional-checkbox\">\r\n {{ option.label }}\r\n </mat-checkbox>\r\n </span>\r\n</div>\r\n<div *ngIf=\"field().configData?.infoMessage\">\r\n <span class=\"below-input-text\">{{field().configData?.infoMessage}}</span>\r\n</div>\r\n", styles: [".field-lable{font-size:12px!important;font-weight:700!important;color:#444!important;margin-bottom:0!important}.right-input-text{font-weight:400;font-size:12px;color:#696969}.error-message{color:red}.checkbox-tag{font-size:10px;font-weight:700;color:#444;margin-right:5px}.checkbox{padding:4px 8px 3px 0;background:#f5f5f5;border-radius:4px;margin-right:8px}*{font-family:mulish!important}.optional-checkbox.mat-mdc-checkbox label{font-size:10px!important;font-weight:700!important;color:#444!important;padding:0!important;margin-bottom:2px}.optional-checkbox .mdc-checkbox{flex:0 0 12px!important}.optional-checkbox,.mdc-checkbox__background{transform:translate(-2px,-1px)}.below-input-text{font-weight:400;font-size:12px;color:#444;font-family:Mulish}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mat-mdc-notch-piece{border-color:var(--custom-border-color-focus, #ffbb00)!important;border-width:var(--custom-border-width-focus, 1.5px)!important}::ng-deep .mat-mdc-form-field{background-color:var(--custom-bg-color, #ffffff)!important;border-radius:var(--custom-border-radius , 4px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing{border-color:var(--custom-border-color-hover, #ffbb00)!important;border-width:var(--custom-border-width-hover, 1.5px)!important}::ng-deep .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color, #dddddd)!important;border-width:var(--custom-border-width, 1.5px)!important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-text-field__input{caret-color:var(--custom-caret-color, #ffbb00)!important;font-size:12px!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important;color:var(--custom-font-color, #444444)!important}::ng-deep .mat-form-field-invalid .mdc-text-field--outlined .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field.mat-form-field-disabled{background:var(--custom-bg-color-disabled, #ECECEC)!important}::ng-deep .mdc-text-field--outlined.mdc-text-field--disabled .mdc-text-field__input{color:var(--custom-font-color-disabled, #999999)!important;font-size:12px!important}::ng-deep .mdc-label{color:var(--custom-font-color, #444)!important;font-size:var(--custom-font-size, 16px)!important;font-weight:var(--custom-font-weight, 400)!important;font-family:var(--custom-font-family, \"Mulish\")!important}::placeholder{color:#8f8f8f!important;font-size:12px!important}::ng-deep .mat-mdc-form-field-hint-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error-wrapper{padding:0!important}::ng-deep .mat-mdc-form-field-error{color:#e00!important;font-size:12px;font-weight:500;font-family:Mulish!important;letter-spacing:0}::ng-deep .mdc-text-field--outlined{--mdc-outlined-text-field-container-shape: var(--custom-border-radius , 4px) !important}::ng-deep .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--invalid .mat-mdc-notch-piece{border-color:var(--custom-border-color-error, red)!important;border-width:var(--custom-border-width-error, 1.5px)!important}::ng-deep .mat-mdc-form-field-subscript-wrapper{display:none!important}.ms-1{width:12px!important;height:12px!important}\n"] }]
|
|
1767
1883
|
}] });
|
|
1768
1884
|
|
|
1769
1885
|
class OtpMobNumberComponent {
|
|
@@ -2933,17 +3049,17 @@ class ToggleButtonComponent {
|
|
|
2933
3049
|
useExisting: ToggleButtonComponent,
|
|
2934
3050
|
multi: true,
|
|
2935
3051
|
},
|
|
2936
|
-
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n @if(reactiveFormControlobject()) {\r\n
|
|
3052
|
+
], ngImport: i0, template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n @if(reactiveFormControlobject()) {\r\n <mat-button-toggle-group [ngStyle]=\"{\r\n '--toggle-button-width': field()?.controlStyle?.width ,\r\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\r\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\r\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\r\n @for (data of field()?.configData?.options; track $index) {\r\n <mat-button-toggle [value]=\"data.value\">\r\n <img *ngIf=\"data.imgUrl\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\r\n {{ data.label }}\r\n </mat-button-toggle>\r\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n <span class=\"second-box\">\r\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\r\n <span>{{ data.toggleTopText }}</span>\r\n </span>\r\n </div>\r\n }\r\n </mat-button-toggle-group>\r\n }@else {\r\n <mat-button-toggle-group [ngStyle]=\"{\r\n '--toggle-button-width': field()?.controlStyle?.width ,\r\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\r\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\r\n (change)=\"onSelectionChange($event.value)\">\r\n @for (data of field()?.configData?.options; track $index) {\r\n <mat-button-toggle [value]=\"data.value\">\r\n {{ data.label }}\r\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\r\n <img [src]=\"field().configData?.options[0].imgUrl\" />\r\n </span>\r\n <ng-template #HtmlContent>\r\n <span [innerHTML]=\"field().configData?.options[0].tooltipText\"></span>\r\n </ng-template>\r\n </mat-button-toggle>\r\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n <span class=\"second-box\">\r\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\r\n <span>{{ data.toggleTopText }}</span>\r\n </span>\r\n </div>\r\n }\r\n </mat-button-toggle-group>\r\n }\r\n</div>", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"], dependencies: [{ kind: "ngmodule", type: MatButtonToggleModule }, { kind: "directive", type: i1$3.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i1$3.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1$1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CustomizedTooltipDirective, selector: "[appTooltipTemplate]", inputs: ["appTooltipTemplate"] }] });
|
|
2937
3053
|
}
|
|
2938
3054
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: ToggleButtonComponent, decorators: [{
|
|
2939
3055
|
type: Component,
|
|
2940
|
-
args: [{ selector: 'lib-toggle-button', standalone: true, imports: [MatButtonToggleModule, CommonModule, ReactiveFormsModule, FormsModule], providers: [
|
|
3056
|
+
args: [{ selector: 'lib-toggle-button', standalone: true, imports: [MatButtonToggleModule, CommonModule, ReactiveFormsModule, FormsModule, CustomizedTooltipDirective], providers: [
|
|
2941
3057
|
{
|
|
2942
3058
|
provide: NG_VALUE_ACCESSOR,
|
|
2943
3059
|
useExisting: ToggleButtonComponent,
|
|
2944
3060
|
multi: true,
|
|
2945
3061
|
},
|
|
2946
|
-
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n @if(reactiveFormControlobject()) {\r\n
|
|
3062
|
+
], template: "<div style=\"position: relative\" [ngClass]=\"field()?.cssClass\">\r\n @if(reactiveFormControlobject()) {\r\n <mat-button-toggle-group [ngStyle]=\"{\r\n '--toggle-button-width': field()?.controlStyle?.width ,\r\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\r\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [value]=\"selectedValue\"\r\n (change)=\"onSelectionChange($event.value)\" [formControl]=\"reactiveFormControlobject()\">\r\n @for (data of field()?.configData?.options; track $index) {\r\n <mat-button-toggle [value]=\"data.value\">\r\n <img *ngIf=\"data.imgUrl\" [src]=\"data.imgUrl\" alt=\"\" class=\"toggle-img mx-1\" />\r\n {{ data.label }}\r\n </mat-button-toggle>\r\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n <span class=\"second-box\">\r\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\r\n <span>{{ data.toggleTopText }}</span>\r\n </span>\r\n </div>\r\n }\r\n </mat-button-toggle-group>\r\n }@else {\r\n <mat-button-toggle-group [ngStyle]=\"{\r\n '--toggle-button-width': field()?.controlStyle?.width ,\r\n }\" name=\"fontStyle\" class=\"custom-mat-toggle\" aria-label=\"Font Style\"\r\n *ngIf=\"field() && field()?.isVisible && field()?.configData?.options\" [(ngModel)]=\"selectedValue\"\r\n (change)=\"onSelectionChange($event.value)\">\r\n @for (data of field()?.configData?.options; track $index) {\r\n <mat-button-toggle [value]=\"data.value\">\r\n {{ data.label }}\r\n <span [appTooltipTemplate]=\"HtmlContent\" arrowPosition=\"left\" tooltipPosition=\"bottom\">\r\n <img [src]=\"field().configData?.options[0].imgUrl\" />\r\n </span>\r\n <ng-template #HtmlContent>\r\n <span [innerHTML]=\"field().configData?.options[0].tooltipText\"></span>\r\n </ng-template>\r\n </mat-button-toggle>\r\n <div class=\"top-green-card\" *ngIf=\"data.toggleTopText\">\r\n <span class=\"second-box\">\r\n <img class=\"green-card-img\" *ngIf=\"data.topImage\" [src]=\"data.topImage\" alt=\"\" />\r\n <span>{{ data.toggleTopText }}</span>\r\n </span>\r\n </div>\r\n }\r\n </mat-button-toggle-group>\r\n }\r\n</div>", styles: [":host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{border-radius:50px}:host ::ng-deep .mat-button-toggle-appearance-standard .mat-button-toggle-label-content{height:32px!important;transform:translateY(-9px);font-size:12px;font-weight:400;color:#444;letter-spacing:1px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-button{background:#fff!important;border-radius:50px!important;box-shadow:0 0 15px #00000014!important;height:32px;padding:0 24px;border:1px solid #ffbb00}:host ::ng-deep .mat-button-toggle-button{padding:0 24px}:host ::ng-deep .mat-button-toggle-checked .mat-button-toggle-label-content{font-weight:600!important;letter-spacing:1px}:host ::ng-deep .mat-button-toggle .mat-pseudo-checkbox{display:none}:host ::ng-deep .mat-button-toggle-standalone.mat-button-toggle-appearance-standard,.mat-button-toggle-group-appearance-standard{border:1px solid #ddd!important;background:#f5f5f5!important;height:33px}:host ::ng-deep .mat-button-toggle-group-appearance-standard .mat-button-toggle-appearance-standard+.mat-button-toggle-appearance-standard{border:none!important}:host ::ng-deep .mat-button-toggle-appearance-standard.mat-button-toggle-checked{background:#f5f5f5!important;border-radius:50px}.toggle-img{width:12px}:host ::ng-deep .mat-button-toggle-standalone,.mat-button-toggle-group{overflow:unset!important}.second-box{position:relative;top:-4px}.top-green-card{font-size:10px;font-weight:800;color:#fff;background:#169f7d;border-top-left-radius:999px;border-top-right-radius:999px;position:absolute;right:3em;padding:2px 16px 2px 12px;transform:translate(5px,-19px);z-index:99999;height:18px}.green-card-img{width:14.86px;margin-bottom:6px}:host ::ng-deep .mat-button-toggle-button{width:var(--toggle-button-width , 100%)!important}\n"] }]
|
|
2947
3063
|
}], propDecorators: { selectionChanged: [{
|
|
2948
3064
|
type: Output
|
|
2949
3065
|
}], change: [{
|