@lion/ui 0.0.1

package/components/form-core/types/choice-group/ChoiceGroupMixinTypes.ts

@@ -0,0 +1,48 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+import { FormControlHost } from '../FormControlMixinTypes.js';
+import { FormControl } from '../form-group/FormGroupMixinTypes.js';
+import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes.js';
+import { InteractionStateHost } from '../InteractionStateMixinTypes.js';
+
+export declare class ChoiceGroupHost {
+  multipleChoice: boolean;
+  get modelValue(): any;
+  set modelValue(value: any);
+  get serializedValue(): string;
+  set serializedValue(value: string);
+  get formattedValue(): string;
+  set formattedValue(value: string);
+  addFormElement(child: FormControlHost, indexToInsertAt: number): void;
+  clear(): void;
+
+  protected _oldModelValue: any;
+  protected _triggerInitialModelValueChangedEvent(): void;
+  protected _getFromAllFormElementsFilter(el: FormControl, type: string): boolean;
+  protected _getFromAllFormElements(
+    property: string,
+    filterFn?: (el: FormControl, property?: string) => boolean,
+  ): void;
+  protected _throwWhenInvalidChildModelValue(child: FormControlHost): void;
+  protected _isEmpty(): void;
+  protected _checkSingleChoiceElements(ev: Event): void;
+  protected _getCheckedElements(): void;
+  protected _setCheckedElements(value: any, check: boolean): void;
+  protected _onBeforeRepropagateChildrenValues(ev: Event): void;
+
+  private __setChoiceGroupTouched(): void;
+  private __delegateNameAttribute(child: FormControlHost): void;
+}
+
+export declare function ChoiceGroupImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<ChoiceGroupHost> &
+  Pick<typeof ChoiceGroupHost, keyof typeof ChoiceGroupHost> &
+  Constructor<FormRegistrarHost> &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
+  Constructor<InteractionStateHost> &
+  Pick<typeof InteractionStateHost, keyof typeof InteractionStateHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type ChoiceGroupMixin = typeof ChoiceGroupImplementation;

package/components/form-core/types/choice-group/ChoiceInputMixinTypes.ts

@@ -0,0 +1,63 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement, TemplateResult, CSSResultArray } from 'lit';
+import { FormatHost } from '../FormatMixinTypes.js';
+
+export interface ChoiceInputModelValue {
+  checked: boolean;
+  value: any;
+}
+
+/** TODO: legacy code: serialization should happen on choice-group level */
+export interface ChoiceInputSerializedValue {
+  checked: boolean;
+  value: string;
+}
+
+export declare class ChoiceInputHost {
+  type: string;
+  serializedValue: ChoiceInputSerializedValue;
+  checked: boolean;
+  get modelValue(): ChoiceInputModelValue;
+  set modelValue(value: ChoiceInputModelValue);
+  /**
+   * The value that will be registered to the modelValue of the parent ChoiceGroup. Recommended
+   * to be a string
+   */
+  get choiceValue(): any;
+  set choiceValue(value: any);
+  static get styles(): CSSResultArray;
+  parser(): any;
+  formatter(modelValue: ChoiceInputModelValue): string;
+
+  protected _isHandlingUserInput: boolean;
+  protected get _inputNode(): HTMLElement;
+
+  protected _proxyInputEvent(): void;
+  protected requestUpdate(name: string, oldValue: any): void;
+  protected _choiceGraphicTemplate(): TemplateResult;
+  protected _afterTemplate(): TemplateResult;
+  protected _preventDuplicateLabelClick(ev: Event): void;
+  protected _syncNameToParentFormGroup(): void;
+  protected _toggleChecked(ev: Event): void;
+  protected _onModelValueChanged(
+    newV: { modelValue: ChoiceInputModelValue },
+    oldV: { modelValue: ChoiceInputModelValue },
+  ): void;
+  protected _isEmpty(): void;
+  protected _syncValueUpwards(): void;
+
+  private __syncModelCheckedToChecked(checked: boolean): void;
+  private __syncCheckedToModel(checked: boolean): void;
+  private __syncCheckedToInputElement(): void;
+}
+
+export declare function ChoiceInputImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<ChoiceInputHost> &
+  Pick<typeof ChoiceInputHost, keyof typeof ChoiceInputHost> &
+  Constructor<FormatHost> &
+  Pick<typeof FormatHost, keyof typeof FormatHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type ChoiceInputMixin = typeof ChoiceInputImplementation;

package/components/form-core/types/choice-group/index.ts

@@ -0,0 +1,2 @@
+export * from './ChoiceInputMixinTypes.js';
+export * from './ChoiceGroupMixinTypes.js';

package/components/form-core/types/form-group/FormGroupMixinTypes.ts

@@ -0,0 +1,173 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+import { DisabledHost } from '../../../core/types/DisabledMixinTypes.js';
+import { SlotHost } from '../../../core/types/SlotMixinTypes.js';
+import { FormControlHost } from '../FormControlMixinTypes.js';
+import { FormRegistrarHost } from '../registration/FormRegistrarMixinTypes.js';
+import { ValidateHost } from '../validate/ValidateMixinTypes.js';
+
+export declare type FormControl = FormControlHost &
+  HTMLElement & {
+    _parentFormGroup?: HTMLElement;
+    checked?: boolean;
+    disabled: boolean;
+    hasFeedbackFor: string[];
+    makeRequestToBeDisabled: Function;
+  };
+
+export declare class FormGroupHost {
+  /**
+   * Disables all formElements in group
+   */
+  disabled: boolean;
+
+  /**
+   * True when all of the children are prefilled (see InteractionStateMixin for more details.)
+   */
+  prefilled: boolean;
+
+  /**
+   * True when the group as a whole is blurred (see InteractionStateMixin for more details.)
+   */
+  touched: boolean;
+
+  /**
+   * True when any of the children is dirty (see InteractionStateMixin for more details.)
+   */
+  dirty: boolean;
+
+  /**
+   * True when parent form is submitted
+   */
+  submitted: boolean;
+
+  /**
+   * Object keyed by formElements names, containing formElements' serializedValues
+   */
+  serializedValue: { [key: string]: any };
+
+  /**
+   * Object keyed by formElements names, containing formElements' formattedValues
+   */
+  formattedValue: string;
+
+  /**
+   * Object keyed by formElements names, containing formElements' modelValues
+   */
+  get modelValue(): { [x: string]: any };
+  set modelValue(value: { [x: string]: any });
+
+  /**
+   * Resets all interaction states for all formElements
+   */
+  resetInteractionState(): void;
+
+  /**
+   * Clears all values and resets all interaction states of all FormControls in group,
+   */
+  clearGroup(): void;
+
+  /**
+   * Handles interaction state 'submitted'.
+   * This allows children to enable visibility of validation feedback
+   */
+  submitGroup(): void;
+
+  /**
+   * Resets to initial/prefilled values and interaction states of all FormControls in group,
+   */
+  resetGroup(): void;
+
+  /**
+   * Gathers initial model values of all children. Used when resetGroup() is called.
+   */
+  protected _initialModelValue: { [x: string]: any };
+
+  /**
+   * The host element with role group (or radigroup or form) containing neccessary aria attributes
+   */
+  protected get _inputNode(): HTMLElement;
+
+  /**
+   * Gets a keyed be name object for requested property (like modelValue/serializedValue)
+   */
+  protected _getFromAllFormElements(
+    property: string,
+    filterFn?: (el: FormControl, property?: string) => boolean,
+  ): { [name: string]: any };
+
+  /**
+   * A filter function which will exclude a form field when returning false
+   * By default, exclude form fields which are disabled
+   *
+   * The type is be passed as well for more fine grained control, e.g.
+   * distinguish the filter when fetching modelValue versus serializedValue
+   */
+  protected _getFromAllFormElementsFilter(el: FormControl, type: string): boolean;
+
+  /**
+   * Allows to set formElements values via a keyed object structure
+   */
+  protected _setValueMapForAllFormElements(property: string, values: { [x: string]: any }): void;
+
+  /**
+   * Sets the same value for requested property in all formElements
+   */
+  protected _setValueForAllFormElements(property: string, value: any): void;
+
+  /**
+   * Returns true when one of the formElements has requested property
+   */
+  protected _anyFormElementHas(prop: string): boolean;
+
+  /**
+   * Returns true when all of the formElements have requested property
+   */
+  protected _everyFormElementHas(prop: string): boolean;
+
+  /**
+   * Returns true when all of the formElements have requested property
+   */
+  protected _anyFormElementHasFeedbackFor(prop: string): boolean;
+  protected _checkForOutsideClick(): void;
+  protected _triggerInitialModelValueChangedEvent(): void;
+  protected _syncDirty(): void;
+  protected _onFocusOut(): void;
+  protected _syncFocused(): void;
+
+  private __descriptionElementsInParentChain: Set<HTMLElement>;
+  private __addedSubValidators: boolean;
+  private __isInitialModelValue: boolean;
+  private __isInitialSerializedValue: boolean;
+  private __pendingValues: {
+    modelValue?: { [key: string]: any };
+    serializedValue?: { [key: string]: any };
+  };
+  private __initInteractionStates(): void;
+  private __setupOutsideClickHandling(): void;
+  private __requestChildrenToBeDisabled(): void;
+  private __retractRequestChildrenToBeDisabled(): void;
+  private __linkParentMessages(): void;
+  private __unlinkParentMessages(): void;
+  private __storeAllDescriptionElementsInParentChain(): void;
+  private __onChildValidatePerformed(e: Event): void;
+}
+
+export declare function FormGroupImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<FormGroupHost> &
+  Pick<typeof FormGroupHost, keyof typeof FormGroupHost> &
+  Constructor<FormRegistrarHost> &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
+  Constructor<FormControlHost> &
+  Pick<typeof FormControlHost, keyof typeof FormControlHost> &
+  Constructor<ValidateHost> &
+  Pick<typeof ValidateHost, keyof typeof ValidateHost> &
+  Constructor<DisabledHost> &
+  Pick<typeof DisabledHost, keyof typeof DisabledHost> &
+  Constructor<SlotHost> &
+  Pick<typeof SlotHost, keyof typeof SlotHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type FormGroupMixin = typeof FormGroupImplementation;

package/components/form-core/types/form-group/index.ts

@@ -0,0 +1 @@
+export * from './FormGroupMixinTypes.js';

package/components/form-core/types/index.ts

@@ -0,0 +1,10 @@
+export * from './FocusMixinTypes.js';
+export * from './FormatMixinTypes.js';
+export * from './FormControlMixinTypes.js';
+export * from './InteractionStateMixinTypes.js';
+export * from './NativeTextFieldMixinTypes.js';
+// export * from './validate.js';
+// export * from './utils.js';
+// export * from './registration.js';
+// export * from './form-group.js';
+// export * from './choice-group.js';

package/components/form-core/types/registration/FormRegisteringMixinTypes.ts

@@ -0,0 +1,28 @@
+import { LitElement } from 'lit';
+import { Constructor } from '@open-wc/dedupe-mixin';
+
+import { FormRegistrarHost } from './FormRegistrarMixinTypes.js';
+
+export declare class FormRegisteringHost {
+  /**
+   * The name the host is registered with to a parent
+   */
+  name: string;
+
+  /**
+   * The registrar this FormControl registers to, Usually a descendant of FormGroup or
+   * ChoiceGroup
+   */
+  protected _parentFormGroup: FormRegistrarHost | undefined;
+
+  private __unregisterFormElement: void;
+}
+
+export declare function FormRegisteringImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<FormRegisteringHost> &
+  Pick<typeof FormRegisteringHost, keyof typeof FormRegisteringHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type FormRegisteringMixin = typeof FormRegisteringImplementation;

package/components/form-core/types/registration/FormRegistrarMixinTypes.ts

@@ -0,0 +1,88 @@
+import { LitElement } from 'lit';
+import { Constructor } from '@open-wc/dedupe-mixin';
+
+import { FormControlsCollection } from '../../src/registration/FormControlsCollection.js';
+import { FormRegisteringHost } from './FormRegisteringMixinTypes.js';
+import { FormControlHost } from '../FormControlMixinTypes.js';
+
+export declare class ElementWithParentFormGroup {
+  _parentFormGroup: FormRegistrarHost;
+}
+
+export declare class FormRegistrarHost {
+  /**
+   * Closely mimics the natively supported HTMLFormControlsCollection. It can be accessed
+   * both like an array and an object (based on control/element names).
+   */
+  formElements: FormControlsCollection & { [x: string]: any };
+
+  /**
+   * Adds FormControl to `.formElements`
+   */
+  addFormElement(
+    child:
+      | (FormControlHost & ElementWithParentFormGroup)
+      | (FormControlHost & HTMLElement)
+      | (HTMLElement & ElementWithParentFormGroup),
+    indexToInsertAt?: number,
+  ): void;
+
+  /**
+   * Removes FormControl from `.formElements`
+   */
+  removeFormElement(child: FormRegisteringHost): void;
+
+  /**
+   * Whether FormControl is part of `.formElements`
+   */
+  isRegisteredFormElement(el: FormControlHost): boolean;
+
+  /**
+   * Promise that is resolved by `._completeRegistration`. By default after one microtask,
+   * so children get the chance to register themselves
+   */
+  registrationComplete: Promise<boolean>;
+
+  /**
+   * initComplete resolves after all pending initialization logic
+   * (for instance `<form-group .serializedValue=${{ child1: 'a', child2: 'b' }}>`)
+   * is executed.
+   */
+  initComplete: Promise<boolean>;
+
+  /**
+   * Flag that determines how ".formElements" should behave.
+   * For a regular fieldset (see LionFieldset) we expect ".formElements"
+   * to be accessible as an object.
+   * In case of a radio-group, a checkbox-group or a select/listbox,
+   * it should act like an array (see ChoiceGroupMixin).
+   * Usually, when false, we deal with a choice-group (radio-group, checkbox-group,
+   * (multi)select)
+   */
+  protected _isFormOrFieldset: boolean;
+
+  /**
+   * Hook for Subclassers to perform logic before an element is added
+   */
+  protected _onRequestToAddFormElement(e: CustomEvent): void;
+
+  protected _onRequestToChangeFormElementName(e: CustomEvent): void;
+
+  protected _onRequestToRemoveFormElement(e: CustomEvent): void;
+
+  /**
+   * Resolves the registrationComplete promise. Subclassers can delay if needed
+   */
+  protected _completeRegistration(): void;
+}
+
+export declare function FormRegistrarImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<FormRegistrarHost> &
+  Pick<typeof FormRegistrarHost, keyof typeof FormRegistrarHost> &
+  Constructor<FormRegisteringHost> &
+  Pick<typeof FormRegisteringHost, keyof typeof FormRegisteringHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type FormRegistrarMixin = typeof FormRegistrarImplementation;

package/components/form-core/types/registration/FormRegistrarPortalMixinTypes.ts

@@ -0,0 +1,20 @@
+import { Constructor } from '@open-wc/dedupe-mixin';
+import { LitElement } from 'lit';
+
+export declare class FormRegistrarPortalHost {
+  /**
+   * Registration target: an element, usually in the body of the dom, that captures events
+   * and redispatches them on host
+   */
+  registrationTarget: HTMLElement;
+  private __redispatchEventForFormRegistrarPortalMixin(ev: CustomEvent): void;
+}
+
+export declare function FormRegistrarPortalImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<FormRegistrarPortalHost> &
+  Pick<typeof FormRegistrarPortalHost, keyof typeof FormRegistrarPortalHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type FormRegistrarPortalMixin = typeof FormRegistrarPortalImplementation;

package/components/form-core/types/registration/index.ts

@@ -0,0 +1,3 @@
+export * from './FormRegisteringMixinTypes.js';
+export * from './FormRegistrarMixinTypes.js';
+export * from './FormRegistrarPortalMixinTypes.js';

package/components/form-core/types/utils/SyncUpdatableMixinTypes.ts

@@ -0,0 +1,40 @@
+import { LitElement } from 'lit';
+import { Constructor } from '@open-wc/dedupe-mixin';
+
+export declare interface SyncUpdatableNamespace {
+  connected?: boolean;
+  disconnected?: boolean;
+  initialized?: boolean;
+  queue?: Set<string> | undefined;
+}
+
+export declare class SyncUpdatableHost {
+  /**
+   * An abstraction that has the exact same api as `requestUpdate`, but taking
+   * into account:
+   * - [member order independence](https://github.com/webcomponents/gold-standard/wiki/Member-Order-Independence)
+   * - property effects start when all (light) dom has initialized (on firstUpdated)
+   * - property effects don't interrupt the first meaningful paint
+   * - compatible with propertyAccessor.`hasChanged`: no manual checks needed or accidentally
+   * run property effects / events when no change happened
+   * effects when values didn't change
+   * All code previously present in requestUpdate can be placed in this method.
+   * @param {string} name
+   * @param {*} oldValue
+   */
+  protected updateSync(name: string, oldValue: any): void;
+  private __syncUpdatableInitialize(): void;
+  private __SyncUpdatableNamespace: SyncUpdatableNamespace;
+  private static __syncUpdatableHasChanged(name: string, newValue: any, oldValue: any): boolean;
+}
+
+export type SyncUpdatableHostType = typeof SyncUpdatableHost;
+
+export declare function SyncUpdatableImplementation<T extends Constructor<LitElement>>(
+  superclass: T,
+): T &
+  Constructor<SyncUpdatableHost> &
+  Pick<typeof SyncUpdatableHost, keyof typeof SyncUpdatableHost> &
+  Pick<typeof LitElement, keyof typeof LitElement>;
+
+export type SyncUpdatableMixin = typeof SyncUpdatableImplementation;

package/components/form-core/types/utils/index.ts

@@ -0,0 +1 @@
+export * from './SyncUpdatableMixinTypes.js';