@zanichelli/albe-web-components 12.1.4-rc → 12.2.0-rc

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

@@ -0,0 +1,254 @@
+:host {
+  display: inline-block;
+  width: 100vw;
+  min-width: 200px;
+
+  --percentuale: 0;
+}
+
+:host(.slide-in-left) {
+  animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-in-right) {
+  animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-in-down) {
+  animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-in-up) {
+  animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-left) {
+  animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-right) {
+  animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-down) {
+  animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-up) {
+  animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+@keyframes slideinleft {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideinright {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideinup {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideindown {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideoutleft {
+  0% {
+    /* stylelint-disable-next-line alpha-value-notation */
+    opacity: calc(100% - var(--percentuale));
+    transform: translateX(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slideoutright {
+  0% {
+    /* stylelint-disable-next-line alpha-value-notation */
+    opacity: calc(100% - var(--percentuale));
+    transform: translateX(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideoutup {
+  0% {
+    opacity: 1;
+    transform: translateY(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slideoutdown {
+  0% {
+    opacity: 1;
+    transform: translateY(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+:host > #external-container {
+  display: flex;
+  min-height: 52px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
+  border-radius: 4px;
+  box-shadow: var(--shadow-3);
+  font-family: var(--font-family-sans);
+  font-size: 14px;
+  font-weight: var(--font-rg);
+  letter-spacing: 0.16px;
+}
+
+:host > #external-container.mobile-wrapped > #icon {
+  align-self: flex-start;
+}
+
+:host > #external-container.several-lines-padding {
+  padding: calc(var(--space-unit) * 2);
+}
+
+:host > #external-container > #flex-container {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+:host > #external-container #text {
+  margin-right: calc(var(--space-unit) * 2);
+  color: var(--color-white);
+  letter-spacing: 0.16px;
+  line-height: 20px;
+  text-align: left;
+}
+
+:host > #external-container #text > .title {
+  margin-right: 4px;
+  font-weight: 600;
+}
+
+:host > #external-container.mobile-wrapped #button ::slotted(z-button) {
+  margin-top: calc(var(--space-unit) * 2);
+}
+
+:host > #external-container #icon {
+  margin-left: calc(var(--space-unit) * 2);
+  cursor: pointer;
+  fill: var(--color-white);
+}
+
+:host > #external-container.dark {
+  background: var(--gray800);
+}
+
+:host > #external-container.light {
+  background: var(--color-background);
+}
+
+:host > #external-container.light #icon,
+:host > #external-container.warning #text,
+:host > #external-container.warning #icon {
+  fill: var(--color-icon01);
+}
+
+:host > #external-container.light #text,
+:host > #external-container.warning #text {
+  color: var(--gray800);
+}
+
+:host > #external-container.accent {
+  background: var(--color-primary01);
+}
+
+:host > #external-container.error {
+  background: var(--color-error-default);
+}
+
+:host > #external-container.success {
+  background: var(--color-success-default);
+}
+
+:host > #external-container.warning {
+  background: var(--color-warning-default);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host {
+    width: unset;
+    max-width: 50vw;
+  }
+
+  :host > #external-container > #flex-container {
+    flex-wrap: nowrap;
+  }
+
+  :host > #external-container #text {
+    width: 100%;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+  :host {
+    width: unset;
+    max-width: 33vw;
+  }
+}

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

@@ -0,0 +1,157 @@
+import { h } from "@stencil/core";
+import { PopoverPosition } from "../../../beans";
+/**
+ * Tooltip component.
+ * It is basically a wrapper for the `<z-popover>` component with custom configuration.
+ *
+ * @cssprop --z-tooltip-theme--surface - background color of the popover.
+ * @cssprop --z-tooltip-theme--text - foreground color of the popover.
+ * @cssprop --z-tooltip-shadow-filter - drop-shadow filter of the popover.
+ */
+export class ZTooltip {
+  constructor() {
+    /** Tooltip position. */
+    this.position = PopoverPosition.AUTO;
+    /** Enable tooltip dark mode. */
+    this.dark = false;
+    /**
+     * The open state of the tooltip.
+     */
+    this.open = false;
+    /**
+     * Reflects `closable` prop of the popover.
+     * "If true, the popover can be closed by clicking outside of it or pressing the escape key.
+     * Otherwise, it will be closed only programmatically (by setting `open` to `false`)."
+     */
+    this.closable = true;
+  }
+  onPopoverOpenChange() {
+    this.open = this.popoverEl.open;
+  }
+  render() {
+    return (h("z-popover", { ref: (el) => (this.popoverEl = el), bindTo: this.bindTo, open: this.open, position: this.position, closable: this.closable, center: true, showArrow: true }, h("slot", null)));
+  }
+  static get is() { return "z-tooltip"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "position": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "PopoverPosition",
+          "resolved": "PopoverPosition.AUTO | PopoverPosition.BOTTOM | PopoverPosition.BOTTOM_LEFT | PopoverPosition.BOTTOM_RIGHT | PopoverPosition.LEFT | PopoverPosition.LEFT_BOTTOM | PopoverPosition.LEFT_TOP | PopoverPosition.RIGHT | PopoverPosition.RIGHT_BOTTOM | PopoverPosition.RIGHT_TOP | PopoverPosition.TOP | PopoverPosition.TOP_LEFT | PopoverPosition.TOP_RIGHT",
+          "references": {
+            "PopoverPosition": {
+              "location": "import",
+              "path": "../../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Tooltip position."
+        },
+        "attribute": "position",
+        "reflect": true,
+        "defaultValue": "PopoverPosition.AUTO"
+      },
+      "dark": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Enable tooltip dark mode."
+        },
+        "attribute": "dark",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "open": {
+        "type": "boolean",
+        "mutable": true,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The open state of the tooltip."
+        },
+        "attribute": "open",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "bindTo": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | HTMLElement",
+          "resolved": "HTMLElement | string",
+          "references": {
+            "HTMLElement": {
+              "location": "global"
+            }
+          }
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The selector or the element bound with the tooltip."
+        },
+        "attribute": "bind-to",
+        "reflect": false
+      },
+      "closable": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Reflects `closable` prop of the popover.\n\"If true, the popover can be closed by clicking outside of it or pressing the escape key.\nOtherwise, it will be closed only programmatically (by setting `open` to `false`).\""
+        },
+        "attribute": "closable",
+        "reflect": false,
+        "defaultValue": "true"
+      }
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "openChange",
+        "method": "onPopoverOpenChange",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

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

@@ -0,0 +1,17 @@
+:host {
+  --z-tooltip-theme--surface: var(--color-surface01);
+  --z-tooltip-theme--text: var(--color-text01);
+  --z-tooltip-shadow-filter: drop-shadow(0 1px 2px var(--shadow-color-base));
+}
+
+:host([dark]) z-popover {
+  --z-popover-theme--surface: var(--color-surface05);
+  --z-popover-theme--text: var(--color-text-inverse);
+}
+
+z-popover {
+  --z-popover-padding: var(--space-unit);
+  --z-popover-theme--surface: var(--z-tooltip-theme--surface);
+  --z-popover-theme--text: var(--z-tooltip-theme--text);
+  --z-popover-shadow-filter: var(--z-tooltip-shadow-filter);
+}

package/dist/collection/components/panel/z-panel-elem/index.js

@@ -0,0 +1,197 @@
+import { h } from "@stencil/core";
+/**
+ * @slot `descrSlotName` - description content
+ */
+export class ZPanelElem {
+  constructor() {
+    /** link target (optional) */
+    this.target = "_blank";
+    /** disabled status flag (optional) */
+    this.isdisabled = false;
+  }
+  renderIcon() {
+    if (this.isdisabled) {
+      return (h("img", { src: this.imgurl, alt: this.imgalt }));
+    }
+    return (h("a", { class: "elem-icon", href: this.url, target: this.target }, h("img", { src: this.imgurl, alt: this.imgalt })));
+  }
+  render() {
+    const elemId = this.elemid ? this.elemid : "";
+    return (h("div", { class: "panel-elem-container" }, (this.imgurl || this.imgalt) && (h("div", { "aria-hidden": "true", class: "panel-elem-icon" }, this.renderIcon())), h("div", { class: "panel-elem-link" }, h("a", { class: {
+        "z-link": true,
+        "z-link-disabled": this.isdisabled,
+        "z-link-icon": true,
+      }, id: elemId + "link_id", href: this.url, target: this.target }, h("z-icon", { height: 14, width: 14, name: this.linkicon }), this.linklabel)), this.descrSlotName && (h("div", { class: "panel-elem-desc" }, h("slot", { name: this.descrSlotName })))));
+  }
+  static get is() { return "z-panel-elem"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "elemid": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "html element id (optional)"
+        },
+        "attribute": "elemid",
+        "reflect": false
+      },
+      "imgurl": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "image url source (optional)"
+        },
+        "attribute": "imgurl",
+        "reflect": false
+      },
+      "imgalt": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "alternative image text (optional)"
+        },
+        "attribute": "imgalt",
+        "reflect": false
+      },
+      "linkicon": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "icon link name (optional)"
+        },
+        "attribute": "linkicon",
+        "reflect": false
+      },
+      "linklabel": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "link label text"
+        },
+        "attribute": "linklabel",
+        "reflect": false
+      },
+      "url": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "link url"
+        },
+        "attribute": "url",
+        "reflect": false
+      },
+      "target": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "link target (optional)"
+        },
+        "attribute": "target",
+        "reflect": false,
+        "defaultValue": "\"_blank\""
+      },
+      "isdisabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "disabled status flag (optional)"
+        },
+        "attribute": "isdisabled",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "descrSlotName": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "name of slot container (optional)"
+        },
+        "attribute": "descr-slot-name",
+        "reflect": false
+      }
+    };
+  }
+}

package/dist/collection/components/panel/z-panel-elem/styles.css

@@ -0,0 +1,46 @@
+:host {
+  width: inherit;
+  font-family: var(--font-family sans);
+  font-weight: var(--font-rg);
+}
+
+.panel-elem-container {
+  width: 100%;
+}
+
+.panel-elem-icon {
+  margin: auto calc(var(--space-unit) * 3);
+}
+
+.panel-elem-icon img {
+  display: block;
+  max-width: 96px;
+  height: 32px;
+  margin: auto;
+  object-fit: contain;
+}
+
+.panel-elem-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: var(--space-unit) auto 0;
+  border-radius: var(--border-no-radius);
+  font-size: 12px;
+}
+
+.panel-elem-link > a.z-link {
+  padding: calc(var(--space-unit) * 0.5) 0;
+  font-weight: var(--font-sb);
+}
+
+.panel-elem-desc {
+  padding-top: var(--space-unit);
+  margin: 0;
+  letter-spacing: 0.16px;
+  text-align: center;
+}
+
+a > z-icon {
+  margin-right: var(--space-unit);
+}