npm - @zanichelli/albe-web-components - Versions diffs - 17.3.0-RC1 → 18.0.0 - Mend

@zanichelli/albe-web-components 17.3.0-RC1 → 18.0.0

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 (884) hide show

package/dist/collection/components/z-combobox/styles.css CHANGED Viewed

@@ -1,5 +1,7 @@
 :host {
   display: block;
+  color: var(--color-form-default-text);
+  fill: var(--color-form-default-icon);
   font-family: var(--font-family-sans);
 }
@@ -15,7 +17,7 @@
   align-items: center;
   justify-content: space-between;
   padding: 0 calc(var(--space-unit) * 1.5);
-  border: var(--border-size-small) solid var(--color-surface04);
+  border: var(--border-size-small) solid var(--color-form-surface04);
   margin: 0;
   background-color: var(--color-form-background);
   border-radius: var(--border-radius-small);
@@ -37,7 +39,7 @@
 }
 :host > div > .header:hover {
-  outline: var(--border-size-medium) solid var(--color-surface04);
+  outline: var(--border-size-medium) solid var(--color-form-surface04);
   outline-offset: -2px;
 }
@@ -50,7 +52,6 @@
 :host > div > .header > p.body-3 {
   padding: var(--space-unit) 0;
   margin: 0;
-  color: var(--color-default-text);
 }
 :host > div > .header > p.body-3 > span {
@@ -58,7 +59,7 @@
 }
 :host > div > .header > z-icon {
-  fill: var(--color-default-icon);
+  fill: var(--color-form-default-icon);
   transform: rotate(360deg);
   transition: all 200ms linear;
 }
@@ -70,7 +71,7 @@
 }
 :host > div.open > .header {
-  border: var(--border-size-small) solid var(--color-primary01);
+  border: var(--border-size-small) solid var(--color-form-active-primary);
   border-radius: var(--border-radius-small) var(--border-radius-small) 0 0;
 }
@@ -79,20 +80,20 @@
 }
 :host > div.disabled .header {
-  border-color: var(--color-disabled01);
-  fill: var(--color-disabled01);
+  border-color: var(--color-form-disabled03);
+  fill: var(--color-form-disabled01-icon);
 }
 :host > div.disabled .header > p.body-3 {
-  color: var(--color-disabled03);
+  color: var(--color-form-disabled03);
 }
 :host > div.disabled .header > z-icon:last-child {
-  fill: var(--color-disabled01);
+  fill: var(--color-form-disabled01-icon);
 }
 :host > div.open > .header > z-icon {
-  fill: var(--color-default-icon);
+  fill: var(--color-form-default-icon);
   transform: rotate(180deg);
   transition: all 200ms linear;
 }
@@ -101,10 +102,15 @@
   position: relative;
   z-index: 12;
   padding: var(--space-unit) calc(var(--space-unit) * 2);
-  border: var(--border-size-small) solid var(--gray200);
+  border: var(--border-size-small) solid var(--color-form-surface03);
   border-top: 0;
   background-color: var(--color-form-background);
   border-radius: 0;
+  box-shadow: var(--shadow-2);
+}
+:host .open .open-combo-data z-input .input-label {
+  color: var(--color-form-default-text);
 }
 :host > div.open > div.open-combo-data > div > div {
@@ -124,6 +130,12 @@
   margin: 0;
 }
+:host .open-combo-data z-list-element {
+  --background-color-list-element: var(--color-form-background);
+  --background-hover-color-list-element: var(--color-form-surface03);
+  --background-active-color-list-element: var(--color-form-surface03);
+}
 ::-webkit-scrollbar {
   width: 6px;
   background: linear-gradient(to right, transparent 0 1px, var(--gray200) 1px 5px, transparent 5px 6px);
@@ -149,14 +161,13 @@
   z-index: 1;
   width: 238px;
   margin: 0 calc(var(--space-unit) * 2);
-  color: var(--color-primary01);
+  color: var(--color-form-active-primary);
 }
 :host > div.open > div.open-combo-data > div > div.search {
   overflow: hidden;
-  max-height: auto;
+  max-height: none;
   margin-top: 0;
-  box-shadow: 1px 1px 4px 2px rgb(217 222 227 / 50%);
 }
 :host > div.open > div.open-combo-data > div > div.search > ul {
@@ -165,15 +176,21 @@
   padding: var(--space-unit) calc(var(--space-unit) * 2);
 }
-:host > div.open > div.open-combo-data > div > div.search > div {
+:host .open .open-combo-data .search .no-results {
+  display: flex;
+  align-items: center;
+  column-gap: var(--space-unit);
+}
+:host > .open > .open-combo-data .search .close-search {
   display: flex;
   justify-content: center;
 }
-:host > div.open > div.open-combo-data > div > div.search > div > a {
+:host > div.open > div.open-combo-data > div > div.search .close-search > a {
   display: inline-block;
   height: 44px;
-  color: var(--color-primary01);
+  color: var(--color-form-active-primary);
   cursor: pointer;
   font-size: 14px;
   font-weight: var(--font-sb);
@@ -182,7 +199,7 @@
   text-transform: uppercase;
 }
-:host > div.open > div.open-combo-data > div > div.search > div > a:focus:focus-visible {
+:host > div.open > div.open-combo-data > div > div.search .close-search > a:focus:focus-visible {
   box-shadow: var(--shadow-focus-primary);
   outline: none;
 }

package/dist/collection/components/z-cover-hero/index.js CHANGED Viewed

@@ -35,9 +35,9 @@ export class ZCoverHero {
         return (h("div", { class: "content-container" }, h("slot", { name: "content" })));
     }
     render() {
-        return (h(Host, { key: '15c2c9a401700c3503e74f74637c2cbf3b474805' }, this.variant === CoverHeroVariant.STACKED &&
+        return (h(Host, { key: '11ffb259d4b5a22dae6b1a801ca6c89a72c4cc6d' }, this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.TOP &&
-            this.renderContent(), h("div", { key: '269c88ee41679ea7730c202f4ca927a1868c5506', class: "main-container" }, h("div", { key: '67b039d0ba87fdb8a3520035104d9c6263ca5dc1', class: "cover-container" }, h("slot", { key: '3c330cafa143f57e9b4d6615d966c4d62cedd9c8', name: "cover" })), h("slot", { key: 'c092503e4d24f52535182e570edb67428d7a8aa9', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
+            this.renderContent(), h("div", { key: 'b2e67125f868a827f09169ded6a0389de343f81a', class: "main-container" }, h("div", { key: '95d9a59c065594d013bf50da27ae9925af56cc58', class: "cover-container" }, h("slot", { key: 'eb9e31c65be9bc2f7b74a5c526d1fb606de2fd49', name: "cover" })), h("slot", { key: '58e2b737f877c61bd86c26b28e1e5f03ddea0d17', name: "info-reveal" }), this.variant === CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === CoverHeroVariant.STACKED &&
             this.contentPosition === CoverHeroContentPosition.BOTTOM &&
             this.renderContent()));
     }

package/dist/collection/components/z-divider/index.js CHANGED Viewed

@@ -7,7 +7,7 @@ export class ZDivider {
         this.orientation = DividerOrientation.HORIZONTAL;
     }
     render() {
-        return (h(Host, { key: '78cfa2818529a8e9b9895a0a3d98df31850534dd', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+        return (h(Host, { key: '436edbe3dc08f9a9b103838920c4bd0186fd48b7', class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
     }
     static get is() { return "z-divider"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-ghost-loading/index.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h, Host } from "@stencil/core";
 export class ZGhostLoading {
     render() {
-        return h(Host, { key: '8824327c1d3ba1c9b13dfdfd605c58dd7cd71b55' });
+        return h(Host, { key: '3bb2943f271b8c4ba5ac15a19c49d25ff1431611' });
     }
     static get is() { return "z-ghost-loading"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-ghost-loading/styles.css CHANGED Viewed

@@ -3,7 +3,7 @@
   overflow: hidden;
   width: 100%;
   height: 100%;
-  background: var(--color-background);
+  background: var(--color-surface02);
   border-radius: var(--border-radius);
   transform: translate3d(0, 0, 0);
 }
@@ -15,9 +15,9 @@
   animation: progress 1.6s ease-in-out infinite;
   background-image: linear-gradient(
     90deg,
-    var(--color-background) 0%,
+    var(--color-surface02) 0%,
     var(--color-surface03) 95%,
-    var(--color-background) 100%
+    var(--color-surface02) 100%
   );
   content: "";
   filter: blur(6px);

package/dist/collection/components/z-icon/index.js CHANGED Viewed

@@ -15,7 +15,7 @@ export class ZIcon {
         return h("polygon", { points: ICONS[this.name] });
     }
     render() {
-        return (h(Host, { key: 'a87a4f2ec632fbdbb7a6b4bfacee294f53eb0991', "aria-hidden": "true" }, h("svg", { key: '2c0453105f9f3493a86f49e8425d2e885d2f3d09', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
+        return (h(Host, { key: 'fdf876a0af1632805ab24af1c593ef5bff78271a', "aria-hidden": "true" }, h("svg", { key: 'fc339ba7c96345b920c370f8476be850332c3eed', viewBox: "0 0 1000 1000", width: this.width, height: this.height, id: this.iconid, fill: this.fill ? `var(--${this.fill})` : "" }, this.selectPathOrPolygon(ICONS[this.name]))));
     }
     static get is() { return "z-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-box/index.js CHANGED Viewed

@@ -11,7 +11,7 @@ export class ZInfoBox {
         this.infoBoxClose.emit({ boxid: this.boxid });
     }
     render() {
-        return (h("div", { key: 'bff4d7fdd01fae2697f23b03515d9cb93a53127d', id: this.boxid }, h("slot", { key: 'a2d80c39c0cc7c115974a4d5da52c2189ab830c9', name: "content" }), this.isclosable && (h("z-icon", { key: '555579d0bf7c1e654055fe4c552c4e89af0fb513', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
+        return (h("div", { key: '7a806511823b922e582c3483a3dc65390be55ae5', id: this.boxid }, h("slot", { key: '28e118a66bccb3ed840144b8c79d8fe438ab9674', name: "content" }), this.isclosable && (h("z-icon", { key: '6b679334c2bd8ed64a3227129d44e2ea75170fe6', name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() }))));
     }
     static get is() { return "z-info-box"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-info-reveal/index.js CHANGED Viewed

@@ -47,7 +47,7 @@ export class ZInfoReveal {
         }
     }
     render() {
-        return (h(Host, { key: '7098ea723139c78a7ecca1bbc924d5e17925bdc5', open: this.open }, h("button", { key: '8f798611b1069939b18ab3bdc9c197bec5fc6d20', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: '2db6409fe7db09738f83135e58300c235ce988db', name: this.icon }), this.label && h("span", { key: '71ca110cd12256dcfe5e7b37026537fb5ea324b8', class: "z-info-reveal-label" }, this.label)), h("div", { key: '1385b98d28160c1e5578d47f63ba37f26e63eeb8', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'dbbcff160f1dceaa336362f5a43436d57f357e01' }), h("button", { key: 'e6f4778d55de1de95fa3d509ed01c3b555ff225b', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: '51b13036bb93efce68db3f0cbf5d9f718ddcb266', name: "multiply" })))));
+        return (h(Host, { key: '8e5a375431679fcf9219cbde4270e9fcab1df7c8', open: this.open }, h("button", { key: '97d2fd4aac009ea0616f720dca6ad728620f7186', class: "z-info-reveal-trigger", type: "button", onClick: this.togglePanel.bind(this), "aria-label": !this.label ? this.ariaLabel : undefined, "aria-expanded": this.open ? "true" : "false", "aria-controls": "z-info-reveal-panel" }, this.icon && h("z-icon", { key: 'fbd4e69149dd005940be5349fc1d2041c661638f', name: this.icon }), this.label && h("span", { key: 'df8beb235d6828aeb4ab79536f448d7c40f3932f', class: "z-info-reveal-label" }, this.label)), h("div", { key: '6f62c1a2ca907b29db9e0ac378c81683ae6be0d6', class: "z-info-reveal-panel", id: "z-info-reveal-panel", ref: (el) => (this.panel = el), hidden: !this.open }, h("slot", { key: 'fc2924de0815a8d99f21b009a9aae2ae714494cc' }), h("button", { key: '04f599f951cae4d1f94d510b5233a58e9719846b', class: "z-info-reveal-close", type: "button", onClick: this.closePanel.bind(this), "aria-label": "Chiudi pannello informazioni" }, h("z-icon", { key: 'bd9890b640631d7d0dfa64b0bdc84a06dbdb21d6', name: "multiply" })))));
     }
     static get is() { return "z-info-reveal"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-input/index.js CHANGED Viewed

@@ -259,7 +259,7 @@ export class ZInput {
             default:
                 input = this.renderInputText(this.type);
         }
-        return h(Host, { key: 'ce90d7c19683895511fdaede4e4d6e49505b30a5' }, input);
+        return h(Host, { key: 'c12976593b469cc583a73265519866c8a75c7a03' }, input);
     }
     static get is() { return "z-input"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/z-input/styles.css CHANGED Viewed

@@ -267,6 +267,9 @@ label.input-label {
   width: 100%;
   height: 100%;
   padding: calc(var(--space-unit) * 1.5);
+}
+.textarea-wrapper:not(.input-error, .input-success, .input-warning) {
   background-color: var(--color-form-background);
 }
@@ -286,15 +289,15 @@ textarea {
   display: inline-flex;
   flex-direction: row;
   align-items: center;
-  color: var(--color-form-default-text);
-  fill: var(--color-form-active-primary);
+  color: var(--color-default-text);
+  fill: var(--color-primary01);
   font-family: var(--font-family-sans);
 }
 .radio-wrapper:hover,
 .checkbox-wrapper:hover {
-  color: var(--color-form-hover-primary);
-  fill: currentcolor;
+  color: var(--color-hover-primary);
+  fill: var(--color-hover-primary-icon);
 }
 .radio-wrapper > input,
@@ -402,12 +405,12 @@ textarea {
 /* disabled */
 .radio-wrapper > input:disabled + .radio-label,
 .checkbox-wrapper > input:disabled + .checkbox-label {
-  color: var(--color-form-disabled-text);
+  color: var(--color-disabled03);
 }
 .radio-wrapper > input:disabled + .radio-label > z-icon,
 .checkbox-wrapper > input:disabled + .checkbox-label > z-icon {
   cursor: default;
-  fill: var(--color-form-disabled01-icon);
+  fill: var(--color-disabled01);
 }

package/dist/collection/components/z-input-message/index.js CHANGED Viewed

@@ -18,7 +18,7 @@ export class ZInputMessage {
         this.onMessageChange();
     }
     render() {
-        return (h(Host, Object.assign({ key: 'f7d15c2c744fbc9f7822a57245d552980e7f36b2' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: '1124a2604c6def360993c6a83ce90d5a950e9f7c', name: this.statusIcons[this.status] }), h("span", { key: 'a5186a1bf672e27ef9d85fd47b7f73b71e8f0998', innerHTML: this.message })));
+        return (h(Host, Object.assign({ key: 'f9b9c27362dadbbb1641b659e5f1e5cb5877dcbd' }, this.statusRole, { "aria-label": this.message }), this.statusIcons[this.status] && this.message && h("z-icon", { key: 'ca06d2a52de026b1828860b3ef4718c10a9752cd', name: this.statusIcons[this.status] }), h("span", { key: '53a1e7e17e09b55e0d7a881ba33961140eb92db2', innerHTML: this.message })));
     }
     static get is() { return "z-input-message"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-input-message/styles.css CHANGED Viewed

@@ -17,7 +17,7 @@
 }
 :host([status="success"]) {
-  color: var(--color-success01);
+  color: var(--color-hover-success);
 }
 :host([status="error"]) {

package/dist/collection/components/z-logo/index.js CHANGED Viewed

@@ -16,7 +16,7 @@ export class ZLogo {
         if (this.height) {
             style["height"] = style["max-height"] = `${this.height}px`;
         }
-        return (h(Host, { key: '43def5f659303a7fa03bdf8a48bf03dacc379dde', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
+        return (h(Host, { key: '9aed92865ad9a66ad0b2996afe6ca52c61df37c1', style: style, class: { mobile: !!this.mobileLogo } }, this.link ? (h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" }, h("img", { alt: this.imageAlt }))) : (h("img", { alt: this.imageAlt }))));
     }
     static get is() { return "z-logo"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-menu-section/index.js CHANGED Viewed

@@ -171,7 +171,7 @@ export class ZMenuSection {
         this.onItemsChange();
     }
     render() {
-        return (h(Host, { key: 'ca61d9daac35484cf3fa3a7ab4d6b5700dade8b0', open: this.open }, h("button", { key: 'd2750e008a22b0de43075ed947d1b9e0f6917bd5', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: 'be5dad19dd6fece321bb68ff89e17372f4353539', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '7c6fecfd96a4391394b17f3eea38aa7f29786a18', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '87512635c2b4377a6c304cc0bb1345131997e5f4', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'b2dfb0d5a94adb555fb08c7592d5c58feb3c6c5f', name: "section", onSlotchange: this.onItemsChange }))));
+        return (h(Host, { key: 'afebd732b174678d4768c47d64f353e1642ca893', open: this.open }, h("button", { key: '9dbc8821467edff6d455f1858e117f1f63e8bf78', ref: (el) => (this.label = el), class: "label", "aria-haspopup": `${!!this.hasItems}`, "aria-expanded": `${!!this.open}`, role: "menuitem", tabindex: this.htmlTabindex, onClick: this.onLabelClick, onKeyDown: this.onLabelKeydown }, h("slot", { key: '18de192f07c716364daef6837e616a674cd62d84', onSlotchange: this.onLabelSlotChange }), this.hasItems && h("z-icon", { key: '157b9e12cdfca3695c297b3a9a94eb908fb7edb9', name: this.open ? "chevron-up" : "chevron-down" })), h("div", { key: '1f48178a296e0e85e5b288d7c205bbe4bf16e1d9', class: "items", role: "menu", hidden: !this.open }, h("slot", { key: 'e3807411b3f9fd40ec627b93a09b8237aa1e89e7', name: "section", onSlotchange: this.onItemsChange }))));
     }
     static get is() { return "z-menu-section"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/z-modal/index.js CHANGED Viewed

@@ -3,9 +3,9 @@ import dialogPolyfill from "dialog-polyfill";
 import { KeyboardCode } from "../../beans";
 const FOCUSABLE_ELEMENTS_SELECTOR = ':is(button, input, select, textarea, [contenteditable=""], [contenteditable="true"], a[href], [tabindex], summary):not([disabled], [disabled=""], [tabindex="-1"], [aria-hidden="true"], [hidden])';
 /**
- * @slot modalCloseButton - accept custom close button
- * @slot modalContent - set the content of the modal
- * @cssprop --z-modal-content-padding - set a default padding for the modal content slot to 16px
+ * @slot modalCloseButton - slot for custom close button
+ * @slot modalContent - slot for the content of the modal
+ * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)
  */
 export class ZModal {
     constructor() {
@@ -123,16 +123,16 @@ export class ZModal {
         e.preventDefault();
     }
     render() {
-        return (h("dialog", { key: '6d39a869df5f764f69a60725dd89b61e1b1b8361', class: {
+        return (h("dialog", { key: '891584aa046910f9a46a48c4798b4b9d8b108a8a', class: {
                 "modal-dialog": !this.scrollInside,
-            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: '9a0929dde5e50c1772999f37b76b070b4f1b24cb', class: {
+            }, "aria-labelledby": "modal-title", "aria-describedby": "modal-content", role: this.alertdialog ? "alertdialog" : undefined, ref: (el) => (this.dialog = el), onClose: () => this.emitModalClose(), onCancel: (e) => this.handleEscape(e) }, h("div", { key: 'cef8896c3e959b3b1e9b7569c402d004f8d31179', class: {
                 "modal-container": true,
                 "modal-container-scroll-inside": this.scrollInside,
                 "modal-container-scroll-outside": !this.scrollInside,
-            }, id: this.modalid }, h("header", { key: '197801b3e4f5db9098a2dc1e33779471967b8754', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '1a1e5064c7f2d405d985c3bb5006a6b71c6072eb' }, this.modaltitle && h("h1", { key: 'b12b4744ec323e97b895363d0cfb157caf9a756f', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '84819710234b67a134ac05a5530afcaee69a0b5d', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'bf183060038a660d33c604eaf424fbf61a6e4da0', class: {
+            }, id: this.modalid }, h("header", { key: '7029c9cc01133c42aab53cd22d6f2d55fec0385c', onClick: this.emitModalHeaderActive.bind(this) }, h("div", { key: '526364617b04825b22a237e8d3610f86861fb060' }, this.modaltitle && h("h1", { key: 'dd5b71fe7592198edad53af5af35da0b38d0e031', id: "modal-title" }, this.modaltitle), this.closeButtonSlot()), this.modalsubtitle && (h("div", { key: '62dbd9bd2d2b9fed310a27d9afaac145d83214de', class: "subtitle", id: "modal-subtitle" }, this.modalsubtitle))), h("div", { key: 'd75082bdc2272154551ad37bf6b83604e0935ec0', class: {
                 "modal-content-scroll-inside": this.scrollInside,
                 "modal-content-scroll-outside": !this.scrollInside,
-            }, id: "modal-content" }, h("slot", { key: 'f97b64d1237225818d8092ad052964b93a265230', name: "modalContent" }))), h("div", { key: '485ef00695e5789c25c91c557dd77a567b219f36', class: {
+            }, id: "modal-content" }, h("slot", { key: 'ffcb2de26ee419117b3e97fc8d7d7a88b404aa05', name: "modalContent" }))), h("div", { key: '5ad1f027a8b96c297db7293be3235a456e4bd70a', class: {
                 "modal-background": true,
                 "modal-background-scroll-outside": !this.scrollInside,
             }, "data-action": "modalBackground", "data-modal": this.modalid, onClick: () => {

package/dist/collection/components/z-modal/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/*\n @slot modalCloseButton - accept custom close button\n * @slot modalContent - set the content of the modal\n * @cssprop --z-modal-content-padding - set a default padding for the modal content slot to 16px\n /\n@Component({\n tag: \"z-modal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZModal {\n /* unique id /\n @Prop()\n modalid: string;\n\n /* title text (optional) /\n @Prop()\n modaltitle?: string;\n\n /* subtitle (optional) /\n @Prop()\n modalsubtitle?: string;\n\n /* aria-label for close button (optional) /\n @Prop()\n closeButtonLabel = \"chiudi modale\";\n\n /* add role \"alertdialog\" to dialog (optional, default is false) /\n @Prop()\n alertdialog?: boolean = false;\n\n /* if true, the modal is closable (optional, default is true) /\n @Prop()\n closable?: boolean = true;\n\n /* if true, the modal can scroll inside, if false the viewport can scroll /\n @Prop()\n scrollInside?: boolean = true;\n\n /* if true, the page scroll is locked when the modal is open (optional, default is true) /\n @Prop()\n lockPageScroll?: boolean = true;\n\n private dialog: HTMLDialogElement;\n\n @Element() host: HTMLZModalElement;\n\n /* emitted on close button click, returns modalid /\n @Event()\n modalClose: EventEmitter;\n\n private emitModalClose(): void {\n if (this.closable) {\n this.modalClose.emit({modalid: this.modalid});\n this.resetPageScroll();\n }\n }\n\n /* emitted on modal header click, returns modalid /\n @Event()\n modalHeaderActive: EventEmitter;\n\n private emitModalHeaderActive(): void {\n this.modalHeaderActive.emit({modalid: this.modalid});\n }\n\n /* emitted on background click, returns modalid /\n @Event()\n modalBackgroundClick: EventEmitter;\n\n private emitBackgroundClick(): void {\n if (this.closable) {\n this.modalBackgroundClick.emit({modalid: this.modalid});\n this.resetPageScroll();\n }\n }\n\n private resetPageScroll(): void {\n if (this.lockPageScroll && document.body.style.overflowY === \"hidden\") {\n document.body.style.overflowY = \"\";\n }\n }\n\n componentDidLoad(): void {\n if (typeof window.HTMLDialogElement !== \"function\") {\n / workaround to fix `registerDialog` in test environment:\n stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n which is used by `registerDialog` to recognize the element as dialog /\n if (!this.dialog.localName) {\n Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n }\n dialogPolyfill.registerDialog(this.dialog);\n this.dialog.setAttribute(\"open\", \"true\");\n } else {\n this.open();\n }\n if (this.lockPageScroll) {\n requestAnimationFrame(() => (document.body.style.overflowY = \"hidden\"));\n }\n }\n\n disconnectedCallback(): void {\n this.resetPageScroll();\n }\n\n /* open modal /\n @Method()\n async open(): Promise<void> {\n this.dialog?.showModal();\n if (this.lockPageScroll) {\n document.body.style.overflowY = \"hidden\";\n }\n }\n\n /* close modal /\n @Method()\n async close(): Promise<void> {\n if (this.closable) {\n this.dialog?.close();\n this.resetPageScroll();\n }\n }\n\n /\n Get a list of focusable elements in the dialog.\n * Remove elements with `display: none` from the list, because they're not focusable.\n \n N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n */\n private get focusableElements(): HTMLElement[] {\n return [\n ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ].filter((element) => getComputedStyle(element).display !== \"none\");\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ESC && !this.closable) {\n e.preventDefault();\n }\n\n if (e.code !== KeyboardCode.TAB) {\n return;\n }\n\n const focusableElements = this.focusableElements;\n const shadowActiveElement = this.host.shadowRoot.activeElement;\n const activeElement = this.host.ownerDocument.activeElement;\n const firstFocusableElement = focusableElements[0];\n const lastFocusableElement = focusableElements[focusableElements.length - 1];\n if (e.shiftKey && (shadowActiveElement == firstFocusableElement \|\| activeElement == firstFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n lastFocusableElement.focus();\n } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement \|\| activeElement == lastFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n firstFocusableElement.focus();\n }\n }\n\n private closeButtonSlot(): HTMLElement \| void {\n if (this.closable) {\n return (\n <slot name=\"modalCloseButton\">\n <button\n aria-label={this.closeButtonLabel}\n onClick={() => this.close()}\n >\n <z-icon name=\"multiply-circle-filled\"></z-icon>\n </button>\n </slot>\n );\n }\n }\n\n private handleEscape(e: Event): void {\n if (this.closable) {\n return;\n }\n e.preventDefault();\n }\n\n render(): HTMLZModalElement {\n return (\n <dialog\n class={{\n \"modal-dialog\": !this.scrollInside,\n }}\n aria-labelledby=\"modal-title\"\n aria-describedby=\"modal-content\"\n role={this.alertdialog ? \"alertdialog\" : undefined}\n ref={(el) => (this.dialog = el as HTMLDialogElement)}\n onClose={() => this.emitModalClose()}\n onCancel={(e) => this.handleEscape(e)}\n >\n <div\n class={{\n \"modal-container\": true,\n \"modal-container-scroll-inside\": this.scrollInside,\n \"modal-container-scroll-outside\": !this.scrollInside,\n }}\n id={this.modalid}\n >\n <header onClick={this.emitModalHeaderActive.bind(this)}>\n <div>\n {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n {this.closeButtonSlot()}\n </div>\n {this.modalsubtitle && (\n <div\n class=\"subtitle\"\n id=\"modal-subtitle\"\n >\n {this.modalsubtitle}\n </div>\n )}\n </header>\n\n <div\n class={{\n \"modal-content-scroll-inside\": this.scrollInside,\n \"modal-content-scroll-outside\": !this.scrollInside,\n }}\n id=\"modal-content\"\n >\n <slot name=\"modalContent\"></slot>\n </div>\n </div>\n <div\n class={{\n \"modal-background\": true,\n \"modal-background-scroll-outside\": !this.scrollInside,\n }}\n data-action=\"modalBackground\"\n data-modal={this.modalid}\n onClick={() => {\n this.emitBackgroundClick();\n this.close();\n }}\n ></div>\n </dialog>\n );\n }\n}\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Listen, Method, Prop, h} from \"@stencil/core\";\nimport dialogPolyfill from \"dialog-polyfill\";\nimport {KeyboardCode} from \"../../beans\";\n\nconst FOCUSABLE_ELEMENTS_SELECTOR =\n ':is(button, input, select, textarea, [contenteditable=\"\"], [contenteditable=\"true\"], a[href], [tabindex], summary):not([disabled], [disabled=\"\"], [tabindex=\"-1\"], [aria-hidden=\"true\"], [hidden])';\n\n/*\n @slot modalCloseButton - slot for custom close button\n * @slot modalContent - slot for the content of the modal\n * @cssprop --z-modal-content-padding - padding of the modal's content. The default is 16px (--space-unit * 2)\n /\n@Component({\n tag: \"z-modal\",\n styleUrl: \"styles.css\",\n shadow: true,\n})\nexport class ZModal {\n /* unique id /\n @Prop()\n modalid: string;\n\n /* title text (optional) /\n @Prop()\n modaltitle?: string;\n\n /* subtitle (optional) /\n @Prop()\n modalsubtitle?: string;\n\n /* aria-label for close button (optional) /\n @Prop()\n closeButtonLabel = \"chiudi modale\";\n\n /* add role \"alertdialog\" to dialog (optional, default is false) /\n @Prop()\n alertdialog?: boolean = false;\n\n /* if true, the modal is closable (optional, default is true) /\n @Prop()\n closable?: boolean = true;\n\n /* if true, the modal can scroll inside, if false the viewport can scroll /\n @Prop()\n scrollInside?: boolean = true;\n\n /* if true, the page scroll is locked when the modal is open (optional, default is true) /\n @Prop()\n lockPageScroll?: boolean = true;\n\n private dialog: HTMLDialogElement;\n\n @Element() host: HTMLZModalElement;\n\n /* emitted on close button click, returns modalid /\n @Event()\n modalClose: EventEmitter;\n\n private emitModalClose(): void {\n if (this.closable) {\n this.modalClose.emit({modalid: this.modalid});\n this.resetPageScroll();\n }\n }\n\n /* emitted on modal header click, returns modalid /\n @Event()\n modalHeaderActive: EventEmitter;\n\n private emitModalHeaderActive(): void {\n this.modalHeaderActive.emit({modalid: this.modalid});\n }\n\n /* emitted on background click, returns modalid /\n @Event()\n modalBackgroundClick: EventEmitter;\n\n private emitBackgroundClick(): void {\n if (this.closable) {\n this.modalBackgroundClick.emit({modalid: this.modalid});\n this.resetPageScroll();\n }\n }\n\n private resetPageScroll(): void {\n if (this.lockPageScroll && document.body.style.overflowY === \"hidden\") {\n document.body.style.overflowY = \"\";\n }\n }\n\n componentDidLoad(): void {\n if (typeof window.HTMLDialogElement !== \"function\") {\n / workaround to fix `registerDialog` in test environment:\n stencil converts html elements to MockHTMLElement but this element is missing the `localName` property,\n which is used by `registerDialog` to recognize the element as dialog /\n if (!this.dialog.localName) {\n Object.defineProperty(this.dialog, \"localName\", {value: \"dialog\"});\n }\n dialogPolyfill.registerDialog(this.dialog);\n this.dialog.setAttribute(\"open\", \"true\");\n } else {\n this.open();\n }\n if (this.lockPageScroll) {\n requestAnimationFrame(() => (document.body.style.overflowY = \"hidden\"));\n }\n }\n\n disconnectedCallback(): void {\n this.resetPageScroll();\n }\n\n /* open modal /\n @Method()\n async open(): Promise<void> {\n this.dialog?.showModal();\n if (this.lockPageScroll) {\n document.body.style.overflowY = \"hidden\";\n }\n }\n\n /* close modal /\n @Method()\n async close(): Promise<void> {\n if (this.closable) {\n this.dialog?.close();\n this.resetPageScroll();\n }\n }\n\n /\n Get a list of focusable elements in the dialog.\n * Remove elements with `display: none` from the list, because they're not focusable.\n \n N.B. The list is built on the assumption that elements inside shadow root are placed ALL before the `modalContent` slot.\n * Adding focusable elements after the `modalContent` slot would break the order of elements in the list.\n */\n private get focusableElements(): HTMLElement[] {\n return [\n ...Array.from(this.host.shadowRoot.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ...Array.from(this.host.querySelectorAll<HTMLElement>(FOCUSABLE_ELEMENTS_SELECTOR)),\n ].filter((element) => getComputedStyle(element).display !== \"none\");\n }\n\n @Listen(\"keydown\")\n handleKeyDown(e: KeyboardEvent): void {\n if (e.code === KeyboardCode.ESC && !this.closable) {\n e.preventDefault();\n }\n\n if (e.code !== KeyboardCode.TAB) {\n return;\n }\n\n const focusableElements = this.focusableElements;\n const shadowActiveElement = this.host.shadowRoot.activeElement;\n const activeElement = this.host.ownerDocument.activeElement;\n const firstFocusableElement = focusableElements[0];\n const lastFocusableElement = focusableElements[focusableElements.length - 1];\n if (e.shiftKey && (shadowActiveElement == firstFocusableElement \|\| activeElement == firstFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n lastFocusableElement.focus();\n } else if (!e.shiftKey && (shadowActiveElement == lastFocusableElement \|\| activeElement == lastFocusableElement)) {\n // shift + tab was pressed and current active element is the first focusable element\n e.preventDefault();\n firstFocusableElement.focus();\n }\n }\n\n private closeButtonSlot(): HTMLElement \| void {\n if (this.closable) {\n return (\n <slot name=\"modalCloseButton\">\n <button\n aria-label={this.closeButtonLabel}\n onClick={() => this.close()}\n >\n <z-icon name=\"multiply-circle-filled\"></z-icon>\n </button>\n </slot>\n );\n }\n }\n\n private handleEscape(e: Event): void {\n if (this.closable) {\n return;\n }\n e.preventDefault();\n }\n\n render(): HTMLZModalElement {\n return (\n <dialog\n class={{\n \"modal-dialog\": !this.scrollInside,\n }}\n aria-labelledby=\"modal-title\"\n aria-describedby=\"modal-content\"\n role={this.alertdialog ? \"alertdialog\" : undefined}\n ref={(el) => (this.dialog = el as HTMLDialogElement)}\n onClose={() => this.emitModalClose()}\n onCancel={(e) => this.handleEscape(e)}\n >\n <div\n class={{\n \"modal-container\": true,\n \"modal-container-scroll-inside\": this.scrollInside,\n \"modal-container-scroll-outside\": !this.scrollInside,\n }}\n id={this.modalid}\n >\n <header onClick={this.emitModalHeaderActive.bind(this)}>\n <div>\n {this.modaltitle && <h1 id=\"modal-title\">{this.modaltitle}</h1>}\n {this.closeButtonSlot()}\n </div>\n {this.modalsubtitle && (\n <div\n class=\"subtitle\"\n id=\"modal-subtitle\"\n >\n {this.modalsubtitle}\n </div>\n )}\n </header>\n\n <div\n class={{\n \"modal-content-scroll-inside\": this.scrollInside,\n \"modal-content-scroll-outside\": !this.scrollInside,\n }}\n id=\"modal-content\"\n >\n <slot name=\"modalContent\"></slot>\n </div>\n </div>\n <div\n class={{\n \"modal-background\": true,\n \"modal-background-scroll-outside\": !this.scrollInside,\n }}\n data-action=\"modalBackground\"\n data-modal={this.modalid}\n onClick={() => {\n this.emitBackgroundClick();\n this.close();\n }}\n ></div>\n </dialog>\n );\n }\n}\n"]}

package/dist/collection/components/z-modal/index.stories.js CHANGED Viewed

@@ -16,7 +16,7 @@ const StoryMeta = {
         "closable": true,
         "scrollInside": true,
         "lockPageScroll": true,
-        "--z-modal-content-padding": "var(--space-unit)",
+        "--z-modal-content-padding": "calc(var(--space-unit) * 2)",
     },
     decorators: [
         (Story) => html `

package/dist/collection/components/z-modal/index.stories.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,gBAAgB;QAC9B,eAAe,EAAE,mBAAmB;QACpC,kBAAkB,EAAE,eAAe;QACnC,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,gBAAgB,EAAE,IAAI;QACtB,2BAA2B,EAAE,mBAAmB;KACjD;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;QASX,KAAK,EAAE;KACV;KACF;CACoC,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;yBACd,IAAI,CAAC,cAAc;0CACF,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;GASxE;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;yBACd,IAAI,CAAC,cAAc;0CACF,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HxE;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZModal} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../date-picker/z-date-picker/index\";\nimport \"../z-button/index\";\nimport \"../z-select/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZSearchbarStoriesArgs = ZModal & CSSVarsArguments<\"--z-modal-content-padding\">;\n\nconst StoryMeta = {\n title: \"ZModal\",\n component: \"z-modal\",\n args: {\n \"modalid\": \"my-modal\",\n \"modaltitle\": \"My modal title\",\n \"modalsubtitle\": \"My modal subtitle\",\n \"closeButtonLabel\": \"chiudi modale\",\n \"alertdialog\": false,\n \"closable\": true,\n \"scrollInside\": true,\n \"lockPageScroll\": true,\n \"--z-modal-content-padding\": \"var(--space-unit)\",\n },\n decorators: [\n (Story) => html`\n <script>\n function openZModal() {\n document.querySelector(\"z-modal\").open();\n }\n function closeZModal() {\n document.querySelector(\"z-modal\").close();\n }\n </script>\n ${Story()}\n `,\n ],\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZModal>;\n\nexport const ShortText = {\n args: {\n modalid: \"my-modal-short\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n lock-page-scroll=${args.lockPageScroll}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n <br />\n <z-button onclick=\"closeZModal()\">close</z-button>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n\nexport const LongText = {\n args: {\n modalid: \"my-modal-long\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n lock-page-scroll=${args.lockPageScroll}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n <z-date-picker\n date-picker-id=\"date-picker-1\"\n ariaLabel=\"stringaQualsiasi\"\n label=\"label\"\n ></z-date-picker>\n Provaaaaa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne\n ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,\n orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae\n volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.\n Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec\n honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te\n enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset\n inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae\n superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare\n sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio\n quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad\n animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis\n ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,\n inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil\n enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem\n ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui\n dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec\n vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,\n inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae\n dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem\n aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,\n inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori\n sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent\n tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum\n anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,\n falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et\n adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit\n Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc\n differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor\n sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.\n <z-select\n items='[{\"id\":\"item_1\",\"name\":\"first item\",\"selected\":false},{\"id\":\"item_2\",\"name\":\"second item\",\"selected\":true},{\"id\":\"item_3\",\"name\":\"disabled item\",\"selected\":false,\"disabled\":true},{\"id\":\"item_4\",\"name\":\"fourth item\",\"selected\":false}]'\n label=\"this is the label\"\n aria-label=\"\"\n placeholder=\"select placeholder\"\n name=\"\"\n status=\"-\"\n message=\"helper text\"\n autocomplete=\"false\"\n noresultslabel=\"Nessun risultato\"\n disabled=\"false\"\n readonly=\"false\"\n htmlid=\"\"\n htmltitle=\"\"\n reset-item=\"\"\n isfixed=\"false\"\n size=\"big\"\n ></z-select>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n"]}
1	+ {"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../../src/components/z-modal/index.stories.ts"],"names":[],"mappings":"AACA,OAAO,EAAC,IAAI,EAAC,MAAM,KAAK,CAAC;AAGzB,OAAO,oCAAoC,CAAC;AAC5C,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAI7B,MAAM,SAAS,GAAG;IAChB,KAAK,EAAE,QAAQ;IACf,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE;QACJ,SAAS,EAAE,UAAU;QACrB,YAAY,EAAE,gBAAgB;QAC9B,eAAe,EAAE,mBAAmB;QACpC,kBAAkB,EAAE,eAAe;QACnC,aAAa,EAAE,KAAK;QACpB,UAAU,EAAE,IAAI;QAChB,cAAc,EAAE,IAAI;QACpB,gBAAgB,EAAE,IAAI;QACtB,2BAA2B,EAAE,6BAA6B;KAC3D;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,IAAI,CAAA;;;;;;;;;QASX,KAAK,EAAE;KACV;KACF;CACoC,CAAC;AAExC,eAAe,SAAS,CAAC;AAIzB,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE;QACJ,OAAO,EAAE,gBAAgB;KAC1B;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;yBACd,IAAI,CAAC,cAAc;0CACF,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;GASxE;CACc,CAAC;AAElB,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE;QACJ,OAAO,EAAE,eAAe;KACzB;IACD,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,CAAA;;gBAER,IAAI,CAAC,OAAO;mBACT,IAAI,CAAC,UAAU;sBACZ,IAAI,CAAC,aAAa;2BACb,IAAI,CAAC,gBAAgB;oBAC5B,IAAI,CAAC,WAAW;iBACnB,IAAI,CAAC,QAAQ;sBACR,IAAI,CAAC,YAAY;yBACd,IAAI,CAAC,cAAc;0CACF,IAAI,CAAC,2BAA2B,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA6HxE;CACc,CAAC","sourcesContent":["import {Meta, StoryObj} from \"@storybook/web-components\";\nimport {html} from \"lit\";\nimport {type ZModal} from \".\";\nimport {CSSVarsArguments} from \"../../utils/storybook-utils\";\nimport \"../date-picker/z-date-picker/index\";\nimport \"../z-button/index\";\nimport \"../z-select/index\";\nimport \"./index\";\nimport \"./index.stories.css\";\n\ntype ZSearchbarStoriesArgs = ZModal & CSSVarsArguments<\"--z-modal-content-padding\">;\n\nconst StoryMeta = {\n title: \"ZModal\",\n component: \"z-modal\",\n args: {\n \"modalid\": \"my-modal\",\n \"modaltitle\": \"My modal title\",\n \"modalsubtitle\": \"My modal subtitle\",\n \"closeButtonLabel\": \"chiudi modale\",\n \"alertdialog\": false,\n \"closable\": true,\n \"scrollInside\": true,\n \"lockPageScroll\": true,\n \"--z-modal-content-padding\": \"calc(var(--space-unit) * 2)\",\n },\n decorators: [\n (Story) => html`\n <script>\n function openZModal() {\n document.querySelector(\"z-modal\").open();\n }\n function closeZModal() {\n document.querySelector(\"z-modal\").close();\n }\n </script>\n ${Story()}\n `,\n ],\n} satisfies Meta<ZSearchbarStoriesArgs>;\n\nexport default StoryMeta;\n\ntype Story = StoryObj<ZModal>;\n\nexport const ShortText = {\n args: {\n modalid: \"my-modal-short\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n lock-page-scroll=${args.lockPageScroll}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n <br />\n <z-button onclick=\"closeZModal()\">close</z-button>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n\nexport const LongText = {\n args: {\n modalid: \"my-modal-long\",\n },\n render: (args) => html`\n <z-modal\n modalid=${args.modalid}\n modaltitle=${args.modaltitle}\n modalsubtitle=${args.modalsubtitle}\n close-button-label=${args.closeButtonLabel}\n alertdialog=${args.alertdialog}\n closable=${args.closable}\n scroll-inside=${args.scrollInside}\n lock-page-scroll=${args.lockPageScroll}\n style=\"--z-modal-content-padding: ${args[\"--z-modal-content-padding\"]}\"\n >\n <div slot=\"modalContent\">\n <z-date-picker\n date-picker-id=\"date-picker-1\"\n ariaLabel=\"stringaQualsiasi\"\n label=\"label\"\n ></z-date-picker>\n Provaaaaa Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in\n Archimede, qui dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne\n ergo in vita summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul,\n orbus, egens, torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae\n volo. Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete.\n Plane idem, inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec\n honesta, quae dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te\n enim iudicem aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset\n inusitatam, inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae\n superiori sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare\n sapienti? Urgent tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio\n quem illum anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad\n animum, falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis\n ut et adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae,\n inquit Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil\n enim hoc differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem\n ipsum dolor sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui\n dum in pulvere quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita\n summum bonum dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens,\n torqueatur eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec\n vero sum nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem,\n inquit, et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae\n dico, praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem\n aequum puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam,\n inauditum quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori\n sententiae conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent\n tamen et nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum\n anteponebas? Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum,\n falsum est, quod negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et\n adversa quasi perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit\n Pacuvius, quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc\n differt. Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor\n sit amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra. Lorem ipsum dolor sit\n amet, consectetur adipiscing elit. Quem enim ardorem studii censetis fuisse in Archimede, qui dum in pulvere\n quaedam describit attentius, ne patriam quidem captam esse senserit? Possumusne ergo in vita summum bonum\n dicere, cum id ne in cena quidem posse videamur? Morbo gravissimo affectus, exul, orbus, egens, torqueatur\n eculeo: quem hunc appellas, Zeno? Nam memini etiam quae nolo, oblivisci non possum quae volo. Nec vero sum\n nescius esse utilitatem in historia, non modo voluptatem. Duo Reges: constructio interrete. Plane idem, inquit,\n et maxima quidem, qua fieri nulla maior potest. Hoc autem loco tantum explicemus haec honesta, quae dico,\n praeterquam quod nosmet ipsos diligamus, praeterea suapte natura per se esse expetenda. Te enim iudicem aequum\n puto, modo quae dicat ille bene noris. Si enim Zenoni licuit, cum rem aliquam invenisset inusitatam, inauditum\n quoque ei rei nomen inponere, cur non liceat Catoni? Ita cum ea volunt retinere, quae superiori sententiae\n conveniunt, in Aristonem incidunt; Istam voluptatem perpetuam quis potest praestare sapienti? Urgent tamen et\n nihil remittunt. Sin te auctoritas commovebat, nobisne omnibus et Platoni ipsi nescio quem illum anteponebas?\n Stuprata per vim Lucretia a regis filio testata civis se ipsa interemit. Sin autem ad animum, falsum est, quod\n negas animi ullum esse gaudium, quod non referatur ad corpus. Est autem situm in nobis ut et adversa quasi\n perpetua oblivione obruamus et secunda iucunde ac suaviter meminerimus. Quin etiam ferae, inquit Pacuvius,\n quíbus abest, ad praécavendum intéllegendi astútia, iniecto terrore mortis horrescunt. Nihil enim hoc differt.\n Bonum liberi: misera orbitas. Quare attende, quaeso. Quod cum dixissent, ille contra.\n <z-select\n items='[{\"id\":\"item_1\",\"name\":\"first item\",\"selected\":false},{\"id\":\"item_2\",\"name\":\"second item\",\"selected\":true},{\"id\":\"item_3\",\"name\":\"disabled item\",\"selected\":false,\"disabled\":true},{\"id\":\"item_4\",\"name\":\"fourth item\",\"selected\":false}]'\n label=\"this is the label\"\n aria-label=\"\"\n placeholder=\"select placeholder\"\n name=\"\"\n status=\"-\"\n message=\"helper text\"\n autocomplete=\"false\"\n noresultslabel=\"Nessun risultato\"\n disabled=\"false\"\n readonly=\"false\"\n htmlid=\"\"\n htmltitle=\"\"\n reset-item=\"\"\n isfixed=\"false\"\n size=\"big\"\n ></z-select>\n </div>\n </z-modal>\n <z-button onclick=\"openZModal()\">apri modale</z-button>\n `,\n} satisfies Story;\n"]}

package/dist/collection/components/z-modal/styles.css CHANGED Viewed

@@ -2,7 +2,7 @@
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
-  --z-modal-content-padding: calc(var(--space-unit) * 2);
+  --z-modal-content-padding: ;
 }
 :host > dialog {
@@ -23,7 +23,7 @@
   display: none;
 }
-/* polyfill style  */
+/* polyfill style */
 :host > dialog + .backdrop {
   display: none;
 }
@@ -37,7 +37,7 @@
 }
 ::slotted([slot="modalContent"]) {
-  padding: var(--z-modal-content-padding);
+  padding: var(--z-modal-content-padding, calc(var(--space-unit) * 2));
 }
 .modal-container {
@@ -55,8 +55,7 @@
 }
 .modal-container > header {
-  padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2) calc(var(--space-unit) * 1.75)
-    calc(var(--space-unit) * 2);
+  padding: calc(var(--space-unit) * 1.75) calc(var(--space-unit) * 2);
   background: var(--color-background);
 }
@@ -241,7 +240,7 @@
 }
 /* Desktop */
-@media only screen and (min-width: 1152px) {
+@media (min-width: 1152px) {
   .modal-container > header {
     padding-top: calc(var(--space-unit) * 1.5);
     padding-bottom: calc(var(--space-unit) * 1.5);

package/dist/collection/components/z-navigation-tabs/index.js CHANGED Viewed

@@ -208,10 +208,10 @@ export class ZNavigationTabs {
         (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
     }
     render() {
-        return (h(Host, { key: '8f134ce69da30cd0a053700a95c39a4ec9d588ed', class: {
+        return (h(Host, { key: 'c65b79e41341bc577f654c7dee9c36fc431d7950', class: {
                 "interactive-2": this.size === NavigationTabsSize.SMALL,
                 "interactive-1": this.size !== NavigationTabsSize.SMALL,
-            }, scrollable: this.canNavigate }, h("button", { key: '231f97991908054d424dbcc83fd7e65e6651e767', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '145b4e6220e14acfbe6c13d1da095128096064c1', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '111d66f763a80c52fdd21a906028cb7aa4817ee7', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: 'ea3edcae8daaa4b5ad1124957d47d05f899f3bc2' })), h("button", { key: 'b5329374d042f246c785b868a87bcf5a39d2c712', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '373978c44182a33ca9d844eb3fa6c6991511d63f', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
+            }, scrollable: this.canNavigate }, h("button", { key: 'f18201689c6de86ab73ddd7f34a35e74745ea2d4', class: "navigation-button", onClick: this.navigateBackwards.bind(this), tabIndex: -1, disabled: !this.canNavigatePrev, "aria-label": "Mostra elementi precedenti", hidden: !this.canNavigate }, h("z-icon", { key: '80bd7fbd07f454feb7f8a666c44e0cbc26ea79e4', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-left" : "chevron-up", width: 16, height: 16 })), h("nav", { key: '009f3c15170742b672a06a80ece4bbdd5e3faecc', role: "tablist", "aria-label": this.ariaLabel, ref: (el) => (this.nav = el !== null && el !== void 0 ? el : this.nav), onScroll: this.checkScrollEnabled.bind(this), "aria-orientation": this.orientation }, h("slot", { key: '78d887e394b32fd4253e02b41034fd6c870f7773' })), h("button", { key: '78f41b5f5c1db763597f9829d99311e42fc17f24', class: "navigation-button", onClick: this.navigateForward.bind(this), tabIndex: -1, disabled: !this.canNavigateNext, "aria-label": "Mostra elementi successivi", hidden: !this.canNavigate }, h("z-icon", { key: '09102f04028fc4cefdd17009cce7a23e6728529e', name: this.orientation === NavigationTabsOrientation.HORIZONTAL ? "chevron-right" : "chevron-down", width: 16, height: 16 }))));
     }
     static get is() { return "z-navigation-tabs"; }
     static get originalStyleUrls() {

package/dist/collection/components/z-navigation-tabs/styles.css CHANGED Viewed

@@ -134,7 +134,7 @@ z-navigation-tabs > nav > a {
 z-navigation-tabs > nav > *:focus:focus-visible {
   z-index: 1;
-  box-shadow: inset 0 0 4px 3px var(--blue800);
+  box-shadow: inset 0 0 2px 2px var(--blue800);
 }
 z-navigation-tabs > nav > :not([disabled]):hover {