@tylertech/forge 3.0.0-next.15 → 3.0.0-next.17

package/esm/core/mixins/interactions/longpress/with-longpress-listener.js

@@ -0,0 +1,82 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { canUserHoverElements } from '../../../../constants';
+/**
+ * The delay in milliseconds before a longpress event is detected.
+ */
+export const LONGPRESS_TRIGGER_DELAY = 500;
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithLongpressListener(base = class {
+}) {
+    class LongpressListener extends base {
+        constructor() {
+            super(...arguments);
+            this._longpressStartListener = this._onLongpressStart.bind(this);
+            this._longpressEndListener = this._onLongpressEnd.bind(this);
+            this._longpressContextMenuListener = this._onLongpressContextMenu.bind(this);
+            this._longpressClickPrevent = this._onLongpressClickPrevent.bind(this);
+            this._longpressDelay = LONGPRESS_TRIGGER_DELAY;
+        }
+        _startLongpressListener(el) {
+            const type = canUserHoverElements ? 'pointerdown' : 'touchstart';
+            el.addEventListener(type, this._longpressStartListener);
+        }
+        _stopLongpressListener(el) {
+            const type = canUserHoverElements ? 'pointerdown' : 'touchstart';
+            el.removeEventListener(type, this._longpressStartListener);
+            this._unlistenLongpressEnd(el);
+        }
+        _onLongpressStart(evt) {
+            evt.target.setPointerCapture(evt.pointerId);
+            this._listenLongpressEnd(evt.target);
+            this._longpressTimeout = window.setTimeout(() => {
+                this._onLongpress();
+                if (!canUserHoverElements) {
+                    navigator.vibrate(1);
+                }
+                // We need to prevent any ghost click events from firing after a longpress is detected
+                evt.target.addEventListener('click', this._longpressClickPrevent, { capture: true, once: true });
+            }, this._longpressDelay);
+        }
+        _onLongpressClickPrevent(evt) {
+            evt.stopPropagation();
+        }
+        _onLongpressEnd(evt) {
+            this._clearTimeout();
+            this._unlistenLongpressEnd(evt.target);
+        }
+        _onLongpressContextMenu(evt) {
+            this._clearTimeout();
+            evt.target.removeEventListener('click', this._longpressClickPrevent, { capture: true });
+            this._unlistenLongpressEnd(evt.target);
+        }
+        _listenLongpressEnd(el) {
+            if (!canUserHoverElements) {
+                el.addEventListener('touchend', this._longpressEndListener);
+            }
+            else {
+                el.addEventListener('pointerup', this._longpressEndListener);
+                el.addEventListener('pointercancel', this._longpressEndListener);
+                el.addEventListener('contextmenu', this._longpressContextMenuListener);
+            }
+        }
+        _unlistenLongpressEnd(el) {
+            if (!canUserHoverElements) {
+                el.removeEventListener('touchend', this._longpressEndListener);
+            }
+            else {
+                el.removeEventListener('pointerup', this._longpressEndListener);
+                el.removeEventListener('pointercancel', this._longpressEndListener);
+                el.removeEventListener('contextmenu', this._longpressContextMenuListener);
+            }
+        }
+        _clearTimeout() {
+            window.clearTimeout(this._longpressTimeout);
+            this._longpressTimeout = undefined;
+        }
+    }
+    return LongpressListener;
+}

package/esm/core/mixins/internals/with-default-aria.d.ts

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { MixinBase, setDefaultAria, AbstractConstructor } from '../../../constants';
+import { ARIAMixinStrict, DefaultAriaOptions } from '../../utils/a11y-utils';
+import { IBaseComponent } from '../../base/base-component';
+/**
+ * A component with support for setting default ARIA.
+ */
+export interface IWithDefaultAria extends IBaseComponent {
+    /**
+     * Sets the default ARIA of the component using Element Internals if supported or sprouting
+     * ARIA attributes if not.
+     *
+     * @param properties The ARIA properties and values to set.
+     * @param options Whether or not to overwrite existing ARIA attributes. This only takes effect
+     * if Element Internals are not supported and a new attribute will be sprouted.
+     */
+    [setDefaultAria](properties: Partial<ARIAMixinStrict>, options?: DefaultAriaOptions): void;
+}
+export declare abstract class WithDefaultAriaContract {
+    [setDefaultAria](properties: Partial<ARIAMixinStrict>, options?: DefaultAriaOptions): void;
+}
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithDefaultAria<TBase extends MixinBase>(base: TBase): AbstractConstructor<WithDefaultAriaContract> & TBase;

package/esm/core/mixins/internals/with-default-aria.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals, setDefaultAria } from '../../../constants';
+import { setDefaultAria as setDefaultAriaUtil } from '../../utils/a11y-utils';
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithDefaultAria(base) {
+    class DefaultAria extends base {
+        [setDefaultAria](properties, options) {
+            setDefaultAriaUtil(this, this[internals], properties, options);
+        }
+    }
+    return DefaultAria;
+}

package/esm/core/mixins/internals/with-element-internals.d.ts

@@ -0,0 +1,26 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { AbstractConstructor, internals, MixinBase } from '../../../constants';
+import { IBaseComponent } from '../../base/base-component';
+/**
+ * A component with attached Element Internals.
+ */
+export interface IWithElementInternals extends IBaseComponent {
+    /**
+     * The Element Internals of the component.
+     */
+    readonly [internals]: ElementInternals;
+}
+export declare abstract class WithElementInternalsContract {
+    readonly [internals]: ElementInternals;
+}
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+export declare function WithElementInternals<TBase extends MixinBase>(base: TBase): AbstractConstructor<WithElementInternalsContract> & TBase;

package/esm/core/mixins/internals/with-element-internals.js

@@ -0,0 +1,22 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { internals } from '../../../constants';
+/**
+ * Mixes in Element Internals functionality into a base component.
+ *
+ * @param base The base component to mix into.
+ * @returns The mixed-in base component.
+ */
+// eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+export function WithElementInternals(base) {
+    class ElementInternalsComponent extends base {
+        constructor(...args) {
+            super(...args);
+            this[internals] = this.attachInternals();
+        }
+    }
+    return ElementInternalsComponent;
+}

package/esm/core/{base/base-label-aware-component.d.ts → mixins/label/with-label-aware.d.ts}

@@ -3,8 +3,8 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
-import { AbstractConstructor, MixinBase } from '../../constants';
-import { IBaseComponent } from './base-component';
+import { AbstractConstructor, MixinBase } from '../../../constants';
+import { IBaseComponent } from '../../base/base-component';
 /**
  * An element that can be associated with a Forge label component.
  */

package/esm/core/utils/a11y-utils.d.ts

@@ -88,9 +88,9 @@ export declare function ariaPropertyToAttribute<K extends ARIAProperty | 'role'>
  * @returns An ARIA mixin property.
  */
 export declare function ariaAttributeToProperty<K extends ARIAAttribute | 'role'>(attribute: K): ARIAProperty;
-export interface DefaultAriaOptions {
-    overwrite?: boolean;
-}
+export type DefaultAriaOptions = {
+    setAttribute?: boolean;
+};
 /**
  * Applies default ARIA to an element through ElementInternals if supported. Otherwise, ARIA
  * attributes are set directly on the element and stored in additional `data-default-*` attributes
@@ -123,34 +123,4 @@ export interface DefaultAriaOptions {
  *   }
  * }
  */
-export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, options?: DefaultAriaOptions): void;
-/**
- * Sets a `*Default` property on an element to backup the default value of an ARIA attribute.
- *
- * @param element The element to store the default ARIA value on.
- * @param property The ARIA mixin property.
- * @param value The default value to store.
- */
-export declare function storeDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T, value: ARIAMixinStrict[T]): void;
-/**
- * Removes a `*Default` property from an element.
- *
- * @param element The element to remove the default ARIA value from.
- * @param property The ARIA mixin property.
- */
-export declare function removeDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T): void;
-/**
- * Gets a default ARIA value from an element's `*Default` property.
- *
- * @param element The element to retrieve the default ARIA value from.
- * @param property An ARIA mixin property.
- * @returns The value of the default ARIA attribute, or null if it does not exist.
- */
-export declare function retrieveDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T): ARIAMixinStrict[T] | null;
-/**
- * Restores the given ARIA attribute of an element to its default value if it exists.
- *
- * @param element The element to restore the ARIA attribute on.
- * @param property The ARIA mixin property.
- */
-export declare function restoreDefaultAria<T extends keyof ARIAMixinStrict>(element: HTMLElement, property: T): void;
+export declare function setDefaultAria(element: HTMLElement, internals: ElementInternals, properties: Partial<ARIAMixinStrict>, { setAttribute }?: DefaultAriaOptions): void;

package/esm/core/utils/a11y-utils.js

@@ -58,7 +58,7 @@ export const ARIA_PROPERTIES = [
 /**
  * An object mapping all ARIA attributes to their corresponding properties.
  *
- * This is required because the proeprty name cannot be reliably inferred from the attribute name.
+ * This is required because the property name cannot be reliably inferred from the attribute name.
  */
 const ARIA_ATTRIBUTES_TO_PROPERTIES = {
     'aria-atomic': 'ariaAtomic',
@@ -156,68 +156,14 @@ export function ariaAttributeToProperty(attribute) {
  *   }
  * }
  */
-export function setDefaultAria(element, internals, properties, options) {
-    if (supportsElementInternalsAria()) {
-        Object.entries(properties).forEach(([key, value]) => {
-            internals[key] = value;
-        });
-        return;
-    }
+export function setDefaultAria(element, internals, properties, { setAttribute } = { setAttribute: true }) {
     Object.entries(properties).forEach(([key, value]) => {
-        const ariaAttribute = ariaPropertyToAttribute(key);
-        if ((options === null || options === void 0 ? void 0 : options.overwrite) || !element.hasAttribute(ariaAttribute)) {
-            toggleAttribute(element, value != null, ariaPropertyToAttribute(key), value === null || value === void 0 ? void 0 : value.toString());
-        }
-        if (value != null) {
-            storeDefaultAria(element, key, value);
+        if (supportsElementInternalsAria()) {
+            internals[key] = value;
         }
-        else {
-            removeDefaultAria(element, key);
+        const attribute = ariaPropertyToAttribute(key);
+        if (setAttribute || !element.hasAttribute(attribute)) {
+            toggleAttribute(element, value != null, attribute, value);
         }
     });
 }
-/**
- * Sets a `*Default` property on an element to backup the default value of an ARIA attribute.
- *
- * @param element The element to store the default ARIA value on.
- * @param property The ARIA mixin property.
- * @param value The default value to store.
- */
-export function storeDefaultAria(element, property, value) {
-    element[getDefaultAriaPropertyName(property)] = value;
-}
-/**
- * Removes a `*Default` property from an element.
- *
- * @param element The element to remove the default ARIA value from.
- * @param property The ARIA mixin property.
- */
-export function removeDefaultAria(element, property) {
-    delete element[getDefaultAriaPropertyName(property)];
-}
-/**
- * Gets a default ARIA value from an element's `*Default` property.
- *
- * @param element The element to retrieve the default ARIA value from.
- * @param property An ARIA mixin property.
- * @returns The value of the default ARIA attribute, or null if it does not exist.
- */
-export function retrieveDefaultAria(element, property) {
-    const value = element[getDefaultAriaPropertyName(property)];
-    return !!value ? value : null;
-}
-/**
- * Restores the given ARIA attribute of an element to its default value if it exists.
- *
- * @param element The element to restore the ARIA attribute on.
- * @param property The ARIA mixin property.
- */
-export function restoreDefaultAria(element, property) {
-    const defaultValue = retrieveDefaultAria(element, property);
-    if (defaultValue !== null) {
-        toggleAttribute(element, true, ariaPropertyToAttribute(property), defaultValue.toString());
-    }
-}
-function getDefaultAriaPropertyName(property) {
-    return `_forge_${property}Default`;
-}

package/esm/core/utils/deferred.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Represents a deferred promise.
+ *
+ * Use deferred promises when you need to return a promise but you don't have the result yet.
+ */
+export declare class Deferred<T = void> {
+    /**
+     * The promise to be resolved or rejected.
+     */
+    readonly promise: Promise<T>;
+    private _resolveFn;
+    private _rejectFn;
+    constructor();
+    /**
+     * Resolves the promise.
+     * @param param The value to resolve the promise with.
+     */
+    resolve(param: T): void;
+    /**
+     * Rejects the promise.
+     * @param reason The reason for rejecting the promise.
+     */
+    reject(reason?: any): void;
+}

package/esm/core/utils/deferred.js

@@ -0,0 +1,32 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+/**
+ * Represents a deferred promise.
+ *
+ * Use deferred promises when you need to return a promise but you don't have the result yet.
+ */
+export class Deferred {
+    constructor() {
+        this.promise = new Promise((resolve, reject) => {
+            this._resolveFn = resolve;
+            this._rejectFn = reject;
+        });
+    }
+    /**
+     * Resolves the promise.
+     * @param param The value to resolve the promise with.
+     */
+    resolve(param) {
+        this._resolveFn(param);
+    }
+    /**
+     * Rejects the promise.
+     * @param reason The reason for rejecting the promise.
+     */
+    reject(reason) {
+        this._rejectFn(reason);
+    }
+}

package/esm/core/utils/dismissible-stack.d.ts

@@ -0,0 +1,74 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+export declare const tryDismiss: unique symbol;
+export interface IDismissibleStackState<T = string> {
+    [key: string]: T;
+}
+export interface IDismissible {
+    [tryDismiss](state?: IDismissibleStackState): boolean;
+}
+export declare class DismissibleStack<T extends IDismissible> {
+    private _deferredDismiss;
+    /**
+     * A promise that resolves when all elements in the stack have finished dismissing.
+     *
+     * Resolves immediately if there are no elements in the stack.
+     */
+    get dismissing(): Promise<void>;
+    /**
+     * A set of all elements that are currently eligible for dismissal.
+     *
+     * Typically used when a user is force dismissing an element, such as when they click
+     * an element that triggered it to open.
+     */
+    private _dismissibleElements;
+    /**
+     * A map of all elements that are requesting to be dismissed, and the state that they
+     * are requesting to dismiss with.
+     *
+     * This is used to queue up dismiss requests so that we can wait for all other elements
+     * to dispatch their dismiss events, typically used with light dismiss.
+     */
+    private _elementsRequestingDismiss;
+    private constructor();
+    static get instance(): DismissibleStack<IDismissible>;
+    /**
+     * Dismisses all elements in the stack that have been presented after the provided element.
+     * @param el The element to dismiss
+     * @param state The state to pass to the dismiss method of each element
+     */
+    dismiss(el: T, state: IDismissibleStackState): Promise<void>;
+    /**
+     * Queues an element to be dismissed. This allows for us to asynchronously wait for all
+     * other elements to dispatch their dismiss events so that consumers can cancel the dismiss
+     * if they want to, without closing their parent dismissible elements.
+     * @param el
+     * @param dismissState
+     * @returns
+     */
+    requestDismiss(el: T, dismissState: IDismissibleStackState): Promise<void>;
+    /**
+     * Adds an element to the dismissible queue.
+     *
+     * Use this when an element is opened and should be eligible for dismissal in a stack of other
+     * dismissible elements.
+     */
+    add(el: T): void;
+    /**
+     * Removes an element from the dismissible queue.
+     *
+     * Use this when an element is closed and should no longer be eligible for dismissal in a stack.
+     */
+    remove(el: T): void;
+    /**
+     * Checks if an element is in the dismissible queue.
+     */
+    has(el: T): boolean;
+    /**
+     * Checks if an element is requesting to be dismissed.
+     */
+    isRequestingLightDismiss(el: T): boolean;
+}

package/esm/core/utils/dismissible-stack.js

@@ -0,0 +1,133 @@
+/**
+ * @license
+ * Copyright 2023 Tyler Technologies, Inc. 
+ * License: Apache-2.0
+ */
+import { Deferred } from './deferred';
+import { task } from './event-utils';
+// The symbol to use for the tryDismiss method on dismissible elements
+export const tryDismiss = Symbol('tryDismiss');
+// The key to use for storing the dismissible stack on the window object
+const DISMISSIBLE_STACK_INSTANCE_KEY = Symbol('forgeDismissibleStack');
+export class DismissibleStack {
+    /**
+     * A promise that resolves when all elements in the stack have finished dismissing.
+     *
+     * Resolves immediately if there are no elements in the stack.
+     */
+    get dismissing() {
+        var _a, _b;
+        return (_b = (_a = this._deferredDismiss) === null || _a === void 0 ? void 0 : _a.promise) !== null && _b !== void 0 ? _b : Promise.resolve();
+    }
+    // eslint-disable-next-line @tylertech-eslint/require-private-modifier
+    constructor() {
+        /**
+         * A set of all elements that are currently eligible for dismissal.
+         *
+         * Typically used when a user is force dismissing an element, such as when they click
+         * an element that triggered it to open.
+         */
+        this._dismissibleElements = new Set();
+        /**
+         * A map of all elements that are requesting to be dismissed, and the state that they
+         * are requesting to dismiss with.
+         *
+         * This is used to queue up dismiss requests so that we can wait for all other elements
+         * to dispatch their dismiss events, typically used with light dismiss.
+         */
+        this._elementsRequestingDismiss = new Map();
+    }
+    static get instance() {
+        // We store our instance on the window object so that it can be shared across multiple
+        // instances of Forge components
+        if (!window[DISMISSIBLE_STACK_INSTANCE_KEY]) {
+            window[DISMISSIBLE_STACK_INSTANCE_KEY] = new DismissibleStack();
+        }
+        return window[DISMISSIBLE_STACK_INSTANCE_KEY];
+    }
+    /**
+     * Dismisses all elements in the stack that have been presented after the provided element.
+     * @param el The element to dismiss
+     * @param state The state to pass to the dismiss method of each element
+     */
+    async dismiss(el, state) {
+        const elements = Array.from(this._dismissibleElements);
+        const elementsAfter = elements.slice(elements.indexOf(el)).reverse();
+        for (const element of elementsAfter) {
+            if (!element[tryDismiss](state)) {
+                break;
+            }
+        }
+    }
+    /**
+     * Queues an element to be dismissed. This allows for us to asynchronously wait for all
+     * other elements to dispatch their dismiss events so that consumers can cancel the dismiss
+     * if they want to, without closing their parent dismissible elements.
+     * @param el
+     * @param dismissState
+     * @returns
+     */
+    async requestDismiss(el, dismissState) {
+        var _a;
+        if (!this._deferredDismiss) {
+            this._deferredDismiss = new Deferred();
+        }
+        this._elementsRequestingDismiss.set(el, dismissState);
+        // Wait for all other element to finish queuing their dismiss events
+        await task();
+        // The first element to call this method will handle attempting to dismiss the rest of
+        // elements, and will clear the queue when it is done. All other subsequent elements will
+        // just return here if called within the same task.
+        if (!this.isRequestingLightDismiss(el)) {
+            return;
+        }
+        // Get all elements that are requesting to be dismissed, and reverse the order so that
+        // we can attempt to dismiss them in a top-down order (most recently opened first)
+        const elements = Array.from(this._elementsRequestingDismiss).reverse();
+        // Clear all elements from the stack since we are don't need references to them anymore
+        this._elementsRequestingDismiss.clear();
+        // Attempt to dismiss each element in the queue (most recently opened first), if any of
+        // them are prevented, stop trying to dismiss the rest
+        try {
+            for (const [element, state] of elements) {
+                if (!element[tryDismiss](state)) {
+                    break;
+                }
+            }
+        }
+        finally {
+            (_a = this._deferredDismiss) === null || _a === void 0 ? void 0 : _a.resolve();
+            this._deferredDismiss = undefined;
+        }
+    }
+    /**
+     * Adds an element to the dismissible queue.
+     *
+     * Use this when an element is opened and should be eligible for dismissal in a stack of other
+     * dismissible elements.
+     */
+    add(el) {
+        this._dismissibleElements.add(el);
+    }
+    /**
+     * Removes an element from the dismissible queue.
+     *
+     * Use this when an element is closed and should no longer be eligible for dismissal in a stack.
+     */
+    remove(el) {
+        this._dismissibleElements.delete(el);
+        this._elementsRequestingDismiss.delete(el);
+    }
+    /**
+     * Checks if an element is in the dismissible queue.
+     */
+    has(el) {
+        return this._dismissibleElements.has(el);
+    }
+    /**
+     * Checks if an element is requesting to be dismissed.
+     */
+    isRequestingLightDismiss(el) {
+        return this._elementsRequestingDismiss.has(el);
+    }
+}

package/esm/core/utils/feature-detection.d.ts

@@ -16,3 +16,8 @@ export declare function supportsPopover(): boolean;
  * @returns {boolean}
  */
 export declare function supportsElementInternalsAria(): boolean;
+/**
+ * Detects if the browser supports the hovering elements as the users primary input mechanism.
+ * @returns {boolean}
+ */
+export declare function supportsHover(): boolean;

package/esm/core/utils/feature-detection.js

@@ -3,6 +3,7 @@
  * Copyright 2023 Tyler Technologies, Inc. 
  * License: Apache-2.0
  */
+import { Platform } from '@tylertech/forge-core';
 /**
  * Detects if the browser supports the `popover` attribute.
  * @returns {boolean}
@@ -18,7 +19,15 @@ export function supportsPopover() {
  * @returns {boolean}
  */
 export function supportsElementInternalsAria() {
-    // TODO: return whether the user agent actually supports this when tooling is able to detect it
-    // return ElementInternals.prototype.hasOwnProperty('role');
-    return false;
+    return ElementInternals.prototype.hasOwnProperty('role');
+}
+/**
+ * Detects if the browser supports the hovering elements as the users primary input mechanism.
+ * @returns {boolean}
+ */
+export function supportsHover() {
+    // TODO: hover media query is not working in CI headless chrome, so we are using the Platform.isMobile flag for now.
+    //       This should be reverted once we switch to using puppeteer or playwright for testing in CI.
+    // return window.matchMedia('(hover: hover)').matches;
+    return !Platform.isMobile;
 }

package/esm/core/utils/form-utils.d.ts

@@ -4,7 +4,7 @@
  * License: Apache-2.0
  */
 export type FormValue = File | string | FormData;
-export type FormRestoreState = File | string | Array<[string, FormDataEntryValue]>;
+export type FormRestoreState = File | string | FormData | Array<[string, FormDataEntryValue]>;
 export type FormRestoreReason = 'restore' | 'autocomplete';
 export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'select' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
 export type InputValidationProp = keyof InputValidationProps;