@zanichelli/albe-web-components 6.3.2-rc1 → 6.3.2

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

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

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

@@ -4,23 +4,17 @@ import { h } from "@stencil/core";
  */
 export class ZLink {
   constructor() {
-    /** link target (optional) */
+    this.htmlid = undefined;
+    this.href = undefined;
     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";
-    /** big link version */
+    this.icon = undefined;
     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,18 +6,11 @@ import { h, Host } from "@stencil/core";
  */
 export class ZMenu {
   constructor() {
-    /**
-     * 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.active = undefined;
     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,6 +3,9 @@ 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,6 +4,11 @@ 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,9 +2,13 @@ import { h, Host } from "@stencil/core";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZUserDropdown {
   constructor() {
-    /** if inner components colors are inverted, or not, default false */
+    this.logged = undefined;
+    this.userFullName = undefined;
+    this.userEmail = undefined;
+    this.menuContent = undefined;
     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-candybar/index.js

@@ -0,0 +1,21 @@
+import { h } from "@stencil/core";
+/**
+ * @slot content - fill the content of the candybar (full width, full height)
+ */
+export class ZCandybar {
+  render() {
+    return (h("div", null, h("slot", { name: "content" })));
+  }
+  static get is() { return "z-candybar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+}

package/dist/collection/components/notification/z-candybar/styles.css

@@ -0,0 +1,55 @@
+:host {
+  display: flex;
+  flex-flow: row nowrap;
+  align-content: center;
+  justify-content: center;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}
+
+:host > div {
+  position: fixed;
+  z-index: 1000;
+  top: 30vh;
+  display: flex;
+  overflow: auto;
+  overflow: -moz-scrollbars-none;
+  max-width: 297px;
+  height: fit-content;
+  min-height: 232px;
+  flex-flow: row wrap;
+  justify-content: center;
+  margin: auto;
+  background: var(--myz-blue-lighter);
+  border-radius: calc(var(--space-unit) * 0.5);
+  box-shadow: 0 -2px 4px 0 rgb(66 69 72 / 40%);
+  -ms-overflow-style: none;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > div {
+    position: initial;
+    position: fixed;
+    top: auto;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    max-width: 100%;
+    height: auto;
+    min-height: 138px;
+    flex-wrap: nowrap;
+    align-content: stretch;
+    align-items: center;
+    justify-content: space-between;
+    margin: 0 auto;
+    border-radius: 0;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host > div {
+    min-height: 122px;
+  }
+}

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

@@ -0,0 +1,115 @@
+import { h } from "@stencil/core";
+import { ButtonVariant } from "../../../beans";
+export class ZCookiebar {
+  constructor() {
+    this.cookiepolicyurl = undefined;
+    this.hide = undefined;
+    this.callback = undefined;
+  }
+  emitAccept(ev) {
+    this.accept.emit({ ev });
+  }
+  handleOkButtonClick(ev) {
+    this.emitAccept(ev);
+    if (typeof this.callback === "function") {
+      this.callback();
+    }
+  }
+  handleOkButtonKeyUp(ev) {
+    this.emitAccept(ev);
+    if (ev.code === "Enter") {
+      if (typeof this.callback !== "undefined" && typeof this.callback === "function") {
+        this.callback();
+      }
+    }
+  }
+  renderContentSlot() {
+    return (h("div", { class: "content", slot: "content" }, h("div", null, h("h2", null, "Su questo sito usiamo i cookie."), h("div", null, h("p", null, "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0", h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"), "."))), h("z-button", { variant: ButtonVariant.PRIMARY, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+  }
+  render() {
+    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+  }
+  static get is() { return "z-cookiebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "cookiepolicyurl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "cookie policy link url"
+        },
+        "attribute": "cookiepolicyurl",
+        "reflect": false
+      },
+      "hide": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "hide cookie bar (optional)"
+        },
+        "attribute": "hide",
+        "reflect": false
+      },
+      "callback": {
+        "type": "unknown",
+        "mutable": false,
+        "complexType": {
+          "original": "() => unknown",
+          "resolved": "() => unknown",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "callback to handle ok button action (optional)"
+        }
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "accept",
+        "name": "accept",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emitted on ACCETTA button click, returns event"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+}

package/dist/collection/components/notification/z-cookiebar/styles.css

@@ -0,0 +1,108 @@
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}
+
+z-candybar.hidden {
+  display: none;
+}
+
+.content {
+  display: flex;
+  flex-flow: column nowrap;
+  align-content: space-between;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+  border-radius: calc(var(--space-unit) * 0.5);
+  color: var(--text-grey-800);
+  font-size: 16px;
+  letter-spacing: 0;
+  line-height: 24px;
+}
+
+.content > div > h2 {
+  padding: 0;
+  margin: 0;
+  border-radius: 0;
+  color: var(--text-grey-800);
+  font-size: 18px;
+  font-weight: var(--font-sb);
+  letter-spacing: 0;
+}
+
+.content > div > div {
+  padding: calc(var(--space-unit) * 3) 0;
+  font-size: 14px;
+  letter-spacing: 0.16px;
+  line-height: 20px;
+}
+
+.content > div > div > p {
+  margin: 0;
+}
+
+.content > div > div > p > a {
+  display: inline-flex;
+  height: 14px;
+  color: var(--text-grey-800);
+  cursor: pointer;
+  font-weight: var(--font-sb);
+  text-decoration: underline;
+}
+
+.content > div > div > p > a:visited {
+  z-index: 1000;
+  color: var(--text-grey-800);
+  cursor: pointer;
+}
+
+.content > z-button {
+  width: 100%;
+  margin: 0;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  .content {
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 3);
+    font-size: 16px;
+    letter-spacing: 0;
+    line-height: 24px;
+  }
+
+  .content > div {
+    width: 560px;
+  }
+
+  .content > div > h2 {
+    height: calc(var(--space-unit) * 3.5);
+  }
+
+  .content > div > div {
+    padding: 0;
+  }
+
+  .content > z-button {
+    width: initial;
+    margin: 0;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  .content > div {
+    width: 935px;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+  .content {
+    padding-right: calc(var(--space-unit) * 4);
+    padding-left: calc(var(--space-unit) * 4);
+  }
+}

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

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

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

@@ -6,14 +6,11 @@ import { h, Host } from "@stencil/core";
  */
 export class ZNotification {
   constructor() {
-    /** Enable close icon */
+    this.contenticonname = undefined;
+    this.actiontext = undefined;
+    this.type = undefined;
     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,13 +4,17 @@ import { mobileBreakpoint } from "../../../constants/breakpoints";
 import Hammer from "hammerjs";
 export class ZToastNotification {
   constructor() {
-    /** toast notification autoclose can be paused */
+    this.isCloseEventCalled = false;
+    this.heading = undefined;
+    this.message = undefined;
+    this.closebutton = undefined;
+    this.autoclose = undefined;
     this.pauseonfocusloss = true;
-    /** toast notification can be draggable*/
+    this.type = undefined;
     this.isdraggable = true;
-    /** toast notification draggable percentage*/
     this.draggablepercentage = 80;
-    this.isCloseEventCalled = false;
+    this.transition = undefined;
+    this.percentage = undefined;
   }
   watchPropIsdraggable(newValue) {
     if (newValue) {

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

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

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

@@ -4,10 +4,15 @@ import { h } from "@stencil/core";
  */
 export class ZPanelElem {
   constructor() {
-    /** link target (optional) */
+    this.elemid = undefined;
+    this.imgurl = undefined;
+    this.imgalt = undefined;
+    this.linkicon = undefined;
+    this.linklabel = undefined;
+    this.url = undefined;
     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,8 +1,9 @@
 import { h } from "@stencil/core";
 export class ZBody {
   constructor() {
-    /** Font weight variant */
+    this.level = undefined;
     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,8 +1,9 @@
 import { h } from "@stencil/core";
 export class ZHeading {
   constructor() {
-    /** Font weight variant */
+    this.level = undefined;
     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,8 +1,9 @@
 import { h, Host } from "@stencil/core";
 export class ZTypography {
   constructor() {
-    /** Font weight variant */
+    this.level = undefined;
     this.variant = "regular";
+    this.component = undefined;
   }
   render() {
     const el = document.createElement(this.component || "span");

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

@@ -17,14 +17,7 @@ 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,7 +2,6 @@ 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,12 +3,11 @@ import { AvatarSize } from "../../beans";
 export class ZAvatar {
   constructor() {
     var _a, _b;
-    /** [optional] Avatar size */
     this.size = AvatarSize.MEDIUM;
-    /** [optional] Avatar text color */
+    this.text = undefined;
     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,10 +2,11 @@ import { h, Host } from "@stencil/core";
 import { CardVariant } from "../../beans";
 export class ZCard {
   constructor() {
-    /** Enable click interactions on the card. Default: false */
+    this.variant = undefined;
+    this.coverIcon = undefined;
     this.clickable = false;
-    /** Enable shadow. Default: false. */
     this.showshadow = false;
+    this.hasCoverImage = undefined;
   }
   onClick(ev) {
     // Do nothing for clicks on actions.