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

package/dist/src/mixins/validity.d.ts

@@ -30,11 +30,7 @@ export declare enum VALIDATION_STATUS {
     /**
      * One indicating that the value is shorter than the minimum length.
      */
-    MINLENGTH = "minlength",
-    /**
-     * One indicating that the value is less than the maximum length.
-     */
-    MAXLENGTH = "maxlength"
+    MINLENGTH = "minlength"
 }
 /**
  * @param Base The base class.
@@ -83,10 +79,6 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
      * External validation.
      */
     customValidation: boolean;
-    /**
-     * Field is touched
-     */
-    _touched: boolean;
     /**
      * Checks if the value meets the constraints.
      *
@@ -99,13 +91,10 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
      * @param validityMessage The custom validity message
      */
     setCustomValidity(validityMessage: string): void;
-    _handleBlur(): void;
-    _handleFocus(): void;
-    _handleClick(): void;
-    _handleChange(e: Event): void;
     accessKey: string;
     readonly accessKeyLabel: string;
     autocapitalize: string;
+    autocorrect: boolean;
     dir: string;
     draggable: boolean;
     hidden: boolean;
@@ -213,6 +202,8 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     setPointerCapture(pointerId: number): void;
     toggleAttribute(qualifiedName: string, force?: boolean): boolean;
     webkitMatchesSelector(selectors: string): boolean;
+    get textContent(): string;
+    set textContent(value: string | null);
     readonly baseURI: string;
     readonly childNodes: NodeListOf<ChildNode>;
     readonly firstChild: ChildNode | null;
@@ -225,7 +216,6 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly parentElement: HTMLElement | null;
     readonly parentNode: ParentNode | null;
     readonly previousSibling: ChildNode | null;
-    textContent: string | null;
     appendChild<T_1 extends Node>(node: T_1): T_1;
     cloneNode(subtree?: boolean): Node;
     compareDocumentPosition(other: Node): number;
@@ -260,6 +250,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
     readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
     dispatchEvent(event: Event): boolean;
+    ariaActiveDescendantElement: Element | null;
     ariaAtomic: string | null;
     ariaAutoComplete: string | null;
     ariaBrailleLabel: string | null;
@@ -270,21 +261,28 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     ariaColIndex: string | null;
     ariaColIndexText: string | null;
     ariaColSpan: string | null;
+    ariaControlsElements: ReadonlyArray<Element> | null;
     ariaCurrent: string | null;
+    ariaDescribedByElements: ReadonlyArray<Element> | null;
     ariaDescription: string | null;
+    ariaDetailsElements: ReadonlyArray<Element> | null;
     ariaDisabled: string | null;
+    ariaErrorMessageElements: ReadonlyArray<Element> | null;
     ariaExpanded: string | null;
+    ariaFlowToElements: ReadonlyArray<Element> | null;
     ariaHasPopup: string | null;
     ariaHidden: string | null;
     ariaInvalid: string | null;
     ariaKeyShortcuts: string | null;
     ariaLabel: string | null;
+    ariaLabelledByElements: ReadonlyArray<Element> | null;
     ariaLevel: string | null;
     ariaLive: string | null;
     ariaModal: string | null;
     ariaMultiLine: string | null;
     ariaMultiSelectable: string | null;
     ariaOrientation: string | null;
+    ariaOwnsElements: ReadonlyArray<Element> | null;
     ariaPlaceholder: string | null;
     ariaPosInSet: string | null;
     ariaPressed: string | null;
@@ -342,18 +340,19 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onanimationend: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
     onanimationiteration: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
     onanimationstart: ((this: GlobalEventHandlers, ev: AnimationEvent) => any) | null;
-    onauxclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onauxclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onbeforeinput: ((this: GlobalEventHandlers, ev: InputEvent) => any) | null;
-    onbeforetoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onbeforematch: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    onbeforetoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
     onblur: ((this: GlobalEventHandlers, ev: FocusEvent) => any) | null;
     oncancel: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncanplay: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncanplaythrough: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onchange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    onclick: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    onclick: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onclose: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncontextlost: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    oncontextmenu: ((this: GlobalEventHandlers, ev: MouseEvent) => any) | null;
+    oncontextmenu: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     oncontextrestored: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     oncopy: ((this: GlobalEventHandlers, ev: ClipboardEvent) => any) | null;
     oncuechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -401,6 +400,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onpointermove: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerout: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onpointerover: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
+    onpointerrawupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     onpointerup: ((this: GlobalEventHandlers, ev: PointerEvent) => any) | null;
     onprogress: ((this: GlobalEventHandlers, ev: ProgressEvent) => any) | null;
     onratechange: ((this: GlobalEventHandlers, ev: Event) => any) | null;
@@ -419,7 +419,7 @@ declare const ValidityMixin: <T extends Constructor<HTMLElement>>(Base: T) => (a
     onsubmit: ((this: GlobalEventHandlers, ev: SubmitEvent) => any) | null;
     onsuspend: ((this: GlobalEventHandlers, ev: Event) => any) | null;
     ontimeupdate: ((this: GlobalEventHandlers, ev: Event) => any) | null;
-    ontoggle: ((this: GlobalEventHandlers, ev: Event) => any) | null;
+    ontoggle: ((this: GlobalEventHandlers, ev: ToggleEvent) => any) | null;
     ontouchcancel?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
     ontouchend?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;
     ontouchmove?: ((this: GlobalEventHandlers, ev: TouchEvent) => any) | null | undefined;

package/dist/src/mixins/validity.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"validity.d.ts","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,QAAQ,KAAK;IAEb;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,cAAc,aAAa;IAC3B;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,SAAS,cAAc;IACvB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAI9D;;;;OAIG;+BACwB,MAAM,gBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAiBvE;;OAEG;aACe,OAAO;IAEzB;;OAEG;cACgB,OAAO;IAE1B;;OAEG;qBACuB,MAAM;IAEhC;;OAEG;YACc,MAAM;IAEvB;;OAEG;cACgB,MAAM;IAEzB;;OAEG;cACgB,OAAO;IAE1B;;OAEG;eACiB,MAAM;IAE1B;;OAEG;eACiB,MAAM;IAE1B;;OAEG;sBACwB,OAAO;IAElC;;OAEG;cACO,OAAO;IAEjB;;;;OAIG;iCAC0B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,iBAAgB,OAAO,GAAU,OAAO,GAAG,SAAS;IAyCvG;;;;OAIG;uCACgC,MAAM;;;;qBAkBxB,KAAK;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAqCzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
+{"version":3,"file":"validity.d.ts","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAC;AAC1C;;;;;;;GAOG;AAEH;;GAEG;AACH,oBAAY,iBAAiB;IAC3B;;OAEG;IACH,QAAQ,KAAK;IAEb;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,cAAc,aAAa;IAC3B;;OAEG;IACH,OAAO,YAAY;IAEnB;;OAEG;IACH,SAAS,cAAc;CACxB;AAED;;;GAGG;AACH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,WAAW,CAAC,WAAW,CAAC,EAAE,MAAM,CAAC;IAI9D;;;;OAIG;+BACwB,MAAM,gBAAgB,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;IAUvE;;OAEG;aACe,OAAO;IAEzB;;OAEG;cACgB,OAAO;IAE1B;;OAEG;qBACuB,MAAM;IAEhC;;OAEG;YACc,MAAM;IAEvB;;OAEG;cACgB,MAAM;IAEzB;;OAEG;cACgB,OAAO;IAE1B;;OAEG;eACiB,MAAM;IAE1B;;OAEG;eACiB,MAAM;IAE1B;;OAEG;sBACwB,OAAO;IAElC;;;;OAIG;iCAC0B,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,iBAAgB,OAAO,GAAU,OAAO,GAAG,SAAS;IAmCvG;;;;OAIG;uCACgC,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;MAM5C,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/src/mixins/validity.js

@@ -31,10 +31,6 @@ export var VALIDATION_STATUS;
      * One indicating that the value is shorter than the minimum length.
      */
     VALIDATION_STATUS["MINLENGTH"] = "minlength";
-    /**
-     * One indicating that the value is less than the maximum length.
-     */
-    VALIDATION_STATUS["MAXLENGTH"] = "maxlength";
 })(VALIDATION_STATUS || (VALIDATION_STATUS = {}));
 /**
  * @param Base The base class.
@@ -42,13 +38,6 @@ export var VALIDATION_STATUS;
  */
 const ValidityMixin = (Base) => {
     class ValidityMixinImpl extends Base {
-        constructor() {
-            super(...arguments);
-            /**
-             * Field is touched
-             */
-            this._touched = false;
-        }
         // Not using TypeScript `protected` due to: microsoft/TypeScript#17744
         // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8
         /**
@@ -59,11 +48,10 @@ const ValidityMixin = (Base) => {
         _getValidityMessage(state, translations) {
             return {
                 [VALIDATION_STATUS.NO_ERROR]: '',
-                [VALIDATION_STATUS.INVALID]: translations[VALIDATION_STATUS.INVALID],
-                [VALIDATION_STATUS.ERROR_REQUIRED]: translations[VALIDATION_STATUS.ERROR_REQUIRED],
-                [VALIDATION_STATUS.PATTERN]: translations[VALIDATION_STATUS.PATTERN],
-                [VALIDATION_STATUS.MINLENGTH]: translations[VALIDATION_STATUS.MINLENGTH].replace('{minlength}', this.minlength.toString()),
-                [VALIDATION_STATUS.MAXLENGTH]: translations[VALIDATION_STATUS.MAXLENGTH].replace('{maxlength}', this.maxlength.toString()),
+                [VALIDATION_STATUS.INVALID]: translations.validityInvalid,
+                [VALIDATION_STATUS.ERROR_REQUIRED]: translations.validityRequired,
+                [VALIDATION_STATUS.PATTERN]: translations.validityPattern,
+                [VALIDATION_STATUS.MINLENGTH]: translations.validityMinlength.replace('{minlength}', this.minlength.toString()),
             }[state];
         }
         /**
@@ -80,7 +68,7 @@ const ValidityMixin = (Base) => {
             let message = validity
                 ? this._getValidityMessage(VALIDATION_STATUS.NO_ERROR, translations)
                 : this._getValidityMessage(VALIDATION_STATUS.INVALID, translations);
-            if (this.required || (this._value && (this.pattern || this.minlength > 0 || this.maxlength > 0))) {
+            if (this.required || (this._value && this.pattern)) {
                 if (this.pattern) {
                     const regex = new RegExp(`^${this.pattern}$`, 'u');
                     validity = regex.test(this._value.toString());
@@ -88,18 +76,12 @@ const ValidityMixin = (Base) => {
                         message = this._getValidityMessage(VALIDATION_STATUS.PATTERN, translations);
                     }
                 }
-                if (typeof this.minlength !== 'undefined' && this.minlength > 0) {
+                if (typeof this.minlength !== 'undefined') {
                     validity = validity && this._value.toString().length >= this.minlength;
                     if (!validity) {
                         message = this._getValidityMessage(VALIDATION_STATUS.MINLENGTH, translations);
                     }
                 }
-                if (typeof this.maxlength !== 'undefined' && this.maxlength > 0) {
-                    validity = validity && this._value.toString().length <= this.maxlength;
-                    if (!validity) {
-                        message = this._getValidityMessage(VALIDATION_STATUS.MAXLENGTH, translations);
-                    }
-                }
                 if (this.required && !this._value) {
                     validity = false;
                     message = this._getValidityMessage(VALIDATION_STATUS.ERROR_REQUIRED, translations);
@@ -118,50 +100,6 @@ const ValidityMixin = (Base) => {
             this.invalid = Boolean(validityMessage);
             this.validityMessage = validityMessage;
         }
-        _handleBlur() {
-            this._touched = true;
-            this.dispatchEvent(new FocusEvent('blur', { bubbles: true, composed: true }));
-        }
-        _handleFocus() {
-            this.dispatchEvent(new FocusEvent('focus', { bubbles: true, composed: true }));
-        }
-        _handleClick() {
-            this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));
-        }
-        _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('change', {
-                detail: { value, el: target },
-                bubbles: true,
-                composed: true,
-            }));
-        }
     }
     return ValidityMixinImpl;
 };

package/dist/src/mixins/validity.js.map

@@ -1 +1 @@
-{"version":3,"file":"validity.js","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"AACA;;;;;;;GAOG;AAEH;;GAEG;AACH,MAAM,CAAN,IAAY,iBA4BX;AA5BD,WAAY,iBAAiB;IAC3B;;OAEG;IACH,kCAAa,CAAA;IAEb;;OAEG;IACH,wCAAmB,CAAA;IAEnB;;OAEG;IACH,gDAA2B,CAAA;IAC3B;;OAEG;IACH,wCAAmB,CAAA;IAEnB;;OAEG;IACH,4CAAuB,CAAA;IACvB;;OAEG;IACH,4CAAuB,CAAA;AACzB,CAAC,EA5BW,iBAAiB,KAAjB,iBAAiB,QA4B5B;AAED;;;GAGG;AACH,MAAM,aAAa,GAAG,CAAqC,IAAO,EAAE,EAAE;IACpE,MAAe,iBAAkB,SAAQ,IAAI;QAA7C;;YAsEE;;eAEG;YACH,aAAQ,GAAY,KAAK,CAAC;QA0G5B,CAAC;QAlLC,sEAAsE;QACtE,oFAAoF;QACpF;;;;WAIG;QACH,mBAAmB,CAAC,KAAa,EAAE,YAAoC;YACrE,OAAO;gBACL,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,EAAE;gBAChC,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC;gBACpE,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,cAAc,CAAC;gBAClF,CAAC,iBAAiB,CAAC,OAAO,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,OAAO,CAAC;gBACpE,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,OAAO,CAC9E,aAAa,EACb,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAC1B;gBACD,CAAC,iBAAiB,CAAC,SAAS,CAAC,EAAE,YAAY,CAAC,iBAAiB,CAAC,SAAS,CAAC,CAAC,OAAO,CAC9E,aAAa,EACb,IAAI,CAAC,SAAS,CAAC,QAAQ,EAAE,CAC1B;aACF,CAAC,KAAK,CAAC,CAAC;QACX,CAAC;QAoDD;;;;WAIG;QACH,cAAc,CAAC,YAAoC,EAAE,eAAwB,IAAI;YAC/E,6EAA6E;YAC7E,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBAC1B,OAAO,SAAS,CAAC;YACnB,CAAC;YACD,IAAI,QAAQ,GAAG,YAAY,CAAC;YAC5B,IAAI,OAAO,GAAW,QAAQ;gBAC5B,CAAC,CAAE,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,QAAQ,EAAE,YAAY,CAAY;gBAChF,CAAC,CAAE,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,OAAO,EAAE,YAAY,CAAY,CAAC;YAElF,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;gBACjG,IAAI,IAAI,CAAC,OAAO,EAAE,CAAC;oBACjB,MAAM,KAAK,GAAG,IAAI,MAAM,CAAC,IAAI,IAAI,CAAC,OAAO,GAAG,EAAE,GAAG,CAAC,CAAC;oBACnD,QAAQ,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC;oBAC9C,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACd,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,OAAO,EAAE,YAAY,CAAW,CAAC;oBACxF,CAAC;gBACH,CAAC;gBACD,IAAI,OAAO,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC;oBAChE,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC;oBACvE,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACd,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,SAAS,EAAE,YAAY,CAAW,CAAC;oBAC1F,CAAC;gBACH,CAAC;gBACD,IAAI,OAAO,IAAI,CAAC,SAAS,KAAK,WAAW,IAAI,IAAI,CAAC,SAAS,GAAG,CAAC,EAAE,CAAC;oBAChE,QAAQ,GAAG,QAAQ,IAAI,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,MAAM,IAAI,IAAI,CAAC,SAAS,CAAC;oBACvE,IAAI,CAAC,QAAQ,EAAE,CAAC;wBACd,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,SAAS,EAAE,YAAY,CAAW,CAAC;oBAC1F,CAAC;gBACH,CAAC;gBACD,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,CAAC;oBAClC,QAAQ,GAAG,KAAK,CAAC;oBACjB,OAAO,GAAG,IAAI,CAAC,mBAAmB,CAAC,iBAAiB,CAAC,cAAc,EAAE,YAAY,CAAW,CAAC;gBAC/F,CAAC;YACH,CAAC;YAED,IAAI,CAAC,OAAO,GAAG,CAAC,QAAQ,CAAC;YACzB,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC;YAC/B,OAAO,QAAQ,CAAC;QAClB,CAAC;QAED;;;;WAIG;QACH,iBAAiB,CAAC,eAAuB;YACvC,IAAI,CAAC,OAAO,GAAG,OAAO,CAAC,eAAe,CAAC,CAAC;YACxC,IAAI,CAAC,eAAe,GAAG,eAAe,CAAC;QACzC,CAAC;QAED,WAAW;YACT,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;YACrB,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,MAAM,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QAChF,CAAC;QAED,YAAY;YACV,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACjF,CAAC;QAED,YAAY;YACV,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACjF,CAAC;QAED,aAAa,CAAC,CAAQ;YACpB,MAAM,MAAM,GAAG,CAAC,CAAC,MAAoE,CAAC;YACtF,IAAI,KAAc,CAAC;YAEnB,IAAI,MAAM,YAAY,gBAAgB,EAAE,CAAC;gBACvC,QAAQ,MAAM,CAAC,IAAI,EAAE,CAAC;oBACpB,KAAK,UAAU,CAAC;oBAChB,KAAK,OAAO;wBACV,KAAK,GAAG,MAAM,CAAC,OAAO,CAAC;wBACvB,MAAM;oBACR,KAAK,MAAM;wBACT,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,WAAW;wBACjC,MAAM;oBACR;wBACE,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;gBACzB,CAAC;YACH,CAAC;iBAAM,IAAI,MAAM,YAAY,iBAAiB,EAAE,CAAC;gBAC/C,IAAI,MAAM,CAAC,QAAQ,EAAE,CAAC;oBACpB,KAAK,GAAG,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,eAAe,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC;gBACjE,CAAC;qBAAM,CAAC;oBACN,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;gBACvB,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,mCAAmC;gBACnC,KAAK,GAAI,MAAc,CAAC,KAAK,CAAC;YAChC,CAAC;YAED,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,QAAQ,EAAE;gBACxB,MAAM,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE;gBAC7B,OAAO,EAAE,IAAI;gBACb,QAAQ,EAAE,IAAI;aACf,CAAC,CACH,CAAC;QACJ,CAAC;KACF;IACD,OAAO,iBAAiB,CAAC;AAC3B,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC","sourcesContent":["import { Constructor } from '../index.js';\n/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Form validation status.\n */\nexport enum VALIDATION_STATUS {\n  /**\n   * One indicating no validation error.\n   */\n  NO_ERROR = '',\n\n  /**\n   * One indicating that the value is invalid (generic).\n   */\n  INVALID = 'invalid',\n\n  /**\n   * One indicating missing required value.\n   */\n  ERROR_REQUIRED = 'required',\n  /**\n   * One indicating that the value does not match the pattern.\n   */\n  PATTERN = 'pattern',\n\n  /**\n   * One indicating that the value is shorter than the minimum length.\n   */\n  MINLENGTH = 'minlength',\n  /**\n   * One indicating that the value is less than the maximum length.\n   */\n  MAXLENGTH = 'maxlength',\n}\n\n/**\n * @param Base The base class.\n * @returns A mix-in implementing `.setCustomValidity()` method.\n */\nconst ValidityMixin = <T extends Constructor<HTMLElement>>(Base: T) => {\n  abstract class ValidityMixinImpl extends Base {\n    // Not using TypeScript `protected` due to: microsoft/TypeScript#17744\n    // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8\n    /**\n     * @param state The form validation status.\n     * @returns The form validation error mesasages associated with the given status.\n     * @protected\n     */\n    _getValidityMessage(state: string, translations: Record<string, string>) {\n      return {\n        [VALIDATION_STATUS.NO_ERROR]: '',\n        [VALIDATION_STATUS.INVALID]: translations[VALIDATION_STATUS.INVALID],\n        [VALIDATION_STATUS.ERROR_REQUIRED]: translations[VALIDATION_STATUS.ERROR_REQUIRED],\n        [VALIDATION_STATUS.PATTERN]: translations[VALIDATION_STATUS.PATTERN],\n        [VALIDATION_STATUS.MINLENGTH]: translations[VALIDATION_STATUS.MINLENGTH].replace(\n          '{minlength}',\n          this.minlength.toString(),\n        ),\n        [VALIDATION_STATUS.MAXLENGTH]: translations[VALIDATION_STATUS.MAXLENGTH].replace(\n          '{maxlength}',\n          this.maxlength.toString(),\n        ),\n      }[state];\n    }\n\n    /**\n     * `true` to show the UI of the invalid state.\n     */\n    abstract invalid: boolean;\n\n    /**\n     * `true` if the value is required.\n     */\n    abstract required: boolean;\n\n    /**\n     * The validity message.\n     */\n    abstract validityMessage: string;\n\n    /**\n     * The value.\n     */\n    abstract _value: string;\n\n    /**\n     * The pattern to match to be valid.\n     */\n    abstract pattern?: string;\n\n    /**\n     * `true` if the element is disabled.\n     */\n    abstract disabled: boolean;\n\n    /**\n     * The minimum length of the value.\n     */\n    abstract minlength: number;\n\n    /**\n     * The maximum length of the value.\n     */\n    abstract maxlength: number;\n\n    /**\n     * External validation.\n     */\n    abstract customValidation: boolean;\n\n    /**\n     * Field is touched\n     */\n    _touched: boolean = false;\n\n    /**\n     * Checks if the value meets the constraints.\n     *\n     * @returns `true` if the value meets the constraints. `false` otherwise.\n     */\n    _checkValidity(translations: Record<string, string>, htmlValidity: boolean = true): boolean | undefined {\n      // htmlValidity = this.inputElement.checkValidity(); //check browser validity\n      if (this.customValidation) {\n        return undefined;\n      }\n      let validity = htmlValidity;\n      let message: string = validity\n        ? (this._getValidityMessage(VALIDATION_STATUS.NO_ERROR, translations) as string)\n        : (this._getValidityMessage(VALIDATION_STATUS.INVALID, translations) as string);\n\n      if (this.required || (this._value && (this.pattern || this.minlength > 0 || this.maxlength > 0))) {\n        if (this.pattern) {\n          const regex = new RegExp(`^${this.pattern}$`, 'u');\n          validity = regex.test(this._value.toString());\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.PATTERN, translations) as string;\n          }\n        }\n        if (typeof this.minlength !== 'undefined' && this.minlength > 0) {\n          validity = validity && this._value.toString().length >= this.minlength;\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.MINLENGTH, translations) as string;\n          }\n        }\n        if (typeof this.maxlength !== 'undefined' && this.maxlength > 0) {\n          validity = validity && this._value.toString().length <= this.maxlength;\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.MAXLENGTH, translations) as string;\n          }\n        }\n        if (this.required && !this._value) {\n          validity = false;\n          message = this._getValidityMessage(VALIDATION_STATUS.ERROR_REQUIRED, translations) as string;\n        }\n      }\n\n      this.invalid = !validity;\n      this.validityMessage = message;\n      return validity;\n    }\n\n    /**\n     * Sets the given custom validity message.\n     *\n     * @param validityMessage The custom validity message\n     */\n    setCustomValidity(validityMessage: string) {\n      this.invalid = Boolean(validityMessage);\n      this.validityMessage = validityMessage;\n    }\n\n    _handleBlur() {\n      this._touched = true;\n      this.dispatchEvent(new FocusEvent('blur', { bubbles: true, composed: true }));\n    }\n\n    _handleFocus() {\n      this.dispatchEvent(new FocusEvent('focus', { bubbles: true, composed: true }));\n    }\n\n    _handleClick() {\n      this.dispatchEvent(new MouseEvent('click', { bubbles: true, composed: true }));\n    }\n\n    _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('change', {\n          detail: { value, el: target },\n          bubbles: true,\n          composed: true,\n        }),\n      );\n    }\n  }\n  return ValidityMixinImpl;\n};\n\nexport default ValidityMixin;\n"]}
+{"version":3,"file":"validity.js","sourceRoot":"","sources":["../../../src/mixins/validity.ts"],"names":[],"mappings":"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","sourcesContent":["import { Constructor } from '../index.js';\n/**\n * @license\n *\n * Copyright IBM Corp. 2020, 2022\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n/**\n * Form validation status.\n */\nexport enum VALIDATION_STATUS {\n  /**\n   * One indicating no validation error.\n   */\n  NO_ERROR = '',\n\n  /**\n   * One indicating that the value is invalid (generic).\n   */\n  INVALID = 'invalid',\n\n  /**\n   * One indicating missing required value.\n   */\n  ERROR_REQUIRED = 'required',\n  /**\n   * One indicating that the value does not match the pattern.\n   */\n  PATTERN = 'pattern',\n\n  /**\n   * One indicating that the value is shorter than the minimum length.\n   */\n  MINLENGTH = 'minlength',\n}\n\n/**\n * @param Base The base class.\n * @returns A mix-in implementing `.setCustomValidity()` method.\n */\nconst ValidityMixin = <T extends Constructor<HTMLElement>>(Base: T) => {\n  abstract class ValidityMixinImpl extends Base {\n    // Not using TypeScript `protected` due to: microsoft/TypeScript#17744\n    // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8\n    /**\n     * @param state The form validation status.\n     * @returns The form validation error mesasages associated with the given status.\n     * @protected\n     */\n    _getValidityMessage(state: string, translations: Record<string, string>) {\n      return {\n        [VALIDATION_STATUS.NO_ERROR]: '',\n        [VALIDATION_STATUS.INVALID]: translations.validityInvalid,\n        [VALIDATION_STATUS.ERROR_REQUIRED]: translations.validityRequired,\n        [VALIDATION_STATUS.PATTERN]: translations.validityPattern,\n        [VALIDATION_STATUS.MINLENGTH]: translations.validityMinlength.replace('{minlength}', this.minlength.toString()),\n      }[state];\n    }\n\n    /**\n     * `true` to show the UI of the invalid state.\n     */\n    abstract invalid: boolean;\n\n    /**\n     * `true` if the value is required.\n     */\n    abstract required: boolean;\n\n    /**\n     * The validity message.\n     */\n    abstract validityMessage: string;\n\n    /**\n     * The value.\n     */\n    abstract _value: string;\n\n    /**\n     * The pattern to match to be valid.\n     */\n    abstract pattern?: string;\n\n    /**\n     * `true` if the element is disabled.\n     */\n    abstract disabled: boolean;\n\n    /**\n     * The minimum length of the value.\n     */\n    abstract minlength: number;\n\n    /**\n     * The maximum length of the value.\n     */\n    abstract maxlength: number;\n\n    /**\n     * External validation.\n     */\n    abstract customValidation: boolean;\n\n    /**\n     * Checks if the value meets the constraints.\n     *\n     * @returns `true` if the value meets the constraints. `false` otherwise.\n     */\n    _checkValidity(translations: Record<string, string>, htmlValidity: boolean = true): boolean | undefined {\n      // htmlValidity = this.inputElement.checkValidity(); //check browser validity\n      if (this.customValidation) {\n        return undefined;\n      }\n      let validity = htmlValidity;\n      let message: string = validity\n        ? (this._getValidityMessage(VALIDATION_STATUS.NO_ERROR, translations) as string)\n        : (this._getValidityMessage(VALIDATION_STATUS.INVALID, translations) as string);\n\n      if (this.required || (this._value && this.pattern)) {\n        if (this.pattern) {\n          const regex = new RegExp(`^${this.pattern}$`, 'u');\n          validity = regex.test(this._value.toString());\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.PATTERN, translations) as string;\n          }\n        }\n        if (typeof this.minlength !== 'undefined') {\n          validity = validity && this._value.toString().length >= this.minlength;\n          if (!validity) {\n            message = this._getValidityMessage(VALIDATION_STATUS.MINLENGTH, translations) as string;\n          }\n        }\n        if (this.required && !this._value) {\n          validity = false;\n          message = this._getValidityMessage(VALIDATION_STATUS.ERROR_REQUIRED, translations) as string;\n        }\n      }\n\n      this.invalid = !validity;\n      this.validityMessage = message;\n      return validity;\n    }\n\n    /**\n     * Sets the given custom validity message.\n     *\n     * @param validityMessage The custom validity message\n     */\n    setCustomValidity(validityMessage: string) {\n      this.invalid = Boolean(validityMessage);\n      this.validityMessage = validityMessage;\n    }\n  }\n  return ValidityMixinImpl;\n};\n\nexport default ValidityMixin;\n"]}

package/dist/src/stories/formControlReusableStories.d.ts

@@ -0,0 +1,19 @@
+export declare const StoryFormControlMethodAndProps: ({ otherProps, otherMethods, otherEvents, componentName, }: {
+    otherProps?: string | undefined;
+    otherMethods?: string | undefined;
+    otherEvents?: string | undefined;
+    componentName?: string | undefined;
+}) => {
+    name: string;
+    tags: string[];
+    render: () => import("lit").TemplateResult<1>;
+    parameters: {
+        viewMode: string;
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+//# sourceMappingURL=formControlReusableStories.d.ts.map

package/dist/src/stories/formControlReusableStories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formControlReusableStories.d.ts","sourceRoot":"","sources":["../../../src/stories/formControlReusableStories.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,8BAA8B,GAAI;;;;;CAK9C;;;;;;;;;;;;CA4DA,CAAC"}

package/dist/src/stories/formControlReusableStories.js

@@ -0,0 +1,64 @@
+/* eslint-disable arrow-body-style */
+import { html } from 'lit';
+export const StoryFormControlMethodAndProps = ({ otherProps = '', otherMethods = '', otherEvents = '', componentName = 'it-input', }) => {
+    return {
+        name: 'Proprietà, Metodi, ed Eventi accessibili via js',
+        tags: ['!dev'],
+        render: () => html `<div class="hide-preview"></div>`,
+        parameters: {
+            viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas
+            docs: {
+                description: {
+                    story: `
+Il componente espone delle proprietà, metodi, ed eventi, utili per eventuali interazioni via js.
+
+\`\`\`html
+<${componentName} ... id="myinput"></${componentName}>
+\`\`\`
+
+\`\`\`js
+const myInput = document.getElementById("myInput");
+const validity = myInput.validity;
+const validationMessage = myInput.validationMessage;
+
+const form = myInput.getForm();
+myInput.checkValidity();
+myInput.reportValidity();
+myInput.setCustomValidity("Messaggio di errore");
+\`\`\`
+
+<br/>
+<h4>Proprietà accessibili dall'esterno</h4>
+| Nome | Descrizione |
+|------|-------------|
+|\`validity\`| Ritorna l'oggetto di validazione effettuata dal browser.|
+|\`validationMessage\`| Ritorna il messaggio di errore in caso di validazione fallita.|
+${otherProps}
+
+<h4>Metodi</h4>
+| Nome | Descrizione | Argomenti |
+|------|-------------|-----------|
+|\`getForm()\`| Ritorna l'elemento del DOM corrispondente alla form di riferimento dell'input. | - |
+|\`checkValidity()\`| Triggera la validazione nativa del browser sul campo, e restituisce true o false a seconda che l'input sia valido o meno. | - |
+|\`reportValidity()\`| Controlla se l'elemento è valido secondo le regole di validazione del browser. Se non è valido, mostra un messaggio di errore (tooltip nativo del browser) e restituisce \`false\`. Se è valido, restituisce \`true\`. | - |
+|\`setCustomValidity('')\`| Permette di impostare un messaggio di errore personalizzato passato come parametro. Se il messaggio non è vuoto, rende invalido l'elemento. Se invece il messaggio è vuoto (''), rende valido l'elemento. | message: String |
+${otherMethods}
+
+
+<h4>Eventi</h4>
+| Nome | Descrizione |
+|------|-------------|
+|\`it-input-ready\`| Quando il componente è montato e l'elemento input interno è pronto. |
+|\`it-input\`| Ogni volta che il valore di input cambia per interazione da parte dell'utente |
+|\`it-blur\`| Quando l'input perde il focus (blur) |
+|\`it-focus\`| Quando l'input riceve il focus (focus) |
+|\`it-click\`| Quando l'utente fa click sull'input |
+|\`it-change\`| Quando il valore dell’input viene modificato e il browser emette \`change\` |
+|\`invalid\`| Emesso dal browser quando la validazione fallisce.|
+${otherEvents}`,
+                },
+            },
+        },
+    };
+};
+//# sourceMappingURL=formControlReusableStories.js.map

package/dist/src/stories/formControlReusableStories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"formControlReusableStories.js","sourceRoot":"","sources":["../../../src/stories/formControlReusableStories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,8BAA8B,GAAG,CAAC,EAC7C,UAAU,GAAG,EAAE,EACf,YAAY,GAAG,EAAE,EACjB,WAAW,GAAG,EAAE,EAChB,aAAa,GAAG,UAAU,GAC3B,EAAE,EAAE;IACH,OAAO;QACL,IAAI,EAAE,iDAAiD;QACvD,IAAI,EAAE,CAAC,MAAM,CAAC;QACd,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,kCAAkC;QACpD,UAAU,EAAE;YACV,QAAQ,EAAE,MAAM,EAAE,kDAAkD;YACpE,IAAI,EAAE;gBACJ,WAAW,EAAE;oBACX,KAAK,EAAE;;;;GAId,aAAa,uBAAuB,aAAa;;;;;;;;;;;;;;;;;;;;EAoBlD,UAAU;;;;;;;;;EASV,YAAY;;;;;;;;;;;;;EAaZ,WAAW,EAAE;iBACN;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/* eslint-disable arrow-body-style */\nimport { html } from 'lit';\n\nexport const StoryFormControlMethodAndProps = ({\n  otherProps = '',\n  otherMethods = '',\n  otherEvents = '',\n  componentName = 'it-input',\n}) => {\n  return {\n    name: 'Proprietà, Metodi, ed Eventi accessibili via js',\n    tags: ['!dev'],\n    render: () => html`<div class=\"hide-preview\"></div>`,\n    parameters: {\n      viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas\n      docs: {\n        description: {\n          story: `\nIl componente espone delle proprietà, metodi, ed eventi, utili per eventuali interazioni via js.\n\n\\`\\`\\`html\n<${componentName} ... id=\"myinput\"></${componentName}>\n\\`\\`\\`\n\n\\`\\`\\`js\nconst myInput = document.getElementById(\"myInput\");\nconst validity = myInput.validity;\nconst validationMessage = myInput.validationMessage;\n\nconst form = myInput.getForm();\nmyInput.checkValidity();\nmyInput.reportValidity();\nmyInput.setCustomValidity(\"Messaggio di errore\");\n\\`\\`\\`\n\n<br/>\n<h4>Proprietà accessibili dall'esterno</h4>\n| Nome | Descrizione |\n|------|-------------|\n|\\`validity\\`| Ritorna l'oggetto di validazione effettuata dal browser.|\n|\\`validationMessage\\`| Ritorna il messaggio di errore in caso di validazione fallita.|\n${otherProps}\n\n<h4>Metodi</h4>\n| Nome | Descrizione | Argomenti |\n|------|-------------|-----------|\n|\\`getForm()\\`| Ritorna l'elemento del DOM corrispondente alla form di riferimento dell'input. | - |\n|\\`checkValidity()\\`| Triggera la validazione nativa del browser sul campo, e restituisce true o false a seconda che l'input sia valido o meno. | - |\n|\\`reportValidity()\\`| Controlla se l'elemento è valido secondo le regole di validazione del browser. Se non è valido, mostra un messaggio di errore (tooltip nativo del browser) e restituisce \\`false\\`. Se è valido, restituisce \\`true\\`. | - |\n|\\`setCustomValidity('')\\`| Permette di impostare un messaggio di errore personalizzato passato come parametro. Se il messaggio non è vuoto, rende invalido l'elemento. Se invece il messaggio è vuoto (''), rende valido l'elemento. | message: String |\n${otherMethods}\n\n\n<h4>Eventi</h4>\n| Nome | Descrizione |\n|------|-------------|\n|\\`it-input-ready\\`| Quando il componente è montato e l'elemento input interno è pronto. |\n|\\`it-input\\`| Ogni volta che il valore di input cambia per interazione da parte dell'utente |\n|\\`it-blur\\`| Quando l'input perde il focus (blur) |\n|\\`it-focus\\`| Quando l'input riceve il focus (focus) |\n|\\`it-click\\`| Quando l'utente fa click sull'input |\n|\\`it-change\\`| Quando il valore dell’input viene modificato e il browser emette \\`change\\` |\n|\\`invalid\\`| Emesso dal browser quando la validazione fallisce.|\n${otherEvents}`,\n        },\n      },\n    },\n  };\n};\n"]}

package/dist/src/stories/reusableUsageGuidelinesStories.d.ts

@@ -0,0 +1,13 @@
+export declare const CollapsibleOrHiddenContentGuidelines: () => {
+    name: string;
+    tags: string[];
+    render: () => import("lit").TemplateResult<1>;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+//# sourceMappingURL=reusableUsageGuidelinesStories.d.ts.map

package/dist/src/stories/reusableUsageGuidelinesStories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"reusableUsageGuidelinesStories.d.ts","sourceRoot":"","sources":["../../../src/stories/reusableUsageGuidelinesStories.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,oCAAoC;;;;;;;;;;;CAmChD,CAAC"}

package/dist/src/stories/reusableUsageGuidelinesStories.js

@@ -0,0 +1,39 @@
+/* eslint-disable arrow-body-style */
+import { html } from 'lit';
+export const CollapsibleOrHiddenContentGuidelines = () => {
+    return {
+        name: 'Differenza tra Collapse, Accordion e Tabs',
+        tags: ['!dev', '!autodocs'],
+        render: () => html `<div class="hide-preview"></div>`,
+        parameters: {
+            // viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas
+            docs: {
+                description: {
+                    story: `
+#### Differenza tra Collapse, Accordion e Tabs
+I componenti Accordion, Tabs e Collapse funzionano tutti nascondendo sezioni di contenuto che l'utente può scegliere di visualizzare. Evitare di usare questi componenti l'uno all'interno dell'altro.
+
+Se decidi di usare uno di questi componenti, considera quanto segue:
+
+- L'utente ha bisogno di visualizzare più di una sezione alla volta? L'accordion può mostrare più sezioni contemporaneamente, a differenza dei tabs.
+
+- L'utente deve passare rapidamente tra le sezioni? I tabs permettono di cambiare contenuto senza spostare le altre sezioni nella pagina, a differenza dell'accordion.
+
+- Ci sono molte sezioni di contenuto? L'accordion può contenere più sezioni perché sono disposte verticalmente, mentre i tabs sono disposti orizzontalmente.
+
+- Ci sono solo uno o due contenuti brevi e meno importanti? Il componente Collapse è più adatto perché visivamente più piccolo e meno prominente rispetto a un accordion o ai tabs.
+
+<br/>
+
+| Componente | Contenuti multipli | Visibilità | Esclusività | Uso tipico | Esempi |
+|----------|--------------------|-------------|--------------|-------------|---------|
+| **Collapse** | No | Singolo contenuto mostrato o nascosto | N/A | Mostrare o nascondere dettagli secondari | "Mostra dettagli", "Visualizza termini" |
+| **Accordion** | Sì | Più sezioni espandibili | Solo una aperta alla volta *(consigliato)* | Raggruppare contenuti correlati in blocchi espandibili | FAQ, elenchi informativi |
+| **Tabs** | Sì | Una sezione visibile alla volta | Sempre esclusiva | Organizzare viste equivalenti o alternative | Schede di impostazioni, pannelli di dati |
+`,
+                },
+            },
+        },
+    };
+};
+//# sourceMappingURL=reusableUsageGuidelinesStories.js.map

package/dist/src/stories/reusableUsageGuidelinesStories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"reusableUsageGuidelinesStories.js","sourceRoot":"","sources":["../../../src/stories/reusableUsageGuidelinesStories.ts"],"names":[],"mappings":"AAAA,qCAAqC;AACrC,OAAO,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AAE3B,MAAM,CAAC,MAAM,oCAAoC,GAAG,GAAG,EAAE;IACvD,OAAO;QACL,IAAI,EAAE,2CAA2C;QACjD,IAAI,EAAE,CAAC,MAAM,EAAE,WAAW,CAAC;QAC3B,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,CAAA,kCAAkC;QACpD,UAAU,EAAE;YACV,uEAAuE;YACvE,IAAI,EAAE;gBACJ,WAAW,EAAE;oBACX,KAAK,EAAE;;;;;;;;;;;;;;;;;;;;;CAqBhB;iBACQ;aACF;SACF;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/* eslint-disable arrow-body-style */\nimport { html } from 'lit';\n\nexport const CollapsibleOrHiddenContentGuidelines = () => {\n  return {\n    name: 'Differenza tra Collapse, Accordion e Tabs',\n    tags: ['!dev', '!autodocs'],\n    render: () => html`<div class=\"hide-preview\"></div>`,\n    parameters: {\n      // viewMode: 'docs', // assicura che si apra la tab Docs anziché Canvas\n      docs: {\n        description: {\n          story: `\n#### Differenza tra Collapse, Accordion e Tabs\nI componenti Accordion, Tabs e Collapse funzionano tutti nascondendo sezioni di contenuto che l'utente può scegliere di visualizzare. Evitare di usare questi componenti l'uno all'interno dell'altro.\n\nSe decidi di usare uno di questi componenti, considera quanto segue:\n\n- L'utente ha bisogno di visualizzare più di una sezione alla volta? L'accordion può mostrare più sezioni contemporaneamente, a differenza dei tabs.\n\n- L'utente deve passare rapidamente tra le sezioni? I tabs permettono di cambiare contenuto senza spostare le altre sezioni nella pagina, a differenza dell'accordion.\n\n- Ci sono molte sezioni di contenuto? L'accordion può contenere più sezioni perché sono disposte verticalmente, mentre i tabs sono disposti orizzontalmente.\n\n- Ci sono solo uno o due contenuti brevi e meno importanti? Il componente Collapse è più adatto perché visivamente più piccolo e meno prominente rispetto a un accordion o ai tabs.\n\n<br/>\n\n| Componente | Contenuti multipli | Visibilità | Esclusività | Uso tipico | Esempi |\n|----------|--------------------|-------------|--------------|-------------|---------|\n| **Collapse** | No | Singolo contenuto mostrato o nascosto | N/A | Mostrare o nascondere dettagli secondari | \"Mostra dettagli\", \"Visualizza termini\" |\n| **Accordion** | Sì | Più sezioni espandibili | Solo una aperta alla volta *(consigliato)* | Raggruppare contenuti correlati in blocchi espandibili | FAQ, elenchi informativi |\n| **Tabs** | Sì | Una sezione visibile alla volta | Sempre esclusiva | Organizzare viste equivalenti o alternative | Schede di impostazioni, pannelli di dati |\n`,\n        },\n      },\n    },\n  };\n};\n"]}

package/dist/src/window-manager.d.ts

@@ -0,0 +1,20 @@
+export type ScrollState = {
+    scrollY: number;
+    width: number;
+    height: number;
+};
+export type ScrollCallback = (state: ScrollState, forceRecalc?: boolean) => void;
+export declare class WindowManager {
+    private static initialized;
+    private static subscribers;
+    private static lastScrollY;
+    private static lastWidth;
+    private static lastHeight;
+    private static ticking;
+    static init(): void;
+    private static requestTick;
+    private static tick;
+    static subscribe(cb: ScrollCallback): void;
+    static unsubscribe(cb: ScrollCallback): void;
+}
+//# sourceMappingURL=window-manager.d.ts.map

package/dist/src/window-manager.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-manager.d.ts","sourceRoot":"","sources":["../../src/window-manager.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,WAAW,GAAG;IAAE,OAAO,EAAE,MAAM,CAAC;IAAC,KAAK,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,CAAC;AAC7E,MAAM,MAAM,cAAc,GAAG,CAAC,KAAK,EAAE,WAAW,EAAE,WAAW,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;AAEjF,qBAAa,aAAa;IACxB,OAAO,CAAC,MAAM,CAAC,WAAW,CAAS;IAEnC,OAAO,CAAC,MAAM,CAAC,WAAW,CAA6B;IAEvD,OAAO,CAAC,MAAM,CAAC,WAAW,CAAK;IAE/B,OAAO,CAAC,MAAM,CAAC,SAAS,CAAK;IAE7B,OAAO,CAAC,MAAM,CAAC,UAAU,CAAK;IAE9B,OAAO,CAAC,MAAM,CAAC,OAAO,CAAS;IAE/B,MAAM,CAAC,IAAI;IAqBX,OAAO,CAAC,MAAM,CAAC,WAAW;IAO1B,OAAO,CAAC,MAAM,CAAC,IAAI;IAUnB,MAAM,CAAC,SAAS,CAAC,EAAE,EAAE,cAAc;IAInC,MAAM,CAAC,WAAW,CAAC,EAAE,EAAE,cAAc;CAGtC"}

package/dist/src/window-manager.js

@@ -0,0 +1,47 @@
+export class WindowManager {
+    static init() {
+        if (this.initialized)
+            return;
+        this.lastScrollY = window.scrollY;
+        this.lastWidth = window.innerWidth;
+        this.lastHeight = window.innerHeight;
+        window.addEventListener('scroll', () => {
+            this.lastScrollY = window.scrollY;
+            this.requestTick();
+        });
+        window.addEventListener('resize', () => {
+            this.lastWidth = window.innerWidth;
+            this.lastHeight = window.innerHeight;
+            this.requestTick(true); // force recalculation
+        });
+        this.initialized = true;
+    }
+    static requestTick(forceRecalc = false) {
+        if (!this.ticking) {
+            requestAnimationFrame(() => this.tick(forceRecalc));
+            this.ticking = true;
+        }
+    }
+    static tick(forceRecalc) {
+        this.ticking = false;
+        const state = {
+            scrollY: this.lastScrollY,
+            width: this.lastWidth,
+            height: this.lastHeight,
+        };
+        this.subscribers.forEach((cb) => cb(state, forceRecalc));
+    }
+    static subscribe(cb) {
+        this.subscribers.add(cb);
+    }
+    static unsubscribe(cb) {
+        this.subscribers.delete(cb);
+    }
+}
+WindowManager.initialized = false;
+WindowManager.subscribers = new Set();
+WindowManager.lastScrollY = 0;
+WindowManager.lastWidth = 0;
+WindowManager.lastHeight = 0;
+WindowManager.ticking = false;
+//# sourceMappingURL=window-manager.js.map

package/dist/src/window-manager.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"window-manager.js","sourceRoot":"","sources":["../../src/window-manager.ts"],"names":[],"mappings":"AAGA,MAAM,OAAO,aAAa;IAaxB,MAAM,CAAC,IAAI;QACT,IAAI,IAAI,CAAC,WAAW;YAAE,OAAO;QAE7B,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;QAClC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC;QACnC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;QAErC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC;YAClC,IAAI,CAAC,WAAW,EAAE,CAAC;QACrB,CAAC,CAAC,CAAC;QAEH,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,GAAG,EAAE;YACrC,IAAI,CAAC,SAAS,GAAG,MAAM,CAAC,UAAU,CAAC;YACnC,IAAI,CAAC,UAAU,GAAG,MAAM,CAAC,WAAW,CAAC;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC,sBAAsB;QAChD,CAAC,CAAC,CAAC;QAEH,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;IAC1B,CAAC;IAEO,MAAM,CAAC,WAAW,CAAC,WAAW,GAAG,KAAK;QAC5C,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE,CAAC;YAClB,qBAAqB,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC;YACpD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACtB,CAAC;IACH,CAAC;IAEO,MAAM,CAAC,IAAI,CAAC,WAAoB;QACtC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;QACrB,MAAM,KAAK,GAAgB;YACzB,OAAO,EAAE,IAAI,CAAC,WAAW;YACzB,KAAK,EAAE,IAAI,CAAC,SAAS;YACrB,MAAM,EAAE,IAAI,CAAC,UAAU;SACxB,CAAC;QACF,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,CAAC,KAAK,EAAE,WAAW,CAAC,CAAC,CAAC;IAC3D,CAAC;IAED,MAAM,CAAC,SAAS,CAAC,EAAkB;QACjC,IAAI,CAAC,WAAW,CAAC,GAAG,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM,CAAC,WAAW,CAAC,EAAkB;QACnC,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,EAAE,CAAC,CAAC;IAC9B,CAAC;;AAxDc,yBAAW,GAAG,KAAK,CAAC;AAEpB,yBAAW,GAAG,IAAI,GAAG,EAAkB,CAAC;AAExC,yBAAW,GAAG,CAAC,CAAC;AAEhB,uBAAS,GAAG,CAAC,CAAC;AAEd,wBAAU,GAAG,CAAC,CAAC;AAEf,qBAAO,GAAG,KAAK,CAAC","sourcesContent":["export type ScrollState = { scrollY: number; width: number; height: number };\nexport type ScrollCallback = (state: ScrollState, forceRecalc?: boolean) => void;\n\nexport class WindowManager {\n  private static initialized = false;\n\n  private static subscribers = new Set<ScrollCallback>();\n\n  private static lastScrollY = 0;\n\n  private static lastWidth = 0;\n\n  private static lastHeight = 0;\n\n  private static ticking = false;\n\n  static init() {\n    if (this.initialized) return;\n\n    this.lastScrollY = window.scrollY;\n    this.lastWidth = window.innerWidth;\n    this.lastHeight = window.innerHeight;\n\n    window.addEventListener('scroll', () => {\n      this.lastScrollY = window.scrollY;\n      this.requestTick();\n    });\n\n    window.addEventListener('resize', () => {\n      this.lastWidth = window.innerWidth;\n      this.lastHeight = window.innerHeight;\n      this.requestTick(true); // force recalculation\n    });\n\n    this.initialized = true;\n  }\n\n  private static requestTick(forceRecalc = false) {\n    if (!this.ticking) {\n      requestAnimationFrame(() => this.tick(forceRecalc));\n      this.ticking = true;\n    }\n  }\n\n  private static tick(forceRecalc: boolean) {\n    this.ticking = false;\n    const state: ScrollState = {\n      scrollY: this.lastScrollY,\n      width: this.lastWidth,\n      height: this.lastHeight,\n    };\n    this.subscribers.forEach((cb) => cb(state, forceRecalc));\n  }\n\n  static subscribe(cb: ScrollCallback) {\n    this.subscribers.add(cb);\n  }\n\n  static unsubscribe(cb: ScrollCallback) {\n    this.subscribers.delete(cb);\n  }\n}\n"]}

package/package.json

@@ -1,20 +1,20 @@
 {
   "name": "@italia/globals",
   "description": "Utilities per i Web components del Design System .italia",
-  "version": "0.1.0-alpha.1",
+  "version": "1.0.0-alpha.4",
   "publishConfig": {
     "access": "public"
   },
   "license": "BSD-3-Clause",
   "repository": {
     "type": "git",
-    "url": "https://github.com/italia/design-web-components.git",
+    "url": "https://github.com/italia/dev-kit-italia.git",
     "directory": "packages/button"
   },
   "author": "Presidenza del Consiglio dei Ministri",
-  "homepage": "https://italia.github.io/design-web-components",
+  "homepage": "https://italia.github.io/dev-kit-italia",
   "bugs": {
-    "url": "https://github.com/italia/design-web-components/issues"
+    "url": "https://github.com/italia/dev-kit-italia/issues"
   },
   "type": "module",
   "main": "./dist/src/index.js",
@@ -32,8 +32,10 @@
     "custom-elements.json"
   ],
   "dependencies": {
+    "@floating-ui/dom": "^1.7.1",
+    "clsx": "^2.1.1",
     "lit": "^3.3.0",
-    "@italia/i18n": "^0.1.0-alpha.1"
+    "@italia/i18n": "^1.0.0-alpha.4"
   },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.10.3",
@@ -50,9 +52,9 @@
   "scripts": {
     "analyze": "cem analyze --litelement --exclude dist",
     "build": "tsc --build tsconfig.build.json",
-    "clean": "rimraf node_modules .turbo",
+    "clean": "rimraf node_modules .turbo dist",
+    "prepublish": "pnpm build",
     "lint": "eslint --ext .ts \"src/**/*.ts\" && prettier \"src/**/*.ts\" --check",
-    "format": "eslint --ext .ts \"src/**/*.ts\" --fix && prettier \"src/**/*.ts\" --write",
-    "test-disabled": "wtr --coverage --node-resolve --config web-test-runner.config.js"
+    "format": "eslint --ext .ts \"src/**/*.ts\" --fix && prettier \"src/**/*.ts\" --write"
   }
 }