@italia/progress 1.0.0-alpha.7

package/custom-elements.json

@@ -0,0 +1,675 @@
+{
+  "schemaVersion": "1.0.0",
+  "readme": "",
+  "modules": [
+    {
+      "kind": "javascript-module",
+      "path": "src/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItProgress",
+          "declaration": {
+            "name": "ItProgress",
+            "module": "./it-progress.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ProgressBarColor",
+          "declaration": {
+            "name": "ProgressBarColor",
+            "module": "./types.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ProgressSpinnerSize",
+          "declaration": {
+            "name": "ProgressSpinnerSize",
+            "module": "./types.js"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ProgressType",
+          "declaration": {
+            "name": "ProgressType",
+            "module": "./types.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/it-progress.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ItProgress",
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "ProgressType"
+              },
+              "default": "'bar'",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "itAriaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Caricamento'",
+              "attribute": "it-aria-label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "showValue",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "show-value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "attribute": "label",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "indeterminate",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "ProgressBarColor | string"
+              },
+              "default": "'default'",
+              "attribute": "color",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "trailColor",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'#D4E9FF'"
+            },
+            {
+              "kind": "field",
+              "name": "strokeWidth",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "24"
+            },
+            {
+              "kind": "field",
+              "name": "trailWidth",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "12"
+            },
+            {
+              "kind": "field",
+              "name": "easing",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private",
+              "default": "'easeInOut'"
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "default": "1400"
+            },
+            {
+              "kind": "field",
+              "name": "animated",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "private",
+              "default": "true"
+            },
+            {
+              "kind": "field",
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "active",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "double",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "double",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "ProgressSpinnerSize"
+              },
+              "default": "'md'",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "_bar",
+              "type": {
+                "text": "ProgressDonut | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "_donutContainer",
+              "type": {
+                "text": "HTMLElement | null"
+              },
+              "privacy": "private",
+              "default": "null"
+            },
+            {
+              "kind": "method",
+              "name": "set",
+              "privacy": "public",
+              "parameters": [
+                {
+                  "name": "progress",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_isBarColorVariant",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "color is ProgressBarColor"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "color",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "_barColorClass",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_displayLabel",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "_setDonutProgress",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "progress",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "_initDonutBar",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderBar",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderDonut",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "_renderSpinner",
+              "privacy": "private"
+            }
+          ],
+          "events": [
+            {
+              "name": "it-donut-updated",
+              "type": {
+                "text": "CustomEvent"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "ProgressType"
+              },
+              "default": "'bar'",
+              "fieldName": "type"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "number"
+              },
+              "default": "0",
+              "fieldName": "value"
+            },
+            {
+              "name": "it-aria-label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Caricamento'",
+              "fieldName": "itAriaLabel"
+            },
+            {
+              "name": "show-value",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "showValue"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "label"
+            },
+            {
+              "name": "indeterminate",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "indeterminate"
+            },
+            {
+              "name": "color",
+              "type": {
+                "text": "ProgressBarColor | string"
+              },
+              "default": "'default'",
+              "fieldName": "color"
+            },
+            {
+              "name": "active",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "active"
+            },
+            {
+              "name": "double",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "double"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "ProgressSpinnerSize"
+              },
+              "default": "'md'",
+              "fieldName": "size"
+            }
+          ],
+          "superclass": {
+            "name": "BaseComponent",
+            "package": "@italia/globals"
+          },
+          "tagName": "it-progress",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ItProgress",
+          "declaration": {
+            "name": "ItProgress",
+            "module": "src/it-progress.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "it-progress",
+          "declaration": {
+            "name": "ItProgress",
+            "module": "src/it-progress.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/types.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "stories/it-progress.stories.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "meta",
+          "default": "{ title: 'Componenti/Progress', tags: ['a11y-ok', 'web-component', 'alpha'], component: 'it-progress', args: { type: 'bar', value: 50, 'it-aria-label': 'Caricamento', showValue: false, label: '', indeterminate: false, color: 'default', active: true, double: false, size: 'md', }, argTypes: { type: { control: 'select', options: ['bar', 'donut', 'spinner'], description: 'Tipologia di progress indicator', table: { defaultValue: { summary: 'bar' } }, }, value: { control: { type: 'range', min: 0, max: 100, step: 1 }, description: 'Percentuale di avanzamento (da 0 a 100)', table: { defaultValue: { summary: '50' } }, }, showValue: { name: 'show-value', control: 'boolean', description: 'mostra la percentuale di avanzamento <br/><i>(solo per `type=\"bar\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, 'it-aria-label': { control: 'text', description: 'Etichetta accessibile per gli screen reader (aria-label)', table: { defaultValue: { summary: 'Caricamento' } }, }, label: { name: 'label', control: 'text', description: 'se si vuole mostrare un testo personalizzato per l\\'etichetta, invece della percentuale di avanzamento <br/><i>(solo per `type=\"bar\"`)</i>', }, indeterminate: { control: 'boolean', description: 'stato indeterminato (animazione infinita) <br/><i>(solo per `type=\"bar\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, color: { control: 'text', description: '<strong>Bar:</strong> default|success|info|warning|danger. <br/><br/><strong>Donut:</strong> colore CSS della barra (default: `var(--bsi-secondary)`)<br/><br/><i>(solo per `type=\"bar\"` e `type=\"donut\"`)</i>', table: { defaultValue: { summary: 'default' } }, }, active: { control: 'boolean', description: 'attiva/disattiva l\\'animazione <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'true' } }, }, double: { control: 'boolean', description: 'variante doppia <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'false' } }, }, size: { control: 'select', options: ['sm', 'md', 'lg', 'xl'], description: 'dimensione <br/><i>(solo per `type=\"spinner\"`)</i>', table: { defaultValue: { summary: 'md' } }, }, }, parameters: { pageLayout: 'w-100', }, } satisfies Meta<ProgressStoryProps>"
+        },
+        {
+          "kind": "variable",
+          "name": "EsempioInterattivo",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Esempio interattivo', tags: ['!dev'], args: { type: 'bar', value: 50, color: 'default', showValue: false, label: '', indeterminate: false, }, parameters: { docs: { canvas: { sourceState: 'shown' } }, }, render: renderComponent, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Bar",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { type: 'bar', value: 50 }, parameters: { controls: { exclude: ['active', 'double', 'size'], }, }, render: renderComponent, }"
+        },
+        {
+          "kind": "variable",
+          "name": "ConEtichetta",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Bar con etichetta', args: { type: 'bar', value: 35, showValue: true, label: '35%' }, render: (params) => html` <it-progress type=\"bar\" value=\"${params.value}\" ?show-value=\"${params.showValue}\" it-aria-label=\"Progresso\"> ${params.label} </it-progress> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Indeterminato",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Bar indeterminata', args: { type: 'bar', indeterminate: true }, render: (params) => html` <it-progress type=\"bar\" ?indeterminate=\"${params.indeterminate}\" it-aria-label=\"In elaborazione...\"></it-progress> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Colori",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Bar: varianti di colore', render: () => html` <div style=\"display: flex; flex-direction: column; gap: 12px;\"> <it-progress type=\"bar\" value=\"25\" color=\"success\" it-aria-label=\"Caricamento - successo\"></it-progress> <it-progress type=\"bar\" value=\"33\" color=\"info\" it-aria-label=\"Caricamento - info\"></it-progress> <it-progress type=\"bar\" value=\"50\" color=\"warning\" it-aria-label=\"Caricamento - warning\"></it-progress> <it-progress type=\"bar\" value=\"66\" color=\"danger\" it-aria-label=\"Caricamento - danger\"></it-progress> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Button",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Pulsante con progress bar', args: { type: 'bar', showValue: false }, parameters: { pageLayout: '', }, render: (params) => html` <it-button variant=\"primary\" disabled class=\"m-4\"> Label del pulsante <it-icon name=\"it-github\" color=\"inverse\"></it-icon> ${renderComponent({ ...params, type: 'bar' })} </it-button> <it-button variant=\"secondary\" disabled class=\"m-4\"> Label del pulsante <it-icon name=\"it-github\" color=\"inverse\"></it-icon> ${renderComponent({ ...params, type: 'bar' })} </it-button> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Donut",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { type: 'donut', value: 75, 'it-aria-label': 'Caricamento', }, parameters: { controls: { exclude: ['show-value', 'label', 'indeterminate', 'active', 'double', 'size'], }, pageLayout: 'center', }, render: (params: ProgressStoryProps) => html` <div class=\"row\"> <div class=\"col-6 px-5\"> <div class=\"text-center mb-3\">Stato iniziale<br />(0%):</div> ${renderComponent({ ...params, value: 0 })} </div> <div class=\"col-6 px-5\"> <div class=\"text-center mb-3\">Stato di avanzamento<br />(75%):</div> ${renderComponent({ ...params })} </div> </div> `, }"
+        },
+        {
+          "kind": "variable",
+          "name": "Spinner",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ args: { type: 'spinner', active: true, double: false, size: 'md', }, parameters: { controls: { exclude: ['show-value', 'label', 'indeterminate'], }, }, render: (params) => renderSpinner(params, 'Spinner'), }"
+        },
+        {
+          "kind": "variable",
+          "name": "SpinnerDoppio",
+          "type": {
+            "text": "Story"
+          },
+          "default": "{ name: 'Spinner doppio', args: { type: 'spinner', active: true, double: true, size: 'md' }, render: (params) => renderSpinner(params, 'Spinner doppio'), }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "meta",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "EsempioInterattivo",
+          "declaration": {
+            "name": "EsempioInterattivo",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Bar",
+          "declaration": {
+            "name": "Bar",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ConEtichetta",
+          "declaration": {
+            "name": "ConEtichetta",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Indeterminato",
+          "declaration": {
+            "name": "Indeterminato",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Colori",
+          "declaration": {
+            "name": "Colori",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Button",
+          "declaration": {
+            "name": "Button",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Donut",
+          "declaration": {
+            "name": "Donut",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "Spinner",
+          "declaration": {
+            "name": "Spinner",
+            "module": "stories/it-progress.stories.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SpinnerDoppio",
+          "declaration": {
+            "name": "SpinnerDoppio",
+            "module": "stories/it-progress.stories.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/progress-donut.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "ProgressDonut",
+          "members": [
+            {
+              "kind": "field",
+              "name": "_bar",
+              "type": {
+                "text": "ProgressbarCircle"
+              },
+              "privacy": "private",
+              "readonly": true,
+              "default": "new CircleConstructor(container, { color: config.color, trailColor: config.trailColor, strokeWidth: config.strokeWidth, trailWidth: config.trailWidth, easing: config.easing, duration: config.duration, text: { autoStyleContainer: false, }, step: (_state, circle) => { const value = Math.round(circle.value() * 100); circle.setText(`${value}%`); config.onStep?.(value); }, })"
+            },
+            {
+              "kind": "method",
+              "name": "create",
+              "static": true,
+              "parameters": [
+                {
+                  "name": "container",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "config",
+                  "type": {
+                    "text": "ProgressDonutConfig"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "setValue",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "animate",
+                  "default": "true"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "destroy"
+            },
+            {
+              "kind": "method",
+              "name": "_loadCircleConstructor",
+              "privacy": "private",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "Promise<ProgressbarCircleConstructor>"
+                }
+              }
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "ProgressDonut",
+          "declaration": {
+            "name": "ProgressDonut",
+            "module": "src/utils/progress-donut.ts"
+          }
+        }
+      ]
+    }
+  ]
+}

package/dist/src/index.d.ts

@@ -0,0 +1,3 @@
+export { ItProgress } from './it-progress.js';
+export type { ProgressBarColor, ProgressSpinnerSize, ProgressType } from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAC9C,YAAY,EAAE,gBAAgB,EAAE,mBAAmB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}

package/dist/src/index.js

@@ -0,0 +1,8 @@
+export { ItProgress } from './it-progress.js';
+import '@italia/globals';
+import 'lit';
+import 'lit/decorators.js';
+import 'lit/directives/if-defined.js';
+import 'lit/directives/style-map.js';
+import 'lit/directives/when.js';
+//# sourceMappingURL=index.js.map