@zanichelli/albe-web-components 5.6.2 → 6.0.0

package/dist/collection/snowflakes/myz/topbar/styles.css

@@ -4,29 +4,26 @@
 
 header {
   position: sticky;
-  top: 0;
   z-index: 99;
+  top: 0;
   display: grid;
-  grid-template-columns: 1fr;
-  grid-template-rows: 1fr;
-  grid-template-areas: "main-header";
   margin-bottom: calc(var(--space-unit) * 6.5);
   font-family: var(--dashboard-font);
   font-weight: var(--font-rg);
+  grid-template: 1fr / 1fr;
+  grid-template-areas: "main-header";
 }
 
 .main-header {
+  z-index: 10;
   display: grid;
-  grid-template-columns: 2fr 2fr 4fr 100px;
-  grid-template-rows: 1fr;
-  grid-template-areas: "logo link-int link-ext login";
-  grid-area: main-header;
-  grid-column-gap: calc(var(--space-unit) * 0.5);
-  align-items: center;
-  background-color: var(--bg-grey-900);
   height: auto;
   align-items: center;
-  z-index: 10;
+  background-color: var(--bg-grey-900);
+  grid-area: main-header;
+  grid-column-gap: calc(var(--space-unit) * 0.5);
+  grid-template: 1fr / 2fr 2fr 4fr 100px;
+  grid-template-areas: "logo link-int link-ext login";
 }
 
 .main-header.myz-out {
@@ -34,8 +31,8 @@ header {
 }
 
 .logo {
-  grid-area: logo;
   padding: 6px;
+  grid-area: logo;
 }
 
 z-logo {
@@ -51,12 +48,12 @@ z-logo {
 }
 
 .dropdown-links {
-  grid-area: dropdown-links;
-  list-style: none;
   display: block;
   max-height: 32px;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  grid-area: dropdown-links;
+  list-style: none;
 }
 
 .arrow {
@@ -64,46 +61,45 @@ z-logo {
 }
 
 .dropdown-links > li {
-  list-style: none;
   display: inline-block;
-  margin: 0;
   padding: 0;
+  margin: 0;
+  list-style: none;
 }
 
 .dropdown-links > li > a {
   width: auto;
   height: auto;
+  padding-bottom: calc(var(--space-unit) * 0.5);
+  margin: var(--space-unit);
   color: var(--myz-blue);
   font-size: 14px;
   letter-spacing: 0.18px;
   line-height: 32px;
   text-decoration: none;
-  margin: var(--space-unit);
-  padding-bottom: calc(var(--space-unit) * 0.5);
 }
 
 .dropdown-links > li > a:hover,
 .dropdown-links > li > a.active {
-  color: var(--text-grey-800);
   border-bottom: 2px solid var(--myz-blue);
+  color: var(--text-grey-800);
 }
 
 .mobile-header {
+  position: fixed;
+  z-index: inherit;
+  z-index: 999;
+  top: 0;
+  left: 0;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: stretch;
+  width: 100%;
+  height: 52px;
+  flex-flow: row nowrap;
   align-content: center;
+  align-items: stretch;
   align-items: center;
-  width: 100%;
+  justify-content: space-between;
   background-color: var(--bg-grey-900);
-  z-index: inherit;
-  height: 52px;
-  position: fixed;
-  top: 0px;
-  left: 0;
-  z-index: 999;
 }
 
 .mobile-header.myz-out {
@@ -115,20 +111,19 @@ z-logo {
 }
 
 .mobile-content {
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  align-content: center;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  background-color: var(--bg-grey-900);
   position: fixed;
+  z-index: 999;
   top: 52px;
   left: 0;
-  z-index: 999;
-  max-height: 0px;
+  display: flex;
   overflow: hidden;
+  width: 100%;
+  max-height: 0;
+  flex-flow: column nowrap;
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--bg-grey-900);
   transition: max-height 1s cubic-bezier(0.46, 0, 1, 0.79);
 }
 
@@ -142,29 +137,28 @@ z-logo {
 }
 
 hr {
-  display: block;
   position: relative;
-  padding: 0;
-  margin: 0px calc(var(--space-unit) * 4);
-  height: 0;
+  display: block;
   width: calc(100% - 64px);
+  height: 0;
   max-height: 0;
-  font-size: 1px;
-  line-height: 0;
-  clear: both;
+  padding: 0;
   border: none;
   border-top: 1px solid var(--text-grey-700);
+  margin: 0 calc(var(--space-unit) * 4);
+  clear: both;
+  font-size: 1px;
+  line-height: 0;
 }
 
 .menu-mobile {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: center;
+  flex-flow: row nowrap;
   align-content: center;
-  color: var(--bg-white);
+  align-items: center;
+  justify-content: flex-start;
   padding: calc(var(--space-unit) * 2) calc(var(--space-unit) * 3);
+  color: var(--bg-white);
   cursor: pointer;
 }
 
@@ -173,10 +167,10 @@ hr {
 }
 
 .menu-toggle {
-  grid-area: menu-toggle;
   display: flex;
   flex-direction: column;
   margin: 0 var(--space-unit);
+  grid-area: menu-toggle;
 }
 
 /* MOBILE MENU & ANIMATION */
@@ -184,8 +178,8 @@ hr {
 .menu-toggle .bar {
   width: 20px;
   height: 2px;
-  background-color: var(--bg-white);
   margin: 2px auto;
+  background-color: var(--bg-white);
   transition: all 0.3s ease-in-out;
 }
 
@@ -211,17 +205,16 @@ hr {
 
 .booktab-button,
 .mobile-login {
+  display: flex;
   overflow: hidden;
-  height: 0%;
-  max-height: 100%;
   width: 100%;
+  height: 0%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: stretch;
+  max-height: 100%;
+  flex-flow: column nowrap;
   align-content: stretch;
+  align-items: stretch;
+  justify-content: space-between;
   padding: 0;
 }
 
@@ -230,10 +223,10 @@ hr {
 }
 
 .login {
-  grid-area: login;
   display: flex;
   justify-content: flex-end;
   padding: 0 calc(var(--space-unit) * 2);
+  grid-area: login;
 }
 
 .login > z-button {
@@ -243,37 +236,35 @@ hr {
 
 .booktab-button > z-button {
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: center;
-  align-items: center;
+  flex-flow: row nowrap;
   align-content: center;
-  padding: calc(var(--space-unit) * 2) 0px calc(var(--space-unit) * 4) 0px;
+  align-items: center;
+  justify-content: center;
+  padding: calc(var(--space-unit) * 2) 0 calc(var(--space-unit) * 4) 0;
 }
 
 .link-ext {
-  grid-area: link-ext;
+  display: flex;
   overflow: hidden;
-  height: 0%;
-  max-height: 100%;
   width: 100%;
+  height: 0%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: stretch;
+  max-height: 100%;
+  flex-flow: column nowrap;
   align-content: stretch;
+  align-items: stretch;
+  justify-content: space-between;
   padding: 0;
+  grid-area: link-ext;
 }
 
 .link-ext-span {
   display: inline-block;
   width: 100%;
-  margin: calc(var(--space-unit) * 0.5) auto;
   box-sizing: border-box;
-  margin: 0px auto 0px auto;
-  padding: 0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);
+  padding: 0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);
+  margin: calc(var(--space-unit) * 0.5) auto;
+  margin: 0 auto;
   line-height: 44px;
 }
 
@@ -290,53 +281,50 @@ hr {
 }
 
 .link-int {
+  display: flex;
   overflow: hidden;
-  max-height: 100%;
   width: 100%;
   height: 100%;
-  display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: stretch;
+  max-height: 100%;
+  flex-flow: column nowrap;
   align-content: stretch;
+  align-items: stretch;
+  justify-content: space-between;
   padding: 0;
 }
 
 .link-int > span {
-  width: 100%;
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: stretch;
+  width: 100%;
+  flex-flow: column nowrap;
   align-content: flex-start;
+  align-items: stretch;
+  justify-content: flex-start;
 }
 
 .link-int > span > .menu-item {
-  height: auto;
-  color: var(--bg-white);
-  letter-spacing: 0.2px;
-  font-weight: var(--font-sb);
-  font-size: 16px;
-  text-decoration: none;
-  outline: none;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: stretch;
-  align-content: stretch;
   width: 100%;
+  height: auto;
   box-sizing: border-box;
-  margin: 0px auto 0px auto;
-  padding: 0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);
+  flex-flow: row nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: 0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);
+  margin: 0 auto;
+  color: var(--bg-white);
+  font-size: 16px;
+  font-weight: var(--font-sb);
+  letter-spacing: 0.2px;
   line-height: 44px;
+  outline: none;
+  text-decoration: none;
 }
 
 .link-int > span > .menu-item:hover,
 .link-int > span > .menu-item:focus {
-  border-radius: 0px;
+  border-radius: 0;
 }
 
 .link-int > span > .menu-item > span {
@@ -344,9 +332,9 @@ hr {
 }
 
 .link-int > span > .menu-item > i {
-  padding-top: calc(var(--space-unit) * 2);
-  height: 28px;
   width: 24px;
+  height: 28px;
+  padding-top: calc(var(--space-unit) * 2);
   text-align: right;
 }
 
@@ -364,11 +352,10 @@ hr {
 
 .mobile-login > span {
   display: flex;
-  flex-direction: column;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: stretch;
+  flex-flow: column nowrap;
   align-content: flex-start;
+  align-items: stretch;
+  justify-content: flex-start;
   fill: white;
 }
 
@@ -383,24 +370,23 @@ hr {
 }
 
 .mobile-login > span > .menu-item {
-  height: auto;
-  color: var(--bg-white);
-  letter-spacing: 0.2px;
-  font-weight: var(--font-sb);
-  font-size: 16px;
-  text-decoration: none;
-  outline: none;
   display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: space-between;
-  align-items: stretch;
-  align-content: stretch;
   width: 100%;
+  height: auto;
   box-sizing: border-box;
-  margin: 0px auto 0px auto;
-  padding: 0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);
+  flex-flow: row nowrap;
+  align-content: stretch;
+  align-items: stretch;
+  justify-content: space-between;
+  padding: 0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);
+  margin: 0 auto;
+  color: var(--bg-white);
+  font-size: 16px;
+  font-weight: var(--font-sb);
+  letter-spacing: 0.2px;
   line-height: 44px;
+  outline: none;
+  text-decoration: none;
 }
 
 .myz-out .mobile-login > span > .menu-item {
@@ -408,16 +394,16 @@ hr {
 }
 
 .mobile-login > span > .menu-item > i {
-  padding-top: calc(var(--space-unit) * 2);
-  height: 28px;
   width: 24px;
+  height: 28px;
+  padding-top: calc(var(--space-unit) * 2);
   text-align: right;
 }
 
 .mobile-login > span > .menu-item > span {
-  white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .mobile-login > span > .menu-item > span > z-icon {
@@ -426,21 +412,21 @@ hr {
 }
 
 .menu-item > i::before {
-  border-style: solid;
-  border-width: 0.12em 0.12em 0 0;
-  content: " ";
-  display: inline-block;
-  height: 0.45em;
-  left: 0.16em;
   position: relative;
   top: -0.12em;
-  transform: rotate(135deg) scale(1.2);
-  vertical-align: top;
+  left: 0.16em;
+  display: inline-block;
   width: 0.45em;
+  height: 0.45em;
+  border-width: 0.12em 0.12em 0 0;
+  border-style: solid;
   margin-top: 2px;
-  margin-left: 2px;
   margin-right: 6px;
+  margin-left: 2px;
+  content: " ";
+  transform: rotate(135deg) scale(1.2);
   transition: all 0.5s ease;
+  vertical-align: top;
 }
 
 .menu-item.isopen > i::before {
@@ -450,15 +436,15 @@ hr {
 }
 
 .mobile-dropdown {
-  background: white;
   display: block;
   overflow: hidden;
   width: 100%;
+  max-height: 0;
   box-sizing: border-box;
-  margin: 0px auto 0px auto;
-  padding: 0px calc(var(--space-unit) * 4) 0px calc(var(--space-unit) * 4);
+  padding: 0 calc(var(--space-unit) * 4) 0 calc(var(--space-unit) * 4);
+  margin: 0 auto;
+  background: white;
   line-height: 44px;
-  max-height: 0px;
   transition: max-height 0.3s ease;
 }
 
@@ -470,37 +456,34 @@ hr {
 /* Tablet breakpoint */
 @media only screen and (min-width: 768px) {
   header {
-    grid-template-columns: 1fr 0.8fr 1.5fr 1.1fr 0.7fr;
-    grid-template-rows: 0.2fr auto;
-    grid-template-areas: "main-header main-header main-header main-header main-header" "dropdown-menu dropdown-menu dropdown-menu dropdown-menu dropdown-menu";
     margin-bottom: 0;
+    grid-template: 0.2fr auto / 1fr 0.8fr 1.5fr 1.1fr 0.7fr;
+    grid-template-areas: "main-header main-header main-header main-header main-header" "dropdown-menu dropdown-menu dropdown-menu dropdown-menu dropdown-menu";
   }
 
   header.myz-out {
-    top: 0px;
+    top: 0;
     grid-template-rows: 1fr;
   }
 
   .main-header {
     display: grid;
-    grid-template-columns: 170px auto auto 120px;
-    grid-template-rows: 1fr;
-    grid-template-areas: "logo link-int link-ext login";
     grid-area: main-header;
+    grid-template: 1fr / 170px auto auto 120px;
+    grid-template-areas: "logo link-int link-ext login";
   }
 
   .dropdown-menu {
+    z-index: 9;
     display: grid;
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr;
-    grid-template-areas: "dropdown-links";
+    height: 32px;
+    padding-left: 160px;
+    background: var(--bg-grey-200);
     grid-area: dropdown-menu;
     grid-column-gap: var(--space-unit);
-    background: var(--bg-grey-200);
-    height: 32px;
+    grid-template: 1fr / 1fr;
+    grid-template-areas: "dropdown-links";
     visibility: visible;
-    z-index: 9;
-    padding-left: 160px;
   }
 
   .booktab-button,
@@ -512,37 +495,35 @@ hr {
   }
 
   .link-int {
-    grid-area: link-int;
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    align-content: center;
     max-height: 46px;
+    flex-flow: row nowrap;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-start;
     margin-top: calc(var(--space-unit) * 0.5);
+    grid-area: link-int;
   }
 
   .link-int > span {
     display: flex;
-    flex-direction: column;
-    flex-wrap: nowrap;
-    justify-content: flex-start;
-    align-items: center;
-    align-content: center;
     width: auto;
+    flex-flow: column nowrap;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-start;
   }
 
   .link-int > span > .menu-item {
     width: auto;
     height: auto;
+    padding: calc(var(--space-unit) * 1.5);
     color: var(--bg-white);
+    font-weight: var(--font-sb);
     letter-spacing: 0.2px;
     line-height: 14px;
-    font-weight: var(--font-sb);
-    text-decoration: none;
     outline: none;
-    padding: calc(var(--space-unit) * 1.5);
+    text-decoration: none;
   }
 
   .link-int > span > svg {
@@ -570,19 +551,18 @@ hr {
 
   .link-ext {
     display: flex;
-    flex-direction: row;
-    flex-wrap: nowrap;
-    justify-content: flex-end;
-    align-items: center;
-    align-content: center;
     max-height: 46px;
+    flex-flow: row nowrap;
+    align-content: center;
+    align-items: center;
+    justify-content: flex-end;
   }
 
   .link-ext-span {
     width: auto;
-    line-height: 14px;
-    margin: var(--space-unit);
     padding: calc(var(--space-unit) * 0.5) var(--space-unit);
+    margin: var(--space-unit);
+    line-height: 14px;
   }
 }
 

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

@@ -24,10 +24,10 @@ export class ZAlert {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "AlertTypes",
-          "resolved": "AlertTypesEnum.error | AlertTypesEnum.success | AlertTypesEnum.warning",
+          "original": "AlertType",
+          "resolved": "AlertType.ERROR | AlertType.SUCCESS | AlertType.WARNING",
           "references": {
-            "AlertTypes": {
+            "AlertType": {
               "location": "import",
               "path": "../../../beans/index"
             }

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

@@ -1,11 +1,11 @@
 :host {
   display: block;
+  box-sizing: border-box;
+  color: var(--color-surface05);
   font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
   font-size: 14px;
+  font-weight: var(--font-rg);
   line-height: calc(var(--space-unit) * 2);
-  color: var(--color-surface05);
-  box-sizing: border-box;
 }
 
 :host > div {
@@ -13,16 +13,16 @@
 }
 
 :host > .success {
-  fill: var(--color-success01);
   background: var(--color-success-inverse);
+  fill: var(--color-success01);
 }
 
 :host > .warning {
-  fill: var(--color-warning01);
   background: var(--color-warning-inverse);
+  fill: var(--color-warning01);
 }
 
 :host > .error {
-  fill: var(--color-error01);
   background: var(--color-error-inverse);
+  fill: var(--color-error01);
 }