@zanichelli/albe-web-components 2.31.0 → 2.31.1

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

@@ -1,51 +1,51 @@
-import { Component, Prop, h, State } from "@stencil/core";
-/**
- * @slot - section content
- */
-export class ZFooterSection {
-  constructor() {
-    this.isOpen = false;
-  }
-  renderToggleButton() {
-    return (h("button", { class: "toggleButton", 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": {}
-  }; }
-}
+import { Component, Prop, h, State } from "@stencil/core";
+/**
+ * @slot - section content
+ */
+export class ZFooterSection {
+  constructor() {
+    this.isOpen = false;
+  }
+  renderToggleButton() {
+    return (h("button", { class: "toggleButton", 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": {}
+  }; }
+}

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

@@ -1,163 +1,163 @@
-:host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host > nav {
-  background-color: var(--gray900);
-  display: flex;
-  flex-direction: column;
-  justify-items: flex-start;
-  overflow: hidden;
-  margin: calc(var(--space-unit) / 2) 0;
-  padding: 0;
-}
-
-:host > nav > .header {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-  align-items: stretch;
-  align-content: flex-start;
-  height: calc(var(--space-unit) * 4);
-  border-bottom: 1px solid var(--gray50);
-  line-height: 1;
-}
-
-:host > nav > .header > h2 {
-  color: var(--color-white);
-  font-size: 16px;
-  margin: var(--space-unit) 0;
-}
-
-:host > nav > .header {
-  fill: var(--color-white);
-}
-
-:host > nav > .header > button {
-  position: absolute;
-  top: var(--space-unit);
-  right: 0;
-  margin: 0;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  appearance: none;
-  cursor: pointer;
-}
-
-:host > nav > .header > z-icon {
-  display: block;
-}
-
-:host > nav > .content {
-  background-color: var(--gray800);
-  display: none;
-  height: 0;
-  transition: 0.3s ease;
-  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
-}
-
-:host > nav > .content.show {
-  display: block;
-  height: auto;
-  transition: 0.3s ease;
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host > nav {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-template-rows: 1fr;
-    grid-column-gap: var(--grid-tablet-margin);
-    padding: calc(var(--space-unit) * 2) 0;
-    border-bottom: 1px solid var(--color-white);
-    margin: 0;
-    background-color: var(--gray800);
-  }
-
-  :host > nav > .header > button.toggleButton {
-    display: none;
-  }
-
-  :host > nav > .header {
-    border-bottom: none;
-    padding: 0;
-    margin: 0;
-  }
-
-  :host > nav > .header > h2 {
-    border: none;
-  }
-
-  :host > nav > .content,
-  :host > nav > .content.show {
-    grid-column: span 3;
-    width: 100%;
-    padding: 0;
-    margin: 0;
-
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-column-gap: var(--grid-tablet-margin);
-    grid-row-gap: var(--space-unit);
-    height: auto;
-    align-items: stretch;
-    align-content: stretch;
-    margin: 0;
-  }
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-  :host > nav {
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 40px 4fr;
-    padding: 0;
-    border-bottom: none;
-  }
-
-  :host > nav > .header {
-    position: relative;
-    display: inline-flex;
-    height: 24px;
-  }
-
-  :host > nav > .header > h2 {
-    width: auto;
-    font-size: 16px;
-    line-height: 1;
-    font-weight: 600;
-    color: var(--gray50);
-    padding: 0 0 var(--space-unit);
-    margin: 0;
-  }
-
-  :host > nav > .header::after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 100%;
-    left: 0;
-    width: 120px;
-    border-bottom: 1px solid var(--gray50);
-  }
-
-  :host > nav > .content,
-  :host > nav > .content.show {
-    grid-column: auto;
-
-    display: flex;
-    flex-direction: column;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-  }
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > nav {
+  background-color: var(--gray900);
+  display: flex;
+  flex-direction: column;
+  justify-items: flex-start;
+  overflow: hidden;
+  margin: calc(var(--space-unit) / 2) 0;
+  padding: 0;
+}
+
+:host > nav > .header {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  align-items: stretch;
+  align-content: flex-start;
+  height: calc(var(--space-unit) * 4);
+  border-bottom: 1px solid var(--gray50);
+  line-height: 1;
+}
+
+:host > nav > .header > h2 {
+  color: var(--color-white);
+  font-size: 16px;
+  margin: var(--space-unit) 0;
+}
+
+:host > nav > .header {
+  fill: var(--color-white);
+}
+
+:host > nav > .header > button {
+  position: absolute;
+  top: var(--space-unit);
+  right: 0;
+  margin: 0;
+  padding: 0;
+  background: transparent;
+  border: 0;
+  appearance: none;
+  cursor: pointer;
+}
+
+:host > nav > .header > z-icon {
+  display: block;
+}
+
+:host > nav > .content {
+  background-color: var(--gray800);
+  display: none;
+  height: 0;
+  transition: 0.3s ease;
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+:host > nav > .content.show {
+  display: block;
+  height: auto;
+  transition: 0.3s ease;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > nav {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-template-rows: 1fr;
+    grid-column-gap: var(--grid-tablet-margin);
+    padding: calc(var(--space-unit) * 2) 0;
+    border-bottom: 1px solid var(--color-white);
+    margin: 0;
+    background-color: var(--gray800);
+  }
+
+  :host > nav > .header > button.toggleButton {
+    display: none;
+  }
+
+  :host > nav > .header {
+    border-bottom: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  :host > nav > .header > h2 {
+    border: none;
+  }
+
+  :host > nav > .content,
+  :host > nav > .content.show {
+    grid-column: span 3;
+    width: 100%;
+    padding: 0;
+    margin: 0;
+
+    display: grid;
+    grid-template-columns: repeat(3, 1fr);
+    grid-column-gap: var(--grid-tablet-margin);
+    grid-row-gap: var(--space-unit);
+    height: auto;
+    align-items: stretch;
+    align-content: stretch;
+    margin: 0;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host > nav {
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 40px 4fr;
+    padding: 0;
+    border-bottom: none;
+  }
+
+  :host > nav > .header {
+    position: relative;
+    display: inline-flex;
+    height: 24px;
+  }
+
+  :host > nav > .header > h2 {
+    width: auto;
+    font-size: 16px;
+    line-height: 1;
+    font-weight: 600;
+    color: var(--gray50);
+    padding: 0 0 var(--space-unit);
+    margin: 0;
+  }
+
+  :host > nav > .header::after {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 120px;
+    border-bottom: 1px solid var(--gray50);
+  }
+
+  :host > nav > .content,
+  :host > nav > .content.show {
+    grid-column: auto;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    justify-content: flex-start;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

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

@@ -1,68 +1,68 @@
-import { Component, Prop, h } from "@stencil/core";
-export class ZFooterSocial {
-  render() {
-    return (h("a", { href: this.href, target: "_blank" },
-      h("img", { src: this.icon, alt: this.description })));
-  }
-  static get is() { return "z-footer-social"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "icon": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "icon url"
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "href": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "social link"
-      },
-      "attribute": "href",
-      "reflect": false
-    },
-    "description": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "social description"
-      },
-      "attribute": "description",
-      "reflect": false
-    }
-  }; }
-}
+import { Component, Prop, h } from "@stencil/core";
+export class ZFooterSocial {
+  render() {
+    return (h("a", { href: this.href, target: "_blank" },
+      h("img", { src: this.icon, alt: this.description })));
+  }
+  static get is() { return "z-footer-social"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "icon": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "icon url"
+      },
+      "attribute": "icon",
+      "reflect": false
+    },
+    "href": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "social link"
+      },
+      "attribute": "href",
+      "reflect": false
+    },
+    "description": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "social description"
+      },
+      "attribute": "description",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -1,23 +1,23 @@
-:host {
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host > a > img {
-  width: calc(var(--space-unit) * 3);
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-  :host > a > img {
-    width: 16px;
-  }
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > a > img {
+  width: calc(var(--space-unit) * 3);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host > a > img {
+    width: 16px;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}