@zanichelli/albe-web-components 6.6.0 → 6.6.2

package/dist/collection/components/z-ghost-loading/styles.css

@@ -1,34 +1,34 @@
-:host {
-  display: inline-block;
-  overflow: hidden;
-  width: 100%;
-  height: 100%;
-  background: var(--bg-neutral-100);
-  border-radius: 4px;
-  transform: translate3d(0, 0, 0);
-}
-
-:host::after {
-  display: block;
-  width: 100%;
-  height: 100%;
-  animation: progress 1.6s ease-in-out infinite;
-  background-image: linear-gradient(
-    90deg,
-    var(--bg-neutral-100) 0%,
-    var(--bg-neutral-150) 95%,
-    var(--bg-neutral-100) 100%
-  );
-  box-shadow: #e8ebee20 0 0 1px;
-  content: " ";
-}
-
-@keyframes progress {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  100% {
-    transform: translateX(100%);
-  }
-}
+:host {
+  display: inline-block;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  background: var(--bg-neutral-100);
+  border-radius: 4px;
+  transform: translate3d(0, 0, 0);
+}
+
+:host::after {
+  display: block;
+  width: 100%;
+  height: 100%;
+  animation: progress 1.6s ease-in-out infinite;
+  background-image: linear-gradient(
+    90deg,
+    var(--bg-neutral-100) 0%,
+    var(--bg-neutral-150) 95%,
+    var(--bg-neutral-100) 100%
+  );
+  box-shadow: #e8ebee20 0 0 1px;
+  content: " ";
+}
+
+@keyframes progress {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}

package/dist/collection/components/z-info-reveal/index.js

@@ -1,147 +1,147 @@
-import { h, Host } from "@stencil/core";
-import { InfoRevealPosition } from "../../beans";
-/**
- * Info reveal component.
- *
- * @slot - info to display in the info box. If more than one element has been slotted,
- * by clicking on the panel it switches to the next info element.
- * @cssprop --z-info-reveal-theme--surface - background color of the info reveal panel.
- * @cssprop --z-info-reveal-theme--text - foreground color of the info reveal panel.
- * @cssprop --z-info-reveal-shadow - shadow of the info reveal panel.
- * @cssprop --z-info-reveal-max-width - max width of the info reveal panel.
- */
-export class ZInfoReveal {
-  constructor() {
-    /** Name of the icon for the open button */
-    this.icon = "informationsource";
-    /** Info reveal's position */
-    this.position = InfoRevealPosition.BOTTOM_RIGHT;
-    /** Whether the info panel is open. */
-    this.open = false;
-    /** Current index for the info queue. */
-    this.currentIndex = null;
-  }
-  watchItems() {
-    Array.from(this.el.children).forEach((child, index) => {
-      if (this.currentIndex === index) {
-        child.setAttribute("data-current", "");
-      }
-      else {
-        child.removeAttribute("data-current");
-      }
-    });
-  }
-  /**
-   * Open the info box.
-   */
-  openInfoBox() {
-    this.currentIndex = 0;
-    this.open = true;
-  }
-  /**
-   * Close the info box.
-   */
-  closeInfoBox() {
-    this.open = false;
-  }
-  /**
-   * Navigate slotted info.
-   * It closes the info box after the last info has been navigated.
-   */
-  next() {
-    this.currentIndex = this.currentIndex + 1;
-    if (this.currentIndex === this.el.children.length) {
-      this.closeInfoBox();
-    }
-  }
-  render() {
-    return (h(Host, { open: this.open }, h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
-  }
-  static get is() { return "z-info-reveal"; }
-  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": true,
-        "docs": {
-          "tags": [],
-          "text": "Name of the icon for the open button"
-        },
-        "attribute": "icon",
-        "reflect": false,
-        "defaultValue": "\"informationsource\""
-      },
-      "position": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "InfoRevealPosition",
-          "resolved": "InfoRevealPosition.BOTTOM_LEFT | InfoRevealPosition.BOTTOM_RIGHT | InfoRevealPosition.TOP_LEFT | InfoRevealPosition.TOP_RIGHT",
-          "references": {
-            "InfoRevealPosition": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Info reveal's position"
-        },
-        "attribute": "position",
-        "reflect": true,
-        "defaultValue": "InfoRevealPosition.BOTTOM_RIGHT"
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Text that appears on closed panel next to the open button."
-        },
-        "attribute": "label",
-        "reflect": false
-      }
-    };
-  }
-  static get states() {
-    return {
-      "open": {},
-      "currentIndex": {}
-    };
-  }
-  static get elementRef() { return "el"; }
-  static get watchers() {
-    return [{
-        "propName": "currentIndex",
-        "methodName": "watchItems"
-      }];
-  }
-}
+import { h, Host } from "@stencil/core";
+import { InfoRevealPosition } from "../../beans";
+/**
+ * Info reveal component.
+ *
+ * @slot - info to display in the info box. If more than one element has been slotted,
+ * by clicking on the panel it switches to the next info element.
+ * @cssprop --z-info-reveal-theme--surface - background color of the info reveal panel.
+ * @cssprop --z-info-reveal-theme--text - foreground color of the info reveal panel.
+ * @cssprop --z-info-reveal-shadow - shadow of the info reveal panel.
+ * @cssprop --z-info-reveal-max-width - max width of the info reveal panel.
+ */
+export class ZInfoReveal {
+  constructor() {
+    /** Name of the icon for the open button */
+    this.icon = "informationsource";
+    /** Info reveal's position */
+    this.position = InfoRevealPosition.BOTTOM_RIGHT;
+    /** Whether the info panel is open. */
+    this.open = false;
+    /** Current index for the info queue. */
+    this.currentIndex = null;
+  }
+  watchItems() {
+    Array.from(this.el.children).forEach((child, index) => {
+      if (this.currentIndex === index) {
+        child.setAttribute("data-current", "");
+      }
+      else {
+        child.removeAttribute("data-current");
+      }
+    });
+  }
+  /**
+   * Open the info box.
+   */
+  openInfoBox() {
+    this.currentIndex = 0;
+    this.open = true;
+  }
+  /**
+   * Close the info box.
+   */
+  closeInfoBox() {
+    this.open = false;
+  }
+  /**
+   * Navigate slotted info.
+   * It closes the info box after the last info has been navigated.
+   */
+  next() {
+    this.currentIndex = this.currentIndex + 1;
+    if (this.currentIndex === this.el.children.length) {
+      this.closeInfoBox();
+    }
+  }
+  render() {
+    return (h(Host, { open: this.open }, h("button", { class: "z-info-reveal-trigger", onClick: this.openInfoBox.bind(this) }, this.label && h("span", { class: "z-info-reveal-label" }, this.label), h("z-icon", { name: this.icon })), this.open && (h("div", { class: "info-box", onClick: this.next.bind(this), tabIndex: 0 }, h("slot", null), h("button", { class: "z-info-reveal-close", onClick: this.closeInfoBox.bind(this) }, h("z-icon", { name: "close" }))))));
+  }
+  static get is() { return "z-info-reveal"; }
+  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": true,
+        "docs": {
+          "tags": [],
+          "text": "Name of the icon for the open button"
+        },
+        "attribute": "icon",
+        "reflect": false,
+        "defaultValue": "\"informationsource\""
+      },
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "InfoRevealPosition",
+          "resolved": "InfoRevealPosition.BOTTOM_LEFT | InfoRevealPosition.BOTTOM_RIGHT | InfoRevealPosition.TOP_LEFT | InfoRevealPosition.TOP_RIGHT",
+          "references": {
+            "InfoRevealPosition": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Info reveal's position"
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "InfoRevealPosition.BOTTOM_RIGHT"
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Text that appears on closed panel next to the open button."
+        },
+        "attribute": "label",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "open": {},
+      "currentIndex": {}
+    };
+  }
+  static get elementRef() { return "el"; }
+  static get watchers() {
+    return [{
+        "propName": "currentIndex",
+        "methodName": "watchItems"
+      }];
+  }
+}

package/dist/collection/components/z-info-reveal/styles.css

@@ -1,103 +1,103 @@
-:host {
-  --z-info-reveal-theme--surface: var(--color-black);
-  --z-info-reveal-theme--text: var(--color-white);
-  --z-info-reveal-shadow: var(--shadow-2);
-  --z-info-reveal-max-width: 375px; /* defaults to average width of mobile devices */
-
-  position: relative;
-  display: flex;
-  width: fit-content;
-  background-color: var(--z-info-reveal-theme--surface);
-  color: var(--z-info-reveal-theme--text);
-  font-size: var(--font-size-3);
-  font-weight: var(--font-rg);
-  letter-spacing: 0;
-  line-height: 1.5;
-}
-
-button {
-  padding: 0;
-  border: none;
-  background-color: transparent;
-  border-radius: 0;
-  color: inherit;
-  cursor: pointer;
-  fill: currentcolor;
-  font-family: inherit;
-  font-size: inherit;
-  font-weight: inherit;
-  letter-spacing: inherit;
-  line-height: inherit;
-}
-
-z-icon {
-  --z-icon-width: calc(var(--space-unit) * 3);
-  --z-icon-height: calc(var(--space-unit) * 3);
-
-  display: flex;
-}
-
-.z-info-reveal-trigger {
-  display: flex;
-  width: fit-content;
-  height: 100%;
-  align-items: center;
-  padding: calc(var(--space-unit) / 2);
-  box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
-}
-
-:host([position="top_left"]) .z-info-reveal-trigger,
-:host([position="bottom_left"]) .z-info-reveal-trigger {
-  flex-direction: row-reverse;
-}
-
-:host([open]) .z-info-reveal-trigger {
-  box-shadow: none;
-}
-
-.info-box {
-  position: absolute;
-  display: flex;
-  max-width: var(--z-info-reveal-max-width);
-  padding: calc(var(--space-unit) / 2);
-  background-color: var(--z-info-reveal-theme--surface);
-  box-shadow: var(--z-info-reveal-shadow);
-  column-gap: calc(var(--space-unit) / 2);
-  cursor: pointer;
-}
-
-:host([position="bottom_left"]) .info-box,
-:host([position="bottom_right"]) .info-box {
-  bottom: 0;
-}
-
-:host([position="top_right"]) .info-box,
-:host([position="bottom_right"]) .info-box {
-  right: 0;
-}
-
-:host([position="top_left"]) .info-box,
-:host([position="bottom_left"]) .info-box {
-  left: 0;
-  flex-direction: row-reverse;
-}
-
-::slotted(*) {
-  display: none;
-  width: max-content;
-}
-
-::slotted([data-current]) {
-  display: block;
-}
-
-:host([position="top_left"]) .z-info-reveal-close,
-:host([position="top_right"]) .z-info-reveal-close {
-  align-self: flex-start;
-}
-
-:host([position="bottom_left"]) .z-info-reveal-close,
-:host([position="bottom_right"]) .z-info-reveal-close {
-  align-self: flex-end;
-}
+:host {
+  --z-info-reveal-theme--surface: var(--color-black);
+  --z-info-reveal-theme--text: var(--color-white);
+  --z-info-reveal-shadow: var(--shadow-2);
+  --z-info-reveal-max-width: 375px; /* defaults to average width of mobile devices */
+
+  position: relative;
+  display: flex;
+  width: fit-content;
+  background-color: var(--z-info-reveal-theme--surface);
+  color: var(--z-info-reveal-theme--text);
+  font-size: var(--font-size-3);
+  font-weight: var(--font-rg);
+  letter-spacing: 0;
+  line-height: 1.5;
+}
+
+button {
+  padding: 0;
+  border: none;
+  background-color: transparent;
+  border-radius: 0;
+  color: inherit;
+  cursor: pointer;
+  fill: currentcolor;
+  font-family: inherit;
+  font-size: inherit;
+  font-weight: inherit;
+  letter-spacing: inherit;
+  line-height: inherit;
+}
+
+z-icon {
+  --z-icon-width: calc(var(--space-unit) * 3);
+  --z-icon-height: calc(var(--space-unit) * 3);
+
+  display: flex;
+}
+
+.z-info-reveal-trigger {
+  display: flex;
+  width: fit-content;
+  height: 100%;
+  align-items: center;
+  padding: calc(var(--space-unit) / 2);
+  box-shadow: var(--z-info-reveal-shadow);
+  column-gap: calc(var(--space-unit) / 2);
+}
+
+:host([position="top_left"]) .z-info-reveal-trigger,
+:host([position="bottom_left"]) .z-info-reveal-trigger {
+  flex-direction: row-reverse;
+}
+
+:host([open]) .z-info-reveal-trigger {
+  box-shadow: none;
+}
+
+.info-box {
+  position: absolute;
+  display: flex;
+  max-width: var(--z-info-reveal-max-width);
+  padding: calc(var(--space-unit) / 2);
+  background-color: var(--z-info-reveal-theme--surface);
+  box-shadow: var(--z-info-reveal-shadow);
+  column-gap: calc(var(--space-unit) / 2);
+  cursor: pointer;
+}
+
+:host([position="bottom_left"]) .info-box,
+:host([position="bottom_right"]) .info-box {
+  bottom: 0;
+}
+
+:host([position="top_right"]) .info-box,
+:host([position="bottom_right"]) .info-box {
+  right: 0;
+}
+
+:host([position="top_left"]) .info-box,
+:host([position="bottom_left"]) .info-box {
+  left: 0;
+  flex-direction: row-reverse;
+}
+
+::slotted(*) {
+  display: none;
+  width: max-content;
+}
+
+::slotted([data-current]) {
+  display: block;
+}
+
+:host([position="top_left"]) .z-info-reveal-close,
+:host([position="top_right"]) .z-info-reveal-close {
+  align-self: flex-start;
+}
+
+:host([position="bottom_left"]) .z-info-reveal-close,
+:host([position="bottom_right"]) .z-info-reveal-close {
+  align-self: flex-end;
+}