@zanichelli/albe-web-components 2.30.1 → 2.31.0-clav-272

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

@@ -1,21 +1,34 @@
-import { Component, h, Prop } from "@stencil/core";
+import { Component, h, Prop, Event, Listen } from "@stencil/core";
+import { ButtonSizeEnum, ButtonVariantEnum } from "../../../beans";
 /**
  * @slot - main navigation
  * @slot links - bottom navigation
  * @slot social - social links
  */
 export class ZFooter {
+  constructor() {
+    this.creditsLinkId = "creditsLinkId";
+    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);
     }
-    if (this.copyrightuser) {
-      console.warn("z-footer: `copyrightuser` prop is deprecated and will be removed in a future version.");
+  }
+  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 }));
+    return (h("z-logo", { link: "https://www.zanichelli.it", width: 144, height: 38, imageAlt: "Home Zanichelli", targetBlank: true }));
   }
   renderAddress() {
     return (h("p", null,
@@ -49,20 +62,42 @@ export class ZFooter {
       this.renderFooterBottomJsonData()));
   }
   renderFooterBottom() {
-    return (h("section", { class: "bottom" },
-      h("div", { class: "item logo" },
-        this.renderZLogo(),
-        this.renderCopyright(),
-        this.renderCertification()),
-      h("div", { class: "item" },
-        this.renderAddress(),
-        this.renderSocial()),
-      this.renderBottomLinks()));
+    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", { class: "top" },
-      h("slot", null),
-      this.renderFooterTopJsonData()));
+    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", { variant: ButtonVariantEnum["dark-bg"], size: ButtonSizeEnum.small, onClick: this.emitReportAProblemButtonClick }, "SEGNALA UN PROBLEMA")),
+          h("z-divider", { color: "gray500" }))));
+    }
   }
   // INFO: backward compatibility
   renderFooterTopJsonData() {
@@ -94,6 +129,7 @@ export class ZFooter {
   }
   render() {
     return (h("footer", null,
+      this.renderFooterProductInfo(),
       this.renderFooterTop(),
       this.renderFooterBottom()));
   }
@@ -123,7 +159,41 @@ export class ZFooter {
       "attribute": "data",
       "reflect": false
     },
-    "copyrightuser": {
+    "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": {
@@ -135,10 +205,82 @@ export class ZFooter {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "deprecated - set copyright user"
+        "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": "copyrightuser",
+      "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

@@ -6,10 +6,10 @@ footer {
   width: auto;
   height: auto;
   box-sizing: border-box;
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-size: 13px;
-  padding: var(--space-unit) 0 var(--space-unit) 0;
-  background-color: var(--bg-grey-900);
+  padding: var(--space-unit) 0;
+  background-color: var(--gray900);
   color: var(--gray50);
 }
 
@@ -17,22 +17,29 @@ footer * {
   box-sizing: border-box;
 }
 
-footer > section {
+footer > section > div {
   display: grid;
 }
 
-footer > section.bottom {
-  display: grid;
-  grid-template-columns: 1fr;
+#top {
+  padding: 0 calc(var(--space-unit) * 2);
+}
+
+#bottom {
   width: auto;
   height: auto;
   margin: 0;
-  padding: 0;
+  padding: 0 calc(var(--space-unit) * 2);
   white-space: pre-line;
   font-size: 12px;
 }
 
-footer > section.bottom > div.item {
+#bottom > div {
+  display: grid;
+  grid-template-columns: 1fr;
+}
+
+#bottom > div > div.item {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -40,19 +47,18 @@ footer > section.bottom > div.item {
   height: auto;
   width: auto;
   padding: calc(var(--space-unit) * 2) 0;
-  margin: 0 calc(var(--space-unit) * 3);
 }
 
-footer > section.bottom > div.item:nth-child(1) {
+#bottom > div > div.item:nth-child(1) {
   order: 2;
 }
 
-footer > section.bottom > div.item:nth-child(2) {
+#bottom > div > div.item:nth-child(2) {
   order: 1;
   border-bottom: 1px solid var(--gray50);
 }
 
-footer > section.bottom > div.item > div.social {
+#bottom > div > div.item > div.social {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(auto-fill, 24px);
@@ -61,120 +67,176 @@ footer > section.bottom > div.item > div.social {
   margin-bottom: 0px;
 }
 
-footer > section.bottom > div.bottom-links {
+#bottom > div > div.bottom-links {
   display: none;
 }
 
-footer > section.bottom > div.item > p {
+#bottom > div > div.item > p {
   margin: var(--space-unit) 0;
   padding: var(--space-unit) 0;
 }
 
-footer > section.bottom > div.item > p:first-child {
+#bottom > div > div.item > p:first-child {
   margin-top: 0;
 }
 
-footer > section.bottom > div.item > p:last-child {
+#bottom > div > div.item > p:last-child {
   margin-bottom: 0;
 }
 
-footer > section.bottom > div.logo > p > span {
+#bottom > div > div.logo > p > span {
   display: block;
 }
 
+#extension {
+  padding: 0 calc(var(--space-unit) * 2);
+}
+
+#extension > div {
+  display: grid;
+  grid-template-columns: 1fr;
+  grid-row-gap: var(--space-unit);
+  align-items: center;
+}
+
+#extension z-divider {
+  margin-top: var(--space-unit);
+}
+
+#extension z-button {
+  margin-left: var(--space-unit);
+}
+
+div.limited-width {
+  margin: auto;
+  max-width: var(--mw);
+}
+
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   footer {
     padding: 0;
   }
 
-  footer > section.top {
-    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
-    background-color: var(--text-grey-800);
+  #top {
+    background-color: var(--gray800);
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
   }
 
   /* backward compatibility */
-  footer > section.top > z-footer-section:last-child {
+  #top z-footer-section:last-child {
     display: none;
   }
 
-  footer > section.bottom {
+  #bottom {
+    background-color: var(--gray900);
+    padding: 0 calc(var(--space-unit) * 3);
+  }
+
+  #bottom > div {
     grid-template-columns: repeat(4, 1fr);
     grid-column-gap: var(--grid-tablet-margin);
-    background-color: var(--bg-grey-900);
-    padding: 0 calc(var(--space-unit) * 4);
   }
 
-  footer > section.bottom > div.item {
+  #bottom > div > div.item {
     margin: 0;
   }
 
-  footer > section.bottom > div.item:nth-child(1) {
+  #bottom > div > div.item:nth-child(1) {
     order: 1;
   }
 
-  footer > section.bottom > div.item:nth-child(2) {
+  #bottom > div > div.item:nth-child(2) {
     order: 2;
     border-bottom: none;
   }
 
-  footer > section.bottom > div.item > p {
+  #bottom > div > div.item > p {
     padding-top: 0;
   }
 
-  footer > section.bottom > div.logo > z-logo {
+  #bottom > div > div.logo > z-logo {
     width: auto;
     height: 39px;
   }
 
-  footer > section.bottom > div.bottom-links {
+  #bottom > div > div.bottom-links {
     display: block;
     grid-column: span 2;
     order: 3;
   }
 
-  footer > section.bottom > div.bottom-links {
+  #bottom > div > div.bottom-links {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     grid-template-rows: repeat(auto-fill, 24px);
     grid-column-gap: var(--grid-tablet-margin);
     font-size: 12px;
   }
+
+  #extension {
+    margin: auto;
+    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3) 0;
+    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) {
-  footer > section.top {
-    grid-template-columns: repeat(6, 1fr);
-    grid-column-gap: var(--grid-desktop-margin);
+  #top {
     width: 100%;
-    padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 4);
   }
 
-  footer > section.bottom {
-    padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 4);
+  #top > div {
+    grid-template-columns: repeat(6, 1fr);
+    grid-column-gap: var(--grid-desktop-margin);
   }
 
-  footer > section.bottom > div.item:nth-child(1) > p:nth-of-type(2) {
+  #bottom > div > div.item:nth-child(1) > p:nth-of-type(2) {
     font-size: 10px;
   }
 
-  footer > section.bottom > div.item > p {
+  #bottom > div > div.item > p {
     padding-bottom: 0;
     margin-bottom: calc(var(--space-unit) * 2);
   }
 
-  footer > section.bottom > div.item > div.social {
+  #bottom > div > div.item > div.social {
     margin-top: 0;
   }
 
-  footer > section.bottom > div.bottom-links {
+  #bottom > div > div.bottom-links {
     padding: calc(var(--space-unit) * 2) 0 0 0;
   }
 
-  footer > section.bottom > div.bottom-links {
+  #bottom > div > div.bottom-links {
     grid-template-columns: repeat(3, 1fr);
     grid-column-gap: var(--grid-desktop-margin);
     margin: 0;
   }
 }
+
+/* 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/styles.css

@@ -1,5 +1,5 @@
 :host {
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 

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

@@ -1,15 +1,15 @@
 :host {
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 
 :host > nav {
-  background-color: var(--bg-grey-900);
+  background-color: var(--gray900);
   display: flex;
   flex-direction: column;
   justify-items: flex-start;
   overflow: hidden;
-  margin: calc(var(--space-unit) / 2) 0 calc(var(--space-unit) / 2) 0;
+  margin: calc(var(--space-unit) / 2) 0;
   padding: 0;
 }
 
@@ -21,7 +21,6 @@
   justify-content: flex-start;
   align-items: stretch;
   align-content: flex-start;
-  margin: 0 calc(var(--space-unit) * 4);
   height: calc(var(--space-unit) * 4);
   border-bottom: 1px solid var(--gray50);
   line-height: 1;
@@ -30,7 +29,7 @@
 :host > nav > .header > h2 {
   color: var(--color-white);
   font-size: 16px;
-  margin: var(--space-unit) 0 var(--space-unit) 0;
+  margin: var(--space-unit) 0;
 }
 
 :host > nav > .header {
@@ -54,11 +53,11 @@
 }
 
 :host > nav > .content {
-  background-color: var(--text-grey-800);
+  background-color: var(--gray800);
   display: none;
   height: 0;
   transition: 0.3s ease;
-  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 4);
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
 }
 
 :host > nav > .content.show {
@@ -77,7 +76,7 @@
     padding: calc(var(--space-unit) * 2) 0;
     border-bottom: 1px solid var(--color-white);
     margin: 0;
-    background-color: var(--bg-grey-800);
+    background-color: var(--gray800);
   }
 
   :host > nav > .header > button.toggleButton {

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

@@ -1,5 +1,5 @@
 :host {
-  font-family: var(--dashboard-font);
+  font-family: var(--font-family-sans);
   font-weight: var(--font-rg);
 }
 

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

@@ -8,10 +8,10 @@ export class ZLogo {
     if (this.height) {
       style["height"] = style["max-height"] = `${this.height}px`;
     }
-    return (h(Host, { style: style }, this.link ?
-      h("a", { href: this.link, target: this.targetblank ? "_blank" : "_self" },
-        h("img", { alt: this.imagealt })) :
-      h("img", { alt: this.imagealt })));
+    return (h(Host, { style: style, class: { "mobile": !!this.mobileLogo } }, this.link ?
+      h("a", { href: this.link, target: this.targetBlank ? "_blank" : "_self" },
+        h("img", { alt: this.imageAlt })) :
+      h("img", { alt: this.imageAlt })));
   }
   static get is() { return "z-logo"; }
   static get encapsulation() { return "shadow"; }
@@ -56,7 +56,7 @@ export class ZLogo {
       "attribute": "height",
       "reflect": false
     },
-    "imagealt": {
+    "imageAlt": {
       "type": "string",
       "mutable": false,
       "complexType": {
@@ -70,7 +70,7 @@ export class ZLogo {
         "tags": [],
         "text": "alternative image text"
       },
-      "attribute": "imagealt",
+      "attribute": "image-alt",
       "reflect": false
     },
     "link": {
@@ -90,7 +90,7 @@ export class ZLogo {
       "attribute": "link",
       "reflect": false
     },
-    "targetblank": {
+    "targetBlank": {
       "type": "boolean",
       "mutable": false,
       "complexType": {
@@ -104,7 +104,24 @@ export class ZLogo {
         "tags": [],
         "text": "link target: true means _blank, false means _self"
       },
-      "attribute": "targetblank",
+      "attribute": "target-blank",
+      "reflect": false
+    },
+    "mobileLogo": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "if true, the mobile logo is displayed, otherwise the desktop one"
+      },
+      "attribute": "mobile-logo",
       "reflect": false
     }
   }; }