ngx-form-designer 0.0.24 → 0.0.26

package/fesm2022/ngx-form-designer.mjs

@@ -12180,7 +12180,10 @@ class DataPanelComponent {
         return this.sourceType === 'source' && (this.isSelectedSourceEventBacked() || !!this.rowsPathSuggestion || !!this.rowsPath);
     }
     showScalarMappingControls() {
-        return this.sourceType === 'source' && this.bindingShape === 'scalar';
+        return this.sourceType === 'source' && this.bindingShape === 'scalar' && this.widgetType !== 'search';
+    }
+    showOptionMappingControls() {
+        return this.sourceType === 'source' && this.widgetType !== 'table' && this.usesOptionMapping();
     }
     rowsPathPreviewRows() {
         const effectiveRowsPath = this.effectiveRowsPath();
@@ -12215,17 +12218,20 @@ class DataPanelComponent {
         return sample ? collectArrayPaths(sample) : [];
     }
     shouldPersistStructuredLabelPath() {
-        if (this.bindingShape !== 'list' || !this.labelKey)
+        if (!this.usesOptionMapping() || !this.labelKey)
             return false;
         return !!this.normalizedRowsPath() || !!this.childRowsPath || hasPathSyntax$1(this.labelKey);
     }
     shouldPersistStructuredValuePath() {
         if (!this.valueKey)
             return false;
-        if (this.bindingShape === 'scalar')
+        if (!this.usesOptionMapping())
             return true;
         return !!this.normalizedRowsPath() || !!this.childRowsPath || hasPathSyntax$1(this.valueKey);
     }
+    usesOptionMapping() {
+        return this.bindingShape === 'list' || this.widgetType === 'search';
+    }
     updatePreviewPathState() {
         const firstPreviewRow = this.previewRows[0];
         this.rootPathOptions = firstPreviewRow ? collectArrayPaths(firstPreviewRow) : [];
@@ -12499,8 +12505,8 @@ class DataPanelComponent {
                              </div>
                          </div>
 
-                         <!-- Mapping Keys (List Only) -->
-                         <div class="flex flex-col gap-2" *ngIf="bindingShape === 'list' && widgetType !== 'table'">
+                         <!-- Option Mapping -->
+                         <div class="flex flex-col gap-2" *ngIf="showOptionMappingControls()">
                              <div class="flex items-center justify-between">
                                  <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Column Mapping</span>
                                  <button (click)="autoMapKeys()" class="text-blue-600 hover:text-blue-700 text-xs font-medium flex items-center gap-1" title="Guess columns based on names">
@@ -13086,8 +13092,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
                              </div>
                          </div>
 
-                         <!-- Mapping Keys (List Only) -->
-                         <div class="flex flex-col gap-2" *ngIf="bindingShape === 'list' && widgetType !== 'table'">
+                         <!-- Option Mapping -->
+                         <div class="flex flex-col gap-2" *ngIf="showOptionMappingControls()">
                              <div class="flex items-center justify-between">
                                  <span class="text-xs font-semibold text-gray-500 uppercase tracking-wide">Column Mapping</span>
                                  <button (click)="autoMapKeys()" class="text-blue-600 hover:text-blue-700 text-xs font-medium flex items-center gap-1" title="Guess columns based on names">
@@ -26149,18 +26155,18 @@ function joinClasses(...classNames) {
 //   border-default:  #E6EAF0
 //   surface-default: #FFFFFF
 //   focus-border:    #7FB2FF
-const TEXT_CONTROL_BASE_CLASS = 'block w-full rounded-[4px] border bg-transparent px-3 text-[0.875rem] text-[#1C2431] transition-all placeholder:text-transparent hover:border-[#1C2431]/40 focus:outline-none disabled:cursor-not-allowed disabled:border-[#E6EAF0] disabled:bg-[#E6EAF0]/40 disabled:text-[#1C2431]/40';
+const TEXT_CONTROL_BASE_CLASS = 'block w-full rounded-[4px] border bg-transparent px-3 text-sm text-[#1C2431] transition-all placeholder:text-transparent hover:border-[#1C2431]/40 focus:outline-none disabled:cursor-not-allowed disabled:border-[#E6EAF0] disabled:bg-[#E6EAF0]/40 disabled:text-[#1C2431]/40';
 const TEXT_CONTROL_VALID_CLASS = 'border-[#E6EAF0] focus:border-[#7FB2FF] focus:border-2 focus:ring-0';
 const TEXT_CONTROL_INVALID_CLASS = 'border-red-500 border-2 text-red-700 placeholder:text-red-300 focus:border-red-500 focus:ring-0';
 const FIELD_CONTAINER_CLASS = 'relative w-full font-sans';
-const FIELD_LABEL_CLASS = 'mb-[0.25em] block font-sans text-[0.75rem] font-normal tracking-[0.00937em] text-[#1C2431]/70';
+const FIELD_LABEL_CLASS = 'mb-[0.25em] block font-sans text-xs font-normal tracking-[0.00937em] text-[#1C2431]/70';
 const FIELD_REQUIRED_CLASS = 'text-red-500';
-const FIELD_HELP_CLASS = 'mt-1 text-[0.75rem] leading-5 tracking-[0.03333em] text-[#1C2431]/50';
-const FIELD_ERROR_CLASS = 'mt-1 text-[0.75rem] font-normal leading-5 tracking-[0.03333em] text-red-500';
+const FIELD_HELP_CLASS = 'mt-1 text-xs leading-5 tracking-[0.03333em] text-[#1C2431]/50';
+const FIELD_ERROR_CLASS = 'mt-1 text-xs font-normal leading-5 tracking-[0.03333em] text-red-500';
 const FIELD_CHOICE_SURFACE_CLASS = 'flex items-start gap-3 rounded-[4px] border border-[#E6EAF0] bg-[#FFFFFF] px-3 py-3';
-const FIELD_CHOICE_LABEL_CLASS = 'text-[0.875rem] leading-6 tracking-[0.01786em] text-[#1C2431]';
+const FIELD_CHOICE_LABEL_CLASS = 'text-sm leading-6 tracking-[0.01786em] text-[#1C2431]';
 const FIELD_RESULTS_PANEL_CLASS = 'absolute z-30 mt-1 max-h-64 w-full overflow-auto rounded-[4px] border-0 bg-[#FFFFFF] py-2 shadow-[0_5px_5px_-3px_rgba(0,0,0,.2),0_8px_10px_1px_rgba(0,0,0,.14),0_3px_14px_2px_rgba(0,0,0,.12)]';
-const FIELD_OPTION_CLASS = 'block w-full px-4 py-3 text-left text-[0.875rem] tracking-[0.01786em] text-[#1C2431] transition hover:bg-[#7FB2FF]/[0.08] active:bg-[#7FB2FF]/[0.14]';
+const FIELD_OPTION_CLASS = 'block w-full px-4 py-3 text-left text-sm tracking-[0.01786em] text-[#1C2431] transition hover:bg-[#7FB2FF]/[0.08] active:bg-[#7FB2FF]/[0.14]';
 const FILE_UPLOAD_SHELL_CLASS = 'rounded-[4px] border border-dashed border-[#E6EAF0] bg-transparent';
 const FILE_UPLOAD_CARD_CLASS = 'flex flex-col gap-0.5 rounded-[4px] border border-[#E6EAF0] bg-[#FFFFFF] px-3 py-2 text-xs text-[#1C2431] shadow-[0_1px_2px_0_rgba(0,0,0,.08)]';
 const CONTENT_TEXT_CLASS = 'mb-4 leading-6 tracking-[0.03125em] text-[#1C2431] text-[0.875rem]';
@@ -26202,13 +26208,13 @@ const TABLE_ICON_BUTTON_CLASS = 'inline-flex h-10 w-10 items-center justify-cent
 function getTextControlClass(options) {
     const multiline = options?.multiline === true;
     const compact = options?.compact === true;
-    return joinClasses(TEXT_CONTROL_BASE_CLASS, options?.invalid ? TEXT_CONTROL_INVALID_CLASS : TEXT_CONTROL_VALID_CLASS, multiline ? 'min-h-[96px] py-2 leading-6 resize-y' : compact ? 'min-h-[20px] py-0.5' : 'min-h-[20px] py-0.5', options?.leadingInset && 'pl-[2.5rem]', options?.trailingInset && 'pr-[2.5rem]');
+    return joinClasses(TEXT_CONTROL_BASE_CLASS, options?.invalid ? TEXT_CONTROL_INVALID_CLASS : TEXT_CONTROL_VALID_CLASS, multiline ? 'min-h-[96px] py-2 leading-6 resize-y' : compact ? 'min-h-[20px] py-0.5' : 'min-h-[20px] py-0.5', options?.leadingInset && 'pl-10', options?.trailingInset && 'pr-10');
 }
 function getChoiceControlClass(options) {
     return joinClasses('mt-0.5 h-[18px] w-[18px] border-2 bg-[#FFFFFF] text-[#7FB2FF] transition focus:ring-2 focus:ring-[#7FB2FF] focus:ring-offset-0', options?.radio ? 'rounded-full' : 'rounded-[2px]', options?.invalid ? 'border-red-500 focus:ring-red-200' : 'border-[#1C2431]/40 checked:border-[#7FB2FF]');
 }
 function getFileInputClass(options) {
-    return joinClasses('block w-full cursor-pointer rounded-[4px] border bg-transparent px-3 py-3 text-[0.875rem] tracking-[0.01786em] text-[#1C2431] transition hover:border-[#1C2431]/40 focus-visible:outline-none focus-visible:border-2 disabled:cursor-not-allowed disabled:border-[#E6EAF0] disabled:bg-[#E6EAF0]/40', 'file:mr-3 file:rounded-[2px] file:border file:px-3 file:py-1.5 file:text-xs file:font-medium file:tracking-[0.08929em] file:uppercase', 'file:border-[#7FB2FF] file:bg-transparent file:text-[#1C2431] hover:file:bg-[#7FB2FF]/[0.08]', options?.invalid
+    return joinClasses('block w-full cursor-pointer rounded-[4px] border bg-transparent px-3 py-3 text-sm tracking-[0.01786em] text-[#1C2431] transition hover:border-[#1C2431]/40 focus-visible:outline-none focus-visible:border-2 disabled:cursor-not-allowed disabled:border-[#E6EAF0] disabled:bg-[#E6EAF0]/40', 'file:mr-3 file:rounded-[2px] file:border file:px-3 file:py-1.5 file:text-xs file:font-medium file:tracking-[0.08929em] file:uppercase', 'file:border-[#7FB2FF] file:bg-transparent file:text-[#1C2431] hover:file:bg-[#7FB2FF]/[0.08]', options?.invalid
         ? 'border-red-500 border-2 text-red-700 focus-visible:border-red-500'
         : 'border-[#E6EAF0] focus-visible:border-[#7FB2FF]');
 }
@@ -27436,7 +27442,7 @@ class SelectWidgetComponent {
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block}:host ::ng-deep ng-select.fd-select .ng-select-container{min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:.875rem;line-height:1.25rem}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:.875rem;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
+  `, isInline: true, styles: [":host ::ng-deep ng-select.fd-select{display:block}:host ::ng-deep ng-select.fd-select .ng-select-container{min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:14px;line-height:20px}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: NgSelectComponent, selector: "ng-select", inputs: ["bindLabel", "bindValue", "ariaLabel", "markFirst", "placeholder", "fixedPlaceholder", "notFoundText", "typeToSearchText", "preventToggleOnRightClick", "addTagText", "loadingText", "clearAllText", "appearance", "dropdownPosition", "appendTo", "loading", "closeOnSelect", "hideSelected", "selectOnTab", "openOnEnter", "maxSelectedItems", "groupBy", "groupValue", "bufferAmount", "virtualScroll", "selectableGroup", "selectableGroupAsModel", "searchFn", "trackByFn", "clearOnBackspace", "labelForId", "inputAttrs", "tabIndex", "readonly", "searchWhileComposing", "minTermLength", "editableSearchTerm", "ngClass", "typeahead", "multiple", "addTag", "searchable", "clearable", "isOpen", "items", "compareWith", "clearSearchOnAdd", "deselectOnClick", "keyDownFn"], outputs: ["blur", "focus", "change", "open", "close", "search", "clear", "add", "remove", "scroll", "scrollToEnd"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: SelectWidgetComponent, decorators: [{
             type: Component,
@@ -27484,7 +27490,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, styles: [":host ::ng-deep ng-select.fd-select{display:block}:host ::ng-deep ng-select.fd-select .ng-select-container{min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:.875rem;line-height:1.25rem}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:.875rem;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"] }]
+  `, styles: [":host ::ng-deep ng-select.fd-select{display:block}:host ::ng-deep ng-select.fd-select .ng-select-container{min-height:20px;border:1px solid #E6EAF0;border-radius:4px;background:#fff;box-shadow:none;transition:border-color .2s ease,box-shadow .2s ease}:host ::ng-deep ng-select.fd-select.ng-select-focused:not(.ng-select-opened) .ng-select-container,:host ::ng-deep ng-select.fd-select.ng-select-opened .ng-select-container{border-width:2px;border-color:#7fb2ff}:host ::ng-deep ng-select.fd-select[data-fd-field-state=invalid] .ng-select-container{border-width:2px;border-color:#ef4444}:host ::ng-deep ng-select.fd-select .ng-value-container{padding:2px 12px;gap:4px}:host ::ng-deep ng-select.fd-select .ng-placeholder,:host ::ng-deep ng-select.fd-select .ng-value-label,:host ::ng-deep ng-select.fd-select .ng-input>input{font-family:inherit;font-size:14px;line-height:20px}:host ::ng-deep ng-select.fd-select .ng-placeholder{color:#1c243166}:host ::ng-deep ng-select.fd-select .ng-select-container.ng-has-value .ng-placeholder{display:none}:host ::ng-deep ng-select.fd-select .ng-arrow-wrapper{padding-right:12px}:host ::ng-deep ng-select.fd-select .ng-arrow{border-color:rgba(28,36,49,.6) transparent transparent}:host ::ng-deep ng-select.fd-select .ng-clear-wrapper{color:#1c243199}:host ::ng-deep .ng-dropdown-panel{border:1px solid #E6EAF0;border-radius:8px;background:#fff;box-shadow:0 10px 30px #0000001f}:host ::ng-deep .ng-dropdown-panel .ng-option{padding:10px 14px;font-size:14px;line-height:20px;background:#fff;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-marked{background:#7fb2ff14;color:#1c2431}:host ::ng-deep .ng-dropdown-panel .ng-option.ng-option-selected{background:#7fb2ff24;color:#1c2431}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], engine: [{