xv-webcomponents 0.1.43 → 0.1.44

package/dist/collection/components/xv-login-modal/xv-login-modal.js

@@ -0,0 +1,146 @@
+import { h } from "@stencil/core";
+export class XvLoginModal {
+    constructor() {
+        this.visible = false;
+        this.oauthProviders = [];
+        this.bookNow = false;
+        this.returnUrl = '/';
+        this.passwordLoginEnabled = true;
+        this.oauthLoginEnabled = true;
+        this.passwordRegistrationEnabled = true;
+        this.configurationName = 'Xv';
+        this.xvMvcConfigName = 'Xv';
+        this.contactUrl = 'https://sitefinity-qa.crossvertise.com/ueber-uns/kontakt';
+        this.handleClose = () => {
+            this.close.emit();
+        };
+    }
+    componentWillLoad() {
+        this.setReturnUrl();
+        this.readMetaNavCookie();
+        this.oauthProviders = [
+            {
+                displayName: 'Google',
+                providerName: 'Google',
+                icon: 'fa fa-google',
+                buttonClass: 'btn btn-block btn-google-primary btn-primary',
+            },
+        ];
+    }
+    setReturnUrl() {
+        const params = new URLSearchParams(window.location.search);
+        let url = params.get('returnUrl') || window.location.href;
+        if (url.toLowerCase().includes('resetpassword')) {
+            url = '/';
+        }
+        this.returnUrl = url;
+    }
+    readMetaNavCookie() {
+        const metaNavCookie = document.cookie
+            .split('; ')
+            .find(row => row.startsWith('metaNav='));
+        if (!metaNavCookie)
+            return;
+        try {
+            const cookieValue = decodeURIComponent(metaNavCookie.split('=')[1]);
+            const metaNavObj = JSON.parse(cookieValue);
+            this.passwordLoginEnabled = !!metaNavObj.PasswordLoginEnabled;
+            this.oauthLoginEnabled = !!metaNavObj.oauthLoginEnabled;
+            this.passwordRegistrationEnabled = !!metaNavObj.PasswordRegistrationEnabled;
+            this.configurationName = metaNavObj.ConfigurationName;
+            this.xvMvcConfigName = metaNavObj.XvMvcConfigName;
+            this.contactUrl = metaNavObj.ContactUrl;
+        }
+        catch (e) {
+            console.warn('Could not parse metaNav cookie:', e);
+        }
+    }
+    renderPasswordLogin() {
+        if (!this.passwordLoginEnabled)
+            return null;
+        return (h("label", { class: "pull-right spacer" }, h("a", { href: "/de-de/mycrossvertise/account/lostpassword", target: "_blank", rel: "noopener" }, "Passwort vergessen?")));
+    }
+    renderOAuthProviders() {
+        if (!this.oauthLoginEnabled)
+            return null;
+        return (h("div", { class: "row" }, h("div", { class: "col-xs-12" }, h("div", { class: "col-xs-12" }, h("div", { class: "row spacer spacer-bottom" }, h("div", { class: "col-xs-5" }, h("hr", null)), h("div", { class: "col-xs-2 text-center placeholder" }, "oder"), h("div", { class: "col-xs-5" }, h("hr", null)), h("div", { class: "col-xs-12" }, h("span", null, "Alternative Anmeldung:")))), h("div", { class: "col-sm-12" }, h("div", { class: "col-xs-12 no-padding-right" }, h("form", { method: "POST", class: "spacer", action: "/de-de/mycrossvertise/account/externallogin" }, h("div", { class: "row" }, this.oauthProviders.map(provider => (h("div", { class: "col-xs-6 col-sm-3 no-padding-left padding-bottom-10 center-cell" }, h("button", { type: "submit", style: { maxWidth: '125px' }, name: "provider", class: `cell-content btn btn-primary ${provider.buttonClass} btn-block`, value: provider.providerName, title: `Mit ${provider.displayName} anmelden` }, h("i", { class: `${provider.icon} pull-left` }), h("span", null, provider.displayName)))))), h("input", { type: "hidden", name: "BookNow", value: this.bookNow.toString() })))))));
+    }
+    renderFooter() {
+        if (!this.passwordRegistrationEnabled && this.configurationName !== this.xvMvcConfigName)
+            return null;
+        return (h("div", { class: "modal-footer" }, h("div", { class: "col-sm-12 text-left" }, this.passwordRegistrationEnabled && (h("div", null, "Noch kein Kunde?", h("a", { href: `/de-de/mycrossvertise/account/register?returnUrl=${encodeURIComponent(this.returnUrl)}` }, "Jetzt kostenlos registrieren!"))), this.configurationName === this.xvMvcConfigName && (h("div", null, h("div", { class: "spacer" }, "Sie sind bereits registriert, k\u00F6nnen sich aber nicht einloggen?"), h("div", null, h("a", { href: this.contactUrl }, "Kontaktieren Sie uns"), ", wir k\u00FCmmern uns darum."))))));
+    }
+    render() {
+        if (!this.visible)
+            return null;
+        return (h("div", { class: "modal show", style: { display: 'block' }, id: "login-modal", tabIndex: -1, role: "dialog" }, h("div", { class: "modal-dialog", role: "document" }, h("div", { class: "modal-content" }, h("div", { class: "modal-header" }, h("div", { class: "row" }, h("div", { class: "col-sm-10" }, h("div", { class: "col-xs-12" }, h("h4", { class: "modal-title" }, "Login"))), h("div", { class: "col-xs-1 pull-right" }, h("button", { onClick: this.handleClose, type: "button", class: "close" }, h("span", { "aria-hidden": "true" }, "\u00D7"))))), h("div", { class: "modal-body" }, h("div", { class: "row" }, h("div", { class: "col-sm-12" }, h("form", { autoComplete: "off", id: "logon-modal-form", action: `/de-de/mycrossvertise/account/logon?returnUrl=${encodeURIComponent(this.returnUrl)}`, method: "post", class: "spacer" }, h("input", { type: "hidden", name: "returnUrl", value: this.returnUrl }), h("div", { class: "form-group spacer-bottom" }, h("div", { class: "control-label col-xs-12" }, h("label", { htmlFor: "LoginPopup.UserName" }, "E-Mail"), h("strong", { class: "text-danger" }, "*")), h("div", { class: "col-xs-12" }, h("input", { class: "form-control", id: "userName", name: "UserName", type: "text", tabIndex: 1 }))), h("div", { class: "form-group spacer" }, h("div", { class: "control-label col-xs-6" }, h("label", { class: "spacer", htmlFor: "LoginPopup.Password" }, "Passwort"), h("strong", { class: "text-danger spacer" }, "*")), h("div", { class: "col-xs-6" }, this.renderPasswordLogin()), h("div", { class: "col-xs-12" }, h("input", { class: "form-control", id: "password", name: "Password", type: "password", tabIndex: 2 }))), h("div", { class: "form-group spacer" }, h("div", { class: "col-xs-12" }, h("button", { class: "btn btn-primary btn-lg btn-block spacer", type: "submit", tabIndex: 3 }, "Anmelden"))), h("div", { class: "form-group" }, h("div", { class: "checkbox col-xs-12" }, h("label", { htmlFor: "RememberMe" }, h("input", { id: "RememberMe", name: "RememberMe", type: "checkbox", value: "true" }), "Angemeldet bleiben?")))))), this.renderOAuthProviders()), this.renderFooter()))));
+    }
+    static get is() { return "xv-login-modal"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-login-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-login-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "visible": {
+                "type": "boolean",
+                "attribute": "visible",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "oauthProviders": {},
+            "bookNow": {},
+            "returnUrl": {},
+            "passwordLoginEnabled": {},
+            "oauthLoginEnabled": {},
+            "passwordRegistrationEnabled": {},
+            "configurationName": {},
+            "xvMvcConfigName": {},
+            "contactUrl": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xv-login-modal.js.map

package/dist/collection/components/xv-login-modal/xv-login-modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-login-modal.js","sourceRoot":"","sources":["../../../src/components/xv-login-modal/xv-login-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, State } from '@stencil/core';\n\ntype OAuthProvider = {\n  displayName: string;\n  providerName: string;\n  icon: string;\n  buttonClass: string;\n};\n\n@Component({\n  tag: 'xv-login-modal',\n  styleUrl: 'xv-login-modal.scss',\n  shadow: true,\n})\nexport class XvLoginModal {\n  @Prop() visible: boolean = false;\n  @Event() close: EventEmitter<void>;\n  @State() oauthProviders: OAuthProvider[] = [];\n  @State() bookNow: boolean = false;\n  @State() returnUrl: string = '/';\n  @State() passwordLoginEnabled: boolean = true;\n  @State() oauthLoginEnabled: boolean = true;\n  @State() passwordRegistrationEnabled: boolean = true;\n  @State() configurationName: string = 'Xv';\n  @State() xvMvcConfigName: string = 'Xv';\n  @State() contactUrl: string = 'https://sitefinity-qa.crossvertise.com/ueber-uns/kontakt';\n\n  componentWillLoad() {\n    this.setReturnUrl();\n    this.readMetaNavCookie();\n    this.oauthProviders = [\n      {\n        displayName: 'Google',\n        providerName: 'Google',\n        icon: 'fa fa-google',\n        buttonClass: 'btn btn-block btn-google-primary btn-primary',\n      },\n    ];\n  }\n\n  private setReturnUrl() {\n    const params = new URLSearchParams(window.location.search);\n    let url = params.get('returnUrl') || window.location.href;\n    if (url.toLowerCase().includes('resetpassword')) {\n      url = '/';\n    }\n    this.returnUrl = url;\n  }\n\n  private readMetaNavCookie() {\n    const metaNavCookie = document.cookie\n      .split('; ')\n      .find(row => row.startsWith('metaNav='));\n    if (!metaNavCookie) return;\n    try {\n      const cookieValue = decodeURIComponent(metaNavCookie.split('=')[1]);\n      const metaNavObj = JSON.parse(cookieValue);\n      this.passwordLoginEnabled = !!metaNavObj.PasswordLoginEnabled;\n      this.oauthLoginEnabled = !!metaNavObj.oauthLoginEnabled;\n      this.passwordRegistrationEnabled = !!metaNavObj.PasswordRegistrationEnabled;\n      this.configurationName = metaNavObj.ConfigurationName;\n      this.xvMvcConfigName = metaNavObj.XvMvcConfigName;\n      this.contactUrl = metaNavObj.ContactUrl;\n    } catch (e) {\n      console.warn('Could not parse metaNav cookie:', e);\n    }\n  }\n\n  private handleClose = () => {\n    this.close.emit();\n  };\n\n  private renderPasswordLogin() {\n    if (!this.passwordLoginEnabled) return null;\n    return (\n      <label class=\"pull-right spacer\">\n        <a href=\"/de-de/mycrossvertise/account/lostpassword\" target=\"_blank\" rel=\"noopener\">\n          Passwort vergessen?\n        </a>\n      </label>\n    );\n  }\n\n  private renderOAuthProviders() {\n    if (!this.oauthLoginEnabled) return null;\n    return (\n      <div class=\"row\">\n        <div class=\"col-xs-12\">\n          <div class=\"col-xs-12\">\n            <div class=\"row spacer spacer-bottom\">\n              <div class=\"col-xs-5\"><hr /></div>\n              <div class=\"col-xs-2 text-center placeholder\">oder</div>\n              <div class=\"col-xs-5\"><hr /></div>\n              <div class=\"col-xs-12\">\n                <span>Alternative Anmeldung:</span>\n              </div>\n            </div>\n          </div>\n          <div class=\"col-sm-12\">\n            <div class=\"col-xs-12 no-padding-right\">\n              <form\n                method=\"POST\"\n                class=\"spacer\"\n                action=\"/de-de/mycrossvertise/account/externallogin\"\n              >\n                <div class=\"row\">\n                  {this.oauthProviders.map(provider => (\n                    <div class=\"col-xs-6 col-sm-3 no-padding-left padding-bottom-10 center-cell\">\n                      <button\n                        type=\"submit\"\n                        style={{ maxWidth: '125px' }}\n                        name=\"provider\"\n                        class={`cell-content btn btn-primary ${provider.buttonClass} btn-block`}\n                        value={provider.providerName}\n                        title={`Mit ${provider.displayName} anmelden`}\n                      >\n                        <i class={`${provider.icon} pull-left`}></i>\n                        <span>{provider.displayName}</span>\n                      </button>\n                    </div>\n                  ))}\n                </div>\n                <input type=\"hidden\" name=\"BookNow\" value={this.bookNow.toString()} />\n              </form>\n            </div>\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  private renderFooter() {\n    if (!this.passwordRegistrationEnabled && this.configurationName !== this.xvMvcConfigName) return null;\n    return (\n      <div class=\"modal-footer\">\n        <div class=\"col-sm-12 text-left\">\n          {this.passwordRegistrationEnabled && (\n            <div>\n              Noch kein Kunde?\n              <a\n                href={`/de-de/mycrossvertise/account/register?returnUrl=${encodeURIComponent(this.returnUrl)}`}\n              >\n                Jetzt kostenlos registrieren!\n              </a>\n            </div>\n          )}\n          {this.configurationName === this.xvMvcConfigName && (\n            <div>\n              <div class=\"spacer\">Sie sind bereits registriert, können sich aber nicht einloggen?</div>\n              <div>\n                <a href={this.contactUrl}>Kontaktieren Sie uns</a>, wir kümmern uns darum.\n              </div>\n            </div>\n          )}\n        </div>\n      </div>\n    );\n  }\n\n  render() {\n    if (!this.visible) return null;\n    return (\n      <div class=\"modal show\" style={{ display: 'block' }} id=\"login-modal\" tabIndex={-1} role=\"dialog\">\n        <div class=\"modal-dialog\" role=\"document\">\n          <div class=\"modal-content\">\n            <div class=\"modal-header\">\n              <div class=\"row\">\n                <div class=\"col-sm-10\">\n                  <div class=\"col-xs-12\">\n                    <h4 class=\"modal-title\">Login</h4>\n                  </div>\n                </div>\n                <div class=\"col-xs-1 pull-right\">\n                  <button onClick={this.handleClose} type=\"button\" class=\"close\">\n                    <span aria-hidden=\"true\">&times;</span>\n                  </button>\n                </div>\n              </div>\n            </div>\n            <div class=\"modal-body\">\n              <div class=\"row\">\n                <div class=\"col-sm-12\">\n                  <form\n                    autoComplete=\"off\"\n                    id=\"logon-modal-form\"\n                    action={`/de-de/mycrossvertise/account/logon?returnUrl=${encodeURIComponent(this.returnUrl)}`}\n                    method=\"post\"\n                    class=\"spacer\"\n                  >\n                    <input type=\"hidden\" name=\"returnUrl\" value={this.returnUrl} />\n                    <div class=\"form-group spacer-bottom\">\n                      <div class=\"control-label col-xs-12\">\n                        <label htmlFor=\"LoginPopup.UserName\">E-Mail</label>\n                        <strong class=\"text-danger\">*</strong>\n                      </div>\n                      <div class=\"col-xs-12\">\n                        <input class=\"form-control\" id=\"userName\" name=\"UserName\" type=\"text\" tabIndex={1} />\n                      </div>\n                    </div>\n                    <div class=\"form-group spacer\">\n                      <div class=\"control-label col-xs-6\">\n                        <label class=\"spacer\" htmlFor=\"LoginPopup.Password\">Passwort</label>\n                        <strong class=\"text-danger spacer\">*</strong>\n                      </div>\n                      <div class=\"col-xs-6\">\n                        {this.renderPasswordLogin()}\n                      </div>\n                      <div class=\"col-xs-12\">\n                        <input class=\"form-control\" id=\"password\" name=\"Password\" type=\"password\" tabIndex={2} />\n                      </div>\n                    </div>\n                    <div class=\"form-group spacer\">\n                      <div class=\"col-xs-12\">\n                        <button class=\"btn btn-primary btn-lg btn-block spacer\" type=\"submit\" tabIndex={3}>\n                          Anmelden\n                        </button>\n                      </div>\n                    </div>\n                    <div class=\"form-group\">\n                      <div class=\"checkbox col-xs-12\">\n                        <label htmlFor=\"RememberMe\">\n                          <input id=\"RememberMe\" name=\"RememberMe\" type=\"checkbox\" value=\"true\" />\n                          Angemeldet bleiben?\n                        </label>\n                      </div>\n                    </div>\n                  </form>\n                </div>\n              </div>\n              {this.renderOAuthProviders()}\n            </div>\n            {this.renderFooter()}\n          </div>\n        </div>\n      </div>\n    );\n  }\n}\n"]}

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

@@ -0,0 +1,102 @@
+:host {
+  display: inline-flex;
+}
+: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-block: 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;
+  padding-inline: var(--gap-md, 16px);
+}
+: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 {
+  padding: var(--gap-md, 16px);
+  overflow: visible;
+}
+:host .modal_content.overflow {
+  overflow: auto;
+}
+:host .modal_footer {
+  position: relative;
+  padding-inline: var(--gap-md, 16px);
+}
+: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;
+  }
+}

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

@@ -0,0 +1,226 @@
+import { Host, h } from "@stencil/core";
+import { SIZE_VAR } from "../../types/enum";
+export class XvModal {
+    constructor() {
+        /**
+         * Is modal opened
+         */
+        this.open = false;
+        /**
+         * If true then modal not be closed on backdrop click
+         */
+        this.permanent = false;
+        /**
+         * Size of modal. But max size is 90% view width
+         */
+        this.size = SIZE_VAR.MD;
+        /**
+         * When need scroll modal content
+         */
+        this.overflow = true;
+        this.triggerEl = null;
+        this.onBackdropClick = async (e) => {
+            if (this.permanent)
+                return;
+            // click on backdrop
+            if (e.target === e.currentTarget) {
+                await this.closeModal();
+            }
+        };
+        this.removeTriggerListener = () => {
+            var _a;
+            (_a = this.triggerEl) === null || _a === void 0 ? void 0 : _a.removeEventListener('click', this.openModal.bind(this));
+        };
+        this.setupTrigger = () => {
+            this.removeTriggerListener();
+            const slot = this.el.shadowRoot.querySelector('slot[name="trigger"]');
+            if (slot) {
+                const assigned = slot.assignedElements();
+                if (assigned.length > 0) {
+                    this.triggerEl = assigned[0];
+                    this.triggerEl.addEventListener('click', this.openModal.bind(this));
+                }
+            }
+        };
+    }
+    async openModal() {
+        var _a;
+        this.open = true;
+        (_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        return this.open;
+    }
+    ;
+    async closeModal() {
+        var _a;
+        this.open = false;
+        (_a = this.openChange) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        return this.open;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '227d7c8432c263024eb14ebcc906d45d01845143', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: 'e9c1c83f4d5e3a1ddfa765b17129ea13dce96582', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '3a5b9b557925edb299ce386e289f60d87cbf9341', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '77e793861e33d77ca59c5f3bc89e1a6d83b8ba38', class: "modal" }, h("button", { key: '5534a1306535847efa5c77d393323ca93d9b33f3', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: 'c3dee869a2be046d2e216730fc122da92c21920d', class: "modal_header" }, h("slot", { key: '42c0d657d261841a8fcb6461a079e06b5b1d2fad', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: '48aae8d010464e9a06c92699ad9e1dfe5feb0e04', class: "modal_header__title" }, this.el.title))), h("div", { key: '4cb0e7c1fed672df57dc86e4ebc53859d9695d0d', class: { 'modal_content': true, overflow: this.overflow } }, h("slot", { key: '1df966114775ee209cab1311350cb9d005abae0c' })), h("div", { key: 'fc246530cac2cedb24a3b8be81e710cecd7b18fc', class: "modal_footer" }, h("slot", { key: '5b00a76e35824e041d8f891ca4e40ec27d72290f', name: "footer" }))))));
+    }
+    disconnectedCallback() {
+        this.removeTriggerListener();
+    }
+    static get is() { return "xv-modal-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-modal.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-modal.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "open": {
+                "type": "boolean",
+                "attribute": "open",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is modal opened"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "permanent": {
+                "type": "boolean",
+                "attribute": "permanent",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true then modal not be closed on backdrop click"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "attribute": "size",
+                "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 modal. But max size is 90% view width"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "SIZE_VAR.MD"
+            },
+            "overflow": {
+                "type": "boolean",
+                "attribute": "overflow",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When need scroll modal content"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "defaultValue": "true"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "openChange",
+                "name": "openChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "openModal": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            },
+            "closeModal": {
+                "complexType": {
+                    "signature": "() => Promise<boolean>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<boolean>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-modal.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-modal.js","sourceRoot":"","sources":["../../../src/components/xv-modal/xv-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter, Method } from '@stencil/core';\nimport { SIZE_VAR } from '../../types/enum';\n\n@Component({\n  tag: 'xv-modal-v2',\n  styleUrl: 'xv-modal.scss',\n  shadow: true,\n})\nexport class XvModal {\n  @Element() el: HTMLElement;\n  /**\n   * Is modal opened\n   */\n  @Prop({ reflect: true, mutable: true }) open: boolean = false;\n  /**\n   * If true then modal not be closed on backdrop click\n   */\n  @Prop({ reflect: true }) permanent: boolean = false;\n  /**\n   * Size of modal. But max size is 90% view width\n   */\n  @Prop({ reflect: true }) size: SIZE_VAR = SIZE_VAR.MD;\n  /**\n   * When need scroll modal content\n   */\n  @Prop({ reflect: true }) overflow: boolean = true;\n\n  @Event({ eventName: 'openChange' }) openChange!: EventEmitter<boolean>;\n\n  private triggerEl: HTMLElement | null = null;\n\n  @Method()\n  async openModal() {\n    this.open = true;\n    this.openChange?.emit(this.open);\n    return this.open\n  };\n\n  @Method()\n  async closeModal() {\n    this.open = false;\n    this.openChange?.emit(this.open);\n    return this.open\n  }\n\n  private onBackdropClick = async (e: MouseEvent) => {\n    if (this.permanent) return;\n    // click on backdrop\n    if (e.target === e.currentTarget) {\n      await this.closeModal();\n    }\n  };\n\n  private removeTriggerListener = () => {\n    this.triggerEl?.removeEventListener('click', this.openModal.bind(this));\n  };\n\n  private setupTrigger = () => {\n    this.removeTriggerListener();\n    const slot = this.el.shadowRoot.querySelector('slot[name=\"trigger\"]') as HTMLSlotElement;\n\n    if (slot) {\n      const assigned = slot.assignedElements();\n      if (assigned.length > 0) {\n        this.triggerEl = assigned[0] as HTMLElement;\n        this.triggerEl.addEventListener('click', this.openModal.bind(this));\n      }\n    }\n  }\n\n  render() {\n    return (\n      <Host role=\"dialog\" size={this.size} id={this.el.id}>\n        <slot name=\"trigger\" onSlotchange={this.setupTrigger} />\n\n        <div class={{ backdrop: true }} onClick={this.onBackdropClick}>\n          <div class=\"modal\">\n            <button class=\"modal_close\" onClick={this.closeModal.bind(this)}>&times;</button>\n            <div class=\"modal_header\">\n              <slot name=\"header\">\n                {this.el?.title && <h5 class=\"modal_header__title\">{this.el.title}</h5>}\n              </slot>\n            </div>\n\n            <div class={{ 'modal_content': true, overflow: this.overflow }}>\n              <slot />\n            </div>\n\n            <div class=\"modal_footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n\n  disconnectedCallback() {\n    this.removeTriggerListener();\n  }\n}\n"]}

package/dist/collection/components/xv-notification/_vars.js

@@ -0,0 +1,8 @@
+export var NOTIFICATION_VARIANTS;
+(function (NOTIFICATION_VARIANTS) {
+    NOTIFICATION_VARIANTS["INFO"] = "info";
+    NOTIFICATION_VARIANTS["SUCCESS"] = "success";
+    NOTIFICATION_VARIANTS["WARNING"] = "warning";
+    NOTIFICATION_VARIANTS["ERROR"] = "error";
+})(NOTIFICATION_VARIANTS || (NOTIFICATION_VARIANTS = {}));
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-notification/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-notification/_vars.ts"],"names":[],"mappings":"AAAA,MAAM,CAAN,IAAY,qBAKX;AALD,WAAY,qBAAqB;IAC/B,sCAAa,CAAA;IACb,4CAAmB,CAAA;IACnB,4CAAmB,CAAA;IACnB,wCAAe,CAAA;AACjB,CAAC,EALW,qBAAqB,KAArB,qBAAqB,QAKhC","sourcesContent":["export enum NOTIFICATION_VARIANTS {\n  INFO = 'info',\n  SUCCESS = 'success',\n  WARNING = 'warning',\n  ERROR = 'error'\n}\n"]}

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

@@ -0,0 +1,113 @@
+:host {
+  --notification-icon-size: 20px;
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: flex-start;
+  border-radius: 3px;
+  padding: var(--gap-md, 16px);
+  column-gap: var(--gap-md, 16px);
+  border: 1px solid;
+}
+:host .content {
+  flex: 1;
+  text-align: left;
+  color: var(--text-primary, #333);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 128%;
+  letter-spacing: 0.16px;
+  display: flex;
+  flex-direction: column;
+  row-gap: var(--spacing-06, 24px);
+  word-break: break-all;
+}
+:host .content_title {
+  text-align: left;
+  margin: 0;
+  padding: 0;
+  font-weight: 700;
+  line-height: var(--notification-icon-size);
+}
+:host .icon {
+  width: var(--notification-icon-size);
+  height: var(--notification-icon-size);
+  font-size: var(--notification-icon-size);
+  fill: currentColor;
+}
+:host .close {
+  --notification-close-size: 16px;
+  background-color: transparent;
+  border: none;
+  width: var(--notification-close-size);
+  height: var(--notification-close-size);
+  min-width: var(--notification-close-size);
+  min-height: var(--notification-close-size);
+  position: relative;
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: 300ms ease-in-out opacity;
+}
+:host .close:after, :host .close:before {
+  content: "";
+  position: absolute;
+  top: calc(50% - var(--notification-close-size) / 2);
+  left: calc(50% - 1px);
+  display: inline-block;
+  width: 2px;
+  height: 90%;
+  background-color: var(--button-tertiary, #273435);
+}
+:host .close:after {
+  transform: rotate(45deg);
+}
+:host .close:before {
+  transform: rotate(-45deg);
+}
+:host .close:hover {
+  opacity: 0.7;
+}
+:host .close:active {
+  opacity: 0.3;
+}
+:host ::slotted([slot=footer]) {
+  margin: 0;
+  padding: 0;
+}
+
+:host([type=info]) {
+  border-color: var(--support-info, #1B87B2);
+  background-color: var(--support-info-background, #E2F5F8);
+}
+:host([type=info]) .icon {
+  color: var(--support-info, #1B87B2);
+}
+
+:host([type=success]) {
+  border-color: var(--support-success, #97BF0D);
+  background-color: var(--support-success-background, #F4F7E5);
+}
+:host([type=success]) .icon {
+  color: var(--support-success, #1B87B2);
+}
+
+:host([type=warning]) {
+  border-color: var(--support-warning, #FF7F04);
+  background-color: var(--support-warning-backround, #FFF9C2);
+}
+:host([type=warning]) .icon {
+  color: var(--support-warning, #FF7F04);
+}
+
+:host([type=error]) {
+  border-color: var(--support-error, #F1290E);
+  background-color: var(--support-error-background, #FEE9E8);
+}
+:host([type=error]) .icon {
+  color: var(--support-error, #F1290E);
+}