@zanichelli/albe-web-components 2.27.0 → 2.30.0-rc1

package/www/build/z-avatar.entry.js

@@ -0,0 +1,39 @@
+import { r as registerInstance, h, e as Host } from './index-44936066.js';
+import { A as AvatarSize } from './index-020789bb.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);background-color:var(--bg-grey-700);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;overflow:hidden;text-transform:uppercase}:host(.small),:host(.small)>img{height:calc(var(--space-unit) * 3);width:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{height:calc(var(--space-unit) * 4);width:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{height:calc(var(--space-unit) * 5);width:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
+
+const ZAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    /** [optional] Avatar size */
+    this.size = AvatarSize.medium;
+    /** [optional] Avatar text color */
+    this.textColor = "text-white";
+    /** [optional] Avatar background color */
+    this.backgroundColor = "bg-grey-700";
+    if (!this.text && !this.image) {
+      console.warn("z-avatar must contain at least one prop between text and image");
+    }
+  }
+  getTextSize() {
+    if (this.size === AvatarSize.small) {
+      return "5";
+    }
+    else if (this.size === AvatarSize.medium) {
+      return "4";
+    }
+    else if (this.size === AvatarSize.large) {
+      return "2";
+    }
+  }
+  render() {
+    return (h(Host, { class: { [this.size]: true, [`body-${this.getTextSize()}-sb`]: true }, style: {
+        color: `var(--${this.textColor})`,
+        backgroundColor: `var(--${this.backgroundColor})`,
+      } }, this.text && !this.image && h("span", null, this.text.substring(0, 2)), this.image && (h("img", { src: this.image, onError: () => (this.image = "") }))));
+  }
+};
+ZAvatar.style = stylesCss;
+
+export { ZAvatar as z_avatar };

package/www/build/z-body.entry.js

@@ -0,0 +1,13 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const ZBody = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.variant = "regular";
+  }
+  render() {
+    return (h("z-typography", { component: this.component || "span", level: `b${this.level}`, variant: this.variant }, h("slot", null)));
+  }
+};
+
+export { ZBody as z_body };

package/www/build/z-button-filter.entry.js

@@ -0,0 +1,45 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+
+const stylesCss = "button.container{min-height:32px;line-height:32px;border:var(--border-size-small) solid var(--bg-grey-200);border-radius:16px;box-shadow:0px 2px 5px 0px var(--bg-neutral-300);-webkit-box-shadow:0px 2px 5px 0px var(--bg-neutral-300);-moz-box-shadow:0px 2px 5px 0px var(--bg-neutral-300);text-align:center;padding:0 calc(var(--space-unit) * 2);cursor:pointer;letter-spacing:0.17px;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);opacity:1;transition:all 200ms linear}button.container.small{min-height:24px;line-height:24px}button.container:focus{outline:0}button.container::-moz-focus-inner{border:0}.text-container{margin-left:4px}button.container,button.container:focus,button.container:hover{background-color:var(--bg-white);color:var(--text-grey-700);fill:var(--text-grey-700)}button.container.isactive{background-color:var(--bg-white);color:var(--myz-blue);fill:var(--myz-blue)}button.container.isactive:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button.container.isactive:focus{background-color:var(--myz-blue-dark);border-color:var(--myz-blue-dark);box-shadow:0px 0px 4px 0px var(--text-grey-800);color:var(--bg-white);fill:var(--bg-white)}button z-icon{display:inline-block}";
+
+const ZButtonFilter = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.removefilter = createEvent(this, "removefilter", 7);
+    /** disable action on button */
+    this.isfixed = false;
+    /** add icon to button */
+    this.hasicon = true;
+    /** reduce button size (optional) */
+    this.issmall = false;
+    this.handleRemovingFilterClick = this.handleRemovingFilterClick.bind(this);
+  }
+  handleRemovingFilterClick() {
+    this.removefilter.emit({
+      filterid: this.filterid,
+    });
+  }
+  renderFixedPillow(filtername) {
+    return (h("button", { class: `container ${this.issmall ? "small" : ""}` }, this.renderIcon(), this.renderContent(filtername)));
+  }
+  renderDynamicPillow(filtername) {
+    return (h("button", { class: `container isactive ${this.issmall ? "small" : ""}`, onClick: this.handleRemovingFilterClick }, this.renderIcon(), this.renderContent(filtername)));
+  }
+  renderIcon() {
+    if (!this.hasicon)
+      return null;
+    return (h("z-icon", { class: "close-icon-container", name: "multiply", height: 12, width: 12 }));
+  }
+  renderContent(filtername) {
+    return h("span", { class: "text-container" }, filtername);
+  }
+  render() {
+    if (this.isfixed) {
+      return this.renderFixedPillow(this.filtername);
+    }
+    return this.renderDynamicPillow(this.filtername);
+  }
+};
+ZButtonFilter.style = stylesCss;
+
+export { ZButtonFilter as z_button_filter };

package/www/build/z-button-sort.entry.js

@@ -0,0 +1,50 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { t as tabletBreakpoint } from './breakpoints-c386984e.js';
+
+const stylesCss = ":host,button{max-width:100%}button{height:36px;border:var(--border-size-medium) solid var(--myz-blue);border-radius:var(--border-radius);color:var(--myz-blue);fill:var(--myz-blue);background-color:var(--bg-white);outline:none;padding:0 var(--space-unit);cursor:pointer}button::-moz-focus-inner{border:0}button:hover{border-color:var(--myz-blue-dark);color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}button:focus{border-color:var(--myz-blue);color:var(--myz-blue);fill:var(--myz-blue);box-shadow:0px 0px 2px 2px var(--accent-dark)}button:active{border-color:var(--myz-blue-light);color:var(--myz-blue-light);fill:var(--myz-blue-light);box-shadow:0px 2px 4px 0px rgba(0, 0, 0, 0.4)}button.selected{border-color:var(--myz-blue-dark);background-color:var(--myz-blue-dark);color:var(--bg-white);fill:var(--bg-white)}button>label{cursor:pointer;font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;display:flex;align-items:center}button>label>span.ellipsis{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;margin:0;padding:0}button>label>span.counter{margin-left:calc(var(--space-unit) / 2);margin-right:calc(var(--space-unit) * 2)}button>label>span.sort{margin-right:var(--half-x1);white-space:nowrap}button>span{font-family:var(--dashboard-font);font-weight:var(--font-rg);font-size:14px;margin-right:calc(var(--space-unit) * 0.5)}button>z-icon{padding-top:calc(var(--space-unit) * 0.5)}@media only screen and (min-width: 768px){:host,button{max-width:325px}}@media only screen and (min-width: 1025px){:host,button{max-width:490px}}";
+
+const ZButtonSort = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.buttonSortClick = createEvent(this, "buttonSortClick", 7);
+    /** sort label content (ascending) (optional) */
+    this.sortlabelasc = "A-Z";
+    /** sort label content (descending) (optional) */
+    this.sortlabeldesc = "Z-A";
+    /** selected flag (optional) */
+    this.isselected = false;
+    /** sortable flag (optional) */
+    this.sortasc = true;
+    this.allowTooltip = false;
+  }
+  emitButtonSortClick() {
+    if (!this.isselected) {
+      this.isselected = true;
+    }
+    else {
+      this.sortasc = !this.sortasc;
+    }
+    this.buttonSortClick.emit({
+      buttonid: this.buttonid,
+      sortAsc: this.sortasc,
+    });
+  }
+  componentDidLoad() {
+    if (this.elementHasEllipsis() && window.innerWidth > tabletBreakpoint)
+      this.allowTooltip = true;
+  }
+  setButtonTitle() {
+    return this.allowTooltip
+      ? `${this.sortasc ? this.label : this.desclabel}`
+      : "";
+  }
+  elementHasEllipsis() {
+    return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
+  }
+  render() {
+    return (h("button", { title: this.setButtonTitle(), id: this.buttonid, class: this.isselected && "selected", onClick: () => this.emitButtonSortClick() }, h("label", null, h("span", { ref: (el) => (this.ellipsis = el), class: "ellipsis" }, !this.sortasc && this.desclabel ? this.desclabel : this.label), h("span", { class: "counter" }, this.counter && ` (${this.counter})`), h("span", { class: "sort" }, this.sortasc ? this.sortlabelasc : this.sortlabeldesc), h("z-icon", { name: "caret-up-down", width: 16, height: 16 }))));
+  }
+};
+ZButtonSort.style = stylesCss;
+
+export { ZButtonSort as z_button_sort };

package/www/build/z-button.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, h, g as getElement } from './index-44936066.js';
+import { c as classnames } from './index-8067f807.js';
+import { t as ButtonTypeEnum, B as ButtonVariantEnum, g as ButtonSizeEnum } from './index-020789bb.js';
+import './_commonjsHelpers-cb1cd7bb.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) {
+    registerInstance(this, hostRef);
+    /** HTML button disabled attribute. */
+    this.disabled = false;
+    /** HTML button type attribute. */
+    this.type = ButtonTypeEnum.button;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    this.variant = ButtonVariantEnum.primary;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = 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 (h("slot", { name: "element" }, h("button", { id: this.htmlid, name: this.name, type: this.type, disabled: this.disabled, class: classnames(this.variant, this.size, { issmall: this.issmall }, { square: this.square }) }, this.icon && h("z-icon", { name: this.icon, width: 16, height: 16 }), h("slot", null))));
+  }
+  get hostElement() { return getElement(this); }
+};
+ZButton.style = stylesCss;
+
+export { ZButton as z_button };

package/{dist/cjs/z-candybar.cjs.entry.js → www/build/z-candybar.entry.js}

@@ -1,19 +1,15 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
+import { r as registerInstance, h } from './index-44936066.js';
 
 const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-content:center}:host>div{position:fixed;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;top:30vh;max-width:297px;height:fit-content;min-height:232px;z-index:1000;margin:auto;overflow:auto;overflow:-moz-scrollbars-none;-ms-overflow-style:none;background:var(--myz-blue-lighter);border-radius:calc(var(--space-unit) * .5);box-shadow:0px -2px 4px 0px rgba(66, 69, 72, 0.4)}@media only screen and (min-width: 768px){:host>div{position:initial;flex-wrap:nowrap;justify-content:space-between;align-items:center;align-content:stretch;position:fixed;top:auto;bottom:0;margin:0 auto;left:0;right:0;height:auto;min-height:138px;max-width:100%;border-radius:0px}}@media only screen and (min-width: 1152px){:host>div{min-height:122px}}";
 
-const ZCandybar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-  }
-  render() {
-    return (index.h("div", null, index.h("slot", { name: "content" })));
-  }
-};
+const ZCandybar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("div", null, h("slot", { name: "content" })));
+  }
+};
 ZCandybar.style = stylesCss;
 
-exports.z_candybar = ZCandybar;
+export { ZCandybar as z_candybar };

package/www/build/z-card.entry.js

@@ -0,0 +1,54 @@
+import { r as registerInstance, f as createEvent, h, g as getElement } from './index-44936066.js';
+import { C as CardVariants } from './index-020789bb.js';
+
+const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);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='border'])>.content,:host([variant='shadow'])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}: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']){box-shadow:var(--shadow-2)}:host([variant='shadow'][clickable]:hover){box-shadow:var(--shadow-4)}:host([variant='shadow'][clickable]:focus:focus-visible){box-shadow:var(--shadow-4)}:host([variant='shadow'][clickable]: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) {
+    registerInstance(this, hostRef);
+    this.cardClicked = createEvent(this, "cardClicked", 7);
+    /** Enable click interactions on the card. Default: false */
+    this.clickable = 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 [
+      h("div", { class: "cover-container" }, h("div", { class: "color-cover" }, h("div", { class: "cover-content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" })))),
+      h("div", { class: "content" }, h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" })))
+    ];
+  }
+  render() {
+    if (this.variant === CardVariants.overlay || this.hasCoverImage) {
+      return [
+        h("div", { class: "cover-container" }, this.hasCoverImage && [
+          h("slot", { name: "cover" }),
+          (this.variant !== CardVariants.overlay) && this.coverIcon && h("z-icon", { name: this.coverIcon })
+        ], !this.hasCoverImage && h("div", { class: "color-cover" })),
+        h("div", { class: "content" }, h("slot", { name: "metadata" }), h("slot", { name: "title" }), h("slot", { name: "text" }), h("div", { class: "actions" }, h("slot", { name: "action" })))
+      ];
+    }
+    return this.renderColorCoverCard();
+  }
+  get host() { return getElement(this); }
+};
+ZCard.style = stylesCss;
+
+export { ZCard as z_card };

package/www/build/z-chip.entry.js

@@ -0,0 +1,20 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = ":host>div{display:inline-block;min-height:28px;line-height:28px;padding:0 calc(var(--space-unit) * 1.5);background-color:var(--bg-white);border:var(--border-size-small) solid var(--bg-grey-200);border-radius:14px;color:var(--text-grey-800);fill:var(--text-grey-800);font-family:var(--dashboard-font);font-size:12px}.boldtext{font-weight:bold}";
+
+const ZChip = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  renderLegacyChip() {
+    return h("div", null, h("span", { class: "boldtext" }, this.boldtext), " ", this.regulartext);
+  }
+  render() {
+    return this.boldtext != null || this.regulartext != null ?
+      this.renderLegacyChip() :
+      h("div", null, h("slot", null));
+  }
+};
+ZChip.style = stylesCss;
+
+export { ZChip as z_chip };

package/www/build/z-combobox.entry.js

@@ -0,0 +1,166 @@
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { I as InputTypeEnum, k as keybordKeyCodeEnum } from './index-020789bb.js';
+import { h as handleKeyboardSubmit } from './utils-cb1be595.js';
+import './breakpoints-c386984e.js';
+
+const stylesCss = ":host{display:block}:host>div.fixed{position:relative;height:42px}:host>div>.header{background-color:var(--bg-white);border-radius:var(--border-radius-small);border:var(--border-size-small) solid var(--bg-grey-700);position:relative;z-index:10;min-height:42px;margin:0;padding:0 calc(var(--space-unit) * 2);display:flex;justify-content:space-between;align-items:center;cursor:pointer}:host>div>.header:focus:focus-visible{border:var(--border-size-small) solid var(--blue500);box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>z-body{margin:0;padding:var(--space-unit) 0;color:var(--text-grey-800)}:host>div>.header>z-body>span{font-weight:var(--font-sb)}:host>div>.header>z-icon{fill:var(--text-grey-800);transform:rotate(360deg);transition:all 200ms linear}:host>div.open>.header{border-radius:var(border-radius-small) var(border-radius-small) 0 0;border:var(--border-size-small) solid var(--blue500)}:host>div.open>.header>z-icon{fill:var(--text-grey-800);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.openComboData{background-color:var(--bg-white);border-radius:0;border:var(--border-size-small) solid var(--gray200);border-top:0px;position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2)}:host>div.open>div.openComboData>div{padding:0;max-height:235px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--gray200)}:host>div.open>div.openComboData>z-input{margin-bottom:calc(var(--space-unit) * 2);width:100%}:host>div.open>div.openComboData>div>ul{margin:0;padding:0 3px;max-height:235px}::-webkit-scrollbar{background:linear-gradient(\n    90deg,\n    var(--bg-white) 2px,\n    var(--bg-grey-200) 4px,\n    var(--bg-white) 8px\n  );border-radius:var(--border-radius);width:10px}::-webkit-scrollbar-thumb{background-color:var(--myz-blue);border-radius:var(--border-radius);width:10px}:host>div.open>z-input{color:var(--myz-blue);margin:0 calc(var(--space-unit) * 2);width:238px;position:relative;z-index:1}:host>div.open>div.openComboData>div.search{box-shadow:1px 1px 4px 2px rgba(217, 222, 227, 0.5);margin-top:0;max-height:auto;overflow:hidden}:host>div.open>div.openComboData>div.search>ul{padding:var(--space-unit) calc(var(--space-unit) * 2);max-height:180px;overflow:auto;scrollbar-width:thin;scrollbar-color:var(--myz-blue) var(--bg-grey-200)}:host>div.open>div.openComboData>div.search>div{display:flex;justify-content:center}:host>div.open>div.openComboData>div.search>div>a{display:inline-block;cursor:pointer;color:var(--myz-blue);font-family:var(--dashboard-font);font-weight:var(--font-sb);font-size:14px;height:44px;line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.openComboData>div.checkAllWrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * .5);text-align:left}";
+
+const ZCombobox = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.comboboxChange = createEvent(this, "comboboxChange", 7);
+    /** show search input flag (optional) */
+    this.hassearch = false;
+    /** no result text message */
+    this.noresultslabel = "Nessun risultato";
+    /** toggle combo list opening flag */
+    this.isopen = false;
+    /** fixed style flag */
+    this.isfixed = false;
+    /** close combobox list text */
+    this.closesearchtext = "Chiudi";
+    /** show "check all" checkbox (optional) */
+    this.hascheckall = false;
+    /** check all label (optional) */
+    this.checkalltext = "Seleziona tutti";
+    /** uncheck all label (optional) */
+    this.uncheckalltext = "Deseleziona tutti";
+    /** max number of checkable items (0 = unlimited) */
+    this.maxcheckableitems = 0;
+    this.renderItemsList = []; // used for render only
+    this.itemsList = [];
+    this.inputType = InputTypeEnum.text;
+    this.toggleComboBox = this.toggleComboBox.bind(this);
+    this.closeFilterItems = this.closeFilterItems.bind(this);
+  }
+  watchItems() {
+    this.itemsList =
+      typeof this.items === "string" ? JSON.parse(this.items) : this.items;
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
+    if (this.searchValue) {
+      this.filterItems(this.searchValue);
+    }
+    else {
+      this.resetRenderItemsList();
+    }
+  }
+  inputCheckListener(e) {
+    const id = e.detail.id.replace(`combo-checkbox-${this.inputid}-`, "");
+    if (id === "check-all" &&
+      (!this.maxcheckableitems ||
+        this.maxcheckableitems >= this.itemsList.length)) {
+      return this.checkAll(e.detail.checked);
+    }
+    this.itemsList = this.itemsList.map((item) => {
+      if (item.id === id)
+        item.checked = e.detail.checked;
+      return item;
+    });
+    this.resetRenderItemsList();
+    this.emitComboboxChange();
+  }
+  emitComboboxChange() {
+    this.comboboxChange.emit({ id: this.inputid, items: this.itemsList });
+  }
+  componentWillLoad() {
+    this.watchItems();
+  }
+  componentWillRender() {
+    this.selectedCounter = this.itemsList.filter((item) => item.checked).length;
+    if (this.searchValue) {
+      this.filterItems(this.searchValue);
+    }
+  }
+  resetRenderItemsList() {
+    const renderItemsList = [];
+    this.itemsList.forEach((item) => {
+      renderItemsList.push(Object.assign({}, item));
+    });
+    this.renderItemsList = renderItemsList;
+  }
+  filterItems(value) {
+    if (!value)
+      return this.closeFilterItems();
+    this.searchValue = value;
+    this.resetRenderItemsList();
+    this.renderItemsList = this.renderItemsList.filter((item) => {
+      const start = item.name.toUpperCase().indexOf(value.toUpperCase());
+      const end = start + value.length;
+      const newName = item.name.substring(0, start) +
+        item.name.substring(start, end).bold() +
+        item.name.substring(end, item.name.length);
+      item.name = newName;
+      return start >= 0;
+    });
+  }
+  checkAll(checked = true) {
+    this.itemsList = this.itemsList.map((item) => (Object.assign(Object.assign({}, item), { checked: checked })));
+    this.resetRenderItemsList();
+    this.emitComboboxChange();
+  }
+  closeFilterItems() {
+    this.searchValue = "";
+    this.resetRenderItemsList();
+  }
+  toggleComboBox() {
+    this.isopen = !this.isopen;
+  }
+  renderHeader() {
+    return (h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
+        if (ev.keyCode === keybordKeyCodeEnum.SPACE)
+          ev.preventDefault();
+      }, onKeyUp: (ev) => handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, h("z-body", { level: 3, component: "p" }, this.label, h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), h("z-icon", { name: "caret-down", width: 18, height: 18 })));
+  }
+  renderContent() {
+    if (!this.isopen)
+      return;
+    return (h("div", { class: "openComboData" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
+  }
+  renderItems() {
+    if (!this.isopen)
+      return;
+    return (h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+  }
+  renderList(items) {
+    if (!items)
+      return;
+    if (!items.length && this.searchValue)
+      return this.renderNoSearchResults();
+    return (h("ul", null, items.map((item, i) => {
+      return (h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: i !== items.length - 1 }, h("z-input", { type: InputTypeEnum.checkbox, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked &&
+          this.maxcheckableitems &&
+          this.maxcheckableitems === this.selectedCounter })));
+    })));
+  }
+  renderNoSearchResults() {
+    return (h("ul", null, h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle" })));
+  }
+  renderCloseButton() {
+    return (h("div", null, h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
+  }
+  renderSearchInput() {
+    if (!this.isopen)
+      return;
+    return (h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, hasmessage: false, onInputChange: (e) => {
+        if (e.detail.keycode === 27)
+          return this.closeFilterItems();
+        this.filterItems(e.detail.value);
+      } }));
+  }
+  renderCheckAll() {
+    if (this.searchValue)
+      return;
+    const allChecked = this.selectedCounter === this.itemsList.length;
+    return (h("div", { class: "checkAllWrapper" }, h("z-input", { type: InputTypeEnum.checkbox, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems &&
+        this.maxcheckableitems < this.itemsList.length })));
+  }
+  render() {
+    return (h("div", { "data-action": `combo-${this.inputid}`, class: `${this.isopen ? "open" : ""} ${this.isfixed ? "fixed" : ""}`, id: this.inputid }, this.renderHeader(), this.renderContent()));
+  }
+  static get watchers() { return {
+    "items": ["watchItems"]
+  }; }
+};
+ZCombobox.style = stylesCss;
+
+export { ZCombobox as z_combobox };

package/www/build/z-contextual-menu.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, f as createEvent, h, e as Host } from './index-44936066.js';
+import { P as PopoverPosition } from './index-020789bb.js';
+
+const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host(:focus-within)>z-popover{box-shadow:var(--shadow-focus-primary)}.popover-content-container{min-width:112px;max-width:280px;white-space:nowrap;padding:calc(var(--space-unit) / 2) 0}.element-container:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.element-text{overflow:hidden;text-overflow:ellipsis;font-size:14px}.element-container,.disabled-element-container{display:flex;align-items:center;gap:var(--space-unit);fill:var(--color-disabled03);padding:calc(var(--space-unit) / 2) var(--space-unit);min-height:calc(var(--space-unit) * 4);box-sizing:border-box}.element-container{fill:var(--color-primary01)}.element-icon{display:flex}";
+
+const ZContextualMenu = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.clickContextualMenu = createEvent(this, "clickContextualMenu", 7);
+    /**
+     * [optional] Sets text color of ZContextualMenu's content
+     */
+    this.color = "color-primary01";
+    /**
+     * [optional] Sets the position of the popover
+     */
+    this.popoverPosition = PopoverPosition["after-down"];
+  }
+  componentWillRender() {
+    if (this.elements) {
+      this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
+    }
+  }
+  showIcon() {
+    return !this.jsonElements.some((element) => !element.icon);
+  }
+  render() {
+    var _a;
+    return (h(Host, null, h("z-popover", { "background-color": "color-background", "box-shadow": "shadow-2", position: this.popoverPosition, padding: "0" }, h("z-icon", { "aria-label": "apri-menu-contestuale", slot: "trigger", name: "contextual-menu", fill: "color-primary01", style: { cursor: "pointer" } }), h("div", { class: "popover-content-container", slot: "popover" }, h("z-list", null, h("z-list-group", { "divider-type": "element" }, (_a = this.jsonElements) === null || _a === void 0 ? void 0 : _a.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, h("div", { class: element.disabled
+        ? "disabled-element-container"
+        : "element-container" }, this.showIcon() && (h("div", { class: "element-icon" }, h("z-icon", { name: element.icon, width: 16, height: 16 }))), h("div", { class: "element-text" }, h("span", null, element.text))))))))))));
+  }
+};
+ZContextualMenu.style = stylesCss;
+
+export { ZContextualMenu as z_contextual_menu };

package/{dist/cjs/z-cookiebar.cjs.entry.js → www/build/z-cookiebar.entry.js}

@@ -1,42 +1,38 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-dee3e21d.js');
-const index$1 = require('./index-8f7af00e.js');
+import { r as registerInstance, f as createEvent, h } from './index-44936066.js';
+import { B as ButtonVariantEnum } from './index-020789bb.js';
 
 const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}z-candybar.hidden{display:none}.content{display:flex;flex-direction:column;flex-wrap:nowrap;justify-content:space-between;align-items:stretch;align-content:space-between;color:var(--text-grey-800);border-radius:calc(var(--space-unit) * .5);font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 3) calc(var(--space-unit) * 2)}.content>div>h2{margin:0;padding:0;color:var(--text-grey-800);border-radius:0px;font-size:18px;font-weight:var(--font-sb);letter-spacing:0px}.content>div>div{padding:calc(var(--space-unit) * 3) 0;font-size:14px;letter-spacing:0.16px;line-height:20px}.content>div>div>p{margin:0}.content>div>div>p>a{cursor:pointer;font-weight:var(--font-sb);color:var(--text-grey-800);text-decoration:underline;height:14px;display:inline-flex}.content>div>div>p>a:visited{color:var(--text-grey-800);cursor:pointer;z-index:1000}.content>z-button{margin:0;width:100%}@media only screen and (min-width: 768px){.content{width:100%;flex-direction:row;align-items:center;font-size:16px;letter-spacing:0px;line-height:24px;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 3)}.content>div{width:560px}.content>div>h2{height:calc(var(--space-unit) * 3.5)}.content>div>div{padding:0}.content>z-button{margin:0;width:initial}}@media only screen and (min-width: 1152px){.content>div{width:935px}}@media only screen and (min-width: 1366px){.content{padding-left:calc(var(--space-unit) * 4);padding-right:calc(var(--space-unit) * 4)}}";
 
-const ZCookiebar = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.accept = index.createEvent(this, "accept", 7);
-  }
-  emitAccept(ev) {
-    this.accept.emit({ ev });
-  }
-  handleOkButtonClick(ev) {
-    this.emitAccept(ev);
-    if (typeof this.callback === "function") {
-      this.callback();
-    }
-  }
-  handleOkButtonKeyUp(ev) {
-    this.emitAccept(ev);
-    if (ev.code === "Enter") {
-      if (typeof this.callback !== "undefined" &&
-        typeof this.callback === "function") {
-        this.callback();
-      }
-    }
-  }
-  renderContentSlot() {
-    return (index.h("div", { class: "content", slot: "content" }, index.h("div", null, index.h("h2", null, "Su questo sito usiamo i cookie."), index.h("div", null, index.h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", index.h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), index.h("z-button", { variant: index$1.ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
-  }
-  render() {
-    return index.h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
-  }
-};
+const ZCookiebar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.accept = createEvent(this, "accept", 7);
+  }
+  emitAccept(ev) {
+    this.accept.emit({ ev });
+  }
+  handleOkButtonClick(ev) {
+    this.emitAccept(ev);
+    if (typeof this.callback === "function") {
+      this.callback();
+    }
+  }
+  handleOkButtonKeyUp(ev) {
+    this.emitAccept(ev);
+    if (ev.code === "Enter") {
+      if (typeof this.callback !== "undefined" &&
+        typeof this.callback === "function") {
+        this.callback();
+      }
+    }
+  }
+  renderContentSlot() {
+    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+  }
+  render() {
+    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+  }
+};
 ZCookiebar.style = stylesCss;
 
-exports.z_cookiebar = ZCookiebar;
+export { ZCookiebar as z_cookiebar };

package/www/build/z-divider.entry.js

@@ -0,0 +1,22 @@
+import { r as registerInstance, h, e as Host } from './index-44936066.js';
+import { m as DividerSize, q as DividerOrientation } from './index-020789bb.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) {
+    registerInstance(this, hostRef);
+    /** [optional] Divider size */
+    this.size = DividerSize.small;
+    /** [optional] Divider color */
+    this.color = "gray200";
+    /** [optional] Divider orintation */
+    this.orientation = DividerOrientation.horizontal;
+  }
+  render() {
+    return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+  }
+};
+ZDivider.style = stylesCss;
+
+export { ZDivider as z_divider };

package/www/build/z-footer-link.entry.js

@@ -0,0 +1,15 @@
+import { r as registerInstance, h } from './index-44936066.js';
+
+const stylesCss = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}:host>a{display:inline-block;color:var(--color-white);padding:calc(var(--space-unit) / 2 * 3) 0;border-bottom:1px solid var(--gray50);text-decoration:none;font-size:14px;width:100%}@media only screen and (min-width: 768px){:host a{font-size:12px;border-bottom:none;text-decoration:underline;padding:0;width:initial}}";
+
+const ZFooterLink = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+  }
+  render() {
+    return (h("a", { href: this.href, target: "_blank" }, h("slot", null)));
+  }
+};
+ZFooterLink.style = stylesCss;
+
+export { ZFooterLink as z_footer_link };