xv-webcomponents 0.1.26 → 0.1.28

package/dist/collection/components/xv-header/xv-header.js

@@ -0,0 +1,46 @@
+import { h } from "@stencil/core";
+export class XvHeader {
+    constructor() {
+        this.htmlContent = '';
+    }
+    async componentWillLoad() {
+        try {
+            const response = await fetch('https://crossvertise.blob.core.windows.net/nav-sync-qa/nav.html');
+            const text = await response.text();
+            const parser = new DOMParser();
+            const doc = parser.parseFromString(text, 'text/html');
+            const mixedMenu = doc.querySelector('.alle-kategorien-menu');
+            const allCategoriesGenerals = doc.querySelector('.alle-kategorien-allgemines');
+            const allCategoriesContainer = doc.querySelector('#media-menu-item-alle-kategorien > .dropdown-menu');
+            if (mixedMenu && allCategoriesGenerals && allCategoriesContainer) {
+                allCategoriesContainer.appendChild(mixedMenu);
+                allCategoriesContainer.appendChild(allCategoriesGenerals);
+            }
+            this.htmlContent = doc.body.innerHTML;
+        }
+        catch (error) {
+            console.error('Failed to fetch header HTML:', error);
+        }
+    }
+    render() {
+        return (h("div", { key: '17b758439ac9d36d231ea77c5b0a749755919671', id: "nav-container", class: "xv-header" }, h("nav", { key: '0c6f3ec230830c41a58f50f86ecafbe520d6757f', class: "navbar navbar-default navbar-fixed-top backend-force-relative" }, h("div", { key: 'bebdd889d198c62cf79a8ca02e789d8a0a3ed7f4', class: "container" }, h("div", { key: 'd4617727cffe7b4aada604394a056a27b3df8d89', class: "row" }, h("div", { key: 'e3c7ca51335b89a9032cdde950657d876d157bba', class: "col-sm-3 col-xs-3 col-xxs-4 no-padding-right" }, h("div", { key: 'c70a5de73859a1a19966b3b643a3b6ac1cab49fe', class: "navbar-header" }, h("button", { key: '054943c922178450585e1a801825cf6737e3448d', class: "btn btn-default navbar-toggle pull-left navbar-btn", "data-toggle": "collapse", "data-target": "#main-menu" }, h("i", { key: '50c000376822e1b39582c32ca36720b7e88011b3', class: "fa fa-bars fa-lg", "aria-hidden": "true" })), h("div", { key: '50763da33dea51d5e42fcca7f684c65194c1ac1c', class: "visible-xs-inline" }, h("a", { key: 'ace4253640362dc8bc086243d5d029be0aed717a', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '413fd9b3d9090abcc7697eb417b3f604652baafe', src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg", alt: "Crossvertise" }))), h("div", { key: '38abf1c9d06ce56ca3df77dcbc9f127724c4412b', class: "hidden-xs" }, h("a", { key: '2f413d15878c4fda13bb0742e618c194765d3410', href: "https://www.crossvertise.com/", class: "navbar-brand" }, h("img", { key: '169e7a4d95ecfdda6125c8968c9d5785bfb67c62', loading: "lazy", src: "https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg", alt: "Crossvertise" }))))), h("div", { key: '54ffe049cfd4def82e54d32b9a995388a7b0a3ef', class: "col-sm-9 col-xs-9 col-xxs-8 no-padding-left" }, h("ul", { key: 'ebfa9382c68f49a58603623a8ad6dea3b6778480', class: "nav nav-pills nav-meta pull-right" }, h("li", { key: '04cdcecf7518face6a3ab8318b1bf8386df3509a' }, h("a", { key: 'eb01fb3eb7f48df8aaa1868b102884244dbf0b9e', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, h("i", { key: '6e6468006b1f8a3d434a73aef4bc4774846100b1', class: "fa fa-user" }), h("i", { key: '496a5bb8fd4ec003f83c7d93cfecbff821d9570f', class: "fa fa-exchange-alt" }))), h("li", { key: 'ee8114f5da71c02792631efa5db06ff1853e1d3d' }, h("a", { key: 'c564eb6479e59117138f598e0c488473880c4169', class: "btn btn-link navbar-btn hidden-xs", href: "#" }, "Kontakt"), h("a", { key: '1ab3ee273d7f950d16fbbd082830cee0ad31338f', href: "https://www.crossvertise.com/contact", class: "btn btn-link navbar-btn hidden-xs", style: { display: 'none' } }, "Kontakt"), h("a", { key: 'cf6b91b54d242a5a450396feddb851b10c21dfe2', class: "btn btn-default btn-link navbar-btn visible-xs hidden-xxs", href: "#" }, h("i", { key: '5c57f304259725b56edffbfe89b4116bdfa03d01', class: "fa fa-phone" }))), h("li", { key: 'bff9df0a062ba73cdb7cfb62e52ec2c5cf7eb4b2', class: "dropdown", id: "my-xv-menu" }, h("a", { key: 'be582a5ff458559d311481c8e615e2c999a98b2c', href: "#", class: "dropdown-toggle btn btn-default navbar-btn btn-link", "data-toggle": "dropdown" }, h("i", { key: '61e2d3853664f239992177ebf1b7d24a8c4b3891', class: "fa fa-user fa-lg text-success", "aria-hidden": "true" }), "\u00A0", h("span", { key: '93f81a97f7b649ae34f61366a6d265a7c381b479', class: "hidden-xs" }, "Mein Bereich"), h("span", { key: 'c719beed11b9ca505b3935d1b080056972975bf5', class: "caret" })), h("ul", { key: 'f23370ef5ccf3c792e9a8f148ce18013db8ce25b', class: "dropdown-menu-left dropdown-menu navbar-myxv" }, h("li", { key: 'd5fa4543bc4cf88384888505e77d1ea692798abb' }, h("a", { key: 'e0093d0d32e091dd6ea8a65e7b5c3802b1d9066c', href: "#" }, h("i", { key: '294da165d6f1964044b8a86fba972c75f2307a40', class: "fa fa-tachometer-alt fa-fw" }), "\u00A0Cockpitfunktionen\u00A0", h("i", { key: '48d212dfc8ba3301fc5876c229534c37efec6095', class: "fa fa-caret-down" }))), h("li", { key: '76e744f5f005627702849299b30b661cc3186e75' }, h("a", { key: 'fd1946c49709fbe61a4277b6a0c7d1ff2d342709', href: "#" }, h("i", { key: '5b1a8006f15ddea5692d41551623a96c1c344426', class: "fa fa-cubes" }), "\u00A0Entit\u00E4ten\u00A0", h("i", { key: '3a52fdf953b0792cb3d287ac41f493659093af3b', class: "fa fa-caret-down" }))), h("li", { key: '3bdaecf8f4d795d44d075bdc9ae626aad64f1464', role: "separator", class: "divider" }), h("li", { key: 'd0fbe94290ba97a7547816476888a2463bc49f55' }, h("a", { key: 'e20b9db82ad5c8afa3749a4d222505e0aa07ae90', href: "#" }, h("i", { key: '5623596a0eae6399de421cf3536bc0e05ebff700', class: "fa fa-user" }), "\u00A0Mein Crossvertise\u00A0", h("span", { key: 'eda253c704f6b9c6f0d793c93fa6ff845be66a6a', class: "badge" }, "0"), h("i", { key: '9ff7c367b502aabedef6c131e627879b67c8a295', class: "fa fa-caret-down" }))), h("li", { key: '7ff050b3e0978025f18115fe33a982daf3f3ec56' }, h("a", { key: '7f6641a7354a9bff4774c71434d25e94186fb2ea', href: "https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com" }, h("i", { key: 'c3013e411aba74ba1a437889c0c8ee87f3fae5e0', class: "fa fa-sign-out-alt fa-fw", "aria-hidden": "true" }), "\u00A0Logout")))), h("li", { key: 'a88d592fcda782ab5d50916d8824d1992ac0bc6c', class: "visible-sm-block visible-xs-block hidden-xxs" }, h("a", { key: '8de83de25419b43154b1a12d278984acb0b1542e', class: "btn btn-default navbar-btn btn-link", "data-toggle": "collapse", "data-target": "#search-collapse" }, h("i", { key: '8bdb16e9dbd427bec443b4cc8d8f4baccf9b9190', class: "fa fa-search", "aria-hidden": "true" }))), h("li", { key: '65947d1fbd384ffdb3476fe775f860d100165311', class: "hidden-md hidden-lg" }, h("a", { key: 'b9618154b33860c709047e20a4768aab46e0f0e3', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/logon?returnUrl=https%3A%2F%2Fwww.crossvertise.com%2F" }, h("i", { key: 'df10d0e0bcfc2574df51bbd772fc7ea2735fc26d', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: 'e40d5fdc63fb8487982f80d7997ca7fbb2fd1822', class: "hidden-xs" }, "Login"))), h("li", { key: 'f0fbf675ea3df61d24d326ee83e10d8ad606d6f9', class: "hidden-xs hidden-sm" }, h("a", { key: '03f05ca6156be7d332003767a4ac2485170d4919', role: "button", class: "btn btn-default navbar-btn btn-link", "data-toggle": "modal", "data-target": "#login-modal" }, h("i", { key: 'b9279aae23e597472482b1d66233ef2df18ce4c1', class: "fa fa-user fa-lg", "aria-hidden": "true" }), h("span", { key: 'e4f8594718bbcbaf9f868c9269491df601c0c56b' }, "Login"))), h("li", { key: 'ffaa8b078a1f1da2d0bc8941be7a033e425af8b3', class: "hidden-xs" }, h("a", { key: '7de25b8e4af7110649577e9a0043ddcb0f6ec614', class: "btn btn-default navbar-btn btn-link", href: "https://market.crossvertise.com/de-de/mycrossvertise/account/register" }, h("span", { key: '36d0e4f425575a2925e51f22851c4d156f2c8a0e' }, "Registrieren"))), h("li", { key: '93f2374feb5f4285b8df4d7ecc2047055a644b6c', class: "navbar-divider hidden-xs" }), h("li", { key: '26599864dd47d74b8b4143fdf7bfac5d5a7a1991' }, h("a", { key: 'a263d5c0ef78cf4ed93ea3e788fabfb634116ee6', class: "btn btn-success navbar-btn", href: "https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart" }, h("span", { key: '7f4c6d9d861b556dbfbca18ce5b2c5b34033c9dd', class: "xv-font-icon-warenkorb fa-lg fa-fw", "aria-hidden": "true" }), h("span", { key: '1b83d9a3258966f0b982436a954e852c83588ae0', class: "hidden-xs hidden-sm" }, "\u00A0Warenkorb\u00A0"), h("span", { key: 'a2e423edf3534e7367bdd8d41004a944c21e3eea', class: "badge badge-success" }, "0"))))))), h("div", { key: 'cfdd0d5a23384025d8ce1eab6e09cc88f21ef4aa', class: "collapse hidden-md hidden-lg", id: "search-collapse" }, h("div", { key: 'c6cd2346373fe563fa52b4045ac90f558c0abeaa', class: "container" }, h("form", { key: 'b1b3f3fc6c7eaccc6da72624786c747976aba21b', action: "https://market.crossvertise.com/de-de/media/search", class: "navbar-form", method: "get", role: "search" }, h("div", { key: 'ed1f817d2027760a32ce1612638eb10a99ef9338', class: "input-group" }, h("input", { key: '6953caece69247465868c0ac9b2cf72a08c6489f', class: "form-control", name: "Q", placeholder: "Suche", type: "text", autocomplete: "off" }), h("span", { key: 'fbff70f2115109b98fef9410fefcefe73c25460d', class: "input-group-btn force-full-width" }, h("button", { key: 'c7d246bda8ea174e0fd6a7888ac39b360090ab44', class: "btn btn-default search-addon", type: "submit" }, h("i", { key: 'b4256d72a2a05c08669619125bef1156d036511e', class: "fa fa-search", "aria-hidden": "true" })))))))), h("div", { key: '1aaa27ad68668cf906499a7aab97eeeb12c37834', innerHTML: this.htmlContent })));
+    }
+    static get is() { return "xv-header"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-header.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-header.css"]
+        };
+    }
+    static get states() {
+        return {
+            "htmlContent": {}
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-header.js.map

package/dist/collection/components/xv-header/xv-header.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-header.js","sourceRoot":"","sources":["../../../src/components/xv-header/xv-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h,Element, State } from '@stencil/core';\n\n@Component({\n  tag: 'xv-header',\n  styleUrl: 'xv-header.scss',\n})\nexport class XvHeader {\n  @State() htmlContent: string = '';\n  @Element() el: HTMLElement;\n\n  async componentWillLoad() {\n    try {\n      const response = await fetch('https://crossvertise.blob.core.windows.net/nav-sync-qa/nav.html');\n      const text = await response.text();\n      const parser = new DOMParser();\n      const doc = parser.parseFromString(text, 'text/html');\n\n    const mixedMenu = doc.querySelector('.alle-kategorien-menu');\n    const allCategoriesGenerals = doc.querySelector('.alle-kategorien-allgemines');\n    const allCategoriesContainer = doc.querySelector('#media-menu-item-alle-kategorien > .dropdown-menu');\n\n    if (mixedMenu && allCategoriesGenerals && allCategoriesContainer) {\n      allCategoriesContainer.appendChild(mixedMenu);\n      allCategoriesContainer.appendChild(allCategoriesGenerals);\n    }\n\n    this.htmlContent = doc.body.innerHTML;\n    } catch (error) {\n      console.error('Failed to fetch header HTML:', error);\n    }\n  }\n\n  render() {\n    return (\n      <div id=\"nav-container\" class=\"xv-header\">\n        <nav class=\"navbar navbar-default navbar-fixed-top backend-force-relative\">\n        <div class=\"container\">\n          <div class=\"row\">\n            <div class=\"col-sm-3 col-xs-3 col-xxs-4 no-padding-right\">\n              <div class=\"navbar-header\">\n                <button class=\"btn btn-default navbar-toggle pull-left navbar-btn\" data-toggle=\"collapse\" data-target=\"#main-menu\">\n                  <i class=\"fa fa-bars fa-lg\" aria-hidden=\"true\"></i>\n                </button>\n                <div class=\"visible-xs-inline\">\n                  <a href=\"https://www.crossvertise.com/\" class=\"navbar-brand\">\n                    <img src=\"https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo-small.svg\" alt=\"Crossvertise\" />\n                  </a>\n                </div>\n                <div class=\"hidden-xs\">\n                  <a href=\"https://www.crossvertise.com/\" class=\"navbar-brand\">\n                    <img loading=\"lazy\" src=\"https://www.crossvertise.com/ResourcePackages/Bootstrap/assets/dist/images/logo.svg\" alt=\"Crossvertise\" />\n                  </a>\n                </div>\n              </div>\n            </div>\n            <div class=\"col-sm-9 col-xs-9 col-xxs-8 no-padding-left\">\n              <ul class=\"nav nav-pills nav-meta pull-right\">\n                <li>\n                  <a class=\"btn btn-link navbar-btn hidden-xs\" href=\"#\">\n                    <i class=\"fa fa-user\"></i>\n                    <i class=\"fa fa-exchange-alt\"></i>\n                  </a>\n                </li>\n                <li>\n                  <a class=\"btn btn-link navbar-btn hidden-xs\" href=\"#\">Kontakt</a>\n                  <a href=\"https://www.crossvertise.com/contact\" class=\"btn btn-link navbar-btn hidden-xs\" style={{ display: 'none' }}>Kontakt</a>\n                  <a class=\"btn btn-default btn-link navbar-btn visible-xs hidden-xxs\" href=\"#\">\n                    <i class=\"fa fa-phone\"></i>\n                  </a>\n                </li>\n                <li class=\"dropdown\" id=\"my-xv-menu\">\n                  <a href=\"#\" class=\"dropdown-toggle btn btn-default navbar-btn btn-link\" data-toggle=\"dropdown\">\n                    <i class=\"fa fa-user fa-lg text-success\" aria-hidden=\"true\"></i>&nbsp;\n                    <span class=\"hidden-xs\">Mein Bereich</span>\n                    <span class=\"caret\"></span>\n                  </a>\n                  <ul class=\"dropdown-menu-left dropdown-menu navbar-myxv\">\n                    <li>\n                      <a href=\"#\"><i class=\"fa fa-tachometer-alt fa-fw\"></i>&nbsp;Cockpitfunktionen&nbsp;<i class=\"fa fa-caret-down\"></i></a>\n                    </li>\n                    <li>\n                      <a href=\"#\"><i class=\"fa fa-cubes\"></i>&nbsp;Entitäten&nbsp;<i class=\"fa fa-caret-down\"></i></a>\n                    </li>\n                    <li role=\"separator\" class=\"divider\"></li>\n                    <li>\n                      <a href=\"#\"><i class=\"fa fa-user\"></i>&nbsp;Mein Crossvertise&nbsp;<span class=\"badge\">0</span><i class=\"fa fa-caret-down\"></i></a>\n                    </li>\n                    <li>\n                      <a href=\"https://www.crossvertise.com/de-de/mycrossvertise/account/logoff?returnUrl=https%3A%2F%2Fwww.crossvertise.com\">\n                        <i class=\"fa fa-sign-out-alt fa-fw\" aria-hidden=\"true\"></i>&nbsp;Logout\n                      </a>\n                    </li>\n                  </ul>\n                </li>\n                <li class=\"visible-sm-block visible-xs-block hidden-xxs\">\n                  <a class=\"btn btn-default navbar-btn btn-link\" data-toggle=\"collapse\" data-target=\"#search-collapse\">\n                    <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\n                  </a>\n                </li>\n                <li class=\"hidden-md hidden-lg\">\n                  <a class=\"btn btn-default navbar-btn btn-link\" href=\"https://market.crossvertise.com/de-de/mycrossvertise/account/logon?returnUrl=https%3A%2F%2Fwww.crossvertise.com%2F\">\n                    <i class=\"fa fa-user fa-lg\" aria-hidden=\"true\"></i>\n                    <span class=\"hidden-xs\">Login</span>\n                  </a>\n                </li>\n                <li class=\"hidden-xs hidden-sm\">\n                  <a role=\"button\" class=\"btn btn-default navbar-btn btn-link\" data-toggle=\"modal\" data-target=\"#login-modal\">\n                    <i class=\"fa fa-user fa-lg\" aria-hidden=\"true\"></i>\n                    <span>Login</span>\n                  </a>\n                </li>\n                <li class=\"hidden-xs\">\n                  <a class=\"btn btn-default navbar-btn btn-link\" href=\"https://market.crossvertise.com/de-de/mycrossvertise/account/register\">\n                    <span>Registrieren</span>\n                  </a>\n                </li>\n                <li class=\"navbar-divider hidden-xs\"></li>\n                <li>\n                  <a class=\"btn btn-success navbar-btn\" href=\"https://market.crossvertise.com/de-de/mycrossvertise/shoppingcart/activecart\">\n                    <span class=\"xv-font-icon-warenkorb fa-lg fa-fw\" aria-hidden=\"true\"></span>\n                    <span class=\"hidden-xs hidden-sm\">&nbsp;Warenkorb&nbsp;</span>\n                    <span class=\"badge badge-success\">0</span>\n                  </a>\n                </li>\n              </ul>\n            </div>\n          </div>\n        </div>\n        <div class=\"collapse hidden-md hidden-lg\" id=\"search-collapse\">\n          <div class=\"container\">\n            <form action=\"https://market.crossvertise.com/de-de/media/search\" class=\"navbar-form\" method=\"get\" role=\"search\">\n              <div class=\"input-group\">\n                <input class=\"form-control\" name=\"Q\" placeholder=\"Suche\" type=\"text\" autocomplete=\"off\" />\n                <span class=\"input-group-btn force-full-width\">\n                  <button class=\"btn btn-default search-addon\" type=\"submit\">\n                    <i class=\"fa fa-search\" aria-hidden=\"true\"></i>\n                  </button>\n                </span>\n              </div>\n            </form>\n          </div>\n        </div>\n      </nav>\n        <div innerHTML={this.htmlContent}></div>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-link/xv-link.css

@@ -0,0 +1,61 @@
+:host {
+  font-family: var(--ff-body, inherit);
+}
+
+:host(.xv-link_inline) {
+  display: inline-block;
+}
+:host(.xv-link_inline) .xv-link {
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  text-decoration-skip-ink: none;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+
+:host(.xv-link_standalone) {
+  display: block;
+}
+:host(.xv-link_standalone) .xv-link {
+  display: block;
+  text-decoration-line: none;
+}
+
+.xv-link {
+  display: inline-flex;
+  gap: 8px;
+  align-items: center;
+  color: var(--link-primary);
+  font-family: var(--ff-body);
+  font-style: normal;
+  font-weight: 400;
+  transition: color 200ms ease-in-out;
+}
+.xv-link:active {
+  color: var(--text-primary);
+}
+.xv-link:visited {
+  color: var(--link-visted);
+}
+.xv-link:hover {
+  color: var(--link-primary-hover);
+  cursor: pointer;
+}
+.xv-link:disabled, .xv-link_disabled, .xv-link::part(disabled) {
+  color: var(--text-disabled);
+  pointer-events: none;
+  cursor: initial;
+}
+.xv-link.sm {
+  font-size: var(--fz-sm);
+  line-height: 137.5%;
+}
+.xv-link.md {
+  font-size: var(--fz-md);
+  line-height: 128.571%;
+}
+.xv-link.lg {
+  font-size: var(--fz-lg);
+  line-height: 133.333%;
+}

package/dist/collection/components/xv-link/xv-link.js

@@ -0,0 +1,132 @@
+import { h, Host } from "@stencil/core";
+export class XvLink {
+    constructor() {
+        this.disabled = false;
+        this.size = 'md';
+        this.variant = 'inline';
+    }
+    preventLinkHandler(e) {
+        if (!this.disabled)
+            return;
+        e.preventDefault();
+        e.stopPropagation();
+    }
+    render() {
+        return (h(Host, { key: '9be5ba37fee1e5ec5679dfc2a633aa79585d2cc7', class: `xv-link_${this.variant}` }, h("a", { key: '3ef8125ad7602cc1a30c29bab90cafafe5e07573', href: this.href, onClick: this.preventLinkHandler.bind(this), class: `xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`, target: this.target }, h("slot", { key: 'e15d10152f80d8adab43b4a8679070e57e5ec876', name: "icon-left" }), h("slot", { key: 'b8f7e7ed9c0ee2cc650c7363dde0d33b85b5566d' }), h("slot", { key: '6e8d71e3e484edee74688bf5acaed759798761a8', name: "icon-right" }))));
+    }
+    static get is() { return "xv-link-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-link.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-link.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "href",
+                "reflect": false
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'_self' | '_blank' | '_parent' | '_top'",
+                    "resolved": "\"_blank\" | \"_parent\" | \"_self\" | \"_top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "target",
+                "reflect": false
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'sm' | 'md' | 'lg'",
+                    "resolved": "\"lg\" | \"md\" | \"sm\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "'md'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'standalone' | 'inline'",
+                    "resolved": "\"inline\" | \"standalone\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'inline'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-link.js.map

package/dist/collection/components/xv-link/xv-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-link.js","sourceRoot":"","sources":["../../../src/components/xv-link/xv-link.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;IALnB;QAQU,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAuB,IAAI,CAAC;QAChC,YAAO,GAA4B,QAAQ,CAAC;KA2BrD;IAzBC,kBAAkB,CAAC,CAAe;QAChC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE3B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;IACtB,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,WAAW,IAAI,CAAC,OAAO,EAAE;YACpC,0DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC,EAC3C,KAAK,EAAE,WAAW,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE,EACxE,MAAM,EAAE,IAAI,CAAC,MAAM;gBAEnB,6DAAM,IAAI,EAAC,WAAW,GAAQ;gBAE9B,8DAAa;gBAEb,6DAAM,IAAI,EAAC,YAAY,GAAQ,CAC7B,CACC,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n  tag: 'xv-link-v2',\n  styleUrl: 'xv-link.scss',\n  shadow: true,\n})\nexport class XvLink {\n  @Prop() href: string;\n  @Prop() target: '_self' | '_blank' | '_parent' | '_top';\n  @Prop() disabled: boolean = false;\n  @Prop() size: 'sm' | 'md' | 'lg' = 'md';\n  @Prop() variant: 'standalone' | 'inline' = 'inline';\n\n  preventLinkHandler(e: PointerEvent) {\n    if (!this.disabled) return;\n\n    e.preventDefault();\n    e.stopPropagation();\n  }\n\n  render() {\n    return (\n      <Host class={`xv-link_${this.variant}`}>\n        <a\n          href={this.href}\n          onClick={this.preventLinkHandler.bind(this)}\n          class={`xv-link ${this.disabled ? 'xv-link_disabled' : ''} ${this.size}`}\n          target={this.target}\n        >\n          <slot name=\"icon-left\"></slot>\n\n          <slot></slot>\n\n          <slot name=\"icon-right\"></slot>\n        </a>\n      </Host>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,65 @@
+:host(.xv-loader) {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.5rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+:host(.xv-loader) .spinner {
+  color: var(--text-secondary, #515151);
+  font-size: inherit;
+  border: max(4px, 0.1em) solid rgba(0, 0, 0, 0.1);
+  border-top-color: var(--highlight-01, #CEDE94);
+  border-radius: 50%;
+  animation: spin 0.8s linear infinite;
+  width: 1em;
+  height: 1em;
+  min-width: 1em;
+  min-height: 1em;
+  max-width: 1em;
+  max-height: 1em;
+}
+:host(.xv-loader) ::slotted(*) {
+  font-family: var(--ff-heading, "IBM Plex Sans");
+  color: inherit;
+  margin-top: 0;
+  margin-bottom: 0;
+  font-size: inherit;
+  line-height: 133.333%;
+  letter-spacing: 0.32px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+:host([variant=vertical]) {
+  flex-direction: column;
+}
+
+:host([size=xs]) {
+  font-size: var(--fz-xs, 9px);
+}
+
+:host([size=sm]) {
+  font-size: var(--fz-sm, 12px);
+}
+
+:host([size=md]) {
+  font-size: inherit;
+}
+
+:host([size=lg]) {
+  font-size: var(--spacing-08, 40px);
+}
+
+:host([size=xl]) {
+  font-size: var(--spacing-12, 96px);
+}
+
+/* Animation */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -0,0 +1,106 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvLoader {
+    constructor() {
+        /**
+         * Is component displayed
+         */
+        this.show = true;
+        /**
+         * Message direction
+         */
+        this.variant = 'horizontal';
+        /**
+         * Size of loader. Default size depends of font size
+         */
+        this.size = SIZE_VAR.MD;
+    }
+    render() {
+        if (!this.show)
+            return null;
+        return (h(Host, { class: { 'xv-loader': true }, size: this.size }, h("slot", { name: "before" }), h("div", { class: { spinner: true } }), h("slot", null)));
+    }
+    static get is() { return "xv-loader-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-loader.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-loader.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "show": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is component displayed"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "show",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message direction"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'horizontal'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "SIZE_VAR",
+                    "resolved": "SIZE_VAR.LG | SIZE_VAR.MD | SIZE_VAR.SM | SIZE_VAR.XL | SIZE_VAR.XS",
+                    "references": {
+                        "SIZE_VAR": {
+                            "location": "import",
+                            "path": "../../types/enum",
+                            "id": "src/types/enum.ts::SIZE_VAR"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Size of loader. Default size depends of font size"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-loader.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-loader.js","sourceRoot":"","sources":["../../../src/components/xv-loader/xv-loader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AACzD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAO5C,MAAM,OAAO,QAAQ;IALrB;QAME;;WAEG;QACK,SAAI,GAAY,IAAI,CAAC;QAC7B;;WAEG;QACK,YAAO,GAA8B,YAAY,CAAC;QAC1D;;WAEG;QACK,SAAI,GAAa,QAAQ,CAAC,EAAE,CAAC;KAatC;IAXC,MAAM;QACJ,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAE5B,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,WAAW,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI;YACjD,YAAM,IAAI,EAAC,QAAQ,GAAQ;YAC3B,WAAK,KAAK,EAAE,EAAC,OAAO,EAAE,IAAI,EAAE,GAAQ;YACpC,eAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-loader-v2',\n  styleUrl: 'xv-loader.scss',\n  shadow: true,\n})\nexport class XvLoader {\n  /**\n   * Is component displayed\n   */\n  @Prop() show: boolean = true;\n  /**\n   * Message direction\n   */\n  @Prop() variant: 'vertical' | 'horizontal' = 'horizontal';\n  /**\n   * Size of loader. Default size depends of font size\n   */\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n\n  render() {\n    if (!this.show) return null;\n\n    return (\n      <Host class={{ 'xv-loader': true }} size={this.size}>\n        <slot name=\"before\"></slot>\n        <div class={{spinner: true }}></div>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-modal/xv-modal.css

@@ -0,0 +1,98 @@
+:host {
+  display: inline-block;
+}
+:host .backdrop {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+:host .modal {
+  display: flex;
+  flex-direction: column;
+  max-height: 60vh;
+  max-width: 960px;
+  position: relative;
+  animation: fadeIn 0.25s ease;
+  padding: var(--gap-md, 16px);
+  background: var(--layer-02, #FFF);
+  box-shadow: 0 6px 10px 4px rgba(39, 52, 53, 0.15), 0 2px 3px 0 rgba(39, 52, 53, 0.3);
+}
+:host .modal_header {
+  position: relative;
+}
+:host .modal_header__title {
+  color: var(--text-text-primary, #333);
+  font-family: var(--ff-heading, "Gill Sans");
+  font-size: var(--fz-xl, 21px);
+  line-height: 133.333%;
+  margin: 0 20px 0 0;
+}
+:host .modal_content {
+  margin-top: var(--gap-md, 16px);
+  margin-bottom: var(--gap-md, 16px);
+  overflow: auto;
+}
+:host .modal_footer {
+  position: relative;
+}
+:host .modal_close {
+  z-index: 1;
+  cursor: pointer;
+  border: none;
+  outline: none;
+  font-size: 28px;
+  background-color: transparent;
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  transition: 350ms ease-in-out opacity;
+}
+:host .modal_close:hover {
+  opacity: 0.6;
+}
+:host .modal_close:active {
+  opacity: 0.3;
+}
+
+:host([open]) .backdrop {
+  opacity: 1;
+  pointer-events: all;
+}
+
+:host([size=xs]) .modal {
+  max-width: min(300px, 90vw);
+}
+
+:host([size=sm]) .modal {
+  max-width: min(480px, 90vw);
+}
+
+:host([size=md]) .modal {
+  max-width: min(600px, 90vw);
+}
+
+:host([size=lg]) .modal {
+  max-width: min(960px, 90vw);
+}
+
+:host([size=xl]) .modal {
+  max-width: min(1200px, 80vw);
+}
+
+@keyframes fadeIn {
+  from {
+    transform: translateY(-10px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}