@zanichelli/albe-web-components 2.25.0 → 2.26.0

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,134 +1,134 @@
-import { Component, Prop, Element, h, State, Listen } from "@stencil/core";
-import { ThemeVariant } from "../../../beans";
-import { mobileBreakpoint } from "../../../constants/breakpoints";
-export class ZAppTopbar {
-  constructor() {
-    /** theme variant, default 'dark' */
-    this.theme = ThemeVariant.dark;
-  }
-  handleResize() {
-    this.isMobile = window.innerWidth <= mobileBreakpoint;
-    this.toggleLinkLabels();
-  }
-  handleOrientationChange() {
-    this.isMobile = screen.width <= mobileBreakpoint;
-    this.toggleLinkLabels();
-  }
-  componentWillLoad() {
-    this.zLinksValues = Array.from(this.hostElement.children)
-      .filter((child) => child.nodeName === "Z-LINK")
-      .map((link) => link.childNodes[0].nodeValue);
-    this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
-    this.toggleLinkLabels();
-  }
-  toggleLinkLabels() {
-    if (this.hostElement) {
-      const zLinks = Array.from(this.hostElement.children).filter((child) => child.nodeName === "Z-LINK");
-      if (this.isMobile) {
-        zLinks.forEach((link) => {
-          link.childNodes[0].nodeValue = "";
-        });
-      }
-      else {
-        zLinks.forEach((link, i) => {
-          link.childNodes[0].nodeValue = this.zLinksValues[i];
-        });
-      }
-    }
-  }
-  render() {
-    return (h("div", { class: this.theme },
-      h("div", { class: "left" },
-        h("slot", { name: "logo" }),
-        this.hashtag && h("span", { id: "hashtag" }, this.hashtag.replace(/\s/g, ''))),
-      h("div", { class: `right ${this.logged && this.isMobile && "hide-actions"}` },
-        h("slot", { name: "actions" }),
-        h("slot", { name: "login" }),
-        h("slot", { name: "app-switcher" }))));
-  }
-  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": "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"
-    },
-    "logged": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "logged status flag"
-      },
-      "attribute": "logged",
-      "reflect": false
-    },
-    "hashtag": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "optional hashtag string"
-      },
-      "attribute": "hashtag",
-      "reflect": false
-    }
-  }; }
-  static get states() { return {
-    "zLinksValues": {},
-    "isMobile": {}
-  }; }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() { return [{
-      "name": "resize",
-      "method": "handleResize",
-      "target": "window",
-      "capture": false,
-      "passive": true
-    }, {
-      "name": "orientationchange",
-      "method": "handleOrientationChange",
-      "target": "window",
-      "capture": false,
-      "passive": false
-    }]; }
-}
+import { Component, Prop, Element, h, State, Listen } from "@stencil/core";
+import { ThemeVariant } from "../../../beans";
+import { mobileBreakpoint } from "../../../constants/breakpoints";
+export class ZAppTopbar {
+  constructor() {
+    /** theme variant, default 'dark' */
+    this.theme = ThemeVariant.dark;
+  }
+  handleResize() {
+    this.isMobile = window.innerWidth <= mobileBreakpoint;
+    this.toggleLinkLabels();
+  }
+  handleOrientationChange() {
+    this.isMobile = screen.width <= mobileBreakpoint;
+    this.toggleLinkLabels();
+  }
+  componentWillLoad() {
+    this.zLinksValues = Array.from(this.hostElement.children)
+      .filter((child) => child.nodeName === "Z-LINK")
+      .map((link) => link.childNodes[0].nodeValue);
+    this.isMobile = window.screen.width <= mobileBreakpoint || window.innerWidth <= mobileBreakpoint;
+    this.toggleLinkLabels();
+  }
+  toggleLinkLabels() {
+    if (this.hostElement) {
+      const zLinks = Array.from(this.hostElement.children).filter((child) => child.nodeName === "Z-LINK");
+      if (this.isMobile) {
+        zLinks.forEach((link) => {
+          link.childNodes[0].nodeValue = "";
+        });
+      }
+      else {
+        zLinks.forEach((link, i) => {
+          link.childNodes[0].nodeValue = this.zLinksValues[i];
+        });
+      }
+    }
+  }
+  render() {
+    return (h("div", { class: this.theme },
+      h("div", { class: "left" },
+        h("slot", { name: "logo" }),
+        this.hashtag && h("span", { id: "hashtag" }, this.hashtag.replace(/\s/g, ''))),
+      h("div", { class: `right ${this.logged && this.isMobile && "hide-actions"}` },
+        h("slot", { name: "actions" }),
+        h("slot", { name: "login" }),
+        h("slot", { name: "app-switcher" }))));
+  }
+  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": "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"
+    },
+    "logged": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "logged status flag"
+      },
+      "attribute": "logged",
+      "reflect": false
+    },
+    "hashtag": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "optional hashtag string"
+      },
+      "attribute": "hashtag",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "zLinksValues": {},
+    "isMobile": {}
+  }; }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() { return [{
+      "name": "resize",
+      "method": "handleResize",
+      "target": "window",
+      "capture": false,
+      "passive": true
+    }, {
+      "name": "orientationchange",
+      "method": "handleOrientationChange",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -1,92 +1,92 @@
-:host {
-  display: block;
-  position: sticky;
-  top: 0;
-  z-index: 99;
-  font-family: var(--dashboard-font);
-  font-weight: var(--font-rg);
-}
-
-:host > div {
-  background: var(--bg-grey-900);
-  border-radius: var(--border-radius-min);
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  justify-content: space-between;
-  align-items: center;
-  padding: calc(var(--space-unit) * .5);
-  /* height: calc(var(--space-unit) * 5); */
-}
-
-:host > div.light {
-  background: var(--bg-white);
-}
-
-:host > div.light #hashtag {
-  color: var(--bg-grey-900);
-}
-
-.left {
-  grid-column-start: 1;
-  grid-column-end: 2;
-  display: flex;
-  flex-direction: row;
-  flex-wrap: nowrap;
-  justify-content: flex-start;
-  align-items: center;
-  align-content: center;
-}
-
-.left > #hashtag {
-  display: none;
-}
-
-.right {
-  grid-column-start: 2;
-  grid-column-end: 3;
-  display: flex;
-  /* width: max-content; */
-  align-items: center;
-  justify-content: flex-end;
-  padding-right: var(--space-unit);
-}
-
-
-
-.right.hide-actions > slot[name="actions"] {
-  display: none;
-}
-
-.right > ::slotted(*) {
-  padding: calc(var(--space-unit) * .5);
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host > div {
-    grid-template-columns: repeat(2, auto);
-  }
-
-  .left > #hashtag {
-    display: initial;
-    color: var(--bg-white);
-    text-transform: uppercase;
-    padding: var(--space-unit) calc(var(--space-unit) * 2);
-  }
-  .left > #hashtag::before {
-    content: "#";
-  }
-
-  .right {
-    grid-column-gap: var(--space-unit);
-    padding-right: calc(var(--space-unit) * 1.5);
-  }
-}
-
-/* Desktop breakpoint */
-@media only screen and (min-width: 1152px) {
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-}
+:host {
+  display: block;
+  position: sticky;
+  top: 0;
+  z-index: 99;
+  font-family: var(--dashboard-font);
+  font-weight: var(--font-rg);
+}
+
+:host > div {
+  background: var(--bg-grey-900);
+  border-radius: var(--border-radius-min);
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  justify-content: space-between;
+  align-items: center;
+  padding: calc(var(--space-unit) * .5);
+  /* height: calc(var(--space-unit) * 5); */
+}
+
+:host > div.light {
+  background: var(--bg-white);
+}
+
+:host > div.light #hashtag {
+  color: var(--bg-grey-900);
+}
+
+.left {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: nowrap;
+  justify-content: flex-start;
+  align-items: center;
+  align-content: center;
+}
+
+.left > #hashtag {
+  display: none;
+}
+
+.right {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  display: flex;
+  /* width: max-content; */
+  align-items: center;
+  justify-content: flex-end;
+  padding-right: var(--space-unit);
+}
+
+
+
+.right.hide-actions > slot[name="actions"] {
+  display: none;
+}
+
+.right > ::slotted(*) {
+  padding: calc(var(--space-unit) * .5);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host > div {
+    grid-template-columns: repeat(2, auto);
+  }
+
+  .left > #hashtag {
+    display: initial;
+    color: var(--bg-white);
+    text-transform: uppercase;
+    padding: var(--space-unit) calc(var(--space-unit) * 2);
+  }
+  .left > #hashtag::before {
+    content: "#";
+  }
+
+  .right {
+    grid-column-gap: var(--space-unit);
+    padding-right: calc(var(--space-unit) * 1.5);
+  }
+}
+
+/* Desktop breakpoint */
+@media only screen and (min-width: 1152px) {
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+}