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

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

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

package/dist/collection/components/z-status-tag/styles.css

@@ -0,0 +1,133 @@
+:host {
+  --z-icon-width: 14px;
+  --z-icon-height: 14px;
+
+  font-family: var(--font-family-sans);
+
+  height: 22px;
+  border-radius: var(--border-radius);
+  padding-right: 4px;
+  padding-left: 4px;
+  text-transform: uppercase;
+
+  display: inline-flex;
+  align-items: center;
+}
+
+:host(.expandable) > z-icon {
+  margin-right: 0;
+  transition: margin-right 0.3s ease-out 0.2s;
+}
+
+:host(:not(.expandable)) > z-icon:not(:last-child),
+:host(.expandable:hover) > z-icon:not(:last-child) {
+  margin-right: var(--space-unit);
+  transition: margin-right 0.3s ease-out 0s;
+}
+
+:host(.expandable) > span {
+  max-width: 0;
+  transition: max-width 0.3s ease-out 0.2s;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+:host(.expandable:hover) > span {
+  max-width: 20rem;
+  transition: max-width 0.3s ease-out 0s;
+}
+
+/*Warning status-tag styles*/
+:host([status="warning"]) {
+  background-color: var(--status-warning-yellow-lighter);
+  color: var(--status-warning-yellow-dark);
+  fill: var(--status-warning-yellow-dark);
+}
+
+:host([status="warning"].light) {
+  background-color: transparent;
+  color: var(--status-warning-yellow-dark);
+  fill: var(--status-warning-yellow-dark);
+}
+
+:host([status="warning"].dark) {
+  background-color: var(--status-warning-yellow-dark);
+  color: var(--status-warning-yellow-lighter);
+  fill: var(--status-warning-yellow-lighter);
+}
+
+/*Error status-tag styles*/
+:host([status="error"]) {
+  background-color: var(--status-error-red-lighter);
+  color: var(--status-error-red-dark);
+  fill: var(--status-error-red-dark);
+}
+
+:host([status="error"].light) {
+  background-color: transparent;
+  color: var(--status-error-red-dark);
+  fill: var(--status-error-red-dark);
+}
+
+:host([status="error"].dark) {
+  background-color: var(--status-error-red-dark);
+  color: var(--status-error-red-lighter);
+  fill: var(--status-error-red-lighter);
+}
+
+/*Success status-tag styles*/
+:host([status="success"]) {
+  background-color: var(--status-success-green-lighter);
+  color: var(--status-success-green-dark);
+  fill: var(--status-success-green-dark);
+}
+
+:host([status="success"].light) {
+  background-color: transparent;
+  color: var(--status-success-green-dark);
+  fill: var(--status-success-green-dark);
+}
+
+:host([status="success"].dark) {
+  background-color: var(--status-success-green-dark);
+  color: var(--status-success-green-lighter);
+  fill: var(--status-success-green-lighter);
+}
+
+/*Default status-tag styles*/
+:host([status="default"]) {
+  background-color: var(--myz-blue-lighter);
+  color: var(--myz-blue-dark);
+  fill: var(--myz-blue-dark);
+}
+
+:host([status="default"].light) {
+  background-color: transparent;
+  color: var(--myz-blue-dark);
+  fill: var(--myz-blue-dark);
+}
+
+:host([status="default"].dark) {
+  background-color: var(--myz-blue-dark);
+  color: var(--myz-blue-lighter);
+  fill: var(--myz-blue-lighter);
+}
+
+/*Neutral status-tag styles*/
+:host([status="neutral"]) {
+  background-color: var(--bg-grey-050);
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+}
+
+:host([status="neutral"].light) {
+  background-color: transparent;
+  color: var(--text-grey-800);
+  fill: var(--text-grey-800);
+}
+
+:host([status="neutral"].dark) {
+  background-color: var(--bg-grey-800);
+  color: var(--text-white);
+  fill: var(--text-white);
+}

package/{www/build/breakpoints-c386984e.js → dist/collection/constants/breakpoints.js}

@@ -1,4 +1,3 @@
 const mobileBreakpoint = 767;
 const tabletBreakpoint = 1023;
-
-export { mobileBreakpoint as m, tabletBreakpoint as t };
+export { mobileBreakpoint, tabletBreakpoint };

package/dist/collection/constants/icons.js

@@ -0,0 +1,6 @@
+const icons = {
+  iconuserlogo: "user.png",
+  iconarrowup: "arrowUp.png",
+  iconarrowdown: "arrowDown.png"
+};
+export default icons;

package/dist/collection/index.js

@@ -0,0 +1,5 @@
+import { colorFromId } from "./utils/utils";
+export * from "./components";
+export const Utils = {
+  colorFromId
+};

package/dist/collection/snowflakes/myz/card/z-myz-card/index.js

@@ -0,0 +1,119 @@
+import { Component, h, Prop } from "@stencil/core";
+import { LicenseTypeEnum } from "../../../../beans/index";
+/**
+ * @slot  - generic card slot
+ */
+export class ZMyzCardComponent {
+  constructor() {
+    /** pressed status */
+    this.ispressed = false;
+    /** highlighted status */
+    this.ishighlighted = false;
+  }
+  retrieveClass() {
+    let elemClasses = "";
+    if (this.cardtype === LicenseTypeEnum.real)
+      elemClasses += "real";
+    else if (this.cardtype === LicenseTypeEnum.trial)
+      elemClasses += "trial";
+    if (this.faded) {
+      elemClasses += " faded";
+    }
+    else if (this.ispressed) {
+      elemClasses += " pressed";
+    }
+    else if (this.ishighlighted) {
+      elemClasses += " highlighted";
+    }
+    return elemClasses;
+  }
+  render() {
+    return (h("div", { class: this.retrieveClass(), tabindex: "0" },
+      h("slot", null)));
+  }
+  static get is() { return "z-myz-card"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "faded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "faded status"
+      },
+      "attribute": "faded",
+      "reflect": false
+    },
+    "cardtype": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "LicenseTypeEnum",
+        "resolved": "LicenseTypeEnum.real | LicenseTypeEnum.trial | LicenseTypeEnum.virtual",
+        "references": {
+          "LicenseTypeEnum": {
+            "location": "import",
+            "path": "../../../../beans/index"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "graphic variant (optional)"
+      },
+      "attribute": "cardtype",
+      "reflect": false
+    },
+    "ispressed": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "pressed status"
+      },
+      "attribute": "ispressed",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "ishighlighted": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "highlighted status"
+      },
+      "attribute": "ishighlighted",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}

package/dist/collection/snowflakes/myz/card/z-myz-card/styles.css

@@ -0,0 +1,38 @@
+div {
+  background-color: var(--color-surface01);
+  display: flex;
+  flex-direction: column;
+  width: auto;
+  box-sizing: border-box;
+  width: 256px; /* TODO: width must be 100% - must be handled in dashboard */
+  height: 522px;
+  border: var(--border-size-medium) solid var(--color-surface03);
+  border-radius: var(--border-radius);
+}
+
+div.real,
+div.trial {
+  border-color: var(--accent);
+}
+
+/* HIDDEN status */
+div.faded {
+  border: var(--border-size-medium) solid var(--color-surface02);
+}
+
+/* HIGHLIGHTED status */
+div.highlighted {
+  box-shadow: var(--shadow-4);
+  outline: none;
+}
+
+/* PRESSED status */
+div.pressed {
+  box-shadow: var(--shadow-8);
+  outline: none;
+}
+
+div:focus {
+  box-shadow: var(--shadow-focus-primary);
+  outline: none;
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/index.js

@@ -0,0 +1,148 @@
+import { Component, Prop, h, Event } from "@stencil/core";
+import { AlertTypesEnum } from "../../../../beans";
+export class ZMyzCardAlert {
+  emitUndoAction() {
+    this.undoAction.emit({ actionType: this.type });
+  }
+  handleSpaceKeyPress(e) {
+    if (e.keyCode == 32 || e.keyCode == 13) {
+      e.preventDefault();
+      this.emitUndoAction();
+    }
+  }
+  handleActionButtonClick(e) {
+    e.preventDefault();
+    this.emitUndoAction();
+  }
+  retrieveClass() {
+    let className = "";
+    switch (this.type) {
+      case "add":
+        className = "addAlert";
+        break;
+      case "remove":
+        className = "removeAlert";
+        break;
+      default:
+        className = "";
+        break;
+    }
+    return className;
+  }
+  getAlertType() {
+    switch (this.type) {
+      case "add":
+        return AlertTypesEnum.success;
+      case "remove":
+        return AlertTypesEnum.warning;
+      default:
+        return null;
+    }
+  }
+  render() {
+    return (h("div", { class: "alert-external-wrapper " + this.retrieveClass() },
+      h("z-alert", { type: this.getAlertType() },
+        h("div", { class: "relativeContainer" },
+          h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }),
+          h("span", { class: "contentText" }, this.contenttext),
+          this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "contentAction", onClick: (e) => {
+              this.handleActionButtonClick(e);
+            }, onKeyPress: (e) => {
+              this.handleSpaceKeyPress(e);
+            } }, this.actiontext))))));
+  }
+  static get is() { return "z-myz-card-alert"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "iconname": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "icon name"
+      },
+      "attribute": "iconname",
+      "reflect": false
+    },
+    "contenttext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "content text"
+      },
+      "attribute": "contenttext",
+      "reflect": false
+    },
+    "actiontext": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "action button text"
+      },
+      "attribute": "actiontext",
+      "reflect": false
+    },
+    "type": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "alert variant type"
+      },
+      "attribute": "type",
+      "reflect": false
+    }
+  }; }
+  static get events() { return [{
+      "method": "undoAction",
+      "name": "undoAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "undo action click/keyboard event, returns actionType"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-alert/styles.css

@@ -0,0 +1,62 @@
+:host {
+  position: absolute;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  width: 100%;
+  top: 0px;
+  left: 0px;
+  z-index: 2;
+}
+
+:host > z-alert {
+  height: calc(var(--space-unit) * 6);
+}
+
+.relativeContainer {
+  position: relative;
+  display: grid;
+  grid-template-columns: 18px auto 46px;
+  grid-template-rows: 1fr;
+  grid-column-gap: var(--space-unit);
+  align-items: center;
+  padding: 0;
+  outline: none;
+}
+
+.relativeContainer::-moz-focus-inner {
+  border: 0;
+}
+
+.alert-external-wrapper.removeAlert {
+  border: var(--border-size-medium) solid var(--color-surface02);
+  border-top: none;
+}
+
+:host div.addAlert {
+  background: var(--color-success-inverse);
+}
+
+:host div.removeAlert {
+  background: var(--color-warning-inverse);
+}
+
+:host div > .contentText {
+  color: var(--color-surface05);
+  font-size: 14px;
+  letter-spacing: 0.16px;
+  line-height: 20px;
+}
+
+:host div > .contentAction {
+  color: var(--color-primary01);
+  font-size: 12px;
+  font-weight: var(--font-sb);
+  height: 20px;
+  letter-spacing: 0.32px;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+:host div > z-icon {
+  justify-self: center;
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-body/index.js

@@ -0,0 +1,20 @@
+import { Component, h } from "@stencil/core";
+/**
+ * @slot alert - card alert slot
+ * @slot cover - book cover slot
+ */
+export class ZMyzCardBody {
+  render() {
+    return (h("div", null,
+      h("slot", { name: "alert" }),
+      h("slot", { name: "cover" })));
+  }
+  static get is() { return "z-myz-card-body"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+}

package/dist/collection/snowflakes/myz/card/z-myz-card-body/styles.css

@@ -0,0 +1,13 @@
+:host {
+  height: 340px;
+  width: auto;
+}
+
+:host > div {
+  height: 340px;
+  width: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+}