@zanichelli/albe-web-components 2.33.1 → 2.33.3

package/dist/collection/components/notification/z-candybar/styles.css

@@ -0,0 +1,61 @@
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+	display: flex;
+	flex-direction: row;
+	flex-wrap: nowrap;
+	justify-content: center;
+  align-content: center;
+}
+
+:host > div {
+  position: fixed;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  top: 30vh;
+  max-width: 297px;
+  height: fit-content;
+  min-height: 232px;
+  z-index: 1000;
+  margin: auto;
+  overflow: auto;
+  overflow: -moz-scrollbars-none;
+  -ms-overflow-style: none;
+  background: var(--myz-blue-lighter);
+  border-radius: calc(var(--space-unit) * .5);
+  box-shadow: 0px -2px 4px 0px rgba(66, 69, 72, 0.4);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > div {
+    position: initial;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: center;
+    align-content: stretch;
+    position: fixed;
+    top: auto;
+    bottom: 0;
+    margin: 0 auto;
+    left: 0;
+    right: 0;
+    height: auto;
+    min-height: 138px;
+    max-width: 100%;
+    border-radius: 0px;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  :host > div {
+    min-height: 122px;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}

package/dist/collection/components/notification/z-cookiebar/index.js

@@ -0,0 +1,111 @@
+import { Component, Prop, h, Event } from "@stencil/core";
+import { ButtonVariantEnum } from "../../../beans";
+export class ZCookiebar {
+  emitAccept(ev) {
+    this.accept.emit({ ev });
+  }
+  handleOkButtonClick(ev) {
+    this.emitAccept(ev);
+    if (typeof this.callback === "function") {
+      this.callback();
+    }
+  }
+  handleOkButtonKeyUp(ev) {
+    this.emitAccept(ev);
+    if (ev.code === "Enter") {
+      if (typeof this.callback !== "undefined" &&
+        typeof this.callback === "function") {
+        this.callback();
+      }
+    }
+  }
+  renderContentSlot() {
+    return (h("div", { class: "content", slot: "content" },
+      h("div", null,
+        h("h2", null, "Su questo sito usiamo i cookie."),
+        h("div", null,
+          h("p", null,
+            "Se continui a navigare ci permetti di farlo secondo le regole spiegate nella nostra informativa sulla privacy relativa ai \u00A0",
+            h("a", { href: this.cookiepolicyurl, target: "_blank" }, "cookie"),
+            "."))),
+      h("z-button", { variant: ButtonVariantEnum.primary, onClick: (ev) => this.handleOkButtonClick(ev), onKeyUp: (ev) => this.handleOkButtonKeyUp(ev) }, "ACCETTA")));
+  }
+  render() {
+    return h("z-candybar", { class: `${this.hide ? "hidden" : ""}` }, this.renderContentSlot());
+  }
+  static get is() { return "z-cookiebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "cookiepolicyurl": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "cookie policy link url"
+      },
+      "attribute": "cookiepolicyurl",
+      "reflect": false
+    },
+    "hide": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "hide cookie bar (optional)"
+      },
+      "attribute": "hide",
+      "reflect": false
+    },
+    "callback": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "() => any",
+        "resolved": "() => any",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "callback to handle ok button action (optional)"
+      }
+    }
+  }; }
+  static get events() { return [{
+      "method": "accept",
+      "name": "accept",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted on ACCETTA button click, returns event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/notification/z-cookiebar/styles.css

@@ -0,0 +1,109 @@
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}
+
+z-candybar.hidden {
+  display: none;
+}
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: space-between;
+  align-items: stretch;
+  align-content: space-between;
+  color: var(--text-grey-800);
+  border-radius: calc(var(--space-unit) * .5);
+  font-size: 16px;
+  letter-spacing: 0px;
+  line-height: 24px;
+  padding: calc(var(--space-unit) * 3) calc(var(--space-unit) * 2);
+}
+
+.content > div > h2 {
+  margin: 0;
+  padding: 0;
+  color: var(--text-grey-800);
+  border-radius: 0px;
+  font-size: 18px;
+  font-weight: var(--font-sb);
+  letter-spacing: 0px;
+}
+
+.content > div > div {
+  padding: calc(var(--space-unit) * 3) 0;
+  font-size: 14px;
+  letter-spacing: 0.16px;
+  line-height: 20px;
+}
+
+.content > div > div > p {
+  margin: 0;
+}
+
+.content > div > div > p > a {
+  cursor: pointer;
+  font-weight: var(--font-sb);
+  color: var(--text-grey-800);
+  text-decoration: underline;
+  height: 14px;
+  display: inline-flex;
+}
+
+.content > div > div > p > a:visited {
+  color: var(--text-grey-800);
+  cursor: pointer;
+  z-index: 1000;
+}
+
+.content > z-button {
+  margin: 0;
+  width: 100%;
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  .content {
+    width: 100%;
+    flex-direction: row;
+    align-items: center;
+    font-size: 16px;
+    letter-spacing: 0px;
+    line-height: 24px;
+    padding: calc(var(--space-unit) * 4) calc(var(--space-unit) * 3);
+  }
+
+  .content > div {
+    width: 560px;
+  }
+
+  .content > div > h2 {
+    height: calc(var(--space-unit) * 3.5);
+  }
+
+  .content > div > div {
+    padding: 0;
+  }
+
+  .content > z-button {
+    margin: 0;
+    width: initial;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+  .content > div {
+    width: 935px;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+  .content {
+    padding-left: calc(var(--space-unit) * 4);
+    padding-right: calc(var(--space-unit) * 4);
+  }
+}

package/dist/collection/components/notification/z-info-box/index.js

@@ -0,0 +1,79 @@
+import { Component, Prop, h, Event } from '@stencil/core';
+/**
+ * @slot content - set the info box content
+ */
+export class ZInfoBox {
+  constructor() {
+    /** render close icon flag */
+    this.isclosable = true;
+  }
+  emitInfoBoxClose() {
+    this.infoBoxClose.emit({ boxid: this.boxid });
+  }
+  render() {
+    return (h("div", { id: this.boxid },
+      h("slot", { name: "content" }),
+      this.isclosable && h("z-icon", { name: "multiply", "data-action": "infoBoxClose", onClick: () => this.emitInfoBoxClose() })));
+  }
+  static get is() { return "z-info-box"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "boxid": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "info box unique id"
+      },
+      "attribute": "boxid",
+      "reflect": false
+    },
+    "isclosable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "render close icon flag"
+      },
+      "attribute": "isclosable",
+      "reflect": false,
+      "defaultValue": "true"
+    }
+  }; }
+  static get events() { return [{
+      "method": "infoBoxClose",
+      "name": "infoBoxClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted on close icon click"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

package/dist/collection/components/notification/z-info-box/styles.css

@@ -0,0 +1,23 @@
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}
+
+:host>div {
+  background: var(--accent-lighter);
+  padding: calc(var(--space-unit) * 2);
+  border-radius: var(--border-radius);
+  display: flex;
+  width: inherit;
+}
+
+:host>div>slot {
+  color: var(--text-grey-800);
+  font-size: 14px;
+}
+
+:host>div>z-icon {
+  fill: var(--myz-blue);
+  cursor: pointer;
+  margin-left: calc(var(--space-unit) * 2);
+}

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

@@ -0,0 +1,171 @@
+import { Component, Prop, h, Event } from '@stencil/core';
+import { NotificationType } from '../../../beans';
+/**
+ * @slot - the content of the notification
+ */
+export class ZNotification {
+  constructor() {
+    /** enable close icon */
+    this.showclose = false;
+    /** enable shadow */
+    this.showshadow = false;
+  }
+  handleActionButtonClick(e) {
+    e.preventDefault();
+    this.notificationAction.emit();
+  }
+  handleCloseButtonClick(e) {
+    e.preventDefault();
+    this.notificationClose.emit();
+  }
+  render() {
+    return (h("div", { class: {
+        "notification-container": true,
+        "success-notification": this.type === NotificationType.success,
+        "warning-notification": this.type === NotificationType.warning,
+        "error-notification": this.type === NotificationType.error,
+        "shadow": this.showshadow
+      } },
+      this.contenticonname && (h("z-icon", { name: this.contenticonname, width: 16, height: 16 })),
+      h("div", { class: "content-container" },
+        h("z-body", { class: "content-text", level: 4 },
+          h("slot", null)),
+        this.actiontext && !!this.actiontext.trim().length && (h("z-body", { class: "action-text", role: "button", tabindex: "0", onClick: (e) => {
+            this.handleActionButtonClick(e);
+          }, level: 5, variant: "semibold" }, this.actiontext))),
+      this.showclose && (h("z-icon", { class: "close-icon", name: "multiply-circle", width: 16, height: 16, onClick: (e) => this.handleCloseButtonClick(e) }))));
+  }
+  static get is() { return "z-notification"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["styles.css"]
+  }; }
+  static get properties() { return {
+    "contenticonname": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "icon on the left of the content"
+      },
+      "attribute": "contenticonname",
+      "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": "NotificationType",
+        "resolved": "NotificationType.error | NotificationType.success | NotificationType.warning",
+        "references": {
+          "NotificationType": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "alert variant type"
+      },
+      "attribute": "type",
+      "reflect": false
+    },
+    "showclose": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "enable close icon"
+      },
+      "attribute": "showclose",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "showshadow": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "enable shadow"
+      },
+      "attribute": "showshadow",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get events() { return [{
+      "method": "notificationAction",
+      "name": "notificationAction",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "notification action event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }, {
+      "method": "notificationClose",
+      "name": "notificationClose",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "notification close event"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -0,0 +1,93 @@
+:host {
+  width: 100%;
+  color: var(--color-text01);
+}
+
+.notification-container {
+  display: flex;
+  padding:  0 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
+  outline: none;
+  border-bottom: var(--border-size-medium) solid var(--color-surface03);
+}
+
+.shadow {
+  box-shadow: var(--shadow-3);
+}
+
+.content-container {
+  display: flex;
+  justify-content: space-between;
+
+  flex: 1 1 auto;
+  flex-wrap: wrap;
+}
+
+.content-text {
+  max-width: 800px;
+  margin-top: calc(var(--space-unit) * 2);
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+.action-text {
+  margin-top: calc(var(--space-unit) * 2);
+  margin-right: calc(var(--space-unit) * 2);
+  height: fit-content;
+  color: var(--color-primary01);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+:host div > z-icon {
+  justify-self: center;
+  margin-top: calc(var(--space-unit) * 2);
+  margin-right: calc(var(--space-unit));
+}
+
+:host div.success-notification {
+  background: var(--color-success-inverse);
+}
+
+:host div.warning-notification {
+  background: var(--color-warning-inverse);
+}
+
+:host div.error-notification {
+  background: var(--color-error-inverse);
+}
+
+:host div.success-notification > z-icon {
+  fill: var(--color-success01);
+}
+
+:host div.warning-notification > z-icon {
+  fill: var(--color-warning02);
+}
+
+:host div.error-notification > z-icon {
+  fill: var(--color-error01);
+}
+
+:host div > z-icon.close-icon {
+  cursor: pointer;
+  fill: var(--color-primary01);
+  margin-right: calc(var(--space-unit) * 2);
+}
+
+
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  .content-container {
+    flex-wrap: nowrap;
+  }
+
+  .content-text {
+    margin-right: calc(var(--space-unit) * 5);
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {}