@zanichelli/albe-web-components 2.18.0 → 2.18.4

package/dist/collection/beans/index.js

@@ -25,6 +25,7 @@ export var ButtonVariantEnum;
   ButtonVariantEnum["primary"] = "primary";
   ButtonVariantEnum["secondary"] = "secondary";
   ButtonVariantEnum["tertiary"] = "tertiary";
+  ButtonVariantEnum["dark-bg"] = "dark-bg";
 })(ButtonVariantEnum || (ButtonVariantEnum = {}));
 export var ButtonTypeEnum;
 (function (ButtonTypeEnum) {
@@ -144,12 +145,12 @@ export var TableHeaderSize;
   TableHeaderSize["large"] = "large";
   TableHeaderSize["special"] = "special";
 })(TableHeaderSize || (TableHeaderSize = {}));
-export var SortingOrientation;
-(function (SortingOrientation) {
-  SortingOrientation["asc"] = "asc";
-  SortingOrientation["desc"] = "desc";
-  SortingOrientation["none"] = "none";
-})(SortingOrientation || (SortingOrientation = {}));
+export var SortDirectionEnum;
+(function (SortDirectionEnum) {
+  SortDirectionEnum["asc"] = "asc";
+  SortDirectionEnum["desc"] = "desc";
+  SortDirectionEnum["none"] = "none";
+})(SortDirectionEnum || (SortDirectionEnum = {}));
 export var AvatarSize;
 (function (AvatarSize) {
   AvatarSize["small"] = "small";
@@ -211,3 +212,32 @@ export var PocketStatusEnum;
   PocketStatusEnum["open"] = "open";
   PocketStatusEnum["closed"] = "closed";
 })(PocketStatusEnum || (PocketStatusEnum = {}));
+export var ToastNotificationEnum;
+(function (ToastNotificationEnum) {
+  ToastNotificationEnum["dark"] = "dark";
+  ToastNotificationEnum["light"] = "light";
+  ToastNotificationEnum["accent"] = "accent";
+  ToastNotificationEnum["error"] = "error";
+  ToastNotificationEnum["success"] = "success";
+  ToastNotificationEnum["warning"] = "warning";
+})(ToastNotificationEnum || (ToastNotificationEnum = {}));
+export var ToastNotificationTransitionsEnum;
+(function (ToastNotificationTransitionsEnum) {
+  ToastNotificationTransitionsEnum["slideInLeft"] = "slide-in-left";
+  ToastNotificationTransitionsEnum["slideInRight"] = "slide-in-right";
+  ToastNotificationTransitionsEnum["slideInDown"] = "slide-in-down";
+  ToastNotificationTransitionsEnum["slideInUp"] = "slide-in-up";
+  ToastNotificationTransitionsEnum["slideOutLeft"] = "slide-out-left";
+  ToastNotificationTransitionsEnum["slideOutRight"] = "slide-out-right";
+  ToastNotificationTransitionsEnum["slideOutDown"] = "slide-out-down";
+  ToastNotificationTransitionsEnum["slideOutUp"] = "slide-out-up";
+})(ToastNotificationTransitionsEnum || (ToastNotificationTransitionsEnum = {}));
+export var ToastNotificationPositionsEnum;
+(function (ToastNotificationPositionsEnum) {
+  ToastNotificationPositionsEnum["topRight"] = "top-right";
+  ToastNotificationPositionsEnum["topLeft"] = "top-left";
+  ToastNotificationPositionsEnum["topCentre"] = "top-centre";
+  ToastNotificationPositionsEnum["bottomRight"] = "bottom-right";
+  ToastNotificationPositionsEnum["bottomLeft"] = "bottom-left";
+  ToastNotificationPositionsEnum["bottomCentre"] = "bottom-centre";
+})(ToastNotificationPositionsEnum || (ToastNotificationPositionsEnum = {}));

package/dist/collection/collection-manifest.json

@@ -6,7 +6,6 @@
     "./components/buttons/z-button-sort/index.js",
     "./components/buttons/z-chip/index.js",
     "./components/buttons/z-toggle-button/index.js",
-    "./components/contextual-menu/index.js",
     "./components/footer/z-footer/index.js",
     "./components/footer/z-footer-link/index.js",
     "./components/footer/z-footer-section/index.js",
@@ -23,6 +22,7 @@
     "./components/list/z-list/index.js",
     "./components/list/z-list-element/index.js",
     "./components/list/z-list-group/index.js",
+    "./components/list/z-toast-notification-list/index.js",
     "./components/logo/z-logo/index.js",
     "./components/modal/z-modal/index.js",
     "./components/modal/z-modal-login/index.js",
@@ -41,6 +41,7 @@
     "./components/notification/z-cookiebar/index.js",
     "./components/notification/z-info-box/index.js",
     "./components/notification/z-notification/index.js",
+    "./components/notification/z-toast-notification/index.js",
     "./components/notification/z-tooltip/index.js",
     "./components/pagination/z-pagination-bar/index.js",
     "./components/pagination/z-pagination-page/index.js",
@@ -49,6 +50,7 @@
     "./components/typography/z-heading/index.js",
     "./components/z-avatar/index.js",
     "./components/z-card/index.js",
+    "./components/z-contextual-menu/index.js",
     "./components/z-divider/index.js",
     "./components/z-ghost-loading/index.js",
     "./components/z-popover/index.js",

package/dist/collection/components/buttons/z-button/index.js

@@ -10,7 +10,7 @@ export class ZButton {
     this.disabled = false;
     /** HTML button type attribute. */
     this.type = ButtonTypeEnum.button;
-    /** Graphical variant: `primary`, `secondary` and `tertiary`. Defaults to `primary`. */
+    /** Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`. */
     this.variant = ButtonVariantEnum.primary;
     /** Available sizes: `big`, `small` and `x-small`. Defaults to `big`. */
     this.size = ButtonSizeEnum.big;
@@ -117,7 +117,7 @@ export class ZButton {
       "mutable": false,
       "complexType": {
         "original": "ButtonVariantBean",
-        "resolved": "ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary",
+        "resolved": "ButtonVariantEnum.primary | ButtonVariantEnum.secondary | ButtonVariantEnum.tertiary | typeof ButtonVariantEnum[\"dark-bg\"]",
         "references": {
           "ButtonVariantBean": {
             "location": "import",
@@ -129,7 +129,7 @@ export class ZButton {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "Graphical variant: `primary`, `secondary` and `tertiary`. Defaults to `primary`."
+        "text": "Graphical variant: `primary`, `secondary`, `tertiary`, `dark-bg`. Defaults to `primary`."
       },
       "attribute": "variant",
       "reflect": true,

package/dist/collection/components/buttons/z-button/styles.css

@@ -4,6 +4,7 @@
   --z-icon-width: 16px;
   --z-icon-height: 16px;
   --z-icon-right-margin: var(--space-unit);
+  --rgb-white: 240, 240, 240
 }
 
 button:disabled,
@@ -196,3 +197,35 @@ button.tertiary:disabled,
   border-color: transparent;
   color: var(--color-disabled02);
 }
+
+button.dark-bg,
+:host([variant="dark-bg"]) ::slotted(button),
+:host([variant="dark-bg"]) ::slotted(a) {
+  background-color: rgba(var(--rgb-white), 0.2);
+  border-color: transparent;
+  color: var(--color-text04);
+}
+
+button.dark-bg.hasContent {
+  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: rgba(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: rgba(var(--rgb-white), 0.3);
+}
+
+button.dark-bg:disabled,
+:host([variant="dark-bg"]) ::slotted(button:disabled) {
+  color: var(--color-disabled03);
+  background-color: rgba(var(--rgb-white), 0.05);
+}

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

@@ -46,7 +46,7 @@ export class ZListElement {
      */
     this.disabled = false;
     /**
-     * [optional] If is used in ContextualMenu component
+     * [optional] If is used in ZContextualMenu component
      */
     this.isContextualMenu = false;
     this.showInnerContent = false;
@@ -387,7 +387,7 @@ export class ZListElement {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "[optional] If is used in ContextualMenu component"
+        "text": "[optional] If is used in ZContextualMenu component"
       },
       "attribute": "is-contextual-menu",
       "reflect": true,

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

@@ -0,0 +1,97 @@
+import { Component, Prop, h, Element, Host, Watch } from "@stencil/core";
+import { ToastNotificationPositionsEnum, } from "../../../beans";
+export class ZToastNotificationList {
+  constructor() {
+    /**Set the entry position of new notification in the list */
+    this.newestontop = true;
+    this.slotChangeHandler = () => {
+      const difference = Array.from(this.hostElement.children).filter((elem) => !this.notificationArray.includes(elem));
+      if (difference) {
+        difference.forEach((elem) => {
+          this.notificationArray.push(elem);
+          const newElem = elem;
+          elem.remove();
+          this.hostElement.prepend(newElem);
+        });
+      }
+    };
+  }
+  watchPropNewestontop(newValue) {
+    this.hostElement.append(...this.notificationArray.reverse());
+    if (newValue) {
+      this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler);
+    }
+    else {
+      this.hostElement.shadowRoot.removeEventListener("slotchange", this.slotChangeHandler);
+    }
+  }
+  componentWillLoad() {
+    this.newestontop && this.handleNewestOnTop();
+  }
+  handleNewestOnTop() {
+    this.notificationArray = Array.from(this.hostElement.children);
+    this.hostElement.append(...this.notificationArray.reverse());
+    this.hostElement.shadowRoot.addEventListener("slotchange", this.slotChangeHandler);
+  }
+  render() {
+    return (h(Host, { class: this.position
+        ? this.position
+        : ToastNotificationPositionsEnum.topRight },
+      h("slot", { name: "toasts" })));
+  }
+  static get is() { return "z-toast-notification-list"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ToastNotificationPositionsTypes",
+        "resolved": "ToastNotificationPositionsEnum.bottomCentre | ToastNotificationPositionsEnum.bottomLeft | ToastNotificationPositionsEnum.bottomRight | ToastNotificationPositionsEnum.topCentre | ToastNotificationPositionsEnum.topLeft | ToastNotificationPositionsEnum.topRight",
+        "references": {
+          "ToastNotificationPositionsTypes": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Set the position of toast notification list - top-left, top-centre, top-right, bottom-left, bottom-centre, bottom-right"
+      },
+      "attribute": "position",
+      "reflect": false
+    },
+    "newestontop": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Set the entry position of new notification in the list"
+      },
+      "attribute": "newestontop",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() { return [{
+      "propName": "newestontop",
+      "methodName": "watchPropNewestontop"
+    }]; }
+}

package/dist/collection/components/list/z-toast-notification-list/styles.css

@@ -0,0 +1,107 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+	flex-wrap: nowrap;
+  z-index: 10000;
+  margin-bottom: calc(var(--space-unit) * 2);
+  margin-top: calc(var(--space-unit) * 2);
+}
+
+::slotted(z-toast-notification){
+  width: 100vw;
+}
+
+::slotted(:not(:last-child)) {
+  margin-bottom: calc(var(--space-unit) * 1);
+}
+
+:host(.bottom-centre),
+:host(.bottom-right),
+:host(.bottom-left) {
+  justify-content: flex-end;
+  align-items: flex-end;
+  bottom: 0;
+}
+
+:host(.top-left),
+:host(.top-right),
+:host(.top-centre) {
+  justify-content: flex-start;
+  align-items: flex-start;
+  top: 0;
+}
+
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+
+  :host {
+    margin: calc(var(--space-unit) * 3);
+  }
+
+  :host(.top-centre) {
+    justify-content: flex-start;
+	  align-items: center;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host(.top-left) {
+    justify-content: flex-start;
+	  align-items: flex-start;
+    top: 0;
+    left: 0;
+  }
+
+  :host(.top-right) {
+    justify-content: flex-start;
+	  align-items: flex-end;
+    top: 0;
+    right: 0;
+  }
+
+  :host(.bottom-centre) {
+    justify-content: flex-end;
+	  align-items: center;
+    bottom: 0;
+    left: 50%;
+    transform: translateX(-50%);
+  }
+
+  :host(.bottom-right) {
+    justify-content: flex-end;
+	  align-items: flex-end;
+    bottom: 0;
+    right: 0;
+  }
+
+  :host(.bottom-left) {
+    justify-content: flex-end;
+	  align-items: flex-start;
+    bottom: 0;
+    left: 0;
+  }
+
+  ::slotted(z-toast-notification){
+    width: 50vw;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+
+  :host {
+    margin: calc(var(--space-unit) * 4);
+  }
+
+  ::slotted(z-toast-notification){
+    width: 33vw;
+  }
+}

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

@@ -81,7 +81,7 @@ export class zModalLogin {
           h("div", { class: "password" },
             h("slot", { name: "password" },
               h("z-input", { id: "password", label: "password", placeholder: "Inserisci la tua password", type: "password", name: "password", autocomplete: "current-password", status: this.status, onKeyUp: (e) => this.handleInputKeyUp(e), onInputChange: () => (this.status = null) }))),
-          h("z-link", { class: "forget", href: "https://my.zanichelli.it" }, "Password dimenticata?"),
+          h("z-link", { class: "forget", href: this.forgotPasswordUrl }, "Password dimenticata?"),
           h("div", { class: "login" },
             h("slot", { name: "login" },
               h("z-button", { variant: ButtonVariantEnum.primary, onClick: () => this.emitLoginSubmit() }, "Accedi")))),
@@ -90,9 +90,9 @@ export class zModalLogin {
         h("div", { class: "signup" },
           h("slot", { name: "signup" },
             h("z-button", { variant: ButtonVariantEnum.secondary, onClick: () => this.emitSignupClick() }, "Registrati"))),
-        h("div", { class: "providers" },
+        !this.externalProviderCheck && (h("div", { class: "providers" },
           h("z-body", { class: "provider", level: 5, variant: "regular" }, "OPPURE ACCEDI CON:"),
-          !this.externalProviderCheck && (h("slot", { name: "provider" },
+          h("slot", { name: "provider" },
             this.renderZainoDigitaleButton(),
             h("z-link", { icon: "informationsource", href: "https://www.zainodigitale.it/#/landing" }, "Cos'\u00E8 Zaino Digitale?")))))));
   }
@@ -105,6 +105,23 @@ export class zModalLogin {
     "$": ["styles.css"]
   }; }
   static get properties() { return {
+    "forgotPasswordUrl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Forgot Password Url"
+      },
+      "attribute": "forgot-password-url",
+      "reflect": false
+    },
     "heading": {
       "type": "string",
       "mutable": false,

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

@@ -1,5 +1,5 @@
 import { Component, Prop, h, Event, Element } from "@stencil/core";
-import { forceUpdate, Host } from "@stencil/core/internal";
+import { Host, State } from "@stencil/core/internal";
 /**
  * @slot - link content
  */
@@ -23,9 +23,9 @@ export class ZLink {
     this.iconposition = "left";
     /** draw underline on text (optional) */
     this.underline = false;
+    this.iconSize = 18;
     this.emitZLinkClick = this.emitZLinkClick.bind(this);
     this.emitZLinkInteraction = this.emitZLinkInteraction.bind(this);
-    this.iconSize = 18;
   }
   componentWillRender() {
     if (this.iswhite) {
@@ -41,26 +41,23 @@ export class ZLink {
   emitZLinkInteraction(e, linkId) {
     this.zLinkClick.emit({ e, linkId });
   }
-  calculateIconSize() {
-    let height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
-    const currentSize = this.big ? 18 : Math.round(height * 1.125);
-    if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
-      this.iconSize = currentSize;
-      forceUpdate(this);
+  componentDidRender() {
+    if (this.icon) {
+      const height = parseFloat(window.getComputedStyle(this.hostElement).getPropertyValue('font-size'));
+      const currentSize = this.big ? 18 : Math.round(height * 1.125);
+      if (!Number.isNaN(currentSize) && this.iconSize !== currentSize) {
+        this.iconSize = currentSize;
+      }
     }
   }
-  componentDidLoad() {
-    if (this.icon)
-      this.calculateIconSize();
-  }
   render() {
     const style = this.big ? { "--font-size-link": "16px", "--font-weight-link": "600" } : {};
     return (h(Host, { style: style },
-      h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled && "disabled"}
-            ${this.isactive && "active"}
+      h("a", { id: this.htmlid, href: this.href ? this.href : null, class: `${this.isdisabled ? "disabled" : ""}
+            ${this.isactive ? "active" : ""}
             ${this.textcolor}
-            ${this.iswhite && "white"}
-            ${this.underline && "underline"}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) },
+            ${this.iswhite ? "white" : ""}
+            ${this.underline ? "underline" : ""}`, target: this.target, role: this.href ? "link" : "button", tabindex: this.isdisabled ? -1 : this.htmltabindex, onClick: (e) => this.emitZLinkClick(e, this.htmlid) },
         this.iconposition === "right" && h("slot", null),
         this.icon &&
           h("z-icon", { style: { "--z-icon-width": this.iconSize.toString(), "--z-icon-height": this.iconSize.toString() }, name: this.icon, height: this.iconSize, width: this.iconSize }),
@@ -289,6 +286,9 @@ export class ZLink {
       "defaultValue": "false"
     }
   }; }
+  static get states() { return {
+    "iconSize": {}
+  }; }
   static get events() { return [{
       "method": "zLinkClick",
       "name": "zLinkClick",