@zanichelli/albe-web-components 9.1.2 → 9.2.0

package/dist/cjs/z-combobox.cjs.entry.js

@@ -3,199 +3,199 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-28bcd719.js');
-const utils = require('./utils-1b75af6b.js');
-require('./breakpoints-ebe1a437.js');
+const index$1 = require('./index-419ee40f.js');
+const utils = require('./utils-3fc57dbb.js');
+require('./breakpoints-0faa0935.js');
 
 const stylesCss = ":host{display:block}:host>div.fixed{position:relative}:host>div>.header{position:relative;z-index:10;display:flex;min-height:42px;align-items:center;justify-content:space-between;padding:0 calc(var(--space-unit) * 1.5);border:var(--border-size-small) solid var(--bg-grey-700);margin:0;background-color:var(--bg-white);border-radius:var(--border-radius-small);cursor:pointer}:host([size=\"small\"])>div>.header{min-height:34px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header{min-height:30px;font-size:var(--font-size-2)}:host([size=\"x-small\"])>div>.header p.body-3{padding:calc(var(--space-unit) * 0.5) 0}:host>div>.header:hover{outline:var(--border-size-medium) solid var(--gray700);outline-offset:-2px}:host>div.open>div.header:focus:focus-visible{box-shadow:none}:host>div>div.header:focus:focus-visible{box-shadow:var(--shadow-focus-primary);outline:none}:host>div>.header>p.body-3{padding:var(--space-unit) 0;margin:0;color:var(--text-grey-800)}:host>div>.header>p.body-3>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>.header>z-icon.small,:host>div>.header>z-icon.x-small{--z-icon-width:16px;--z-icon-height:16px}:host>div.open>.header{border:var(--border-size-small) solid var(--blue500);border-radius:var(--border-radius-small) var(--border-radius-small) 0 0}:host>div.disabled{pointer-events:none}:host>div.disabled .header{border-color:var(--color-disabled01);fill:var(--color-disabled01)}:host>div.disabled .header>p.body-3{color:var(--text-grey-700)}:host>div.disabled .header>z-icon:last-child{fill:var(--color-disabled01)}:host>div.open>.header>z-icon{fill:var(--text-grey-800);transform:rotate(180deg);transition:all 200ms linear}:host>div.open>div.open-combo-data{position:relative;z-index:12;padding:var(--space-unit) calc(var(--space-unit) * 2);border:var(--border-size-small) solid var(--gray200);border-top:0;background-color:var(--bg-white);border-radius:0}:host>div.open>div.open-combo-data>div{overflow:auto;max-height:235px;padding:0;scrollbar-color:var(--myz-blue) var(--gray200);scrollbar-width:thin}:host>div.open>div.open-combo-data>z-input{width:100%;margin-bottom:calc(var(--space-unit) * 2)}:host>div.open>div.open-combo-data>div>ul{max-height:235px;padding:0 3px;margin:0}::-webkit-scrollbar{width:10px;background:linear-gradient(90deg, var(--bg-white) 2px, var(--bg-grey-200) 4px, var(--bg-white) 8px);border-radius:var(--border-radius)}::-webkit-scrollbar-thumb{width:10px;background-color:var(--myz-blue);border-radius:var(--border-radius)}:host>div.open>z-input{position:relative;z-index:1;width:238px;margin:0 calc(var(--space-unit) * 2);color:var(--myz-blue)}:host>div.open>div.open-combo-data>div.search{overflow:hidden;max-height:auto;margin-top:0;box-shadow:1px 1px 4px 2px rgb(217 222 227 / 50%)}:host>div.open>div.open-combo-data>div.search>ul{overflow:auto;max-height:180px;padding:var(--space-unit) calc(var(--space-unit) * 2);scrollbar-color:var(--myz-blue) var(--bg-grey-200);scrollbar-width:thin}:host>div.open>div.open-combo-data>div.search>div{display:flex;justify-content:center}:host>div.open>div.open-combo-data>div.search>div>a{display:inline-block;height:44px;color:var(--myz-blue);cursor:pointer;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);line-height:44px;text-align:center;text-transform:uppercase}:host>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 2) calc(var(--space-unit) * 0.5);border-bottom:var(--border-size-small) solid var(--gray800);margin-bottom:var(--space-unit);text-align:left}:host([size=\"small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:calc(var(--space-unit) * 1.5) calc(var(--space-unit) * 0.5)}:host([size=\"x-small\"])>div.open>div.open-combo-data>div.check-all-wrapper{padding:var(--space-unit) calc(var(--space-unit) * 0.5)}";
 
-const ZCombobox = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.comboboxChange = index.createEvent(this, "comboboxChange", 7);
-    /** the combobox is disabled */
-    this.disabled = false;
-    /** 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;
-    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
-    this.size = index$1.ControlSize.BIG;
-    this.renderItemsList = []; // used for render only
-    this.itemsList = [];
-    this.inputType = index$1.InputType.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;
-    this.updateRenderItemsList();
-  }
-  watchSearchValue() {
-    this.filterItems(this.searchValue);
-  }
-  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.updateRenderItemsList();
-    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;
-  }
-  updateRenderItemsList() {
-    if (this.searchValue) {
-      this.filterItems(this.searchValue);
-    }
-    else {
-      this.resetRenderItemsList();
-    }
-  }
-  resetRenderItemsList() {
-    const renderItemsList = [];
-    this.itemsList.forEach((item) => {
-      renderItemsList.push(Object.assign({}, item));
-    });
-    this.renderItemsList = renderItemsList;
-  }
-  filterItems(value) {
-    if (!value) {
-      return this.closeFilterItems();
-    }
-    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 (index.h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
-        if (ev.keyCode === index$1.KeyboardKeyCode.SPACE) {
-          ev.preventDefault();
-        }
-      }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, index.h("p", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
-  }
-  renderContent() {
-    if (!this.isopen) {
-      return;
-    }
-    return (index.h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
-  }
-  renderItems() {
-    if (!this.isopen) {
-      return;
-    }
-    return (index.h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
-  }
-  renderItem(item, index$2, length) {
-    return (index.h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index$2 !== length - 1, class: this.size }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
-  }
-  renderList(items) {
-    if (!items) {
-      return;
-    }
-    if (!items.length && this.searchValue) {
-      return this.renderNoSearchResults();
-    }
-    if (this.hasgroupitems) {
-      return this.renderGroups(this.itemsList);
-    }
-    return (index.h("ul", null, items.map((item, i) => {
-      return this.renderItem(item, i, items.length);
-    })));
-  }
-  renderGroups(items) {
-    const newData = items.reduce((group, item, index) => {
-      var _a;
-      const { category } = item;
-      const zListItem = this.renderItem(item, index, items.length);
-      group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
-      group[category].push(zListItem);
-      return group;
-    }, {});
-    const listGroups = Object.entries(newData).map(([key, value]) => {
-      return (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
-    });
-    return index.h("ul", null, listGroups);
-  }
-  renderNoSearchResults() {
-    return (index.h("ul", null, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
-  }
-  renderCloseButton() {
-    return (index.h("div", null, index.h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
-  }
-  renderSearchInput() {
-    if (!this.isopen) {
-      return;
-    }
-    return (index.h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
-        if (e.detail.keycode === 27) {
-          return this.closeFilterItems();
-        }
-        this.searchValue = e.detail.value;
-      } }));
-  }
-  renderCheckAll() {
-    if (this.searchValue) {
-      return;
-    }
-    const allChecked = this.selectedCounter === this.itemsList.length;
-    return (index.h("div", { class: "check-all-wrapper" }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
-  }
-  render() {
-    return (index.h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
-  }
-  static get watchers() { return {
-    "items": ["watchItems"],
-    "searchValue": ["watchSearchValue"]
-  }; }
-};
+const ZCombobox = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.comboboxChange = index.createEvent(this, "comboboxChange", 7);
+    /** the combobox is disabled */
+    this.disabled = false;
+    /** 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;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = index$1.ControlSize.BIG;
+    this.renderItemsList = []; // used for render only
+    this.itemsList = [];
+    this.inputType = index$1.InputType.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;
+    this.updateRenderItemsList();
+  }
+  watchSearchValue() {
+    this.filterItems(this.searchValue);
+  }
+  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.updateRenderItemsList();
+    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;
+  }
+  updateRenderItemsList() {
+    if (this.searchValue) {
+      this.filterItems(this.searchValue);
+    }
+    else {
+      this.resetRenderItemsList();
+    }
+  }
+  resetRenderItemsList() {
+    const renderItemsList = [];
+    this.itemsList.forEach((item) => {
+      renderItemsList.push(Object.assign({}, item));
+    });
+    this.renderItemsList = renderItemsList;
+  }
+  filterItems(value) {
+    if (!value) {
+      return this.closeFilterItems();
+    }
+    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 (index.h("div", { class: "header", onClick: () => this.toggleComboBox(), onKeyDown: (ev) => {
+        if (ev.keyCode === index$1.KeyboardKeyCode.SPACE) {
+          ev.preventDefault();
+        }
+      }, onKeyUp: (ev) => utils.handleKeyboardSubmit(ev, this.toggleComboBox), role: "button", tabindex: 0 }, index.h("p", { class: "body-3" }, this.label, index.h("span", null, this.selectedCounter > 0 && ` (${this.selectedCounter})`)), index.h("z-icon", { name: "caret-down", class: this.size })));
+  }
+  renderContent() {
+    if (!this.isopen) {
+      return;
+    }
+    return (index.h("div", { class: "open-combo-data" }, this.hassearch && this.renderSearchInput(), this.hascheckall && this.renderCheckAll(), this.renderItems()));
+  }
+  renderItems() {
+    if (!this.isopen) {
+      return;
+    }
+    return (index.h("div", { class: this.searchValue && "search", tabindex: -1 }, this.renderList(this.renderItemsList), this.searchValue && this.renderCloseButton()));
+  }
+  renderItem(item, index$2, length) {
+    return (index.h("z-myz-list-item", { id: item.id, listitemid: item.id, action: `combo-li-${this.inputid}`, underlined: index$2 !== length - 1, class: this.size }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: item.checked, htmlid: `combo-checkbox-${this.inputid}-${item.id}`, label: item.name, disabled: !item.checked && this.maxcheckableitems && this.maxcheckableitems === this.selectedCounter, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
+  }
+  renderList(items) {
+    if (!items) {
+      return;
+    }
+    if (!items.length && this.searchValue) {
+      return this.renderNoSearchResults();
+    }
+    if (this.hasgroupitems) {
+      return this.renderGroups(this.itemsList);
+    }
+    return (index.h("ul", null, items.map((item, i) => {
+      return this.renderItem(item, i, items.length);
+    })));
+  }
+  renderGroups(items) {
+    const newData = items.reduce((group, item, index) => {
+      var _a;
+      const { category } = item;
+      const zListItem = this.renderItem(item, index, items.length);
+      group[category] = (_a = group[category]) !== null && _a !== void 0 ? _a : [];
+      group[category].push(zListItem);
+      return group;
+    }, {});
+    const listGroups = Object.entries(newData).map(([key, value]) => {
+      return (index.h("z-list-group", { "divider-type": index$1.ListDividerType.ELEMENT }, index.h("span", { class: "body-3-sb z-list-group-title", slot: "header-title" }, key), value.map((item) => item)));
+    });
+    return index.h("ul", null, listGroups);
+  }
+  renderNoSearchResults() {
+    return (index.h("ul", null, index.h("z-myz-list-item", { id: "no-results", text: this.noresultslabel, listitemid: "no-results", icon: "multiply-circle", class: this.size })));
+  }
+  renderCloseButton() {
+    return (index.h("div", null, index.h("a", { onClick: () => this.closeFilterItems(), onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.closeFilterItems), role: "button", tabindex: 0 }, this.closesearchtext)));
+  }
+  renderSearchInput() {
+    if (!this.isopen) {
+      return;
+    }
+    return (index.h("z-input", { htmlid: `${this.inputid}_search`, label: this.searchlabel, placeholder: this.searchplaceholder, htmltitle: this.searchtitle, type: this.inputType, value: this.searchValue, message: false, size: this.size, onInputChange: (e) => {
+        if (e.detail.keycode === 27) {
+          return this.closeFilterItems();
+        }
+        this.searchValue = e.detail.value;
+      } }));
+  }
+  renderCheckAll() {
+    if (this.searchValue) {
+      return;
+    }
+    const allChecked = this.selectedCounter === this.itemsList.length;
+    return (index.h("div", { class: "check-all-wrapper" }, index.h("z-input", { type: index$1.InputType.CHECKBOX, checked: allChecked, htmlid: `combo-checkbox-${this.inputid}-check-all`, label: allChecked ? this.uncheckalltext : this.checkalltext, disabled: this.maxcheckableitems && this.maxcheckableitems < this.itemsList.length, size: this.size === index$1.ControlSize.X_SMALL ? index$1.ControlSize.SMALL : this.size })));
+  }
+  render() {
+    return (index.h("div", { "data-action": `combo-${this.inputid}`, class: { open: this.isopen, fixed: this.isfixed, disabled: this.disabled }, id: this.inputid }, this.renderHeader(), !this.disabled && this.renderContent()));
+  }
+  static get watchers() { return {
+    "items": ["watchItems"],
+    "searchValue": ["watchSearchValue"]
+  }; }
+};
 ZCombobox.style = stylesCss;
 
 exports.z_combobox = ZCombobox;

package/dist/cjs/z-contextual-menu.cjs.entry.js

@@ -3,44 +3,44 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-28bcd719.js');
+const index$1 = require('./index-419ee40f.js');
 
 const stylesCss = ":host{position:relative;display:flex;align-items:center;justify-content:center;font-family:var(--font-family-sans);font-weight:var(--font-rg)}button{width:100%;height:100%;padding:0;border:none;background:transparent;cursor:pointer}z-popover{overflow:hidden}.popover-content-container{position:relative;min-width:112px;max-width:280px;background-color:var(--color-surface02);box-shadow:var(--shadow-2);white-space:nowrap}.element-container:hover{color:var(--color-hover-primary);fill:var(--color-hover-primary)}.element-text{overflow:hidden;font-size:14px;text-overflow:ellipsis}.element-container,.disabled-element-container{display:flex;min-height:calc(var(--space-unit) * 4);box-sizing:border-box;align-items:center;padding:calc(var(--space-unit) / 2) var(--space-unit);fill:var(--color-disabled03);gap:var(--space-unit)}.element-container{fill:var(--color-primary01)}.element-icon{display:flex}";
 
-const ZContextualMenu = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    this.clickContextualMenu = index.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 = index$1.PopoverPosition.BOTTOM_RIGHT;
-  }
-  componentWillRender() {
-    if (this.elements) {
-      this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
-    }
-  }
-  componentDidLoad() {
-    this.popoverEl.bindTo = this.triggerButton;
-  }
-  showIcon() {
-    return !this.jsonElements.some((element) => !element.icon);
-  }
-  togglePopover() {
-    if (!this.popoverEl.open) {
-      this.popoverEl.open = true;
-    }
-  }
-  render() {
-    var _a, _b;
-    return (index.h(index.Host, null, index.h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, index.h("z-icon", { name: "contextual-menu", fill: this.color })), index.h("z-popover", { ref: (el) => (this.popoverEl = el), position: this.popoverPosition }, index.h("div", { class: "popover-content-container" }, index.h("z-list", null, index.h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index$1) => (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$1, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, index.h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (index.h("div", { class: "element-icon" }, index.h("z-icon", { name: element.icon, width: 16, height: 16 }))), index.h("div", { class: "element-text" }, index.h("span", null, element.text))))))))))));
-  }
-};
+const ZContextualMenu = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.clickContextualMenu = index.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 = index$1.PopoverPosition.BOTTOM_RIGHT;
+  }
+  componentWillRender() {
+    if (this.elements) {
+      this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
+    }
+  }
+  componentDidLoad() {
+    this.popoverEl.bindTo = this.triggerButton;
+  }
+  showIcon() {
+    return !this.jsonElements.some((element) => !element.icon);
+  }
+  togglePopover() {
+    if (!this.popoverEl.open) {
+      this.popoverEl.open = true;
+    }
+  }
+  render() {
+    var _a, _b;
+    return (index.h(index.Host, null, index.h("button", { ref: (el) => (this.triggerButton = el), "aria-label": ((_a = this.popoverEl) === null || _a === void 0 ? void 0 : _a.open) ? "chiudi menu contestuale" : "apri menu contestuale", onClick: () => this.togglePopover() }, index.h("z-icon", { name: "contextual-menu", fill: this.color })), index.h("z-popover", { ref: (el) => (this.popoverEl = el), position: this.popoverPosition }, index.h("div", { class: "popover-content-container" }, index.h("z-list", null, index.h("z-list-group", { "divider-type": "element" }, (_b = this.jsonElements) === null || _b === void 0 ? void 0 : _b.map((element, index$1) => (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$1, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) }, index.h("div", { class: element.disabled ? "disabled-element-container" : "element-container" }, this.showIcon() && (index.h("div", { class: "element-icon" }, index.h("z-icon", { name: element.icon, width: 16, height: 16 }))), index.h("div", { class: "element-text" }, index.h("span", null, element.text))))))))))));
+  }
+};
 ZContextualMenu.style = stylesCss;
 
 exports.z_contextual_menu = ZContextualMenu;

package/dist/cjs/z-cover-hero.cjs.entry.js

@@ -3,55 +3,55 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-28bcd719.js');
+const index$1 = require('./index-419ee40f.js');
 
 const stylesCss = ":host{--cover-hero-overlay:linear-gradient(270deg, #0000 0%, #000000e6 100%);--cover-hero-text-color:var(--color-text-inverse);display:block;overflow:hidden}:host,*{box-sizing:border-box}:host .main-container{position:relative;width:100%;align-items:baseline}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .main-container .cover-container{position:relative;width:100%;padding-top:calc(100% / (var(--cover-hero-aspect-ratio, var(--image-aspect-ratio, 16/9))));background-color:var(--gray600)}::slotted([slot=\"cover\"]){position:absolute;display:block;width:100%;height:100%;inset:0;object-fit:cover;object-position:top center}::slotted(z-info-reveal){position:absolute;z-index:1;right:var(--grid-margin);bottom:var(--grid-margin)}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container{height:100%}:host([variant=\"overlay\"]:not([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .cover-container{position:absolute;z-index:-1;height:100%;padding:0}:host([variant=\"overlay\"]) .main-container .cover-container::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:\"\"}:host([variant=\"overlay\"]:is([preserve-aspect-ratio=\"\"],[preserve-aspect-ratio=\"true\"])) .main-container .content-container{position:absolute;inset:0}:host([variant=\"overlay\"]) .main-container .content-container{height:100%;padding:var(--grid-margin)}:host([variant=\"stacked\"]){--cover-hero-text-color:var(--color-text01)}:host([variant=\"stacked\"]) .content-container ::slotted(*){padding:var(--grid-margin) 0}";
 
-const ZCoverHero = class {
-  constructor(hostRef) {
-    index.registerInstance(this, hostRef);
-    /**
-     * Cover hero variant. Can be `OVERLAY` or `STACKED`.
-     */
-    this.variant = index$1.CoverHeroVariant.OVERLAY;
-    /**
-     * Vertical content position (for `STACKED` variant).
-     */
-    this.contentPosition = index$1.CoverHeroContentPosition.TOP;
-    /**
-     * Whether to keep the image aspect ratio.
-     * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
-     * instead, the height of the component follows the content's one.
-     * Note: it may be necessary to set a min and/or max height to the component.
-     */
-    this.preserveAspectRatio = true;
-  }
-  /**
-   * Store the intrinsic aspect ratio of the slotted image when loaded,
-   * to have a default when `--cover-hero-aspect-ratio` is not set.
-   * @param target The event target
-   */
-  onImgLoad({ target }) {
-    if (target instanceof Image && target.closest("[slot=cover]")) {
-      const ratio = target.naturalWidth / target.naturalHeight;
-      this.host.style.setProperty("--image-aspect-ratio", ratio.toString());
-    }
-  }
-  /**
-   * Template for the content.
-   */
-  renderContent() {
-    return (index.h("div", { class: "content-container" }, index.h("slot", { name: "content" })));
-  }
-  render() {
-    return (index.h(index.Host, null, this.variant === index$1.CoverHeroVariant.STACKED &&
-      this.contentPosition === index$1.CoverHeroContentPosition.TOP &&
-      this.renderContent(), index.h("div", { class: "main-container" }, index.h("div", { class: "cover-container" }, index.h("slot", { name: "cover" })), index.h("slot", { name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
-      this.contentPosition === index$1.CoverHeroContentPosition.BOTTOM &&
-      this.renderContent()));
-  }
-  get host() { return index.getElement(this); }
-};
+const ZCoverHero = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    /**
+     * Cover hero variant. Can be `OVERLAY` or `STACKED`.
+     */
+    this.variant = index$1.CoverHeroVariant.OVERLAY;
+    /**
+     * Vertical content position (for `STACKED` variant).
+     */
+    this.contentPosition = index$1.CoverHeroContentPosition.TOP;
+    /**
+     * Whether to keep the image aspect ratio.
+     * If set to `false`, the cssprop `--cover-hero-aspect-ratio` will not affect the component's size;
+     * instead, the height of the component follows the content's one.
+     * Note: it may be necessary to set a min and/or max height to the component.
+     */
+    this.preserveAspectRatio = true;
+  }
+  /**
+   * Store the intrinsic aspect ratio of the slotted image when loaded,
+   * to have a default when `--cover-hero-aspect-ratio` is not set.
+   * @param target The event target
+   */
+  onImgLoad({ target }) {
+    if (target instanceof Image && target.closest("[slot=cover]")) {
+      const ratio = target.naturalWidth / target.naturalHeight;
+      this.host.style.setProperty("--image-aspect-ratio", ratio.toString());
+    }
+  }
+  /**
+   * Template for the content.
+   */
+  renderContent() {
+    return (index.h("div", { class: "content-container" }, index.h("slot", { name: "content" })));
+  }
+  render() {
+    return (index.h(index.Host, null, this.variant === index$1.CoverHeroVariant.STACKED &&
+      this.contentPosition === index$1.CoverHeroContentPosition.TOP &&
+      this.renderContent(), index.h("div", { class: "main-container" }, index.h("div", { class: "cover-container" }, index.h("slot", { name: "cover" })), index.h("slot", { name: "info-reveal" }), this.variant === index$1.CoverHeroVariant.OVERLAY && this.renderContent()), this.variant === index$1.CoverHeroVariant.STACKED &&
+      this.contentPosition === index$1.CoverHeroContentPosition.BOTTOM &&
+      this.renderContent()));
+  }
+  get host() { return index.getElement(this); }
+};
 ZCoverHero.style = stylesCss;
 
 exports.z_cover_hero = ZCoverHero;