@yourself.create/ngx-form-designer 0.0.10 → 0.0.11

package/fesm2022/uch-web-ngx-form-designer.mjs

@@ -32607,7 +32607,7 @@ class TextFieldWidgetComponent {
             return styles;
         }
         return mergeAndNormalize(styles, {
-            paddingLeft: `calc(25px + ${Math.max(this.displayPrefix.length, 1)}ch) !important`
+            '--fd-prefix-padding-left': `calc(25px + ${Math.max(this.displayPrefix.length, 1)}ch)`
         });
     }
     hasWrapperFrame() {
@@ -32927,6 +32927,7 @@ class TextFieldWidgetComponent {
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
+            [class.fd-prefixed-input]="hasDisplayPrefix()"
             [ngStyle]="getSingleLineControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
@@ -32956,6 +32957,7 @@ class TextFieldWidgetComponent {
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
+            [class.fd-prefixed-input]="hasDisplayPrefix()"
             [ngStyle]="getSingleLineControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
@@ -32972,15 +32974,11 @@ class TextFieldWidgetComponent {
         <p [id]="helpTextId" [class]="fieldHelpClass" data-fd="field-help">{{ config.helpText }}</p>
       }
     </div>
-  `, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }] });
+  `, isInline: true, styles: [".fd-prefixed-input{padding-left:var(--fd-prefix-padding-left)!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: ColorPickerDirective, selector: "[colorPicker]", inputs: ["colorPicker", "cpWidth", "cpHeight", "cpToggle", "cpDisabled", "cpIgnoredElements", "cpFallbackColor", "cpColorMode", "cpCmykEnabled", "cpOutputFormat", "cpAlphaChannel", "cpDisableInput", "cpDialogDisplay", "cpSaveClickOutside", "cpCloseClickOutside", "cpUseRootViewContainer", "cpPosition", "cpPositionOffset", "cpPositionRelativeToArrow", "cpOKButton", "cpOKButtonText", "cpOKButtonClass", "cpCancelButton", "cpCancelButtonText", "cpCancelButtonClass", "cpEyeDropper", "cpPresetLabel", "cpPresetColors", "cpPresetColorsClass", "cpMaxPresetColorsLength", "cpPresetEmptyMessage", "cpPresetEmptyMessageClass", "cpAddColorButton", "cpAddColorButtonText", "cpAddColorButtonClass", "cpRemoveColorButtonClass", "cpArrowPosition", "cpExtraTemplate"], outputs: ["cpInputChange", "cpToggleChange", "cpSliderChange", "cpSliderDragEnd", "cpSliderDragStart", "colorPickerOpen", "colorPickerClose", "colorPickerCancel", "colorPickerSelect", "colorPickerChange", "cpCmykColorChange", "cpPresetColorsChange"], exportAs: ["ngxColorPicker"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: TextFieldWidgetComponent, decorators: [{
             type: Component,
-            args: [{
-                    selector: 'app-text-field-widget',
-                    standalone: true,
-                    imports: [CommonModule, ReactiveFormsModule, ColorPickerDirective],
-                    template: `
+            args: [{ selector: 'app-text-field-widget', standalone: true, imports: [CommonModule, ReactiveFormsModule, ColorPickerDirective], template: `
     <div [class]="fieldContainerClass"
          [class.hidden]="!visible"
          [ngStyle]="getWrapperStyles()"
@@ -33070,6 +33068,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
+            [class.fd-prefixed-input]="hasDisplayPrefix()"
             [ngStyle]="getSingleLineControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
@@ -33099,6 +33098,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImpo
             [attr.aria-describedby]="getAriaDescribedBy()"
             [attr.aria-label]="getAccessibleLabel()"
             [class]="getControlClass()"
+            [class.fd-prefixed-input]="hasDisplayPrefix()"
             [ngStyle]="getSingleLineControlStyles()"
             data-fd="field-control"
             [attr.min]="config.html5?.min"
@@ -33115,8 +33115,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: [".fd-prefixed-input{padding-left:var(--fd-prefix-padding-left)!important}\n"] }]
         }], propDecorators: { config: [{
                 type: Input
             }], engine: [{