npm - @zanichelli/albe-web-components - Versions diffs - 2.40.0 → 2.41.1 - Mend

@zanichelli/albe-web-components 2.40.0 → 2.41.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (411) hide show

package/www/index.html CHANGED Viewed

@@ -1,11 +1,31 @@
-<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="stylesheet" type="text/css" href="/build/p-97a11655.css"> <link rel="modulepreload" href="/build/p-7fab4941.js"><script type="module" src="/build/p-7fab4941.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body style="width: 100%; margin: 0; background-color: #f9f9f9;"> <div style="width: 800px; border: 2px solid black; padding: 20px; margin: 50px;"> <z-carousel style="--z-carousel-gutter: 24px;"> <li> <div style="width: 200px; height: 200px; background-color: red;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: yellow;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: blue;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: green;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: purple;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: orange;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: grey;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: black;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: pink;"></div> </li></z-carousel> </div> <script>
-      const mycard = document.getElementById("mycard");
-      console.log(mycard)
-      mycard.addEventListener("cardClicked", () =>
-        console.log("mycard was clicked ")
-      );
-    </script> <style>.z-cards {
+<!doctype html><html dir="ltr" lang="en"><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"> <title>Stencil Component Starter</title> <link rel="stylesheet" type="text/css" href="/build/p-fcff1237.css"> <link rel="modulepreload" href="/build/p-1ef0dee5.js"><script type="module" src="/build/p-1ef0dee5.js" data-stencil data-resources-url="/build/" data-stencil-namespace="web-components-library"></script> <script nomodule="" src="/build/web-components-library.js" data-stencil></script> </head> <body style="width: 100%; margin: 0; background-color: #f9f9f9;"> <header> <z-app-topbar show-app-switcher="true" topbar-content="[{&quot;label&quot;: &quot;Assistenza&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;support&quot;}, {&quot;label&quot;: &quot;Contattaci&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;question-mark-circle&quot;}, {&quot;label&quot;: &quot;Carrello&quot;, &quot;link&quot;: &quot;./pages/notification.html&quot;, &quot;icon&quot;: &quot;shopping-cart&quot;}]" content-max-width="800"> <z-app-switcher id="myappswitcher" slot="login"></z-app-switcher></z-app-topbar> </header> <div class="body" style="display: flex; height: calc(100vh - 48px);"> <z-offcanvas id="mycanvas" transitiondirection="right" variant="overlay"> <div slot="canvasContent"> <div> <z-button id="canvas-button">chiudi</z-button> </div> <span> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna ac urna aliquet lacinia eu ac augue. Nullam consectetur rutrum ultrices. Cras eros ex, cursus nec nisi sed, porttitor fringilla metus. Etiam eleifend fringilla quam et tincidunt. Cras gravida, tortor at consectetur iaculis, lacus eros sagittis magna, ac iaculis orci augue in dolor. Nullam nibh orci, maximus vel tempor sit amet, scelerisque eget velit. Quisque dignissim non dolor iaculis scelerisque. Cras at lectus arcu. Morbi dignissim fermentum magna, sed interdum leo condimentum et. Sed vitae consectetur leo, vel placerat turpis. Donec sagittis rutrum felis, eu consequat tortor efficitur in. Vivamus non nunc vehicula, laoreet lorem id, molestie eros. Etiam ornare at turpis ut suscipit. Nulla non diam eget lorem hendrerit imperdiet. Integer maximus quam non ligula lacinia pharetra. Mauris ullamcorper ligula nec elit pellentesque, a pellentesque mauris tristique.
+            Maecenas tortor enim, rutrum ornare tincidunt sed, tempor vitae urna. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce feugiat egestas mollis. In eleifend neque quis tellus bibendum sodales. Curabitur mattis, magna maximus volutpat dapibus, velit nibh dictum elit, eu sodales leo elit vel odio. Quisque sit amet lorem molestie sapien interdum faucibus. Nunc in ex nisi. In hac habitasse platea dictumst. Maecenas dictum, nunc at finibus dapibus, nunc ligula congue odio, in hendrerit dui mauris vel magna. Vivamus sapien dui, eleifend auctor ornare vitae, aliquet in mi. Ut eget risus ex. Vivamus pharetra tellus in volutpat faucibus. Suspendisse interdum sapien ut dui molestie ullamcorper. Ut iaculis, nunc tincidunt posuere convallis, metus lorem mattis mi, nec ullamcorper mi ligula sit amet leo.
+            Fusce at lectus risus. Aliquam tempor sollicitudin ullamcorper. Quisque eget dignissim purus. Nullam convallis purus a sem varius tincidunt ut in dui. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Curabitur fermentum rutrum nibh, nec vulputate nisi mollis in. Nullam venenatis metus nulla, at rhoncus neque gravida non. Nam vehicula mollis nunc nec faucibus. Phasellus eu turpis purus. Proin aliquam, ipsum non rutrum tincidunt, erat metus laoreet augue, facilisis ultricies magna tellus sed neque. Suspendisse quis tristique lorem. Pellentesque diam urna, congue et massa in, laoreet aliquet nibh.mybutton
+            Ut vitae ligula eu elit ornare gravida. Vivamus ultricies, augue in fermentum tempus, purus ligula aliquet sapien, viverra condimentum tortor ante et est. Vivamus ex urna, gravida a enim auctor, ultrices ornare turpis. Quisque at lacus massa. Nulla facilisi. Ut id quam at ante sagittis posuere vitae sit amet sem. Fusce suscipit ante pellentesque felis facilisis tincidunt. </span> </div> </z-offcanvas> <div class="content" style="height: 100%; overflow-y: scroll; flex: 1;"> <section> <h4>z-card default variant</h4> <div class="z-cards"> <z-card clickable=""> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" cover-icon="play-filled"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" showshadow="" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card border variant</h4> <div class="z-cards"> <z-card clickable="" variant="border"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="border" cover-icon="play-filled" showshadow=""> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="border" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action" fill="color-text-inverse"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card shadow variant</h4> <div class="z-cards"> <z-card clickable="" variant="shadow"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="shadow" cover-icon="play-filled"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="shadow" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>z-card overlay variant</h4> <div class="z-cards"> <z-card clickable="" variant="overlay"> <img slot="cover" src="https://i.pinimg.com/originals/b9/fc/7e/b9fc7e6b2dd2ca128bcc3412e68994f0.jpg"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> <z-card clickable="" variant="overlay" showshadow="" style="--z-card--color-cover-background: orange;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card.Some description for the content of
+                the card.Some description for the content of the card.Some description for the content of the card.Some
+                description for the content of the card.Some description for the content of the card.</p> <z-icon name="share" slot="action"></z-icon> <z-icon name="delete" slot="action"></z-icon> </z-card> </div> </section> <section> <h4>Text</h4> <div class="z-cards"> <z-card variant="text" showshadow="" style="--z-card--text-background: var(--color-secondary02); color: white;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-surface01"></z-icon> <z-icon name="delete" slot="action" fill="color-surface01"></z-icon> </z-card> <z-card clickable="" id="mycard" variant="text" style="--z-card--text-background: var(--color-primary01); color: white; --z-card--text-border-radius: 4px;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-surface01"></z-icon> <z-icon name="delete" slot="action" fill="color-surface01"></z-icon> </z-card> <z-card clickable="" variant="text" style="--z-card--text-border: 2px solid black; --z-card--text-border-radius: 4px;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-primary01"></z-icon> <z-icon name="delete" slot="action" fill="color-primary01"></z-icon> </z-card> <z-card clickable="" variant="text" showshadow="" style="--z-card--text-border: 1px solid black;"> <h2 class="body-5" slot="metadata">metadata</h2> <h3 slot="title">Card title</h3> <p class="body-3" slot="text">Some description for the content of the card. </p> <z-icon name="share" slot="action" fill="color-primary01"></z-icon> <z-icon name="delete" slot="action" fill="color-primary01"></z-icon> </z-card> </div> <div class="z-cards"> <z-card clickable="" variant="text" style="--z-card--text-border: 1px solid var(--z-card--border-color); --z-card--text-border-radius: 4px;"> <h3 slot="title">Aula di lettere</h3> <p class="body-3" slot="text">Descrizione breve dell'applicazione </p> <z-icon name="chevron-right-filled" slot="action" fill="color-primary01"></z-icon> </z-card> </div> </section> </div> </div> <div style="width: 800px; border: 2px solid black; padding: 20px; margin: 50px;"> <z-carousel style="--z-carousel-gutter: 24px;"> <li> <div style="width: 200px; height: 200px; background-color: red;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: yellow;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: blue;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: green;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: purple;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: orange;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: grey;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: black;"></div> </li> <li> <div style="width: 200px; height: 200px; background-color: pink;"></div> </li></z-carousel> </div> <script>
+  const mycard = document.getElementById("mycard");
+  console.log(mycard)
+  mycard.addEventListener("cardClicked", () =>
+    console.log("mycard was clicked ")
+  );
+  const canvasbutton = document.getElementById("canvas-button");
+  canvasbutton.addEventListener("click", () => {
+    console.log("canvasbutton button clicked ")
+    const canvas = document.getElementById("mycanvas")
+    canvas.removeAttribute("open")
+  });
+  window.addEventListener("appButtonClick", () => {
+    console.log("appswitcher button clicked ")
+    const canvas = document.getElementById("mycanvas")
+    canvas.setAttribute("open", "")
+  });
+</script> <style>.z-cards {
     display: flex;
     padding: 24px;
   }
@@ -16,4 +36,8 @@
   .z-cards z-card+z-card {
     margin-left: 24px;
+  }
+  #mycanvas {
+    --z-offcanvas--top-space: 48px;
   }</style></body></html>

package/dist/cjs/z-app-switcher.cjs.entry.js DELETED Viewed

@@ -1,29 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const index$1 = require('./index-25206491.js');
-const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}button{display:flex;justify-content:center;align-content:center;background-color:transparent;border:none;padding:0}button>z-icon{color:var(--bg-white);fill:currentColor}button>z-icon.light{color:var(--bg-grey-900);fill:currentColor}";
-const ZAppSwitcher = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.appButtonClick = index.createEvent(this, "appButtonClick", 7);
-    /** theme variant, default 'dark' */
-    this.theme = index$1.ThemeVariant.dark;
-    this.isopen = false;
-    this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
-  }
-  emitAppButtonClick() {
-    this.isopen = !this.isopen;
-    this.appButtonClick.emit({ isopen: this.isopen });
-  }
-  render() {
-    return (index.h("button", { title: "app-switcher", onClick: () => this.emitAppButtonClick() }, index.h("z-icon", { name: "app-switcher", class: this.theme })));
-  }
-};
-ZAppSwitcher.style = stylesCss;
-exports.z_app_switcher = ZAppSwitcher;

package/dist/cjs/z-app-topbar.cjs.entry.js DELETED Viewed

@@ -1,41 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const index$1 = require('./index-25206491.js');
-const breakpoints = require('./breakpoints-88c4fd6c.js');
-const stylesCss = ":host{display:block;position:sticky;box-sizing:border-box;top:0;height:calc(var(--space-unit) * 6);padding:calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);border-radius:var(--border-no-radius);background-color:var(--gray900);z-index:99}:host(.light){background-color:var(--color-white)}:host>div{display:flex;justify-content:space-between;align-items:center}:host(.limited-width) #content-container{margin:auto;max-width:var(--mw)}.content-panel{display:flex;align-items:center}.content-panel>:not(:last-child){margin-right:calc(var(--space-unit) * 2)}#divider-container{display:none}z-link{font-family:var(--font-family-sans);font-weight:var(--font-sb);font-size:14px;line-height:20px;letter-spacing:0.3px}@media only screen and (min-width: 768px){:host{padding:var(--space-unit) calc(var(--space-unit) * 2) var(--space-unit) var(--space-unit)}:host(.limited-width){padding:var(--space-unit)}#divider-container{display:block;height:calc(var(--space-unit) * 3)}}";
-const ZAppTopbar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** theme variant, default 'dark' */
-    this.theme = index$1.ThemeVariant.dark;
-    this.topbarLinks = [];
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
-  }
-  componentWillLoad() {
-    this.isMobile = window.screen.width <= breakpoints.mobileBreakpoint || window.innerWidth <= breakpoints.mobileBreakpoint;
-  }
-  componentWillRender() {
-    if (this.topbarContent) {
-      this.topbarLinks = typeof this.topbarContent === "string" ? JSON.parse(this.topbarContent) : this.topbarContent;
-    }
-  }
-  renderTopbarLinks() {
-    return this.topbarLinks.map((link) => index.h("z-link", { htmlid: link.id, textcolor: this.theme === index$1.ThemeVariant.light ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label));
-  }
-  render() {
-    return (index.h(index.Host, { class: {
-        [this.theme]: true,
-        "limited-width": !!this.contentMaxWidth
-      } }, index.h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, index.h("div", { id: "left-panel", class: "content-panel" }, index.h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), index.h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && index.h("z-app-switcher", { theme: this.theme }), index.h("div", { id: "divider-container" }, index.h("z-divider", { orientation: index$1.DividerOrientation.vertical, color: this.theme === index$1.ThemeVariant.light ? "gray800" : "color-white" })), index.h("slot", { name: "login" })))));
-  }
-};
-ZAppTopbar.style = stylesCss;
-exports.z_app_topbar = ZAppTopbar;

package/dist/cjs/z-button.cjs.entry.js DELETED Viewed

@@ -1,39 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const index$2 = require('./index-9651dba8.js');
-const index$1 = require('./index-25206491.js');
-require('./_commonjsHelpers-119ffc74.js');
-const stylesCss = ":host{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:var(--space-unit);--rgb-white:240, 240, 240}button:disabled,::slotted(button:disabled){pointer-events:none}button,::slotted(button),::slotted(a){box-sizing:border-box;display:inline-flex;flex-direction:row;align-items:center;justify-content:center;width:100%;font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;line-height:1;letter-spacing:0.3px;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);vertical-align:middle;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap;outline:none;fill:currentColor}button.big,:host([size=\"big\"]) ::slotted(button),:host([size=\"big\"]) ::slotted(a){height:44px;min-width:44px}button.small,:host([size=\"small\"]) ::slotted(button),:host([size=\"small\"]) ::slotted(a){height:36px;min-width:36px}button.issmall,:host([issmall]) ::slotted(button),:host([issmall]) ::slotted(a){height:36px;min-width:36px}button.x-small,:host([size=\"x-small\"]) ::slotted(button),:host([size=\"x-small\"]) ::slotted(a){height:32px;min-width:32px}button:not(.square),:host(:not([square])) ::slotted(button),:host(:not([square])) ::slotted(a){min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}button.square,:host([square]){--z-icon-right-margin:0}button.primary,:host([variant=\"primary\"]) ::slotted(button),:host([variant=\"primary\"]) ::slotted(a){background-color:var(--color-primary01);border-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){button.primary:hover,:host([variant=\"primary\"]) ::slotted(button:hover),:host([variant=\"primary\"]) ::slotted(a:hover){background-color:var(--color-hover-primary);border-color:var(--color-hover-primary);color:var(--color-text-inverse)}}button:focus:focus-visible,::slotted(button:focus:focus-visible),::slotted(a:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}button.primary:active,:host([variant=\"primary\"]) ::slotted(button:active),:host([variant=\"primary\"]) ::slotted(a:active){background-color:var(--color-pressed-primary);border-color:var(--color-pressed-primary);color:var(--color-text-inverse);box-shadow:var(--shadow-2)}button.primary:disabled,:host([variant=\"primary\"]) ::slotted(button:disabled){background-color:var(--color-disabled01);border-color:var(--color-disabled01);color:var(--color-disabled02)}button.secondary,:host([variant=\"secondary\"]) ::slotted(button),:host([variant=\"secondary\"]) ::slotted(a){background-color:var(--color-surface01);border-color:var(--color-primary01);color:var(--color-primary01)}@media (hover: hover){button.secondary:hover,:host([variant=\"secondary\"]) ::slotted(button:hover),:host([variant=\"secondary\"]) ::slotted(a:hover){background-color:var(--color-surface01);border-color:var(--color-hover-primary);color:var(--color-hover-primary)}}button.secondary:active,:host([variant=\"secondary\"]) ::slotted(button:active),:host([variant=\"secondary\"]) ::slotted(a:active){background-color:var(--color-surface01);border-color:var(--color-pressed-primary);color:var(--color-pressed-primary);box-shadow:var(--shadow-2)}button.secondary:disabled,:host([variant=\"secondary\"]) ::slotted(button:disabled){background-color:var(--color-surface01);border-color:var(--color-disabled01);color:var(--color-disabled02)}button.tertiary,:host([variant=\"tertiary\"]) ::slotted(button),:host([variant=\"tertiary\"]) ::slotted(a){background-color:transparent;border-color:transparent;color:var(--color-primary01)}button.tertiary.hasContent{padding:0 var(--space-unit)}@media (hover: hover){button.tertiary:hover,:host([variant=\"tertiary\"]) ::slotted(button:hover),:host([variant=\"tertiary\"]) ::slotted(a:hover){background-color:var(--color-primary03);border-color:var(--color-primary03);color:var(--color-hover-primary)}}button.tertiary:focus:focus-visible,:host([variant=\"tertiary\"]) ::slotted(button:focus:focus-visible),:host([variant=\"tertiary\"]) ::slotted(a:focus:focus-visible){background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01)}button.tertiary:active,:host([variant=\"tertiary\"]) ::slotted(button:active),:host([variant=\"tertiary\"]) ::slotted(a:active){background-color:var(--color-surface01);border-color:var(--color-surface01);color:var(--color-primary01);box-shadow:var(--shadow-2)}button.tertiary:disabled,:host([variant=\"tertiary\"]) ::slotted(button:disabled){background-color:transparent;border-color:transparent;color:var(--color-disabled02)}button.dark-bg,:host([variant=\"dark-bg\"]) ::slotted(button),:host([variant=\"dark-bg\"]) ::slotted(a){background-color:rgba(var(--rgb-white), 0.2);border-color:transparent;color:var(--color-text04)}button.dark-bg.hasContent{padding:0 var(--space-unit)}@media (hover: hover){button.dark-bg:hover,:host([variant=\"dark-bg\"]) ::slotted(button:hover),:host([variant=\"dark-bg\"]) ::slotted(a:hover){background-color:rgba(var(--rgb-white), 0.1)}}button.dark-bg:active,:host([variant=\"dark-bg\"]) ::slotted(button:active),:host([variant=\"dark-bg\"]) ::slotted(a:active){background-color:rgba(var(--rgb-white), 0.3)}button.dark-bg:disabled,:host([variant=\"dark-bg\"]) ::slotted(button:disabled){color:var(--color-disabled03);background-color:rgba(var(--rgb-white), 0.05)}";
-const ZButton = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** HTML button disabled attribute. */
-    this.disabled = false;
-    /** HTML button type attribute. */
-    this.type = index$1.ButtonTypeEnum.button;
-    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
-    this.variant = index$1.ButtonVariantEnum.primary;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = index$1.ButtonSizeEnum.big;
-    /** Reduce button size (deprecated).
-     *
-     * @deprecated Use `size` prop.
-     * */
-    this.issmall = false;
-    /** Spy to render square button. */
-    this.square = false;
-  }
-  render() {
-    this.hostElement.style.pointerEvents = this.disabled ? "none" : "auto";
-    return (index.h("slot", { name: "element" }, index.h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: index$2.classnames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) }, this.icon && index.h("z-icon", { name: this.icon, width: 16, height: 16 }), index.h("slot", null))));
-  }
-  get hostElement() { return index.getElement(this); }
-};
-ZButton.style = stylesCss;
-exports.z_button = ZButton;

package/dist/cjs/z-card.cjs.entry.js DELETED Viewed

@@ -1,69 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const index$1 = require('./index-25206491.js');
-const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant='overlay'])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot='cover']),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;flex-direction:column;justify-content:flex-end;height:100%;padding:var(--space-unit)}::slotted([slot='metadata']),::slotted([slot='title']),::slotted([slot='text']){display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}::slotted([slot='title']:not(:last-child)),::slotted([slot='text']:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot='text']),::slotted([slot='actions']){margin:0}::slotted([slot='metadata']:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot='title']){margin:0;font-weight:var(--font-sb);-webkit-line-clamp:2}::slotted([slot='text']){-webkit-line-clamp:3}.actions{display:flex;flex-direction:row;align-items:center}::slotted([slot='action']:not(:last-child)){margin-right:calc(var(--space-unit) * 1.5)}:host([clickable]){cursor:pointer}:host([clickable]:focus:focus-visible){outline:none}:host(:not([variant])[clickable]:focus:focus-visible){padding:calc(var(--space-unit) * 0.5);box-shadow:var(--shadow-focus-primary)}:host([variant='text']){background-color:var(--z-card--text-background);border:var(--z-card--text-border);border-radius:var(--z-card--text-border-radius)}:host([showshadow])>.content,:host([variant='border'])>.content,:host([variant='shadow'])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant='text'])>.content{padding:calc(var(--space-unit) * 2) var(--space-unit)}:host([variant='border']) .actions,:host([variant='shadow']) .actions{margin-top:auto}:host([variant='border']){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant='border'][clickable]:hover)>.content{background:var(--color-background)}:host([variant='border'][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant='border'][clickable]:active){border-color:transparent}:host([variant='shadow']),:host([showshadow]){box-shadow:var(--shadow-2)}:host([variant='shadow'][clickable]:hover),:host([clickable][showshadow]:hover){box-shadow:var(--shadow-4)}:host([variant='shadow'][clickable]:focus:focus-visible),:host([clickable][showshadow]:focus:focus-visible){box-shadow:var(--shadow-4)}:host([variant='shadow'][clickable]:active),:host([clickable][showshadow]:active){box-shadow:none}:host([variant='overlay']) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
-const ZCard = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.cardClicked = index.createEvent(this, "cardClicked", 7);
-    /** Enable click interactions on the card. Default: false */
-    this.clickable = false;
-    /** Enable shadow. Default: false. */
-    this.showshadow = false;
-  }
-  onClick(ev) {
-    // Do nothing for clicks on actions.
-    if (ev.target.getAttribute('slot') === 'action') {
-      return;
-    }
-    if (!this.clickable) {
-      ev.preventDefault();
-      ev.stopPropagation();
-      return;
-    }
-    this.cardClicked.emit();
-  }
-  componentWillLoad() {
-    this.hasCoverImage = !!this.host.querySelector('[slot="cover"]');
-  }
-  /**
-   * Template for a card without image cover.
-   * A colored background replaces the image and some data is moved over it.
-   */
-  renderColorCoverCard() {
-    return [
-      index.h("div", { class: "cover-container" }, index.h("div", { class: "color-cover" }, index.h("div", { class: "cover-content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" })))),
-      index.h("div", { class: "content" }, index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" })))
-    ];
-  }
-  /**
-  * Template for the content div.
-  */
-  renderContentDiv() {
-    return (index.h("div", { class: "content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" }))));
-  }
-  render() {
-    if (this.variant === index$1.CardVariants.text) {
-      return this.renderContentDiv();
-    }
-    if (this.variant === index$1.CardVariants.overlay || this.hasCoverImage) {
-      return [
-        index.h("div", { class: "cover-container" }, this.hasCoverImage && [
-          index.h("slot", { name: "cover" }),
-          (this.variant !== index$1.CardVariants.overlay) && this.coverIcon && index.h("z-icon", { name: this.coverIcon })
-        ], !this.hasCoverImage && index.h("div", { class: "color-cover" })),
-        this.renderContentDiv()
-      ];
-    }
-    return this.renderColorCoverCard();
-  }
-  get host() { return index.getElement(this); }
-};
-ZCard.style = stylesCss;
-exports.z_card = ZCard;

package/dist/cjs/z-carousel.cjs.entry.js DELETED Viewed

@@ -1,19 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg);--z-carousel-gutter:0}.z-carousel-items-container{display:flex;overflow-x:scroll;padding-inline-start:0;margin:0;list-style:none;-ms-overflow-style:none;scrollbar-width:none;}.z-carousel-items-container::-webkit-scrollbar{display:none}.z-carousel-items-container>*:not(:last-child){margin-right:var(--z-carousel-gutter)}";
-const ZCarousel = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("ul", { class: "z-carousel-items-container" }, index.h("slot", null)));
-  }
-};
-ZCarousel.style = stylesCss;
-exports.z_carousel = ZCarousel;

package/dist/cjs/z-divider.cjs.entry.js DELETED Viewed

@@ -1,26 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const index$1 = require('./index-25206491.js');
-const stylesCss = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";
-const ZDivider = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /** [optional] Divider size */
-    this.size = index$1.DividerSize.small;
-    /** [optional] Divider color */
-    this.color = "gray200";
-    /** [optional] Divider orintation */
-    this.orientation = index$1.DividerOrientation.horizontal;
-  }
-  render() {
-    return (index.h(index.Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
-  }
-};
-ZDivider.style = stylesCss;
-exports.z_divider = ZDivider;

package/dist/cjs/z-dragdrop-area_2.cjs.entry.js DELETED Viewed

@@ -1,49 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const stylesCss = ".sc-z-dragdrop-area-h{font-family:var(--font-family-sans);font-weight:var(--font-rg);margin-top:calc(var(--space-unit) * 3)}.sc-z-dragdrop-area-h>.dragdrop.sc-z-dragdrop-area{display:flex;color:var(--color-text01);flex-direction:column;position:relative;background-image:url(\"data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='2' ry='2' stroke='%23CACCCEFF' stroke-width='2' stroke-dasharray='15%2c 10%2c 14%2c 11' stroke-dashoffset='3' stroke-linecap='square'/%3e%3c/svg%3e\");border-radius:2px;border-color:var(--color-surface04);height:228px;background-color:var(--color-surface02)}.sc-z-dragdrop-area-h>.dragdrop.dragover.sc-z-dragdrop-area *.sc-z-dragdrop-area{pointer-events:none}.sc-z-dragdrop-area-h>.dragdrop.sc-z-dragdrop-area .dragover-container.sc-z-dragdrop-area{position:absolute;top:0;left:0;width:100%;height:100%;z-index:10;display:none;background-color:var(--color-primary03);box-shadow:var(--shadow-focus-primary)}.sc-z-dragdrop-area-h>.dragdrop.sc-z-dragdrop-area .dragover-container.sc-z-dragdrop-area .dragover-message.sc-z-dragdrop-area{background-color:var(--color-link-primary);color:var(--color-text04);padding:10px 28px}.sc-z-dragdrop-area-h>.dragdrop.dragover.sc-z-dragdrop-area .dragover-container.sc-z-dragdrop-area{display:flex;justify-content:center;align-items:center}";
-const ZDragdropArea = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.fileDropped = index.createEvent(this, "fileDropped", 7);
-  }
-  fileDroppedHandler(files) {
-    this.fileDropped.emit(files);
-  }
-  renderOnDragOverMessage() {
-    return (index.h("div", { class: "dragover-container" }, index.h("div", { class: "dragover-message" }, index.h("z-body", { variant: "semibold", level: 2 }, "Rilascia i file in questa area per allegarli."))));
-  }
-  render() {
-    return (index.h("div", { tabIndex: 0, ref: (val) => (this.dragDropContainer = val), class: "dragdrop", onDragOver: (e) => {
-        console.log(e);
-        e.preventDefault();
-        this.dragDropContainer.classList.add("dragover");
-      }, onDragLeave: () => {
-        this.dragDropContainer.classList.remove("dragover");
-      }, onDragEnd: () => { }, onDrop: (e) => {
-        e.preventDefault();
-        if (e.dataTransfer.files.length) {
-          this.dragDropContainer.classList.remove("dragover");
-          this.fileDroppedHandler(e.dataTransfer.files);
-        }
-      } }, this.renderOnDragOverMessage(), index.h("slot", null)));
-  }
-};
-ZDragdropArea.style = stylesCss;
-const ZHeading = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.variant = "regular";
-  }
-  render() {
-    return (index.h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, index.h("slot", null)));
-  }
-};
-exports.z_dragdrop_area = ZDragdropArea;
-exports.z_heading = ZHeading;

package/dist/cjs/z-file-upload.cjs.entry.js DELETED Viewed

@@ -1,169 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const index$1 = require('./index-25206491.js');
-const utils = require('./utils-6410fc7d.js');
-require('./breakpoints-88c4fd6c.js');
-const stylesCss = ".sc-z-file-upload-h{font-family:var(--font-family-sans);font-weight:var(--font-rg);color:var(--color-text01)}.sc-z-file-upload-h>.container.sc-z-file-upload{display:flex;flex-direction:column}.sc-z-file-upload-h .modalWrapper.sc-z-file-upload{display:flex;justify-content:center;align-items:center}.sc-z-file-upload-h .modalWrapper.sc-z-file-upload>.files.sc-z-file-upload{margin:calc(var(--space-unit) * 4);display:flex;flex-direction:column;gap:var(--space-unit)}.sc-z-file-upload-h .text-container.sc-z-file-upload{display:flex;flex-direction:column;margin:auto}.sc-z-file-upload-h .text-container.sc-z-file-upload z-body.sc-z-file-upload{text-align:center}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link.sc-z-file-upload{color:var(--color-link-primary);cursor:pointer}.sc-z-file-upload-h .text-container.sc-z-file-upload .upload-link-text.sc-z-file-upload{margin-bottom:var(--space-unit)}input#fileElem.sc-z-file-upload{display:none}#title.sc-z-file-upload{display:inline-block;margin-bottom:var(--space-unit)}.sc-z-file-upload-h>.container.sc-z-file-upload>z-button.sc-z-file-upload{display:inline-block;margin-top:calc(var(--space-unit) * 3)}.sc-z-file-upload-h>.container.sc-z-file-upload>.files-container.sc-z-file-upload>z-heading.sc-z-file-upload{display:inline-block;margin:calc(var(--space-unit) * 3) 0}.sc-z-file-upload-h>.container.sc-z-file-upload>.files-container.sc-z-file-upload>.files.sc-z-file-upload{display:flex;flex-wrap:wrap;row-gap:calc(var(--space-unit) * 2);column-gap:calc(var(--space-unit) * 2)}.sc-z-file-upload-h>.container.sc-z-file-upload>.files-container.sc-z-file-upload>z-divider.sc-z-file-upload{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}@media only screen and (min-width: 768px){.sc-z-file-upload-h>.container.sc-z-file-upload>z-button.sc-z-file-upload{align-self:flex-start}}";
-const ZFileUpload = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.fileInput = index.createEvent(this, "fileInput", 7);
-    /** Prop indicating the file upload type - can be default or dragdrop */
-    this.type = index$1.ZFileUploadTypeEnum.default;
-    /** Number of files added by the user */
-    this.filesNumber = 0;
-    this.inputAttributes = {
-      type: "file",
-      id: "fileElem",
-      multiple: true,
-    };
-  }
-  /** Listen removeFile event sent from z-file component */
-  removeFileListener() {
-    this.filesNumber--;
-  }
-  /** Listen fileDropped event sent from z-dragdrop-area component */
-  fileDroppedListener(e) {
-    this.input.files = e.detail;
-    this.fileInputHandler();
-  }
-  componentDidUpdate() {
-    this.handleAccessibility();
-    this.invalidFiles.size && this.errorModal.focus();
-  }
-  componentWillLoad() {
-    this.invalidFiles = new Map();
-    if (this.type === index$1.ZFileUploadTypeEnum.dragdrop &&
-      utils.getDevice() !== index$1.DeviceEnum.desktop)
-      this.type = index$1.ZFileUploadTypeEnum.default;
-  }
-  fileInputHandler() {
-    if (this.input.files.length) {
-      this.invalidFiles = this.checkFiles(Array.from(this.input.files));
-    }
-  }
-  handleAccessibility() {
-    if (this.filesNumber > 0) {
-      this.el.querySelector('z-file:last-child > z-chip').shadowRoot.querySelector('button').focus();
-    }
-    else {
-      this.type === index$1.ZFileUploadTypeEnum.default ? this.button.shadowRoot.querySelector('button').focus() : this.uploadLink.focus();
-    }
-  }
-  checkFiles(files) {
-    let errors = new Map();
-    const sizeErrorString = `supera i ${this.fileMaxSize}MB`;
-    const formatErrorString = " ha un'estensione non prevista";
-    files.forEach((file) => {
-      const fileSize = file.size / 1024 / 1024;
-      const fileFormatOk = this.acceptedFormat
-        .split(",")
-        .some((ext) => file.name.toLowerCase().endsWith(ext.trim()));
-      const fileSizeOk = fileSize <= this.fileMaxSize;
-      if (fileSizeOk && fileFormatOk) {
-        this.fileInput.emit(file);
-        this.filesNumber++;
-        this.input.value = "";
-        return;
-      }
-      errors.set(file.name, []);
-      if (!fileSizeOk) {
-        errors.get(file.name).push(sizeErrorString);
-      }
-      if (!fileFormatOk) {
-        errors.get(file.name).push(formatErrorString);
-      }
-    });
-    return errors;
-  }
-  renderTitle() {
-    return (index.h("z-heading", { id: "title", variant: "semibold", level: 2 }, this.mainTitle));
-  }
-  renderDescription(variant, level) {
-    return (index.h("z-body", { variant: variant, level: level }, this.description));
-  }
-  renderAllowedFileExtensions() {
-    let fileFormatString = "";
-    let fileWeightString = "";
-    if (this.acceptedFormat) {
-      const fileFormat = this.acceptedFormat.split(', ')
-        .map((string) => string.substring(1).toUpperCase())
-        .join(', ');
-      fileFormatString = ` nei formati ${fileFormat}`;
-    }
-    if (this.fileMaxSize) {
-      fileWeightString = ` per un massimo di ${this.fileMaxSize}MB di peso`;
-    }
-    const finalString = `Puoi allegare file${fileFormatString}${fileWeightString}.`;
-    return (index.h("z-body", { level: 3 }, fileFormatString || fileWeightString ? finalString : null));
-  }
-  renderFileSection() {
-    return (this.filesNumber > 0 && (index.h("section", { class: "files-container" }, index.h("z-heading", { variant: "semibold", level: 4 }, "File appena caricati"), index.h("div", { class: "files" }, index.h("slot", { name: "files" })), index.h("z-divider", { size: index$1.DividerSize.medium }))));
-  }
-  renderInput() {
-    return (index.h("input", Object.assign({}, this.inputAttributes, { onChange: () => this.fileInputHandler(), accept: this.acceptedFormat, ref: (val) => (this.input = val) })));
-  }
-  renderUploadButton() {
-    return [
-      this.renderInput(),
-      index.h("z-button", { onClick: () => this.input.click(), onKeyPress: (e) => {
-          if (e.code == 'Space' || e.code == 'Enter') {
-            e.preventDefault();
-            this.input.click();
-          }
-        }, id: "fileSelect", variant: this.buttonVariant, icon: "plus", ref: (val) => this.button = val }, "Allega"),
-    ];
-  }
-  renderUploadLink() {
-    return [
-      this.renderInput(),
-      index.h("z-body", { class: "upload-link-text", variant: "regular", level: 1 }, "Trascinalo qui o", " ", index.h("z-body", { tabIndex: 0, class: "upload-link", onClick: () => this.input.click(), onKeyPress: (e) => {
-          if (e.code == 'Space' || e.code == 'Enter') {
-            e.preventDefault();
-            this.input.click();
-          }
-        }, variant: "semibold", level: 1, ref: (val) => this.uploadLink = val }, "caricalo"), " ", "dal tuo computer"),
-    ];
-  }
-  renderDefaultMode() {
-    return [
-      this.renderDescription("semibold", 3),
-      this.renderAllowedFileExtensions(),
-      this.renderFileSection(),
-      this.renderUploadButton(),
-    ];
-  }
-  renderDragDropMode() {
-    return [
-      this.renderFileSection(),
-      index.h("z-dragdrop-area", null, index.h("div", { class: "text-container" }, this.renderDescription("regular", 1), this.renderUploadLink(), this.renderAllowedFileExtensions())),
-    ];
-  }
-  formatErrorString(key, value) {
-    var _a, _b;
-    const bothErrors = value[0] && value[1] ? ", " : "";
-    return `Il file ${key} ${(_a = value[0]) !== null && _a !== void 0 ? _a : ""}${bothErrors} ${(_b = value[1]) !== null && _b !== void 0 ? _b : ""} e non può quindi essere caricato.`;
-  }
-  handleErrorModalContent() {
-    return (index.h("div", { slot: "modalContent" }, index.h("div", { class: "modalWrapper" }, index.h("div", { class: "files" }, Array.from(this.invalidFiles).map(([key, value]) => {
-      return (index.h("z-body", { variant: "regular", level: 3 }, this.formatErrorString(key, value)));
-    })))));
-  }
-  render() {
-    return [
-      index.h("div", { tabIndex: 0, class: `container ${this.type}` }, this.renderTitle(), this.type == index$1.ZFileUploadTypeEnum.default
-        ? this.renderDefaultMode()
-        : this.renderDragDropMode()),
-      !!this.invalidFiles.size && (index.h("z-modal", { tabIndex: 0, ref: (val) => this.errorModal = val, modaltitle: "Attenzione", onModalClose: () => this.invalidFiles = new Map(), onModalBackgroundClick: () => this.invalidFiles = new Map() }, this.handleErrorModalContent()))
-    ];
-  }
-  get el() { return index.getElement(this); }
-};
-ZFileUpload.style = stylesCss;
-exports.z_file_upload = ZFileUpload;

package/dist/cjs/z-file.cjs.entry.js DELETED Viewed

@@ -1,53 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', { value: true });
-const index = require('./index-e826b4ad.js');
-const index$1 = require('./index-25206491.js');
-const breakpoints = require('./breakpoints-88c4fd6c.js');
-const utils = require('./utils-6410fc7d.js');
-const stylesCss = ".sc-z-file-h{font-family:var(--font-family-sans);font-weight:var(--font-rg);position:relative}.sc-z-file-h .chip-content.sc-z-file{display:flex;align-items:center}.sc-z-file-h>z-tooltip.sc-z-file{z-index:10}.sc-z-file-h>z-tooltip.sc-z-file>.tootip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file>.chip-content.sc-z-file>span.sc-z-file{max-width:250px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;line-height:1.33;letter-spacing:0.32px}.sc-z-file-h>z-chip.sc-z-file>.chip-content.sc-z-file>span.regular.sc-z-file{font-weight:var(--font-rg)}.sc-z-file-h>z-chip.sc-z-file>.chip-content.sc-z-file>span.bold.sc-z-file{font-weight:var(--font-sb)}.sc-z-file-h .chip-content.sc-z-file>z-icon.sc-z-file:last-child{margin-left:var(--space-unit);cursor:pointer;fill:var(--color-icon01)}@media only screen and (min-width: 1152px){.sc-z-file-h{border-radius:16px}.sc-z-file-h>z-chip.sc-z-file>.chip-content.sc-z-file>span.sc-z-file{font-size:12px}}";
-const ZFile = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.removeFile = index.createEvent(this, "removeFile", 7);
-    this.allowTooltip = false;
-    this.tooltipVisible = false;
-  }
-  removeFileHandler() {
-    this.removeFile.emit();
-    this.el.remove();
-  }
-  onMouseOver() {
-    this.tooltipVisible = true;
-  }
-  onMouseLeave() {
-    this.tooltipVisible = false;
-  }
-  componentDidLoad() {
-    var _a, _b;
-    if (this.elementHasEllipsis() && window.innerWidth > breakpoints.tabletBreakpoint)
-      this.allowTooltip = true;
-    (_b = (_a = this.icon) === null || _a === void 0 ? void 0 : _a.focus) === null || _b === void 0 ? void 0 : _b.call(_a);
-  }
-  elementHasEllipsis() {
-    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
-  }
-  render() {
-    return (index.h(index.Host, null, this.allowTooltip && (index.h("z-tooltip", { open: this.tooltipVisible, type: index$1.TooltipPosition.AUTO, "bind-to": `#chip-${this.fileNumber}` }, index.h("span", { class: "body-5 tootip-content" }, this.ellipsis.innerText))), index.h("z-chip", { id: `chip-${this.fileNumber}`, filter: true, type: index$1.ZChipType.default }, index.h("div", { class: "chip-content" }, index.h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1, class: {
-        "body-3-sb": utils.getDevice() == index$1.DeviceEnum.desktop,
-        "body-2-sb": utils.getDevice() !== index$1.DeviceEnum.desktop,
-      } }, index.h("slot", null)), index.h("z-icon", { "aria-label": "Elimina file", tabIndex: 0, onClick: () => this.removeFileHandler(), onKeyPress: (e) => {
-        if (e.code == "Space" || e.code == "Enter") {
-          e.preventDefault();
-          this.removeFileHandler();
-        }
-      }, name: "multiply-circled", height: utils.getDevice() !== index$1.DeviceEnum.desktop ? 20 : 15, width: utils.getDevice() !== index$1.DeviceEnum.desktop ? 20 : 15, ref: (val) => (this.icon = val) })))));
-  }
-  get el() { return index.getElement(this); }
-};
-ZFile.style = stylesCss;
-exports.z_file = ZFile;