@zanichelli/albe-web-components 5.5.6-cs1 → 5.6.0

package/dist/collection/deprecated/z-tooltip-deprecated/styles.css

@@ -6,34 +6,34 @@
 
   position: relative;
   display: none;
-  min-width: calc(var(--space-unit) * 8);
-  min-height: calc(var(--space-unit) * 4);
   align-items: center;
   justify-content: center;
   padding: var(--space-unit);
-  background: var(--z-tooltip-theme--surface);
-  border-radius: var(--border-radius-small);
+  min-width: calc(var(--space-unit) * 8);
+  min-height: calc(var(--space-unit) * 4);
   color: var(--z-tooltip-theme--text);
-  fill: currentcolor;
-  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
+  fill: currentColor;
   font-family: var(--font-family-sans);
   text-align: center;
+  border-radius: var(--border-radius-small);
+  background: var(--z-tooltip-theme--surface);
+  filter: drop-shadow(0 4px 8px var(--shadow-color-base));
   will-change: filter;
 }
 
 :host(.legacy) {
   display: inline-flex;
+  padding: calc(var(--space-unit) * 2);
   min-width: auto;
-  max-width: 200px;
   min-height: auto;
-  padding: calc(var(--space-unit) * 2);
-  border: var(--border-size-small) solid var(--gray200);
-  border-radius: var(--border-radius);
-  filter: drop-shadow(0 0 2px rgb(0 0 0 / 8%));
-  font-size: 12px;
+  max-width: 200px;
   font-style: italic;
-  letter-spacing: 0.32px;
   line-height: 16px;
+  letter-spacing: 0.32px;
+  font-size: 12px;
+  border: var(--border-size-small) solid var(--gray200);
+  border-radius: var(--border-radius);
+  filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, 0.08));
 }
 
 :host(.legacy)::before {
@@ -45,84 +45,84 @@
   --arrow-center-x-offset: calc(50% - calc(var(--arrow-size) / 2));
   --arrow-center-y-offset: calc(100% - calc(var(--arrow-size) / 2));
 
+  content: '';
   position: absolute;
   width: var(--arrow-size);
   height: var(--arrow-size);
   background: inherit;
-  content: "";
   transform: rotate(45deg);
 }
 
-:host([open][style*="top:"]),
-:host([open][style*="inset:"]) {
+:host([open][style*='top:']),
+:host([open][style*='inset:']) {
   display: inline-flex;
 }
 
-:host([position^="top"]) {
+:host([position^='top']) {
   margin-bottom: var(--space-unit);
 }
 
-:host([position="right"]) {
+:host([position='right']) {
   margin-left: var(--space-unit);
 }
 
-:host([position="top_right"]),
-:host([position="bottom_right"]) {
+:host([position='top_right']),
+:host([position='bottom_right']) {
   margin-left: var(--edge-offset);
 }
 
-:host([position^="bottom"]) {
+:host([position^='bottom']) {
   margin-top: var(--space-unit);
 }
 
-:host([position="left"]) {
+:host([position='left']) {
   margin-right: var(--space-unit);
 }
 
-:host([position="top_left"]),
-:host([position="bottom_left"]) {
+:host([position='top_left']),
+:host([position='bottom_left']) {
   margin-right: var(--edge-offset);
 }
 
 /* Arrow style */
 
-:host([position^="top"])::before {
+:host([position^='top'])::before {
   top: var(--arrow-center-y-offset);
 }
 
-:host([position^="bottom"])::before {
+:host([position^='bottom'])::before {
   bottom: var(--arrow-center-y-offset);
 }
 
-:host([position="top"])::before,
-:host([position="bottom"])::before {
+:host([position='top'])::before,
+:host([position='bottom'])::before {
   left: var(--arrow-center-x-offset);
 }
 
-:host([position="right"])::before,
-:host([position="left"])::before {
+:host([position='right'])::before,
+:host([position='left'])::before {
   top: var(--arrow-center-x-offset);
 }
 
-:host([position="right"])::before {
+:host([position='right'])::before {
   right: var(--arrow-center-y-offset);
 }
 
-:host([position="top_right"])::before,
-:host([position="bottom_right"])::before {
+:host([position='top_right'])::before,
+:host([position='bottom_right'])::before {
   right: var(--arrow-edge-offset);
 }
 
-:host([position="left"])::before {
+:host([position='left'])::before {
   left: var(--arrow-center-y-offset);
 }
 
-:host([position="top_left"])::before,
-:host([position="bottom_left"])::before {
+:host([position='top_left'])::before,
+:host([position='bottom_left'])::before {
   left: var(--arrow-edge-offset);
 }
 
 ::slotted(*) {
-  overflow: auto;
   flex: 1 auto;
+  overflow: auto;
 }

package/dist/collection/index.js

@@ -1,7 +1,6 @@
 import { colorFromId } from "./utils/utils";
-const UTILS = {
-  colorFromId,
-};
-export { UTILS as Utils };
 export * from "./components";
 export * from "./beans";
+export const Utils = {
+  colorFromId
+};

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

@@ -12,15 +12,12 @@ export class ZMyzCardComponent {
   }
   retrieveClass() {
     let elemClasses = "";
-    if (this.cardtype === LicenseTypeEnum.REAL) {
+    if (this.cardtype === LicenseTypeEnum.real)
       elemClasses += "real";
-    }
-    else if (this.cardtype === LicenseTypeEnum.TRIAL) {
+    else if (this.cardtype === LicenseTypeEnum.trial)
       elemClasses += "trial";
-    }
-    else if (this.cardtype === LicenseTypeEnum.TEMP) {
+    else if (this.cardtype === LicenseTypeEnum.temp)
       elemClasses += "temp";
-    }
     if (this.faded) {
       elemClasses += " faded";
     }
@@ -71,7 +68,7 @@ export class ZMyzCardComponent {
         "mutable": false,
         "complexType": {
           "original": "LicenseTypeEnum",
-          "resolved": "LicenseTypeEnum.REAL | LicenseTypeEnum.TEMP | LicenseTypeEnum.TRIAL | LicenseTypeEnum.VIRTUAL",
+          "resolved": "LicenseTypeEnum.real | LicenseTypeEnum.temp | LicenseTypeEnum.trial | LicenseTypeEnum.virtual",
           "references": {
             "LicenseTypeEnum": {
               "location": "import",

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

@@ -3,16 +3,16 @@
 }
 
 div {
+  background-color: var(--color-surface01);
   display: flex;
-  overflow: var(--card-overflow);
+  flex-direction: column;
   width: auto;
+  box-sizing: border-box;
   width: 256px; /* TODO: width must be 100% - must be handled in dashboard */
   height: 522px;
-  box-sizing: border-box;
-  flex-direction: column;
   border: var(--border-size-medium) solid var(--color-surface03);
-  background-color: var(--color-surface01);
   border-radius: var(--border-radius);
+  overflow: var(--card-overflow);
 }
 
 div.real,

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

@@ -18,10 +18,10 @@ export class ZMyzCardAlert {
     let className = "";
     switch (this.type) {
       case "add":
-        className = "add-alert";
+        className = "addAlert";
         break;
       case "remove":
-        className = "remove-alert";
+        className = "removeAlert";
         break;
       default:
         className = "";
@@ -32,15 +32,15 @@ export class ZMyzCardAlert {
   getAlertType() {
     switch (this.type) {
       case "add":
-        return AlertTypesEnum.SUCCESS;
+        return AlertTypesEnum.success;
       case "remove":
-        return AlertTypesEnum.WARNING;
+        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: "relative-container" }, h("z-icon", { name: this.iconname, width: 18, height: 18, class: this.retrieveClass() }), h("span", { class: "content-text" }, this.contenttext), this.actiontext && !!this.actiontext.trim().length && (h("span", { role: "button", tabindex: "0", class: "content-action", onClick: (e) => {
+    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);

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

@@ -1,60 +1,60 @@
 :host {
   position: absolute;
-  z-index: 2;
-  top: 0;
-  left: 0;
-  width: 100%;
   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);
 }
 
-.relative-container {
+.relativeContainer {
   position: relative;
   display: grid;
-  align-items: center;
-  padding: 0;
-  grid-column-gap: var(--space-unit);
   grid-template-columns: 18px auto 46px;
   grid-template-rows: 1fr;
+  grid-column-gap: var(--space-unit);
+  align-items: center;
+  padding: 0;
   outline: none;
 }
 
-.relative-container::-moz-focus-inner {
+.relativeContainer::-moz-focus-inner {
   border: 0;
 }
 
-.alert-external-wrapper.remove-alert {
+.alert-external-wrapper.removeAlert {
   border: var(--border-size-medium) solid var(--color-surface02);
   border-top: none;
 }
 
-:host div.add-alert {
+:host div.addAlert {
   background: var(--color-success-inverse);
 }
 
-:host div.remove-alert {
+:host div.removeAlert {
   background: var(--color-warning-inverse);
 }
 
-:host div > .content-text {
+:host div > .contentText {
   color: var(--color-surface05);
   font-size: 14px;
   letter-spacing: 0.16px;
   line-height: 20px;
 }
 
-:host div > .content-action {
-  height: 20px;
+:host div > .contentAction {
   color: var(--color-primary01);
-  cursor: pointer;
   font-size: 12px;
   font-weight: var(--font-sb);
+  height: 20px;
   letter-spacing: 0.32px;
   line-height: 20px;
+  cursor: pointer;
 }
 
 :host div > z-icon {

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

@@ -1,13 +1,13 @@
 :host {
-  width: auto;
   height: 340px;
+  width: auto;
 }
 
 :host > div {
-  position: relative;
-  display: flex;
-  width: auto;
   height: 340px;
+  width: auto;
+  display: flex;
   align-items: center;
   justify-content: center;
+  position: relative;
 }

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

@@ -1,8 +1,8 @@
 img {
   display: block;
-  max-width: 100%;
+  margin: auto auto;
   height: 340px;
-  margin: auto;
+  max-width: 100%;
   object-fit: cover;
 }
 

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

@@ -23,7 +23,7 @@ export class ZMyzCardDictionary {
     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: { "hide-info": this.hideinfobtn }, variant: ButtonVariantEnum.SECONDARY, icon: "informationsource", size: ButtonSizeEnum.X_SMALL, onClick: () => this.flipCard(true), disabled: this.flipped }, this.flipbuttonlabel)), h("div", { class: "back" }, h("slot", { name: "info" }))), h("slot", null))));
+    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", size: ButtonSizeEnum["x-small"], 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"; }

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

@@ -9,8 +9,8 @@
 
 :host > div {
   position: relative;
-  width: 100%;
   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;
@@ -18,27 +18,30 @@
 
 :host > div .content {
   position: relative;
-  z-index: 2;
-  width: 100%;
   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 {
-  margin-top: -2px;
+  -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;
-  width: 100%;
-  height: 100%;
+  -webkit-backface-visibility: hidden;
   backface-visibility: hidden;
 }
 
@@ -46,6 +49,7 @@
   z-index: 2;
   top: 0;
   left: 0;
+  -webkit-transform: rotateY(0deg);
   transform: rotateY(0deg);
 }
 
@@ -57,16 +61,29 @@
 }
 
 :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;
-  padding: 0 var(--space-unit);
-  margin-left: calc(-1 * var(--space-unit));
-  transform: rotateY(180deg);
 }
 
-.hide-info {
+.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) {
+}

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

@@ -20,9 +20,8 @@ export class ZMyzCardFooter {
     return this.allowTooltipAuthors ? this.autori : "";
   }
   componentWillLoad() {
-    if (this.opened) {
+    if (this.opened)
       this.isOpen = true;
-    }
   }
   elementsEllipsis() {
     this.allowTooltipAuthors = this.elementAuthorsHasEllipsis() ? true : false;
@@ -32,11 +31,11 @@ export class ZMyzCardFooter {
   }
   retrieveClass() {
     return {
-      "isopen": this.isOpen,
-      "real": this.cardtype === LicenseTypeEnum.REAL,
-      "trial": this.cardtype === LicenseTypeEnum.TRIAL,
-      "temp": this.cardtype === LicenseTypeEnum.TEMP,
-      "custom-content": this.customContent,
+      isopen: this.isOpen,
+      real: this.cardtype === LicenseTypeEnum.real,
+      trial: this.cardtype === LicenseTypeEnum.trial,
+      temp: this.cardtype === LicenseTypeEnum.temp,
+      customContent: this.customContent,
     };
   }
   footerTransitionHandler(e) {
@@ -45,7 +44,7 @@ export class ZMyzCardFooter {
     }
   }
   render() {
-    return (h("div", { class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && h("p", { class: { "custom-content": this.customContent } }, this.titolo), h("div", { class: { "content": true, "custom-content": this.customContent } }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { class: "bold" }, this.autori))), h("p", { class: "year-isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { class: "bold" }, this.isbn), " (ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" })))), this.customContent && h("slot", { name: "content" })));
+    return (h("div", { class: Object.assign(Object.assign({}, this.retrieveClass()), { wrapper: true }) }, h("footer", { class: this.retrieveClass(), onTransitionEnd: (e) => this.footerTransitionHandler(e) }, h("span", { class: "toggle" }, h("slot", { name: "toggle" })), this.titolo && (h("p", { class: { customContent: this.customContent } }, this.titolo)), h("div", { class: { content: true, customContent: this.customContent } }, h("div", null, h("p", { class: "authors", ref: (el) => (this.ellipsisAuthors = el) }, h("span", { title: this.getTitleAuthors() }, h("span", { class: "bold" }, this.autori))), h("p", { class: "year_isbn" }, h("span", { class: "isbn" }, h("span", null, h("span", { class: "bold" }, this.isbn), " (ed. cartacea)")))), h("div", { class: `slot-handler ${this.isOpen ? "visible" : "hidden"}` }, h("slot", { name: "list" })))), this.customContent && h("slot", { name: "content" })));
   }
   static get is() { return "z-myz-card-footer"; }
   static get encapsulation() { return "shadow"; }
@@ -134,7 +133,7 @@ export class ZMyzCardFooter {
         "mutable": false,
         "complexType": {
           "original": "LicenseTypeEnum",
-          "resolved": "LicenseTypeEnum.REAL | LicenseTypeEnum.TEMP | LicenseTypeEnum.TRIAL | LicenseTypeEnum.VIRTUAL",
+          "resolved": "LicenseTypeEnum.real | LicenseTypeEnum.temp | LicenseTypeEnum.trial | LicenseTypeEnum.virtual",
           "references": {
             "LicenseTypeEnum": {
               "location": "import",