@zanichelli/albe-web-components 2.33.3 → 2.33.5-rc2

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

@@ -1,70 +1,70 @@
-import { Component, Event, h, Prop, State } from "@stencil/core";
-import { ThemeVariant } from "../../../beans";
-export class ZAppSwitcher {
-  constructor() {
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.dark;
-    this.isopen = false;
-    this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
-  }
-  emitAppButtonClick() {
-    this.isopen = !this.isopen;
-    this.appButtonClick.emit({ isopen: this.isopen });
-  }
-  render() {
-    return (h("button", { title: "app-switcher", onClick: () => this.emitAppButtonClick() },
-      h("z-icon", { name: "app-switcher", class: this.theme })));
-  }
-  static get is() { return "z-app-switcher"; }
-  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": "ThemeVariantBean",
-        "resolved": "\"dark\" | \"light\"",
-        "references": {
-          "ThemeVariantBean": {
-            "location": "import",
-            "path": "../../../beans"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "theme variant, default 'dark'"
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "ThemeVariant.dark"
-    }
-  }; }
-  static get states() { return {
-    "isopen": {}
-  }; }
-  static get events() { return [{
-      "method": "appButtonClick",
-      "name": "appButtonClick",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "emitted on app button icon click, returns open/closed state"
-      },
-      "complexType": {
-        "original": "any",
-        "resolved": "any",
-        "references": {}
-      }
-    }]; }
-}
+import { Component, Event, h, Prop, State } from "@stencil/core";
+import { ThemeVariant } from "../../../beans";
+export class ZAppSwitcher {
+  constructor() {
+    /** theme variant, default 'dark' */
+    this.theme = ThemeVariant.dark;
+    this.isopen = false;
+    this.emitAppButtonClick = this.emitAppButtonClick.bind(this);
+  }
+  emitAppButtonClick() {
+    this.isopen = !this.isopen;
+    this.appButtonClick.emit({ isopen: this.isopen });
+  }
+  render() {
+    return (h("button", { title: "app-switcher", onClick: () => this.emitAppButtonClick() },
+      h("z-icon", { name: "app-switcher", class: this.theme })));
+  }
+  static get is() { return "z-app-switcher"; }
+  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": "ThemeVariantBean",
+        "resolved": "\"dark\" | \"light\"",
+        "references": {
+          "ThemeVariantBean": {
+            "location": "import",
+            "path": "../../../beans"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "theme variant, default 'dark'"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "ThemeVariant.dark"
+    }
+  }; }
+  static get states() { return {
+    "isopen": {}
+  }; }
+  static get events() { return [{
+      "method": "appButtonClick",
+      "name": "appButtonClick",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "emitted on app button icon click, returns open/closed state"
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+}

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

@@ -1,35 +1,35 @@
-:host {
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-}
-
-button {
-  display: flex;
-  justify-content: center;
-  align-content: center;
-  background-color: transparent;
-  border: none;
-  padding: 0;
-}
-
-button > z-icon {
-  color: var(--bg-white);
-  fill: currentColor;
-}
-
-button > z-icon.light {
-  color: var(--bg-grey-900);
-  fill: currentColor;
-} 
-
-/* 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) {
-}
+:host {
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}
+
+button {
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  background-color: transparent;
+  border: none;
+  padding: 0;
+}
+
+button > z-icon {
+  color: var(--bg-white);
+  fill: currentColor;
+}
+
+button > z-icon.light {
+  color: var(--bg-grey-900);
+  fill: currentColor;
+} 
+
+/* 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/components/navigation/z-app-topbar/index.js

@@ -1,156 +1,156 @@
-import { Component, Prop, h, State, Listen, 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.topbarLinks = [];
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth <= mobileBreakpoint;
-  }
-  componentWillLoad() {
-    this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
-  }
-  componentWillRender() {
-    if (this.topbarContent) {
-      this.topbarLinks = typeof this.topbarContent === "string" ? JSON.parse(this.topbarContent) : this.topbarContent;
-    }
-  }
-  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));
-  }
-  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" })))));
-  }
-  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"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "theme variant, default 'dark'"
-      },
-      "attribute": "theme",
-      "reflect": false,
-      "defaultValue": "ThemeVariant.dark"
-    },
-    "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
-    },
-    "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": "link URL used by z-logo"
-      },
-      "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
-    }]; }
-}
+import { Component, Prop, h, State, Listen, 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.topbarLinks = [];
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+  }
+  componentWillLoad() {
+    this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
+  }
+  componentWillRender() {
+    if (this.topbarContent) {
+      this.topbarLinks = typeof this.topbarContent === "string" ? JSON.parse(this.topbarContent) : this.topbarContent;
+    }
+  }
+  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));
+  }
+  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" })))));
+  }
+  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"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "theme variant, default 'dark'"
+      },
+      "attribute": "theme",
+      "reflect": false,
+      "defaultValue": "ThemeVariant.dark"
+    },
+    "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
+    },
+    "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": "link URL used by z-logo"
+      },
+      "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
+    }]; }
+}

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

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