@zanichelli/albe-web-components 2.33.1 → 2.33.3

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;
+}

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

@@ -0,0 +1,87 @@
+import { Component, Prop, h } from "@stencil/core";
+export class ZMyzCardCover {
+  hadleOnImageError() {
+    this.img = this.defaultimg;
+  }
+  render() {
+    return (h("img", { class: this.faded && "faded", onError: this.hadleOnImageError.bind(this), alt: this.titolo, src: this.img }));
+  }
+  static get is() { return "z-myz-card-cover"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "img": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "image source"
+      },
+      "attribute": "img",
+      "reflect": false
+    },
+    "titolo": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "cover alt title"
+      },
+      "attribute": "titolo",
+      "reflect": false
+    },
+    "faded": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "faded status"
+      },
+      "attribute": "faded",
+      "reflect": false
+    },
+    "defaultimg": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "default error image source"
+      },
+      "attribute": "defaultimg",
+      "reflect": false
+    }
+  }; }
+}

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

@@ -0,0 +1,11 @@
+img {
+  display: block;
+  margin: auto auto;
+  height: 340px;
+  max-width: 100%;
+  object-fit: cover;
+}
+
+img.faded {
+  opacity: 0.3;
+}

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

@@ -0,0 +1,177 @@
+import { Component, Prop, h, Listen, Event } from "@stencil/core";
+import { ButtonVariantEnum } from "../../../../beans";
+/**
+ * @slot  - generic card slot
+ * @slot info - flipped card info
+ */
+export class ZMyzCardDictionary {
+  constructor() {
+    /** card is disabled */
+    this.disabled = false;
+    /** card is flipped */
+    this.flipped = false;
+    /** flip button label */
+    this.flipbuttonlabel = "INFO";
+    /** hide info button */
+    this.hideinfobtn = false;
+  }
+  handleFlipCard(e) {
+    this.flipCard(e.detail);
+  }
+  flipCard(showBack = true) {
+    this.flipped = showBack;
+    this.cardFlipped.emit(showBack);
+  }
+  render() {
+    return (h("div", null,
+      h("z-myz-card", null,
+        h("z-myz-card-header", { titolo: this.name }),
+        h("div", { class: `content ${this.flipped ? "flipped" : ""}` },
+          h("div", { class: "front" },
+            h("z-myz-card-body", null,
+              h("z-myz-card-cover", { slot: "cover", titolo: this.name, img: this.cover, faded: this.disabled })),
+            h("z-button", { class: this.hideinfobtn ? "hideInfo" : "", variant: ButtonVariantEnum.secondary, icon: "informationsource", issmall: true, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)),
+          h("div", { class: "back" },
+            h("slot", { name: "info" }))),
+        h("slot", null))));
+  }
+  static get is() { return "z-myz-card-dictionary"; }
+  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": "card title"
+      },
+      "attribute": "name",
+      "reflect": false
+    },
+    "cover": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "card cover"
+      },
+      "attribute": "cover",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "card is disabled"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "flipped": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "card is flipped"
+      },
+      "attribute": "flipped",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "flipbuttonlabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "flip button label"
+      },
+      "attribute": "flipbuttonlabel",
+      "reflect": false,
+      "defaultValue": "\"INFO\""
+    },
+    "hideinfobtn": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "hide info button"
+      },
+      "attribute": "hideinfobtn",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "cardFlipped",
+      "name": "cardFlipped",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "when card is flipped"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get listeners() { return [{
+      "name": "flipCard",
+      "method": "handleFlipCard",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -0,0 +1,85 @@
+:host {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host > div {
+  position: relative;
+  height: 522px;
+  width: 100%;
+  transition: -webkit-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
+}
+
+:host > div .content {
+  position: relative;
+  height: 522px;
+  width: 100%;
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  transition: -webkit-transform 0.5s ease-out;
+  transition: transform 0.5s ease-out;
+  transition: transform 0.5s ease-out, -webkit-transform 0.5s ease-out;
+  z-index: 2;
+}
+
+:host > div .content.flipped {
+  -webkit-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+  margin-top: -2px;
+}
+
+:host > div .front,
+:host > div .back {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  top: 0;
+  left: 0;
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+}
+
+:host > div .front {
+  z-index: 2;
+  top: 0;
+  left: 0;
+  -webkit-transform: rotateY(0deg);
+  transform: rotateY(0deg);
+}
+
+:host > div .front z-button {
+  position: absolute;
+  z-index: 3;
+  top: calc(var(--space-unit) * 0.5);
+  left: calc(-1 * var(--space-unit));
+}
+
+:host > div .back {
+  padding: 0 var(--space-unit);
+  margin-left: calc(-1 * var(--space-unit));
+  z-index: 1;
+  top: 0;
+  left: 0;
+  -webkit-transform: rotateY(180deg);
+  transform: rotateY(180deg);
+  display: flex;
+  justify-content: center;
+}
+
+.hideInfo {
+  display: none;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}