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

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

@@ -0,0 +1,262 @@
+import { h } from "@stencil/core";
+import { ButtonSize } from "../../../beans";
+/**
+ * @slot - main navigation
+ * @slot links - bottom navigation
+ * @slot social - social links
+ */
+export class ZFooter {
+  constructor() {
+    this.creditsLinkId = "creditsLinkId";
+    this.data = undefined;
+    this.productName = undefined;
+    this.productVersion = undefined;
+    this.productCreditsLink = undefined;
+    this.showReportAProblemButton = undefined;
+    this.contentMaxWidth = undefined;
+    this.emitReportAProblemButtonClick = this.emitReportAProblemButtonClick.bind(this);
+  }
+  componentWillLoad() {
+    if (this.data) {
+      console.warn("z-footer: `data` prop is deprecated and will be removed in a future version. Use slots instead.");
+      this.jsonData = JSON.parse(this.data);
+    }
+  }
+  zLinkClickListener(e) {
+    if (e.detail.linkId === this.creditsLinkId) {
+      this.emitCreditsLinkClick();
+    }
+  }
+  emitCreditsLinkClick() {
+    this.creditsLinkClick.emit();
+  }
+  emitReportAProblemButtonClick() {
+    this.reportAProblemButtonClick.emit();
+  }
+  renderZLogo() {
+    return (h("z-logo", { link: "https://www.zanichelli.it", width: 144, height: 38, imageAlt: "Home Zanichelli", targetBlank: true }));
+  }
+  renderAddress() {
+    return (h("p", null, "Zanichelli editore S.p.A. via Irnerio 34, 40126 Bologna", h("br", null), "Fax 051 - 249.782 / 293.224 | Tel. 051 - 293.111 / 245.024", h("br", null), "Partita IVA 03978000374"));
+  }
+  renderSocial() {
+    return (h("div", { class: "social" }, h("slot", { name: "social" }), this.renderFooterSocialJsonData()));
+  }
+  renderCopyright() {
+    return (h("p", null, "Copyright \u2013 2018-", new Date().getFullYear(), " Zanichelli", h("span", null, "All rights reserved")));
+  }
+  renderCertification() {
+    return (h("p", null, "Zanichelli editore S.p.A. opera con sistema qualit\u00E0 certificato CertiCarGraf n. 477", h("br", null), "secondo la norma UNI EN ISO 9001:2015"));
+  }
+  renderBottomLinks() {
+    return (h("div", { class: "item bottom-links" }, h("slot", { name: "links" }), this.renderFooterBottomJsonData()));
+  }
+  renderFooterBottom() {
+    return (h("section", { id: "bottom" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { class: "item logo" }, this.renderZLogo(), this.renderCopyright(), this.renderCertification()), h("div", { class: "item" }, this.renderAddress(), this.renderSocial()), this.renderBottomLinks())));
+  }
+  renderFooterTop() {
+    return (h("section", { id: "top" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("slot", null), this.renderFooterTopJsonData())));
+  }
+  renderFooterProductInfo() {
+    var _a;
+    if (this.productName || this.productVersion || this.productCreditsLink != null || this.showReportAProblemButton) {
+      const versionString = `${this.productName ? " versione" : "Versione"} ${this.productVersion}`;
+      const creditsObject = (h("z-body", { level: 5 }, (this.productName || this.productVersion) && " - ", h("z-link", { htmlid: this.creditsLinkId, href: (_a = this.productCreditsLink) === null || _a === void 0 ? void 0 : _a.trim(), target: "_blank", textcolor: "white" }, "Credits")));
+      return (h("div", { id: "extension" }, h("div", { class: { "limited-width": !!this.contentMaxWidth }, style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("span", null, this.productName && (h("z-body", { level: 5, variant: "semibold" }, this.productName)), this.productVersion && h("z-body", { level: 5 }, versionString), this.productCreditsLink != null && creditsObject), this.showReportAProblemButton && (h("div", null, h("z-body", { level: 5 }, "Hai bisogno di aiuto?"), h("z-button", { size: ButtonSize.SMALL, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA"))), h("z-divider", { color: "gray500" }))));
+    }
+  }
+  // INFO: backward compatibility
+  renderFooterTopJsonData() {
+    if (!this.jsonData || !this.jsonData.zanichelliLinks) {
+      return null;
+    }
+    const zanichelliLinks = this.jsonData.zanichelliLinks;
+    if (this.jsonData.bottomLinks) {
+      const bottomLinks = this.jsonData.bottomLinks;
+      zanichelliLinks.push({
+        title: "Altre informazioni",
+        items: bottomLinks,
+      });
+    }
+    return zanichelliLinks.map((item) => (h("z-footer-section", { name: item.title }, item.items.map((item) => (h("z-footer-link", { href: item.link }, item.label))))));
+  }
+  // INFO: backward compatibility
+  renderFooterBottomJsonData() {
+    if (!this.jsonData || !this.jsonData.bottomLinks) {
+      return null;
+    }
+    const bottomLinks = this.jsonData.bottomLinks;
+    return bottomLinks.map((item) => h("z-footer-link", { href: item.link }, item.label));
+  }
+  // INFO: backward compatibility
+  renderFooterSocialJsonData() {
+    if (!this.jsonData || !this.jsonData.social) {
+      return null;
+    }
+    const social = this.jsonData.social;
+    return social.map((item) => (h("z-footer-social", { href: item.link, icon: item.icon, description: item.description })));
+  }
+  render() {
+    return (h("footer", null, this.renderFooterProductInfo(), this.renderFooterTop(), this.renderFooterBottom()));
+  }
+  static get is() { return "z-footer"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "data": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "deprecated - JSON stringified data to fill the footer"
+        },
+        "attribute": "data",
+        "reflect": false
+      },
+      "productName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The product name to be displayed on the top panel of the footer"
+        },
+        "attribute": "product-name",
+        "reflect": false
+      },
+      "productVersion": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The product version to be displayed on the top panel of the footer"
+        },
+        "attribute": "product-version",
+        "reflect": false
+      },
+      "productCreditsLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "'undefined' or 'null' means 'don't show Credits',\nempty string means 'emit creditsLinkClick event',\nnot empty string means 'open the url and emit creditsLinkClick event'"
+        },
+        "attribute": "product-credits-link",
+        "reflect": false
+      },
+      "showReportAProblemButton": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "True if the product must display a \"Report a problem\" button on the top panel of the footer"
+        },
+        "attribute": "show-report-a-problem-button",
+        "reflect": false
+      },
+      "contentMaxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Maximum width of footer content"
+        },
+        "attribute": "content-max-width",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "creditsLinkClick",
+        "name": "creditsLinkClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on credits link click"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }, {
+        "method": "reportAProblemButtonClick",
+        "name": "reportAProblemButtonClick",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted on report a problem button click"
+        },
+        "complexType": {
+          "original": "any",
+          "resolved": "any",
+          "references": {}
+        }
+      }];
+  }
+  static get listeners() {
+    return [{
+        "name": "zLinkClick",
+        "method": "zLinkClickListener",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/footer/z-footer/styles.css

@@ -0,0 +1,242 @@
+:host {
+  width: 100%;
+}
+
+footer {
+  width: auto;
+  height: auto;
+  box-sizing: border-box;
+  padding: var(--space-unit) 0;
+  background-color: var(--gray900);
+  color: var(--gray50);
+  font-family: var(--font-family-sans);
+  font-size: 13px;
+}
+
+footer * {
+  box-sizing: border-box;
+}
+
+footer > section > div {
+  display: grid;
+}
+
+#top {
+  padding: 0 calc(var(--space-unit) * 2);
+}
+
+#bottom {
+  width: auto;
+  height: auto;
+  padding: 0 calc(var(--space-unit) * 2);
+  margin: 0;
+  font-size: 12px;
+  white-space: pre-line;
+}
+
+#bottom > div {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+#bottom > div > div.item {
+  display: flex;
+  width: auto;
+  height: auto;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: calc(var(--space-unit) * 2) 0;
+  grid-column: span 1;
+}
+
+#bottom > div > div.item:nth-child(1) {
+  order: 2;
+}
+
+#bottom > div > div.item:nth-child(2) {
+  order: 1;
+  border-bottom: 1px solid var(--gray50);
+}
+
+#bottom > div > div.item > div.social {
+  display: grid;
+  padding: 0;
+  margin-bottom: 0;
+  column-gap: 12px;
+  grid-template-columns: repeat(5, 1fr);
+  grid-template-rows: repeat(auto-fill, 24px);
+}
+
+#bottom > div > div.bottom-links {
+  display: none;
+}
+
+#bottom > div > div.item > p {
+  padding: var(--space-unit) 0;
+  margin: var(--space-unit) 0;
+}
+
+#bottom > div > div.item > p:first-child {
+  margin-top: 0;
+}
+
+#bottom > div > div.item > p:last-child {
+  margin-bottom: 0;
+}
+
+#bottom > div > div.logo > p > span {
+  display: block;
+}
+
+#extension {
+  padding: 0 calc(var(--space-unit) * 2);
+}
+
+#extension > div {
+  display: grid;
+  align-items: center;
+  grid-row-gap: var(--space-unit);
+  grid-template-columns: 1fr;
+}
+
+#extension z-divider {
+  margin-top: var(--space-unit);
+}
+
+#extension z-button {
+  margin-left: var(--space-unit);
+}
+
+div.limited-width {
+  --mw: none;
+
+  max-width: var(--mw);
+  margin: auto;
+}
+
+z-button {
+  --color-primary01: var(--gray600);
+  --color-hover-primary: var(--gray700);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  footer {
+    padding: 0;
+  }
+
+  #top {
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
+    background-color: var(--gray800);
+  }
+
+  /* backward compatibility */
+  #top z-footer-section:last-child {
+    display: none;
+  }
+
+  #bottom {
+    padding: 0 calc(var(--space-unit) * 3);
+    background-color: var(--gray900);
+  }
+
+  #bottom > div {
+    grid-column-gap: var(--grid-tablet-margin);
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  #bottom > div > div.item {
+    margin: 0;
+  }
+
+  #bottom > div > div.item:nth-child(1) {
+    order: 1;
+  }
+
+  #bottom > div > div.item:nth-child(2) {
+    order: 2;
+    border-bottom: none;
+  }
+
+  #bottom > div > div.item > p {
+    padding-top: 0;
+  }
+
+  #bottom > div > div.logo > z-logo {
+    width: auto;
+    height: 39px;
+  }
+
+  #bottom > div > div.bottom-links {
+    display: grid;
+    order: 3;
+    font-size: 12px;
+    grid-column: span 2;
+    grid-column-gap: var(--grid-tablet-margin);
+    grid-template-columns: repeat(2, 1fr);
+    grid-template-rows: repeat(auto-fill, 24px);
+  }
+
+  #extension {
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;
+    margin: auto;
+    background-color: var(--gray800);
+    color: white;
+    grid-template-columns: 1fr 1fr;
+  }
+
+  #extension > div > div {
+    text-align: end;
+  }
+
+  #extension z-divider {
+    grid-column: 1 / span 2;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  #top {
+    width: 100%;
+  }
+
+  #top > div {
+    grid-column-gap: var(--grid-desktop-margin);
+    grid-template-columns: repeat(6, 1fr);
+  }
+
+  #bottom > div > div.item:nth-child(1) > p:nth-of-type(2) {
+    font-size: 10px;
+  }
+
+  #bottom > div > div.item > p {
+    padding-bottom: 0;
+    margin-bottom: calc(var(--space-unit) * 2);
+  }
+
+  #bottom > div > div.item > div.social {
+    margin-top: 0;
+  }
+
+  #bottom > div > div.bottom-links {
+    padding: calc(var(--space-unit) * 2) 0 0 0;
+    margin: 0;
+    grid-column-gap: var(--grid-desktop-margin);
+    grid-template-columns: repeat(3, 1fr);
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+  #top {
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
+  }
+
+  #bottom {
+    padding: 0 calc(var(--space-unit) * 4);
+  }
+
+  #extension {
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4) 0;
+  }
+}

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

@@ -0,0 +1,45 @@
+import { h } from "@stencil/core";
+/**
+ * @slot - link label
+ */
+export class ZFooterLink {
+  constructor() {
+    this.href = undefined;
+  }
+  render() {
+    return (h("a", { href: this.href, target: "_blank" }, h("slot", null)));
+  }
+  static get is() { return "z-footer-link"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "href": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "link"
+        },
+        "attribute": "href",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/footer/z-footer-link/styles.css

@@ -0,0 +1,25 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > a {
+  display: inline-block;
+  width: 100%;
+  padding: calc(var(--space-unit) / 2 * 3) 0;
+  border-bottom: 1px solid var(--gray50);
+  color: var(--color-white);
+  font-size: 14px;
+  text-decoration: none;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host a {
+    width: initial;
+    padding: 0;
+    border-bottom: none;
+    font-size: 12px;
+    text-decoration: underline;
+  }
+}

package/dist/collection/components/footer/z-footer-section/index.js

@@ -0,0 +1,54 @@
+import { h } from "@stencil/core";
+/**
+ * @slot - section content
+ */
+export class ZFooterSection {
+  constructor() {
+    this.name = undefined;
+    this.isOpen = false;
+  }
+  renderToggleButton() {
+    return (h("button", { class: "toggle-button", onClick: () => (this.isOpen = !this.isOpen) }, h("z-icon", { name: this.isOpen ? "chevron-up" : "chevron-down", width: 16, height: 16 })));
+  }
+  render() {
+    return (h("nav", null, h("div", { class: "header" }, h("h2", null, this.name), this.renderToggleButton()), h("div", { class: `content ${this.isOpen ? "show" : ""}` }, h("slot", null))));
+  }
+  static get is() { return "z-footer-section"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "section title"
+        },
+        "attribute": "name",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isOpen": {}
+    };
+  }
+}