@italia/globals 0.1.0-alpha.1 → 1.0.0-alpha.4

package/dist/src/controllers/roving-tabindex-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-tabindex-controller.d.ts","sourceRoot":"","sources":["../../../src/controllers/roving-tabindex-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAEjE,MAAM,WAAW,oBAAoB,CAAC,CAAC,SAAS,WAAW;IACzD;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC,EAAE,CAAC;IAEpB;;OAEG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,YAAY,GAAG,UAAU,KAAK,IAAI,CAAC;IAE/E;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,GAAG,UAAU,GAAG,MAAM,CAAC;IAE/C;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,CAAC,KAAK,OAAO,CAAC;CACjC;AAED;;;;;;;;;;;;;GAaG;AACH,qBAAa,wBAAwB,CAAC,CAAC,SAAS,WAAW,CAAE,YAAW,kBAAkB;IACxF,OAAO,CAAC,IAAI,CAAyB;IAErC,OAAO,CAAC,MAAM,CAKZ;gBAEU,IAAI,EAAE,sBAAsB,EAAE,MAAM,EAAE,oBAAoB,CAAC,CAAC,CAAC;IAazE,aAAa,IAAI,IAAI;IAKrB,gBAAgB,IAAI,IAAI;IAIxB;;;OAGG;IACH,gBAAgB,CAAC,WAAW,CAAC,EAAE,MAAM,GAAG,IAAI;IA8B5C;;;;;OAKG;IACH,aAAa,CAAC,WAAW,EAAE,CAAC,EAAE,KAAK,EAAE,aAAa,GAAG,OAAO;IAyE5D;;OAEG;IACH,OAAO,CAAC,YAAY;IAmBpB;;OAEG;IACH,OAAO,CAAC,kBAAkB;IAkB1B;;OAEG;IACH,SAAS,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI;IAUxB;;OAEG;IACH,UAAU,IAAI,IAAI;IASlB;;OAEG;IACH,SAAS,IAAI,IAAI;CAQlB"}

package/dist/src/controllers/roving-tabindex-controller.js

@@ -0,0 +1,200 @@
+/**
+ * Roving Tabindex Controller
+ *
+ * Implements the ARIA roving tabindex pattern for keyboard navigation.
+ * See: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex
+ *
+ * Usage:
+ * ```ts
+ * private rovingTabindex = new RovingTabindexController(this, {
+ *   getItems: () => Array.from(this.querySelectorAll('my-item')),
+ *   onSelect: (item) => this.selectItem(item),
+ * });
+ * ```
+ */
+export class RovingTabindexController {
+    constructor(host, config) {
+        this.host = host;
+        this.config = {
+            wrap: true,
+            direction: 'both',
+            selectOnFocus: false,
+            skipItem: (item) => item.hasAttribute('disabled') || item.disabled === true,
+            ...config,
+        };
+        host.addController(this);
+    }
+    // eslint-disable-next-line class-methods-use-this
+    hostConnected() {
+        // Controller is ready when host connects
+    }
+    // eslint-disable-next-line class-methods-use-this
+    hostDisconnected() {
+        // Cleanup if needed
+    }
+    /**
+     * Update tabindex values for all items
+     * @param activeIndex - Index of the item that should be tabbable (default: 0 or first non-disabled)
+     */
+    updateTabindices(activeIndex) {
+        const items = this.config.getItems();
+        if (!items || items.length === 0) {
+            return;
+        }
+        // Find the active index
+        let targetIndex = activeIndex ?? 0;
+        // If no active index specified, use first non-disabled item
+        if (activeIndex === undefined) {
+            targetIndex = items.findIndex((item) => !this.config.skipItem(item));
+            if (targetIndex === -1) {
+                targetIndex = 0; // Fallback to first item if all disabled
+            }
+        }
+        // Set tabindex for all items
+        items.forEach((item, index) => {
+            const itemElement = item;
+            if (this.config.skipItem(itemElement)) {
+                // eslint-disable-next-line no-param-reassign
+                itemElement.tabIndex = -1;
+            }
+            else {
+                // eslint-disable-next-line no-param-reassign
+                itemElement.tabIndex = index === targetIndex ? 0 : -1;
+            }
+        });
+    }
+    /**
+     * Handle keyboard navigation
+     * @param currentItem - The currently focused item
+     * @param event - The keyboard event
+     * @returns true if the event was handled, false otherwise
+     */
+    handleKeydown(currentItem, event) {
+        const { direction } = this.config;
+        const { key } = event;
+        // Determine if this key should be handled based on direction
+        const isVertical = key === 'ArrowUp' || key === 'ArrowDown';
+        const isHorizontal = key === 'ArrowLeft' || key === 'ArrowRight';
+        const isHome = key === 'Home';
+        const isEnd = key === 'End';
+        const shouldHandle = isHome ||
+            isEnd ||
+            (direction === 'both' && (isVertical || isHorizontal)) ||
+            (direction === 'vertical' && isVertical) ||
+            (direction === 'horizontal' && isHorizontal);
+        if (!shouldHandle) {
+            return false;
+        }
+        // Prevent default behavior (page scrolling)
+        event.preventDefault();
+        const items = this.config.getItems();
+        const currentIndex = items.indexOf(currentItem);
+        if (currentIndex === -1) {
+            return false;
+        }
+        let nextIndex = currentIndex;
+        // Handle Home/End keys
+        if (isHome) {
+            nextIndex = 0;
+        }
+        else if (isEnd) {
+            nextIndex = items.length - 1;
+        }
+        else {
+            // Handle arrow keys
+            const isNext = key === 'ArrowDown' || key === 'ArrowRight';
+            const isPrev = key === 'ArrowUp' || key === 'ArrowLeft';
+            if (isNext) {
+                nextIndex = this.getNextIndex(items, currentIndex, 1);
+            }
+            else if (isPrev) {
+                nextIndex = this.getNextIndex(items, currentIndex, -1);
+            }
+        }
+        // Skip disabled items
+        nextIndex = this.findNextValidIndex(items, nextIndex, nextIndex > currentIndex ? 1 : -1);
+        if (nextIndex !== -1 && nextIndex !== currentIndex) {
+            const nextItem = items[nextIndex];
+            // Update tabindices
+            this.updateTabindices(nextIndex);
+            // Focus the next item
+            nextItem.focus();
+            // Optionally select/activate the item
+            if (this.config.selectOnFocus && this.config.onSelect) {
+                this.config.onSelect(nextItem, event);
+            }
+            return true;
+        }
+        return false;
+    }
+    /**
+     * Get the next index based on direction
+     */
+    getNextIndex(items, currentIndex, direction) {
+        const { wrap } = this.config;
+        let nextIndex = currentIndex + direction;
+        if (wrap) {
+            // Wrap around
+            if (nextIndex < 0) {
+                nextIndex = items.length - 1;
+            }
+            else if (nextIndex >= items.length) {
+                nextIndex = 0;
+            }
+        }
+        else {
+            // Clamp to bounds
+            nextIndex = Math.max(0, Math.min(items.length - 1, nextIndex));
+        }
+        return nextIndex;
+    }
+    /**
+     * Find the next valid (non-disabled) index
+     */
+    findNextValidIndex(items, startIndex, direction) {
+        const maxAttempts = items.length;
+        let attempts = 0;
+        let index = startIndex;
+        while (attempts < maxAttempts) {
+            if (!this.config.skipItem(items[index])) {
+                return index;
+            }
+            index = this.getNextIndex(items, index, direction);
+            attempts += 1;
+        }
+        // All items are disabled
+        return -1;
+    }
+    /**
+     * Set focus to a specific item
+     */
+    focusItem(item) {
+        const items = this.config.getItems();
+        const index = items.indexOf(item);
+        if (index !== -1) {
+            this.updateTabindices(index);
+            item.focus();
+        }
+    }
+    /**
+     * Set focus to the first non-disabled item
+     */
+    focusFirst() {
+        const items = this.config.getItems();
+        const firstValidIndex = this.findNextValidIndex(items, 0, 1);
+        if (firstValidIndex !== -1) {
+            this.focusItem(items[firstValidIndex]);
+        }
+    }
+    /**
+     * Set focus to the last non-disabled item
+     */
+    focusLast() {
+        const items = this.config.getItems();
+        const lastValidIndex = this.findNextValidIndex(items, items.length - 1, -1);
+        if (lastValidIndex !== -1) {
+            this.focusItem(items[lastValidIndex]);
+        }
+    }
+}
+//# sourceMappingURL=roving-tabindex-controller.js.map

package/dist/src/controllers/roving-tabindex-controller.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"roving-tabindex-controller.js","sourceRoot":"","sources":["../../../src/controllers/roving-tabindex-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController, ReactiveControllerHost } from 'lit';\n\nexport interface RovingTabindexConfig<T extends HTMLElement> {\n  /**\n   * Selector or function to get the items to manage\n   */\n  getItems: () => T[];\n\n  /**\n   * Callback when an item is selected/activated\n   */\n  onSelect?: (item: T, event: KeyboardEvent | PointerEvent | MouseEvent) => void;\n\n  /**\n   * Whether items wrap around (last -> first and vice versa)\n   * @default true\n   */\n  wrap?: boolean;\n\n  /**\n   * Direction of navigation\n   * @default 'both'\n   */\n  direction?: 'horizontal' | 'vertical' | 'both';\n\n  /**\n   * Whether to select items on focus (vs just focusing)\n   * @default false\n   */\n  selectOnFocus?: boolean;\n\n  /**\n   * Custom logic to determine if an item should be skipped\n   * @default (item) => item.hasAttribute('disabled')\n   */\n  skipItem?: (item: T) => boolean;\n}\n\n/**\n * Roving Tabindex Controller\n *\n * Implements the ARIA roving tabindex pattern for keyboard navigation.\n * See: https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#kbd_roving_tabindex\n *\n * Usage:\n * ```ts\n * private rovingTabindex = new RovingTabindexController(this, {\n *   getItems: () => Array.from(this.querySelectorAll('my-item')),\n *   onSelect: (item) => this.selectItem(item),\n * });\n * ```\n */\nexport class RovingTabindexController<T extends HTMLElement> implements ReactiveController {\n  private host: ReactiveControllerHost;\n\n  private config: RovingTabindexConfig<T> & {\n    wrap: boolean;\n    direction: 'horizontal' | 'vertical' | 'both';\n    selectOnFocus: boolean;\n    skipItem: (item: T) => boolean;\n  };\n\n  constructor(host: ReactiveControllerHost, config: RovingTabindexConfig<T>) {\n    this.host = host;\n    this.config = {\n      wrap: true,\n      direction: 'both',\n      selectOnFocus: false,\n      skipItem: (item) => item.hasAttribute('disabled') || (item as any).disabled === true,\n      ...config,\n    };\n    host.addController(this);\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  hostConnected(): void {\n    // Controller is ready when host connects\n  }\n\n  // eslint-disable-next-line class-methods-use-this\n  hostDisconnected(): void {\n    // Cleanup if needed\n  }\n\n  /**\n   * Update tabindex values for all items\n   * @param activeIndex - Index of the item that should be tabbable (default: 0 or first non-disabled)\n   */\n  updateTabindices(activeIndex?: number): void {\n    const items = this.config.getItems();\n    if (!items || items.length === 0) {\n      return;\n    }\n\n    // Find the active index\n    let targetIndex = activeIndex ?? 0;\n\n    // If no active index specified, use first non-disabled item\n    if (activeIndex === undefined) {\n      targetIndex = items.findIndex((item) => !this.config.skipItem(item));\n      if (targetIndex === -1) {\n        targetIndex = 0; // Fallback to first item if all disabled\n      }\n    }\n\n    // Set tabindex for all items\n    items.forEach((item, index) => {\n      const itemElement = item;\n      if (this.config.skipItem(itemElement)) {\n        // eslint-disable-next-line no-param-reassign\n        itemElement.tabIndex = -1;\n      } else {\n        // eslint-disable-next-line no-param-reassign\n        itemElement.tabIndex = index === targetIndex ? 0 : -1;\n      }\n    });\n  }\n\n  /**\n   * Handle keyboard navigation\n   * @param currentItem - The currently focused item\n   * @param event - The keyboard event\n   * @returns true if the event was handled, false otherwise\n   */\n  handleKeydown(currentItem: T, event: KeyboardEvent): boolean {\n    const { direction } = this.config;\n    const { key } = event;\n\n    // Determine if this key should be handled based on direction\n    const isVertical = key === 'ArrowUp' || key === 'ArrowDown';\n    const isHorizontal = key === 'ArrowLeft' || key === 'ArrowRight';\n    const isHome = key === 'Home';\n    const isEnd = key === 'End';\n\n    const shouldHandle =\n      isHome ||\n      isEnd ||\n      (direction === 'both' && (isVertical || isHorizontal)) ||\n      (direction === 'vertical' && isVertical) ||\n      (direction === 'horizontal' && isHorizontal);\n\n    if (!shouldHandle) {\n      return false;\n    }\n\n    // Prevent default behavior (page scrolling)\n    event.preventDefault();\n\n    const items = this.config.getItems();\n    const currentIndex = items.indexOf(currentItem);\n\n    if (currentIndex === -1) {\n      return false;\n    }\n\n    let nextIndex = currentIndex;\n\n    // Handle Home/End keys\n    if (isHome) {\n      nextIndex = 0;\n    } else if (isEnd) {\n      nextIndex = items.length - 1;\n    } else {\n      // Handle arrow keys\n      const isNext = key === 'ArrowDown' || key === 'ArrowRight';\n      const isPrev = key === 'ArrowUp' || key === 'ArrowLeft';\n\n      if (isNext) {\n        nextIndex = this.getNextIndex(items, currentIndex, 1);\n      } else if (isPrev) {\n        nextIndex = this.getNextIndex(items, currentIndex, -1);\n      }\n    }\n\n    // Skip disabled items\n    nextIndex = this.findNextValidIndex(items, nextIndex, nextIndex > currentIndex ? 1 : -1);\n\n    if (nextIndex !== -1 && nextIndex !== currentIndex) {\n      const nextItem = items[nextIndex];\n\n      // Update tabindices\n      this.updateTabindices(nextIndex);\n\n      // Focus the next item\n      nextItem.focus();\n\n      // Optionally select/activate the item\n      if (this.config.selectOnFocus && this.config.onSelect) {\n        this.config.onSelect(nextItem, event);\n      }\n\n      return true;\n    }\n\n    return false;\n  }\n\n  /**\n   * Get the next index based on direction\n   */\n  private getNextIndex(items: T[], currentIndex: number, direction: 1 | -1): number {\n    const { wrap } = this.config;\n    let nextIndex = currentIndex + direction;\n\n    if (wrap) {\n      // Wrap around\n      if (nextIndex < 0) {\n        nextIndex = items.length - 1;\n      } else if (nextIndex >= items.length) {\n        nextIndex = 0;\n      }\n    } else {\n      // Clamp to bounds\n      nextIndex = Math.max(0, Math.min(items.length - 1, nextIndex));\n    }\n\n    return nextIndex;\n  }\n\n  /**\n   * Find the next valid (non-disabled) index\n   */\n  private findNextValidIndex(items: T[], startIndex: number, direction: 1 | -1): number {\n    const maxAttempts = items.length;\n    let attempts = 0;\n    let index = startIndex;\n\n    while (attempts < maxAttempts) {\n      if (!this.config.skipItem(items[index])) {\n        return index;\n      }\n\n      index = this.getNextIndex(items, index, direction);\n      attempts += 1;\n    }\n\n    // All items are disabled\n    return -1;\n  }\n\n  /**\n   * Set focus to a specific item\n   */\n  focusItem(item: T): void {\n    const items = this.config.getItems();\n    const index = items.indexOf(item);\n\n    if (index !== -1) {\n      this.updateTabindices(index);\n      item.focus();\n    }\n  }\n\n  /**\n   * Set focus to the first non-disabled item\n   */\n  focusFirst(): void {\n    const items = this.config.getItems();\n    const firstValidIndex = this.findNextValidIndex(items, 0, 1);\n\n    if (firstValidIndex !== -1) {\n      this.focusItem(items[firstValidIndex]);\n    }\n  }\n\n  /**\n   * Set focus to the last non-disabled item\n   */\n  focusLast(): void {\n    const items = this.config.getItems();\n    const lastValidIndex = this.findNextValidIndex(items, items.length - 1, -1);\n\n    if (lastValidIndex !== -1) {\n      this.focusItem(items[lastValidIndex]);\n    }\n  }\n}\n"]}

package/dist/src/form/form-control.d.ts

@@ -0,0 +1,61 @@
+import { BaseLocalizedComponent } from '../base-component/base-component.js';
+import { FormControlController } from './form-controller.js';
+export declare class FormControl extends BaseLocalizedComponent {
+    protected readonly formControlController: FormControlController;
+    _touched: boolean;
+    inputElement: HTMLInputElement;
+    /** The name of the input, submitted as a name/value pair with form data. */
+    name: string;
+    /** The current value of the input, submitted as a name/value pair with form data. */
+    value: string;
+    /** If the input is disabled. */
+    disabled: boolean;
+    /**
+     * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+     * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+     * the same document or shadow root for this to work.
+     */
+    form: string;
+    /** If you implement your custom validation and you won't to trigger default validation */
+    customValidation: boolean;
+    /** If your input is invalid from your custom validition, set this attribute with message validation */
+    validationText: string;
+    /** Pattern the `value` must match to be valid */
+    pattern?: string;
+    /** The input's minimum value. Only applies to date and number input types. */
+    min: number | string | Date | undefined;
+    /** The input's maximum value. Only applies to date and number input types. */
+    max: number | string | Date | undefined;
+    /**
+     * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+     * implied, allowing any numeric value. Only applies to date and number input types.
+     */
+    step: number | 'any';
+    /** The input's minimum length. */
+    minlength: number;
+    /** The input's maximum length. */
+    maxlength: number;
+    /** If the input is required. */
+    required: boolean;
+    protected isInGroup: boolean;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    validationMessage: string;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    checkValidity(): boolean;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    protected _handleReady(): void;
+    protected _handleInput(e: Event): void;
+    protected _handleBlur(e: Event): void;
+    protected _handleFocus(e: Event): void;
+    protected _handleClick(e: Event): void;
+    protected handleValidationMessages(): void;
+    protected _handleInvalid(event: Event): void;
+    protected _handleChange(e: Event): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+}
+//# sourceMappingURL=form-control.d.ts.map

package/dist/src/form/form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../../src/form/form-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC;AAC7E,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAK7D,qBAAa,WAAY,SAAQ,sBAAsB;IACrD,SAAS,CAAC,QAAQ,CAAC,qBAAqB,wBAErC;IASH,QAAQ,UAAS;IAGjB,YAAY,EAAG,gBAAgB,CAAC;IAEhC,4EAA4E;IAE5E,IAAI,SAAM;IAEV,qFAAqF;IAErF,KAAK,SAAM;IAEX,gCAAgC;IAEhC,QAAQ,UAAS;IAEjB;;;;OAIG;IACwC,IAAI,SAAM;IAErD,0FAA0F;IAE1F,gBAAgB,UAAS;IAEzB,uGAAuG;IAEvG,cAAc,EAAE,MAAM,CAAM;IAE5B,iDAAiD;IAEjD,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB,8EAA8E;IAE9E,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAExC,8EAA8E;IAE9E,GAAG,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC;IAExC;;;OAGG;IAEH,IAAI,EAAE,MAAM,GAAG,KAAK,CAAS;IAE7B,kCAAkC;IAElC,SAAS,SAAM;IAEf,kCAAkC;IAElC,SAAS,SAAM;IAEf,gCAAgC;IAEhC,QAAQ,UAAS;IAIjB,SAAS,CAAC,SAAS,UAAS;IAE5B,qCAAqC;IACrC,IAAW,QAAQ,IAAI,aAAa,CAEnC;IAGM,iBAAiB,SAAM;IAE9B,+CAA+C;IACxC,OAAO,IAAI,eAAe,GAAG,IAAI;IAKjC,aAAa,IAAI,OAAO;IAK/B,gGAAgG;IACzF,cAAc;IAOrB,kFAAkF;IAC3E,iBAAiB,CAAC,OAAO,EAAE,MAAM;IAOxC,SAAS,CAAC,YAAY;IAOtB,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAY/B,SAAS,CAAC,WAAW,CAAC,CAAC,EAAE,KAAK;IAO9B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAK/B,SAAS,CAAC,YAAY,CAAC,CAAC,EAAE,KAAK;IAO/B,SAAS,CAAC,wBAAwB;IAmClC,SAAS,CAAC,cAAc,CAAC,KAAK,EAAE,KAAK;IAKrC,SAAS,CAAC,aAAa,CAAC,CAAC,EAAE,KAAK;IAoCvB,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,MAAM,GAAG,MAAM,GAAG,MAAM,EAAE,OAAO,CAAC;CAS3E"}

package/dist/src/form/form-control.js

@@ -0,0 +1,259 @@
+import { __decorate, __metadata } from "tslib";
+import { property, query, state } from 'lit/decorators.js';
+import { registerTranslation } from '@italia/i18n';
+import { BaseLocalizedComponent } from '../base-component/base-component.js';
+import { FormControlController } from './form-controller.js';
+import it from './locales/it.js';
+registerTranslation(it);
+export class FormControl extends BaseLocalizedComponent {
+    constructor() {
+        super(...arguments);
+        this.formControlController = new FormControlController(this, {
+            assumeInteractionOn: ['it-input', 'it-blur', 'it-change'],
+        });
+        // TODO: verificare se serve davvero con il fatto che usiamo form-controller
+        // static formAssociated = true;
+        //   @property()
+        // internals = this.attachInternals();
+        this._touched = false;
+        /** The name of the input, submitted as a name/value pair with form data. */
+        this.name = '';
+        /** The current value of the input, submitted as a name/value pair with form data. */
+        this.value = '';
+        /** If the input is disabled. */
+        this.disabled = false;
+        /**
+         * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you
+         * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in
+         * the same document or shadow root for this to work.
+         */
+        this.form = '';
+        /** If you implement your custom validation and you won't to trigger default validation */
+        this.customValidation = false;
+        /** If your input is invalid from your custom validition, set this attribute with message validation */
+        this.validationText = '';
+        /**
+         * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is
+         * implied, allowing any numeric value. Only applies to date and number input types.
+         */
+        this.step = 'any';
+        /** The input's minimum length. */
+        this.minlength = -1;
+        /** The input's maximum length. */
+        this.maxlength = -1;
+        /** If the input is required. */
+        this.required = false;
+        /* For grouped input, like checkbox-group */
+        this.isInGroup = false;
+        this.validationMessage = '';
+    }
+    /** Gets the validity state object */
+    get validity() {
+        return this.inputElement?.validity;
+    }
+    /** Gets the associated form, if one exists. */
+    getForm() {
+        return this.formControlController.getForm();
+    }
+    // Form validation methods
+    checkValidity() {
+        const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser
+        return inputValid;
+    }
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity() {
+        // const ret = this.inputElement.checkValidity();
+        const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella
+        this.handleValidationMessages();
+        return ret; // this.inputElement.reportValidity();
+    }
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message) {
+        this.inputElement.setCustomValidity(message);
+        this.validationMessage = this.inputElement.validationMessage;
+        this.formControlController.updateValidity();
+    }
+    // Handlers
+    _handleReady() {
+        requestAnimationFrame(() => {
+            this.dispatchEvent(new CustomEvent('it-input-ready', { bubbles: true, detail: { el: this.inputElement } }));
+        });
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleInput(e) {
+        this.handleValidationMessages();
+        this.dispatchEvent(new CustomEvent('it-input', {
+            detail: { value: this.inputElement.value, el: this.inputElement },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleBlur(e) {
+        this._touched = true;
+        this.handleValidationMessages();
+        this.dispatchEvent(new FocusEvent('it-blur', { bubbles: true, composed: true }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleFocus(e) {
+        this.dispatchEvent(new FocusEvent('it-focus', { bubbles: true, composed: true }));
+    }
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    _handleClick(e) {
+        this.dispatchEvent(new MouseEvent('it-click', { bubbles: true, composed: true }));
+    }
+    /*
+    Override default browser validation messages
+     */
+    handleValidationMessages() {
+        if (!this.customValidation) {
+            const _v = this.inputElement.validity;
+            const isRequiredHandledByGroup = this.isInGroup === true;
+            if (_v.valueMissing && !isRequiredHandledByGroup) {
+                this.setCustomValidity(this.$t('validityRequired'));
+            }
+            else if (_v.patternMismatch) {
+                this.setCustomValidity(this.$t('validityPattern'));
+            }
+            else if (_v.tooShort) {
+                this.setCustomValidity(this.$t('validityMinlength').replace('{minlength}', this.minlength.toString()));
+            }
+            else if (_v.tooLong) {
+                this.setCustomValidity(this.$t('validityMaxlength').replace('{maxlength}', this.maxlength.toString()));
+            }
+            else {
+                /* nothing. Usa il messaggio di errore della validazione
+                di default del browser per altri errori di validità come:
+                - typeMismatch
+                - rangeUnderflow
+                - rangeOverflow
+                - stepMismatch
+                - badInput */
+                const otherConstraintErrors = _v.typeMismatch || _v.rangeUnderflow || _v.rangeOverflow || _v.stepMismatch || _v.badInput;
+                if (!otherConstraintErrors) {
+                    this.setCustomValidity('');
+                }
+            }
+        }
+        this.validationMessage = this.inputElement.validationMessage;
+    }
+    _handleInvalid(event) {
+        this.formControlController.setValidity(false);
+        this.formControlController.emitInvalidEvent(event);
+    }
+    _handleChange(e) {
+        const target = e.target;
+        let value;
+        if (target instanceof HTMLInputElement) {
+            switch (target.type) {
+                case 'checkbox':
+                case 'radio':
+                    value = target.checked;
+                    break;
+                case 'file':
+                    value = target.files; // FileList
+                    break;
+                default:
+                    value = target.value;
+            }
+        }
+        else if (target instanceof HTMLSelectElement) {
+            if (target.multiple) {
+                value = Array.from(target.selectedOptions).map((o) => o.value);
+            }
+            else {
+                value = target.value;
+            }
+        }
+        else {
+            // textarea o altri input con value
+            value = target.value;
+        }
+        this.dispatchEvent(new CustomEvent('it-change', {
+            detail: { value, el: target },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    updated(changedProperties) {
+        super.updated?.(changedProperties);
+        if (this.customValidation) {
+            this.setCustomValidity(this.validationText ?? '');
+        }
+        else if (this.formControlController.userInteracted()) {
+            this.formControlController.updateValidity();
+        }
+    }
+}
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "_touched", void 0);
+__decorate([
+    query('.it-form__control'),
+    __metadata("design:type", HTMLInputElement)
+], FormControl.prototype, "inputElement", void 0);
+__decorate([
+    property({ type: String, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "name", void 0);
+__decorate([
+    property({ reflect: true }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, type: String }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "form", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'custom-validation' }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "customValidation", void 0);
+__decorate([
+    property({ attribute: 'validity-message', reflect: true }),
+    __metadata("design:type", String)
+], FormControl.prototype, "validationText", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", String)
+], FormControl.prototype, "pattern", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "min", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "max", void 0);
+__decorate([
+    property(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "step", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "minlength", void 0);
+__decorate([
+    property({ type: Number }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "maxlength", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true }) // from FormControl
+    ,
+    __metadata("design:type", Object)
+], FormControl.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean }),
+    __metadata("design:type", Object)
+], FormControl.prototype, "isInGroup", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], FormControl.prototype, "validationMessage", void 0);
+//# sourceMappingURL=form-control.js.map

package/dist/src/form/form-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.js","sourceRoot":"","sources":["../../../src/form/form-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { property, query, state } from 'lit/decorators.js';\nimport { registerTranslation } from '@italia/i18n';\nimport { BaseLocalizedComponent } from '../base-component/base-component.js';\nimport { FormControlController } from './form-controller.js';\nimport it from './locales/it.js';\n\nregisterTranslation(it);\n\nexport class FormControl extends BaseLocalizedComponent {\n  protected readonly formControlController = new FormControlController(this, {\n    assumeInteractionOn: ['it-input', 'it-blur', 'it-change'],\n  });\n\n  // TODO: verificare se serve davvero con il fatto che usiamo form-controller\n  // static formAssociated = true;\n\n  //   @property()\n  // internals = this.attachInternals();\n\n  @state()\n  _touched = false;\n\n  @query('.it-form__control')\n  inputElement!: HTMLInputElement; // from FormControl\n\n  /** The name of the input, submitted as a name/value pair with form data. */\n  @property({ type: String, reflect: true }) // from FormControl\n  name = '';\n\n  /** The current value of the input, submitted as a name/value pair with form data. */\n  @property({ reflect: true })\n  value = '';\n\n  /** If the input is disabled. */\n  @property({ type: Boolean, reflect: true }) // from FormControl\n  disabled = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true, type: String }) form = '';\n\n  /** If you implement your custom validation and you won't to trigger default validation */\n  @property({ type: Boolean, reflect: true, attribute: 'custom-validation' })\n  customValidation = false;\n\n  /** If your input is invalid from your custom validition, set this attribute with message validation */\n  @property({ attribute: 'validity-message', reflect: true })\n  validationText: string = '';\n\n  /** Pattern the `value` must match to be valid */\n  @property()\n  pattern?: string;\n\n  /** The input's minimum value. Only applies to date and number input types. */\n  @property()\n  min: number | string | Date | undefined;\n\n  /** The input's maximum value. Only applies to date and number input types. */\n  @property()\n  max: number | string | Date | undefined;\n\n  /**\n   * Specifies the granularity that the value must adhere to, or the special value `any` which means no stepping is\n   * implied, allowing any numeric value. Only applies to date and number input types.\n   */\n  @property()\n  step: number | 'any' = 'any';\n\n  /** The input's minimum length. */\n  @property({ type: Number })\n  minlength = -1;\n\n  /** The input's maximum length. */\n  @property({ type: Number })\n  maxlength = -1;\n\n  /** If the input is required. */\n  @property({ type: Boolean, reflect: true }) // from FormControl\n  required = false;\n\n  /* For grouped input, like checkbox-group */\n  @property({ type: Boolean })\n  protected isInGroup = false;\n\n  /** Gets the validity state object */\n  public get validity(): ValidityState {\n    return this.inputElement?.validity;\n  }\n\n  @state()\n  public validationMessage = '';\n\n  /** Gets the associated form, if one exists. */\n  public getForm(): HTMLFormElement | null {\n    return this.formControlController.getForm();\n  }\n\n  // Form validation methods\n  public checkValidity(): boolean {\n    const inputValid = this.inputElement?.checkValidity() ?? true; // this.inputElement.checkValidity() è la validazione del browser\n    return inputValid;\n  }\n\n  /** Checks for validity and shows the browser's validation message if the control is invalid. */\n  public reportValidity() {\n    // const ret = this.inputElement.checkValidity();\n    const ret = this.checkValidity(); // chiama la checkValidity, che se è stata overridata chiama quella\n    this.handleValidationMessages();\n    return ret; // this.inputElement.reportValidity();\n  }\n\n  /** Sets a custom validation message. Pass an empty string to restore validity. */\n  public setCustomValidity(message: string) {\n    this.inputElement.setCustomValidity(message);\n    this.validationMessage = this.inputElement.validationMessage;\n    this.formControlController.updateValidity();\n  }\n\n  // Handlers\n  protected _handleReady() {\n    requestAnimationFrame(() => {\n      this.dispatchEvent(new CustomEvent('it-input-ready', { bubbles: true, detail: { el: this.inputElement } }));\n    });\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleInput(e: Event) {\n    this.handleValidationMessages();\n    this.dispatchEvent(\n      new CustomEvent('it-input', {\n        detail: { value: this.inputElement.value, el: this.inputElement },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleBlur(e: Event) {\n    this._touched = true;\n    this.handleValidationMessages();\n    this.dispatchEvent(new FocusEvent('it-blur', { bubbles: true, composed: true }));\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleFocus(e: Event) {\n    this.dispatchEvent(new FocusEvent('it-focus', { bubbles: true, composed: true }));\n  }\n\n  // eslint-disable-next-line @typescript-eslint/no-unused-vars\n  protected _handleClick(e: Event) {\n    this.dispatchEvent(new MouseEvent('it-click', { bubbles: true, composed: true }));\n  }\n\n  /*\n  Override default browser validation messages\n   */\n  protected handleValidationMessages() {\n    if (!this.customValidation) {\n      const _v = this.inputElement.validity;\n\n      const isRequiredHandledByGroup = this.isInGroup === true;\n\n      if (_v.valueMissing && !isRequiredHandledByGroup) {\n        this.setCustomValidity(this.$t('validityRequired'));\n      } else if (_v.patternMismatch) {\n        this.setCustomValidity(this.$t('validityPattern'));\n      } else if (_v.tooShort) {\n        this.setCustomValidity(this.$t('validityMinlength').replace('{minlength}', this.minlength.toString()));\n      } else if (_v.tooLong) {\n        this.setCustomValidity(this.$t('validityMaxlength').replace('{maxlength}', this.maxlength.toString()));\n      } else {\n        /* nothing. Usa il messaggio di errore della validazione\n        di default del browser per altri errori di validità come:\n        - typeMismatch\n        - rangeUnderflow\n        - rangeOverflow\n        - stepMismatch\n        - badInput */\n\n        const otherConstraintErrors =\n          _v.typeMismatch || _v.rangeUnderflow || _v.rangeOverflow || _v.stepMismatch || _v.badInput;\n\n        if (!otherConstraintErrors) {\n          this.setCustomValidity('');\n        }\n      }\n    }\n\n    this.validationMessage = this.inputElement.validationMessage;\n  }\n\n  protected _handleInvalid(event: Event) {\n    this.formControlController.setValidity(false);\n    this.formControlController.emitInvalidEvent(event);\n  }\n\n  protected _handleChange(e: Event) {\n    const target = e.target as HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement;\n    let value: unknown;\n\n    if (target instanceof HTMLInputElement) {\n      switch (target.type) {\n        case 'checkbox':\n        case 'radio':\n          value = target.checked;\n          break;\n        case 'file':\n          value = target.files; // FileList\n          break;\n        default:\n          value = target.value;\n      }\n    } else if (target instanceof HTMLSelectElement) {\n      if (target.multiple) {\n        value = Array.from(target.selectedOptions).map((o) => o.value);\n      } else {\n        value = target.value;\n      }\n    } else {\n      // textarea o altri input con value\n      value = (target as any).value;\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('it-change', {\n        detail: { value, el: target },\n        bubbles: true,\n        composed: true,\n      }),\n    );\n  }\n\n  override updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated?.(changedProperties);\n\n    if (this.customValidation) {\n      this.setCustomValidity(this.validationText ?? '');\n    } else if (this.formControlController.userInteracted()) {\n      this.formControlController.updateValidity();\n    }\n  }\n}\n"]}

package/dist/src/form/form-controller.d.ts

@@ -0,0 +1,68 @@
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+import { FormControl } from './form-control.js';
+export declare const formCollections: WeakMap<HTMLFormElement, Set<FormControl>>;
+export interface FormControlControllerOptions {
+    /** A function that returns the form containing the form control. */
+    form: (input: FormControl) => HTMLFormElement | null;
+    /** A function that returns the form control's name, which will be submitted with the form data. */
+    name: (input: FormControl) => string;
+    /** A function that returns the form control's current value. */
+    value: (input: FormControl) => unknown | unknown[];
+    /** A function that returns the form control's current disabled state. If disabled, the value won't be submitted. */
+    disabled: (input: FormControl) => boolean;
+    reportValidity: (input: FormControl) => boolean;
+    checkValidity: (input: FormControl) => boolean;
+    /** A function that sets the form control's value */
+    setValue: (input: FormControl, value: unknown) => void;
+    /**
+     * An array of event names to listen to. When all events in the list are emitted, the control will receive validity
+     * states such as user-valid and user-invalid.user interacted validity states. */
+    assumeInteractionOn: string[];
+}
+/** A reactive controller to allow form controls to participate in form submission, validation, etc. */
+export declare class FormControlController implements ReactiveController {
+    host: FormControl & ReactiveControllerHost;
+    form?: HTMLFormElement | null;
+    options: FormControlControllerOptions;
+    submittedOnce: boolean;
+    constructor(host: ReactiveControllerHost & FormControl, options?: Partial<FormControlControllerOptions>);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdated(): void;
+    private attachForm;
+    private detachForm;
+    private handleFormData;
+    private handleFormSubmit;
+    private handleFormReset;
+    private handleInteraction;
+    private checkFormValidity;
+    private reportFormValidity;
+    private setUserInteracted;
+    private doAction;
+    /** Returns the associated `<form>` element, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Resets the form, restoring all the control to their default value */
+    reset(submitter?: HTMLInputElement | any): void;
+    /** Submits the form, triggering validation and form data injection. */
+    submit(submitter?: HTMLInputElement | any): void;
+    /**
+     * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
+     * the host element immediately, i.e. before Lit updates the component in the next update.
+     */
+    setValidity(isValid: boolean): void;
+    userInteracted(): boolean;
+    /**
+     * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
+     * that affects constraint validation changes so the component receives the correct validity states.
+     */
+    updateValidity(): void;
+    /**
+     * Dispatches a non-bubbling, cancelable custom event of type `it-invalid`.
+     * If the `it-invalid` event will be cancelled then the original `invalid`
+     * event (which may have been passed as argument) will also be cancelled.
+     * If no original `invalid` event has been passed then the `it-invalid`
+     * event will be cancelled before being dispatched.
+     */
+    emitInvalidEvent(originalInvalidEvent?: Event): void;
+}
+//# sourceMappingURL=form-controller.d.ts.map