@flywheel-io/vision 21.1.3 → 21.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@flywheel-io/vision",
-  "version": "21.1.3",
+  "version": "21.2.0",
   "description": "Flywheel UI elements provided as Angular components and native web components",
   "author": "Flywheel",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "dependencies": {
     "@date-fns/tz": "^1.4.1",
     "date-fns": "^2.28.0",
+    "json-logic-js": "^2.0.5",
     "libphonenumber-js": "^1.10.11",
     "tslib": "^2.4.1"
   },

package/types/flywheel-io-vision.d.ts

@@ -4,11 +4,12 @@ import * as i1 from '@angular/common';
 import { Location } from '@angular/common';
 import { SafeStyle } from '@angular/platform-browser';
 import * as i2 from '@angular/forms';
-import { ControlValueAccessor, FormControl, ValidatorFn, AbstractControl, NgControl } from '@angular/forms';
+import { ControlValueAccessor, FormControl, FormControlStatus, FormGroup, ValidatorFn, AbstractControl, NgControl } from '@angular/forms';
 import * as i2$1 from '@angular/cdk/dialog';
 import { DialogRef, Dialog, DialogConfig } from '@angular/cdk/dialog';
 import * as i3 from '@angular/cdk/overlay';
 import { OverlayContainer, ComponentType, CdkOverlayOrigin, ConnectedPosition, OverlayConfig, FlexibleConnectedPositionStrategyOrigin, ConnectedOverlayPositionChange } from '@angular/cdk/overlay';
+import { RulesLogic } from 'json-logic-js';
 import * as i1$1 from '@angular/cdk/menu';
 import { CdkMenuTrigger } from '@angular/cdk/menu';
 import * as i4 from '@angular/cdk/table';
@@ -1043,6 +1044,117 @@ declare class FwFormHeadingModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FwFormHeadingModule>;
 }
 
+declare enum FieldType {
+    Checkbox = "checkbox",
+    Switch = "switch",
+    Radio = "radio",
+    Text = "text",
+    TextArea = "text-area",
+    Date = "date",
+    Phone = "phone",
+    Select = "select",
+    Paragraph = "paragraph",
+    Instruction = "instruction",
+    Int = "int",
+    Float = "float"
+}
+interface LogicRule {
+    logic: RulesLogic;
+    message?: string;
+}
+interface CustomField {
+    type: string;
+    label?: string;
+    description?: string;
+    placeholder?: string;
+    key: string;
+    helperText?: string;
+    errorText?: string;
+    requiredWhenVisible?: RulesLogic[];
+    validation?: LogicRule[];
+    visible?: RulesLogic[];
+    options?: {
+        value: string;
+        label?: string;
+    }[];
+}
+interface CustomSection {
+    title: string;
+    description?: string | null;
+    key: string;
+    fields: CustomField[];
+}
+interface CustomForm {
+    fields: (CustomField | CustomSection)[];
+}
+
+/**
+ * Renders a {@link CustomForm} schema as a reactive form, resolving JSONLogic-driven
+ * visibility and validation rules for each field.
+ * @see [Vision storybook](https://cdn.flywheel.io/docs/vision/master/?path=/docs/form-controls-form-renderer--docs)
+ */
+declare class FwFormRendererComponent {
+    readonly formData: _angular_core.InputSignal<CustomForm>;
+    /** Whether accordion sections render with an outer border. Defaults to `false`. */
+    readonly sectionBorder: _angular_core.InputSignal<boolean>;
+    /** Emits the normalized `{ [fieldKey]: value }` record whenever any field's value changes. */
+    readonly valueChange: _angular_core.OutputEmitterRef<Record<string, unknown>>;
+    /** Emits the FormGroup's overall status whenever it changes. */
+    readonly statusChange: _angular_core.OutputEmitterRef<FormControlStatus>;
+    /**
+     * The underlying FormGroup, exposed as an escape hatch for consumers that need to bind
+     * `[formGroup]` directly (e.g. to call `.patchValue()` or read `.status`/`.value` themselves)
+     * rather than relying solely on `valueChange`/`statusChange`.
+     */
+    readonly form: _angular_core.WritableSignal<FormGroup<any>>;
+    readonly flatFields: _angular_core.WritableSignal<CustomField[]>;
+    readonly FieldType: typeof FieldType;
+    private readonly submitted;
+    private readonly hideByKey;
+    private readonly requiredByKey;
+    private readonly expandedSectionKeys;
+    structuredItems: _angular_core.Signal<(CustomField | CustomSection)[]>;
+    isHidden(field: CustomField): boolean;
+    isRequired(field: CustomField): boolean;
+    isSection(item: CustomField | CustomSection): item is CustomSection;
+    isSectionExpanded(section: CustomSection): boolean;
+    onSectionToggle(section: CustomSection, expanded: boolean): void;
+    /**
+     * Forces a section back open when focus lands on one of its fields while it's collapsed
+     * — e.g. tabbing through the form shouldn't leave focus inside a hidden (height: 0)
+     * section. Wired to `focusin` on each section's content wrapper.
+     */
+    onSectionContentFocusIn(section: CustomSection): void;
+    private destroyRef;
+    private currentKeys;
+    private currentFields;
+    private readonly formRebuilt$;
+    constructor();
+    private flattenFields;
+    private buildForm;
+    /**
+     * Recomputes field visibility and requiredWhenVisible from the form's current values, and
+     * re-runs validation so the field that was just blurred shows its errorText immediately
+     * (validateFields only assigns errorText for touched controls, and the blurred control's
+     * CVA already marked it touched before this native `focusout` handler runs). Wired to the
+     * form's `focusout` so fields only appear/disappear/error once a field loses focus, rather
+     * than on every keystroke.
+     */
+    onFieldBlur(): void;
+    /**
+     * Marks every control touched/dirty and triggers validation immediately, then flips
+     * validation into live (onChange) mode for the remainder of the form's lifetime. Call
+     * this from the consumer's submit handler; returns whether the form is currently valid.
+     */
+    validateOnSubmit(): boolean;
+    private validateFields;
+    private isEmpty;
+    private evaluateRule;
+    private normalizeValues;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwFormRendererComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwFormRendererComponent, "fw-form-renderer", never, { "formData": { "alias": "formData"; "required": false; "isSignal": true; }; "sectionBorder": { "alias": "sectionBorder"; "required": false; "isSignal": true; }; }, { "valueChange": "valueChange"; "statusChange": "statusChange"; }, never, never, true, never>;
+}
+
 declare class FwValidators {
     static phone: ValidatorFn;
     static email: ValidatorFn;
@@ -2953,7 +3065,7 @@ declare class FwWrappedInputComponent {
     get hostTitle(): null;
     class: boolean;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<FwWrappedInputComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwWrappedInputComponent, "fw-wrapped-input", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusColor": { "alias": "statusColor"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["fw-form-heading", "fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-typeahead, fw-time-zone-select"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FwWrappedInputComponent, "fw-wrapped-input", never, { "title": { "alias": "title"; "required": false; "isSignal": true; }; "status": { "alias": "status"; "required": false; "isSignal": true; }; "statusColor": { "alias": "statusColor"; "required": false; "isSignal": true; }; "description": { "alias": "description"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorText": { "alias": "errorText"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; }, {}, never, ["fw-form-heading", "fw-button-toggle, fw-date-input, fw-text-input, fw-number-input, fw-phone-input, fw-textarea-input, fw-select, fw-multi-select, fw-checkbox, fw-checkbox-group, fw-radio-group, fw-typeahead, fw-time-zone-select"], true, never>;
 }
 
 /**
@@ -2965,5 +3077,5 @@ declare class FwWrappedInputModule {
     static ɵinj: _angular_core.ɵɵInjectorDeclaration<FwWrappedInputModule>;
 }
 
-export { DialogWidth, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxGroupComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
-export type { DelayLength$3 as DelayLength, FwButtonColorOption, FwDialogRef, FwPaginatorEvent, FwSnackbarMessage, IconSize, IconType, MenuFilterFn, PaginationPage, PopoverPosition, SimplePosition };
+export { DialogWidth, FieldType, FwAlertComponent, FwAlertModule, FwAppIconComponent, FwAppIconModule, FwAvatarComponent, FwAvatarListComponent, FwAvatarModule, FwBackButtonComponent, FwBadgeComponent, FwBadgeModule, FwBreadcrumbsComponent, FwBreadcrumbsModule, FwButtonComponent, FwButtonDangerDirective, FwButtonDirective, FwButtonGroupComponent, FwButtonGroupModule, FwButtonModule, FwButtonPrimaryDirective, FwButtonSecondaryDirective, FwButtonSuccessDirective, FwButtonToggleComponent, FwButtonToggleItemComponent, FwButtonToggleModule, FwCardAttributeComponent, FwCardAuthorComponent, FwCardComponent, FwCardContentComponent, FwCardFooterComponent, FwCardHeaderComponent, FwCardModule, FwCell, FwCellDef, FwCheckboxComponent, FwCheckboxGroupComponent, FwCheckboxModule, FwChipComponent, FwChipModule, FwColumnDef, FwContainedInputComponent, FwContainedInputModule, FwCrumbComponent, FwDateInputComponent, FwDateInputModule, FwDialogActionsComponent, FwDialogComponent, FwDialogConfirmComponent, FwDialogContentComponent, FwDialogHeaderComponent, FwDialogService, FwDialogSimpleComponent, FwDialogsModule, FwFooterCell, FwFooterCellDef, FwFooterRow, FwFooterRowDef, FwFormHeadingComponent, FwFormHeadingModule, FwFormRendererComponent, FwGridComponent, FwGridItemComponent, FwHeaderCell, FwHeaderCellDef, FwHeaderRow, FwHeaderRowDef, FwIconButtonComponent, FwIconButtonModule, FwIconComponent, FwIconModule, FwLayoutContextComponent, FwLayoutGroupComponent, FwLayoutPanelComponent, FwLayoutSidebarComponent, FwLayoutToolbarComponent, FwLayoutsModule, FwMenuCloseTriggersDirective, FwMenuComponent, FwMenuContainerComponent, FwMenuHeaderComponent, FwMenuItemComponent, FwMenuItemGroupComponent, FwMenuModule, FwMenuSeparatorComponent, FwMenuSubItemComponent, FwMultiSelectMenuComponent, FwNavbarComponent, FwNavbarHeaderComponent, FwNavbarItemComponent, FwNavbarModule, FwNavbarSubItemComponent, FwNoDataRow, FwNumberInputComponent, FwNumberInputModule, FwPaginatorAdvancedComponent, FwPaginatorComponent, FwPaginatorModule, FwPhoneInputComponent, FwPhoneInputModule, FwPopoverComponent, FwPopoverModule, FwPopoverPanelComponent, FwProgressBarComponent, FwProgressModule, FwProgressSpinnerComponent, FwRadioComponent, FwRadioGroupComponent, FwRadioModule, FwRow, FwRowDef, FwSectionHeadingComponent, FwSectionHeadingModule, FwSelectMenuComponent, FwSelectMenuModule, FwSnackbarComponent, FwSnackbarContainerComponent, FwSnackbarModule, FwSnackbarService, FwStepComponent, FwStepDecoratorComponent, FwStepperComponent, FwStepperModule, FwSubsectionHeadingComponent, FwSwitchComponent, FwSwitchModule, FwTabComponent, FwTabPanelComponent, FwTableComponent, FwTableDenseComponent, FwTableModule, FwTabsComponent, FwTabsModule, FwTagComponent, FwTagModule, FwTextAreaInputComponent, FwTextAreaInputModule, FwTextComponent, FwTextInputComponent, FwTextInputModule, FwTimeZoneSelectComponent, FwTooltipComponent, FwTooltipDirective, FwTooltipModule, FwTooltipPanelComponent, FwTypeaheadComponent, FwValidators, FwWrappedInputComponent, FwWrappedInputModule, LayoutWidth, MenuManagerService, MenuRegisterDirective, MinimalTranslationService, NoopValueAccessorDirective, TranslationService, allIcons, genMessageId, notBeforeDate, notFutureDate };
+export type { CustomField, CustomForm, CustomSection, DelayLength$3 as DelayLength, FwButtonColorOption, FwDialogRef, FwPaginatorEvent, FwSnackbarMessage, IconSize, IconType, LogicRule, MenuFilterFn, PaginationPage, PopoverPosition, SimplePosition };