@emuanalytics/flow-rdf-ui 4.0.3 → 4.0.5

package/dist/index.d.cts

@@ -268,7 +268,11 @@ declare class FlowRdfElement extends LitElement {
     emit<T extends string & keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: SlEventInit<T>): GetCustomEventType<T>;
     static define(name: string, elementConstructor?: typeof FlowRdfElement, options?: ElementDefinitionOptions): void;
 }
-interface FlowRdfFormControl extends FlowRdfElement {
+declare abstract class FlowRdfFormControl extends FlowRdfElement {
+    static FLOW_UI_FORM_CONTROL_CLASS: string;
+    class: string;
+    handleClassChange(): void;
+    connectedCallback(): void;
     name: string;
     value: unknown;
     disabled?: boolean;
@@ -282,12 +286,12 @@ interface FlowRdfFormControl extends FlowRdfElement {
     required?: boolean;
     minlength?: number;
     maxlength?: number;
-    readonly validity: ValidityState;
-    readonly validationMessage: string;
-    checkValidity: () => boolean;
-    getForm: () => HTMLFormElement | null;
-    reportValidity: () => boolean;
-    setCustomValidity: (message: string) => void;
+    abstract get validity(): ValidityState;
+    abstract get validationMessage(): string;
+    abstract checkValidity(): boolean;
+    abstract getForm(): HTMLFormElement | null;
+    abstract reportValidity(): boolean;
+    abstract setCustomValidity(message: string): void;
 }
 
 /**
@@ -1061,6 +1065,8 @@ declare class FlowUiQueryBuilder extends FlowRdfElement {
      */
     static registerFieldDefinition<T extends FlowQueryBuilderFieldType>(type: T, fieldDefinition: FlowQueryBuilderFieldDefinition<NoUnion<T>>): void;
     private readonly hasSlotController;
+    /** @internal - add form control class */
+    class: string;
     /** The query builder's value object. */
     value: FlowQueryBuilderRuleSet;
     /** The query builder's configuration object. */
@@ -1079,6 +1085,8 @@ declare class FlowUiQueryBuilder extends FlowRdfElement {
     subQueryBuilder: boolean;
     connectedCallback(): void;
     /** @internal */
+    handleClassChange(): void;
+    /** @internal */
     handleValueChange(): void;
     private valueTemplateForRule;
     private getDefault;
@@ -1749,7 +1757,7 @@ declare global {
  * @csspart suffix - The container that wraps the suffix.
  * @csspart caret - The button's caret icon, an `<flow-ui-icon>` element.
  */
-declare class FlowUiButton extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiButton extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -2153,7 +2161,7 @@ declare global {
  * @csspart indeterminate-icon - The indeterminate icon, an `<flow-ui-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
  */
-declare class FlowUiCheckbox extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiCheckbox extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly hasSlotController;
     private readonly formControlController;
@@ -2188,6 +2196,8 @@ declare class FlowUiCheckbox extends FlowRdfElement implements FlowRdfFormContro
     required: boolean;
     /**  */
     variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Display the radio group using the alternative 'full-width' style with left-aligned label. */
+    fullWidth: boolean;
     connectedCallback(): void;
     /** Gets the validity state object */
     get validity(): ValidityState;
@@ -2304,6 +2314,8 @@ declare class FlowUiColorMapper extends FlowRdfElement {
     private fixedColorPicker;
     private fieldSelect;
     private infoDialog;
+    /** @internal - add form control class */
+    class: string;
     /** The color mapper configuration specifying available fields. */
     options: ColorMapperOptions;
     /** The current value of the color mapper. */
@@ -2319,6 +2331,8 @@ declare class FlowUiColorMapper extends FlowRdfElement {
      */
     swatches: string | string[];
     connectedCallback(): void;
+    /** @internal - ensure form class is always present */
+    handleClassChange(): void;
     private handleFixedPickerClick;
     private handleChange;
     private emitChange;
@@ -2545,7 +2559,7 @@ declare global {
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The container that wraps the suffix.
  */
-declare class FlowUiInput extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiInput extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -2752,7 +2766,7 @@ declare global {
  * @cssproperty --slider-handle-size - The diameter of the slider's handle.
  * @cssproperty --swatch-size - The size of each predefined color swatch.
  */
-declare class FlowUiColorPicker extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiColorPicker extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private isSafeValue;
@@ -2904,7 +2918,7 @@ declare global {
  * @dependency flow-ui-icon-button
  *
  */
-declare class FlowUiColorStop extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiColorStop extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private input;
@@ -3046,7 +3060,7 @@ declare global {
  * @csspart clear-button - The clear button.
  * @csspart mode-icon - The mode icon, a `<flow-ui-icon>` element.
  */
-declare class FlowUiDateTimePicker extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiDateTimePicker extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -4020,7 +4034,7 @@ declare class FormControlController implements ReactiveController {
  * @csspart button-group - The button group that wraps radio buttons.
  * @csspart button-group__base - The button group's `base` part.
  */
-declare class FlowUiRadioGroup extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiRadioGroup extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     protected readonly formControlController: FormControlController;
     private readonly hasSlotController;
@@ -4055,10 +4069,8 @@ declare class FlowUiRadioGroup extends FlowRdfElement implements FlowRdfFormCont
     form: string;
     /** Ensures a child radio is checked before allowing the containing form to submit. */
     required: boolean;
-    /**
-     * Use vertical layout for the radio group.
-     */
-    vertical: boolean;
+    /** Display the radio group using the alternative 'full-width' style with left-aligned label. */
+    fullWidth: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -4073,9 +4085,7 @@ declare class FlowUiRadioGroup extends FlowRdfElement implements FlowRdfFormCont
     private syncRadios;
     private updateCheckedRadio;
     /** @internal */
-    handleSizeChange(): void;
-    /** @internal */
-    handleVariantChange(): void;
+    handleStyleChange(): void;
     /** @internal */
     handleValueChange(): void;
     /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
@@ -4130,6 +4140,8 @@ declare class FlowUiRadio extends FlowRdfElement {
     variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
     /** Disables the radio. */
     disabled: boolean;
+    /** Display the radio using the alternative 'full-width' style with left-aligned label. */
+    fullWidth: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private addEventListeners;
@@ -4179,7 +4191,7 @@ declare global {
  * @cssproperty --track-height - The height of the track.
  * @cssproperty --track-active-offset - The point of origin of the active track.
  */
-declare class FlowUiRange extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiRange extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -4380,7 +4392,7 @@ declare global {
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
  */
-declare class FlowUiSelect extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiSelect extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     static dependencies: {
         'flow-icon': typeof FlowUiIcon;
@@ -4788,7 +4800,7 @@ declare global {
  * @cssproperty --height - The height of the switch.
  * @cssproperty --thumb-size - The size of the thumb.
  */
-declare class FlowUiSwitch extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiSwitch extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private input;
@@ -5053,7 +5065,7 @@ declare global {
  * @csspart base - The component's base wrapper.
  * @csspart textarea - The internal `<textarea>` control.
  */
-declare class FlowUiTextarea extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiTextarea extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -5280,7 +5292,7 @@ declare global {
  * @event flow-ui-change - Emitted when the control's value changes.
  * @event flow-ui-input - Emitted when the control receives input.
  */
-declare class FlowUiToolButtonGroup extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiToolButtonGroup extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     /** @internal */
     protected readonly formControlController: FormControlController;
@@ -5591,6 +5603,8 @@ declare class FlowUiTree extends FlowRdfElement {
     static styles: CSSResultGroup;
     private expandedIconSlot;
     private collapsedIconSlot;
+    /** @internal - add form control class */
+    class: string;
     /**
      * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
      * value attribute will be a space-delimited list of values based on the options selected, and the value property will
@@ -5610,6 +5624,8 @@ declare class FlowUiTree extends FlowRdfElement {
     private clickTarget;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    /** @internal - ensure form control class is always present */
+    handleClassChange(): void;
     private getExpandButtonIcon;
     private initTreeItem;
     private handleTreeChanged;

package/dist/index.d.mts

@@ -268,7 +268,11 @@ declare class FlowRdfElement extends LitElement {
     emit<T extends string & keyof EventTypesWithRequiredDetail>(name: EventTypeRequiresDetail<T>, options: SlEventInit<T>): GetCustomEventType<T>;
     static define(name: string, elementConstructor?: typeof FlowRdfElement, options?: ElementDefinitionOptions): void;
 }
-interface FlowRdfFormControl extends FlowRdfElement {
+declare abstract class FlowRdfFormControl extends FlowRdfElement {
+    static FLOW_UI_FORM_CONTROL_CLASS: string;
+    class: string;
+    handleClassChange(): void;
+    connectedCallback(): void;
     name: string;
     value: unknown;
     disabled?: boolean;
@@ -282,12 +286,12 @@ interface FlowRdfFormControl extends FlowRdfElement {
     required?: boolean;
     minlength?: number;
     maxlength?: number;
-    readonly validity: ValidityState;
-    readonly validationMessage: string;
-    checkValidity: () => boolean;
-    getForm: () => HTMLFormElement | null;
-    reportValidity: () => boolean;
-    setCustomValidity: (message: string) => void;
+    abstract get validity(): ValidityState;
+    abstract get validationMessage(): string;
+    abstract checkValidity(): boolean;
+    abstract getForm(): HTMLFormElement | null;
+    abstract reportValidity(): boolean;
+    abstract setCustomValidity(message: string): void;
 }
 
 /**
@@ -1061,6 +1065,8 @@ declare class FlowUiQueryBuilder extends FlowRdfElement {
      */
     static registerFieldDefinition<T extends FlowQueryBuilderFieldType>(type: T, fieldDefinition: FlowQueryBuilderFieldDefinition<NoUnion<T>>): void;
     private readonly hasSlotController;
+    /** @internal - add form control class */
+    class: string;
     /** The query builder's value object. */
     value: FlowQueryBuilderRuleSet;
     /** The query builder's configuration object. */
@@ -1079,6 +1085,8 @@ declare class FlowUiQueryBuilder extends FlowRdfElement {
     subQueryBuilder: boolean;
     connectedCallback(): void;
     /** @internal */
+    handleClassChange(): void;
+    /** @internal */
     handleValueChange(): void;
     private valueTemplateForRule;
     private getDefault;
@@ -1749,7 +1757,7 @@ declare global {
  * @csspart suffix - The container that wraps the suffix.
  * @csspart caret - The button's caret icon, an `<flow-ui-icon>` element.
  */
-declare class FlowUiButton extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiButton extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -2153,7 +2161,7 @@ declare global {
  * @csspart indeterminate-icon - The indeterminate icon, an `<flow-ui-icon>` element.
  * @csspart label - The container that wraps the checkbox's label.
  */
-declare class FlowUiCheckbox extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiCheckbox extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly hasSlotController;
     private readonly formControlController;
@@ -2188,6 +2196,8 @@ declare class FlowUiCheckbox extends FlowRdfElement implements FlowRdfFormContro
     required: boolean;
     /**  */
     variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
+    /** Display the radio group using the alternative 'full-width' style with left-aligned label. */
+    fullWidth: boolean;
     connectedCallback(): void;
     /** Gets the validity state object */
     get validity(): ValidityState;
@@ -2304,6 +2314,8 @@ declare class FlowUiColorMapper extends FlowRdfElement {
     private fixedColorPicker;
     private fieldSelect;
     private infoDialog;
+    /** @internal - add form control class */
+    class: string;
     /** The color mapper configuration specifying available fields. */
     options: ColorMapperOptions;
     /** The current value of the color mapper. */
@@ -2319,6 +2331,8 @@ declare class FlowUiColorMapper extends FlowRdfElement {
      */
     swatches: string | string[];
     connectedCallback(): void;
+    /** @internal - ensure form class is always present */
+    handleClassChange(): void;
     private handleFixedPickerClick;
     private handleChange;
     private emitChange;
@@ -2545,7 +2559,7 @@ declare global {
  * @csspart password-toggle-button - The password toggle button.
  * @csspart suffix - The container that wraps the suffix.
  */
-declare class FlowUiInput extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiInput extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -2752,7 +2766,7 @@ declare global {
  * @cssproperty --slider-handle-size - The diameter of the slider's handle.
  * @cssproperty --swatch-size - The size of each predefined color swatch.
  */
-declare class FlowUiColorPicker extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiColorPicker extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private isSafeValue;
@@ -2904,7 +2918,7 @@ declare global {
  * @dependency flow-ui-icon-button
  *
  */
-declare class FlowUiColorStop extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiColorStop extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private input;
@@ -3046,7 +3060,7 @@ declare global {
  * @csspart clear-button - The clear button.
  * @csspart mode-icon - The mode icon, a `<flow-ui-icon>` element.
  */
-declare class FlowUiDateTimePicker extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiDateTimePicker extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -4020,7 +4034,7 @@ declare class FormControlController implements ReactiveController {
  * @csspart button-group - The button group that wraps radio buttons.
  * @csspart button-group__base - The button group's `base` part.
  */
-declare class FlowUiRadioGroup extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiRadioGroup extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     protected readonly formControlController: FormControlController;
     private readonly hasSlotController;
@@ -4055,10 +4069,8 @@ declare class FlowUiRadioGroup extends FlowRdfElement implements FlowRdfFormCont
     form: string;
     /** Ensures a child radio is checked before allowing the containing form to submit. */
     required: boolean;
-    /**
-     * Use vertical layout for the radio group.
-     */
-    vertical: boolean;
+    /** Display the radio group using the alternative 'full-width' style with left-aligned label. */
+    fullWidth: boolean;
     /** Gets the validity state object */
     get validity(): ValidityState;
     /** Gets the validation message */
@@ -4073,9 +4085,7 @@ declare class FlowUiRadioGroup extends FlowRdfElement implements FlowRdfFormCont
     private syncRadios;
     private updateCheckedRadio;
     /** @internal */
-    handleSizeChange(): void;
-    /** @internal */
-    handleVariantChange(): void;
+    handleStyleChange(): void;
     /** @internal */
     handleValueChange(): void;
     /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
@@ -4130,6 +4140,8 @@ declare class FlowUiRadio extends FlowRdfElement {
     variant: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'neutral';
     /** Disables the radio. */
     disabled: boolean;
+    /** Display the radio using the alternative 'full-width' style with left-aligned label. */
+    fullWidth: boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
     private addEventListeners;
@@ -4179,7 +4191,7 @@ declare global {
  * @cssproperty --track-height - The height of the track.
  * @cssproperty --track-active-offset - The point of origin of the active track.
  */
-declare class FlowUiRange extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiRange extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -4380,7 +4392,7 @@ declare global {
  * @csspart clear-button - The clear button.
  * @csspart expand-icon - The container that wraps the expand icon.
  */
-declare class FlowUiSelect extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiSelect extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     static dependencies: {
         'flow-icon': typeof FlowUiIcon;
@@ -4788,7 +4800,7 @@ declare global {
  * @cssproperty --height - The height of the switch.
  * @cssproperty --thumb-size - The size of the thumb.
  */
-declare class FlowUiSwitch extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiSwitch extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private input;
@@ -5053,7 +5065,7 @@ declare global {
  * @csspart base - The component's base wrapper.
  * @csspart textarea - The internal `<textarea>` control.
  */
-declare class FlowUiTextarea extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiTextarea extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     private readonly formControlController;
     private readonly hasSlotController;
@@ -5280,7 +5292,7 @@ declare global {
  * @event flow-ui-change - Emitted when the control's value changes.
  * @event flow-ui-input - Emitted when the control receives input.
  */
-declare class FlowUiToolButtonGroup extends FlowRdfElement implements FlowRdfFormControl {
+declare class FlowUiToolButtonGroup extends FlowRdfFormControl {
     static styles: CSSResultGroup;
     /** @internal */
     protected readonly formControlController: FormControlController;
@@ -5591,6 +5603,8 @@ declare class FlowUiTree extends FlowRdfElement {
     static styles: CSSResultGroup;
     private expandedIconSlot;
     private collapsedIconSlot;
+    /** @internal - add form control class */
+    class: string;
     /**
      * The current value of the select, submitted as a name/value pair with form data. When `multiple` is enabled, the
      * value attribute will be a space-delimited list of values based on the options selected, and the value property will
@@ -5610,6 +5624,8 @@ declare class FlowUiTree extends FlowRdfElement {
     private clickTarget;
     connectedCallback(): Promise<void>;
     disconnectedCallback(): void;
+    /** @internal - ensure form control class is always present */
+    handleClassChange(): void;
     private getExpandButtonIcon;
     private initTreeItem;
     private handleTreeChanged;