@zanichelli/albe-web-components 2.30.0-rc1 → 2.30.0-rc2

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

@@ -0,0 +1,89 @@
+import { Component, Prop, h, Host } from "@stencil/core";
+import { DividerSize, DividerOrientation } from "../../beans";
+export class ZDivider {
+  constructor() {
+    /** [optional] Divider size */
+    this.size = DividerSize.small;
+    /** [optional] Divider color */
+    this.color = "gray200";
+    /** [optional] Divider orintation */
+    this.orientation = DividerOrientation.horizontal;
+  }
+  render() {
+    return (h(Host, { class: `divider-${this.size} divider-${this.orientation}`, style: { backgroundColor: `var(--${this.color})` } }));
+  }
+  static get is() { return "z-divider"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DividerSize",
+        "resolved": "DividerSize.large | DividerSize.medium | DividerSize.small",
+        "references": {
+          "DividerSize": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Divider size"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "DividerSize.small"
+    },
+    "color": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Divider color"
+      },
+      "attribute": "color",
+      "reflect": false,
+      "defaultValue": "\"gray200\""
+    },
+    "orientation": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "DividerOrientation",
+        "resolved": "DividerOrientation.horizontal | DividerOrientation.vertical",
+        "references": {
+          "DividerOrientation": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Divider orintation"
+      },
+      "attribute": "orientation",
+      "reflect": false,
+      "defaultValue": "DividerOrientation.horizontal"
+    }
+  }; }
+}

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

@@ -0,0 +1,37 @@
+:host {
+  display: block;
+  padding: 0;
+  margin: 0;
+}
+
+:host.divider-horizontal {
+  width: 100%;
+}
+
+:host.divider-vertical {
+  height: 100%;
+}
+
+:host.divider-small.divider-horizontal {
+  height: var(--border-size-small);
+}
+
+:host.divider-medium.divider-horizontal {
+  height: var(--border-size-medium);
+}
+
+:host.divider-large.divider-horizontal {
+  height: var(--border-size-large);
+}
+
+:host.divider-small.divider-vertical {
+  width: var(--border-size-small);
+}
+
+:host.divider-medium.divider-vertical {
+  width: var(--border-size-medium);
+}
+
+:host.divider-large.divider-vertical {
+  width: var(--border-size-large);
+}

package/dist/collection/components/z-ghost-loading/index.js

@@ -0,0 +1,14 @@
+import { Component, h, Host } from '@stencil/core';
+export class ZGhostLoading {
+  render() {
+    return (h(Host, null));
+  }
+  static get is() { return "z-ghost-loading"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+}

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

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

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

@@ -0,0 +1,274 @@
+import { Component, Prop, h, Host, State, Listen } from "@stencil/core";
+import classNames from "classnames";
+import { PopoverPosition, PopoverBorderRadius, PopoverShadow, KeyboardKeys, } from "../../beans";
+import { getElementTree } from "../../utils/utils";
+export class ZPopover {
+  /**
+   * Constructor.
+   */
+  constructor() {
+    /** [optional] Popover position */
+    this.position = PopoverPosition["after-up"];
+    /** [optional] Background color token for popover */
+    this.backgroundColor = "color-white";
+    /** [optional] Border radius token for popover */
+    this.borderRadius = PopoverBorderRadius.small;
+    /** [optional] Box shadow token for popover */
+    this.boxShadow = PopoverShadow["shadow-1"];
+    /** [optional] Show or hide arrow */
+    this.showArrow = false;
+    /** [optional] Sets padding for Popover container */
+    this.padding = "8px";
+    this.isVisible = false;
+    this.defaultPosition = this.position;
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+  }
+  closePopover() {
+    this.isVisible = false;
+  }
+  closePopoverWithKeyboard(e) {
+    if (e.key === KeyboardKeys.ESC) {
+      this.closePopover();
+    }
+  }
+  handleClick(event) {
+    this.isVisible = !this.isVisible;
+    this.checkSpaceAvailable();
+    event.stopPropagation();
+  }
+  handleKeyDown(event) {
+    if (event.code === KeyboardKeys.ENTER) {
+      this.isVisible = !this.isVisible;
+      this.checkSpaceAvailable();
+    }
+  }
+  handleOutsideClick(e) {
+    const tree = getElementTree(e.target);
+    const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-popover");
+    if (!parent) {
+      this.isVisible = false;
+    }
+  }
+  checkSpaceAvailable() {
+    if (!this.isVisible) {
+      this.position = this.defaultPosition;
+      return;
+    }
+    const width = document.body.clientWidth;
+    const height = window.innerHeight;
+    const l = this.popoverElem.getBoundingClientRect().left;
+    const r = this.popoverElem.getBoundingClientRect().right;
+    const t = this.popoverElem.getBoundingClientRect().top;
+    const b = this.popoverElem.getBoundingClientRect().bottom;
+    let firstSide = this.position.split("-")[0];
+    let secondSide = this.position.split("-")[1];
+    // If top is outside viewport
+    if (t < 0) {
+      if (this.position.startsWith("above")) {
+        firstSide = "below";
+      }
+      else {
+        secondSide = "down";
+      }
+    }
+    // If bottom is outside viewport
+    if (b > height) {
+      if (this.position.startsWith("below")) {
+        firstSide = "above";
+      }
+      else {
+        secondSide = "up";
+      }
+    }
+    // If right is outside viewport
+    if (r > width) {
+      if (this.position.startsWith("above") ||
+        this.position.startsWith("below")) {
+        secondSide = "left";
+      }
+      else {
+        firstSide = "before";
+      }
+    }
+    // If left is outside viewport
+    if (l < 0) {
+      if (this.position.startsWith("above") ||
+        this.position.startsWith("below")) {
+        secondSide = "right";
+      }
+      else {
+        firstSide = "after";
+      }
+    }
+    this.position = PopoverPosition[`${firstSide}-${secondSide}`];
+  }
+  render() {
+    return (h(Host, { onKeyDown: this.handleKeyDown },
+      h("div", { tabindex: "0", onClick: (event) => this.handleClick(event), onKeyDown: (event) => {
+          if (event.key === KeyboardKeys.ENTER) {
+            this.handleClick(event);
+          }
+        } },
+        h("slot", { name: "trigger" })),
+      h("div", { ref: (e) => (this.popoverElem = e), class: classNames("popover-content-container", this.position, `border-radius-${this.borderRadius}`, this.boxShadow, { "show-arrow": this.showArrow }, { visible: this.isVisible }), style: {
+          backgroundColor: `var(--${this.backgroundColor})`,
+          padding: this.padding,
+        } },
+        h("slot", { name: "popover" }))));
+  }
+  static get is() { return "z-popover"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "position": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "PopoverPosition",
+        "resolved": "typeof PopoverPosition[\"above-center\"] | typeof PopoverPosition[\"above-left\"] | typeof PopoverPosition[\"above-right\"] | typeof PopoverPosition[\"after-center\"] | typeof PopoverPosition[\"after-down\"] | typeof PopoverPosition[\"after-up\"] | typeof PopoverPosition[\"before-center\"] | typeof PopoverPosition[\"before-down\"] | typeof PopoverPosition[\"before-up\"] | typeof PopoverPosition[\"below-center\"] | typeof PopoverPosition[\"below-left\"] | typeof PopoverPosition[\"below-right\"]",
+        "references": {
+          "PopoverPosition": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Popover position"
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "PopoverPosition[\"after-up\"]"
+    },
+    "backgroundColor": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Background color token for popover"
+      },
+      "attribute": "background-color",
+      "reflect": false,
+      "defaultValue": "\"color-white\""
+    },
+    "borderRadius": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "PopoverBorderRadius",
+        "resolved": "PopoverBorderRadius.medium | PopoverBorderRadius.none | PopoverBorderRadius.small",
+        "references": {
+          "PopoverBorderRadius": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Border radius token for popover"
+      },
+      "attribute": "border-radius",
+      "reflect": false,
+      "defaultValue": "PopoverBorderRadius.small"
+    },
+    "boxShadow": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "PopoverShadow",
+        "resolved": "typeof PopoverShadow[\"shadow-1\"] | typeof PopoverShadow[\"shadow-12\"] | typeof PopoverShadow[\"shadow-16\"] | typeof PopoverShadow[\"shadow-2\"] | typeof PopoverShadow[\"shadow-24\"] | typeof PopoverShadow[\"shadow-3\"] | typeof PopoverShadow[\"shadow-4\"] | typeof PopoverShadow[\"shadow-6\"] | typeof PopoverShadow[\"shadow-8\"]",
+        "references": {
+          "PopoverShadow": {
+            "location": "import",
+            "path": "../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Box shadow token for popover"
+      },
+      "attribute": "box-shadow",
+      "reflect": false,
+      "defaultValue": "PopoverShadow[\"shadow-1\"]"
+    },
+    "showArrow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Show or hide arrow"
+      },
+      "attribute": "show-arrow",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "padding": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "[optional] Sets padding for Popover container"
+      },
+      "attribute": "padding",
+      "reflect": false,
+      "defaultValue": "\"8px\""
+    }
+  }; }
+  static get states() { return {
+    "isVisible": {}
+  }; }
+  static get listeners() { return [{
+      "name": "closePopover",
+      "method": "closePopover",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "keyup",
+      "method": "closePopoverWithKeyboard",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }, {
+      "name": "click",
+      "method": "handleOutsideClick",
+      "target": "body",
+      "capture": true,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,236 @@
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+
+  position: relative;
+  display: inline-block;
+
+  --shadow-arrow-color: rgba(66, 69, 72, 0.2);
+  --shadow-arrow-below-color: rgba(66, 69, 72, 0.1);
+}
+
+.popover-content-container {
+  box-sizing: border-box;
+  visibility: hidden;
+  position: absolute;
+  min-width: 64px;
+  min-height: 32px;
+  z-index: 999;
+}
+
+.popover-content-container.visible {
+  visibility: visible;
+}
+
+/** Border-radius */
+
+.popover-content-container.border-radius-none {
+  border-radius: 0;
+}
+
+.popover-content-container.border-radius-small {
+  border-radius: var(--border-radius-small);
+}
+
+.popover-content-container.border-radius-medium {
+  border-radius: var(--border-radius);
+}
+
+/*
+Box-shadow
+*/
+
+.popover-content-container.shadow-1 {
+  box-shadow: var(--shadow-1);
+}
+
+.popover-content-container.shadow-2 {
+  box-shadow: var(--shadow-2);
+}
+
+.popover-content-container.shadow-3 {
+  box-shadow: var(--shadow-3);
+}
+
+.popover-content-container.shadow-4 {
+  box-shadow: var(--shadow-4);
+}
+
+.popover-content-container.shadow-6 {
+  box-shadow: var(--shadow-6);
+}
+
+.popover-content-container.shadow-8 {
+  box-shadow: var(--shadow-8);
+}
+
+.popover-content-container.shadow-12 {
+  box-shadow: var(--shadow-12);
+}
+
+.popover-content-container.shadow-16 {
+  box-shadow: var(--shadow-16);
+}
+
+.popover-content-container.shadow-24 {
+  box-shadow: var(--shadow-24);
+}
+
+/*
+Popover-positions
+*/
+
+.popover-content-container.after-down {
+  top: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.after-center {
+  top: 50%;
+  left: calc(100% + var(--space-unit));
+  transform: translateY(-50%);
+}
+
+.popover-content-container.after-up {
+  bottom: 0;
+  left: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.below-right {
+  left: 0;
+  top: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.below-center {
+  left: 50%;
+  top: calc(100% + var(--space-unit));
+  transform: translateX(-50%);
+}
+
+.popover-content-container.below-left {
+  right: 0;
+  top: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.before-down {
+  top: 0;
+  right: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.before-center {
+  top: 50%;
+  right: calc(100% + var(--space-unit));
+  transform: translateY(-50%);
+}
+
+.popover-content-container.before-up {
+  bottom: 0;
+  right: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.above-right {
+  left: 0;
+  bottom: calc(100% + var(--space-unit));
+}
+
+.popover-content-container.above-center {
+  left: 50%;
+  bottom: calc(100% + var(--space-unit));
+  transform: translateX(-50%);
+}
+
+.popover-content-container.above-left {
+  right: 0;
+  bottom: calc(100% + var(--space-unit));
+}
+
+/*
+Arrows
+*/
+.popover-content-container:before {
+  display: none;
+  position: absolute;
+  content: "";
+  width: 8px;
+  height: 8px;
+  z-index: -1;
+  background-color: inherit;
+  transform: rotate(45deg);
+}
+
+.popover-content-container.after-down:before {
+  top: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.after-center:before {
+  top: calc(50% - 4px);
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.after-up:before {
+  bottom: 12px;
+  left: -4px;
+  box-shadow: -1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.below-right:before {
+  left: 12px;
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.below-center:before {
+  left: calc(50% - 4px);
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.below-left:before {
+  right: 12px;
+  top: -4px;
+  box-shadow: -1px -1px 2px var(--shadow-arrow-below-color);
+}
+
+.popover-content-container.before-down:before {
+  top: 12px;
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.before-center:before {
+  top: calc(50% - 4px);
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.before-up:before {
+  bottom: 12px;
+  right: -4px;
+  box-shadow: 1px -1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-right:before {
+  left: 12px;
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-center:before {
+  left: calc(50% - 4px);
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+.popover-content-container.above-left:before {
+  right: 12px;
+  bottom: -4px;
+  box-shadow: 1px 1px 1.5px var(--shadow-arrow-color);
+}
+
+/** Show/Hide arrow */
+.popover-content-container.show-arrow:before {
+  display: block;
+}