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

package/dist/collection/components/navigation/z-app-topbar/index.js

@@ -1,10 +1,10 @@
-import { Component, Prop, h, State, Listen, Host } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { DividerOrientation, ThemeVariant } from "../../../beans";
 import { mobileBreakpoint } from "../../../constants/breakpoints";
 export class ZAppTopbar {
   constructor() {
     /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.dark;
+    this.theme = ThemeVariant.DARK;
     this.topbarLinks = [];
   }
   handleResize() {
@@ -19,138 +19,138 @@ export class ZAppTopbar {
     }
   }
   renderTopbarLinks() {
-    return this.topbarLinks.map((link) => h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.light ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label));
+    return this.topbarLinks.map((link) => (h("z-link", { htmlid: link.id, textcolor: this.theme === ThemeVariant.LIGHT ? "black" : "white", href: link.link, target: link.target, icon: this.isMobile ? link.icon : undefined }, !this.isMobile && link.label)));
   }
   render() {
     return (h(Host, { class: {
         [this.theme]: true,
-        "limited-width": !!this.contentMaxWidth
-      } },
-      h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} },
-        h("div", { id: "left-panel", class: "content-panel" },
-          h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }),
-          this.isMobile && this.renderTopbarLinks()),
-        h("div", { id: "right-panel", class: "content-panel" },
-          !this.isMobile && this.renderTopbarLinks(),
-          this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }),
-          h("div", { id: "divider-container" },
-            h("z-divider", { orientation: DividerOrientation.vertical, color: this.theme === ThemeVariant.light ? "gray800" : "color-white" })),
-          h("slot", { name: "login" })))));
+        "limited-width": !!this.contentMaxWidth,
+      } }, h("div", { id: "content-container", style: this.contentMaxWidth ? { "--mw": `${this.contentMaxWidth}px` } : {} }, h("div", { id: "left-panel", class: "content-panel" }, h("z-logo", { mobileLogo: this.isMobile, width: this.isMobile ? 32 : 128, height: this.isMobile ? 40 : 32, imageAlt: "zanichelli-logo", link: this.logoLink, targetBlank: true }), this.isMobile && this.renderTopbarLinks()), h("div", { id: "right-panel", class: "content-panel" }, !this.isMobile && this.renderTopbarLinks(), this.showAppSwitcher && h("z-app-switcher", { theme: this.theme }), h("div", { id: "divider-container" }, h("z-divider", { orientation: DividerOrientation.VERTICAL, color: this.theme === ThemeVariant.LIGHT ? "gray800" : "color-white" })), h("slot", { name: "login" })))));
   }
   static get is() { return "z-app-topbar"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["styles.css"]
-  }; }
-  static get properties() { return {
-    "theme": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "ThemeVariant",
-        "resolved": "ThemeVariant.dark | ThemeVariant.light",
-        "references": {
-          "ThemeVariant": {
-            "location": "import",
-            "path": "../../../beans"
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "theme": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "ThemeVariant",
+          "resolved": "ThemeVariant.DARK | ThemeVariant.LIGHT",
+          "references": {
+            "ThemeVariant": {
+              "location": "import",
+              "path": "../../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "theme variant, default 'dark'"
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "theme variant, default 'dark'"
+        },
+        "attribute": "theme",
+        "reflect": false,
+        "defaultValue": "ThemeVariant.DARK"
       },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "ThemeVariant.dark"
-    },
-    "contentMaxWidth": {
-      "type": "number",
-      "mutable": false,
-      "complexType": {
-        "original": "number",
-        "resolved": "number",
-        "references": {}
+      "contentMaxWidth": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "maximum width of topbar content"
+        },
+        "attribute": "content-max-width",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "maximum width of topbar content"
-      },
-      "attribute": "content-max-width",
-      "reflect": false
-    },
-    "topbarContent": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | MenuItem[]",
-        "resolved": "MenuItem[] | string",
-        "references": {
-          "MenuItem": {
-            "location": "import",
-            "path": "../../../beans"
+      "topbarContent": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string | MenuItem[]",
+          "resolved": "MenuItem[] | string",
+          "references": {
+            "MenuItem": {
+              "location": "import",
+              "path": "../../../beans"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "JSON string or MenuItem array to define topbar links"
-      },
-      "attribute": "topbar-content",
-      "reflect": false
-    },
-    "logoLink": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "JSON string or MenuItem array to define topbar links"
+        },
+        "attribute": "topbar-content",
+        "reflect": false
       },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "link URL used by z-logo"
+      "logoLink": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "link URL used by z-logo"
+        },
+        "attribute": "logo-link",
+        "reflect": false
       },
-      "attribute": "logo-link",
-      "reflect": false
-    },
-    "showAppSwitcher": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "add app-switcher"
-      },
-      "attribute": "show-app-switcher",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "isMobile": {}
-  }; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }]; }
+      "showAppSwitcher": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "add app-switcher"
+        },
+        "attribute": "show-app-switcher",
+        "reflect": false
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isMobile": {}
+    };
+  }
+  static get listeners() {
+    return [{
+        "name": "resize",
+        "method": "handleResize",
+        "target": "window",
+        "capture": false,
+        "passive": true
+      }];
+  }
 }

package/dist/collection/components/navigation/z-app-topbar/styles.css

@@ -1,13 +1,13 @@
 :host {
-  display: block;
   position: sticky;
-  box-sizing: border-box;
+  z-index: 99;
   top: 0;
+  display: block;
   height: calc(var(--space-unit) * 6);
+  box-sizing: border-box;
   padding: calc(var(--space-unit) / 2) calc(var(--space-unit) * 2);
-  border-radius: var(--border-no-radius);
   background-color: var(--gray900);
-  z-index: 99;
+  border-radius: var(--border-no-radius);
 }
 
 :host(.light) {
@@ -16,18 +16,20 @@
 
 :host > div {
   display: flex;
-  justify-content: space-between;
   align-items: center;
+  justify-content: space-between;
 }
 
 :host(.limited-width) #content-container {
-  margin: auto;
+  --mw: none;
+
   max-width: var(--mw);
+  margin: auto;
 }
 
 .content-panel {
   display: flex;
-  align-items: center
+  align-items: center;
 }
 
 .content-panel > :not(:last-child) {
@@ -40,10 +42,10 @@
 
 z-link {
   font-family: var(--font-family-sans);
-  font-weight: var(--font-sb);
   font-size: 14px;
-  line-height: 20px;
+  font-weight: var(--font-sb);
   letter-spacing: 0.3px;
+  line-height: 20px;
 }
 
 /* Tablet breakpoint */
@@ -61,11 +63,3 @@ z-link {
     height: calc(var(--space-unit) * 3);
   }
 }
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}