@rangertechnologies/ngnxt 2.1.84 → 2.1.85
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/components/pick-location/pick-location.component.mjs +33 -5
- package/esm2022/lib/pages/builder/element/element.component.mjs +5 -3
- package/esm2022/lib/pages/builder/properties/properties.component.mjs +2 -2
- package/esm2022/lib/services/data.service.mjs +3 -3
- package/fesm2022/rangertechnologies-ngnxt.mjs +40 -10
- package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
- package/lib/components/pick-location/pick-location.component.d.ts +5 -3
- package/package.json +1 -1
- package/rangertechnologies-ngnxt-2.1.85.tgz +0 -0
- package/rangertechnologies-ngnxt-2.1.84.tgz +0 -0
|
@@ -466,11 +466,11 @@ export class PropertiesComponent {
|
|
|
466
466
|
});
|
|
467
467
|
}
|
|
468
468
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, deps: [{ token: i1.HttpClient }, { token: i2.FormBuilderService }], target: i0.ɵɵFactoryTarget.Component });
|
|
469
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;width:25%;top:70px}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
469
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, viewQueries: [{ propertyName: "colorWheel", first: true, predicate: ["colorWheel"], descendants: true }], ngImport: i0, template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i4.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { 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.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
470
470
|
}
|
|
471
471
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
|
|
472
472
|
type: Component,
|
|
473
|
-
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;width:25%;top:70px}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
|
|
473
|
+
args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n<div class=\"container\">\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n<!-- Design Header Section -->\r\n<div class=\"design-header\">\r\n <h1 class=\"header-title\">Element Properties</h1>\r\n <div class=\"menu-container\">\r\n <div class=\"menu-item\" (click)=\"download()\">\r\n <span >Download</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Start</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Path</span>\r\n </div>\r\n <div class=\"menu-item\">\r\n <span>Clone</span>\r\n </div>\r\n </div>\r\n</div>\r\n\r\n<!-- properties.component.html -->\r\n<div class=\"all-properties\">\r\n <div *ngIf=\"errorMessage\" class=\"error-message\">\r\n {{ errorMessage }}\r\n </div>\r\n <!-- Element Properties -->\r\n <details class=\"first-properties\" open>\r\n <summary class=\"text-sm \">Elements Properties</summary>\r\n <div class=\"inner-content\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().elementProps\">\r\n <div class=\"flex-items-center\">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"label-properties\">\r\n <!-- Text Input -->\r\n <input *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [class.read-only]=\"selectedElement.readOnly\"\r\n [readonly]=\"selectedElement.readOnly\"\r\n class=\"text-sm1 \"\r\n />\r\n <div *ngIf=\"prop.key === 'helpText' && selectedElement.helpText\" class=\"help-text\">\r\n {{ selectedElement.helpText }}\r\n </div>\r\n\r\n\r\n <!-- Font Selection -->\r\n<div *ngIf=\"prop.key === 'font'\" class=\"font-selection\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'font'\"\r\n class=\"font-selection1\"\r\n [value]=\"selectedElement?.font\"\r\n (change)=\"updateProperty('font', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option\">\r\n {{ option }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n<!-- file -->\r\n<!-- Add this inside the elementProps loop where other inputs are rendered -->\r\n<select *ngIf=\"prop.type === 'select' && prop.key === 'supportType'\"\r\n class=\"file \"\r\n[value]=\"selectedElement[prop.key]\"\r\n(change)=\"updateProperty(prop.key, $event.target.value)\">\r\n<option value=\"\">Select file category</option>\r\n<option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n{{ option.label }}\r\n</option>\r\n</select>\r\n\r\n<!-- Font Weight Selection -->\r\n<div *ngIf=\"prop.key === 'fontWeight'\" class=\"font-weight\">\r\n <!-- <label>{{ prop.label }}</label> -->\r\n <select\r\n *ngIf=\"prop.type === 'select' && prop.key === 'fontWeight'\"\r\n class=\"font-weight1 \"\r\n [value]=\"selectedElement?.fontWeight\"\r\n (change)=\"updateProperty('fontWeight', $event.target.value)\">\r\n <option *ngFor=\"let option of prop.options\" [value]=\"option.value\">\r\n {{ option.label }}\r\n </option>\r\n </select>\r\n</div>\r\n\r\n <!-- Number Input with Unit -->\r\n <div *ngIf=\"prop.type === 'number'\" class=\"size-controls\">\r\n <div class=\"size-input-group\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n [min]=\"prop.min || 1\"\r\n [max]=\"prop.max || 999999\"\r\n class=\"size-value\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n </div>\r\n\r\n <!-- Toggle Group -->\r\n<!-- Toggle Group -->\r\n<div *ngIf=\"prop.type === 'toggleGroup'\" class=\"toggle-group\">\r\n<div class=\"toggle-item1\">\r\n <span class=\"toggle-label\">Read Only</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.readOnly\"\r\n (change)=\"onToggleChange('readOnly', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n\r\n<div class=\"toggle-item2\">\r\n <span class=\"toggle-label\">Is Hide</span>\r\n <label class=\"switch\">\r\n <input\r\n type=\"checkbox\"\r\n [checked]=\"selectedElement?.isHide\"\r\n (change)=\"onToggleChange('isHide', $event)\"\r\n />\r\n <span class=\"slider\"></span>\r\n </label>\r\n</div>\r\n</div>\r\n\r\n <!-- Text Align Buttons -->\r\n <div *ngIf=\"prop.type === 'align'\"class=\"font-align\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onAlignSelect(option.value)\"\r\n [class.active]=\"selectedElement?.textAlign === option.value\"\r\n class=\"align-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.key === 'size'\" class=\"size-controls\">\r\n <label>{{ prop.label }}</label>\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement[prop.key]\"\r\n (input)=\"updateProperty(prop.key, $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"size-unit\">{{ prop.unit }}</span>\r\n </div>\r\n\r\n\r\n <div *ngIf=\"prop.type === 'style'\" class=\"font-style\">\r\n <button\r\n *ngFor=\"let option of prop.options\"\r\n (click)=\"onStyleSelect(option.value)\"\r\n [class.active]=\"isStyleActive(option.value)\"\r\n class=\"style-btn\"\r\n [title]=\"option.value\"\r\n >\r\n <img\r\n [src]=\"'../assets/icons/' + option.icon + '.svg'\"\r\n [alt]=\"option.value\"\r\n class=\"icon-size\"\r\n />\r\n </button>\r\n </div>\r\n\r\n<!-- Field Size Controls -->\r\n<div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Width</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.width\"\r\n (input)=\"updateProperty('width', $event.target.value)\"\r\n class=\"size-input\"\r\n\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n\r\n <div *ngIf=\"prop.key === 'fieldSize'\" class=\"field-size-controls\">\r\n <div class=\"size-group\">\r\n <label class=\"size-label\">Height</label>\r\n <div class=\"value-container\">\r\n <input\r\n type=\"number\"\r\n [value]=\"selectedElement?.height\"\r\n (input)=\"updateProperty('height', $event.target.value)\"\r\n class=\"size-input\"\r\n />\r\n <span class=\"unit\">PX</span>\r\n </div>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </details>\r\n\r\n <!-- Field Elements Properties -->\r\n<details class=\"second-property\">\r\n <summary class=\"text-font-medium\">Field Elements Properties</summary>\r\n <div class=\"space-y-4\" *ngIf=\"getProperties()\">\r\n <ng-container *ngFor=\"let prop of getProperties().fieldProps\">\r\n <div class=\"flex-items-center \">\r\n <label class=\"text-sm\">{{ prop.label }}</label>\r\n <div class=\"input-box-field\">\r\n <!-- Input Box -->\r\n <input\r\n *ngIf=\"prop.type === 'text'\"\r\n type=\"text\"\r\n [placeholder]=\"prop.placeholder\"\r\n class=\"field-input\"\r\n />\r\n <!-- Radio Group -->\r\n<div *ngIf=\"prop.type === 'radio'\" class=\"radio-item\">\r\n\r\n\r\n <div class=\"sizes\">\r\n <div class=\"flex-gap\">\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"selectedElement.required\"\r\n (change)=\"onRequiredChange(true)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-label\"\r\n >\r\n Required\r\n </label>\r\n </div>\r\n <div class=\"flex-items\">\r\n <input\r\n type=\"radio\"\r\n [checked]=\"!selectedElement.required\"\r\n (change)=\"onRequiredChange(false)\"\r\n name=\"required\"\r\n class=\"radio-input\"\r\n />\r\n <label\r\n class=\"text-sm text-gray-400\"\r\n >\r\n Not Required\r\n </label>\r\n </div>\r\n </div>\r\n</div>\r\n</div>\r\n <!-- Chk Options Group -->\r\n <div *ngIf=\"prop.type === 'optionsGroup'\" class=\"options-container\">\r\n <div\r\n *ngFor=\"let option of prop.options; let i = index\"\r\n class=\"option-items\"\r\n >\r\n <!-- Option Input -->\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].label\"\r\n placeholder=\"Option {{ i + 1 }}\"\r\n class=\"options\"\r\n />\r\n <input\r\n type=\"text\"\r\n [(ngModel)]=\"prop.options[i].value\"\r\n placeholder=\"Value\"\r\n class=\"values\"\r\n />\r\n <!-- Remove Button -->\r\n <div class=\"remove\">\r\n <img src=\"../assets/icons/Trash.svg\" (click)=\"removeOption(prop.options, i)\"></div>\r\n </div>\r\n <!-- Add Button -->\r\n <button\r\n type=\"button\"\r\n class=\"add-btn\"\r\n (click)=\"addOption(prop.options)\"\r\n >\r\n <div class=\"add-varient\">\r\n <span class=\"text-lg\">+</span>\r\n <span>Add Variants</span></div>\r\n </button>\r\n</div>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n <div class=\"design-footer\">\r\n <button class=\"btn\">Cancel</button>\r\n <button class=\"btn\" (click)=\"save()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n\r\n\r\n</div>\r\n", styles: [".container{position:absolute;right:0;top:0;width:25%}.all-properties{padding:0;margin:-32px -13px 0 0;background-color:#f8fafc;position:relative;top:3px;max-height:549px;overflow-y:auto}.first-properties{padding-top:16px;padding-left:15px}details summary{font-weight:700;color:#1b1b43;cursor:pointer}details[open] summary{padding-bottom:5px;margin-bottom:1rem}label{flex:0 0 120px;color:#b8b8b8;font-size:.875rem;font-weight:500;margin:0;padding:0}input,select{flex:1;background-color:#eaedf1;color:#bebfbf;border-radius:.375rem;padding:.5rem;font-size:.875rem;width:100%;box-sizing:border-box;transition:border-color .2s}input:focus,select:focus{border-color:#1b1b43;outline:none}button{background-color:#eaedf1;color:#6b7280;border:1px solid #D1D5DB;border-radius:.375rem;padding:.5rem;cursor:pointer;transition:all .2s}button:hover{background-color:#e5e7eb}button.selected{background-color:#0b1f34;color:#fff;border-color:#1e90ff}.color-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:50px;height:50px;background-color:transparent;border:none;cursor:pointer}.color-input::-webkit-color-swatch,.color-input::-moz-color-swatch{border-radius:5px;border:none}.inner-content{position:relative;left:30px;width:90%}.label-properties{position:relative;top:-12px;left:-37px}.required-indicator{color:red;margin-left:4px}.toggle-item1{position:relative;left:-94px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-24px;left:84px;color:#b8b8b8}.flex-gap-1{display:flex;grid-template-columns:repeat(4,auto)}.help-text,.error-message{font-size:12px;margin-top:4px}.help-text{color:#666}.error-message{color:#ef4444}.read-only{background-color:#f5f5f5;cursor:not-allowed}.font-selection,.font-weight{width:190px}.design-header{padding:17px;background-color:#fff;margin-bottom:2rem}.header-title{font-size:16px;font-weight:500;text-align:center;margin:0 0 20px 5px}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px}.menu-item{flex:1;text-align:center;padding:7px;cursor:pointer;transition:all .3s ease;border-right:2px solid #e9ecef}.menu-item span{color:#656f7b;font-size:1rem}.menu-container{display:flex;justify-content:space-between;max-width:800px;margin:0 auto;background-color:#f8f9fa;border-radius:8px;padding:.5rem}.menu-item{flex:1;text-align:center;padding:m;cursor:pointer;transition:all .3s ease;border-right:1px solid #e9ecef}.menu-item:last-child{border-right:none}.menu-item:hover{background-color:#e9ecef;border-radius:4px}.menu-item span{color:#495057;font-size:1rem}.switch{position:relative;display:inline-block;width:40px;height:24px;right:-20px;margin:0 8px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:\"\";height:16px;width:16px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#2196f3}input:checked+.slider:before{transform:translate(16px)}.font-align{display:flex;gap:2px}.align-btn,.style-btn{width:36px;height:36px;background:#f3f4f6;border:1px solid #e5e7eb;border-radius:4px;cursor:pointer;transition:all .2s}.align-btn:hover,.style-btn:hover{background:#e5e7eb}.align-btn.active,.style-btn.active{background:#202e3a;color:#fff;border-color:#4b5563}.align-btn.active img,.style-btn.active img{filter:brightness(0) invert(1)}.icon-size{width:16px;height:16px}.button-group{display:flex;gap:4px;padding:4px;background:#f9fafb;border-radius:6px}.field-size-controls{display:flex;flex-direction:row;position:relative;gap:13px;font-family:Arial,sans-serif}.size-group{display:flex;align-items:center}.size-label{font-size:15px;color:#000}.value-container{display:flex;height:43px;align-items:center;background-color:#f5f5f5;border-radius:11px;position:relative;right:74px}.font-style{display:flex;gap:1px}.size-input{font-size:15px;border:none;background:transparent;width:46px;text-align:center;outline:none}.size-input:focus{outline:none}.unit{font-size:13px;width:22px;color:#00000080}.file-upload-container{position:relative;margin-bottom:1rem}.file-upload-container input[type=file]{margin-top:.5rem}.text-font-medium{padding-left:15px;padding-bottom:20px}.options-container{display:flex;flex-direction:column;gap:.5rem}.option-item{display:flex;align-items:center;gap:1rem}.option-items{display:flex;gap:20px}.options{width:69px}.values{width:49px}.remove{width:34px;border-radius:50px;height:35px;background-color:#f7eff0}.remove img{position:relative;top:6px;left:9px}.add-btn{background:none;border:none;font-size:1rem;cursor:pointer;display:flex;align-items:center;width:328px;position:relative;right:123px;background-color:#f1f4f7}.add-btn:hover{color:#3182ce}.text-lg{border:1px solid gray;width:22px;border-radius:5px}.add-varient{display:flex;gap:13px;position:relative;left:101px}input{border:1px solid #ccc;padding:.5rem;border-radius:.25rem;width:100%}.space-y-4{position:relative;left:28px}.flex-items-center{display:flex;position:relative;top:2px;margin-bottom:28px}.input-box-field{width:207px}.text-sm{height:30px}.radio-item{position:relative;left:-5px}.flex-gap{display:flex;gap:18px}.design-footer{display:flex;justify-content:center;gap:30px;background-color:#f1f4f7}.btn{width:110px;color:#fff;margin-top:20px;margin-bottom:20px;background-color:#a5adbc}.btn:hover{background-color:#2196f3;color:#fff}\n"] }]
|
|
474
474
|
}], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.FormBuilderService }], propDecorators: { colorWheel: [{
|
|
475
475
|
type: ViewChild,
|
|
476
476
|
args: ['colorWheel']
|
|
@@ -15,8 +15,8 @@ export class DataService {
|
|
|
15
15
|
const headers = new HttpHeaders().set('Authorization', `${tkn}`);
|
|
16
16
|
headers.append('Accept', 'application/json');
|
|
17
17
|
headers.append('Access-Control-Allow-Origin', '*');
|
|
18
|
-
//
|
|
19
|
-
this.http.get('https://dev-api.
|
|
18
|
+
// MR 23JAN24 - This should be removed, for now testing with dev-hse-api
|
|
19
|
+
this.http.get('https://dev-hse-api.rangerfusion.com/nxt/api/process/?dataType=' + params[0] + '&operation=' + params[1] + '¶m=' + params[2], { headers: headers, observe: 'response' })
|
|
20
20
|
.subscribe(response => {
|
|
21
21
|
if (response.status == 200) {
|
|
22
22
|
resolve(response.body);
|
|
@@ -77,4 +77,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImpo
|
|
|
77
77
|
}], ctorParameters: () => [{ type: i1.HttpClient, decorators: [{
|
|
78
78
|
type: Optional
|
|
79
79
|
}] }] });
|
|
80
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
80
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGF0YS5zZXJ2aWNlLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvbnh0LWFwcC9zcmMvbGliL3NlcnZpY2VzL2RhdGEuc2VydmljZS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsVUFBVSxFQUFFLFFBQVEsRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNyRCxPQUFPLEVBQWMsV0FBVyxFQUFjLE1BQU0sc0JBQXNCLENBQUM7OztBQU0zRSxNQUFNLE9BQU8sV0FBVztJQUVVO0lBRGhDLDRDQUE0QztJQUM1QyxZQUFnQyxJQUFnQjtRQUFoQixTQUFJLEdBQUosSUFBSSxDQUFZO0lBQUksQ0FBQztJQUU5QyxVQUFVLENBQUMsR0FBVyxFQUMzQixNQUFnQixFQUNoQixPQUFPLEVBQ1AsTUFBTSxFQUNOLE1BQVk7UUFDVixPQUFPLENBQUMsR0FBRyxDQUFDLG9DQUFvQyxHQUFHLEdBQUcsQ0FBQyxDQUFDO1FBQ3hELE1BQU0sSUFBSSxHQUFHLElBQUksQ0FBQztRQUVsQiw0QkFBNEI7UUFDNUIsTUFBTSxPQUFPLEdBQUcsSUFBSSxXQUFXLEVBQUUsQ0FBQyxHQUFHLENBQUMsZUFBZSxFQUFFLEdBQUcsR0FBRyxFQUFFLENBQUMsQ0FBQztRQUNqRSxPQUFPLENBQUMsTUFBTSxDQUFDLFFBQVEsRUFBRSxrQkFBa0IsQ0FBQyxDQUFDO1FBQzdDLE9BQU8sQ0FBQyxNQUFNLENBQUMsNkJBQTZCLEVBQUUsR0FBRyxDQUFDLENBQUM7UUFFbkQsd0VBQXdFO1FBQ3hFLElBQUksQ0FBQyxJQUFJLENBQUMsR0FBRyxDQUFDLGlFQUFpRSxHQUFHLE1BQU0sQ0FBQyxDQUFDLENBQUMsR0FBRyxhQUFhLEdBQUcsTUFBTSxDQUFDLENBQUMsQ0FBQyxHQUFHLFNBQVMsR0FBRyxNQUFNLENBQUMsQ0FBQyxDQUFDLEVBQUUsRUFBRSxPQUFPLEVBQUUsT0FBTyxFQUFHLE9BQU8sRUFBRSxVQUFVLEVBQUUsQ0FBQzthQUN6TCxTQUFTLENBQUMsUUFBUSxDQUFDLEVBQUU7WUFDcEIsSUFBRyxRQUFRLENBQUMsTUFBTSxJQUFJLEdBQUcsRUFBRSxDQUFDO2dCQUMxQixPQUFPLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3pCLENBQUM7aUJBQU0sQ0FBQztnQkFDTixNQUFNLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxDQUFDO1lBQ3hCLENBQUM7UUFDSCxDQUFDLEVBQUUsS0FBSyxDQUFDLEVBQUU7WUFDVCxPQUFPLENBQUMsR0FBRyxDQUFDLEtBQUssQ0FBQyxNQUFNLENBQUMsQ0FBQztZQUMxQixNQUFNLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDaEIsQ0FBQyxDQUFDLENBQUM7SUFDVCxDQUFDO0lBRUQsc0JBQXNCO0lBQ2YsY0FBYyxDQUFDLFFBQWdCLEVBQUUsU0FBaUIsRUFBRSxNQUFjLEVBQUMsTUFBYyxFQUFDLEdBQVU7UUFDakcsTUFBTSxNQUFNLEdBQUcsR0FBRyxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLDJCQUEyQixDQUFDO1FBQ3ZELE9BQU8sQ0FBQyxHQUFHLENBQUMsd0JBQXdCLENBQUMsQ0FBQztRQUN0QyxnQ0FBZ0M7UUFDaEMsK0JBQStCO1FBQy9CLGlDQUFpQztRQUNqQywyQkFBMkI7UUFDM0IsMEJBQTBCO1FBRTFCLElBQUksSUFBSSxHQUFHO1lBQ1QsVUFBVSxFQUFFLFFBQVE7WUFDcEIsV0FBVyxFQUFFLFNBQVM7WUFDdEIsUUFBUSxFQUFFLE1BQU07WUFDaEIsUUFBUSxFQUFHLE1BQU07U0FDbEIsQ0FBQTtRQUNELE9BQU8sSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQU0sTUFBTSxFQUFDLElBQUksQ0FBRSxDQUFDO0lBRTNDLENBQUM7SUFHSCwwREFBMEQ7SUFDbkQsUUFBUSxDQUFDLE9BQVcsRUFBRSxNQUFhO1FBQ3hDLE1BQU0sU0FBUyxHQUFHLE9BQU8sQ0FBQztRQUMxQixJQUFJLElBQUksR0FBRyxNQUFNLENBQUMsS0FBSyxDQUFDLEdBQUcsQ0FBQyxDQUFDO1FBQzdCLEtBQUksSUFBSSxDQUFDLEdBQUMsQ0FBQyxFQUFFLENBQUMsR0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLENBQUMsRUFBRSxFQUFDLENBQUM7WUFDL0IsSUFBSSxTQUFTLEdBQUcsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQztZQUNuQyxJQUFHLFNBQVMsQ0FBQyxNQUFNLEtBQUssQ0FBQyxFQUFDLENBQUM7Z0JBQ3pCLE9BQU8sR0FBRyxPQUFPLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxDQUFDLElBQUksRUFBUyxDQUFDO1lBQzFDLENBQUM7aUJBQU0sQ0FBQztnQkFDTixJQUFJLEtBQUssR0FBRyxNQUFNLENBQUMsU0FBUyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxHQUFHLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDO2dCQUMvQyxPQUFPLEdBQUcsT0FBTyxDQUFDLFNBQVMsQ0FBQyxDQUFDLENBQUMsQ0FBQyxDQUFDLEtBQUssQ0FBQyxJQUFLLEVBQVMsQ0FBQztZQUN2RCxDQUFDO1FBQ0gsQ0FBQztRQUNELE9BQU8sT0FBTyxDQUFDO0lBQ2pCLENBQUM7SUFFRCwwQkFBMEI7SUFDakIsV0FBVyxDQUFDLFFBQWdCO1FBQ2pDLE9BQU8sSUFBSSxDQUFDLElBQUksRUFBRSxHQUFHLENBQUMsUUFBUSxDQUFDLENBQUM7SUFDbEMsQ0FBQzt3R0F2RVUsV0FBVzs0R0FBWCxXQUFXLGNBRlYsTUFBTTs7NEZBRVAsV0FBVztrQkFIdkIsVUFBVTttQkFBQztvQkFDVixVQUFVLEVBQUUsTUFBTTtpQkFDbkI7OzBCQUdjLFFBQVEiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBJbmplY3RhYmxlLCBPcHRpb25hbCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xyXG5pbXBvcnQgeyBIdHRwQ2xpZW50LCBIdHRwSGVhZGVycywgSHR0cFBhcmFtcyB9IGZyb20gJ0Bhbmd1bGFyL2NvbW1vbi9odHRwJztcclxuaW1wb3J0IHsgT2JzZXJ2YWJsZSB9IGZyb20gJ3J4anMnO1xyXG5cclxuQEluamVjdGFibGUoe1xyXG4gIHByb3ZpZGVkSW46ICdyb290J1xyXG59KVxyXG5leHBvcnQgY2xhc3MgRGF0YVNlcnZpY2Uge1xyXG4gIC8vIFZEIDIzSkFOMjQgb3B0aW9uYWxseSBkZWNsYXJlZCBodHRwQ2xpZW50XHJcbiAgY29uc3RydWN0b3IoQE9wdGlvbmFsKCkgcHJpdmF0ZSBodHRwOiBIdHRwQ2xpZW50KSB7IH1cclxuXHJcbiAgcHVibGljIGdldEFQSURhdGEodGtuOiBzdHJpbmcsIFxyXG4gICAgcGFyYW1zOiBzdHJpbmdbXSxcclxuICAgIHJlc29sdmUsXHJcbiAgICByZWplY3QsXHJcbiAgICBjb25maWc/OiBhbnkpIHtcclxuICAgICAgY29uc29sZS5sb2coJ2luc2lkZSBEYXRhU2VydmljZS5nZXRBUElEYXRhIGZvciAnICsgdGtuKTtcclxuICAgICAgY29uc3Qgc2VsZiA9IHRoaXM7XHJcblxyXG4gICAgICAvLyBDYWxsIHRoZSBTaGVuZ2VsR28gU2VydmVyXHJcbiAgICAgIGNvbnN0IGhlYWRlcnMgPSBuZXcgSHR0cEhlYWRlcnMoKS5zZXQoJ0F1dGhvcml6YXRpb24nLCBgJHt0a259YCk7XHJcbiAgICAgIGhlYWRlcnMuYXBwZW5kKCdBY2NlcHQnLCAnYXBwbGljYXRpb24vanNvbicpO1xyXG4gICAgICBoZWFkZXJzLmFwcGVuZCgnQWNjZXNzLUNvbnRyb2wtQWxsb3ctT3JpZ2luJywgJyonKTtcclxuXHJcbiAgICAgIC8vIE1SIDIzSkFOMjQgLSBUaGlzIHNob3VsZCBiZSByZW1vdmVkLCBmb3Igbm93IHRlc3Rpbmcgd2l0aCBkZXYtaHNlLWFwaVxyXG4gICAgICB0aGlzLmh0dHAuZ2V0KCdodHRwczovL2Rldi1oc2UtYXBpLnJhbmdlcmZ1c2lvbi5jb20vbnh0L2FwaS9wcm9jZXNzLz9kYXRhVHlwZT0nICsgcGFyYW1zWzBdICsgJyZvcGVyYXRpb249JyArIHBhcmFtc1sxXSArICcmcGFyYW09JyArIHBhcmFtc1syXSwgeyBoZWFkZXJzOiBoZWFkZXJzICwgb2JzZXJ2ZTogJ3Jlc3BvbnNlJyB9KVxyXG4gICAgICAgIC5zdWJzY3JpYmUocmVzcG9uc2UgPT4ge1xyXG4gICAgICAgICAgaWYocmVzcG9uc2Uuc3RhdHVzID09IDIwMCkge1xyXG4gICAgICAgICAgICByZXNvbHZlKHJlc3BvbnNlLmJvZHkpO1xyXG4gICAgICAgICAgfSBlbHNlIHtcclxuICAgICAgICAgICAgcmVqZWN0KHJlc3BvbnNlLmJvZHkpO1xyXG4gICAgICAgICAgfVxyXG4gICAgICAgIH0sIGVycm9yID0+IHtcclxuICAgICAgICAgIGNvbnNvbGUubG9nKGVycm9yLnN0YXR1cyk7XHJcbiAgICAgICAgICByZWplY3QoZXJyb3IpO1xyXG4gICAgICAgIH0pO1xyXG4gIH1cclxuXHJcbiAgLy9jYWxsaW5nIHRoZSBub2RlIGFwaVxyXG4gIHB1YmxpYyBnZXRBUElGcm9tTm9kZShkYXRhVHlwZTogc3RyaW5nLCBvcGVyYXRpb246IHN0cmluZywgcGFyYW0xOiBzdHJpbmcscGFyYW0yOiBzdHJpbmcsYXBpOnN0cmluZyl7XHJcbiAgICBjb25zdCBhcGlVcmwgPSBhcGkgPyBhcGkgOiAnaHR0cDovL2xvY2FsaG9zdDozMDAxL254dCc7XHJcbiAgICBjb25zb2xlLmxvZygnaW5kc2lkZSBkYXRhIHNlcnZpY2UuLicpO1xyXG4gICAgLy8gbGV0IHBhcmFtcyA9IG5ldyBIdHRwUGFyYW1zKClcclxuICAgIC8vICAgLnNldCgnZGF0YVR5cGUnLCBkYXRhVHlwZSlcclxuICAgIC8vICAgLnNldCgnb3BlcmF0aW9uJywgb3BlcmF0aW9uKVxyXG4gICAgLy8gICAuc2V0KCdwYXJhbTEnLCBwYXJhbTEpXHJcbiAgICAvLyAgIC5zZXQoJ3BhcmFtMicscGFyYW0yKVxyXG5cclxuICAgIGxldCBib2R5ID0ge1xyXG4gICAgICBcImRhdGFUeXBlXCIgOmRhdGFUeXBlICxcclxuICAgICAgXCJvcGVyYXRpb25cIiA6b3BlcmF0aW9uICxcclxuICAgICAgXCJwYXJhbTFcIiA6cGFyYW0xLCBcclxuICAgICAgXCJwYXJhbTJcIiA6IHBhcmFtMixcclxuICAgIH1cclxuICAgIHJldHVybiB0aGlzLmh0dHAucG9zdDxhbnk+KGFwaVVybCxib2R5ICk7XHJcblxyXG4gIH1cclxuXHJcbiAgICBcclxuLy8gVkQgMjJNYXkyNCAtZnVudGlvbiB0byAgaGFuZGxpbmcgbXVsdGlwbGUgY2hpbGQgb2JqZWN0c1xyXG5wdWJsaWMgZ2V0VmFsdWUoZWxlbWVudDphbnksIGNvbHVtbjpzdHJpbmcpe1xyXG4gIGNvbnN0IGluaXRpYWxFbCA9IGVsZW1lbnQ7XHJcbiAgbGV0IGZsZHMgPSBjb2x1bW4uc3BsaXQoJy4nKTtcclxuICBmb3IobGV0IGk9MDsgaTxmbGRzLmxlbmd0aDsgaSsrKXtcclxuICAgIGxldCBzcGxpdEZsZHMgPSBmbGRzW2ldLnNwbGl0KCdbJyk7XHJcbiAgICBpZihzcGxpdEZsZHMubGVuZ3RoID09PSAxKXtcclxuICAgICAgZWxlbWVudCA9IGVsZW1lbnRbZmxkc1tpXV0gfHwgJycgYXMgYW55O1xyXG4gICAgfSBlbHNlIHtcclxuICAgICAgbGV0IGluZGV4ID0gTnVtYmVyKHNwbGl0Rmxkc1sxXS5zcGxpdCgnXScpWzBdKTtcclxuICAgICAgZWxlbWVudCA9IGVsZW1lbnRbc3BsaXRGbGRzWzBdXVtpbmRleF0gIHx8ICcnIGFzIGFueTtcclxuICAgIH1cclxuICB9XHJcbiAgcmV0dXJuIGVsZW1lbnQ7XHJcbn1cclxuXHJcbi8vIFZEIDIzSkFOMjQgZ2V0IGNhbGxvdXQgXHJcbiAgcHVibGljIGFwaVJlc3BvbnNlKGVuZHBvaW50OiBzdHJpbmcpOiBPYnNlcnZhYmxlPGFueT4ge1xyXG4gICAgcmV0dXJuIHRoaXMuaHR0cD8uZ2V0KGVuZHBvaW50KTtcclxuICB9XHJcblxyXG59XHJcbiJdfQ==
|