@rangertechnologies/ngnxt 2.1.89 → 2.1.91

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/esm2022/lib/components/custom-table/custom-table.component.mjs +236 -71
  2. package/esm2022/lib/components/search-box/search-box.component.mjs +30 -2
  3. package/esm2022/lib/pages/booklet/booklet.component.mjs +2 -1
  4. package/esm2022/lib/pages/builder/element/element.component.mjs +3 -3
  5. package/esm2022/lib/pages/builder/properties/properties.component.mjs +2 -2
  6. package/esm2022/lib/pages/questionbook/questionbook.component.mjs +8 -3
  7. package/esm2022/lib/pages/questionnaire/questionnaire.component.mjs +1 -1
  8. package/fesm2022/rangertechnologies-ngnxt.mjs +277 -78
  9. package/fesm2022/rangertechnologies-ngnxt.mjs.map +1 -1
  10. package/lib/components/custom-table/custom-table.component.d.ts +25 -3
  11. package/lib/components/search-box/search-box.component.d.ts +4 -1
  12. package/lib/pages/questionbook/questionbook.component.d.ts +1 -0
  13. package/package.json +1 -1
  14. package/rangertechnologies-ngnxt-2.1.91.tgz +0 -0
  15. package/src/lib/style.css +1 -0
  16. package/rangertechnologies-ngnxt-2.1.89.tgz +0 -0
package/esm2022/lib/pages/builder/properties/properties.component.mjs CHANGED
@@ -448,11 +448,11 @@ export class PropertiesComponent {
448
448
  this.formButtonHandler.emit(this.formBuilderService.downloadElement());
449
449
  }
450
450
  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 });
451
- static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, 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 <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"properties\">\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-weight\"\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 \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 type=\"checkbox\"/>\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\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)=\"handleButtonClick()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;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:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;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:100px;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"] }] });
451
+ static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: PropertiesComponent, selector: "app-properties", inputs: { selectedElementType: "selectedElementType" }, outputs: { formButtonHandler: "formButtonHandler" }, 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 <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"properties\">\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-weight\"\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 \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 type=\"checkbox\"/>\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\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)=\"handleButtonClick()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".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:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;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"] }] });
452
452
  }
453
453
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: PropertiesComponent, decorators: [{
454
454
  type: Component,
455
- args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"properties\">\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-weight\"\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 \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 type=\"checkbox\"/>\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\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)=\"handleButtonClick()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".all-properties{padding:0;background-color:#f8fafc;position:relative;max-height:639px;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:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;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:100px;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"] }]
455
+ args: [{ selector: 'app-properties', template: "<!-- AP 22JAN25 - Field and Element Properties -->\r\n<!-- properties.component.html -->\r\n <link href=\"https://fonts.googleapis.com/css?family=Roboto:300,400,500&display=swap\" rel=\"stylesheet\">\r\n <div class=\"properties\">\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-weight\"\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 \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 type=\"checkbox\"/>\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\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)=\"handleButtonClick()\">Save</button>\r\n </div>\r\n</details>\r\n</div>\r\n</div>\r\n", styles: [".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:-74px;width:124px;color:#b8b8b8}.toggle-item2{width:100px;position:relative;top:-44px;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"] }]
456
456
  }], ctorParameters: () => [{ type: i1.HttpClient }, { type: i2.FormBuilderService }], propDecorators: { colorWheel: [{
457
457
  type: ViewChild,
458
458
  args: ['colorWheel']