@zanichelli/albe-web-components 6.3.2 → 6.3.4

package/dist/collection/components/list/z-list-group/index.js

@@ -2,10 +2,25 @@ import { h, Host } from "@stencil/core";
 import { DividerSize, ListSize, ListDividerType, ListType } from "../../../beans";
 export class ZListGroup {
   constructor() {
+    /**
+     * [optional] Sets size of inside elements.
+     */
     this.size = ListSize.MEDIUM;
+    /**
+     * [optional] Sets the position where to insert the divider.
+     */
     this.dividerType = ListDividerType.NONE;
+    /**
+     * [optional] Sets the divider size.
+     */
     this.dividerSize = DividerSize.SMALL;
+    /**
+     * [optional] Sets the divider color.
+     */
     this.dividerColor = "gray200";
+    /**
+     * [optional] type of the list marker for each element
+     */
     this.listType = ListType.NONE;
   }
   componentDidLoad() {

package/dist/collection/components/list/z-toast-notification-list/index.js

@@ -2,7 +2,9 @@ import { h } from "@stencil/core";
 import { ToastNotificationPosition } from "../../../beans";
 export class ZToastNotificationList {
   constructor() {
+    /**Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right */
     this.position = ToastNotificationPosition.TOP_RIGHT;
+    /**Set the entry position of new notification in the list */
     this.newestontop = true;
   }
   watchPropNewestontop(newValue) {

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

@@ -1,13 +1,5 @@
 import { Host, h } from "@stencil/core";
 export class ZLogo {
-  constructor() {
-    this.width = undefined;
-    this.height = undefined;
-    this.imageAlt = undefined;
-    this.link = undefined;
-    this.targetBlank = undefined;
-    this.mobileLogo = undefined;
-  }
   render() {
     const style = {};
     if (this.width) {

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

@@ -5,9 +5,7 @@ import { h, Host } from "@stencil/core";
  */
 export class ZModal {
   constructor() {
-    this.modalid = undefined;
-    this.modaltitle = undefined;
-    this.modalsubtitle = undefined;
+    /** aria-label for close button (optional) */
     this.closeButtonLabel = "close modal";
   }
   emitModalClose() {

package/dist/collection/components/modal/z-modal-login/index.js

@@ -9,11 +9,8 @@ import { ButtonVariant, InputStatus, InputType } from "../../../beans";
  */
 export class ZModalLogin {
   constructor() {
-    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/collection/components/navigation/tabs/z-navigation-tab/index.js

@@ -6,13 +6,22 @@ import { ICONS } from "../../../icons/icons";
  */
 export class ZNavigationTab {
   constructor() {
+    /**
+     * Whether the tab is selected.
+     */
     this.selected = false;
+    /**
+     * Whether the tab is disabled.
+     */
     this.disabled = false;
+    /**
+     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
     this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
     this.size = NavigationTabsSize.BIG;
-    this.icon = undefined;
-    this.label = undefined;
-    this.htmlTitle = undefined;
   }
   /**
    * Scroll into view to center the tab.

package/dist/collection/components/navigation/tabs/z-navigation-tab-link/index.js

@@ -6,15 +6,22 @@ import { ICONS } from "../../../icons/icons";
  */
 export class ZNavigationTabLink {
   constructor() {
+    /**
+     * Whether the tab is selected.
+     */
     this.selected = false;
+    /**
+     * Whether the tab is disabled.
+     */
     this.disabled = false;
+    /**
+     * Tab orientation. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
     this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Tab size. Do not set this manually: `z-navigation-tabs` will handle this.
+     */
     this.size = NavigationTabsSize.BIG;
-    this.htmlTitle = undefined;
-    this.target = undefined;
-    this.href = undefined;
-    this.icon = undefined;
-    this.label = undefined;
   }
   /**
    * Scroll into view to center the tab.

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

@@ -6,11 +6,14 @@ import { NavigationTabsSize, NavigationTabsOrientation } from "../../../../beans
  */
 export class ZNavigationTabs {
   constructor() {
+    /**
+     * Navigation tabs orientation.
+     */
     this.orientation = NavigationTabsOrientation.HORIZONTAL;
+    /**
+     * Navigation tabs size.
+     */
     this.size = NavigationTabsSize.BIG;
-    this.canNavigate = undefined;
-    this.canNavigatePrev = undefined;
-    this.canNavigateNext = undefined;
   }
   /**
    * Getter for the direction to check based on current orientation.

package/dist/collection/components/navigation/z-app-header/index.js

@@ -7,19 +7,41 @@ const SUPPORT_INTERSECTION_OBSERVER = typeof IntersectionObserver !== "undefined
  */
 export class ZAppHeader {
   constructor() {
+    /**
+     * Stuck mode for the header.
+     * You can programmatically set it using an IntersectionObserver.
+     * **Optional**
+     */
+    this.stuck = false;
+    /**
+     * Should place an overlay over the hero image.
+     * Useful for legibility purpose.
+     * **Optional**
+     */
+    this.overlay = false;
+    /**
+     * Control menu bar position in the header.
+     * - auto: the menu bar is positioned near the title
+     * - stack: the menu bar is positioned below the title
+     * - offcanvas: the menu bar is not displayed and a burger icon appears to open the offcanvas menu
+     *
+     * **Optional**
+     */
+    this.flow = "auto";
+    /**
+     * The opening state of the drawer.
+     */
+    this.drawerOpen = false;
+    /**
+     * The stucked state of the bar.
+     */
+    this.stucked = false;
     this.observer = SUPPORT_INTERSECTION_OBSERVER &&
       new IntersectionObserver(([entry]) => {
         this.stucked = !entry.isIntersecting;
       }, {
         threshold: 0.5,
       });
-    this.stuck = false;
-    this.hero = undefined;
-    this.overlay = false;
-    this.flow = "auto";
-    this.drawerOpen = false;
-    this.stucked = false;
-    this.menuLength = undefined;
     this.openDrawer = this.openDrawer.bind(this);
     this.closeDrawer = this.closeDrawer.bind(this);
     this.collectMenuElements.bind(this);

package/dist/collection/components/navigation/z-app-switcher/index.js

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { ThemeVariant } from "../../../beans";
 export class ZAppSwitcher {
   constructor() {
+    /** theme variant, default 'dark' */
     this.theme = ThemeVariant.DARK;
     this.isopen = false;
     this.emitAppButtonClick = this.emitAppButtonClick.bind(this);

package/dist/collection/components/navigation/z-app-topbar/index.js

@@ -3,13 +3,9 @@ import { DividerOrientation, ThemeVariant } from "../../../beans";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZAppTopbar {
   constructor() {
-    this.topbarLinks = [];
+    /** theme variant, default 'dark' */
     this.theme = ThemeVariant.DARK;
-    this.contentMaxWidth = undefined;
-    this.topbarContent = undefined;
-    this.logoLink = undefined;
-    this.showAppSwitcher = undefined;
-    this.isMobile = undefined;
+    this.topbarLinks = [];
   }
   handleResize() {
     this.isMobile = window.innerWidth <= mobileBreakpoint;

package/dist/collection/components/navigation/z-link/index.js

@@ -4,17 +4,23 @@ import { h } from "@stencil/core";
  */
 export class ZLink {
   constructor() {
-    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/collection/components/navigation/z-menu/index.js

@@ -6,11 +6,18 @@ import { h, Host } from "@stencil/core";
  */
 export class ZMenu {
   constructor() {
-    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/collection/components/navigation/z-menu-dropdown/index.js

@@ -3,9 +3,6 @@ import { KeyboardKeyCode } from "../../../beans/index";
 import { handleKeyboardSubmit, getClickedElement, getElementTree } from "../../../utils/utils";
 export class ZMenuDropdown {
   constructor() {
-    this.nomeutente = undefined;
-    this.menucontent = undefined;
-    this.buttonid = undefined;
     this.ismenuopen = false;
     this.handleToggle = this.handleToggle.bind(this);
     this.handleFocus = this.handleFocus.bind(this);

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

@@ -4,11 +4,6 @@ import { h, Host } from "@stencil/core";
  * @slot item - Single entry of the section. Can be slotted multiple times to insert items.
  */
 export class ZMenuSection {
-  constructor() {
-    this.active = undefined;
-    this.open = undefined;
-    this.hasContent = undefined;
-  }
   toggle() {
     if (!this.hasContent) {
       return;

package/dist/collection/components/navigation/z-user-dropdown/index.js

@@ -2,13 +2,9 @@ import { h, Host } from "@stencil/core";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZUserDropdown {
   constructor() {
-    this.logged = undefined;
-    this.userFullName = undefined;
-    this.userEmail = undefined;
-    this.menuContent = undefined;
+    /** if inner components colors are inverted, or not, default false */
     this.useInverseColors = false;
     this.isMenuOpen = false;
-    this.isMobile = undefined;
     this.handleLoggedButtonClick = this.handleLoggedButtonClick.bind(this);
     this.emitDropdownMenuLinkClick = this.emitDropdownMenuLinkClick.bind(this);
   }

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

@@ -4,7 +4,7 @@ import { h } from "@stencil/core";
  */
 export class ZInfoBox {
   constructor() {
-    this.boxid = undefined;
+    /** render close icon flag */
     this.isclosable = true;
   }
   emitInfoBoxClose() {

package/dist/collection/components/notification/z-notification/index.js

@@ -6,11 +6,14 @@ import { h, Host } from "@stencil/core";
  */
 export class ZNotification {
   constructor() {
-    this.contenticonname = undefined;
-    this.actiontext = undefined;
-    this.type = undefined;
+    /** Enable close icon */
     this.showclose = false;
+    /**
+     * Enable shadow.
+     * @deprecated shadow is available only for the `sticky` version of the notification.
+     */
     this.showshadow = false;
+    /** Enable sticky notification bar. */
     this.sticky = false;
     this.handleActionButtonClick = this.handleActionButtonClick.bind(this);
     this.handleCloseButtonClick = this.handleCloseButtonClick.bind(this);

package/dist/collection/components/notification/z-toast-notification/index.js

@@ -4,17 +4,13 @@ import { mobileBreakpoint } from "../../../constants/breakpoints";
 import Hammer from "hammerjs";
 export class ZToastNotification {
   constructor() {
-    this.isCloseEventCalled = false;
-    this.heading = undefined;
-    this.message = undefined;
-    this.closebutton = undefined;
-    this.autoclose = undefined;
+    /** toast notification autoclose can be paused */
     this.pauseonfocusloss = true;
-    this.type = undefined;
+    /** toast notification can be draggable*/
     this.isdraggable = true;
+    /** toast notification draggable percentage*/
     this.draggablepercentage = 80;
-    this.transition = undefined;
-    this.percentage = undefined;
+    this.isCloseEventCalled = false;
   }
   watchPropIsdraggable(newValue) {
     if (newValue) {

package/dist/collection/components/notification/z-tooltip/index.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { PopoverPositions } from "../../../beans";
+import { PopoverPosition } from "../../../beans";
 /**
  * Tooltip component.
  * It is basically a wrapper for the `<z-popover>` component with custom configuration.
@@ -10,10 +10,14 @@ import { PopoverPositions } from "../../../beans";
  */
 export class ZTooltip {
   constructor() {
-    this.position = PopoverPositions.AUTO;
+    /** Tooltip position. */
+    this.position = PopoverPosition.AUTO;
+    /** Enable tooltip dark mode. */
     this.dark = false;
+    /**
+     * The open state of the tooltip.
+     */
     this.open = false;
-    this.bindTo = undefined;
   }
   onPopoverOpenChange() {
     this.open = this.popover.open;
@@ -39,10 +43,10 @@ export class ZTooltip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PopoverPositions",
-          "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
+          "original": "PopoverPosition",
+          "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
           "references": {
-            "PopoverPositions": {
+            "PopoverPosition": {
               "location": "import",
               "path": "../../../beans"
             }
@@ -56,7 +60,7 @@ export class ZTooltip {
         },
         "attribute": "position",
         "reflect": true,
-        "defaultValue": "PopoverPositions.AUTO"
+        "defaultValue": "PopoverPosition.AUTO"
       },
       "dark": {
         "type": "boolean",

package/dist/collection/components/panel/z-panel-elem/index.js

@@ -4,15 +4,10 @@ import { h } from "@stencil/core";
  */
 export class ZPanelElem {
   constructor() {
-    this.elemid = undefined;
-    this.imgurl = undefined;
-    this.imgalt = undefined;
-    this.linkicon = undefined;
-    this.linklabel = undefined;
-    this.url = undefined;
+    /** link target (optional) */
     this.target = "_blank";
+    /** disabled status flag (optional) */
     this.isdisabled = false;
-    this.descrSlotName = undefined;
   }
   renderIcon() {
     if (this.isdisabled) {

package/dist/collection/components/typography/z-body/index.js

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
 export class ZBody {
   constructor() {
-    this.level = undefined;
+    /** Font weight variant */
     this.variant = "regular";
-    this.component = undefined;
   }
   render() {
     return (h("z-typography", { tabIndex: 0, component: this.component || "span", level: `b${this.level}`, variant: this.variant }, h("slot", null)));

package/dist/collection/components/typography/z-heading/index.js

@@ -1,9 +1,8 @@
 import { h } from "@stencil/core";
 export class ZHeading {
   constructor() {
-    this.level = undefined;
+    /** Font weight variant */
     this.variant = "regular";
-    this.component = undefined;
   }
   render() {
     return (h("z-typography", { tabIndex: 0, component: this.component || `h${this.level}`, level: `h${this.level}`, variant: this.variant }, h("slot", null)));

package/dist/collection/components/typography/z-typography/index.js

@@ -1,9 +1,8 @@
 import { h, Host } from "@stencil/core";
 export class ZTypography {
   constructor() {
-    this.level = undefined;
+    /** Font weight variant */
     this.variant = "regular";
-    this.component = undefined;
   }
   render() {
     const el = document.createElement(this.component || "span");

package/dist/collection/components/z-anchor-navigation/index.js

@@ -17,7 +17,14 @@ import { ButtonVariant } from "../../beans";
  */
 export class ZAnchorNavigation {
   constructor() {
+    /**
+     * If enabled, the text of each anchor will be hidden unless
+     * for the current one or the one the user is hovering.
+     */
     this.hideUnselected = false;
+    /**
+     * Whether the mobile list is collapsed.
+     */
     this.collapsed = false;
   }
   /**

package/dist/collection/components/z-aria-alert/index.js

@@ -2,6 +2,7 @@ import { h, Host } from "@stencil/core";
 import { ZAriaAlertMode } from "../../beans";
 export class ZAriaAlert {
   constructor() {
+    /** Aria live mode */
     this.mode = ZAriaAlertMode.POLITE;
   }
   render() {

package/dist/collection/components/z-avatar/index.js

@@ -3,11 +3,12 @@ import { AvatarSize } from "../../beans";
 export class ZAvatar {
   constructor() {
     var _a, _b;
+    /** [optional] Avatar size */
     this.size = AvatarSize.MEDIUM;
-    this.text = undefined;
+    /** [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");
     }

package/dist/collection/components/z-card/index.js

@@ -2,11 +2,10 @@ import { h, Host } from "@stencil/core";
 import { CardVariant } from "../../beans";
 export class ZCard {
   constructor() {
-    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.

package/dist/collection/components/z-carousel/index.js

@@ -7,16 +7,14 @@ import { CarouselArrowsPosition, CarouselProgressMode, ButtonVariant, ButtonSize
  */
 export class ZCarousel {
   constructor() {
-    /** Flag indicating the items container is scrolling programmatically towards the stored index. */
-    this.scrollingTo = null;
-    this.isLoading = undefined;
-    this.label = undefined;
+    /** Shows only one content at a time */
     this.single = false;
-    this.arrowsPosition = undefined;
-    this.progressMode = undefined;
+    /** The height of z-carousel ghost loading, this prop is mandatory when isloading is set to true, as otherwise the component won't show. */
     this.ghostLoadingHeight = 100;
+    /** Current item index for single mode. */
     this.current = 0;
-    this.items = undefined;
+    /** Flag indicating the items container is scrolling programmatically towards the stored index. */
+    this.scrollingTo = null;
   }
   onIndexChange() {
     this.scrollingTo = this.current;

package/dist/collection/components/z-contextual-menu/index.js

@@ -1,10 +1,15 @@
 import { h, Host } from "@stencil/core";
-import { PopoverPositions } from "../../beans";
+import { PopoverPosition } from "../../beans";
 export class ZContextualMenu {
   constructor() {
-    this.elements = undefined;
+    /**
+     * [optional] Sets text color of ZContextualMenu's content
+     */
     this.color = "color-primary01";
-    this.popoverPosition = PopoverPositions.BOTTOM_RIGHT;
+    /**
+     * [optional] Sets the position of the popover
+     */
+    this.popoverPosition = PopoverPosition.BOTTOM_RIGHT;
   }
   componentWillRender() {
     if (this.elements) {
@@ -79,10 +84,10 @@ export class ZContextualMenu {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "PopoverPositions",
-          "resolved": "PopoverPositions.AUTO | PopoverPositions.BOTTOM | PopoverPositions.BOTTOM_LEFT | PopoverPositions.BOTTOM_RIGHT | PopoverPositions.LEFT | PopoverPositions.LEFT_BOTTOM | PopoverPositions.LEFT_TOP | PopoverPositions.RIGHT | PopoverPositions.RIGHT_BOTTOM | PopoverPositions.RIGHT_TOP | PopoverPositions.TOP | PopoverPositions.TOP_LEFT | PopoverPositions.TOP_RIGHT",
+          "original": "PopoverPosition",
+          "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
           "references": {
-            "PopoverPositions": {
+            "PopoverPosition": {
               "location": "import",
               "path": "../../beans"
             }
@@ -96,7 +101,7 @@ export class ZContextualMenu {
         },
         "attribute": "popover-position",
         "reflect": true,
-        "defaultValue": "PopoverPositions.BOTTOM_RIGHT"
+        "defaultValue": "PopoverPosition.BOTTOM_RIGHT"
       }
     };
   }

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

@@ -13,7 +13,14 @@ import { CoverHeroVariant, CoverHeroContentPosition } from "../../beans";
  */
 export class ZCoverHero {
   constructor() {
+    /**
+     * Cover hero variant.
+     * Can be one of "OVERLAY", "STACKED".
+     */
     this.variant = CoverHeroVariant.OVERLAY;
+    /**
+     * Cover hero content position (only for STACKED variant).
+     */
     this.contentPosition = CoverHeroContentPosition.TOP;
   }
   /**

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

@@ -2,8 +2,11 @@ import { h, Host } from "@stencil/core";
 import { DividerSize, DividerOrientation } from "../../beans";
 export class ZDivider {
   constructor() {
+    /** [optional] Divider size */
     this.size = DividerSize.SMALL;
+    /** [optional] Divider color */
     this.color = "gray200";
+    /** [optional] Divider orintation */
     this.orientation = DividerOrientation.HORIZONTAL;
   }
   render() {

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

@@ -12,10 +12,13 @@ import { InfoRevealPosition } from "../../beans";
  */
 export class ZInfoReveal {
   constructor() {
+    /** Name of the icon for the open button */
     this.icon = "informationsource";
+    /** Info reveal's position */
     this.position = 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() {