@zanichelli/albe-web-components 2.31.2 → 2.33.1

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

@@ -1,274 +0,0 @@
-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

@@ -1,236 +0,0 @@
-: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;
-}

package/dist/collection/components/z-status-tag/index.js

@@ -1,125 +0,0 @@
-import { Component, Prop, h, Host } from "@stencil/core";
-import { StatusTagStatus } from "../../beans";
-import classNames from "classnames";
-export class ZStatusTag {
-  constructor() {
-    /** [optional] Status tag color */
-    this.status = StatusTagStatus.default;
-    if (!this.icon && !this.text) {
-      console.warn("z-status-tag must contain at least one prop between icon and text");
-    }
-  }
-  render() {
-    return (h(Host, { class: classNames(this.variant, "body-5-sb", {
-        expandable: this.expandable && this.icon && this.text,
-      }) },
-      this.icon && h("z-icon", { name: this.icon }),
-      this.text && h("span", null, this.text)));
-  }
-  static get is() { return "z-status-tag"; }
-  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": "[optional] Status tag icon"
-      },
-      "attribute": "icon",
-      "reflect": false
-    },
-    "text": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Status tag text"
-      },
-      "attribute": "text",
-      "reflect": false
-    },
-    "expandable": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Hide the text and show it on hover"
-      },
-      "attribute": "expandable",
-      "reflect": false
-    },
-    "status": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "StatusTagStatus",
-        "resolved": "StatusTagStatus.default | StatusTagStatus.error | StatusTagStatus.neutral | StatusTagStatus.success | StatusTagStatus.warning",
-        "references": {
-          "StatusTagStatus": {
-            "location": "import",
-            "path": "../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Status tag color"
-      },
-      "attribute": "status",
-      "reflect": true,
-      "defaultValue": "StatusTagStatus.default"
-    },
-    "variant": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ThemeVariant",
-        "resolved": "ThemeVariant.dark | ThemeVariant.light",
-        "references": {
-          "ThemeVariant": {
-            "location": "import",
-            "path": "../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "[optional] Status tag style"
-      },
-      "attribute": "variant",
-      "reflect": false
-    }
-  }; }
-}