@piserve-tech/form-submission 1.3.7 → 1.3.8

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 (22) hide show
  1. package/esm2022/form-fields/check-box-fields/check-box-fields.component.mjs +2 -2
  2. package/esm2022/form-fields/date-time-fields/date-time-fields.component.mjs +2 -2
  3. package/esm2022/form-fields/drop-down-fields/drop-down-fields.component.mjs +2 -2
  4. package/esm2022/form-fields/file-picker-fields/file-picker-fields.component.mjs +2 -2
  5. package/esm2022/form-fields/location-fields/location-fields.component.mjs +2 -2
  6. package/esm2022/form-fields/mail-fields/mail-fields.component.mjs +2 -2
  7. package/esm2022/form-fields/mobile-fields/mobile-fields.component.mjs +2 -2
  8. package/esm2022/form-fields/number-fields/number-fields.component.mjs +2 -2
  9. package/esm2022/form-fields/password-fields/password-fields.component.mjs +2 -2
  10. package/esm2022/form-fields/radio-button-fields/radio-button-fields.component.mjs +2 -2
  11. package/esm2022/form-fields/rich-text-editor-fields/rich-text-editor-fields.component.mjs +2 -2
  12. package/esm2022/form-fields/selection-matrix-fields/selection-matrix-fields.component.mjs +2 -2
  13. package/esm2022/form-fields/signature-fields/signature-fields.component.mjs +2 -2
  14. package/esm2022/form-fields/slider-fields/slider-fields.component.mjs +2 -2
  15. package/esm2022/form-fields/terms-and-condition-fields/terms-and-condition-fields.component.mjs +2 -2
  16. package/esm2022/form-fields/text-area-fields/text-area-fields.component.mjs +2 -2
  17. package/esm2022/form-fields/text-fields/text-fields.component.mjs +2 -2
  18. package/esm2022/form-fields/toggle-switch-fields/toggle-switch-fields.component.mjs +2 -2
  19. package/esm2022/form-fields/url-fields/url-fields.component.mjs +2 -2
  20. package/fesm2022/piserve-tech-form-submission.mjs +38 -38
  21. package/fesm2022/piserve-tech-form-submission.mjs.map +1 -1
  22. package/package.json +1 -1
package/esm2022/form-fields/check-box-fields/check-box-fields.component.mjs CHANGED
@@ -285,11 +285,11 @@ export class CheckBoxFieldsComponent {
285
285
  !this.selectedOptions.includes(option));
286
286
  }
287
287
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, deps: [{ token: i1.FormService }], target: i0.ɵɵFactoryTarget.Component }); }
288
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"form-check\" *ngFor=\"let option of customOptions\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option.value + question?.id\"\n [name]=\"option.value + 'Checkbox'\"\n [value]=\"option.value\"\n (change)=\"onCheckboxChange(option, $event)\"\n [disabled]=\"isOptionDisabled(option)\"\n [checked]=\"selectedOptions.includes(option)\"\n />\n <label\n class=\"formCheckLabel ms-2 me-4 mb-2\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'OPTION'\"\n >{{ option.value }}</label\n >\n <label\n class=\"formCheckLabel ms-2 me-4\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n >{{ option.label }}</label\n >\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
288
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: CheckBoxFieldsComponent, selector: "lib-check-box-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"form-check\" *ngFor=\"let option of customOptions\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option.value + question?.id\"\n [name]=\"option.value + 'Checkbox'\"\n [value]=\"option.value\"\n (change)=\"onCheckboxChange(option, $event)\"\n [disabled]=\"isOptionDisabled(option)\"\n [checked]=\"selectedOptions.includes(option)\"\n />\n <label\n class=\"formCheckLabel ms-2 me-4 mb-2\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'OPTION'\"\n >{{ option.value }}</label\n >\n <label\n class=\"formCheckLabel ms-2 me-4\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n >{{ option.label }}</label\n >\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }] }); }
289
289
  }
290
290
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CheckBoxFieldsComponent, decorators: [{
291
291
  type: Component,
292
- args: [{ selector: 'lib-check-box-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"form-check\" *ngFor=\"let option of customOptions\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option.value + question?.id\"\n [name]=\"option.value + 'Checkbox'\"\n [value]=\"option.value\"\n (change)=\"onCheckboxChange(option, $event)\"\n [disabled]=\"isOptionDisabled(option)\"\n [checked]=\"selectedOptions.includes(option)\"\n />\n <label\n class=\"formCheckLabel ms-2 me-4 mb-2\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'OPTION'\"\n >{{ option.value }}</label\n >\n <label\n class=\"formCheckLabel ms-2 me-4\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n >{{ option.label }}</label\n >\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"] }]
292
+ args: [{ selector: 'lib-check-box-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"form-check\" *ngFor=\"let option of customOptions\">\n <input\n class=\"form-check-input\"\n type=\"checkbox\"\n [id]=\"option.value + question?.id\"\n [name]=\"option.value + 'Checkbox'\"\n [value]=\"option.value\"\n (change)=\"onCheckboxChange(option, $event)\"\n [disabled]=\"isOptionDisabled(option)\"\n [checked]=\"selectedOptions.includes(option)\"\n />\n <label\n class=\"formCheckLabel ms-2 me-4 mb-2\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'OPTION'\"\n >{{ option.value }}</label\n >\n <label\n class=\"formCheckLabel ms-2 me-4\"\n [for]=\"option.value + question?.id\"\n *ngIf=\"optionType == 'LOOKUP' || 'DATABASE' || 'API'\"\n >{{ option.label }}</label\n >\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.form-check-input,.form-check-label{cursor:pointer}\n"] }]
293
293
  }], ctorParameters: function () { return [{ type: i1.FormService }]; }, propDecorators: { question: [{
294
294
  type: Input
295
295
  }] } });
package/esm2022/form-fields/date-time-fields/date-time-fields.component.mjs CHANGED
@@ -176,11 +176,11 @@ export class DateTimeFieldsComponent {
176
176
  }
177
177
  }
178
178
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, deps: [{ token: i1.DatePipe }], target: i0.ɵɵFactoryTarget.Component }); }
179
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: { question: "question" }, providers: [DatePipe], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepickerYMD"], descendants: true }, { propertyName: "dateRangePicker", first: true, predicate: ["daterangepicker"], descendants: true }, { propertyName: "dateAndTimePicker", first: true, predicate: ["dateAndTimePicker"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\n <!-- Date only picker -->\n <div class=\"input-container\">\n <input\n class=\"form-control height\"\n #datepickerYMD=\"bsDatepicker\"\n bsDatepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{ dateInputFormat: format }\"\n [(ngModel)]=\"selectedDate\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDatePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n <!-- Time picker -->\n <input\n type=\"time\"\n class=\"form-control height\"\n (blur)=\"validateField()\"\n [(ngModel)]=\"selectedTime\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\n <!-- Date and time picker -->\n <div class=\"input-container\">\n <input\n #dateAndTimePicker=\"bsDatepicker\"\n type=\"text\"\n class=\"form-control height\"\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n withTimepicker: true,\n keepDatepickerOpened: true,\n rangeInputFormat: format,\n dateInputFormat: format\n }\"\n bsDatepicker\n [class.invalid]=\"validationFailed\"\n [(ngModel)]=\"selectedDateAndTime\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateAndTimePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\n <!-- Date range picker -->\n <div class=\"input-container\">\n <input\n type=\"text\"\n class=\"form-control height\"\n #daterangepicker=\"bsDaterangepicker\"\n bsDaterangepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n rangeInputFormat: format,\n dateInputFormat: format,\n showWeekNumbers: false\n }\"\n [(ngModel)]=\"selectedDateRange\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateRangePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i3.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
179
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DateTimeFieldsComponent, selector: "lib-date-time-fields", inputs: { question: "question" }, providers: [DatePipe], viewQueries: [{ propertyName: "datepicker", first: true, predicate: ["datepickerYMD"], descendants: true }, { propertyName: "dateRangePicker", first: true, predicate: ["daterangepicker"], descendants: true }, { propertyName: "dateAndTimePicker", first: true, predicate: ["dateAndTimePicker"], descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\n <!-- Date only picker -->\n <div class=\"input-container\">\n <input\n class=\"form-control height\"\n #datepickerYMD=\"bsDatepicker\"\n bsDatepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{ dateInputFormat: format }\"\n [(ngModel)]=\"selectedDate\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDatePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n <!-- Time picker -->\n <input\n type=\"time\"\n class=\"form-control height\"\n (blur)=\"validateField()\"\n [(ngModel)]=\"selectedTime\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\n <!-- Date and time picker -->\n <div class=\"input-container\">\n <input\n #dateAndTimePicker=\"bsDatepicker\"\n type=\"text\"\n class=\"form-control height\"\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n withTimepicker: true,\n keepDatepickerOpened: true,\n rangeInputFormat: format,\n dateInputFormat: format\n }\"\n bsDatepicker\n [class.invalid]=\"validationFailed\"\n [(ngModel)]=\"selectedDateAndTime\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateAndTimePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\n <!-- Date range picker -->\n <div class=\"input-container\">\n <input\n type=\"text\"\n class=\"form-control height\"\n #daterangepicker=\"bsDaterangepicker\"\n bsDaterangepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n rangeInputFormat: format,\n dateInputFormat: format,\n showWeekNumbers: false\n }\"\n [(ngModel)]=\"selectedDateRange\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateRangePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.BsDatepickerDirective, selector: "[bsDatepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isDisabled", "minDate", "maxDate", "minMode", "daysDisabled", "datesDisabled", "datesEnabled", "dateCustomClasses", "dateTooltipTexts", "isOpen", "bsValue", "bsConfig"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDatepicker"] }, { kind: "directive", type: i3.BsDatepickerInputDirective, selector: "input[bsDatepicker]" }, { kind: "directive", type: i3.BsDaterangepickerDirective, selector: "[bsDaterangepicker]", inputs: ["placement", "triggers", "outsideClick", "container", "outsideEsc", "isOpen", "bsValue", "bsConfig", "isDisabled", "minDate", "maxDate", "dateCustomClasses", "daysDisabled", "datesDisabled", "datesEnabled"], outputs: ["onShown", "onHidden", "bsValueChange"], exportAs: ["bsDaterangepicker"] }, { kind: "directive", type: i3.BsDaterangepickerInputDirective, selector: "input[bsDaterangepicker]" }] }); }
180
180
  }
181
181
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DateTimeFieldsComponent, decorators: [{
182
182
  type: Component,
183
- args: [{ selector: 'lib-date-time-fields', providers: [DatePipe], template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\n <!-- Date only picker -->\n <div class=\"input-container\">\n <input\n class=\"form-control height\"\n #datepickerYMD=\"bsDatepicker\"\n bsDatepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{ dateInputFormat: format }\"\n [(ngModel)]=\"selectedDate\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDatePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n <!-- Time picker -->\n <input\n type=\"time\"\n class=\"form-control height\"\n (blur)=\"validateField()\"\n [(ngModel)]=\"selectedTime\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\n <!-- Date and time picker -->\n <div class=\"input-container\">\n <input\n #dateAndTimePicker=\"bsDatepicker\"\n type=\"text\"\n class=\"form-control height\"\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n withTimepicker: true,\n keepDatepickerOpened: true,\n rangeInputFormat: format,\n dateInputFormat: format\n }\"\n bsDatepicker\n [class.invalid]=\"validationFailed\"\n [(ngModel)]=\"selectedDateAndTime\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateAndTimePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\n <!-- Date range picker -->\n <div class=\"input-container\">\n <input\n type=\"text\"\n class=\"form-control height\"\n #daterangepicker=\"bsDaterangepicker\"\n bsDaterangepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n rangeInputFormat: format,\n dateInputFormat: format,\n showWeekNumbers: false\n }\"\n [(ngModel)]=\"selectedDateRange\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateRangePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"] }]
183
+ args: [{ selector: 'lib-date-time-fields', providers: [DatePipe], template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <ng-container *ngIf=\"dateType === 'DATE_ONLY'\">\n <!-- Date only picker -->\n <div class=\"input-container\">\n <input\n class=\"form-control height\"\n #datepickerYMD=\"bsDatepicker\"\n bsDatepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{ dateInputFormat: format }\"\n [(ngModel)]=\"selectedDate\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDatePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'TIME_ONLY'\">\n <!-- Time picker -->\n <input\n type=\"time\"\n class=\"form-control height\"\n (blur)=\"validateField()\"\n [(ngModel)]=\"selectedTime\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_AND_TIME'\">\n <!-- Date and time picker -->\n <div class=\"input-container\">\n <input\n #dateAndTimePicker=\"bsDatepicker\"\n type=\"text\"\n class=\"form-control height\"\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n withTimepicker: true,\n keepDatepickerOpened: true,\n rangeInputFormat: format,\n dateInputFormat: format\n }\"\n bsDatepicker\n [class.invalid]=\"validationFailed\"\n [(ngModel)]=\"selectedDateAndTime\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateAndTimePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n\n <ng-container *ngIf=\"dateType === 'DATE_RANGE'\">\n <!-- Date range picker -->\n <div class=\"input-container\">\n <input\n type=\"text\"\n class=\"form-control height\"\n #daterangepicker=\"bsDaterangepicker\"\n bsDaterangepicker\n [minDate]=\"minDate ? minDate : undefined\"\n [maxDate]=\"maxDate ? maxDate : undefined\"\n [bsConfig]=\"{\n rangeInputFormat: format,\n dateInputFormat: format,\n showWeekNumbers: false\n }\"\n [(ngModel)]=\"selectedDateRange\"\n (blur)=\"validateField()\"\n (ngModelChange)=\"validateField()\"\n [class.invalid]=\"validationFailed\"\n />\n <i\n class=\"fa-solid fa-calendar-days calendar-icon text-primary fs-5\"\n (click)=\"openDateRangePicker()\"\n ></i>\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger mt-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n </ng-container>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.input-container{position:relative}.input-container .form-control{padding-right:30px}.input-container .calendar-icon{position:absolute;top:50%;right:10px;transform:translateY(-50%);cursor:pointer}\n"] }]
184
184
  }], ctorParameters: function () { return [{ type: i1.DatePipe }]; }, propDecorators: { question: [{
185
185
  type: Input
186
186
  }], datepicker: [{
package/esm2022/form-fields/drop-down-fields/drop-down-fields.component.mjs CHANGED
@@ -216,11 +216,11 @@ export class DropDownFieldsComponent {
216
216
  }
217
217
  }
218
218
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, deps: [{ token: i1.FormService }, { token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component }); }
219
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-dropdown\n [items]=\"customOptions\"\n [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n (click)=\"selectItems()\"\n [(selectedItems)]=\"selectedValue\"\n ></lib-dropdown>\n <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
219
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: DropDownFieldsComponent, selector: "lib-drop-down-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-dropdown\n [items]=\"customOptions\"\n [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n (click)=\"selectItems()\"\n [(selectedItems)]=\"selectedValue\"\n ></lib-dropdown>\n <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i3.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
220
220
  }
221
221
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: DropDownFieldsComponent, decorators: [{
222
222
  type: Component,
223
- args: [{ selector: 'lib-drop-down-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-dropdown\n [items]=\"customOptions\"\n [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n (click)=\"selectItems()\"\n [(selectedItems)]=\"selectedValue\"\n ></lib-dropdown>\n <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
223
+ args: [{ selector: 'lib-drop-down-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-dropdown\n [items]=\"customOptions\"\n [multiple]=\"selectionType === 'SINGLE' ? false : true\"\n (click)=\"selectItems()\"\n [(selectedItems)]=\"selectedValue\"\n ></lib-dropdown>\n <div *ngIf=\"validationFailed\" class=\"text-danger mb-2\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
224
224
  }], ctorParameters: function () { return [{ type: i1.FormService }, { type: i0.ChangeDetectorRef }]; }, propDecorators: { question: [{
225
225
  type: Input
226
226
  }] } });
package/esm2022/form-fields/file-picker-fields/file-picker-fields.component.mjs CHANGED
@@ -101,11 +101,11 @@ export class FilePickerFieldsComponent {
101
101
  });
102
102
  }
103
103
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
104
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-docUpload\n [totalSize]=\"totalFileSize\"\n [fileAllowed]=\"fileTypes\"\n [multiple]=\"multiFileUploads\"\n [fileSize]=\"fileSize\"\n [avatarPicker]=\"avatarPicker\"\n (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\n (fileSizeAllowed)=\"handleFileSize($event)\"\n (finalArray)=\"handleFinalArray($event)\"\n [attachments] = \"attachments\"\n (deleteFiles)=\"deleteFiles($event)\"\n [files]=\"files\"\n ></lib-docUpload>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DocUploadComponent, selector: "lib-docUpload", inputs: ["totalSize", "fileAllowed", "multiple", "avatarPicker", "attachments", "files", "fileSize"], outputs: ["fileTypeNotAllowed", "fileSizeAllowed", "finalArray", "deleteFiles"] }] }); }
104
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: FilePickerFieldsComponent, selector: "lib-file-picker-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-docUpload\n [totalSize]=\"totalFileSize\"\n [fileAllowed]=\"fileTypes\"\n [multiple]=\"multiFileUploads\"\n [fileSize]=\"fileSize\"\n [avatarPicker]=\"avatarPicker\"\n (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\n (fileSizeAllowed)=\"handleFileSize($event)\"\n (finalArray)=\"handleFinalArray($event)\"\n [attachments] = \"attachments\"\n (deleteFiles)=\"deleteFiles($event)\"\n [files]=\"files\"\n ></lib-docUpload>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.DocUploadComponent, selector: "lib-docUpload", inputs: ["totalSize", "fileAllowed", "multiple", "avatarPicker", "attachments", "files", "fileSize"], outputs: ["fileTypeNotAllowed", "fileSizeAllowed", "finalArray", "deleteFiles"] }] }); }
105
105
  }
106
106
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: FilePickerFieldsComponent, decorators: [{
107
107
  type: Component,
108
- args: [{ selector: 'lib-file-picker-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-docUpload\n [totalSize]=\"totalFileSize\"\n [fileAllowed]=\"fileTypes\"\n [multiple]=\"multiFileUploads\"\n [fileSize]=\"fileSize\"\n [avatarPicker]=\"avatarPicker\"\n (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\n (fileSizeAllowed)=\"handleFileSize($event)\"\n (finalArray)=\"handleFinalArray($event)\"\n [attachments] = \"attachments\"\n (deleteFiles)=\"deleteFiles($event)\"\n [files]=\"files\"\n ></lib-docUpload>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}\n"] }]
108
+ args: [{ selector: 'lib-file-picker-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <lib-docUpload\n [totalSize]=\"totalFileSize\"\n [fileAllowed]=\"fileTypes\"\n [multiple]=\"multiFileUploads\"\n [fileSize]=\"fileSize\"\n [avatarPicker]=\"avatarPicker\"\n (fileTypeNotAllowed)=\"handleFileTypeNotAllowed($event)\"\n (fileSizeAllowed)=\"handleFileSize($event)\"\n (finalArray)=\"handleFinalArray($event)\"\n [attachments] = \"attachments\"\n (deleteFiles)=\"deleteFiles($event)\"\n [files]=\"files\"\n ></lib-docUpload>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.fileInput{position:relative;height:44px;width:111px;background:#d3d3d3;border-radius:6px;padding:0 16px;display:flex;align-items:center;justify-content:center;cursor:pointer}.fileInput input{opacity:0;position:absolute;left:0;top:0;width:100%;height:inherit}\n"] }]
109
109
  }], propDecorators: { question: [{
110
110
  type: Input
111
111
  }] } });
package/esm2022/form-fields/location-fields/location-fields.component.mjs CHANGED
@@ -62,11 +62,11 @@ export class LocationFieldsComponent {
62
62
  });
63
63
  }
64
64
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocationFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
65
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: { question: "question" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["mapSearchField"], descendants: true }, { propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group\">\n <input\n type=\"text\"\n class=\"form-control location-input\"\n placeholder=\"Enter location\"\n #locationInput\n />\n </div>\n\n <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\n <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }] }); }
65
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: LocationFieldsComponent, selector: "lib-location-fields", inputs: { question: "question" }, viewQueries: [{ propertyName: "searchField", first: true, predicate: ["mapSearchField"], descendants: true }, { propertyName: "map", first: true, predicate: GoogleMap, descendants: true }], ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group\">\n <input\n type=\"text\"\n class=\"form-control location-input\"\n placeholder=\"Enter location\"\n #locationInput\n />\n </div>\n\n <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\n <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i2.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }] }); }
66
66
  }
67
67
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LocationFieldsComponent, decorators: [{
68
68
  type: Component,
69
- args: [{ selector: 'lib-location-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group\">\n <input\n type=\"text\"\n class=\"form-control location-input\"\n placeholder=\"Enter location\"\n #locationInput\n />\n </div>\n\n <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\n <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"] }]
69
+ args: [{ selector: 'lib-location-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group\">\n <input\n type=\"text\"\n class=\"form-control location-input\"\n placeholder=\"Enter location\"\n #locationInput\n />\n </div>\n\n <input #mapSearchField class=\"my-map-search-field\" type=\"text\" />\n <google-map width=\"100%\" [options]=\"mapConfigurations\"></google-map>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}.location-input{position:relative}.input-group-append{cursor:pointer;position:absolute;top:50%;right:10px;transform:translateY(-50%)}\n"] }]
70
70
  }], propDecorators: { question: [{
71
71
  type: Input
72
72
  }], searchField: [{
package/esm2022/form-fields/mail-fields/mail-fields.component.mjs CHANGED
@@ -60,11 +60,11 @@ export class MailFieldsComponent {
60
60
  this.validateEmail();
61
61
  }
62
62
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
63
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <input\n type=\"email\"\n class=\"form-control mb-2 height\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"email\"\n (blur)=\"validateEmail()\"\n (input)=\"validateInput($event)\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
63
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MailFieldsComponent, selector: "lib-mail-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <input\n type=\"email\"\n class=\"form-control mb-2 height\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"email\"\n (blur)=\"validateEmail()\"\n (input)=\"validateInput($event)\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] }); }
64
64
  }
65
65
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MailFieldsComponent, decorators: [{
66
66
  type: Component,
67
- args: [{ selector: 'lib-mail-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <input\n type=\"email\"\n class=\"form-control mb-2 height\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"email\"\n (blur)=\"validateEmail()\"\n (input)=\"validateInput($event)\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
67
+ args: [{ selector: 'lib-mail-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <input\n type=\"email\"\n class=\"form-control mb-2 height\"\n [placeholder]=\"placeholder\"\n [(ngModel)]=\"email\"\n (blur)=\"validateEmail()\"\n (input)=\"validateInput($event)\"\n [class.invalid]=\"validationFailed\"\n />\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}\n"] }]
68
68
  }], propDecorators: { question: [{
69
69
  type: Input
70
70
  }] } });
package/esm2022/form-fields/mobile-fields/mobile-fields.component.mjs CHANGED
@@ -114,11 +114,11 @@ export class MobileFieldsComponent {
114
114
  }
115
115
  }
116
116
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, deps: [{ token: i1.CountryService }], target: i0.ɵɵFactoryTarget.Component }); }
117
- static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group mb-2\">\n <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\">\n <lib-dropdown\n [items]=\"countryDetails\"\n [multiple]=\"false\"\n [(selectedItems)]=\"selectedCountry\"\n (selectedItemsChange)=\"onCountryChange()\"\n (onScroll)=\"onScroll()\"\n ></lib-dropdown>\n </div>\n <input\n type=\"number\"\n class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n [placeholder]=\"placeholder\"\n aria-label=\"Mobile Number\"\n [class.invalid]=\"validationFailed\"\n (blur)=\"validateMobile()\"\n [(ngModel)]=\"mobileNumber\"\n (ngModelChange)=\"onMobileNumberChange()\"\n />\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
117
+ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: MobileFieldsComponent, selector: "lib-mobile-fields", inputs: { question: "question" }, ngImport: i0, template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group mb-2\">\n <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\">\n <lib-dropdown\n [items]=\"countryDetails\"\n [multiple]=\"false\"\n [(selectedItems)]=\"selectedCountry\"\n (selectedItemsChange)=\"onCountryChange()\"\n (onScroll)=\"onScroll()\"\n ></lib-dropdown>\n </div>\n <input\n type=\"number\"\n class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n [placeholder]=\"placeholder\"\n aria-label=\"Mobile Number\"\n [class.invalid]=\"validationFailed\"\n (blur)=\"validateMobile()\"\n [(ngModel)]=\"mobileNumber\"\n (ngModelChange)=\"onMobileNumberChange()\"\n />\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i3.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: i3.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4.DropdownComponent, selector: "lib-dropdown", inputs: ["multiple", "scrollable", "selectedItems", "placeholder", "items", "showCreateNew", "selectedValues", "customButtons", "showBorder"], outputs: ["buttonClick", "selectedItemsChange", "onScroll", "onCreateNew", "onSearch"] }] }); }
118
118
  }
119
119
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: MobileFieldsComponent, decorators: [{
120
120
  type: Component,
121
- args: [{ selector: 'lib-mobile-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group mb-2\">\n <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\">\n <lib-dropdown\n [items]=\"countryDetails\"\n [multiple]=\"false\"\n [(selectedItems)]=\"selectedCountry\"\n (selectedItemsChange)=\"onCountryChange()\"\n (onScroll)=\"onScroll()\"\n ></lib-dropdown>\n </div>\n <input\n type=\"number\"\n class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n [placeholder]=\"placeholder\"\n aria-label=\"Mobile Number\"\n [class.invalid]=\"validationFailed\"\n (blur)=\"validateMobile()\"\n [(ngModel)]=\"mobileNumber\"\n (ngModelChange)=\"onMobileNumberChange()\"\n />\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"] }]
121
+ args: [{ selector: 'lib-mobile-fields', template: "<div [ngClass]=\"'col-' + count\" class=\"mb-5 px-3\">\n <div class=\"input-wrapper mb-2\">\n <div [innerHTML]=\"question.questionNumber\"></div>\n &nbsp;&nbsp; <label>{{ question.question }}</label\n >&nbsp;\n <span class=\"text-danger\" *ngIf=\"required\">*</span>\n <div\n class=\"svg-wrapper mb-2 hintIcon\"\n [attr.data-title]=\"hint\"\n *ngIf=\"hint\"\n >\n <svg\n class=\"hintSvg\"\n viewBox=\"0 0 30 30\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M15 26.25V26.25C8.78625 26.25 3.75 21.2138 3.75 15V15C3.75 8.78625 8.78625 3.75 15 3.75V3.75C21.2138 3.75 26.25 8.78625 26.25 15V15C26.25 21.2138 21.2138 26.25 15 26.25Z\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M15 16.5623V16.2498C15 15.2285 15.6312 14.6748 16.2637 14.2498C16.8812 13.8335 17.5 13.291 17.5 12.291C17.5 10.9098 16.3813 9.79102 15 9.79102C13.6187 9.79102 12.5 10.9098 12.5 12.291\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M14.9988 20C14.8263 20 14.6863 20.14 14.6875 20.3125C14.6875 20.485 14.8275 20.625 15 20.625C15.1725 20.625 15.3125 20.485 15.3125 20.3125C15.3125 20.14 15.1725 20 14.9988 20\"\n stroke=\"#323232\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n </svg>\n </div>\n </div>\n <div class=\"input-group mb-2\">\n <div class=\"col-xs-5 col-5 col-md-3 px-0 pe-2 ps-2\">\n <lib-dropdown\n [items]=\"countryDetails\"\n [multiple]=\"false\"\n [(selectedItems)]=\"selectedCountry\"\n (selectedItemsChange)=\"onCountryChange()\"\n (onScroll)=\"onScroll()\"\n ></lib-dropdown>\n </div>\n <input\n type=\"number\"\n class=\"form-control col-xs-7 col-7 col-md-9 height mobileField\"\n [placeholder]=\"placeholder\"\n aria-label=\"Mobile Number\"\n [class.invalid]=\"validationFailed\"\n (blur)=\"validateMobile()\"\n [(ngModel)]=\"mobileNumber\"\n (ngModelChange)=\"onMobileNumberChange()\"\n />\n </div>\n <div *ngIf=\"validationFailed\" class=\"text-danger\">\n <svg\n class=\"validationSvg\"\n viewBox=\"0 0 24 24\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M12.001 16.75C12.139 16.75 12.251 16.638 12.25 16.5C12.25 16.362 12.138 16.25 12 16.25C11.862 16.25 11.75 16.362 11.75 16.5C11.75 16.638 11.862 16.75 12.001 16.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n fill-rule=\"evenodd\"\n clip-rule=\"evenodd\"\n d=\"M12 21C7.029 21 3 16.971 3 12C3 7.029 7.029 3 12 3C16.971 3 21 7.029 21 12C21 16.971 16.971 21 12 21Z\"\n fill=\"#FF0000\"\n stroke=\"#FF0000\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <path\n d=\"M12 12.75L12 7.75\"\n stroke=\"white\"\n stroke-width=\"1.5\"\n stroke-linecap=\"round\"\n stroke-linejoin=\"round\"\n />\n <circle cx=\"12\" cy=\"16\" r=\"1\" fill=\"white\" />\n </svg>\n {{ validationMessage }}\n </div>\n</div>\n", styles: [".input-wrapper{display:flex;align-items:flex-start}.svg-wrapper{margin-inline-start:auto;z-index:999}.hintIcon{position:relative;cursor:pointer}.hintIcon:hover:before{content:attr(data-title);position:absolute;top:calc(100% + 2px);right:0;padding:4px 8px;border-radius:4px;background-color:#1d252d;color:#8e9aa0;font-size:14px;min-width:300px;word-wrap:break-word;word-break:break-word;text-align:center;white-space:normal}.hintIcon:hover:after{content:\"\";position:absolute;top:calc(100% - 26px);left:50%;border:solid transparent;border-width:18px;border-bottom-color:#1d252d;transform:translate(-50%)}.height{height:42px}.invalid{border-color:red}.hintSvg{width:30px;height:30px;fill:none}.validationSvg{width:24px;height:24px;fill:none}input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.mobileField{border-radius:6px!important}\n"] }]
122
122
  }], ctorParameters: function () { return [{ type: i1.CountryService }]; }, propDecorators: { question: [{
123
123
  type: Input
124
124
  }] } });