@zanichelli/albe-web-components 7.3.3 → 7.3.4

package/dist/collection/components/z-skip-to-content/index.js

@@ -1,139 +1,139 @@
-import { h, Host } from "@stencil/core";
-import { getElementTree, handleKeyboardSubmit } from "../../utils/utils";
-import { ThemeVariant } from "../../beans";
-/**
- * Component short description.
- */
-export class ZSkipToContent {
-  constructor() {
-    /** Array to fill link into skip-content */
-    this.links = [];
-    this.visible = false;
-    this.visibleLink = "";
-  }
-  handleFocusOutSkipToContent(e) {
-    if (this.isInSkipToContent(e.target)) {
-      this.visible = false;
-    }
-  }
-  handleFocusSkipToContent(e) {
-    if (this.isInSkipToContent(e.target)) {
-      this.visible = true;
-    }
-  }
-  componentDidLoad() {
-    this.showFirstChild();
-  }
-  componentWillRender() {
-    if (this.links) {
-      this.links = typeof this.links === "string" ? JSON.parse(this.links) : this.links;
-    }
-  }
-  isInSkipToContent(elem) {
-    const tree = getElementTree(elem);
-    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
-    return !!menuParent;
-  }
-  showFirstChild() {
-    var _a;
-    const firstChild = (_a = this.hostElement.children) === null || _a === void 0 ? void 0 : _a[0];
-    if (firstChild) {
-      this.visibleLink = firstChild.id;
-    }
-  }
-  handleLinkClick() {
-    this.visible = false;
-  }
-  render() {
-    return (h(Host, { class: {
-        [this.variant]: true,
-        "skip-to-content-visible": this.visible,
-      } }, this.links.map((link, i) => {
-      const id = `skip-to-content-${i}`;
-      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
-    })));
-  }
-  static get is() { return "z-skip-to-content"; }
-  static get encapsulation() { return "scoped"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["styles.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "variant": {
-        "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": "Graphical variant: `dark`, `light`."
-        },
-        "attribute": "variant",
-        "reflect": true
-      },
-      "links": {
-        "type": "string",
-        "mutable": true,
-        "complexType": {
-          "original": "string | SkipToContentLink[]",
-          "resolved": "SkipToContentLink[] | string",
-          "references": {
-            "SkipToContentLink": {
-              "location": "import",
-              "path": "../../beans"
-            }
-          }
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "Array to fill link into skip-content"
-        },
-        "attribute": "links",
-        "reflect": false,
-        "defaultValue": "[]"
-      }
-    };
-  }
-  static get states() {
-    return {
-      "visible": {},
-      "visibleLink": {}
-    };
-  }
-  static get elementRef() { return "hostElement"; }
-  static get listeners() {
-    return [{
-        "name": "focusout",
-        "method": "handleFocusOutSkipToContent",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }, {
-        "name": "focusin",
-        "method": "handleFocusSkipToContent",
-        "target": "document",
-        "capture": false,
-        "passive": false
-      }];
-  }
-}
+import { h, Host } from "@stencil/core";
+import { getElementTree, handleKeyboardSubmit } from "../../utils/utils";
+import { ThemeVariant } from "../../beans";
+/**
+ * Component short description.
+ */
+export class ZSkipToContent {
+  constructor() {
+    /** Array to fill link into skip-content */
+    this.links = [];
+    this.visible = false;
+    this.visibleLink = "";
+  }
+  handleFocusOutSkipToContent(e) {
+    if (this.isInSkipToContent(e.target)) {
+      this.visible = false;
+    }
+  }
+  handleFocusSkipToContent(e) {
+    if (this.isInSkipToContent(e.target)) {
+      this.visible = true;
+    }
+  }
+  componentDidLoad() {
+    this.showFirstChild();
+  }
+  componentWillRender() {
+    if (this.links) {
+      this.links = typeof this.links === "string" ? JSON.parse(this.links) : this.links;
+    }
+  }
+  isInSkipToContent(elem) {
+    const tree = getElementTree(elem);
+    const menuParent = tree.find((elem) => elem.nodeName.toLowerCase() === "z-skip-to-content");
+    return !!menuParent;
+  }
+  showFirstChild() {
+    var _a;
+    const firstChild = (_a = this.hostElement.children) === null || _a === void 0 ? void 0 : _a[0];
+    if (firstChild) {
+      this.visibleLink = firstChild.id;
+    }
+  }
+  handleLinkClick() {
+    this.visible = false;
+  }
+  render() {
+    return (h(Host, { class: {
+        [this.variant]: true,
+        "skip-to-content-visible": this.visible,
+      } }, this.links.map((link, i) => {
+      const id = `skip-to-content-${i}`;
+      return (h("z-link", { id: id, underline: true, "aria-label": link.ariaLabel || link.label, class: `body-1-sb ${id == this.visibleLink ? "link-visible" : "link-invisible"}`, href: link.href, textcolor: this.variant === ThemeVariant.DARK ? "white" : "black", onFocus: () => (this.visibleLink = id), onClick: () => this.handleLinkClick(), onKeyUp: (e) => handleKeyboardSubmit(e, this.handleLinkClick.bind(this)) }, link.label));
+    })));
+  }
+  static get is() { return "z-skip-to-content"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["styles.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "variant": {
+        "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": "Graphical variant: `dark`, `light`."
+        },
+        "attribute": "variant",
+        "reflect": true
+      },
+      "links": {
+        "type": "string",
+        "mutable": true,
+        "complexType": {
+          "original": "string | SkipToContentLink[]",
+          "resolved": "SkipToContentLink[] | string",
+          "references": {
+            "SkipToContentLink": {
+              "location": "import",
+              "path": "../../beans"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Array to fill link into skip-content"
+        },
+        "attribute": "links",
+        "reflect": false,
+        "defaultValue": "[]"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "visible": {},
+      "visibleLink": {}
+    };
+  }
+  static get elementRef() { return "hostElement"; }
+  static get listeners() {
+    return [{
+        "name": "focusout",
+        "method": "handleFocusOutSkipToContent",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }, {
+        "name": "focusin",
+        "method": "handleFocusSkipToContent",
+        "target": "document",
+        "capture": false,
+        "passive": false
+      }];
+  }
+}

package/dist/collection/components/z-skip-to-content/styles.css

@@ -1,80 +1,80 @@
-:host {
-  position: absolute;
-  left: -100%;
-  height: 60px;
-  box-sizing: border-box;
-  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);
-  background-color: #24f4ff;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-:host.skip-to-content-visible,
-:host:focus {
-  position: static;
-  display: block;
-}
-
-:host > z-link {
-  display: block;
-  text-align: center;
-}
-
-:host > z-link.link-invisible {
-  overflow: hidden;
-  width: 0;
-  height: 0;
-}
-
-:host > z-link.link-visible {
-  width: initial;
-  height: initial;
-}
-
-:host.dark {
-  background-color: var(--bg-grey-800);
-  color: var(--color-white);
-}
-
-:host.light {
-  border: 2px solid var(--text-grey-800);
-  background-color: var(--bg-white);
-  color: var(--text-grey-800);
-}
-
-/* Tablet breakpoint */
-@media (min-width: 768px) {
-  :host > z-link {
-    text-align: left;
-  }
-}
-
-/* Desktop breakpoint */
-@media (min-width: 1152px) {
-  :host > z-link {
-    display: inline-block;
-    padding: 0 calc(var(--space-unit) * 3);
-    border-right: 1px solid var(--bg-grey-800);
-  }
-
-  :host > z-link.link-invisible {
-    overflow: initial;
-    width: initial;
-    height: initial;
-  }
-
-  :host > z-link:first-child {
-    padding-left: 0;
-  }
-
-  :host > z-link:last-child,
-  :host.dark > z-link:last-child,
-  :host.light > z-link:last-child {
-    padding-right: 0;
-    border-right: none;
-  }
-
-  :host.dark > z-link {
-    border-right: 1px solid var(--bg-white);
-  }
-}
+:host {
+  position: absolute;
+  left: -100%;
+  height: 60px;
+  box-sizing: border-box;
+  padding: calc(var(--space-unit) * 1.25) calc(var(--space-unit) * 3);
+  background-color: #24f4ff;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+:host.skip-to-content-visible,
+:host:focus {
+  position: static;
+  display: block;
+}
+
+:host > z-link {
+  display: block;
+  text-align: center;
+}
+
+:host > z-link.link-invisible {
+  overflow: hidden;
+  width: 0;
+  height: 0;
+}
+
+:host > z-link.link-visible {
+  width: initial;
+  height: initial;
+}
+
+:host.dark {
+  background-color: var(--bg-grey-800);
+  color: var(--color-white);
+}
+
+:host.light {
+  border: 2px solid var(--text-grey-800);
+  background-color: var(--bg-white);
+  color: var(--text-grey-800);
+}
+
+/* Tablet breakpoint */
+@media (min-width: 768px) {
+  :host > z-link {
+    text-align: left;
+  }
+}
+
+/* Desktop breakpoint */
+@media (min-width: 1152px) {
+  :host > z-link {
+    display: inline-block;
+    padding: 0 calc(var(--space-unit) * 3);
+    border-right: 1px solid var(--bg-grey-800);
+  }
+
+  :host > z-link.link-invisible {
+    overflow: initial;
+    width: initial;
+    height: initial;
+  }
+
+  :host > z-link:first-child {
+    padding-left: 0;
+  }
+
+  :host > z-link:last-child,
+  :host.dark > z-link:last-child,
+  :host.light > z-link:last-child {
+    padding-right: 0;
+    border-right: none;
+  }
+
+  :host.dark > z-link {
+    border-right: 1px solid var(--bg-white);
+  }
+}