@zanichelli/albe-web-components 2.47.3 → 3.0.0

package/dist/collection/components/navigation/tabs/navigation-tab.css

@@ -1,5 +1,5 @@
-:host > button,
-:host > a {
+z-navigation-tab > button,
+z-navigation-tab-link > a {
   position: relative;
   z-index: 0;
   display: inline-flex;
@@ -23,38 +23,53 @@
   cursor: pointer;
 }
 
-:host > a {
+z-navigation-tab-link > a {
   text-decoration: none;
 }
 
-:host *::before,
-:host *::after {
+z-navigation-tab *,
+z-navigation-tab-link *,
+z-navigation-tab *::before,
+z-navigation-tab *::after,
+z-navigation-tab-link *::before,
+z-navigation-tab-link *::after {
   box-sizing: border-box;
 }
 
-:host(:not([disabled]):hover) > *,
-:host([selected]) > * {
+z-navigation-tab > *:focus:focus-visible,
+z-navigation-tab-link > *:focus:focus-visible {
+  box-shadow: inset var(--shadow-focus-primary);
+}
+
+z-navigation-tab:not([disabled]):hover > *,
+z-navigation-tab[selected] > *,
+z-navigation-tab-link:not([disabled]):hover > *,
+z-navigation-tab-link[selected] > * {
   color: var(--color-hover-secondary);
   fill: currentColor;
 }
 
-:host(:not([disabled]):hover) > *::after,
-:host([selected]) > *::after {
-  content: '';
+z-navigation-tab:not([disabled]):hover > *::after,
+z-navigation-tab[selected] > *::after,
+z-navigation-tab-link:not([disabled]):hover > *::after,
+z-navigation-tab-link[selected] > *::after {
+  content: "";
   position: absolute;
   background-color: var(--color-hover-secondary);
 }
 
-:host([orientation='horizontal']:not([disabled]):hover) > *::after,
-:host([orientation='horizontal'][selected]) > *::after {
+z-navigation-tab[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab-link[orientation="horizontal"][selected] > *::after {
   bottom: 0;
   left: 0;
   width: 100%;
   height: var(--border-size-large);
 }
 
-slot[name="icon"] z-icon,
-::slotted([slot="icon"]) {
+z-navigation-tab z-icon,
+z-navigation-tab-link z-icon {
   --z-icon-width: calc(var(--space-unit) * 2);
   --z-icon-height: calc(var(--space-unit) * 2);
 
@@ -62,20 +77,16 @@ slot[name="icon"] z-icon,
   margin: 0;
 }
 
-:host([orientation='horizontal']) slot[name="icon"] z-icon,
-:host([orientation='horizontal']) ::slotted([slot="icon"]) {
+z-navigation-tab[orientation="horizontal"] z-icon,
+z-navigation-tab-link[orientation="horizontal"] z-icon {
   margin-right: var(--space-unit);
 }
 
-:host(:not([disabled]):hover) > * {
+z-navigation-tab:not([disabled]):hover > * {
   background-color: var(--color-background);
 }
 
-:host > *:focus:focus-visible {
-  box-shadow: var(--shadow-focus-primary);
-}
-
-:host([disabled]) > * {
+z-navigation-tab[disabled] > * {
   pointer-events: all;
   cursor: not-allowed;
   color: var(--gray500);
@@ -83,34 +94,41 @@ slot[name="icon"] z-icon,
 }
 
 /* Size small (only available for horizontal) */
-:host([size='small']) > * {
+z-navigation-tab[size="small"] > *,
+z-navigation-tab-link[size="small"] > * {
   font-size: var(--font-size-2);
   line-height: 1.4;
   letter-spacing: 0.16px;
 }
 
-:host([size='small'][orientation='horizontal']) > * {
+z-navigation-tab[size="small"][orientation="horizontal"] > *,
+z-navigation-tab-link[size="small"][orientation="horizontal"] > * {
   padding: var(--space-unit) calc(var(--space-unit) * 2);
 }
 
-:host([size='small'][orientation='horizontal']:not([disabled]):hover) > *::after,
-:host([size='small'][orientation='horizontal'][selected]) > *::after {
+z-navigation-tab[size="small"][orientation="horizontal"]:not([disabled]):hover > *::after,
+z-navigation-tab[size="small"][orientation="horizontal"][selected] > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"]:hover > *::after,
+z-navigation-tab-link[size="small"][orientation="horizontal"][selected] > *::after {
   height: var(--border-size-medium);
 }
 
-:host([size='small']:not([orientation='vertical'])) slot[name="icon"] z-icon,
-:host([size='small']:not([orientation='vertical'])) ::slotted([slot="icon"]) {
+z-navigation-tab[size="small"]:not([orientation="vertical"]) z-icon,
+z-navigation-tab-link[size="small"]:not([orientation="vertical"]) z-icon {
   --z-icon-width: 14px;
   --z-icon-height: 14px;
 }
 
 /* Orientation Vertical */
-:host([orientation='vertical']) > * {
+z-navigation-tab[orientation="vertical"] > *,
+z-navigation-tab-link[orientation="vertical"] > * {
   padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
 }
 
-:host([orientation='vertical']:hover:not([disabled])) > *::after,
-:host([orientation='vertical'][selected]) > *::after {
+z-navigation-tab[orientation="vertical"]:hover:not([disabled]) > *::after,
+z-navigation-tab[orientation="vertical"][selected] > *::after,
+z-navigation-tab-link[orientation="vertical"]:hover > *::after,
+z-navigation-tab-link[orientation="vertical"][selected] > *::after {
   width: var(--border-size-large);
   height: 100%;
   top: 0;

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

@@ -1,9 +1,8 @@
-import { Component, Prop, h, Element, Listen, Event, Watch } from "@stencil/core";
+import { Component, Prop, h, Listen, Event, Watch } from "@stencil/core";
 import { NavigationTabsOrientations, NavigationTabsSizes } from "../../../../beans";
 import { icons } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders a button.
- * @slot icon - Tab icon. If no extra customization is needed, use the `icon` prop passing the icon's name.
  */
 export class ZNavigationTab {
   constructor() {
@@ -24,12 +23,14 @@ export class ZNavigationTab {
      */
     this.size = NavigationTabsSizes.big;
   }
-  onFocus() {
-    this.host.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "nearest",
-    });
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
     if (!this.disabled) {
@@ -38,7 +39,7 @@ export class ZNavigationTab {
   }
   onSelected() {
     if (this.selected) {
-      this.emitSelected.emit();
+      this.selectedEvent.emit();
     }
   }
   /**
@@ -55,12 +56,11 @@ export class ZNavigationTab {
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle },
-      h("slot", { name: "icon" }, this.icon && this.renderIcon()),
+    return (h("button", { role: "tab", disabled: this.disabled, title: this.htmlTitle, onFocus: this.scrollToTab.bind(this) },
+      this.icon && this.renderIcon(),
       this.orientation === "horizontal" && this.label));
   }
   static get is() { return "z-navigation-tab"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["../navigation-tab.css"]
   }; }
@@ -162,7 +162,7 @@ export class ZNavigationTab {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Name of the icon to use. Use the slot `icon` for extra customization.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+        "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
       },
       "attribute": "icon",
       "reflect": false
@@ -203,7 +203,7 @@ export class ZNavigationTab {
     }
   }; }
   static get events() { return [{
-      "method": "emitSelected",
+      "method": "selectedEvent",
       "name": "selected",
       "bubbles": true,
       "cancelable": true,
@@ -218,18 +218,11 @@ export class ZNavigationTab {
         "references": {}
       }
     }]; }
-  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "selected",
       "methodName": "onSelected"
     }]; }
   static get listeners() { return [{
-      "name": "focus",
-      "method": "onFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "click",
       "method": "onClick",
       "target": undefined,

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

@@ -1,9 +1,8 @@
-import { Component, Prop, h, Element, Listen, Event, Watch, } from "@stencil/core";
+import { Component, Prop, h, Listen, Event, Watch, } from "@stencil/core";
 import { NavigationTabsOrientations, NavigationTabsSizes, } from "../../../../beans";
 import { icons } from "../../../icons/icons";
 /**
  * Single tab component to use inside `z-navigation-tabs`. It renders an anchor element.
- * @slot icon - Tab icon. If no extra customization is needed, use the `icon` prop passing the icon's name.
  */
 export class ZNavigationTabLink {
   constructor() {
@@ -24,19 +23,21 @@ export class ZNavigationTabLink {
      */
     this.size = NavigationTabsSizes.big;
   }
-  onFocus() {
-    this.host.scrollIntoView({
-      behavior: "smooth",
-      block: "nearest",
-      inline: "nearest",
-    });
+  /**
+   * Scroll into view to center the tab.
+   */
+  scrollToTab({ target: button }) {
+    const scrollOptions = this.orientation === NavigationTabsOrientations.horizontal ?
+      { block: "nearest", inline: "center" } :
+      { block: "center", inline: "nearest" };
+    button.scrollIntoView(Object.assign({ behavior: "smooth" }, scrollOptions));
   }
   onClick() {
     this.selected = true;
   }
   onSelected() {
     if (this.selected) {
-      this.emitSelected.emit();
+      this.selectedEvent.emit();
     }
   }
   /**
@@ -53,12 +54,11 @@ export class ZNavigationTabLink {
     return h("z-icon", { name: icon });
   }
   render() {
-    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target },
-      h("slot", { name: "icon" }, this.icon && this.renderIcon()),
+    return (h("a", { role: "tab", href: !this.disabled && this.href, title: this.htmlTitle, target: this.target, onFocus: this.scrollToTab.bind(this) },
+      this.icon && this.renderIcon(),
       this.orientation === "horizontal" && this.label));
   }
   static get is() { return "z-navigation-tab-link"; }
-  static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["../navigation-tab.css"]
   }; }
@@ -211,7 +211,7 @@ export class ZNavigationTabLink {
       "optional": false,
       "docs": {
         "tags": [],
-        "text": "Name of the icon to use. Use the slot `icon` for extra customization.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
+        "text": "Name of the icon to use.\nThe `filled` version will be automatically used (if found) when the tab is `selected`."
       },
       "attribute": "icon",
       "reflect": false
@@ -235,7 +235,7 @@ export class ZNavigationTabLink {
     }
   }; }
   static get events() { return [{
-      "method": "emitSelected",
+      "method": "selectedEvent",
       "name": "selected",
       "bubbles": true,
       "cancelable": true,
@@ -250,18 +250,11 @@ export class ZNavigationTabLink {
         "references": {}
       }
     }]; }
-  static get elementRef() { return "host"; }
   static get watchers() { return [{
       "propName": "selected",
       "methodName": "onSelected"
     }]; }
   static get listeners() { return [{
-      "name": "focus",
-      "method": "onFocus",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }, {
       "name": "click",
       "method": "onClick",
       "target": undefined,

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

@@ -67,6 +67,8 @@ export class ZNavigationTabs {
   }
   /**
    * Listen for child tab selection.
+   * Deselect all other previously selected tabs,
+   * then scroll to the new selected tab and center it.
    * @param {CustomEvent} event `selected` event triggered by a child tab
    */
   onTabSelected(event) {
@@ -82,11 +84,8 @@ export class ZNavigationTabs {
    * Scroll the navigation bar half of its size backward.
    */
   navigateBackwards() {
-    const safeScrollAreaSize = parseFloat(getComputedStyle(this.host).getPropertyValue('--safe-scroll-area'));
     this.tabsNav.scrollBy({
-      [this.direction.toLowerCase()]: 0 -
-        (this.tabsNav[`client${this.dimension}`] / 2) -
-        safeScrollAreaSize,
+      [this.direction.toLowerCase()]: 0 - (this.tabsNav[`client${this.dimension}`] / 2),
       behavior: 'smooth',
     });
   }
@@ -94,11 +93,9 @@ export class ZNavigationTabs {
    * Scroll the navigation bar half of its size forward.
    */
   navigateForward() {
-    const safeScrollAreaSize = parseFloat(getComputedStyle(this.host).getPropertyValue('--safe-scroll-area'));
     this.tabsNav.scrollBy({
       [this.direction.toLowerCase()]: this.tabsNav[`scroll${this.direction}`] +
-        (this.tabsNav[`client${this.dimension}`] / 2) +
-        safeScrollAreaSize,
+        (this.tabsNav[`client${this.dimension}`] / 2),
       behavior: 'smooth',
     });
   }

package/dist/collection/components/navigation/tabs/z-navigation-tabs/styles.css

@@ -1,13 +1,8 @@
 :host {
-  --safe-scroll-area: 4px;
-  --negative-safe-scroll-area: calc(-1 * var(--safe-scroll-area));
-
   position: relative;
   display: flex;
   flex-direction: row;
   z-index: 0;
-  margin: var(--negative-safe-scroll-area);
-  padding: var(--safe-scroll-area);
   font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
   overflow: hidden;
@@ -37,11 +32,12 @@
   border-radius: var(--border-no-radius);
   cursor: pointer;
   z-index: 1;
+  box-shadow: 0px 0px 4px 1px rgb(66, 69, 72, 0.40);
 }
 
-.navigation-button:focus {
+.navigation-button:focus:focus-visible {
   fill: var(--color-primary01);
-  box-shadow: var(--shadow-focus-primary);
+  box-shadow: inset var(--shadow-focus-primary);
 }
 
 .navigation-button:disabled {
@@ -53,9 +49,7 @@ nav {
   align-items: center;
   justify-content: flex-start;
   overflow: auto;
-  margin: var(--negative-safe-scroll-area);
-  padding: var(--safe-scroll-area);
-  scroll-padding: var(--safe-scroll-area);
+  scroll-behavior: smooth;
 
   /* hide scrollbar in Firefox */
   scrollbar-width: none;
@@ -68,19 +62,15 @@ nav {
 :host([orientation='horizontal']) .navigation-button {
   top: 0;
   height: 100%;
-  width: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
+  width: calc(var(--space-unit) * 4);
 }
 
 :host([orientation='horizontal']) .navigation-button:first-child {
   left: 0;
-  padding-left: var(--safe-scroll-area);
-  box-shadow: 5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 :host([orientation='horizontal']) .navigation-button:last-child {
   right: 0;
-  padding-right: 4px;
-  box-shadow: -5px 0px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 /* Orientation vertical */
@@ -98,19 +88,15 @@ nav {
 :host([orientation='vertical']) .navigation-button {
   left: 0;
   width: 100%;
-  height: calc((var(--space-unit) * 4) + var(--safe-scroll-area));
+  height: calc(var(--space-unit) * 4);
 }
 
 :host([orientation='vertical']) .navigation-button:first-child {
   top: 0;
-  padding-top: var(--safe-scroll-area);
-  box-shadow: 0px 5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 :host([orientation='vertical']) .navigation-button:last-child {
   bottom: 0;
-  padding-bottom: var(--safe-scroll-area);
-  box-shadow: 0px -5px var(--safe-scroll-area) var(--negative-safe-scroll-area) rgba(66, 69, 72, 0.40);
 }
 
 :host([size='small'][orientation='vertical']) .navigation-button {

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

@@ -28,10 +28,10 @@ export class ZCookiebar {
             "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: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+      h("z-button-deprecated", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
   }
   render() {
-    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+    return (h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot()));
   }
   static get is() { return "z-cookiebar"; }
   static get encapsulation() { return "shadow"; }

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

@@ -15,7 +15,7 @@ z-candybar.hidden {
   align-items: stretch;
   align-content: space-between;
   color: var(--text-grey-800);
-  border-radius: calc(var(--space-unit) * .5);
+  border-radius: calc(var(--space-unit) * 0.5);
   font-size: 16px;
   letter-spacing: 0px;
   line-height: 24px;
@@ -58,7 +58,7 @@ z-candybar.hidden {
   z-index: 1000;
 }
 
-.content > z-button {
+.content > z-button-deprecated {
   margin: 0;
   width: 100%;
 }
@@ -87,7 +87,7 @@ z-candybar.hidden {
     padding: 0;
   }
 
-  .content > z-button {
+  .content > z-button-deprecated {
     margin: 0;
     width: initial;
   }

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

@@ -172,7 +172,10 @@
   font-weight: 600;
 }
 
-:host > #external-container.mobile-wrapped #button ::slotted(z-button) {
+:host
+  > #external-container.mobile-wrapped
+  #button
+  ::slotted(z-button-deprecated) {
   margin-top: calc(var(--space-unit) * 2);
 }
 
@@ -219,7 +222,6 @@
 
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
-
   :host {
     width: unset;
     max-width: 50vw;

package/dist/collection/components/z-skip-to-content/index.js

@@ -0,0 +1,131 @@
+import { Component, h, Host, Element, Listen, Prop, State, } from "@stencil/core";
+import { getElementTree, handleKeyboardSubmit } from "../../utils/utils";
+import { ThemeVariant } from "../../beans";
+/**
+ * Component short description.
+ */
+export class ZSkipToContent {
+  constructor() {
+    /** Array to fill link into skip-content */
+    this.links = [];
+    this.visible = false;
+    this.visibleLink = "";
+  }
+  handleFocusOutSkipToContent(e) {
+    if (this.isInSkipToContent(e.target))
+      this.visible = false;
+  }
+  handleFocusSkipToContent(e) {
+    if (this.isInSkipToContent(e.target))
+      this.visible = true;
+  }
+  componentDidLoad() {
+    this.showFirstChild();
+  }
+  componentWillRender() {
+    if (this.links) {
+      this.links =
+        typeof this.links === "string" ? JSON.parse(this.links) : this.links;
+    }
+  }
+  isInSkipToContent(elem) {
+    const tree = getElementTree(elem);
+    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
+    if (menuParent)
+      return true;
+    return false;
+  }
+  getFirstChild() {
+    const children = this.hostElement.children;
+    if (children.length)
+      return children[0];
+    return false;
+  }
+  showFirstChild() {
+    const firstChild = this.getFirstChild();
+    if (firstChild)
+      this.visibleLink = firstChild.id;
+  }
+  handleLinkClick() {
+    this.visible = false;
+  }
+  render() {
+    return (h(Host, { class: `${this.variant} ${this.visible && "skip-to-content-visible"} `, ref: (el) => el }, this.links.map((link, i) => {
+      const id = `skip-to-content-${i}`;
+      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `t-weight-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.dark ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+    })));
+  }
+  static get is() { return "z-skip-to-content"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "ThemeVariant",
+        "resolved": "ThemeVariant.dark | ThemeVariant.light",
+        "references": {
+          "ThemeVariant": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Graphical variant: `dark`, `light`."
+      },
+      "attribute": "variant",
+      "reflect": true
+    },
+    "links": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string | SkipToContentLink[]",
+        "resolved": "SkipToContentLink[] | string",
+        "references": {
+          "SkipToContentLink": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Array to fill link into skip-content"
+      },
+      "attribute": "links",
+      "reflect": false,
+      "defaultValue": "[]"
+    }
+  }; }
+  static get states() { return {
+    "visible": {},
+    "visibleLink": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "focusout",
+      "method": "handleFocusOutSkipToContent",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "focusin",
+      "method": "handleFocusSkipToContent",
+      "target": "document",
+      "capture": false,
+      "passive": false
+    }]; }
+}