@zanichelli/albe-web-components 6.3.2 → 6.3.3

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

@@ -3,14 +3,21 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{--cover-hero-height:auto;--cover-hero-overlay:none;--cover-hero-text-color:var(--color-text-inverse);display:block}:host,*{box-sizing:border-box}:host .content-hero{position:relative;width:100%;height:var(--cover-hero-height);min-height:calc(var(--space-unit) * 30);align-items:baseline;background-color:var(--gray600)}:host .content-container{color:var(--cover-hero-text-color);fill:var(--cover-hero-text-color)}:host .content-hero .cover{position:absolute;z-index:0;width:100%;height:100%}::slotted([slot=\"cover\"]){position:absolute;top:0;left:0;width:100%;height:100%;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\"]) .content-hero .cover::after{position:absolute;top:0;left:0;width:100%;height:100%;background:var(--cover-hero-overlay);content:\"\"}:host([variant=\"overlay\"]) .content-hero .content-container{position:relative;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 one of "OVERLAY", "STACKED".
+     */
     this.variant = index$1.CoverHeroVariant.OVERLAY;
+    /**
+     * Cover hero content position (only for STACKED variant).
+     */
     this.contentPosition = index$1.CoverHeroContentPosition.TOP;
   }
   /**

package/dist/cjs/z-date-picker.cjs.entry.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const utils = require('./utils-7fde0c53.js');
+const utils = require('./utils-8bc9056f.js');
 const _commonjsHelpers = require('./_commonjsHelpers-537d719a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 var monthSelect = _commonjsHelpers.createCommonjsModule(function (module, exports) {
 (function (global, factory) {
@@ -314,9 +314,9 @@ const ZDatePicker = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.dateSelect = index.createEvent(this, "dateSelect", 7);
-    this.datePickerId = undefined;
+    /** z-input aria label */
     this.ariaLabel = "";
-    this.label = undefined;
+    /** [Optional] datepicker mode: date, datetime, only months */
     this.mode = index$1.ZDatePickerMode.DATE;
     this.flatpickrPosition = index$1.ZDatePickerPosition.BOTTOM;
     this.inputError = false;

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

@@ -3,15 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ".sc-z-divider-h{display:block;padding:0;margin:0}.divider-horizontal.sc-z-divider-h{width:100%}.divider-vertical.sc-z-divider-h{height:100%}.divider-small.divider-horizontal.sc-z-divider-h{height:var(--border-size-small)}.divider-medium.divider-horizontal.sc-z-divider-h{height:var(--border-size-medium)}.divider-large.divider-horizontal.sc-z-divider-h{height:var(--border-size-large)}.divider-small.divider-vertical.sc-z-divider-h{width:var(--border-size-small)}.divider-medium.divider-vertical.sc-z-divider-h{width:var(--border-size-medium)}.divider-large.divider-vertical.sc-z-divider-h{width:var(--border-size-large)}";
 
 const ZDivider = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** [optional] Divider size */
     this.size = index$1.DividerSize.SMALL;
+    /** [optional] Divider color */
     this.color = "gray200";
+    /** [optional] Divider orintation */
     this.orientation = index$1.DividerOrientation.HORIZONTAL;
   }
   render() {

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

@@ -37,9 +37,8 @@ ZDragdropArea.style = stylesCss;
 const ZHeading = 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 || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, index.h("slot", null)));

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
-const utils = require('./utils-73ead59e.js');
+const index$1 = require('./index-fa110f37.js');
+const utils = require('./utils-600bad93.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ":host{color:var(--color-text01);font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>.container{display:flex;flex-direction:column}:host .modal-wrapper{display:flex;align-items:center;justify-content:center}:host .modal-wrapper>.files-wrapper{display:flex;flex-direction:column;margin:calc(var(--space-unit) * 4);gap:var(--space-unit)}:host .text-container{display:flex;flex-direction:column;margin:auto}:host .text-container z-body{text-align:center}:host .text-container .upload-link{color:var(--color-link-primary);cursor:pointer}:host .text-container .upload-link-text{margin-bottom:var(--space-unit)}input#file-elem{display:none}#title{display:inline-block;margin-bottom:var(--space-unit)}:host>.container>z-button{display:inline-block;margin-top:calc(var(--space-unit) * 3)}:host>.container>.files-container.hidden{display:none}:host>.container>.files-container>z-heading{display:inline-block;margin:calc(var(--space-unit) * 3) 0}:host>.container>.files-container>.files-wrapper{display:flex;flex-wrap:wrap;column-gap:calc(var(--space-unit) * 2);row-gap:calc(var(--space-unit) * 2)}:host>.container>.files-container>z-divider{margin-top:calc(var(--space-unit) * 3);margin-bottom:0}@media only screen and (min-width: 768px){:host>.container>z-button{align-self:flex-start}}";
@@ -13,19 +13,15 @@ const ZFileUpload = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.fileInput = index.createEvent(this, "fileInput", 7);
+    /** Prop indicating the file upload type - can be default or dragdrop */
+    this.type = index$1.ZFileUploadType.DEFAULT;
+    /** Files added by the user */
+    this.files = [];
     this.inputAttributes = {
       type: "file",
       id: "file-elem",
       multiple: true,
     };
-    this.type = index$1.ZFileUploadType.DEFAULT;
-    this.buttonVariant = undefined;
-    this.acceptedFormat = undefined;
-    this.fileMaxSize = undefined;
-    this.mainTitle = undefined;
-    this.description = undefined;
-    this.files = [];
-    this.invalidFiles = undefined;
   }
   /** Listen removeFile event sent from z-file component */
   removeFileListener(e) {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 const breakpoints = require('./breakpoints-88c4fd6c.js');
 
 const stylesCss = ".sc-z-file-h{position:relative;font-family:var(--font-family-sans);font-weight:var(--font-rg)}.sc-z-file-h>z-popover.sc-z-file{z-index:10}.sc-z-file-h>z-popover.sc-z-file>.tooltip-content.sc-z-file{white-space:nowrap}.sc-z-file-h>z-chip.sc-z-file span.sc-z-file{display:block;overflow:hidden;max-width:250px;letter-spacing:0.32px;line-height:1.33;text-overflow:ellipsis;white-space:nowrap}";
@@ -12,8 +12,6 @@ const ZFile = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.removeFile = index.createEvent(this, "removeFile", 7);
-    this.fileNumber = undefined;
-    this.fileName = undefined;
     this.allowPopover = false;
     this.popoverVisible = false;
   }
@@ -41,7 +39,7 @@ const ZFile = class {
     return this.ellipsis.offsetWidth < this.ellipsis.scrollWidth;
   }
   render() {
-    return (index.h(index.Host, null, this.allowPopover && (index.h("z-popover", { open: this.popoverVisible, position: index$1.PopoverPositions.AUTO, bindTo: this.chip }, index.h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: index$1.ZChipType.DEFAULT }, index.h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
+    return (index.h(index.Host, null, this.allowPopover && (index.h("z-popover", { open: this.popoverVisible, position: index$1.PopoverPosition.AUTO, bindTo: this.chip }, index.h("span", { class: "body-5 tooltip-content" }, this.ellipsis.innerText))), index.h("z-chip", { ref: (el) => (this.chip = el), id: `chip-${this.fileNumber}`, interactiveIcon: "multiply-circled", type: index$1.ZChipType.DEFAULT }, index.h("span", { ref: (el) => (this.ellipsis = el), tabIndex: -1 }, this.fileName))));
   }
   get el() { return index.getElement(this); }
 };

package/dist/cjs/z-info-box.cjs.entry.js

@@ -10,7 +10,7 @@ const ZInfoBox = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.infoBoxClose = index.createEvent(this, "infoBoxClose", 7);
-    this.boxid = undefined;
+    /** render close icon flag */
     this.isclosable = true;
   }
   emitInfoBoxClose() {

package/dist/cjs/z-info-reveal.cjs.entry.js

@@ -3,17 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{--z-info-reveal-theme--surface:var(--color-black);--z-info-reveal-theme--text:var(--color-white);--z-info-reveal-shadow:var(--shadow-2);--z-info-reveal-max-width:375px;position:relative;display:flex;width:fit-content;background-color:var(--z-info-reveal-theme--surface);color:var(--z-info-reveal-theme--text);font-size:var(--font-size-3);font-weight:var(--font-rg);letter-spacing:0;line-height:1.5}button{padding:0;border:none;background-color:transparent;border-radius:0;color:inherit;cursor:pointer;fill:currentcolor;font-family:inherit;font-size:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit}z-icon{--z-icon-width:calc(var(--space-unit) * 3);--z-icon-height:calc(var(--space-unit) * 3);display:flex}.z-info-reveal-trigger{display:flex;width:fit-content;height:100%;align-items:center;padding:calc(var(--space-unit) / 2);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2)}:host([position=\"top_left\"]) .z-info-reveal-trigger,:host([position=\"bottom_left\"]) .z-info-reveal-trigger{flex-direction:row-reverse}:host([open]) .z-info-reveal-trigger{box-shadow:none}.info-box{position:absolute;display:flex;max-width:var(--z-info-reveal-max-width);padding:calc(var(--space-unit) / 2);background-color:var(--z-info-reveal-theme--surface);box-shadow:var(--z-info-reveal-shadow);column-gap:calc(var(--space-unit) / 2);cursor:pointer}:host([position=\"bottom_left\"]) .info-box,:host([position=\"bottom_right\"]) .info-box{bottom:0}:host([position=\"top_right\"]) .info-box,:host([position=\"bottom_right\"]) .info-box{right:0}:host([position=\"top_left\"]) .info-box,:host([position=\"bottom_left\"]) .info-box{left:0;flex-direction:row-reverse}::slotted(*){display:none;width:max-content}::slotted([data-current]){display:block}:host([position=\"top_left\"]) .z-info-reveal-close,:host([position=\"top_right\"]) .z-info-reveal-close{align-self:flex-start}:host([position=\"bottom_left\"]) .z-info-reveal-close,:host([position=\"bottom_right\"]) .z-info-reveal-close{align-self:flex-end}";
 
 const ZInfoReveal = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /** Name of the icon for the open button */
     this.icon = "informationsource";
+    /** Info reveal's position */
     this.position = index$1.InfoRevealPosition.BOTTOM_RIGHT;
-    this.label = undefined;
+    /** Whether the info panel is open. */
     this.open = false;
+    /** Current index for the info queue. */
     this.currentIndex = null;
   }
   watchItems() {

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

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
-const utils = require('./utils-73ead59e.js');
+const index$1 = require('./index-fa110f37.js');
+const utils = require('./utils-600bad93.js');
 require('./breakpoints-88c4fd6c.js');
 
 const stylesCss$1 = ".sc-z-input-h{display:inline-block;width:inherit}input.sc-z-input::-ms-clear,input.sc-z-input::-ms-reveal{display:none}.sc-z-input-h input.sc-z-input::-ms-clear,.sc-z-input-h input.sc-z-input::-ms-reveal{display:none}input.sc-z-input,textarea.sc-z-input,.textarea-wrapper.sc-z-input{box-sizing:border-box;border:var(--border-size-small) solid var(--color-surface04);background:var(--color-input-field01);border-radius:var(--border-radius-small);color:var(--color-text02);fill:var(--color-icon02);font-family:var(--font-family-sans);font-size:var(--font-size-3);font-weight:var(--font-rg);outline:none}input.sc-z-input:focus:focus-visible,.textarea-wrapper.sc-z-input:focus-within{box-shadow:var(--shadow-focus-primary)}input.sc-z-input:focus:focus-visible,textarea.sc-z-input:focus:focus-visible{color:var(--color-primary01)}.filled.sc-z-input{border-color:var(--color-surface05)}.input-success.sc-z-input{border-color:var(--color-success01);background:var(--color-success-inverse);fill:var(--color-success01)}.input-error.sc-z-input{border-color:var(--color-error01);background:var(--color-error-inverse);fill:var(--color-error01)}.input-warning.sc-z-input{border-color:var(--color-warning01);background:var(--color-warning-inverse);fill:var(--color-warning01)}input.sc-z-input:hover,.textarea-wrapper.sc-z-input:hover{outline:var(--border-size-medium) solid var(--color-surface04);outline-offset:-2px}input[readonly].sc-z-input,.readonly.sc-z-input{border-color:var(--color-disabled01);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) .textarea-wrapper.sc-z-input,[disabled].sc-z-input-h:not([disabled=\"false\"]) z-icon.sc-z-input{border-color:var(--color-disabled01);box-shadow:none;color:var(--color-disabled02);fill:var(--color-disabled01);pointer-events:none}[disabled].sc-z-input-h:not([disabled=\"false\"]) input.sc-z-input:hover{border-width:var(--border-size-small)}input.sc-z-input::placeholder,textarea.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input::-webkit-textarea-placeholder{color:var(--color-text05)}.sc-z-input:-ms-textarea-placeholder{color:var(--color-text05)}.sc-z-input::placeholder{color:var(--color-text05)}.sc-z-input:placeholder{color:var(--color-text05)}label.input-label.sc-z-input{display:block;padding-bottom:var(--space-unit);color:var(--color-text02);font-family:var(--font-family-sans);font-size:var(--font-size-1);font-weight:var(--font-sb);text-align:left;text-transform:uppercase}[disabled].sc-z-input-h:not([disabled=\"false\"]) label.input-label.sc-z-input{color:var(--color-disabled02)}.text-wrapper.sc-z-input>div.sc-z-input{position:relative;z-index:1;fill:var(--color-icon02)}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input{width:100%;height:calc(var(--space-unit) * 5.5);box-sizing:border-box;padding:0 calc(var(--space-unit) * 1.5);margin:0}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.sc-z-input,.text-wrapper.sc-z-input>div.sc-z-input>input.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 5.25)}.text-wrapper.sc-z-input>div.sc-z-input>input.has-icon.has-clear-icon.sc-z-input{padding-right:calc(var(--space-unit) * 8)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input{position:absolute;z-index:2;top:50%;right:calc(var(--space-unit) * 1.5);display:flex;pointer-events:none;transform:translateY(-50%)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input{padding:0;border:0;background:none;color:inherit;font:inherit;pointer-events:initial}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input+button.icon-button.sc-z-input{margin-left:calc(var(--space-unit) * 0.5)}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.reset-icon.sc-z-input,.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.toggle-password-icon.sc-z-input{cursor:pointer}.text-wrapper.sc-z-input .icons-wrapper.sc-z-input>button.icon-button.sc-z-input>z-icon.sc-z-input{--z-icon-width:18px;--z-icon-height:18px;display:block}.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:hover,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:focus,.text-wrapper.sc-z-input>div.sc-z-input>input.sc-z-input:-webkit-autofill:active{background-clip:text !important}.textarea-wrapper.sc-z-input{padding:calc(var(--space-unit) * 1.5);scrollbar-color:var(--color-primary01) transparent}textarea.sc-z-input::-webkit-scrollbar{width:10px;background:linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-track{background-color:transparent}textarea.sc-z-input::-webkit-scrollbar-thumb{width:10px;background-color:var(--color-primary01);border-radius:var(--border-radius)}textarea.sc-z-input::-webkit-scrollbar-thumb:hover{background-color:var(--color-hover-primary)}textarea.sc-z-input{width:100%;min-height:132px;padding:0;border:none;margin:0;resize:none}.radio-wrapper.sc-z-input,.checkbox-wrapper.sc-z-input{position:relative;display:inline-flex;flex-direction:row;align-items:center;color:var(--color-text01);fill:var(--color-primary01);font-family:var(--font-family-sans)}.radio-wrapper.sc-z-input:hover,.checkbox-wrapper.sc-z-input:hover{color:var(--color-hover-primary);fill:currentcolor}.radio-wrapper.sc-z-input>input.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input{position:absolute;z-index:-1;opacity:0;pointer-events:none}.radio-wrapper.sc-z-input .radio-label.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input{display:inline-flex;align-items:center;margin:0;color:inherit;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:1;text-transform:inherit}.radio-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input input.sc-z-input:not(:disabled)+.checkbox-label.sc-z-input{cursor:pointer}.radio-wrapper.sc-z-input .radio-label.sc-z-input z-icon.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.sc-z-input z-icon.sc-z-input{cursor:pointer;fill:inherit}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input{flex-direction:row}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input{flex-direction:row-reverse}.radio-wrapper.sc-z-input .radio-label.after.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.after.sc-z-input>span.sc-z-input{margin-left:var(--space-unit)}.radio-wrapper.sc-z-input .radio-label.before.sc-z-input>span.sc-z-input,.checkbox-wrapper.sc-z-input .checkbox-label.before.sc-z-input>span.sc-z-input{margin-right:var(--space-unit)}.radio-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:focus:focus-visible+.checkbox-label.sc-z-input>z-icon.sc-z-input{border-radius:var(--border-radius-small);box-shadow:var(--shadow-focus-primary)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input{color:var(--color-disabled02)}.radio-wrapper.sc-z-input>input.sc-z-input:disabled+.radio-label.sc-z-input>z-icon.sc-z-input,.checkbox-wrapper.sc-z-input>input.sc-z-input:disabled+.checkbox-label.sc-z-input>z-icon.sc-z-input{cursor:default;fill:var(--color-disabled01)}";
@@ -16,31 +16,27 @@ 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;
+    /** the input label position: available for checkbox, radio */
     this.labelPosition = index$1.LabelPosition.RIGHT;
-    this.autocomplete = undefined;
+    /** 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;
@@ -246,8 +242,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 })));

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

@@ -10,17 +10,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);

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

@@ -3,14 +3,20 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss$2 = ":host{display:flex;flex-direction:column;font-family:var(--font-family-sans);font-weight:var(--font-rg)}";
 
 const ZList = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * [optional] Sets size of inside elements.
+     */
     this.size = index$1.ListSize.MEDIUM;
+    /**
+     * [optional] type of the list marker for each element
+     */
     this.listType = index$1.ListType.NONE;
   }
   setChildrenSizeType() {
@@ -41,31 +47,69 @@ const ZListElement = class {
     index.registerInstance(this, hostRef);
     this.accessibleFocus = index.createEvent(this, "accessibleFocus", 7);
     this.clickItem = index.createEvent(this, "clickItem", 7);
-    this.openElementConfig = {
-      accordion: {
-        open: "minus-circled",
-        close: "plus-circled",
-      },
-      menu: {
-        open: "chevron-up",
-        close: "chevron-down",
-      },
-    };
+    /**
+     * [optional] Align expandable button left or right.
+     */
     this.alignButton = index$1.ExpandableListButtonAlign.LEFT;
+    /**
+     * [optional] Sets element clickable.
+     */
     this.clickable = false;
+    /**
+     * [optional] Sets the divider color.
+     */
     this.dividerColor = "color-surface03";
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
     this.dividerType = index$1.ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
     this.dividerSize = index$1.DividerSize.SMALL;
+    /**
+     * [optional] Sets element as expandable.
+     */
     this.expandable = false;
+    /**
+     * [optional] Sets expandable style to element.
+     */
     this.expandableStyle = index$1.ExpandableListStyle.ACCORDION;
-    this.listElementId = undefined;
+    /**
+     * [optional] Sets size of inside elements.
+     */
     this.size = index$1.ListSize.MEDIUM;
+    /**
+     * [optional] Sets text color of the element.
+     */
     this.color = "none";
+    /**
+     * [optional] Sets disabled style of the element.
+     */
     this.disabled = false;
+    /**
+     * [optional] If is used in ZContextualMenu component
+     */
     this.isContextualMenu = false;
+    /**
+     * [optional] position of the list element inside the list or the group
+     */
     this.listElementPosition = "0";
+    /**
+     * [optional] type of the list marker for each element
+     */
     this.listType = index$1.ListType.NONE;
     this.showInnerContent = false;
+    this.openElementConfig = {
+      accordion: {
+        open: "minus-circled",
+        close: "plus-circled",
+      },
+      menu: {
+        open: "chevron-up",
+        close: "chevron-down",
+      },
+    };
     this.handleClick = this.handleClick.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
   }
@@ -165,10 +209,25 @@ const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--f
 const ZListGroup = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    /**
+     * [optional] Sets size of inside elements.
+     */
     this.size = index$1.ListSize.MEDIUM;
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
     this.dividerType = index$1.ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
     this.dividerSize = index$1.DividerSize.SMALL;
+    /**
+     * [optional] Sets the divider color.
+     */
     this.dividerColor = "gray200";
+    /**
+     * [optional] type of the list marker for each element
+     */
     this.listType = index$1.ListType.NONE;
   }
   componentDidLoad() {

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

@@ -0,0 +1,59 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-e3299e0a.js');
+const index$1 = require('./index-fa110f37.js');
+const utils = require('./utils-600bad93.js');
+require('./breakpoints-88c4fd6c.js');
+
+const stylesCss = ":host{width:inherit;height:32px;font-family:var(--dashboard-font);font-size:12px;font-weight:var(--font-sb);letter-spacing:0.17px}a,a:visited,a:active{color:inherit;text-decoration:none}:host>a{display:block;border:var(--border-size-small) solid transparent;background:var(--bg-grey-050);border-radius:var(--border-radius);color:var(--text-grey-800);outline:none}:host>a::-moz-focus-inner{border:0}:host>a:hover,:host>a.menu-opened:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}:host>a:focus{border:var(--border-size-small) solid var(--myz-blue);box-shadow:0 0 2px 2px var(--myz-blue-light);color:var(--myz-blue);fill:var(--myz-blue)}:host>a:active{border:var(--border-size-small) solid var(--myz-blue-light);box-shadow:0 2px 4px 0 rgb(0 0 0 / 40%);color:var(--myz-blue-light);fill:var(--myz-blue-light)}div.container{position:relative;display:flex;height:32px;align-items:center;justify-content:space-between;padding:0 var(--basex1)}div.container>span.user-wrapper{display:flex}div.container>span.user-wrapper>span.user{overflow:hidden;width:30px;padding:0 var(--basex1);cursor:pointer;text-overflow:ellipsis;white-space:nowrap}div.container>span.arrow{display:flex;align-items:center;justify-content:center}div.container>span.arrow>z-icon{transform:rotate(360deg);transition:all 200ms linear}ul{padding:0 calc(var(--space-unit) * 2);margin:0;list-style:none}li{display:flex;width:max-content;height:var(--basex3);align-items:center;padding:calc(var(--space-unit) / 4) 0}.menu-opened{position:inherit;width:auto !important;min-width:147px;padding-bottom:calc(var(--space-unit) * 2)}.menu-opened a,.menu-opened a:active,.menu-opened a:visited{color:var(--myz-blue);fill:var(--myz-blue)}.menu-opened a:hover{color:var(--myz-blue-dark);fill:var(--myz-blue-dark)}.menu-opened>div.container{margin-bottom:var(--basex1)}.menu-opened>div.container>span.user-wrapper>span.user{width:auto}.menu-opened>div.container>span.arrow>z-icon{transform:rotate(180deg);transition:all 200ms linear}@media only screen and (min-width: 1152px){:host>a{width:147px;padding:0 calc(var(--space-unit) / 4)}:host>a.menu-opened{width:147px;padding-bottom:calc(var(--space-unit) * 2)}div.container>span.user-wrapper>span.user{width:80px}}";
+
+const ZMenuDropdown = class {
+  constructor(hostRef) {
+    index.registerInstance(this, hostRef);
+    this.ismenuopen = false;
+    this.handleToggle = this.handleToggle.bind(this);
+    this.handleFocus = this.handleFocus.bind(this);
+  }
+  componentWillRender() {
+    this.linkarray = typeof this.menucontent === "string" ? JSON.parse(this.menucontent) : this.menucontent;
+  }
+  renderMenuOpen() {
+    if (this.ismenuopen) {
+      return (index.h("ul", null, this.linkarray.map((bean) => (index.h("li", null, index.h("z-link", { htmlid: bean.id, href: bean.link, icon: bean.icon }, bean.label))))));
+    }
+  }
+  renderButtonMenu() {
+    return (index.h("span", { class: "arrow" }, index.h("z-icon", { name: "caret-down", width: 14, height: 14 })));
+  }
+  retriveMenuClass() {
+    if (this.ismenuopen) {
+      return "menu-opened";
+    }
+  }
+  handleToggle() {
+    this.ismenuopen = !this.ismenuopen;
+  }
+  handleFocus(e) {
+    if (e instanceof KeyboardEvent && e.keyCode !== index$1.KeyboardKeyCode.TAB) {
+      return;
+    }
+    const tree = utils.getElementTree(utils.getClickedElement());
+    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-menu-dropdown");
+    if (!menuParent) {
+      document.removeEventListener("click", this.handleFocus);
+      document.removeEventListener("keyup", this.handleFocus);
+      this.ismenuopen = false;
+    }
+  }
+  render() {
+    return (index.h("a", { class: this.retriveMenuClass(), role: "button", tabindex: "0", onFocus: () => {
+        document.addEventListener("click", this.handleFocus);
+        document.addEventListener("keyup", this.handleFocus);
+      }, onKeyUp: (e) => utils.handleKeyboardSubmit(e, this.handleToggle) }, index.h("div", { class: "container", onClick: () => this.handleToggle() }, index.h("span", { class: "user-wrapper" }, index.h("z-icon", { name: "user-avatar", width: 14, height: 14 }), index.h("span", { class: "user" }, this.nomeutente)), this.renderButtonMenu()), this.renderMenuOpen()));
+  }
+};
+ZMenuDropdown.style = stylesCss;
+
+exports.z_menu_dropdown = ZMenuDropdown;

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

@@ -11,9 +11,6 @@ const ZMenuSection = class {
     index.registerInstance(this, hostRef);
     this.opened = index.createEvent(this, "opened", 7);
     this.closed = index.createEvent(this, "closed", 7);
-    this.active = undefined;
-    this.open = undefined;
-    this.hasContent = undefined;
   }
   toggle() {
     if (!this.hasContent) {

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

@@ -11,11 +11,18 @@ const ZMenu = class {
     index.registerInstance(this, hostRef);
     this.opened = index.createEvent(this, "opened", 7);
     this.closed = index.createEvent(this, "closed", 7);
-    this.active = undefined;
+    /**
+     * Flag to set the display mode of the list.
+     * If true, the list will be absolutely positioned under the menu label,
+     * stacked beneath it otherwise.
+     * @default false
+     */
     this.floating = false;
+    /**
+     * The opening state of the menu.
+     * @default false
+     */
     this.open = false;
-    this.hasHeader = undefined;
-    this.hasContent = undefined;
     this.toggle = this.toggle.bind(this);
     this.checkContent = this.checkContent.bind(this);
     this.onItemsChange = this.onItemsChange.bind(this);

package/dist/cjs/z-messages-pocket.cjs.entry.js

@@ -3,15 +3,14 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-pocket{width:100%}:host>z-pocket.closed{width:158px}:host>z-pocket>z-pocket-header{color:var(--color-primary01);fill:var(--color-primary01);font-size:12px;font-weight:var(--font-sb)}:host>z-pocket>z-pocket-header span.badge{display:inline-block;padding:0 calc(var(--space-unit) * 0.5);margin-left:var(--space-unit);background:var(--color-secondary02);border-radius:50%;color:var(--color-surface01)}:host>z-pocket>z-pocket-header>z-icon{margin-left:var(--space-unit)}:host>z-pocket>z-pocket-body>div.body{overflow:hidden;padding:var(--space-unit);margin:0 var(--space-unit)}:host>z-pocket.preview>z-pocket-body{position:relative}:host>z-pocket.preview>z-pocket-body>div.gradient{position:absolute;top:0;right:0;bottom:0;left:0;background-image:linear-gradient(rgb(255 0 0 / 0%), white)}:host>z-pocket.open>z-pocket-body>div.body{overflow:auto;max-height:calc(100vh - 166px);scrollbar-width:none}:host ::-webkit-scrollbar{width:0}@media only screen and (min-width: 768px){:host>z-pocket{width:768px;margin:0 calc((100% - 768px) / 2)}:host>z-pocket.closed{margin:0 calc((100% - 158px) / 2)}:host>z-pocket.open>z-pocket-body>div.body{max-height:326px}}@media only screen and (min-width: 1152px){:host>z-pocket.open>z-pocket-body>div.body{scrollbar-color:var(--color-primary01) var(--color-surface03);scrollbar-width:thin}:host ::-webkit-scrollbar{width:10px;background:linear-gradient(\n      90deg,\n      var(--color-surface01) 2px,\n      var(--color-surface03) 4px,\n      var(--color-surface01) 8px\n    );border-radius:var(--radius-base)}:host ::-webkit-scrollbar-thumb{width:var(--space-unit);background-color:var(--color-primary01);border-radius:var(--radius-base)}}";
 
 const ZMessagesPocket = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.pocketid = undefined;
-    this.messages = undefined;
+    /** pocket status */
     this.status = index$1.PocketStatus.PREVIEW;
   }
   handlePocketToggle(e) {

package/dist/cjs/z-modal-login.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ".sc-z-modal-login-h{font-family:var(--dashboard-font);font-weight:var(--font-rg)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{display:flex;box-sizing:border-box;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start;padding:calc(var(--space-unit) * 4) calc(var(--space-unit) * 2) calc(var(--space-unit) * 3)\n    calc(var(--space-unit) * 2);color:var(--text-grey-800)}z-button.sc-z-modal-login,z-input.sc-z-modal-login,.sc-z-modal-login-s>z-button,.sc-z-modal-login-s>z-input{display:inline-block;width:100%}z-link.sc-z-modal-login,.sc-z-modal-login-s>z-link{font-size:12px}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login{display:flex;flex-flow:column nowrap;align-items:stretch;justify-content:flex-start}div.wrapper>form>div.username.sc-z-modal-login-s>z-input,div.wrapper>form>div.password.sc-z-modal-login-s>z-input,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.username.sc-z-modal-login z-input.sc-z-modal-login,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.password.sc-z-modal-login z-input.sc-z-modal-login{margin-bottom:var(--space-unit)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>z-link.forget.sc-z-modal-login{align-self:flex-end;font-size:12px}div.wrapper>form>div.login.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>form.sc-z-modal-login>div.login.sc-z-modal-login z-button.sc-z-modal-login{align-self:flex-start;margin:calc(var(--space-unit) * 3) 0}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>hr.sc-z-modal-login{width:100%;border:none;border-top:var(--border-size-medium) solid var(--bg-grey-200);margin-bottom:calc(var(--space-unit) * 3);margin-block-start:unset}div.wrapper>div.signup.sc-z-modal-login-s>z-button,.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.signup.sc-z-modal-login z-button.sc-z-modal-login{display:inline-block;margin:calc(var(--space-unit) * 2) 0}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;gap:calc(var(--space-unit) * 2) 0;grid-auto-rows:auto;grid-template-columns:1fr}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;gap:calc(var(--space-unit) * 2) 0;grid-auto-rows:auto;grid-template-columns:1fr}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-top:calc(var(--space-unit) * 2)}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login{display:flex;flex-flow:row nowrap;align-content:center;align-items:center;justify-content:center}.sc-z-modal-login-h div.wrapper.sc-z-modal-login>div.providers.sc-z-modal-login .zd.sc-z-modal-login>svg.sc-z-modal-login{margin-right:var(--space-unit)}@media only screen and (min-width: 768px){z-button.sc-z-modal-login,.sc-z-modal-login-s>z-button{width:initial}.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:396px;padding:calc(var(--space-unit) * 3)}.sc-z-modal-login-h div.providers.sc-z-modal-login{display:grid;align-items:center;justify-content:center;gap:var(--space-unit);grid-auto-rows:auto;grid-template-columns:1fr 1fr}.sc-z-modal-login-h div.providers.sc-z-modal-login>z-body.sc-z-modal-login{padding-bottom:var(--space-unit);grid-column:1 / 3}.sc-z-modal-login-s>[slot=\"provider\"]{width:100%}slot-fb[name=\"provider\"].sc-z-modal-login{display:grid;align-items:center;justify-content:center;gap:var(--space-unit);grid-auto-rows:auto;grid-column:1 / 3;grid-template-columns:1fr 1fr}slot-fb[name=\"provider\"].sc-z-modal-login>*.sc-z-modal-login{width:100%}}@media only screen and (min-width: 1366px){.sc-z-modal-login-h div.wrapper.sc-z-modal-login{width:477px;padding:calc(var(--space-unit) * 4)}}";
 
@@ -14,11 +14,8 @@ const ZModalLogin = class {
     this.statusUpdate = index.createEvent(this, "statusUpdate", 7);
     this.signupClick = index.createEvent(this, "signupClick", 7);
     this.zainoDigitaleClick = index.createEvent(this, "zainoDigitaleClick", 7);
-    this.forgotPasswordUrl = undefined;
+    /** Login modal title */
     this.heading = "Entra in MyZanichelli";
-    this.status = undefined;
-    this.message = undefined;
-    this.pwdmessage = undefined;
     this.externalProviderCheck = false;
   }
   componentDidLoad() {

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

@@ -12,9 +12,7 @@ const ZModal = class {
     this.modalClose = index.createEvent(this, "modalClose", 7);
     this.modalHeaderActive = index.createEvent(this, "modalHeaderActive", 7);
     this.modalBackgroundClick = index.createEvent(this, "modalBackgroundClick", 7);
-    this.modalid = undefined;
-    this.modaltitle = undefined;
-    this.modalsubtitle = undefined;
+    /** aria-label for close button (optional) */
     this.closeButtonLabel = "close modal";
   }
   emitModalClose() {

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{position:absolute;z-index:2;top:0;left:0;width:100%;font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host>z-alert{height:calc(var(--space-unit) * 6)}.relative-container{position:relative;display:grid;align-items:center;padding:0;grid-column-gap:var(--space-unit);grid-template-columns:18px auto 46px;grid-template-rows:1fr;outline:none}.relative-container::-moz-focus-inner{border:0}.alert-external-wrapper.remove-alert{border:var(--border-size-medium) solid var(--color-surface02);border-top:none}:host div.add-alert{background:var(--color-success-inverse)}:host div.remove-alert{background:var(--color-warning-inverse)}:host div>.content-text{color:var(--color-surface05);font-size:14px;letter-spacing:0.16px;line-height:20px}:host div>.content-action{height:20px;color:var(--color-primary01);cursor:pointer;font-size:12px;font-weight:var(--font-sb);letter-spacing:0.32px;line-height:20px}:host div>z-icon{justify-self:center}";
 
@@ -11,10 +11,6 @@ const ZMyzCardAlert = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.undoAction = index.createEvent(this, "undoAction", 7);
-    this.iconname = undefined;
-    this.contenttext = undefined;
-    this.actiontext = undefined;
-    this.type = undefined;
   }
   emitUndoAction() {
     this.undoAction.emit({ actionType: this.type });

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-e3299e0a.js');
-const index$1 = require('./index-f08f7171.js');
+const index$1 = require('./index-fa110f37.js');
 
 const stylesCss = ":host{font-family:var(--font-family-sans);font-weight:var(--font-rg)}:host z-myz-card{--card-overflow:visible}:host>div{position:relative;width:100%;height:522px;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content{position:relative;z-index:2;width:100%;height:522px;transform-style:preserve-3d;transition:-webkit-transform 0.5s ease-out;transition:transform 0.5s ease-out;transition:transform 0.5s ease-out, -webkit-transform 0.5s ease-out}:host>div .content.flipped{margin-top:-2px;transform:rotateY(180deg)}:host>div .front,:host>div .back{position:absolute;top:0;left:0;width:100%;height:100%;backface-visibility:hidden}:host>div .front{z-index:2;top:0;left:0;transform:rotateY(0deg)}:host>div .front z-button{position:absolute;z-index:3;top:calc(var(--space-unit) * 0.5);left:calc(-1 * var(--space-unit))}:host>div .back{z-index:1;top:0;left:0;display:flex;justify-content:center;padding:0 var(--space-unit);margin-left:calc(-1 * var(--space-unit));transform:rotateY(180deg)}.hide-info{display:none}";
 
@@ -11,11 +11,13 @@ const ZMyzCardDictionary = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
     this.cardFlipped = index.createEvent(this, "cardFlipped", 7);
-    this.name = undefined;
-    this.cover = undefined;
+    /** card is disabled */
     this.disabled = false;
+    /** card is flipped */
     this.flipped = false;
+    /** flip button label */
     this.flipbuttonlabel = "INFO";
+    /** hide info button */
     this.hideinfobtn = false;
   }
   handleFlipCard(e) {