@scouterna/ui-webc 2.0.0 → 2.2.0

package/dist/collection/components/list-view-item/list-view-item.js

@@ -0,0 +1,282 @@
+import { Host, h, } from "@stencil/core";
+export class ScoutListViewItem {
+    icon;
+    primary;
+    secondary;
+    type = "button";
+    href;
+    target;
+    rel;
+    name;
+    value;
+    checked;
+    scoutClick;
+    render() {
+        const Tag = this.type === "link"
+            ? "a"
+            : this.type === "radio" || this.type === "checkbox"
+                ? "label"
+                : "button";
+        const linkProps = this.type === "link"
+            ? {
+                href: this.href,
+                target: this.target,
+                // This might not be our job, but better safe than sorry.
+                rel: this.rel ??
+                    (this.target === "_blank" ? "noopener noreferrer" : undefined),
+            }
+            : {};
+        return (h(Host, { key: '9b9ac94836164ad6a375ee17086e39dec344509d', role: "listitem" }, h(Tag, { key: '302cd52b48fec498897cce4d681ef77592038ba4', class: "button", ...linkProps, onClick: () => this.scoutClick.emit() }, this.getPrefix(), this.getContent(), this.getSuffix())));
+    }
+    getPrefix() {
+        if (!this.icon) {
+            return null;
+        }
+        return h("div", { class: "prefix-icon", innerHTML: this.icon });
+    }
+    getContent() {
+        return (h("div", { class: "content" }, this.primary && h("div", { class: "primary" }, this.primary), this.secondary && h("div", { class: "secondary" }, this.secondary)));
+    }
+    getSuffix() {
+        if (this.type === "radio") {
+            return (h("scout-radio-button", { name: this.name, value: this.value, checked: this.checked }));
+        }
+        if (this.type === "checkbox") {
+            return (h("scout-checkbox", { name: this.name, value: this.value, checked: this.checked }));
+        }
+        return null;
+    }
+    static get is() { return "scout-list-view-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list-view-item.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list-view-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "primary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "primary"
+            },
+            "secondary": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "secondary"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ItemType",
+                    "resolved": "\"button\" | \"checkbox\" | \"link\" | \"radio\"",
+                    "references": {
+                        "ItemType": {
+                            "location": "local",
+                            "path": "/home/runner/work/j26-components/j26-components/packages/ui-webc/src/components/list-view-item/list-view-item.tsx",
+                            "id": "src/components/list-view-item/list-view-item.tsx::ItemType"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "\"button\""
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            },
+            "rel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "rel"
+            },
+            "name": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "name"
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "value"
+            },
+            "checked": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "checked"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "scoutClick",
+                "name": "scoutClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=list-view-item.js.map

package/dist/collection/components/list-view-item/list-view-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-view-item.js","sourceRoot":"","sources":["../../../src/components/list-view-item/list-view-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  Event,\n  type EventEmitter,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nexport type ItemType = \"button\" | \"link\" | \"radio\" | \"checkbox\";\n\n@Component({\n  tag: \"scout-list-view-item\",\n  styleUrl: \"list-view-item.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewItem {\n  @Prop() icon?: string;\n  @Prop() primary?: string;\n  @Prop() secondary?: string;\n  @Prop() type: ItemType = \"button\";\n\n  @Prop() href?: string;\n  @Prop() target?: string;\n  @Prop() rel?: string;\n\n  @Prop() name?: string;\n  @Prop() value?: string;\n  @Prop() checked?: boolean;\n\n  @Event() scoutClick: EventEmitter<void>;\n\n  render() {\n    const Tag =\n      this.type === \"link\"\n        ? \"a\"\n        : this.type === \"radio\" || this.type === \"checkbox\"\n          ? \"label\"\n          : \"button\";\n\n    const linkProps =\n      this.type === \"link\"\n        ? {\n            href: this.href,\n            target: this.target,\n            // This might not be our job, but better safe than sorry.\n            rel:\n              this.rel ??\n              (this.target === \"_blank\" ? \"noopener noreferrer\" : undefined),\n          }\n        : {};\n\n    return (\n      <Host role=\"listitem\">\n        <Tag\n          class=\"button\"\n          {...linkProps}\n          onClick={() => this.scoutClick.emit()}\n        >\n          {this.getPrefix()}\n          {this.getContent()}\n          {this.getSuffix()}\n        </Tag>\n      </Host>\n    );\n  }\n\n  private getPrefix() {\n    if (!this.icon) {\n      return null;\n    }\n\n    return <div class=\"prefix-icon\" innerHTML={this.icon} />;\n  }\n\n  private getContent() {\n    return (\n      <div class=\"content\">\n        {this.primary && <div class=\"primary\">{this.primary}</div>}\n        {this.secondary && <div class=\"secondary\">{this.secondary}</div>}\n      </div>\n    );\n  }\n\n  private getSuffix() {\n    if (this.type === \"radio\") {\n      return (\n        <scout-radio-button\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    if (this.type === \"checkbox\") {\n      return (\n        <scout-checkbox\n          name={this.name}\n          value={this.value}\n          checked={this.checked}\n        />\n      );\n    }\n\n    return null;\n  }\n}\n"]}

package/dist/collection/components/list-view-subheader/list-view-subheader.css

@@ -0,0 +1,18 @@
+/** biome-ignore-all lint/complexity/noImportantStyles: https://github.com/tailwindlabs/tailwindcss/discussions/18628#discussioncomment-13915195 */
+
+:host {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-1) !important;
+  border: none !important;
+  background-color: transparent;
+}
+
+.heading {
+  margin: 0;
+  padding: 0;
+  font: var(--type-body-sm);
+  color: var(--color-text-base);
+  font-weight: 500;
+}

package/dist/collection/components/list-view-subheader/list-view-subheader.js

@@ -0,0 +1,65 @@
+import { Host, h } from "@stencil/core";
+export class ScoutListViewSubheader {
+    text;
+    headingLevel = "h2";
+    render() {
+        return (h(Host, { key: '6fcadbd85c81d7772d4ceb4ecd67f0f3ad1f2f87', role: "listitem" }, h(this.headingLevel, { key: 'f81481cbb344b07ae1599a7dfcac010b3eeccea1', class: "heading" }, this.text)));
+    }
+    static get is() { return "scout-list-view-subheader"; }
+    static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["list-view-subheader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["list-view-subheader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "heading-level",
+                "defaultValue": "\"h2\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=list-view-subheader.js.map

package/dist/collection/components/list-view-subheader/list-view-subheader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list-view-subheader.js","sourceRoot":"","sources":["../../../src/components/list-view-subheader/list-view-subheader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASzD,MAAM,OAAO,sBAAsB;IACzB,IAAI,CAAS;IACb,YAAY,GAA4C,IAAI,CAAC;IAErE,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU;YACnB,EAAC,IAAI,CAAC,YAAY,qDAAC,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,IAAI,CAAqB,CAC7D,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from \"@stencil/core\";\n\n@Component({\n  tag: \"scout-list-view-subheader\",\n  styleUrl: \"list-view-subheader.css\",\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class ScoutListViewSubheader {\n  @Prop() text: string;\n  @Prop() headingLevel: \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\" = \"h2\";\n\n  render() {\n    return (\n      <Host role=\"listitem\">\n        <this.headingLevel class=\"heading\">{this.text}</this.headingLevel>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/loader/loader.css

@@ -0,0 +1,118 @@
+:host {
+  --loader-symbol-size: var(--spacing-16);
+  --loader-type: var(--type-body-base);
+
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+:host(.xs) {
+  --loader-symbol-size: var(--spacing-8);
+  --loader-type: var(--type-body-sm);
+}
+
+:host(.sm) {
+  --loader-symbol-size: var(--spacing-12);
+  --loader-type: var(--type-body-sm);
+}
+
+:host(.lg) {
+  --loader-symbol-size: var(--spacing-20);
+  --loader-type: var(--type-body-lg);
+}
+
+:host(.xl) {
+  --loader-symbol-size: var(--spacing-24);
+  --loader-type: var(--type-body-2xl);
+}
+
+.frame {
+  position: relative;
+  width: var(--loader-symbol-size);
+  height: var(--loader-symbol-size);
+}
+
+.text {
+  font: var(--loader-type);
+  text-align: center;
+  font-weight: 500;
+  color: var(--color-text-brand-base);
+}
+
+.symbol {
+  position: absolute;
+  flex: 0 0 auto;
+  width: 100%;
+  height: 100%;
+
+  background-color: var(--color-background-brand-base);
+  -webkit-mask-image: var(--symbol);
+          mask-image: var(--symbol);
+  -webkit-mask-repeat: no-repeat;
+          mask-repeat: no-repeat;
+  -webkit-mask-size: 90% 90%;
+          mask-size: 90% 90%;
+  -webkit-mask-position: center;
+          mask-position: center;
+
+  transform: translateX(-100%);
+  opacity: 0;
+}
+
+.symbol.animate-in {
+  animation:
+    slide-in 1s cubic-bezier(0.83, 0, 0.17, 1) forwards,
+    fade-in 1s ease-in-out forwards;
+}
+
+.symbol.animate-out {
+  animation:
+    slide-out 1s cubic-bezier(0.83, 0, 0.17, 1) forwards,
+    fade-out 1s ease-in-out forwards;
+}
+
+@keyframes slide-in {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes slide-out {
+  0% {
+    transform: translateX(0%);
+  }
+
+  100% {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes fade-in {
+  0%,
+  50% {
+    opacity: 0;
+  }
+
+  80%,
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes fade-out {
+  0%,
+  40% {
+    opacity: 1;
+  }
+
+  50%,
+  100% {
+    opacity: 0;
+  }
+}

package/dist/collection/components/loader/loader.js

@@ -0,0 +1,111 @@
+import { Host, h, } from "@stencil/core";
+import SymbolAdventurer from "./symbols/adventurer.svg";
+import SymbolChallenger from "./symbols/challenger.svg";
+import SymbolDiscoverer from "./symbols/discoverer.svg";
+import SymbolFamilyScout from "./symbols/family-scout.svg";
+import SymbolRover from "./symbols/rover.svg";
+import SymbolTracker from "./symbols/tracker.svg";
+export class ScoutLoader {
+    text;
+    size = "base";
+    symbols = [
+        SymbolFamilyScout,
+        SymbolTracker,
+        SymbolDiscoverer,
+        SymbolAdventurer,
+        SymbolChallenger,
+        SymbolRover,
+    ];
+    symbolElements = new Array(this.symbols.length);
+    currentSymbolIndex = 1;
+    componentDidLoad() {
+        this.showElement(this.symbolElements[0]);
+    }
+    render() {
+        return (h(Host, { key: 'b9271e02a57961fde6499c9e1cf2b32727631056', class: this.size === "base" ? "" : this.size }, h("div", { key: 'c0758b7d7b47bf97a5358d2df48d7518b899cb71', class: "frame" }, this.getSymbols()), this.text && h("div", { key: '9bcdf6093442c1a284a8b4de759b0b92f4df39d0', class: "text" }, this.text)));
+    }
+    showElement(el) {
+        el.classList.remove("animate-out");
+        el.classList.add("animate-in");
+    }
+    hideElement(el) {
+        el.classList.remove("animate-in");
+        el.classList.add("animate-out");
+    }
+    next() {
+        const currIndex = this.currentSymbolIndex;
+        const prevIndex = (currIndex - 1 + this.symbols.length) % this.symbols.length;
+        this.showElement(this.symbolElements[currIndex]);
+        this.hideElement(this.symbolElements[prevIndex]);
+        this.currentSymbolIndex += 1;
+        if (this.currentSymbolIndex >= this.symbols.length) {
+            this.currentSymbolIndex = 0;
+        }
+    }
+    tickDone(event) {
+        if (event.animationName === "slide-in") {
+            this.next();
+        }
+    }
+    getSymbols() {
+        return this.symbols.map((symbol, index) => (h("div", { ref: (el) => {
+                this.symbolElements[index] = el;
+            }, class: "symbol", style: { "--symbol": `url(${symbol})` }, onAnimationEnd: (event) => this.tickDone(event) })));
+    }
+    static get is() { return "scout-loader"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["loader.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "text": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "text"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\"",
+                    "resolved": "\"base\" | \"lg\" | \"sm\" | \"xl\" | \"xs\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "\"base\""
+            }
+        };
+    }
+}
+//# sourceMappingURL=loader.js.map

package/dist/collection/components/loader/loader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loader.js","sourceRoot":"","sources":["../../../src/components/loader/loader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  Component,\n  type ComponentInterface,\n  Host,\n  h,\n  Prop,\n} from \"@stencil/core\";\n\nimport SymbolAdventurer from \"./symbols/adventurer.svg\";\nimport SymbolChallenger from \"./symbols/challenger.svg\";\nimport SymbolDiscoverer from \"./symbols/discoverer.svg\";\nimport SymbolFamilyScout from \"./symbols/family-scout.svg\";\nimport SymbolRover from \"./symbols/rover.svg\";\nimport SymbolTracker from \"./symbols/tracker.svg\";\n\n@Component({\n  tag: \"scout-loader\",\n  styleUrl: \"loader.css\",\n  shadow: true,\n})\nexport class ScoutLoader implements ComponentInterface {\n  @Prop() text?: string;\n  @Prop() size?: \"xs\" | \"sm\" | \"base\" | \"lg\" | \"xl\" = \"base\";\n\n  private symbols = [\n    SymbolFamilyScout,\n    SymbolTracker,\n    SymbolDiscoverer,\n    SymbolAdventurer,\n    SymbolChallenger,\n    SymbolRover,\n  ];\n\n  private symbolElements: HTMLDivElement[] = new Array(this.symbols.length);\n\n  private currentSymbolIndex = 1;\n\n  componentDidLoad(): void {\n    this.showElement(this.symbolElements[0]);\n  }\n\n  render() {\n    return (\n      <Host class={this.size === \"base\" ? \"\" : this.size}>\n        <div class=\"frame\">{this.getSymbols()}</div>\n        {this.text && <div class=\"text\">{this.text}</div>}\n      </Host>\n    );\n  }\n\n  showElement(el: HTMLDivElement) {\n    el.classList.remove(\"animate-out\");\n    el.classList.add(\"animate-in\");\n  }\n\n  hideElement(el: HTMLDivElement) {\n    el.classList.remove(\"animate-in\");\n    el.classList.add(\"animate-out\");\n  }\n\n  next() {\n    const currIndex = this.currentSymbolIndex;\n    const prevIndex =\n      (currIndex - 1 + this.symbols.length) % this.symbols.length;\n\n    this.showElement(this.symbolElements[currIndex]);\n    this.hideElement(this.symbolElements[prevIndex]);\n\n    this.currentSymbolIndex += 1;\n    if (this.currentSymbolIndex >= this.symbols.length) {\n      this.currentSymbolIndex = 0;\n    }\n  }\n\n  tickDone(event: AnimationEvent) {\n    if (event.animationName === \"slide-in\") {\n      this.next();\n    }\n  }\n\n  getSymbols() {\n    return this.symbols.map((symbol, index) => (\n      <div\n        ref={(el) => {\n          this.symbolElements[index] = el;\n        }}\n        class=\"symbol\"\n        style={{ \"--symbol\": `url(${symbol})` }}\n        onAnimationEnd={(event) => this.tickDone(event)}\n      />\n    ));\n  }\n}\n"]}

package/dist/collection/components/loader/symbols/adventurer.svg

@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="256"
+   height="256"
+   viewBox="0 0 256 256"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1"
+     transform="matrix(3.7795065,0,0,3.7795065,-309.87707,-379.59871)">
+    <path
+       style="fill:currentColor"
+       d="m 96.719587,165.65169 c 0.0321,-0.0758 0.0802,-0.25498 0.10683,-0.39822 0.0295,-0.15882 2.50605,-4.00605 6.346693,-9.85946 6.04458,-9.21238 6.30781,-9.59906 6.53524,-9.60028 0.21979,-0.001 0.34435,0.14703 1.71861,2.0449 0.8149,1.12539 1.50691,2.06179 1.53781,2.08088 0.0309,0.0191 0.67795,-1.45966 1.43791,-3.28613 1.36766,-3.28701 1.38405,-3.32085 1.60853,-3.32085 0.22334,0 0.23489,0.0228 0.7573,1.49583 2.10224,5.92761 2.54012,7.12082 2.59357,7.06734 0.0838,-0.0839 3.0601,-5.71202 3.0601,-5.78666 0,-0.0332 0.1052,-0.0604 0.23379,-0.0604 0.20238,0 0.28541,0.0767 0.61815,0.57078 0.21141,0.31393 2.91045,4.60955 5.99788,9.54581 4.3158,6.90021 5.62602,9.05238 5.66763,9.30963 l 0.0541,0.33459 h -19.16629 c -18.223373,0 -19.163413,-0.007 -19.107873,-0.13777 z m 22.729493,-20.58746 c -0.17869,-0.22138 -0.93804,-1.83448 -2.14096,-4.54808 -0.70024,-1.57963 -1.30115,-2.90058 -1.33536,-2.93543 -0.0989,-0.1008 -1.23338,2.51913 -2.55866,5.90894 -0.71713,1.83429 -0.57302,1.8526 -2.29945,-0.29217 -0.7306,-0.90764 -1.3515,-1.65162 -1.37979,-1.6533 -0.0283,-0.002 -0.52427,0.65226 -1.10219,1.45319 -1.34943,1.87014 -1.33001,1.86479 -1.78493,0.49228 -0.55756,-1.68221 -0.66452,-2.38683 -0.61844,-4.07419 0.0315,-1.15157 0.0918,-1.75313 0.28846,-2.87358 0.28785,-1.64034 0.33322,-2.88724 0.13763,-3.78262 -0.0846,-0.38733 -0.35643,-1.017 -0.90065,-2.0863 -0.83041,-1.63162 -1.25108,-2.76052 -1.50949,-4.05085 -0.84341,-4.21136 -0.006,-9.98743 2.05158,-14.14331 1.61536,-3.2634 4.03627,-5.97696 7.18969,-8.05881 1.24116,-0.8194 2.36526,-1.40161 2.83422,-1.46795 0.2165,-0.0306 0.49633,-0.081 0.62184,-0.11188 0.1625,-0.04 0.21216,-0.0302 0.17249,0.034 -0.0316,0.0512 -0.008,0.0901 0.0538,0.0901 0.0883,0 0.0656,0.22535 -0.11665,1.16124 -0.35332,1.81416 -0.90167,5.12503 -1.08549,6.55414 -0.35267,2.74186 -0.29382,3.94434 0.27647,5.64879 0.28576,0.85409 0.9917,2.33387 1.38855,2.91067 l 0.23737,0.345 1.50145,-3.11385 c 1.73742,-3.60323 1.63502,-3.48367 2.21183,-2.58244 1.89928,2.9675 4.29301,7.36447 5.23965,9.62454 1.15372,2.75449 1.94931,5.20487 2.34829,7.23268 0.1978,1.00532 0.21135,1.21252 0.21423,3.27755 0.003,2.11338 -0.006,2.24586 -0.21298,3.20865 -0.49053,2.27998 -1.42158,4.43544 -2.90503,6.7254 -0.70581,1.08954 -0.60578,1.14307 -2.23045,-1.19378 -0.73611,-1.05879 -1.35965,-1.92624 -1.38564,-1.92767 -0.026,-0.001 -0.46627,0.67939 -0.97841,1.51292 -1.62141,2.63895 -1.74335,2.81454 -1.9546,2.81454 -0.10392,0 -0.2247,-0.0443 -0.26838,-0.0984 z m -0.73412,-12.15206 c 1.0997,-1.53878 1.71454,-2.77518 2.09131,-4.20547 0.21636,-0.82135 0.54666,-2.70108 0.63259,-3.6001 0.0528,-0.55276 0.0612,-0.57078 0.26523,-0.57078 0.3023,0 1.62904,1.26799 2.58088,2.4666 0.41847,0.52694 0.80869,1.01043 0.86718,1.07441 0.11194,0.12245 -0.29328,-0.95867 -0.8902,-2.37502 -0.41533,-0.98549 -1.16104,-2.31214 -2.22639,-3.96085 -1.1475,-1.77583 -1.30183,-2.00461 -1.35324,-2.00615 -0.026,-7.8e-4 -0.54181,1.21198 -1.14634,2.69503 -1.34074,3.28918 -1.23849,3.19316 -2.01689,1.89396 -1.61238,-2.69115 -3.18123,-5.60756 -3.52775,-6.55787 -0.46245,-1.26829 -1.08527,-4.03921 -1.34302,-5.97509 -0.0525,-0.39466 -0.12103,-0.71756 -0.15218,-0.71756 -0.0877,0 -0.82552,0.82932 -1.43595,1.61393 -1.87646,2.41189 -3.27316,5.2385 -3.75374,7.59675 -0.34895,1.71235 -0.36224,3.99916 -0.0335,5.76741 0.1518,0.81649 0.51256,2.1847 0.57603,2.18462 0.0263,-4e-5 0.18283,-0.69974 0.34782,-1.55489 0.37074,-1.92154 0.62273,-2.69309 1.30575,-3.99802 0.48354,-0.92383 0.55608,-1.02304 0.76331,-1.04392 0.22765,-0.0229 0.23963,-0.002 2.03974,3.61606 1.84929,3.7166 2.11388,4.16572 3.195,5.42336 0.58576,0.6814 2.6679,2.83288 2.73974,2.83098 0.0267,-7.1e-4 0.24032,-0.26953 0.47463,-0.59739 z"
+       id="path5" />
+  </g>
+</svg>