@raintonic/formaui 0.2.0

package/fesm2022/raintonic-formaui-components-dynamic-form.mjs

@@ -0,0 +1,266 @@
+import * as i0 from '@angular/core';
+import { input, output, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i1 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import * as i2 from '@angular/forms';
+import { FormControl, ReactiveFormsModule } from '@angular/forms';
+import { FuiFormFieldComponent, FuiLabelComponent, FuiErrorComponent, FuiHintComponent, FuiPrefixDirective, FuiSuffixDirective } from '@raintonic/formaui/components/form-field';
+import { FuiInputDirective } from '@raintonic/formaui/components/input';
+import { FuiSelectComponent, FuiOptionComponent } from '@raintonic/formaui/components/select';
+import { FuiAutocompleteComponent } from '@raintonic/formaui/components/autocomplete';
+import { FuiCheckboxComponent } from '@raintonic/formaui/components/checkbox';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+/**
+ * # DynamicFormRenderer Component
+ *
+ * A component that automatically renders forms based on a JSON configuration.
+ * It takes a FormGroup and a configuration object that specifies the form structure.
+ *
+ * ## Features
+ * - Supports multiple field types: input, select, autocomplete, textarea, file, checkbox
+ * - Flexible row-based layout with configurable column spans
+ * - Section grouping with customizable titles
+ * - Empty area/spacer support for layout control
+ * - Full integration with Angular reactive forms
+ * - Responsive design with mobile-first approach
+ *
+ * ## Usage
+ *
+ * ### Basic Form
+ * ```typescript
+ * @Component({
+ *   template: `
+ *     <fui-dynamic-form-renderer
+ *       [formGroup]="myForm"
+ *       [config]="formConfig"
+ *     ></fui-dynamic-form-renderer>
+ *   `
+ * })
+ * export class MyComponent {
+ *   myForm = new FormGroup({
+ *     firstName: new FormControl(''),
+ *     lastName: new FormControl(''),
+ *     email: new FormControl(''),
+ *   });
+ *
+ *   formConfig: DynamicFormConfig = {
+ *     sections: [{
+ *       title: { text: 'Personal Information', importance: 'h3' },
+ *       rows: [
+ *         {
+ *           fields: [
+ *             { key: 'firstName', type: 'input', label: 'First Name', colSpan: 6 },
+ *             { key: 'lastName', type: 'input', label: 'Last Name', colSpan: 6 },
+ *           ]
+ *         },
+ *         {
+ *           fields: [
+ *             { key: 'email', type: 'input', inputType: 'email', label: 'Email', colSpan: 12 },
+ *           ]
+ *         }
+ *       ]
+ *     }]
+ *   };
+ * }
+ * ```
+ *
+ * ### With Validation Errors
+ * ```typescript
+ * formConfig: DynamicFormConfig = {
+ *   sections: [{
+ *     rows: [{
+ *       fields: [{
+ *         key: 'email',
+ *         type: 'input',
+ *         inputType: 'email',
+ *         label: 'Email',
+ *         errors: {
+ *           required: 'Email is required',
+ *           email: 'Please enter a valid email'
+ *         }
+ *       }]
+ *     }]
+ *   }]
+ * };
+ * ```
+ *
+ * ### With Select and Autocomplete
+ * ```typescript
+ * formConfig: DynamicFormConfig = {
+ *   sections: [{
+ *     rows: [{
+ *       fields: [
+ *         {
+ *           key: 'country',
+ *           type: 'select',
+ *           label: 'Country',
+ *           options: [
+ *             { value: 'us', label: 'United States' },
+ *             { value: 'ca', label: 'Canada' },
+ *           ],
+ *           colSpan: 6
+ *         },
+ *         {
+ *           key: 'city',
+ *           type: 'autocomplete',
+ *           label: 'City',
+ *           options: [
+ *             { value: 'nyc', label: 'New York' },
+ *             { value: 'la', label: 'Los Angeles' },
+ *           ],
+ *           showAddButton: true,
+ *           colSpan: 6
+ *         }
+ *       ]
+ *     }]
+ *   }]
+ * };
+ * ```
+ */
+class FuiDynamicFormRendererComponent {
+    /**
+     * The FormGroup instance to bind the form to
+     */
+    formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : /* istanbul ignore next */ []));
+    /**
+     * The configuration object that defines the form structure
+     */
+    config = input.required(...(ngDevMode ? [{ debugName: "config" }] : /* istanbul ignore next */ []));
+    /**
+     * Emitted when an autocomplete action (add/refresh) is triggered
+     */
+    autocompleteAction = output();
+    /**
+     * Emitted when a file input changes
+     */
+    fileChange = output();
+    /**
+     * Default comparison function for select components
+     */
+    defaultCompareWith = (o1, o2) => o1 === o2;
+    /**
+     * Gets a FormControl from the FormGroup by key
+     * @param key The control name/key
+     * @returns The FormControl instance
+     */
+    getControl(key) {
+        const control = this.formGroup().get(key);
+        if (!control) {
+            // Control not found - return empty control to prevent errors
+            return new FormControl(); // Return empty control to prevent errors
+        }
+        return control;
+    }
+    /**
+     * Converts error object entries to array for iteration
+     * @param errors The errors object from field config
+     * @returns Array of key-value pairs
+     */
+    getErrorEntries(errors) {
+        return Object.entries(errors).map(([key, value]) => ({ key, value }));
+    }
+    /**
+     * Gets CSS align-items value from row align setting
+     * @param align The row alignment setting
+     * @returns CSS align-items value
+     */
+    getAlignItems(align) {
+        switch (align) {
+            case 'start':
+                return 'flex-start';
+            case 'center':
+                return 'center';
+            case 'end':
+                return 'flex-end';
+            case 'stretch':
+                return 'stretch';
+            default:
+                return 'flex-start';
+        }
+    }
+    /**
+     * Gets CSS justify-content value from row justify setting
+     * @param justify The row justification setting
+     * @returns CSS justify-content value
+     */
+    getJustifyContent(justify) {
+        switch (justify) {
+            case 'start':
+                return 'flex-start';
+            case 'center':
+                return 'center';
+            case 'end':
+                return 'flex-end';
+            case 'between':
+                return 'space-between';
+            case 'around':
+                return 'space-around';
+            case 'evenly':
+                return 'space-evenly';
+            default:
+                return 'flex-start';
+        }
+    }
+    /**
+     * Handles autocomplete add/refresh button clicks
+     * @param fieldKey The field key that triggered the action
+     * @param action The action type ('add' or 'refresh')
+     */
+    onAutocompleteAction(fieldKey, action) {
+        this.autocompleteAction.emit({ fieldKey, action });
+    }
+    /**
+     * Handles file input changes
+     * @param event The input change event
+     * @param fieldKey The field key
+     */
+    onFileChange(event, fieldKey) {
+        const input = event.target;
+        this.fileChange.emit({ fieldKey, files: input.files });
+        // Also update the form control if it exists
+        const control = this.formGroup().get(fieldKey);
+        if (control) {
+            control.setValue(input.files);
+            control.markAsTouched();
+        }
+    }
+    /**
+     * Type guard to check if a field is not a spacer
+     * @param field The field configuration
+     * @returns Whether the field has a key
+     */
+    isFieldWithKey(field) {
+        return field.type !== 'spacer' || !!field.key;
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDynamicFormRendererComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiDynamicFormRendererComponent, isStandalone: true, selector: "fui-dynamic-form-renderer", inputs: { formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { autocompleteAction: "autocompleteAction", fileChange: "fileChange" }, host: { classAttribute: "fui-dynamic-form-renderer" }, ngImport: i0, template: "<div class=\"fui-dynamic-form\" [class]=\"config().className\">\r\n  @for (section of config().sections; track $index) {\r\n    <div\r\n      class=\"fui-dynamic-form__section\"\r\n      [class]=\"section.className\"\r\n      [style.--section-row-gap]=\"section.rowGap ? 'var(--fui-spacing-' + section.rowGap + ')' : null\"\r\n    >\r\n      @if (section.title) {\r\n        <div class=\"fui-dynamic-form__title-wrapper\" [class]=\"section.title.className\">\r\n          @switch (section.title.importance) {\r\n            @case ('h1') {\r\n              <h1 class=\"fui-dynamic-form__title fui-display-xl fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h1>\r\n            }\r\n            @case ('h2') {\r\n              <h2 class=\"fui-dynamic-form__title fui-display-lg fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h2>\r\n            }\r\n            @case ('h3') {\r\n              <h3 class=\"fui-dynamic-form__title fui-display-md fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h3>\r\n            }\r\n            @case ('h4') {\r\n              <h4 class=\"fui-dynamic-form__title fui-display-sm fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h4>\r\n            }\r\n            @case ('h5') {\r\n              <h5 class=\"fui-dynamic-form__title fui-display-xs fui-font-medium\">\r\n                {{ section.title.text }}\r\n              </h5>\r\n            }\r\n            @case ('h6') {\r\n              <h6 class=\"fui-dynamic-form__title fui-text-xl fui-font-medium\">{{ section.title.text }}</h6>\r\n            }\r\n          }\r\n          @if (section.title.description) {\r\n            <p class=\"fui-dynamic-form__description fui-text-md\">{{ section.title.description }}</p>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @for (row of section.rows; track $index) {\r\n        <div\r\n          class=\"fui-dynamic-form__row\"\r\n          [class]=\"row.className\"\r\n          [style.--row-gap]=\"row.gap ? 'var(--fui-spacing-' + row.gap + ')' : null\"\r\n          [style.align-items]=\"getAlignItems(row.align)\"\r\n          [style.justify-content]=\"getJustifyContent(row.justify)\"\r\n        >\r\n          @for (field of row.fields; track field.key ?? $index) {\r\n            <div class=\"fui-dynamic-form__field\" [class]=\"field.className\" [style.--field-col-span]=\"field.colSpan\">\r\n              @switch (field.type) {\r\n                @case ('input') {\r\n                  <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('textarea') {\r\n                  <ng-container *ngTemplateOutlet=\"textareaTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('select') {\r\n                  <ng-container *ngTemplateOutlet=\"selectTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('autocomplete') {\r\n                  <ng-container *ngTemplateOutlet=\"autocompleteTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('checkbox') {\r\n                  <ng-container *ngTemplateOutlet=\"checkboxTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('file') {\r\n                  <ng-container *ngTemplateOutlet=\"fileTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('spacer') {\r\n                  <div class=\"fui-dynamic-form__spacer\"></div>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- Input Template -->\r\n<ng-template #inputTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    @if (field.prefixIcon) {\r\n      <fui-icon fuiPrefix [name]=\"field.prefixIcon\"></fui-icon>\r\n    }\r\n    <input\r\n      fuiInput\r\n      [type]=\"field.inputType || 'text'\"\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [readonly]=\"field.readonly || false\"\r\n      [maxlength]=\"field.maxLength\"\r\n      [minlength]=\"field.minLength\"\r\n      [pattern]=\"field.pattern\"\r\n      [min]=\"field.min\"\r\n      [max]=\"field.max\"\r\n      [step]=\"field.step\"\r\n    />\r\n    @if (field.suffixIcon) {\r\n      <fui-icon fuiSuffix [name]=\"field.suffixIcon\"></fui-icon>\r\n    }\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Textarea Template -->\r\n<ng-template #textareaTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    <textarea\r\n      fuiInput\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [readonly]=\"field.readonly || false\"\r\n      [rows]=\"field.rows || 3\"\r\n      [maxlength]=\"field.maxLength\"\r\n      [minlength]=\"field.minLength\"\r\n    ></textarea>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Select Template -->\r\n<ng-template #selectTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    @if (field.prefixIcon) {\r\n      <fui-icon fuiPrefix [name]=\"field.prefixIcon\"></fui-icon>\r\n    }\r\n    <fui-select\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [multiple]=\"field.multiple || false\"\r\n      [compareWith]=\"field.compareWith || defaultCompareWith\"\r\n    >\r\n      @for (option of field.options; track option.value) {\r\n        <fui-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\r\n          {{ option.label }}\r\n        </fui-option>\r\n      }\r\n    </fui-select>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Autocomplete Template -->\r\n<ng-template #autocompleteTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    <fui-autocomplete\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [showAddButton]=\"field.showAddButton || false\"\r\n      [showRefreshButton]=\"field.showRefreshButton || false\"\r\n      [addButtonLabel]=\"field.addButtonLabel || 'Add New'\"\r\n      [refreshButtonLabel]=\"field.refreshButtonLabel || 'Refresh'\"\r\n      [noOptionsText]=\"field.noOptionsText || 'No options found'\"\r\n      [searchPlaceholder]=\"field.searchPlaceholder || 'Search...'\"\r\n      (addNew)=\"onAutocompleteAction(field.key, 'add')\"\r\n      (refresh)=\"onAutocompleteAction(field.key, 'refresh')\"\r\n    ></fui-autocomplete>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Checkbox Template -->\r\n<ng-template #checkboxTemplate let-field>\r\n  <div class=\"fui-dynamic-form__checkbox-wrapper\">\r\n    <fui-checkbox [formControl]=\"getControl(field.key)\" [labelPosition]=\"field.labelPosition || 'after'\">\r\n      {{ field.label }}\r\n    </fui-checkbox>\r\n    @if (field.hint) {\r\n      <div class=\"fui-dynamic-form__checkbox-hint fui-text-sm\">{{ field.hint }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- File Template -->\r\n<ng-template #fileTemplate let-field>\r\n  <div class=\"fui-dynamic-form__file-field\">\r\n    @if (field.label && !field.hideLabel) {\r\n      <label class=\"fui-dynamic-form__file-label fui-text-sm\">{{ field.label }}</label>\r\n    }\r\n    <input\r\n      type=\"file\"\r\n      class=\"fui-dynamic-form__file-input\"\r\n      [accept]=\"field.fileConfig?.accept\"\r\n      [multiple]=\"field.fileConfig?.multiple || false\"\r\n      [disabled]=\"field.disabled || false\"\r\n      (change)=\"onFileChange($event, field.key)\"\r\n    />\r\n    @if (field.hint) {\r\n      <div class=\"fui-dynamic-form__file-hint fui-text-sm\">{{ field.hint }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Errors Template -->\r\n<ng-template #errorsTemplate let-field>\r\n  @if (field.errors && getControl(field.key)) {\r\n    @for (errorEntry of getErrorEntries(field.errors); track errorEntry.key) {\r\n      @if (getControl(field.key).hasError(errorEntry.key)) {\r\n        <fui-error>{{ errorEntry.value }}</fui-error>\r\n      }\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-dynamic-form{display:flex;flex-direction:column;gap:var(--fui-spacing-07);width:100%}.fui-dynamic-form__section{display:flex;flex-direction:column;gap:var(--section-row-gap, var(--fui-spacing-05))}.fui-dynamic-form__title-wrapper{display:flex;flex-direction:column;gap:var(--fui-spacing-02);margin-bottom:var(--fui-spacing-03)}.fui-dynamic-form__title{margin:0;padding:0;color:var(--fui-text-primary)}.fui-dynamic-form__description{margin:0;padding:0;color:var(--fui-text-secondary)}.fui-dynamic-form__row{display:flex;flex-wrap:wrap;gap:var(--row-gap, var(--fui-spacing-05));width:100%}.fui-dynamic-form__field{flex:1 1 auto;min-width:0}.fui-dynamic-form__field[style*=\"--field-col-span: 1\"]{flex:0 0 calc(1 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(1 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 2\"]{flex:0 0 calc(2 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(2 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 3\"]{flex:0 0 calc(3 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(3 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 4\"]{flex:0 0 calc(4 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(4 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 5\"]{flex:0 0 calc(5 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(5 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 6\"]{flex:0 0 calc(6 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(6 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 7\"]{flex:0 0 calc(7 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(7 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 8\"]{flex:0 0 calc(8 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(8 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 9\"]{flex:0 0 calc(9 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(9 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 10\"]{flex:0 0 calc(10 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(10 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 11\"]{flex:0 0 calc(11 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(11 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 12\"]{flex:0 0 calc(12 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(12 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 12\"]{flex:0 0 100%;max-width:100%}.fui-dynamic-form__spacer{width:100%;height:1px;visibility:hidden}.fui-dynamic-form__checkbox-wrapper{display:flex;flex-direction:column;gap:var(--fui-spacing-02);padding-top:var(--fui-spacing-06)}.fui-dynamic-form__checkbox-hint{color:var(--fui-text-secondary);margin-left:calc(1.125rem + var(--fui-spacing-03))}.fui-dynamic-form__file-field{display:flex;flex-direction:column;gap:var(--fui-spacing-02)}.fui-dynamic-form__file-label{color:var(--fui-text-primary);font-weight:var(--fui-font-weight-medium)}.fui-dynamic-form__file-input{padding:var(--fui-spacing-03);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-00);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02)}.fui-dynamic-form__file-input:focus{outline:none;border-color:var(--fui-primary);box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-dynamic-form__file-input:disabled{opacity:.5;cursor:not-allowed}.fui-dynamic-form__file-input::file-selector-button{padding:var(--fui-spacing-02) var(--fui-spacing-04);margin-right:var(--fui-spacing-03);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-01);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);cursor:pointer;transition:background-color,border-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-dynamic-form__file-input::file-selector-button:hover{background-color:var(--fui-surface-02)}.fui-dynamic-form__file-hint{color:var(--fui-text-secondary)}@media(max-width:768px){.fui-dynamic-form__row{flex-direction:column}.fui-dynamic-form__field{flex:0 0 100%!important;max-width:100%!important}.fui-dynamic-form__checkbox-wrapper{padding-top:0}}:host{display:block;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { 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.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { 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: "component", type: FuiFormFieldComponent, selector: "fui-form-field", inputs: ["readOnly", "appearance", "hideRequiredMarker", "hideSubscript"] }, { kind: "component", type: FuiLabelComponent, selector: "fui-label" }, { kind: "component", type: FuiErrorComponent, selector: "fui-error", inputs: ["key"] }, { kind: "component", type: FuiHintComponent, selector: "fui-hint" }, { kind: "directive", type: FuiPrefixDirective, selector: "[fuiPrefix]" }, { kind: "directive", type: FuiSuffixDirective, selector: "[fuiSuffix]" }, { kind: "directive", type: FuiInputDirective, selector: "input[fuiInput], textarea[fuiInput], select[fuiInput]", inputs: ["type", "placeholder", "readonly", "maxlength", "minlength", "pattern", "errorStateMatcher", "disabledInput"], outputs: ["valueChange"] }, { kind: "component", type: FuiSelectComponent, selector: "fui-select", inputs: ["placeholder", "disabled", "readonly", "multiple", "errorStateMatcher", "compareWith"], outputs: ["valueChange", "selectionChange", "openedChange"] }, { kind: "component", type: FuiOptionComponent, selector: "fui-option", inputs: ["value", "disabled"], outputs: ["selectionChange"] }, { kind: "component", type: FuiAutocompleteComponent, selector: "fui-autocomplete", inputs: ["placeholder", "disabled", "readonly", "showAddButton", "showRefreshButton", "addButtonLabel", "refreshButtonLabel", "noOptionsText", "searchPlaceholder", "errorStateMatcher", "compareWith"], outputs: ["valueChange", "selectionChange", "openedChange", "addNew", "refresh", "searchChange"] }, { kind: "component", type: FuiCheckboxComponent, selector: "fui-checkbox", inputs: ["readonly", "checked", "disabled", "indeterminate", "required", "labelPosition", "name", "value", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "errorStateMatcher"], outputs: ["change", "indeterminateChange"] }, { kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiDynamicFormRendererComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-dynamic-form-renderer', standalone: true, imports: [
+                        CommonModule,
+                        ReactiveFormsModule,
+                        FuiFormFieldComponent,
+                        FuiLabelComponent,
+                        FuiErrorComponent,
+                        FuiHintComponent,
+                        FuiPrefixDirective,
+                        FuiSuffixDirective,
+                        FuiInputDirective,
+                        FuiSelectComponent,
+                        FuiOptionComponent,
+                        FuiAutocompleteComponent,
+                        FuiCheckboxComponent,
+                        FuiIconComponent,
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-dynamic-form-renderer',
+                    }, template: "<div class=\"fui-dynamic-form\" [class]=\"config().className\">\r\n  @for (section of config().sections; track $index) {\r\n    <div\r\n      class=\"fui-dynamic-form__section\"\r\n      [class]=\"section.className\"\r\n      [style.--section-row-gap]=\"section.rowGap ? 'var(--fui-spacing-' + section.rowGap + ')' : null\"\r\n    >\r\n      @if (section.title) {\r\n        <div class=\"fui-dynamic-form__title-wrapper\" [class]=\"section.title.className\">\r\n          @switch (section.title.importance) {\r\n            @case ('h1') {\r\n              <h1 class=\"fui-dynamic-form__title fui-display-xl fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h1>\r\n            }\r\n            @case ('h2') {\r\n              <h2 class=\"fui-dynamic-form__title fui-display-lg fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h2>\r\n            }\r\n            @case ('h3') {\r\n              <h3 class=\"fui-dynamic-form__title fui-display-md fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h3>\r\n            }\r\n            @case ('h4') {\r\n              <h4 class=\"fui-dynamic-form__title fui-display-sm fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h4>\r\n            }\r\n            @case ('h5') {\r\n              <h5 class=\"fui-dynamic-form__title fui-display-xs fui-font-medium\">\r\n                {{ section.title.text }}\r\n              </h5>\r\n            }\r\n            @case ('h6') {\r\n              <h6 class=\"fui-dynamic-form__title fui-text-xl fui-font-medium\">{{ section.title.text }}</h6>\r\n            }\r\n          }\r\n          @if (section.title.description) {\r\n            <p class=\"fui-dynamic-form__description fui-text-md\">{{ section.title.description }}</p>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @for (row of section.rows; track $index) {\r\n        <div\r\n          class=\"fui-dynamic-form__row\"\r\n          [class]=\"row.className\"\r\n          [style.--row-gap]=\"row.gap ? 'var(--fui-spacing-' + row.gap + ')' : null\"\r\n          [style.align-items]=\"getAlignItems(row.align)\"\r\n          [style.justify-content]=\"getJustifyContent(row.justify)\"\r\n        >\r\n          @for (field of row.fields; track field.key ?? $index) {\r\n            <div class=\"fui-dynamic-form__field\" [class]=\"field.className\" [style.--field-col-span]=\"field.colSpan\">\r\n              @switch (field.type) {\r\n                @case ('input') {\r\n                  <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('textarea') {\r\n                  <ng-container *ngTemplateOutlet=\"textareaTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('select') {\r\n                  <ng-container *ngTemplateOutlet=\"selectTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('autocomplete') {\r\n                  <ng-container *ngTemplateOutlet=\"autocompleteTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('checkbox') {\r\n                  <ng-container *ngTemplateOutlet=\"checkboxTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('file') {\r\n                  <ng-container *ngTemplateOutlet=\"fileTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('spacer') {\r\n                  <div class=\"fui-dynamic-form__spacer\"></div>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- Input Template -->\r\n<ng-template #inputTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    @if (field.prefixIcon) {\r\n      <fui-icon fuiPrefix [name]=\"field.prefixIcon\"></fui-icon>\r\n    }\r\n    <input\r\n      fuiInput\r\n      [type]=\"field.inputType || 'text'\"\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [readonly]=\"field.readonly || false\"\r\n      [maxlength]=\"field.maxLength\"\r\n      [minlength]=\"field.minLength\"\r\n      [pattern]=\"field.pattern\"\r\n      [min]=\"field.min\"\r\n      [max]=\"field.max\"\r\n      [step]=\"field.step\"\r\n    />\r\n    @if (field.suffixIcon) {\r\n      <fui-icon fuiSuffix [name]=\"field.suffixIcon\"></fui-icon>\r\n    }\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Textarea Template -->\r\n<ng-template #textareaTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    <textarea\r\n      fuiInput\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [readonly]=\"field.readonly || false\"\r\n      [rows]=\"field.rows || 3\"\r\n      [maxlength]=\"field.maxLength\"\r\n      [minlength]=\"field.minLength\"\r\n    ></textarea>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Select Template -->\r\n<ng-template #selectTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    @if (field.prefixIcon) {\r\n      <fui-icon fuiPrefix [name]=\"field.prefixIcon\"></fui-icon>\r\n    }\r\n    <fui-select\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [multiple]=\"field.multiple || false\"\r\n      [compareWith]=\"field.compareWith || defaultCompareWith\"\r\n    >\r\n      @for (option of field.options; track option.value) {\r\n        <fui-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\r\n          {{ option.label }}\r\n        </fui-option>\r\n      }\r\n    </fui-select>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Autocomplete Template -->\r\n<ng-template #autocompleteTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    <fui-autocomplete\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [showAddButton]=\"field.showAddButton || false\"\r\n      [showRefreshButton]=\"field.showRefreshButton || false\"\r\n      [addButtonLabel]=\"field.addButtonLabel || 'Add New'\"\r\n      [refreshButtonLabel]=\"field.refreshButtonLabel || 'Refresh'\"\r\n      [noOptionsText]=\"field.noOptionsText || 'No options found'\"\r\n      [searchPlaceholder]=\"field.searchPlaceholder || 'Search...'\"\r\n      (addNew)=\"onAutocompleteAction(field.key, 'add')\"\r\n      (refresh)=\"onAutocompleteAction(field.key, 'refresh')\"\r\n    ></fui-autocomplete>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Checkbox Template -->\r\n<ng-template #checkboxTemplate let-field>\r\n  <div class=\"fui-dynamic-form__checkbox-wrapper\">\r\n    <fui-checkbox [formControl]=\"getControl(field.key)\" [labelPosition]=\"field.labelPosition || 'after'\">\r\n      {{ field.label }}\r\n    </fui-checkbox>\r\n    @if (field.hint) {\r\n      <div class=\"fui-dynamic-form__checkbox-hint fui-text-sm\">{{ field.hint }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- File Template -->\r\n<ng-template #fileTemplate let-field>\r\n  <div class=\"fui-dynamic-form__file-field\">\r\n    @if (field.label && !field.hideLabel) {\r\n      <label class=\"fui-dynamic-form__file-label fui-text-sm\">{{ field.label }}</label>\r\n    }\r\n    <input\r\n      type=\"file\"\r\n      class=\"fui-dynamic-form__file-input\"\r\n      [accept]=\"field.fileConfig?.accept\"\r\n      [multiple]=\"field.fileConfig?.multiple || false\"\r\n      [disabled]=\"field.disabled || false\"\r\n      (change)=\"onFileChange($event, field.key)\"\r\n    />\r\n    @if (field.hint) {\r\n      <div class=\"fui-dynamic-form__file-hint fui-text-sm\">{{ field.hint }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Errors Template -->\r\n<ng-template #errorsTemplate let-field>\r\n  @if (field.errors && getControl(field.key)) {\r\n    @for (errorEntry of getErrorEntries(field.errors); track errorEntry.key) {\r\n      @if (getControl(field.key).hasError(errorEntry.key)) {\r\n        <fui-error>{{ errorEntry.value }}</fui-error>\r\n      }\r\n    }\r\n  }\r\n</ng-template>\r\n", styles: ["@keyframes fui-skeleton-pulse{0%{opacity:1}50%{opacity:.4}to{opacity:1}}@keyframes fui-spin{to{transform:rotate(360deg)}}@keyframes fui-shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-2px)}20%,40%,60%,80%{transform:translate(2px)}}.fui-motion-fade-in{transition:opacity var(--fui-duration-fast-02) var(--fui-ease-entrance) 0ms}.fui-motion-fade-out{transition:opacity var(--fui-duration-fast-01) var(--fui-ease-exit) 0ms}.fui-motion-slide-in-bottom{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-bottom.fui-motion-entering{transform:translateY(1rem)}.fui-motion-slide-in-top{transition:transform var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:translateY(0)}.fui-motion-slide-in-top.fui-motion-entering{transform:translateY(-1rem)}.fui-motion-scale-in{transition:transform,opacity var(--fui-duration-moderate-01) var(--fui-ease-entrance) 0ms;transform:scale(1);opacity:1}.fui-motion-scale-in.fui-motion-entering{transform:scale(.95);opacity:0}.fui-no-motion{transition:none!important;animation:none!important}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@keyframes fui-pulse{0%{transform:scale(1);opacity:1}50%{transform:scale(1.05)}to{transform:scale(1);opacity:1}}@keyframes fui-slide-in{0%{transform:translate(120%)}to{transform:translate(0)}}.fui-slide-in{animation:fui-slide-in var(--fui-duration-moderate-01) var(--fui-ease-entrance)}.fui-dynamic-form{display:flex;flex-direction:column;gap:var(--fui-spacing-07);width:100%}.fui-dynamic-form__section{display:flex;flex-direction:column;gap:var(--section-row-gap, var(--fui-spacing-05))}.fui-dynamic-form__title-wrapper{display:flex;flex-direction:column;gap:var(--fui-spacing-02);margin-bottom:var(--fui-spacing-03)}.fui-dynamic-form__title{margin:0;padding:0;color:var(--fui-text-primary)}.fui-dynamic-form__description{margin:0;padding:0;color:var(--fui-text-secondary)}.fui-dynamic-form__row{display:flex;flex-wrap:wrap;gap:var(--row-gap, var(--fui-spacing-05));width:100%}.fui-dynamic-form__field{flex:1 1 auto;min-width:0}.fui-dynamic-form__field[style*=\"--field-col-span: 1\"]{flex:0 0 calc(1 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(1 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 2\"]{flex:0 0 calc(2 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(2 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 3\"]{flex:0 0 calc(3 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(3 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 4\"]{flex:0 0 calc(4 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(4 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 5\"]{flex:0 0 calc(5 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(5 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 6\"]{flex:0 0 calc(6 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(6 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 7\"]{flex:0 0 calc(7 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(7 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 8\"]{flex:0 0 calc(8 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(8 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 9\"]{flex:0 0 calc(9 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(9 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 10\"]{flex:0 0 calc(10 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(10 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 11\"]{flex:0 0 calc(11 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(11 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 12\"]{flex:0 0 calc(12 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)));max-width:calc(12 / 12 * 100% - var(--row-gap, var(--fui-spacing-05)))}.fui-dynamic-form__field[style*=\"--field-col-span: 12\"]{flex:0 0 100%;max-width:100%}.fui-dynamic-form__spacer{width:100%;height:1px;visibility:hidden}.fui-dynamic-form__checkbox-wrapper{display:flex;flex-direction:column;gap:var(--fui-spacing-02);padding-top:var(--fui-spacing-06)}.fui-dynamic-form__checkbox-hint{color:var(--fui-text-secondary);margin-left:calc(1.125rem + var(--fui-spacing-03))}.fui-dynamic-form__file-field{display:flex;flex-direction:column;gap:var(--fui-spacing-02)}.fui-dynamic-form__file-label{color:var(--fui-text-primary);font-weight:var(--fui-font-weight-medium)}.fui-dynamic-form__file-input{padding:var(--fui-spacing-03);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-00);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02)}.fui-dynamic-form__file-input:focus{outline:none;border-color:var(--fui-primary);box-shadow:0 0 0 4px var(--fui-primary-20)}.fui-dynamic-form__file-input:disabled{opacity:.5;cursor:not-allowed}.fui-dynamic-form__file-input::file-selector-button{padding:var(--fui-spacing-02) var(--fui-spacing-04);margin-right:var(--fui-spacing-03);border:1px solid var(--fui-border-color);border-radius:var(--fui-border-radius-sm);background-color:var(--fui-surface-01);color:var(--fui-text-primary);font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-02);cursor:pointer;transition:background-color,border-color var(--fui-duration-fast-02) var(--fui-ease-standard) 0ms}.fui-dynamic-form__file-input::file-selector-button:hover{background-color:var(--fui-surface-02)}.fui-dynamic-form__file-hint{color:var(--fui-text-secondary)}@media(max-width:768px){.fui-dynamic-form__row{flex-direction:column}.fui-dynamic-form__field{flex:0 0 100%!important;max-width:100%!important}.fui-dynamic-form__checkbox-wrapper{padding-top:0}}:host{display:block;width:100%}\n"] }]
+        }], propDecorators: { formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], autocompleteAction: [{ type: i0.Output, args: ["autocompleteAction"] }], fileChange: [{ type: i0.Output, args: ["fileChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiDynamicFormRendererComponent };
+//# sourceMappingURL=raintonic-formaui-components-dynamic-form.mjs.map

package/fesm2022/raintonic-formaui-components-dynamic-form.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-components-dynamic-form.mjs","sources":["../../../lib/components/dynamic-form/dynamic-form-renderer.component.ts","../../../lib/components/dynamic-form/dynamic-form-renderer.component.html","../../../lib/components/dynamic-form/raintonic-formaui-components-dynamic-form.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  input,\n  InputSignal,\n  output,\n  OutputEmitterRef,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { CommonModule } from '@angular/common';\nimport { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';\n\nimport {\n  FuiFormFieldComponent,\n  FuiLabelComponent,\n  FuiErrorComponent,\n  FuiHintComponent,\n  FuiPrefixDirective,\n  FuiSuffixDirective,\n} from '@raintonic/formaui/components/form-field';\nimport { FuiInputDirective } from '@raintonic/formaui/components/input';\nimport { FuiSelectComponent, FuiOptionComponent } from '@raintonic/formaui/components/select';\nimport { FuiAutocompleteComponent } from '@raintonic/formaui/components/autocomplete';\nimport { FuiCheckboxComponent } from '@raintonic/formaui/components/checkbox';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\n\nimport {\n  DynamicFormConfig,\n  DynamicFormField,\n  DynamicFormRow,\n  DynamicFormAutocompleteEvent,\n  DynamicFormFileEvent,\n} from './dynamic-form.types';\n\n/**\n * # DynamicFormRenderer Component\n *\n * A component that automatically renders forms based on a JSON configuration.\n * It takes a FormGroup and a configuration object that specifies the form structure.\n *\n * ## Features\n * - Supports multiple field types: input, select, autocomplete, textarea, file, checkbox\n * - Flexible row-based layout with configurable column spans\n * - Section grouping with customizable titles\n * - Empty area/spacer support for layout control\n * - Full integration with Angular reactive forms\n * - Responsive design with mobile-first approach\n *\n * ## Usage\n *\n * ### Basic Form\n * ```typescript\n * @Component({\n *   template: `\n *     <fui-dynamic-form-renderer\n *       [formGroup]=\"myForm\"\n *       [config]=\"formConfig\"\n *     ></fui-dynamic-form-renderer>\n *   `\n * })\n * export class MyComponent {\n *   myForm = new FormGroup({\n *     firstName: new FormControl(''),\n *     lastName: new FormControl(''),\n *     email: new FormControl(''),\n *   });\n *\n *   formConfig: DynamicFormConfig = {\n *     sections: [{\n *       title: { text: 'Personal Information', importance: 'h3' },\n *       rows: [\n *         {\n *           fields: [\n *             { key: 'firstName', type: 'input', label: 'First Name', colSpan: 6 },\n *             { key: 'lastName', type: 'input', label: 'Last Name', colSpan: 6 },\n *           ]\n *         },\n *         {\n *           fields: [\n *             { key: 'email', type: 'input', inputType: 'email', label: 'Email', colSpan: 12 },\n *           ]\n *         }\n *       ]\n *     }]\n *   };\n * }\n * ```\n *\n * ### With Validation Errors\n * ```typescript\n * formConfig: DynamicFormConfig = {\n *   sections: [{\n *     rows: [{\n *       fields: [{\n *         key: 'email',\n *         type: 'input',\n *         inputType: 'email',\n *         label: 'Email',\n *         errors: {\n *           required: 'Email is required',\n *           email: 'Please enter a valid email'\n *         }\n *       }]\n *     }]\n *   }]\n * };\n * ```\n *\n * ### With Select and Autocomplete\n * ```typescript\n * formConfig: DynamicFormConfig = {\n *   sections: [{\n *     rows: [{\n *       fields: [\n *         {\n *           key: 'country',\n *           type: 'select',\n *           label: 'Country',\n *           options: [\n *             { value: 'us', label: 'United States' },\n *             { value: 'ca', label: 'Canada' },\n *           ],\n *           colSpan: 6\n *         },\n *         {\n *           key: 'city',\n *           type: 'autocomplete',\n *           label: 'City',\n *           options: [\n *             { value: 'nyc', label: 'New York' },\n *             { value: 'la', label: 'Los Angeles' },\n *           ],\n *           showAddButton: true,\n *           colSpan: 6\n *         }\n *       ]\n *     }]\n *   }]\n * };\n * ```\n */\n@Component({\n  selector: 'fui-dynamic-form-renderer',\n  standalone: true,\n  imports: [\n    CommonModule,\n    ReactiveFormsModule,\n    FuiFormFieldComponent,\n    FuiLabelComponent,\n    FuiErrorComponent,\n    FuiHintComponent,\n    FuiPrefixDirective,\n    FuiSuffixDirective,\n    FuiInputDirective,\n    FuiSelectComponent,\n    FuiOptionComponent,\n    FuiAutocompleteComponent,\n    FuiCheckboxComponent,\n    FuiIconComponent,\n  ],\n  templateUrl: './dynamic-form-renderer.component.html',\n  styleUrls: ['./dynamic-form-renderer.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-dynamic-form-renderer',\n  },\n})\nexport class FuiDynamicFormRendererComponent {\n  /**\n   * The FormGroup instance to bind the form to\n   */\n  readonly formGroup: InputSignal<FormGroup> = input.required<FormGroup>();\n\n  /**\n   * The configuration object that defines the form structure\n   */\n  readonly config: InputSignal<DynamicFormConfig> = input.required<DynamicFormConfig>();\n\n  /**\n   * Emitted when an autocomplete action (add/refresh) is triggered\n   */\n  readonly autocompleteAction: OutputEmitterRef<DynamicFormAutocompleteEvent> = output<DynamicFormAutocompleteEvent>();\n\n  /**\n   * Emitted when a file input changes\n   */\n  readonly fileChange: OutputEmitterRef<DynamicFormFileEvent> = output<DynamicFormFileEvent>();\n\n  /**\n   * Default comparison function for select components\n   */\n  readonly defaultCompareWith = (o1: unknown, o2: unknown): boolean => o1 === o2;\n\n  /**\n   * Gets a FormControl from the FormGroup by key\n   * @param key The control name/key\n   * @returns The FormControl instance\n   */\n  getControl(key: string): FormControl {\n    const control = this.formGroup().get(key);\n    if (!control) {\n      // Control not found - return empty control to prevent errors\n      return new FormControl(); // Return empty control to prevent errors\n    }\n    return control as FormControl;\n  }\n\n  /**\n   * Converts error object entries to array for iteration\n   * @param errors The errors object from field config\n   * @returns Array of key-value pairs\n   */\n  getErrorEntries(errors: Record<string, string>): { key: string; value: string }[] {\n    return Object.entries(errors).map(([key, value]) => ({ key, value }));\n  }\n\n  /**\n   * Gets CSS align-items value from row align setting\n   * @param align The row alignment setting\n   * @returns CSS align-items value\n   */\n  getAlignItems(align?: DynamicFormRow['align']): string {\n    switch (align) {\n      case 'start':\n        return 'flex-start';\n      case 'center':\n        return 'center';\n      case 'end':\n        return 'flex-end';\n      case 'stretch':\n        return 'stretch';\n      default:\n        return 'flex-start';\n    }\n  }\n\n  /**\n   * Gets CSS justify-content value from row justify setting\n   * @param justify The row justification setting\n   * @returns CSS justify-content value\n   */\n  getJustifyContent(justify?: DynamicFormRow['justify']): string {\n    switch (justify) {\n      case 'start':\n        return 'flex-start';\n      case 'center':\n        return 'center';\n      case 'end':\n        return 'flex-end';\n      case 'between':\n        return 'space-between';\n      case 'around':\n        return 'space-around';\n      case 'evenly':\n        return 'space-evenly';\n      default:\n        return 'flex-start';\n    }\n  }\n\n  /**\n   * Handles autocomplete add/refresh button clicks\n   * @param fieldKey The field key that triggered the action\n   * @param action The action type ('add' or 'refresh')\n   */\n  onAutocompleteAction(fieldKey: string, action: 'add' | 'refresh'): void {\n    this.autocompleteAction.emit({ fieldKey, action });\n  }\n\n  /**\n   * Handles file input changes\n   * @param event The input change event\n   * @param fieldKey The field key\n   */\n  onFileChange(event: Event, fieldKey: string): void {\n    const input = event.target as HTMLInputElement;\n    this.fileChange.emit({ fieldKey, files: input.files });\n\n    // Also update the form control if it exists\n    const control = this.formGroup().get(fieldKey);\n    if (control) {\n      control.setValue(input.files);\n      control.markAsTouched();\n    }\n  }\n\n  /**\n   * Type guard to check if a field is not a spacer\n   * @param field The field configuration\n   * @returns Whether the field has a key\n   */\n  isFieldWithKey(field: DynamicFormField): field is Exclude<DynamicFormField, { type: 'spacer' }> {\n    return field.type !== 'spacer' || !!field.key;\n  }\n}\n","<div class=\"fui-dynamic-form\" [class]=\"config().className\">\r\n  @for (section of config().sections; track $index) {\r\n    <div\r\n      class=\"fui-dynamic-form__section\"\r\n      [class]=\"section.className\"\r\n      [style.--section-row-gap]=\"section.rowGap ? 'var(--fui-spacing-' + section.rowGap + ')' : null\"\r\n    >\r\n      @if (section.title) {\r\n        <div class=\"fui-dynamic-form__title-wrapper\" [class]=\"section.title.className\">\r\n          @switch (section.title.importance) {\r\n            @case ('h1') {\r\n              <h1 class=\"fui-dynamic-form__title fui-display-xl fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h1>\r\n            }\r\n            @case ('h2') {\r\n              <h2 class=\"fui-dynamic-form__title fui-display-lg fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h2>\r\n            }\r\n            @case ('h3') {\r\n              <h3 class=\"fui-dynamic-form__title fui-display-md fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h3>\r\n            }\r\n            @case ('h4') {\r\n              <h4 class=\"fui-dynamic-form__title fui-display-sm fui-font-semibold\">\r\n                {{ section.title.text }}\r\n              </h4>\r\n            }\r\n            @case ('h5') {\r\n              <h5 class=\"fui-dynamic-form__title fui-display-xs fui-font-medium\">\r\n                {{ section.title.text }}\r\n              </h5>\r\n            }\r\n            @case ('h6') {\r\n              <h6 class=\"fui-dynamic-form__title fui-text-xl fui-font-medium\">{{ section.title.text }}</h6>\r\n            }\r\n          }\r\n          @if (section.title.description) {\r\n            <p class=\"fui-dynamic-form__description fui-text-md\">{{ section.title.description }}</p>\r\n          }\r\n        </div>\r\n      }\r\n\r\n      @for (row of section.rows; track $index) {\r\n        <div\r\n          class=\"fui-dynamic-form__row\"\r\n          [class]=\"row.className\"\r\n          [style.--row-gap]=\"row.gap ? 'var(--fui-spacing-' + row.gap + ')' : null\"\r\n          [style.align-items]=\"getAlignItems(row.align)\"\r\n          [style.justify-content]=\"getJustifyContent(row.justify)\"\r\n        >\r\n          @for (field of row.fields; track field.key ?? $index) {\r\n            <div class=\"fui-dynamic-form__field\" [class]=\"field.className\" [style.--field-col-span]=\"field.colSpan\">\r\n              @switch (field.type) {\r\n                @case ('input') {\r\n                  <ng-container *ngTemplateOutlet=\"inputTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('textarea') {\r\n                  <ng-container *ngTemplateOutlet=\"textareaTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('select') {\r\n                  <ng-container *ngTemplateOutlet=\"selectTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('autocomplete') {\r\n                  <ng-container *ngTemplateOutlet=\"autocompleteTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('checkbox') {\r\n                  <ng-container *ngTemplateOutlet=\"checkboxTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('file') {\r\n                  <ng-container *ngTemplateOutlet=\"fileTemplate; context: { $implicit: field }\"></ng-container>\r\n                }\r\n                @case ('spacer') {\r\n                  <div class=\"fui-dynamic-form__spacer\"></div>\r\n                }\r\n              }\r\n            </div>\r\n          }\r\n        </div>\r\n      }\r\n    </div>\r\n  }\r\n</div>\r\n\r\n<!-- Input Template -->\r\n<ng-template #inputTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    @if (field.prefixIcon) {\r\n      <fui-icon fuiPrefix [name]=\"field.prefixIcon\"></fui-icon>\r\n    }\r\n    <input\r\n      fuiInput\r\n      [type]=\"field.inputType || 'text'\"\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [readonly]=\"field.readonly || false\"\r\n      [maxlength]=\"field.maxLength\"\r\n      [minlength]=\"field.minLength\"\r\n      [pattern]=\"field.pattern\"\r\n      [min]=\"field.min\"\r\n      [max]=\"field.max\"\r\n      [step]=\"field.step\"\r\n    />\r\n    @if (field.suffixIcon) {\r\n      <fui-icon fuiSuffix [name]=\"field.suffixIcon\"></fui-icon>\r\n    }\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Textarea Template -->\r\n<ng-template #textareaTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    <textarea\r\n      fuiInput\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [readonly]=\"field.readonly || false\"\r\n      [rows]=\"field.rows || 3\"\r\n      [maxlength]=\"field.maxLength\"\r\n      [minlength]=\"field.minLength\"\r\n    ></textarea>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Select Template -->\r\n<ng-template #selectTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    @if (field.prefixIcon) {\r\n      <fui-icon fuiPrefix [name]=\"field.prefixIcon\"></fui-icon>\r\n    }\r\n    <fui-select\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [multiple]=\"field.multiple || false\"\r\n      [compareWith]=\"field.compareWith || defaultCompareWith\"\r\n    >\r\n      @for (option of field.options; track option.value) {\r\n        <fui-option [value]=\"option.value\" [disabled]=\"option.disabled || false\">\r\n          {{ option.label }}\r\n        </fui-option>\r\n      }\r\n    </fui-select>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Autocomplete Template -->\r\n<ng-template #autocompleteTemplate let-field>\r\n  <fui-form-field>\r\n    @if (field.label && !field.hideLabel) {\r\n      <fui-label>{{ field.label }}</fui-label>\r\n    }\r\n    <fui-autocomplete\r\n      [formControl]=\"getControl(field.key)\"\r\n      [placeholder]=\"field.placeholder || ''\"\r\n      [showAddButton]=\"field.showAddButton || false\"\r\n      [showRefreshButton]=\"field.showRefreshButton || false\"\r\n      [addButtonLabel]=\"field.addButtonLabel || 'Add New'\"\r\n      [refreshButtonLabel]=\"field.refreshButtonLabel || 'Refresh'\"\r\n      [noOptionsText]=\"field.noOptionsText || 'No options found'\"\r\n      [searchPlaceholder]=\"field.searchPlaceholder || 'Search...'\"\r\n      (addNew)=\"onAutocompleteAction(field.key, 'add')\"\r\n      (refresh)=\"onAutocompleteAction(field.key, 'refresh')\"\r\n    ></fui-autocomplete>\r\n    @if (field.hint) {\r\n      <fui-hint>{{ field.hint }}</fui-hint>\r\n    }\r\n    <ng-container *ngTemplateOutlet=\"errorsTemplate; context: { $implicit: field }\"></ng-container>\r\n  </fui-form-field>\r\n</ng-template>\r\n\r\n<!-- Checkbox Template -->\r\n<ng-template #checkboxTemplate let-field>\r\n  <div class=\"fui-dynamic-form__checkbox-wrapper\">\r\n    <fui-checkbox [formControl]=\"getControl(field.key)\" [labelPosition]=\"field.labelPosition || 'after'\">\r\n      {{ field.label }}\r\n    </fui-checkbox>\r\n    @if (field.hint) {\r\n      <div class=\"fui-dynamic-form__checkbox-hint fui-text-sm\">{{ field.hint }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- File Template -->\r\n<ng-template #fileTemplate let-field>\r\n  <div class=\"fui-dynamic-form__file-field\">\r\n    @if (field.label && !field.hideLabel) {\r\n      <label class=\"fui-dynamic-form__file-label fui-text-sm\">{{ field.label }}</label>\r\n    }\r\n    <input\r\n      type=\"file\"\r\n      class=\"fui-dynamic-form__file-input\"\r\n      [accept]=\"field.fileConfig?.accept\"\r\n      [multiple]=\"field.fileConfig?.multiple || false\"\r\n      [disabled]=\"field.disabled || false\"\r\n      (change)=\"onFileChange($event, field.key)\"\r\n    />\r\n    @if (field.hint) {\r\n      <div class=\"fui-dynamic-form__file-hint fui-text-sm\">{{ field.hint }}</div>\r\n    }\r\n  </div>\r\n</ng-template>\r\n\r\n<!-- Errors Template -->\r\n<ng-template #errorsTemplate let-field>\r\n  @if (field.errors && getControl(field.key)) {\r\n    @for (errorEntry of getErrorEntries(field.errors); track errorEntry.key) {\r\n      @if (getControl(field.key).hasError(errorEntry.key)) {\r\n        <fui-error>{{ errorEntry.value }}</fui-error>\r\n      }\r\n    }\r\n  }\r\n</ng-template>\r\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/fesm2022/raintonic-formaui-components-empty-state.mjs

@@ -0,0 +1,33 @@
+import * as i0 from '@angular/core';
+import { input, computed, ViewEncapsulation, ChangeDetectionStrategy, Component } from '@angular/core';
+import { FuiIconComponent } from '@raintonic/formaui/components/icon';
+
+class FuiEmptyStateComponent {
+    icon = input(null, ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
+    title = input(null, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+    description = input(null, ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    iconSize = computed(() => {
+        const s = this.size();
+        return s === 'sm' ? 'md' : 'lg';
+    }, ...(ngDevMode ? [{ debugName: "iconSize" }] : /* istanbul ignore next */ []));
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiEmptyStateComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuiEmptyStateComponent, isStandalone: true, selector: "fui-empty-state", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "role": "status" }, properties: { "class.fui-empty-state--sm": "size() === \"sm\"", "class.fui-empty-state--md": "size() === \"md\"", "class.fui-empty-state--lg": "size() === \"lg\"" }, classAttribute: "fui-empty-state" }, ngImport: i0, template: "<div class=\"fui-empty-state__content\">\n  @if (icon()) {\n    <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\n      <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\n    </div>\n  }\n  @if (title()) {\n    <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\n  }\n  @if (description()) {\n    <p class=\"fui-empty-state__description\">{{ description() }}</p>\n  }\n  <div class=\"fui-empty-state__actions\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-padding-48, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-gap-12, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-gap-8, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-gap-16, 1rem);display:flex;gap:var(--fui-gap-8, .5rem)}.fui-empty-state--sm{padding:var(--fui-padding-24, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-font-size-03)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-font-size-05)}\n"], dependencies: [{ kind: "component", type: FuiIconComponent, selector: "fui-icon", inputs: ["name", "size", "weight", "color", "ariaLabel", "spin", "pulse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuiEmptyStateComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fui-empty-state', standalone: true, imports: [FuiIconComponent], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
+                        class: 'fui-empty-state',
+                        '[class.fui-empty-state--sm]': 'size() === "sm"',
+                        '[class.fui-empty-state--md]': 'size() === "md"',
+                        '[class.fui-empty-state--lg]': 'size() === "lg"',
+                        role: 'status',
+                    }, template: "<div class=\"fui-empty-state__content\">\n  @if (icon()) {\n    <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\n      <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\n    </div>\n  }\n  @if (title()) {\n    <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\n  }\n  @if (description()) {\n    <p class=\"fui-empty-state__description\">{{ description() }}</p>\n  }\n  <div class=\"fui-empty-state__actions\">\n    <ng-content></ng-content>\n  </div>\n</div>\n", styles: [".fui-empty-state{display:flex;align-items:center;justify-content:center;padding:var(--fui-padding-48, 3rem);text-align:center}.fui-empty-state__content{display:flex;flex-direction:column;align-items:center;gap:var(--fui-gap-12, .75rem);max-width:24rem}.fui-empty-state__icon{color:var(--fui-text-disabled);margin-bottom:var(--fui-gap-8, .5rem)}.fui-empty-state__title{font-family:var(--fui-font-family-sans);font-size:var(--fui-font-size-04);font-weight:var(--fui-font-weight-semibold, 600);color:var(--fui-text-primary);margin:0}.fui-empty-state__description{font-size:var(--fui-font-size-02);color:var(--fui-text-secondary);margin:0;line-height:1.5}.fui-empty-state__actions{margin-top:var(--fui-gap-16, 1rem);display:flex;gap:var(--fui-gap-8, .5rem)}.fui-empty-state--sm{padding:var(--fui-padding-24, 1.5rem)}.fui-empty-state--sm .fui-empty-state__title{font-size:var(--fui-font-size-03)}.fui-empty-state--lg{padding:4.5rem}.fui-empty-state--lg .fui-empty-state__title{font-size:var(--fui-font-size-05)}\n"] }]
+        }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuiEmptyStateComponent };
+//# sourceMappingURL=raintonic-formaui-components-empty-state.mjs.map

package/fesm2022/raintonic-formaui-components-empty-state.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"raintonic-formaui-components-empty-state.mjs","sources":["../../../lib/components/empty-state/empty-state.component.ts","../../../lib/components/empty-state/empty-state.component.html","../../../lib/components/empty-state/raintonic-formaui-components-empty-state.ts"],"sourcesContent":["import { ChangeDetectionStrategy, Component, ViewEncapsulation, computed, input } from '@angular/core';\nimport { FuiIconComponent } from '@raintonic/formaui/components/icon';\n\n@Component({\n  selector: 'fui-empty-state',\n  standalone: true,\n  imports: [FuiIconComponent],\n  templateUrl: './empty-state.component.html',\n  styleUrls: ['./empty-state.component.scss'],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  encapsulation: ViewEncapsulation.None,\n  host: {\n    class: 'fui-empty-state',\n    '[class.fui-empty-state--sm]': 'size() === \"sm\"',\n    '[class.fui-empty-state--md]': 'size() === \"md\"',\n    '[class.fui-empty-state--lg]': 'size() === \"lg\"',\n    role: 'status',\n  },\n})\nexport class FuiEmptyStateComponent {\n  readonly icon = input<string | null>(null);\n  readonly title = input<string | null>(null);\n  readonly description = input<string | null>(null);\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\n\n  readonly iconSize = computed(() => {\n    const s = this.size();\n    return s === 'sm' ? 'md' : 'lg';\n  });\n}\n","<div class=\"fui-empty-state__content\">\n  @if (icon()) {\n    <div class=\"fui-empty-state__icon\" aria-hidden=\"true\">\n      <fui-icon [name]=\"icon()!\" [size]=\"iconSize()\" weight=\"light\" />\n    </div>\n  }\n  @if (title()) {\n    <h3 class=\"fui-empty-state__title\">{{ title() }}</h3>\n  }\n  @if (description()) {\n    <p class=\"fui-empty-state__description\">{{ description() }}</p>\n  }\n  <div class=\"fui-empty-state__actions\">\n    <ng-content></ng-content>\n  </div>\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":";;;;MAmBa,sBAAsB,CAAA;AACxB,IAAA,IAAI,GAAG,KAAK,CAAgB,IAAI,2EAAC;AACjC,IAAA,KAAK,GAAG,KAAK,CAAgB,IAAI,4EAAC;AAClC,IAAA,WAAW,GAAG,KAAK,CAAgB,IAAI,kFAAC;AACxC,IAAA,IAAI,GAAG,KAAK,CAAqB,IAAI,2EAAC;AAEtC,IAAA,QAAQ,GAAG,QAAQ,CAAC,MAAK;AAChC,QAAA,MAAM,CAAC,GAAG,IAAI,CAAC,IAAI,EAAE;QACrB,OAAO,CAAC,KAAK,IAAI,GAAG,IAAI,GAAG,IAAI;AACjC,IAAA,CAAC,+EAAC;uGATS,sBAAsB,EAAA,IAAA,EAAA,EAAA,EAAA,MAAA,EAAA,EAAA,CAAA,eAAA,CAAA,SAAA,EAAA,CAAA;2FAAtB,sBAAsB,EAAA,YAAA,EAAA,IAAA,EAAA,QAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,KAAA,EAAA,EAAA,iBAAA,EAAA,OAAA,EAAA,UAAA,EAAA,OAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,WAAA,EAAA,EAAA,iBAAA,EAAA,aAAA,EAAA,UAAA,EAAA,aAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,IAAA,EAAA,EAAA,iBAAA,EAAA,MAAA,EAAA,UAAA,EAAA,MAAA,EAAA,QAAA,EAAA,IAAA,EAAA,UAAA,EAAA,KAAA,EAAA,iBAAA,EAAA,IAAA,EAAA,EAAA,EAAA,IAAA,EAAA,EAAA,UAAA,EAAA,EAAA,MAAA,EAAA,QAAA,EAAA,EAAA,UAAA,EAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,2BAAA,EAAA,mBAAA,EAAA,EAAA,cAAA,EAAA,iBAAA,EAAA,EAAA,QAAA,EAAA,EAAA,EAAA,QAAA,ECnBnC,ofAgBA,EAAA,MAAA,EAAA,CAAA,k/BAAA,CAAA,EAAA,YAAA,EAAA,CAAA,EAAA,IAAA,EAAA,WAAA,EAAA,IAAA,EDVY,gBAAgB,EAAA,QAAA,EAAA,UAAA,EAAA,MAAA,EAAA,CAAA,MAAA,EAAA,MAAA,EAAA,QAAA,EAAA,OAAA,EAAA,WAAA,EAAA,MAAA,EAAA,OAAA,CAAA,EAAA,CAAA,EAAA,eAAA,EAAA,EAAA,CAAA,uBAAA,CAAA,MAAA,EAAA,aAAA,EAAA,EAAA,CAAA,iBAAA,CAAA,IAAA,EAAA,CAAA;;2FAaf,sBAAsB,EAAA,UAAA,EAAA,CAAA;kBAhBlC,SAAS;AACE,YAAA,IAAA,EAAA,CAAA,EAAA,QAAA,EAAA,iBAAiB,EAAA,UAAA,EACf,IAAI,EAAA,OAAA,EACP,CAAC,gBAAgB,CAAC,EAAA,eAAA,EAGV,uBAAuB,CAAC,MAAM,EAAA,aAAA,EAChC,iBAAiB,CAAC,IAAI,EAAA,IAAA,EAC/B;AACJ,wBAAA,KAAK,EAAE,iBAAiB;AACxB,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,6BAA6B,EAAE,iBAAiB;AAChD,wBAAA,IAAI,EAAE,QAAQ;AACf,qBAAA,EAAA,QAAA,EAAA,ofAAA,EAAA,MAAA,EAAA,CAAA,k/BAAA,CAAA,EAAA;;;AEjBH;;AAEG;;;;"}