@zanichelli/albe-web-components 6.1.0-a1 → 6.1.0

package/dist/cjs/z-app-switcher_9.cjs.entry.js

@@ -3,10 +3,11 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 const icons = require('./icons-460f0f1e.js');
-const utils = require('./utils-7c92be74.js');
-const utils$1 = require('./utils-f681590c.js');
+const utils = require('./utils-ce225fb3.js');
+const utils$1 = require('./utils-ebe45309.js');
 require('./_commonjsHelpers-537d719a.js');
 
 const stylesCss$8 = ":host{font-family:var(--dashboard-font);font-weight:var(--font-rg)}button{display:flex;align-content:center;justify-content:center;padding:0;border:none;background-color:transparent}button>z-icon{color:var(--bg-white);fill:currentcolor}button>z-icon.light{color:var(--bg-grey-900);fill:currentcolor}";
@@ -15,7 +16,8 @@ const ZAppSwitcher = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.appButtonClick = index.createEvent(this, "appButtonClick", 7);
-    this.theme = "dark" /* ThemeVariant.DARK */;
+    /** theme variant, default 'dark' */
+    this.theme = index$1.ThemeVariant.DARK;
     this.isopen = false;
     this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
   }
@@ -34,13 +36,9 @@ const stylesCss$7 = ":host{position:sticky;z-index:99;top:0;display:block;height
 const ZAppTopbar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** theme variant, default 'dark' */
+    this.theme = index$1.ThemeVariant.DARK;
     this.topbarLinks = [];
-    this.theme = "dark" /* ThemeVariant.DARK */;
-    this.contentMaxWidth = undefined;
-    this.topbarContent = undefined;
-    this.logoLink = undefined;
-    this.showAppSwitcher = undefined;
-    this.isMobile = undefined;
   }
   handleResize() {
     this.isMobile = window.innerWidth <= breakpoints.mobileBreakpoint;
@@ -54,13 +52,13 @@ const ZAppTopbar = class {
     }
   }
   renderTopbarLinks() {
-    return this.topbarLinks.map((link) => (index.h("z-link", { htmlid: link.id, textcolor: this.theme === "light" /* ThemeVariant.LIGHT */ ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
+    return this.topbarLinks.map((link) => (index.h("z-link", { htmlid: link.id, textcolor: this.theme === index$1.ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
   }
   render() {
     return (index.h(index.Host, { class: {
         [this.theme]: true,
         "limited-width": !!this.contentMaxWidth,
-      } }, index.h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, index.h("div", { id: "left-panel", class: "content-panel" }, index.h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), index.h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && index.h("z-app-switcher", { theme: this.theme }), index.h("div", { id: "divider-container" }, index.h("z-divider", { orientation: "vertical" /* DividerOrientation.VERTICAL */, color: this.theme === "light" /* ThemeVariant.LIGHT */ ? "gray800" : "color-white" })), index.h("slot", { name: "login" })))));
+      } }, index.h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, index.h("div", { id: "left-panel", class: "content-panel" }, index.h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), index.h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && index.h("z-app-switcher", { theme: this.theme }), index.h("div", { id: "divider-container" }, index.h("z-divider", { orientation: index$1.DividerOrientation.VERTICAL, color: this.theme === index$1.ThemeVariant.LIGHT ? "gray800" : "color-white" })), index.h("slot", { name: "login" })))));
   }
 };
 ZAppTopbar.style = stylesCss$7;
@@ -70,9 +68,12 @@ const stylesCss$6 = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-h
 const ZDivider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.size = "small" /* DividerSize.SMALL */;
+    /** [optional] Divider size */
+    this.size = index$1.DividerSize.SMALL;
+    /** [optional] Divider color */
     this.color = "gray200";
-    this.orientation = "horizontal" /* DividerOrientation.HORIZONTAL */;
+    /** [optional] Divider orintation */
+    this.orientation = index$1.DividerOrientation.HORIZONTAL;
   }
   render() {
     return (index.h(index.Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
@@ -85,11 +86,6 @@ const stylesCss$5 = ":host{margin-right:var(--z-icon-right-margin, 0);margin-lef
 const ZIcon = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.name = undefined;
-    this.height = undefined;
-    this.width = undefined;
-    this.iconid = undefined;
-    this.fill = undefined;
   }
   selectPathOrPolygon(iconValue) {
     if (iconValue === null || iconValue === void 0 ? void 0 : iconValue.startsWith("M")) {
@@ -112,37 +108,33 @@ const ZInput = class {
     this.startTyping = index.createEvent(this, "startTyping", 7);
     this.stopTyping = index.createEvent(this, "stopTyping", 7);
     this.inputCheck = index.createEvent(this, "inputCheck", 7);
-    this.typingtimeout = 300;
+    /** the id of the input element */
     this.htmlid = `id-${utils.randomId()}`;
-    this.type = undefined;
-    this.name = undefined;
-    this.label = undefined;
+    /** the input aria-label */
     this.ariaLabel = "";
-    this.value = undefined;
+    /** the input is disabled */
     this.disabled = false;
+    /** the input is readonly */
     this.readonly = false;
+    /** the input is required (optional): available for text, password, number, email, textarea, checkbox */
     this.required = false;
+    /** checked: available for checkbox, radio */
     this.checked = false;
-    this.placeholder = undefined;
-    this.htmltitle = undefined;
-    this.status = undefined;
+    /** input helper message (optional): available for text, password, number, email, textarea - if set to `false` message won't be displayed */
     this.message = true;
-    this.labelPosition = "right" /* LabelPosition.RIGHT */;
-    this.autocomplete = undefined;
+    /** the input label position: available for checkbox, radio */
+    this.labelPosition = index$1.LabelPosition.RIGHT;
+    /** render clear icon when typing (optional): available for text */
     this.hasclearicon = true;
-    this.icon = undefined;
-    this.min = undefined;
-    this.max = undefined;
-    this.step = undefined;
-    this.pattern = undefined;
     this.isTyping = false;
     this.passwordHidden = true;
+    this.typingtimeout = 300;
   }
   inputCheckListener(e) {
     const data = e.detail;
     switch (this.type) {
-      case "radio" /* InputType.RADIO */:
-        if (data.type === "radio" /* InputType.RADIO */ && data.name === this.name && data.id !== this.htmlid) {
+      case index$1.InputType.RADIO:
+        if (data.type === index$1.InputType.RADIO && data.name === this.name && data.id !== this.htmlid) {
           this.checked = false;
         }
         break;
@@ -151,8 +143,8 @@ const ZInput = class {
   /** get checked status */
   async isChecked() {
     switch (this.type) {
-      case "checkbox" /* InputType.CHECKBOX */:
-      case "radio" /* InputType.RADIO */:
+      case index$1.InputType.CHECKBOX:
+      case index$1.InputType.RADIO:
         return this.checked;
       default:
         console.warn("`isChecked` method is only available for type `checkbox` and `radio`");
@@ -164,7 +156,7 @@ const ZInput = class {
       this.emitStartTyping();
     }
     let validity;
-    if (this.type === "textarea" /* InputType.TEXTAREA */) {
+    if (this.type === index$1.InputType.TEXTAREA) {
       validity = this.getValidity("textarea");
     }
     else {
@@ -222,7 +214,7 @@ const ZInput = class {
     };
   }
   getNumberAttributes(type) {
-    if (type != "number" /* InputType.NUMBER */) {
+    if (type != index$1.InputType.NUMBER) {
       return;
     }
     return {
@@ -232,27 +224,27 @@ const ZInput = class {
     };
   }
   getPatternAttribute(type) {
-    if (type != "password" /* InputType.PASSWORD */ &&
-      type != "text" /* InputType.TEXT */ &&
-      type != "tel" /* InputType.TEL */ &&
-      type != "search" /* InputType.SEARCH */ &&
-      type != "url" /* InputType.URL */ &&
-      type != "email" /* InputType.EMAIL */) {
+    if (type != index$1.InputType.PASSWORD &&
+      type != index$1.InputType.TEXT &&
+      type != index$1.InputType.TEL &&
+      type != index$1.InputType.SEARCH &&
+      type != index$1.InputType.URL &&
+      type != index$1.InputType.EMAIL) {
       return;
     }
     return {
       pattern: this.pattern,
     };
   }
-  renderInputText(type = "text" /* InputType.TEXT */) {
+  renderInputText(type = index$1.InputType.TEXT) {
     const attr = Object.assign(Object.assign(Object.assign({}, this.getTextAttributes()), this.getNumberAttributes(type)), this.getPatternAttribute(type));
-    if (this.icon || type === "password" /* InputType.PASSWORD */) {
+    if (this.icon || type === index$1.InputType.PASSWORD) {
       Object.assign(attr.class, { "has-icon": true });
     }
-    if (this.hasclearicon && type != "number" /* InputType.NUMBER */) {
+    if (this.hasclearicon && type != index$1.InputType.NUMBER) {
       Object.assign(attr.class, { "has-clear-icon": true });
     }
-    return (index.h("div", { class: "text-wrapper" }, this.renderLabel(), index.h("div", null, index.h("input", Object.assign({ type: type === "password" /* InputType.PASSWORD */ && !this.passwordHidden ? "text" /* InputType.TEXT */ : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
+    return (index.h("div", { class: "text-wrapper" }, this.renderLabel(), index.h("div", null, index.h("input", Object.assign({ type: type === index$1.InputType.PASSWORD && !this.passwordHidden ? index$1.InputType.TEXT : type }, attr, { "aria-label": this.ariaLabel || this.label })), this.renderIcons()), this.renderMessage()));
   }
   renderLabel() {
     if (!this.label) {
@@ -264,7 +256,7 @@ const ZInput = class {
     return (index.h("span", { class: "icons-wrapper" }, this.renderResetIcon(), this.renderIcon()));
   }
   renderIcon() {
-    if (this.type === "password" /* InputType.PASSWORD */) {
+    if (this.type === index$1.InputType.PASSWORD) {
       return this.renderShowHidePassword();
     }
     if (!this.icon) {
@@ -273,7 +265,7 @@ const ZInput = class {
     return (index.h("button", { type: "button", class: "icon-button input-icon", tabIndex: -1 }, index.h("z-icon", { name: this.icon })));
   }
   renderResetIcon() {
-    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == "number" /* InputType.NUMBER */) {
+    if (!this.hasclearicon || !this.value || this.disabled || this.readonly || this.type == index$1.InputType.NUMBER) {
       return;
     }
     return (index.h("button", { type: "button", class: "icon-button reset-icon", "aria-label": "cancella il contenuto dell'input", onClick: () => this.emitInputChange("") }, index.h("z-icon", { name: "multiply" })));
@@ -302,8 +294,8 @@ const ZInput = class {
   renderCheckbox() {
     return (index.h("div", { class: "checkbox-wrapper" }, index.h("input", { id: this.htmlid, type: "checkbox", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, required: this.required, onChange: this.handleCheck.bind(this), value: this.value }), index.h("label", { htmlFor: this.htmlid, class: {
         "checkbox-label": true,
-        "after": this.labelPosition === "right" /* LabelPosition.RIGHT */,
-        "before": this.labelPosition === "left" /* LabelPosition.LEFT */,
+        "after": this.labelPosition === index$1.LabelPosition.RIGHT,
+        "before": this.labelPosition === index$1.LabelPosition.LEFT,
       } }, index.h("z-icon", { name: this.checked ? "checkbox-checked" : "checkbox", "aria-hidden": "true" }), this.label && index.h("span", { innerHTML: this.label }))));
   }
   /* END checkbox */
@@ -311,18 +303,18 @@ const ZInput = class {
   renderRadio() {
     return (index.h("div", { class: "radio-wrapper" }, index.h("input", { id: this.htmlid, type: "radio", name: this.name, checked: this.checked, disabled: this.disabled, readonly: this.readonly, onChange: this.handleCheck.bind(this), value: this.value }), index.h("label", { htmlFor: this.htmlid, class: {
         "radio-label": true,
-        "after": this.labelPosition === "right" /* LabelPosition.RIGHT */,
-        "before": this.labelPosition === "left" /* LabelPosition.LEFT */,
+        "after": this.labelPosition === index$1.LabelPosition.RIGHT,
+        "before": this.labelPosition === index$1.LabelPosition.LEFT,
       } }, index.h("z-icon", { name: this.checked ? "radio-button-checked" : "radio-button", "aria-hidden": "true" }), this.label && index.h("span", { innerHTML: this.label }))));
   }
   /* END radio */
   render() {
     switch (this.type) {
-      case "textarea" /* InputType.TEXTAREA */:
+      case index$1.InputType.TEXTAREA:
         return this.renderTextarea();
-      case "checkbox" /* InputType.CHECKBOX */:
+      case index$1.InputType.CHECKBOX:
         return this.renderCheckbox();
-      case "radio" /* InputType.RADIO */:
+      case index$1.InputType.RADIO:
         return this.renderRadio();
       default:
         return this.renderInputText(this.type);
@@ -342,8 +334,6 @@ const ZInputMessage = class {
       error: "multiply-circled",
       warning: "exclamation-circle",
     };
-    this.message = undefined;
-    this.status = undefined;
   }
   render() {
     return (index.h(index.Host, { role: "alert", "aria-label": this.message, tabindex: this.message ? 0 : -1 }, this.statusIcons[this.status] && this.message && index.h("z-icon", { name: this.statusIcons[this.status] }), index.h("span", { innerHTML: this.message })));
@@ -357,17 +347,23 @@ const ZLink = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.zLinkClick = index.createEvent(this, "zLinkClick", 7);
-    this.htmlid = undefined;
-    this.href = undefined;
+    /** link target (optional) */
     this.target = "_self";
+    /** tabindex link attribute (optional) */
     this.htmltabindex = 0;
+    /** disable link flag (optional) */
     this.isdisabled = false;
+    /** active link flag (optional) */
     this.isactive = false;
+    /** white variant flag (optional) */
     this.iswhite = false;
+    /** link text variant (optional) */
     this.textcolor = "primary";
-    this.icon = undefined;
+    /** big link version */
     this.big = false;
+    /** link icon position (optional) */
     this.iconposition = "left";
+    /** draw underline on text (optional) */
     this.underline = false;
     this.iconSize = 18;
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
@@ -417,12 +413,6 @@ const stylesCss$1 = ":host{display:inline-block;width:255px;height:64px;vertical
 const ZLogo = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.width = undefined;
-    this.height = undefined;
-    this.imageAlt = undefined;
-    this.link = undefined;
-    this.targetBlank = undefined;
-    this.mobileLogo = undefined;
   }
   render() {
     const style = {};
@@ -443,13 +433,9 @@ const ZRangePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dateSelect = index.createEvent(this, "dateSelect", 7);
-    this.rangePickerId = undefined;
-    this.firstAriaLabel = undefined;
-    this.firstLabel = undefined;
-    this.secondAriaLabel = undefined;
-    this.secondLabel = undefined;
-    this.mode = "date" /* ZRangePickerMode.DATE */;
-    this.flatpickrPosition = "bottom" /* ZDatePickerPosition.BOTTOM */;
+    /** [Optional] datepicker mode: date or datetime */
+    this.mode = index$1.ZRangePickerMode.DATE;
+    this.flatpickrPosition = index$1.ZDatePickerPosition.BOTTOM;
     this.activeInput = "start-input";
     this.firstInputError = false;
     this.lastInputError = false;
@@ -496,11 +482,11 @@ const ZRangePicker = class {
   }
   setupPickers() {
     const config = {
-      enableTime: this.mode === "date-time" /* ZRangePickerMode.DATE_TIME */,
+      enableTime: this.mode === index$1.ZRangePickerMode.DATE_TIME,
       locale: utils$1.it.Italian,
       allowInput: true,
       wrap: true,
-      dateFormat: this.mode === "date-time" /* ZRangePickerMode.DATE_TIME */ ? "d-m-Y - H:i" : "d-m-Y",
+      dateFormat: this.mode === index$1.ZRangePickerMode.DATE_TIME ? "d-m-Y - H:i" : "d-m-Y",
       ariaDateFormat: "d F Y",
       minuteIncrement: 1,
       // eslint-disable-next-line @typescript-eslint/naming-convention
@@ -589,7 +575,7 @@ const ZRangePicker = class {
     utils$1.setAriaOptions(this.element, this.mode);
   }
   formatDate(date) {
-    if (this.mode === "date" /* ZRangePickerMode.DATE */) {
+    if (this.mode === index$1.ZRangePickerMode.DATE) {
       return `${utils$1.flatpickr.formatDate(date, "d-m-Y")}`;
     }
     return `${utils$1.flatpickr.formatDate(date, "d-m-Y - H:i")}`;
@@ -685,9 +671,9 @@ const ZRangePicker = class {
   onStopTyping(value) {
     const text = value.detail.value.replace("/", "-");
     const englishData = text.split("-");
-    const time = this.mode === "date-time" /* ZRangePickerMode.DATE_TIME */ ? `T${englishData[3]}:00` : "";
+    const time = this.mode === index$1.ZRangePickerMode.DATE_TIME ? `T${englishData[3]}:00` : "";
     const englishParsedData = `${englishData[2]}-${englishData[1]}-${englishData[0]}${time}`.split(" ").join("");
-    const isValidDate = utils$1.validateDate(text, this.mode === "date-time" /* ZRangePickerMode.DATE_TIME */);
+    const isValidDate = utils$1.validateDate(text, this.mode === index$1.ZRangePickerMode.DATE_TIME);
     const date = Date.parse(englishParsedData).toString();
     if (this.activeInput === "start-input") {
       if (text === "") {
@@ -749,7 +735,7 @@ const ZRangePicker = class {
   }
   render() {
     const zInputProps = {
-      type: "text" /* InputType.TEXT */,
+      type: index$1.InputType.TEXT,
       icon: "event",
       tabindex: "0",
       message: false,
@@ -761,9 +747,9 @@ const ZRangePicker = class {
         [this.mode]: true,
         [this.activeInput]: true,
         [this.flatpickrPosition]: true,
-      } }, index.h("div", { class: `${this.rangePickerId}-1-wrapper` }, index.h("div", { class: `${this.rangePickerId}-1-container` }, index.h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && "error" /* InputStatus.ERROR */, onStartTyping: () => {
+      } }, index.h("div", { class: `${this.rangePickerId}-1-wrapper` }, index.h("div", { class: `${this.rangePickerId}-1-container` }, index.h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `start-input ${this.rangePickerId}-1`, ariaLabel: this.firstAriaLabel, label: this.firstLabel, status: this.firstInputError && index$1.InputStatus.ERROR, onStartTyping: () => {
         this.firstInputError = false;
-      } })))), index.h("div", { class: `${this.rangePickerId}-2-wrapper` }, index.h("div", { class: `${this.rangePickerId}-2-container` }, index.h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && "error" /* InputStatus.ERROR */, onStartTyping: () => {
+      } })))), index.h("div", { class: `${this.rangePickerId}-2-wrapper` }, index.h("div", { class: `${this.rangePickerId}-2-container` }, index.h("z-input", Object.assign({}, zInputProps, { "data-input": "data-input", class: `end-input ${this.rangePickerId}-2`, ariaLabel: this.secondAriaLabel, label: this.secondLabel, status: this.lastInputError && index$1.InputStatus.ERROR, onStartTyping: () => {
         this.lastInputError = false;
       } }))))));
   }

package/dist/cjs/z-aria-alert.cjs.entry.js

@@ -3,11 +3,13 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const ZAriaAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.mode = "polite" /* ZAriaAlertMode.POLITE */;
+    /** Aria live mode */
+    this.mode = index$1.ZAriaAlertMode.POLITE;
   }
   render() {
     return (index.h(index.Host, { "aria-live": this.mode, "aria-atomic": "true", "aria-relevant": "additions" }, index.h("slot", null)));

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ":host{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--bg-grey-700);border-radius:50%;font-family:var(--font-family-sans);text-transform:uppercase}:host(.small),:host(.small)>img{width:calc(var(--space-unit) * 3);height:calc(var(--space-unit) * 3)}:host(.medium),:host(.medium)>img{width:calc(var(--space-unit) * 4);height:calc(var(--space-unit) * 4)}:host(.large),:host(.large)>img{width:calc(var(--space-unit) * 5);height:calc(var(--space-unit) * 5)}:host>img{object-fit:cover}";
 
@@ -10,23 +11,24 @@ const ZAvatar = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     var _a, _b;
-    this.size = "medium" /* AvatarSize.MEDIUM */;
-    this.text = undefined;
+    /** [optional] Avatar size */
+    this.size = index$1.AvatarSize.MEDIUM;
+    /** [optional] Avatar text color */
     this.textColor = "text-white";
+    /** [optional] Avatar background color */
     this.backgroundColor = "bg-grey-700";
-    this.image = undefined;
     if (((_a = this.text) === null || _a === void 0 ? void 0 : _a.length) === 0 && ((_b = this.image) === null || _b === void 0 ? void 0 : _b.length) === 0) {
       console.warn("z-avatar must contain at least one prop between text and image");
     }
   }
   getTextSize() {
-    if (this.size === "small" /* AvatarSize.SMALL */) {
+    if (this.size === index$1.AvatarSize.SMALL) {
       return "5";
     }
-    else if (this.size === "medium" /* AvatarSize.MEDIUM */) {
+    else if (this.size === index$1.AvatarSize.MEDIUM) {
       return "4";
     }
-    else if (this.size === "large" /* AvatarSize.LARGE */) {
+    else if (this.size === index$1.AvatarSize.LARGE) {
       return "2";
     }
   }

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

@@ -7,9 +7,8 @@ const index = require('./index-e3299e0a.js');
 const ZBody = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.level = undefined;
+    /** Font weight variant */
     this.variant = "regular";
-    this.component = undefined;
   }
   render() {
     return (index.h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, index.h("slot", null)));
@@ -21,9 +20,8 @@ const stylesCss = ":host>*{margin:0;font-family:var(--dashboard-font)}:host(.reg
 const ZTypography = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.level = undefined;
+    /** Font weight variant */
     this.variant = "regular";
-    this.component = undefined;
   }
   render() {
     const el = document.createElement(this.component || "span");

package/dist/cjs/z-button-deprecated.cjs.entry.js

@@ -3,20 +3,26 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.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){display:inline-flex;width:100%;box-sizing:border-box;flex-direction:row;align-items:center;justify-content:center;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--dashboard-font);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;vertical-align:middle;white-space:nowrap}button.big,:host([size=\"big\"]) ::slotted(button),:host([size=\"big\"]) ::slotted(a){min-width:44px;height:44px}button.small,:host([size=\"small\"]) ::slotted(button),:host([size=\"small\"]) ::slotted(a){min-width:36px;height:36px}button.issmall,:host([issmall]) ::slotted(button),:host([issmall]) ::slotted(a){min-width:36px;height:36px}button.x-small,:host([size=\"x-small\"]) ::slotted(button),:host([size=\"x-small\"]) ::slotted(a){min-width:32px;height: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){border-color:var(--color-primary01);background-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){border-color:var(--color-hover-primary);background-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){border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}button.primary:disabled,:host([variant=\"primary\"]) ::slotted(button:disabled){border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}button.secondary,:host([variant=\"secondary\"]) ::slotted(button),:host([variant=\"secondary\"]) ::slotted(a){border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){button.secondary:hover,:host([variant=\"secondary\"]) ::slotted(button:hover),:host([variant=\"secondary\"]) ::slotted(a:hover){border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}button.secondary:active,:host([variant=\"secondary\"]) ::slotted(button:active),:host([variant=\"secondary\"]) ::slotted(a:active){border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}button.secondary:disabled,:host([variant=\"secondary\"]) ::slotted(button:disabled){border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}button.tertiary,:host([variant=\"tertiary\"]) ::slotted(button),:host([variant=\"tertiary\"]) ::slotted(a){border-color:transparent;background-color:transparent;color:var(--color-primary01)}button.tertiary.has-content{padding:0 var(--space-unit)}@media (hover: hover){button.tertiary:hover,:host([variant=\"tertiary\"]) ::slotted(button:hover),:host([variant=\"tertiary\"]) ::slotted(a:hover){border-color:var(--color-primary03);background-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){border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}button.tertiary:active,:host([variant=\"tertiary\"]) ::slotted(button:active),:host([variant=\"tertiary\"]) ::slotted(a:active){border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}button.tertiary:disabled,:host([variant=\"tertiary\"]) ::slotted(button:disabled){border-color:transparent;background-color:transparent;color:var(--color-disabled02)}button.dark-bg,:host([variant=\"dark-bg\"]) ::slotted(button),:host([variant=\"dark-bg\"]) ::slotted(a){border-color:transparent;background-color:rgb(var(--rgb-white) 0.2);color:var(--color-text04)}button.dark-bg.has-content{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:rgb(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:rgb(var(--rgb-white) 0.3)}button.dark-bg:disabled,:host([variant=\"dark-bg\"]) ::slotted(button:disabled){background-color:rgb(var(--rgb-white) 0.05);color:var(--color-disabled03)}";
 
 const ZButtonDeprecated = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.htmlid = undefined;
-    this.name = undefined;
+    /** HTML button disabled attribute. */
     this.disabled = false;
-    this.type = "button" /* ButtonType.BUTTON */;
-    this.variant = "primary" /* ButtonVariant.PRIMARY */;
-    this.icon = undefined;
-    this.size = "big" /* ButtonSize.BIG */;
+    /** HTML button type attribute. */
+    this.type = index$1.ButtonType.BUTTON;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
+    this.variant = index$1.ButtonVariant.PRIMARY;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = index$1.ButtonSize.BIG;
+    /** Reduce button size (deprecated).
+     * @deprecated Use `size` prop.
+     */
     this.issmall = false;
+    /** Spy to render square button. */
     this.square = false;
   }
   render() {

package/dist/cjs/z-button-filter.cjs.entry.js

@@ -10,10 +10,11 @@ const ZButtonFilter = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.removefilter = index.createEvent(this, "removefilter", 7);
-    this.filtername = undefined;
+    /** disable action on button */
     this.isfixed = false;
+    /** add icon to button */
     this.hasicon = true;
-    this.filterid = undefined;
+    /** reduce button size (optional) */
     this.issmall = false;
     this.handleRemovingFilterClick = this.handleRemovingFilterClick.bind(this);
   }

package/dist/cjs/z-button-sort.cjs.entry.js

@@ -11,13 +11,13 @@ const ZButtonSort = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.buttonSortClick = index.createEvent(this, "buttonSortClick", 7);
-    this.buttonid = undefined;
-    this.label = undefined;
-    this.desclabel = undefined;
-    this.counter = undefined;
+    /** 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;
   }

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

@@ -3,22 +3,23 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ".sc-z-button-h{display:inline-block;--z-icon-width:16px;--z-icon-height:16px;--z-icon-right-margin:0}[disabled].sc-z-button-h:not([disabled=\"false\"]){pointer-events:none}.sc-z-button-h .z-button--container.sc-z-button{display:inline-flex;width:100%;box-sizing:border-box;align-items:center;justify-content:center;padding:0;border-width:var(--border-size-medium);border-style:solid;border-radius:var(--border-radius);cursor:pointer;fill:currentcolor;font-family:var(--font-family-sans);font-size:14px;font-weight:var(--font-sb);letter-spacing:0.3px;line-height:1;outline:none;text-decoration:none;text-transform:uppercase;white-space:nowrap}.sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{box-shadow:var(--shadow-focus-primary)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button{min-width:calc(var(--space-unit) * 8);padding:0 calc(var(--space-unit) * 2)}.sc-z-button-h .z-button--container.z-button--has-text.sc-z-button z-icon.sc-z-button{--z-icon-right-margin:var(--space-unit)}[size=\"big\"].sc-z-button-h .z-button--container.sc-z-button{min-width:44px;height:44px}[size=\"small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:36px;height:36px}[size=\"x-small\"].sc-z-button-h .z-button--container.sc-z-button{min-width:32px;height:32px}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-primary01);color:var(--color-text-inverse)}@media (hover: hover){[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-hover-primary);color:var(--color-text-inverse)}}[variant=\"primary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-pressed-primary);box-shadow:var(--shadow-2);color:var(--color-text-inverse)}[variant=\"primary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-disabled01);color:var(--color-disabled02)}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:var(--color-primary01);background-color:var(--color-surface01);color:var(--color-primary01)}@media (hover: hover){[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-hover-primary);background-color:var(--color-surface01);color:var(--color-hover-primary)}}[variant=\"secondary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-pressed-primary);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-pressed-primary)}[variant=\"secondary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:var(--color-disabled01);background-color:var(--color-surface01);color:var(--color-disabled02)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-primary01)}@media (hover: hover){[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:hover{border-color:var(--color-primary03);background-color:var(--color-primary03);color:var(--color-hover-primary)}}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:focus:focus-visible{border-color:var(--color-surface01);background-color:var(--color-surface01);color:var(--color-primary01)}[variant=\"tertiary\"].sc-z-button-h .z-button--container.sc-z-button:active{border-color:var(--color-surface01);background-color:var(--color-surface01);box-shadow:var(--shadow-2);color:var(--color-primary01)}[variant=\"tertiary\"][disabled].sc-z-button-h:not([disabled=\"false\"]) .z-button--container.sc-z-button{border-color:transparent;background-color:transparent;color:var(--color-disabled02)}";
 
 const ZButton = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** defines a string value that labels an interactive element, used for accessibility. */
     this.ariaLabel = "";
-    this.href = undefined;
-    this.target = undefined;
-    this.htmlid = undefined;
-    this.name = undefined;
+    /** HTML button disabled attribute. */
     this.disabled = false;
-    this.type = "button" /* ButtonType.BUTTON */;
-    this.variant = "primary" /* ButtonVariant.PRIMARY */;
-    this.icon = undefined;
-    this.size = "big" /* ButtonSize.BIG */;
+    /** HTML button type attribute. */
+    this.type = index$1.ButtonType.BUTTON;
+    /** Graphical variant: `primary`, `secondary`, `tertiary`. Defaults to `primary`. */
+    this.variant = index$1.ButtonVariant.PRIMARY;
+    /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
+    this.size = index$1.ButtonSize.BIG;
   }
   getAttributes() {
     return {

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

@@ -3,6 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-199cd650.js');
 
 const stylesCss = ":host{--aspect-ratio:1.62;--z-card--border-color:var(--gray200);--z-card--color-cover-background:var(--color-surface01);--z-card--text-background:var(--color-surface01);--z-card--text-border-radius:none;--z-card--text-border:none;position:relative;display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}*,::slotted(*){box-sizing:border-box}:host(:not([variant=\"overlay\"])) .cover-container{position:relative;width:100%}.cover-container{padding-bottom:calc(100% / var(--aspect-ratio))}::slotted([slot=\"cover\"]),.color-cover{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;object-position:center}.cover-container>z-icon{--z-icon-width:calc(var(--space-unit) * 11);--z-icon-height:var(--z-icon-width);position:absolute;top:calc(50% - calc(var(--z-icon-height) / 2));left:calc(50% - calc(var(--z-icon-width) / 2));fill:var(--color-primary01)}.color-cover{background-color:var(--z-card--color-cover-background)}.content{display:flex;flex-direction:column;padding-top:var(--space-unit)}.color-cover .cover-content{display:flex;height:100%;flex-direction:column;justify-content:flex-end;padding:var(--space-unit)}::slotted([slot=\"metadata\"]),::slotted([slot=\"title\"]),::slotted([slot=\"text\"]){display:box;overflow:hidden;-webkit-box-orient:vertical}::slotted([slot=\"title\"]:not(:last-child)),::slotted([slot=\"text\"]:not(:last-child)){margin-bottom:var(--space-unit)}::slotted([slot=\"text\"]),::slotted([slot=\"actions\"]){margin:0}::slotted([slot=\"metadata\"]:not(:last-child)){margin:0 0 calc(var(--space-unit) * 0.25);-webkit-line-clamp:1;text-transform:uppercase}::slotted([slot=\"title\"]){margin:0;font-weight:var(--font-sb);-webkit-line-clamp:2}::slotted([slot=\"text\"]){-webkit-line-clamp:3}.actions{display:flex;flex-direction:row;align-items:center}::slotted([slot=\"action\"]:not(:last-child)){margin-right:calc(var(--space-unit) * 1.5)}:host([clickable]){cursor:pointer}:host([clickable]:focus:focus-visible){outline:none}:host(:not([variant])[clickable]:focus:focus-visible){padding:calc(var(--space-unit) * 0.5);box-shadow:var(--shadow-focus-primary)}:host([variant=\"text\"]){border:var(--z-card--text-border);background-color:var(--z-card--text-background);border-radius:var(--z-card--text-border-radius)}:host([showshadow])>.content,:host([variant=\"border\"])>.content,:host([variant=\"shadow\"])>.content{height:100%;padding:var(--space-unit) var(--space-unit) calc(var(--space-unit) * 2)}:host([variant=\"text\"])>.content{padding:calc(var(--space-unit) * 2) var(--space-unit)}:host([variant=\"border\"]) .actions,:host([variant=\"shadow\"]) .actions{margin-top:auto}:host([variant=\"border\"]){border:var(--border-size-small) solid var(--z-card--border-color)}:host([variant=\"border\"][clickable]:hover)>.content{background:var(--color-background)}:host([variant=\"border\"][clickable]:focus:focus-visible){box-shadow:var(--shadow-focus-primary)}:host([variant=\"border\"][clickable]:active){border-color:transparent}:host([variant=\"shadow\"]),:host([showshadow]){box-shadow:var(--shadow-2)}:host([variant=\"shadow\"][clickable]:hover),:host([clickable][showshadow]:hover){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:focus:focus-visible),:host([clickable][showshadow]:focus:focus-visible){box-shadow:var(--shadow-4)}:host([variant=\"shadow\"][clickable]:active),:host([clickable][showshadow]:active){box-shadow:none}:host([variant=\"overlay\"]) .content{position:absolute;top:0;right:0;bottom:0;left:0;justify-content:flex-end;padding:var(--space-unit);background-image:linear-gradient(to top, rgb(0 0 0 / 100%), rgb(0 0 0 / 0%));color:var(--color-text-inverse);fill:var(--color-text-inverse)}";
 
@@ -10,11 +11,10 @@ const ZCard = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.cardClicked = index.createEvent(this, "cardClicked", 7);
-    this.variant = undefined;
-    this.coverIcon = undefined;
+    /** Enable click interactions on the card. Default: false */
     this.clickable = false;
+    /** Enable shadow. Default: false. */
     this.showshadow = false;
-    this.hasCoverImage = undefined;
   }
   onClick(ev) {
     // Do nothing for clicks on actions.
@@ -48,13 +48,13 @@ const ZCard = class {
     return (index.h("div", { class: "content" }, index.h("slot", { name: "metadata" }), index.h("slot", { name: "title" }), index.h("slot", { name: "text" }), index.h("div", { class: "actions" }, index.h("slot", { name: "action" }))));
   }
   render() {
-    if (this.variant === "text" /* CardVariant.TEXT */) {
+    if (this.variant === index$1.CardVariant.TEXT) {
       return index.h(index.Host, null, this.renderContentDiv());
     }
-    if (this.variant === "overlay" /* CardVariant.OVERLAY */ || this.hasCoverImage) {
+    if (this.variant === index$1.CardVariant.OVERLAY || this.hasCoverImage) {
       return (index.h(index.Host, null, index.h("div", { class: "cover-container" }, this.hasCoverImage && [
         index.h("slot", { name: "cover" }),
-        this.variant !== "overlay" /* CardVariant.OVERLAY */ && this.coverIcon && index.h("z-icon", { name: this.coverIcon }),
+        this.variant !== index$1.CardVariant.OVERLAY && this.coverIcon && index.h("z-icon", { name: this.coverIcon }),
       ], !this.hasCoverImage && index.h("div", { class: "color-cover" })), this.renderContentDiv()));
     }
     return index.h(index.Host, null, this.renderColorCoverCard());