@italia/globals 0.0.1-alpha.0 → 0.1.0-alpha.2

package/dist/src/mixins/validity.js

@@ -15,10 +15,22 @@ export var VALIDATION_STATUS;
      * One indicating no validation error.
      */
     VALIDATION_STATUS["NO_ERROR"] = "";
+    /**
+     * One indicating that the value is invalid (generic).
+     */
+    VALIDATION_STATUS["INVALID"] = "invalid";
     /**
      * One indicating missing required value.
      */
     VALIDATION_STATUS["ERROR_REQUIRED"] = "required";
+    /**
+     * One indicating that the value does not match the pattern.
+     */
+    VALIDATION_STATUS["PATTERN"] = "pattern";
+    /**
+     * One indicating that the value is shorter than the minimum length.
+     */
+    VALIDATION_STATUS["MINLENGTH"] = "minlength";
 })(VALIDATION_STATUS || (VALIDATION_STATUS = {}));
 /**
  * @param Base The base class.
@@ -33,46 +45,51 @@ const ValidityMixin = (Base) => {
          * @returns The form validation error mesasages associated with the given status.
          * @protected
          */
-        _getValidityMessage(state) {
+        _getValidityMessage(state, translations) {
             return {
                 [VALIDATION_STATUS.NO_ERROR]: '',
-                [VALIDATION_STATUS.ERROR_REQUIRED]: this.requiredValidityMessage,
+                [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];
         }
-        // Not using TypeScript `protected` due to: microsoft/TypeScript#17744
-        // Using `string` instead of `VALIDATION_STATUS` until we can require TypeScript 3.8
         /**
          * Checks if the value meets the constraints.
          *
-         * @returns `VALIDATION_STATUS.NO_ERROR` if the value meets the constraints. Some other values otherwise.
-         * @protected
-         */
-        _testValidity() {
-            const { required, value } = this;
-            return required && !value ? VALIDATION_STATUS.ERROR_REQUIRED : VALIDATION_STATUS.NO_ERROR;
-        }
-        /**
-         * Checks if the value meets the constraints.
-         * Fires cancelable `invalid` event if it doesn't.
-         *
          * @returns `true` if the value meets the constraints. `false` otherwise.
          */
-        checkValidity() {
-            const status = this._testValidity();
-            if (status !== VALIDATION_STATUS.NO_ERROR) {
-                if (this.dispatchEvent(new CustomEvent('invalid', {
-                    bubbles: false,
-                    cancelable: true,
-                    composed: false,
-                }))) {
-                    this.invalid = true;
-                    this.validityMessage = this._getValidityMessage(status);
+        _checkValidity(translations, htmlValidity = true) {
+            // htmlValidity = this.inputElement.checkValidity(); //check browser validity
+            if (this.customValidation) {
+                return undefined;
+            }
+            let validity = htmlValidity;
+            let message = validity
+                ? this._getValidityMessage(VALIDATION_STATUS.NO_ERROR, translations)
+                : this._getValidityMessage(VALIDATION_STATUS.INVALID, translations);
+            if (this.required || (this._value && this.pattern)) {
+                if (this.pattern) {
+                    const regex = new RegExp(`^${this.pattern}$`, 'u');
+                    validity = regex.test(this._value.toString());
+                    if (!validity) {
+                        message = this._getValidityMessage(VALIDATION_STATUS.PATTERN, translations);
+                    }
+                }
+                if (typeof this.minlength !== 'undefined') {
+                    validity = validity && this._value.toString().length >= this.minlength;
+                    if (!validity) {
+                        message = this._getValidityMessage(VALIDATION_STATUS.MINLENGTH, translations);
+                    }
+                }
+                if (this.required && !this._value) {
+                    validity = false;
+                    message = this._getValidityMessage(VALIDATION_STATUS.ERROR_REQUIRED, translations);
                 }
-                return false;
             }
-            this.invalid = false;
-            this.validityMessage = '';
-            return true;
+            this.invalid = !validity;
+            this.validityMessage = message;
+            return validity;
         }
         /**
          * Sets the given custom validity message.

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,iBAUX;AAVD,WAAY,iBAAiB;IAC3B;;OAEG;IACH,kCAAa,CAAA;IAEb;;OAEG;IACH,gDAA2B,CAAA;AAC7B,CAAC,EAVW,iBAAiB,KAAjB,iBAAiB,QAU5B;AAED;;;GAGG;AACH,MAAM,aAAa,GAAG,CAAqC,IAAO,EAAE,EAAE;IACpE,MAAe,iBAAkB,SAAQ,IAAI;QAC3C,sEAAsE;QACtE,oFAAoF;QACpF;;;;WAIG;QACH,mBAAmB,CAAC,KAAa;YAC/B,OAAO;gBACL,CAAC,iBAAiB,CAAC,QAAQ,CAAC,EAAE,EAAE;gBAChC,CAAC,iBAAiB,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,uBAAuB;aACjE,CAAC,KAAK,CAAC,CAAC;QACX,CAAC;QAED,sEAAsE;QACtE,oFAAoF;QACpF;;;;;WAKG;QACH,aAAa;YACX,MAAM,EAAE,QAAQ,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC;YACjC,OAAO,QAAQ,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,iBAAiB,CAAC,cAAc,CAAC,CAAC,CAAC,iBAAiB,CAAC,QAAQ,CAAC;QAC5F,CAAC;QA2BD;;;;;WAKG;QACH,aAAa;YACX,MAAM,MAAM,GAAG,IAAI,CAAC,aAAa,EAAE,CAAC;YACpC,IAAI,MAAM,KAAK,iBAAiB,CAAC,QAAQ,EAAE,CAAC;gBAC1C,IACE,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,SAAS,EAAE;oBACzB,OAAO,EAAE,KAAK;oBACd,UAAU,EAAE,IAAI;oBAChB,QAAQ,EAAE,KAAK;iBAChB,CAAC,CACH,EACD,CAAC;oBACD,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;oBACpB,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,mBAAmB,CAAC,MAAM,CAAW,CAAC;gBACpE,CAAC;gBACD,OAAO,KAAK,CAAC;YACf,CAAC;YACD,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;YACrB,IAAI,CAAC,eAAe,GAAG,EAAE,CAAC;YAC1B,OAAO,IAAI,CAAC;QACd,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;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 missing required value.\n   */\n  ERROR_REQUIRED = 'required',\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) {\n      return {\n        [VALIDATION_STATUS.NO_ERROR]: '',\n        [VALIDATION_STATUS.ERROR_REQUIRED]: this.requiredValidityMessage,\n      }[state];\n    }\n\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     * Checks if the value meets the constraints.\n     *\n     * @returns `VALIDATION_STATUS.NO_ERROR` if the value meets the constraints. Some other values otherwise.\n     * @protected\n     */\n    _testValidity(): string {\n      const { required, value } = this;\n      return required && !value ? VALIDATION_STATUS.ERROR_REQUIRED : VALIDATION_STATUS.NO_ERROR;\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 special validity message for `required`.\n     */\n    abstract requiredValidityMessage: string;\n\n    /**\n     * The validity message.\n     */\n    abstract validityMessage: string;\n\n    /**\n     * The value.\n     */\n    abstract value: string;\n\n    /**\n     * Checks if the value meets the constraints.\n     * Fires cancelable `invalid` event if it doesn't.\n     *\n     * @returns `true` if the value meets the constraints. `false` otherwise.\n     */\n    checkValidity() {\n      const status = this._testValidity();\n      if (status !== VALIDATION_STATUS.NO_ERROR) {\n        if (\n          this.dispatchEvent(\n            new CustomEvent('invalid', {\n              bubbles: false,\n              cancelable: true,\n              composed: false,\n            }),\n          )\n        ) {\n          this.invalid = true;\n          this.validityMessage = this._getValidityMessage(status) as string;\n        }\n        return false;\n      }\n      this.invalid = false;\n      this.validityMessage = '';\n      return true;\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"]}
+{"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;;;;;;;;;;;;CA2DA,CAAC"}

package/dist/src/stories/formControlReusableStories.js

@@ -0,0 +1,63 @@
+/* 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à, dei metodi e degli 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;;;GAGd,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: `Il componente espone delle proprietà, dei metodi e degli 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/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.0.1-alpha.0",
+  "version": "0.1.0-alpha.2",
   "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.0.1-alpha.0"
+    "@italia/i18n": "^0.1.0-alpha.2"
   },
   "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"
   }
 }