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

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

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

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

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

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

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

@@ -1,93 +0,0 @@
-: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) {}