@zanichelli/albe-web-components 2.18.0 → 2.18.4

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

@@ -0,0 +1,247 @@
+:host {
+  display: inline-block;
+  min-width: 200px;
+  width: 100vw;
+}
+
+: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% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 100%;
+  }
+}
+
+@keyframes slideindown {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  100% {
+    transform: translateY(0);
+    opacity: 100%;
+  }
+}
+
+@keyframes slideoutleft {
+  0% {
+    transform: translateX(var(--percentuale));
+    opacity: calc(100-var(--percentuale));
+  }
+  100% {
+    transform: translateX(-100%);
+    opacity: 0%;
+  }
+}
+
+@keyframes slideoutright {
+  0% {
+    transform: translateX(var(--percentuale));
+    opacity: calc(100-var(--percentuale));
+  }
+  100% {
+    transform: translateX(100%);
+    opacity: 0%;
+  }
+}
+
+@keyframes slideoutup {
+  0% {
+    transform: translateY(var(--percentuale));
+    opacity: 100%;
+  }
+  100% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+}
+
+@keyframes slideoutdown {
+  0% {
+    transform: translateY(var(--percentuale));
+    opacity: 100%;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+
+:host > #external-container {
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  border-radius: 4px;
+  font-size: 14px;
+  letter-spacing: 0.16px;
+  box-sizing: border-box;
+  min-height: 52px;
+  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: var(--shadow-3);
+}
+
+: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;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+}
+
+:host > #external-container #text {
+  color: var(--color-white);
+  line-height: 20px;
+  margin-right: calc(var(--space-unit) * 2);
+  letter-spacing: 0.16px;
+  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 {
+  cursor: pointer;
+  fill: var(--color-white);
+  margin-left: calc(var(--space-unit) * 2);
+}
+
+: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(--grey800);
+}
+
+: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%;
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+  :host {
+    width: unset;
+    max-width: 33vw;
+  }
+}

package/dist/collection/components/{contextual-menu → z-contextual-menu}/index.js

@@ -1,13 +1,13 @@
 import { Component, Event, Host, Prop, h } from "@stencil/core";
-import { ListSize, PopoverPosition } from "../../beans";
-export class ContextualMenu {
+import { PopoverPosition } from "../../beans";
+export class ZContextualMenu {
   constructor() {
     /**
-     * [optional] Sets text color of ContextualMenu's content
+     * [optional] Sets text color of ZContextualMenu's content
      */
     this.color = "color-primary01";
   }
-  componentWillLoad() {
+  componentWillRender() {
     if (this.elements) {
       this.jsonElements = JSON.parse(this.elements.replace(/"/g, '"'));
     }
@@ -22,16 +22,16 @@ export class ContextualMenu {
         h("z-icon", { "aria-label": "apri-menu-contestuale", slot: "trigger", name: "contextual-menu", fill: "color-primary01", style: { cursor: "pointer" } }),
         h("div", { class: "popover-content-container", slot: "popover" },
           h("z-list", null,
-            h("z-list-group", { "divider-type": "element", size: ListSize.small }, (_a = this.jsonElements) === null || _a === void 0 ? void 0 : _a.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `gray500` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) },
+            h("z-list-group", { "divider-type": "element" }, (_a = this.jsonElements) === null || _a === void 0 ? void 0 : _a.map((element, index) => (h("z-list-element", { clickable: !element.disabled, class: "my-z-list-element", "align-button": "left", "expandable-style": "accordion", color: element.disabled ? `color-disabled03` : this.color, isContextualMenu: true, listElementId: index, onClickItem: (event) => this.clickContextualMenu.emit(event.detail) },
               h("div", { class: element.disabled
                   ? "disabled-element-container"
                   : "element-container" },
                 this.showIcon() && (h("div", { class: "element-icon" },
-                  h("z-icon", { name: element.icon }))),
+                  h("z-icon", { name: element.icon, width: 16, height: 16 }))),
                 h("div", { class: "element-text" },
                   h("span", null, element.text))))))))))));
   }
-  static get is() { return "contextual-menu"; }
+  static get is() { return "z-contextual-menu"; }
   static get encapsulation() { return "shadow"; }
   static get originalStyleUrls() { return {
     "$": ["styles.css"]
@@ -52,7 +52,7 @@ export class ContextualMenu {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "elements of ContextualMenu"
+        "text": "elements of ZContextualMenu"
       },
       "attribute": "elements",
       "reflect": false
@@ -69,7 +69,7 @@ export class ContextualMenu {
       "optional": true,
       "docs": {
         "tags": [],
-        "text": "[optional] Sets text color of ContextualMenu's content"
+        "text": "[optional] Sets text color of ZContextualMenu's content"
       },
       "attribute": "color",
       "reflect": false,

package/dist/collection/components/{contextual-menu → z-contextual-menu}/styles.css

@@ -11,15 +11,7 @@
   min-width: 112px;
   max-width: 280px;
   white-space: nowrap;
-}
-
-.sc-z-popover,
-.sc-z-popover-s {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  padding: calc(var(--space-unit) * 0.2);
-  outline: none;
+  padding: calc(var(--space-unit) / 2) 0;
 }
 
 .element-container:hover {
@@ -30,22 +22,24 @@
 .element-text {
   overflow: hidden;
   text-overflow: ellipsis;
+  font-size: 14px;
 }
 
 .element-container,
 .disabled-element-container {
   display: flex;
-  padding: 0 8px;
   align-items: center;
-  gap: 8px;
-  fill: var(--gray500);
-  padding: 4px 8px;
+  gap: var(--space-unit);
+  fill: var(--color-disabled03);
+  padding: calc(var(--space-unit) / 2) var(--space-unit);
+  min-height: calc(var(--space-unit) * 4);
+  box-sizing: border-box;
 }
 
 .element-container {
   fill: var(--color-primary01);
 }
 
-.element-container .element-icon {
+.element-icon {
   display: flex;
 }

package/dist/collection/snowflakes/registro-table/z-registro-table-header/index.js

@@ -1,28 +1,31 @@
 import { Component, Element, Event, h, Host, Listen, Prop, State, } from "@stencil/core";
 import classNames from "classnames";
-import { ButtonSizeEnum, ButtonVariantEnum, PopoverPosition, SortingOrientation, TableHeaderSize, } from "../../../beans";
+import { ButtonSizeEnum, ButtonVariantEnum, PopoverPosition, SortDirectionEnum, TableHeaderSize, } from "../../../beans";
 import { getElementTree } from "../../../utils/utils";
 export class ZRegistroTableHeader {
   constructor() {
     /** [Optional] Padding of the header */
     this.size = TableHeaderSize["medium"];
+    this.sortDirection = SortDirectionEnum.none;
     this.isMenuOpened = false;
-    this.sortingOrientation = SortingOrientation["none"];
     this.emitOnSort = this.emitOnSort.bind(this);
   }
   emitOnSort() {
-    this.sort.emit({ sortingOrientation: this.sortingOrientation });
+    this.sort.emit({
+      columnId: this.columnId,
+      sortDirection: this.sortDirection
+    });
   }
   handleSort() {
     if (!this.sortable) {
       return;
     }
-    if (this.sortingOrientation === SortingOrientation["none"] ||
-      this.sortingOrientation === SortingOrientation["desc"]) {
-      this.sortingOrientation = SortingOrientation["asc"];
+    if (this.sortDirection === SortDirectionEnum.none ||
+      this.sortDirection === SortDirectionEnum.desc) {
+      this.sortDirection = SortDirectionEnum.asc;
     }
-    else if (this.sortingOrientation === SortingOrientation["asc"]) {
-      this.sortingOrientation = SortingOrientation["desc"];
+    else if (this.sortDirection === SortDirectionEnum.asc) {
+      this.sortDirection = SortDirectionEnum.desc;
     }
     this.emitOnSort();
   }
@@ -44,7 +47,7 @@ export class ZRegistroTableHeader {
     const parent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-registro-table-header");
     if (parent &&
       parent.attributes.getNamedItem("column-id").value !== this.columnId) {
-      this.sortingOrientation = SortingOrientation["none"];
+      this.sortDirection = SortDirectionEnum.none;
     }
   }
   componentWillRender() {
@@ -56,11 +59,9 @@ export class ZRegistroTableHeader {
       }), onClick: () => this.handleSort() },
       h("div", { class: classNames("container") },
         h("slot", null),
-        this.sortable && (h("z-icon", { name: this.sortingOrientation === SortingOrientation["asc"]
+        this.sortable && this.sortDirection !== SortDirectionEnum.none && (h("z-icon", { name: this.sortDirection === SortDirectionEnum.asc
             ? "arrow-up"
-            : "arrow-down", class: classNames("arrow", {
-            hidden: this.sortingOrientation === SortingOrientation["none"],
-          }) }))),
+            : "arrow-down", class: "arrow" }))),
       this.showButton && (h("div", { class: classNames("popover-container", {
           visible: this.isMenuOpened,
         }) },
@@ -151,11 +152,33 @@ export class ZRegistroTableHeader {
       },
       "attribute": "show-button",
       "reflect": false
+    },
+    "sortDirection": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "SortDirection",
+        "resolved": "SortDirectionEnum.asc | SortDirectionEnum.desc | SortDirectionEnum.none",
+        "references": {
+          "SortDirection": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sort-direction",
+      "reflect": false,
+      "defaultValue": "SortDirectionEnum.none"
     }
   }; }
   static get states() { return {
-    "isMenuOpened": {},
-    "sortingOrientation": {}
+    "isMenuOpened": {}
   }; }
   static get events() { return [{
       "method": "sort",

package/dist/collection/snowflakes/registro-table/z-registro-table-header/styles.css

@@ -48,10 +48,6 @@ Sorting arrow
   padding-left: var(--space-unit);
 }
 
-.arrow.hidden {
-  opacity: 0;
-}
-
 /*
 Contextual menu
 */