@zanichelli/albe-web-components 12.1.4-rc → 12.2.0-rc

package/dist/collection/components/navigation/z-app-header/styles.css

@@ -0,0 +1,441 @@
+:host {
+  --app-header-typography-1-size: 24px;
+  --app-header-typography-2-size: 28px;
+  --app-header-typography-3-size: 32px;
+  --app-header-typography-4-size: 36px;
+  --app-header-typography-5-size: 42px;
+  --app-header-typography-6-size: 48px;
+  --app-header-typography-7-size: 54px;
+  --app-header-typography-8-size: 60px;
+  --app-header-typography-9-size: 68px;
+  --app-header-typography-10-size: 76px;
+  --app-header-typography-11-size: 84px;
+  --app-header-typography-12-size: 92px;
+  --app-header-typography-1-lineheight: 1.33;
+  --app-header-typography-2-lineheight: 1.29;
+  --app-header-typography-3-lineheight: 1.25;
+  --app-header-typography-4-lineheight: 1.24;
+  --app-header-typography-5-lineheight: 1.24;
+  --app-header-typography-6-lineheight: 1.25;
+  --app-header-typography-7-lineheight: 1.2;
+  --app-header-typography-8-lineheight: 1.26;
+  --app-header-typography-9-lineheight: 1.24;
+  --app-header-typography-10-lineheight: 1.26;
+  --app-header-typography-11-lineheight: 1.2;
+  --app-header-typography-12-lineheight: 1.2;
+  --app-header-typography-1-tracking: calc(-0.2 / 1em);
+  --app-header-typography-2-tracking: calc(-0.4 / 1em);
+  --app-header-typography-3-tracking: calc(-0.6 / 1em);
+  --app-header-typography-4-tracking: calc(-0.8 / 1em);
+  --app-header-typography-5-tracking: calc(-1 / 1em);
+  --app-header-typography-6-tracking: calc(-1.2 / 1em);
+  --app-header-typography-7-tracking: calc(-1.4 / 1em);
+  --app-header-typography-8-tracking: calc(-1.6 / 1em);
+  --app-header-typography-9-tracking: calc(-1.8 / 1em);
+  --app-header-typography-10-tracking: calc(-2 / 1em);
+  --app-header-typography-11-tracking: calc(-2.2 / 1em);
+  --app-header-typography-12-tracking: calc(-2.4 / 1em);
+  --app-header-content-max-width: 100%;
+  --app-header-height: auto;
+
+  /* Variable to set stuck header and drawer's top offset.
+  Useful when something is absolutely positioned above the header. */
+  --app-header-top-offset: 48px;
+  --app-header-drawer-trigger-size: calc(var(--space-unit) * 4);
+
+  /* Variable to customize header background color. */
+  --app-header-bg: var(--color-surface01);
+
+  /* Variable to customize stuck header background color. */
+  --app-header-stucked-bg: var(--color-surface01);
+
+  /* Variable to customize text and icon color. */
+  --app-header-text-color: var(--color-text01);
+
+  /* Variable to customize the title's font size.
+  NOTE: Only use one of the exported `--app-header-typography-*-size` as a value. */
+  --app-header-title-font-size: var(--app-header-typography-3-size);
+
+  /* Variable to customize the title's line-height.
+  NOTE: Only use one of the exported `--app-header-typography-*-lineheight` as a value
+  and use the same level as the one of the font size. */
+  --app-header-title-lineheight: var(--app-header-typography-3-lineheight);
+
+  /* Variable to customize the title's letter-spacing.
+  NOTE: Only use one of the exported `--app-header-typography-*-tracking` as a value
+  and use the same level as the one of the font size. */
+  --app-header-title-letter-spacing: var(--app-header-typography-3-tracking);
+
+  /* Variable to customize stuck header's text and icon color. */
+  --app-header-stucked-text-color: var(--color-text01);
+
+  position: relative;
+  display: block;
+  height: var(--app-header-height);
+  color: var(--app-header-text-color);
+}
+
+:host,
+* {
+  box-sizing: border-box;
+}
+
+.heading-panel {
+  position: relative;
+  display: flex;
+  width: 100%;
+  max-width: var(--app-header-content-max-width);
+  flex-direction: column;
+  flex-grow: 0;
+  flex-shrink: 0;
+  align-items: baseline;
+  padding: var(--grid-margin);
+  margin: 0 auto;
+  background: var(--app-header-bg);
+  gap: calc(var(--space-unit) * 2) calc(var(--space-unit) * 5);
+}
+
+.hero-container + .heading-panel {
+  background: transparent;
+}
+
+:host(:empty) .heading-panel {
+  padding: 0;
+}
+
+.heading-container {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  width: 100%;
+  max-width: 100%;
+  flex: 1 auto;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+
+.heading-title {
+  display: flex;
+  max-width: 100%;
+  flex-direction: row;
+  align-items: flex-start;
+  column-gap: calc(var(--space-unit) * 2);
+}
+
+::slotted([slot="title"]),
+.heading-stuck .heading-title > *,
+::slotted([slot="stucked-title"]) {
+  margin: 0;
+  font-family: "IBM Plex Serif", serif;
+  font-weight: var(--font-bd);
+}
+
+::slotted([slot="title"]) {
+  font-size: var(--app-header-title-font-size);
+  letter-spacing: var(--app-header-title-letter-spacing);
+  line-height: var(--app-header-title-lineheight);
+}
+
+.heading-stuck .heading-title > *,
+::slotted([slot="stucked-title"]) {
+  font-size: var(--app-header-typography-3-size);
+  letter-spacing: var(--app-header-typography-3-tracking);
+  line-height: var(--app-header-typography-3-lineheight);
+}
+
+:host(:not([menu-length="0"])) .heading-subtitle {
+  padding-left: calc(var(--app-header-drawer-trigger-size) + (var(--space-unit) * 2));
+}
+
+::slotted([slot="top-subtitle"]),
+::slotted([slot="subtitle"]) {
+  margin: 0;
+  font-family: var(--font-family-sans);
+  font-size: 20px;
+  font-style: italic;
+  line-height: 26px;
+}
+
+::slotted([slot="subtitle"]) {
+  font-weight: 500;
+}
+
+::slotted([slot="top-subtitle"]) {
+  font-weight: 400;
+}
+
+.menu-container {
+  display: flex;
+  width: 100%;
+  flex: 1 auto;
+  flex-flow: row wrap;
+}
+
+:host([menu-length="0"]:not([enable-search])) .menu-container,
+.menu-container:empty {
+  display: none;
+}
+
+.menu-container ::slotted([open]) {
+  position: relative;
+  z-index: 3;
+}
+
+z-searchbar {
+  z-index: 0;
+  display: flex;
+  width: auto;
+  min-width: calc(var(--space-unit) * 32);
+  flex: 1 auto;
+  align-items: center;
+  margin-left: auto;
+}
+
+.heading-stuck {
+  position: fixed;
+  z-index: 20;
+  top: var(--app-header-top-offset);
+  left: 0;
+  width: 100%;
+  max-width: 100%;
+  animation: slide-stuck-heading-in 250ms ease-out;
+  background: var(--app-header-stucked-bg);
+  box-shadow: var(--shadow-2);
+  color: var(--app-header-stucked-text-color);
+}
+
+.heading-stuck-content {
+  display: flex;
+  max-width: var(--app-header-content-max-width);
+  align-items: center;
+  padding: var(--space-unit) var(--grid-margin);
+  margin: 0 auto;
+  column-gap: calc(var(--space-unit) * 2);
+}
+
+.heading-stuck .heading-title {
+  overflow: hidden;
+}
+
+.heading-stuck .heading-title > *,
+.heading-stuck .heading-title ::slotted([slot="stucked-title"]) {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.heading-stuck-content z-button {
+  margin-left: auto;
+}
+
+.drawer-trigger {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  appearance: none;
+  background: none;
+  border-radius: 0;
+  color: inherit;
+  cursor: pointer;
+}
+
+.drawer-trigger z-icon {
+  --z-icon-width: var(--app-header-drawer-trigger-size);
+  --z-icon-height: var(--app-header-drawer-trigger-size);
+
+  fill: currentcolor;
+}
+
+/* Simulate the height of the first line of text,
+to correctly align drawer icon and search page button with the title */
+.heading-container :is(.drawer-trigger, z-button.search-page-button) {
+  display: flex;
+  height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
+  align-items: center;
+}
+
+.heading-container z-button.search-page-button {
+  margin-left: auto;
+}
+
+.drawer-content {
+  display: none;
+}
+
+z-offcanvas[open] .drawer-content {
+  display: flex;
+  width: 100%;
+  flex: 1 auto;
+  flex-direction: column;
+  row-gap: calc(var(--space-unit) * 2.5);
+}
+
+z-offcanvas[open] .drawer-content ::slotted(z-menu) {
+  width: 100%;
+}
+
+.drawer-close {
+  --z-icon-width: var(--app-header-drawer-trigger-size);
+  --z-icon-height: var(--app-header-drawer-trigger-size);
+
+  padding: 0;
+  border: 0;
+  margin: var(--space-unit) 0 calc(var(--space-unit) * 2.5);
+  appearance: none;
+  background: transparent;
+  border-radius: 0;
+  color: inherit;
+  cursor: pointer;
+  fill: currentcolor;
+  font-size: inherit;
+  outline: none;
+}
+
+.drawer-close:focus-visible {
+  box-shadow: var(--shadow-focus-primary);
+}
+
+.hero-container {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}
+
+:host([overlay]) .heading-panel .drawer-trigger z-icon,
+:host([overlay]) .heading-panel .heading-container,
+:host([overlay]) .heading-panel .menu-container {
+  color: var(--color-white);
+  fill: var(--color-white);
+}
+
+:host([overlay]) .heading-panel .menu-container ::slotted(z-menu) {
+  --z-menu-label-color: var(--color-white);
+}
+
+:host([overlay]) .hero-container::after {
+  position: absolute;
+  z-index: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: var(--color-black);
+  content: "";
+  opacity: 0.5;
+}
+
+.hero-container img,
+.hero-container ::slotted(*) {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: top center;
+  -webkit-user-drag: none;
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host {
+    --app-header-title-font-size: var(--app-header-typography-6-size);
+    --app-header-title-lineheight: var(--app-header-typography-6-lineheight);
+    --app-header-title-letter-spacing: var(--app-header-typography-6-tracking);
+  }
+
+  .heading-panel {
+    flex-flow: row wrap;
+    align-items: center;
+    padding-bottom: calc(var(--space-unit) * 2);
+  }
+
+  .heading-container {
+    margin-right: auto;
+  }
+
+  :host(:is([flow="offcanvas"], [menu-length="0"])) :is(.heading-container, .menu-container) {
+    width: auto;
+  }
+
+  :host(:not([flow="offcanvas"])) .heading-subtitle {
+    padding-left: 0;
+  }
+
+  .menu-container {
+    flex: initial;
+    align-items: center;
+  }
+
+  :host([menu-length="0"]) .menu-container:not(:empty) {
+    height: calc(var(--app-header-title-font-size) * var(--app-header-title-lineheight));
+  }
+
+  :host(:not([flow="offcanvas"])) .menu-container {
+    gap: var(--space-unit) calc(var(--space-unit) * 5);
+  }
+
+  :host(:not([flow="offcanvas"])) .heading-container .drawer-trigger {
+    display: none;
+  }
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  :host {
+    --app-header-title-font-size: var(--app-header-typography-7-size);
+    --app-header-title-lineheight: var(--app-header-typography-7-lineheight);
+    --app-header-title-letter-spacing: var(--app-header-typography-7-tracking);
+  }
+
+  .heading-panel {
+    justify-content: flex-start;
+    padding-bottom: calc(var(--space-unit) * 3);
+  }
+
+  .heading-container,
+  .menu-container {
+    width: auto;
+  }
+
+  :host([flow="stack"]) .heading-panel {
+    flex-flow: column;
+    align-items: flex-start;
+  }
+
+  :host([flow="stack"]) .menu-container {
+    width: 100%;
+  }
+
+  :host(:not([flow="offcanvas"], [menu-length="0"])) .heading-panel {
+    row-gap: calc(var(--space-unit) * 3);
+  }
+
+  z-searchbar {
+    min-width: calc(var(--space-unit) * 45);
+    flex: initial;
+  }
+}
+
+/* Wide breakpoint */
+@media (min-width: 1366px) {
+  :host {
+    --app-header-title-font-size: var(--app-header-typography-9-size);
+    --app-header-title-lineheight: var(--app-header-typography-9-lineheight);
+    --app-header-title-letter-spacing: var(--app-header-typography-9-tracking);
+  }
+}
+
+@keyframes slide-stuck-heading-in {
+  0% {
+    transform: translate3d(0, -100%, 0);
+  }
+
+  100% {
+    transform: none;
+  }
+}

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

@@ -0,0 +1,250 @@
+import { h, Host } from "@stencil/core";
+/**
+ * @slot - Menu label
+ * @slot header - Header to display as the first entry of the open menu.
+ * @slot item - Single entry of the section. Can be slotted multiple times to insert items onto the menu. Use `z-menu-section` for submenus.
+ * @cssprop --z-menu-label-color - Color of the label's text.
+ */
+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.
+     */
+    this.floating = false;
+    /** The opening state of the menu. */
+    this.open = false;
+    /**
+     * Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).
+     * A small border is placed under it as a separator from other elements.
+     */
+    this.verticalContext = false;
+    this.toggle = this.toggle.bind(this);
+    this.checkContent = this.checkContent.bind(this);
+    this.onLabelSlotChange = this.onLabelSlotChange.bind(this);
+    this.onItemsChange = this.onItemsChange.bind(this);
+  }
+  toggle() {
+    if (!this.hasContent) {
+      return;
+    }
+    this.open = !this.open;
+    this.open ? this.opened.emit() : this.closed.emit();
+  }
+  /** Close the floating list when a click is performed outside of this Element. */
+  handleClick(ev) {
+    if (!this.floating || !this.open || this.hostElement.contains(ev.target)) {
+      return;
+    }
+    this.reflow();
+    this.open = false;
+    this.closed.emit();
+  }
+  onOpenChanged() {
+    if (this.open) {
+      this.reflow(true);
+    }
+    else {
+      cancelAnimationFrame(this.raf);
+    }
+  }
+  componentWillLoad() {
+    this.checkContent();
+  }
+  /**
+   * Sets slotted item text as `data-text` attribute value, to let CSS use it through `attr()`.
+   * @param ev Slotchange event
+   */
+  onLabelSlotChange(ev) {
+    const labelElement = ev.target.assignedElements()[0];
+    labelElement.dataset.text = labelElement === null || labelElement === void 0 ? void 0 : labelElement.textContent;
+  }
+  /**
+   * Correctly set position of the floating menu in order to prevent overflow.
+   * @param live Should run the method on every refresh frame.
+   */
+  reflow(live = false) {
+    if (this.content) {
+      const { style } = this.content;
+      const { left } = this.hostElement.getBoundingClientRect();
+      const widthPx = getComputedStyle(this.content).width;
+      const width = widthPx ? parseFloat(widthPx.replace("px", "")) : 375;
+      const safeScrollbarSpace = 30;
+      style.left = `${Math.min(window.innerWidth - left - width - safeScrollbarSpace, 0)}px`;
+    }
+    if (live) {
+      this.raf = requestAnimationFrame(this.reflow.bind(this, live));
+    }
+  }
+  /**
+   * Check if some content slot is set.
+   */
+  checkContent() {
+    this.hasHeader = !!this.hostElement.querySelectorAll("[slot=header]").length;
+    this.hasContent = !!this.hostElement.querySelectorAll("[slot=item]").length || this.hasHeader;
+  }
+  /**
+   * Set `menuitem` role to all menu items.
+   * Set the item's inner text to the `data-text` attribute (this is for using bold text avoiding layout shifts).
+   */
+  onItemsChange() {
+    this.checkContent();
+    const items = this.hostElement.querySelectorAll("[slot=item]");
+    items.forEach((item) => {
+      item.setAttribute("role", "menuitem");
+      item.dataset.text = item.textContent;
+    });
+  }
+  renderMenuLabel() {
+    if (this.hasContent) {
+      return (h("button", { class: "menu-label", "aria-expanded": this.open ? "true" : "false", "aria-label": this.open ? "Chiudi menù" : "Apri menù", onClick: this.toggle }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }), h("z-icon", { name: this.open ? "chevron-up" : "chevron-down" }))));
+    }
+    return (h("div", { class: "menu-label" }, h("div", { class: "menu-label-content" }, h("slot", { onSlotchange: this.onLabelSlotChange }))));
+  }
+  render() {
+    return (h(Host, null, this.renderMenuLabel(), this.hasContent && (h("div", { class: "content", ref: (el) => (this.content = el) }, this.hasHeader && (h("header", { class: "header" }, h("slot", { name: "header", onSlotchange: this.checkContent }))), h("div", { class: "items", role: "menu" }, h("slot", { name: "item", onSlotchange: this.onItemsChange }))))));
+  }
+  static get is() { return "z-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "active": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Flag to set the active status of the menu."
+        },
+        "attribute": "active",
+        "reflect": true
+      },
+      "floating": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Flag to set the display mode of the list.\nIf true, the list will be absolutely positioned under the menu label,\nstacked beneath it otherwise."
+        },
+        "attribute": "floating",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The opening state of the menu."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "verticalContext": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tells the component that it's placed in a vertical context with other `ZMenu`s (e.g. in the ZAppHeader's offcanvas).\nA small border is placed under it as a separator from other elements."
+        },
+        "attribute": "vertical-context",
+        "reflect": true,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "hasHeader": {},
+      "hasContent": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "opened",
+        "name": "opened",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The menu has been opened."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "closed",
+        "name": "closed",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "The menu has been closed."
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "hostElement"; }
+  static get watchers() {
+    return [{
+        "propName": "open",
+        "methodName": "onOpenChanged"
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "click",
+        "method": "handleClick",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}