xv-webcomponents 0.1.26 → 0.1.28

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

@@ -0,0 +1,202 @@
+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;
+        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.changeOpen) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        return this.open;
+    }
+    ;
+    async closeModal() {
+        var _a;
+        this.open = false;
+        (_a = this.changeOpen) === null || _a === void 0 ? void 0 : _a.emit(this.open);
+        return this.open;
+    }
+    render() {
+        var _a;
+        return (h(Host, { key: '6402def40d1bd383381fc2d696daaed05ef2589e', role: "dialog", size: this.size, id: this.el.id }, h("slot", { key: '1552ccbc352a3d6544681576114ba4eed1787f99', name: "trigger", onSlotchange: this.setupTrigger }), h("div", { key: '5e7e1cd0a0abdd923d563fadaa9bcc54802a8e98', class: { backdrop: true }, onClick: this.onBackdropClick }, h("div", { key: '985c3257ce78509d1a749a32f0e4d9df2ffdf728', class: "modal" }, h("button", { key: '6b2073798e6911ef8fc79d9772f7bf59395e01d3', class: "modal_close", onClick: this.closeModal.bind(this) }, "\u00D7"), h("div", { key: '0e84498948e35e92d0a35717fe50d77e32884e73', class: "modal_header" }, h("slot", { key: '31aedf3610813334c0abc4f9a25017289acc7224', name: "header" }, ((_a = this.el) === null || _a === void 0 ? void 0 : _a.title) && h("h5", { key: 'a38797b67a494fffc28c6126a6f47640b522bba3', class: "modal_header__title" }, this.el.title))), h("div", { key: '919757268480698659e7f524eb63bc06f73466e6', class: "modal_content" }, h("slot", { key: '5c310e5285f3dd0fb013a4cb92f969bb697b03d1' })), h("div", { key: '0ecf04b9c83ee114decfaea71792df727c6642f5', class: "modal_footer" }, h("slot", { key: 'd72b63333e9a6287d0d2d27189bf3bf16d12e297', 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",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Is modal opened"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "open",
+                "reflect": true,
+                "defaultValue": "false"
+            },
+            "permanent": {
+                "type": "boolean",
+                "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,
+                "attribute": "permanent",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "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 modal. But max size is 90% view width"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "SIZE_VAR.MD"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "changeOpen",
+                "name": "changeOpen",
+                "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() permanent: boolean = false;\n  /**\n   * Size of modal. But max size is 90% view width\n   */\n  @Prop() size: SIZE_VAR = SIZE_VAR.MD;\n\n  @Event() changeOpen: EventEmitter<boolean>;\n\n  private triggerEl: HTMLElement | null = null;\n\n  @Method()\n  async openModal() {\n    this.open = true;\n    this.changeOpen?.emit(this.open);\n    return this.open\n  };\n\n  @Method()\n  async closeModal() {\n    this.open = false;\n    this.changeOpen?.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\">\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,112 @@
+: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);
+}
+: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);
+}

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

@@ -0,0 +1,118 @@
+import { Host, h } from "@stencil/core";
+import { NOTIFICATION_VARIANTS } from "./_vars";
+export class XvNotification {
+    constructor() {
+        this.variant = NOTIFICATION_VARIANTS.INFO;
+        this.dismissible = false;
+        this.closeHandle = (e) => this.close.emit(e);
+        this.renderIcon = (variant, cls = 'icon') => {
+            switch (variant) {
+                case NOTIFICATION_VARIANTS.ERROR: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z" })));
+                }
+                case NOTIFICATION_VARIANTS.INFO: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z" })));
+                }
+                case NOTIFICATION_VARIANTS.SUCCESS: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z" })));
+                }
+                case NOTIFICATION_VARIANTS.WARNING: {
+                    return (h("svg", { class: cls, xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512" }, h("path", { d: "M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z" })));
+                }
+                default:
+                    return null;
+            }
+        };
+    }
+    render() {
+        return (h(Host, { key: '9a0744259a817b6a28a5e6bf0841b28c67c38c4d', class: "xv-notification", type: this.variant }, this.renderIcon(this.variant), h("div", { key: 'e7602dc421de6d9c81893df0938a8f8a752d50ac', class: "content" }, h("div", { key: '7dee10b112988942cd31301bdac111ea335ef471', class: "content_wrapper" }, this.el.title && h("h5", { key: '020c0d0eca5349549b5100701406756cc2871ffa', class: "content_title" }, this.el.title), h("slot", { key: '8b8e6f865d10b14f38b5d622fb7cd8b23c139eb2' })), h("slot", { key: 'cad5e543aabcba222ced7e26331bbb71239451fe', name: "footer" })), this.dismissible && h("button", { key: 'd5d67c83075389832315cbec1fe3852b72552d73', class: "close", onClick: this.closeHandle })));
+    }
+    static get is() { return "xv-notification-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-notification.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-notification.css"]
+        };
+    }
+    static get assetsDirs() { return ["xv-notification/icons"]; }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "NOTIFICATION_VARIANTS",
+                    "resolved": "NOTIFICATION_VARIANTS.ERROR | NOTIFICATION_VARIANTS.INFO | NOTIFICATION_VARIANTS.SUCCESS | NOTIFICATION_VARIANTS.WARNING",
+                    "references": {
+                        "NOTIFICATION_VARIANTS": {
+                            "location": "import",
+                            "path": "./_vars",
+                            "id": "src/components/xv-notification/_vars.ts::NOTIFICATION_VARIANTS"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "NOTIFICATION_VARIANTS.INFO"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "dismissible",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "close",
+                "name": "close",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=xv-notification.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-notification.js","sourceRoot":"","sources":["../../../src/components/xv-notification/xv-notification.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AACvF,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;AAQhD,MAAM,OAAO,cAAc;IAN3B;QAQU,YAAO,GAA0B,qBAAqB,CAAC,IAAI,CAAC;QAC5D,gBAAW,GAAY,KAAK,CAAC;QAG7B,gBAAW,GAAG,CAAC,CAAa,EAAE,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;QAoBpD,eAAU,GAAG,CAAC,OAA8B,EAAE,MAAc,MAAM,EAAE,EAAE;YAC5E,QAAQ,OAAO,EAAE,CAAC;gBAChB,KAAK,qBAAqB,CAAC,KAAK,CAAC,CAAC,CAAC;oBACjC,OAAO,CACL,WAAK,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;wBACvE,YACE,CAAC,EAAC,0RAA0R,GAAG,CAC7R,CACP,CAAC;gBACJ,CAAC;gBACD,KAAK,qBAAqB,CAAC,IAAI,CAAC,CAAC,CAAC;oBAChC,OAAO,CACL,WAAK,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;wBACvE,YACE,CAAC,EAAC,0QAA0Q,GAAG,CAC7Q,CACP,CAAC;gBACJ,CAAC;gBACD,KAAK,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC;oBACnC,OAAO,CACL,WAAK,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;wBACvE,YACE,CAAC,EAAC,mMAAmM,GAAG,CACtM,CACP,CAAA;gBACH,CAAC;gBACD,KAAK,qBAAqB,CAAC,OAAO,CAAC,CAAC,CAAC;oBACnC,OAAO,CACL,WAAK,KAAK,EAAE,GAAG,EAAE,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa;wBACvE,YACE,CAAC,EAAC,yTAAyT,GAAG,CAC5T,CACP,CAAC;gBACJ,CAAC;gBACD;oBACE,OAAO,IAAI,CAAC;YAChB,CAAC;QACH,CAAC,CAAC;KACH;IAxDC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO;YAC7C,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC;YAE9B,4DAAK,KAAK,EAAC,SAAS;gBAClB,4DAAK,KAAK,EAAC,iBAAiB;oBACzB,IAAI,CAAC,EAAE,CAAC,KAAK,IAAI,2DAAI,KAAK,EAAC,eAAe,IAAE,IAAI,CAAC,EAAE,CAAC,KAAK,CAAM;oBAChE,8DAAa,CACT;gBACN,6DAAM,IAAI,EAAC,QAAQ,GAAQ,CACvB;YAEL,IAAI,CAAC,WAAW,IAAI,+DAAQ,KAAK,EAAC,OAAO,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,GAAI,CACnE,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwCF","sourcesContent":["import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\nimport { NOTIFICATION_VARIANTS } from './_vars';\n\n@Component({\n  tag: 'xv-notification-v2',\n  styleUrl: 'xv-notification.scss',\n  shadow: true,\n  assetsDirs: ['xv-notification/icons']\n})\nexport class XvNotification {\n  @Element() el: HTMLElement;\n  @Prop() variant: NOTIFICATION_VARIANTS = NOTIFICATION_VARIANTS.INFO;\n  @Prop() dismissible: boolean = false;\n  @Event() close: EventEmitter<MouseEvent>;\n\n  private closeHandle = (e: MouseEvent) => this.close.emit(e);\n\n  render() {\n    return (\n      <Host class=\"xv-notification\" type={this.variant}>\n        {this.renderIcon(this.variant)}\n\n        <div class=\"content\">\n          <div class=\"content_wrapper\">\n            {this.el.title && <h5 class=\"content_title\">{this.el.title}</h5>}\n            <slot></slot>\n          </div>\n          <slot name=\"footer\"></slot>\n        </div>\n\n        {this.dismissible && <button class=\"close\" onClick={this.closeHandle} />}\n      </Host>\n    );\n  }\n\n  private renderIcon = (variant: NOTIFICATION_VARIANTS, cls: string = 'icon') => {\n    switch (variant) {\n      case NOTIFICATION_VARIANTS.ERROR: {\n        return (\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c9.4-9.4 24.6-9.4 33.9 0l47 47 47-47c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9l-47 47 47 47c9.4 9.4 9.4 24.6 0 33.9s-24.6 9.4-33.9 0l-47-47-47 47c-9.4 9.4-24.6 9.4-33.9 0s-9.4-24.6 0-33.9l47-47-47-47c-9.4-9.4-9.4-24.6 0-33.9z\" />\n          </svg>\n        );\n      }\n      case NOTIFICATION_VARIANTS.INFO: {\n        return (\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336l24 0 0-64-24 0c-13.3 0-24-10.7-24-24s10.7-24 24-24l48 0c13.3 0 24 10.7 24 24l0 88 8 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-80 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z\" />\n          </svg>\n        );\n      }\n      case NOTIFICATION_VARIANTS.SUCCESS: {\n        return (\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              d=\"M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z\" />\n          </svg>\n        )\n      }\n      case NOTIFICATION_VARIANTS.WARNING: {\n        return (\n          <svg class={cls} xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\">\n            <path\n              d=\"M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z\" />\n          </svg>\n        );\n      }\n      default:\n        return null;\n    }\n  };\n}\n"]}

package/dist/collection/components/xv-overflow-menu/_vars.js

@@ -0,0 +1,6 @@
+export var OverflowMenuVariant;
+(function (OverflowMenuVariant) {
+    OverflowMenuVariant["DEFAULT"] = "";
+    OverflowMenuVariant["DANGER"] = "danger";
+})(OverflowMenuVariant || (OverflowMenuVariant = {}));
+//# sourceMappingURL=_vars.js.map

package/dist/collection/components/xv-overflow-menu/_vars.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"_vars.js","sourceRoot":"","sources":["../../../src/components/xv-overflow-menu/_vars.ts"],"names":[],"mappings":"AAKA,MAAM,CAAN,IAAY,mBAGX;AAHD,WAAY,mBAAmB;IAC7B,mCAAY,CAAA;IACZ,wCAAiB,CAAA;AACnB,CAAC,EAHW,mBAAmB,KAAnB,mBAAmB,QAG9B","sourcesContent":["export interface OverflowMenuEvent {\n  value: string | number | object | undefined;\n  event: PointerEvent;\n}\n\nexport enum OverflowMenuVariant {\n  DEFAULT = '',\n  DANGER = 'danger',\n}\n"]}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.css

@@ -0,0 +1,45 @@
+:host {
+  flex: 1;
+  display: inline-block;
+  background-color: transparent;
+  transition: 200ms ease background-color;
+  user-select: none;
+  text-align: left;
+  color: var(--text-secondary, #515151);
+  font-family: var(--ff-body, Tahoma);
+  font-size: var(--fz-md, 14px);
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+}
+
+:host(:hover) {
+  cursor: pointer;
+  background-color: var(--layer-hover-01, #E9E9E9);
+}
+
+:host(:active) {
+  background-color: var(--layer-active-01, #D1D1D1);
+}
+
+:host(:focus) {
+  border: 2px solid var(--focus, #273435);
+}
+
+:host([variant=danger]) {
+  background-color: var(--text-error, #D62512);
+  color: var(--text-on-color, #FFF);
+}
+
+:host([variant=danger]:hover) {
+  background-color: var(--support-error, #F1290E);
+}
+
+:host([variant=danger]:active) {
+  background-color: var(--text-error, #D62512);
+}
+
+:host([disabled]) {
+  background-color: var(--layer-01, #F7F7F7) !important;
+  color: var(--text-disabled) !important;
+  cursor: not-allowed;
+}

package/dist/collection/components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js

@@ -0,0 +1,137 @@
+import { Host, h } from "@stencil/core";
+import { OverflowMenuVariant } from "../_vars";
+export class XvOverflowMenuItem {
+    constructor() {
+        this.disabled = false;
+        this.variant = OverflowMenuVariant.DEFAULT;
+    }
+    handleClick(event) {
+        if (this.disabled)
+            return;
+        this.itemClick.emit({ event, value: this.value });
+    }
+    render() {
+        return (h(Host, { key: '8abe8cdfa428125612c4c8f399be07b101d7faff', class: "xv-overflow-menu-item", role: "menuitem", disabled: this.disabled }, h("slot", { key: '08c7c14f181c7980bc9ff4fc8dd511753b4b6c9e' })));
+    }
+    static get is() { return "xv-overflow-menu-v2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-overflow-menu-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-overflow-menu-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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": true,
+                "defaultValue": "false"
+            },
+            "value": {
+                "type": "any",
+                "mutable": false,
+                "complexType": {
+                    "original": "OverflowMenuEvent['value']",
+                    "resolved": "number | object | string",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "reflect": true
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "OverflowMenuVariant",
+                    "resolved": "OverflowMenuVariant.DANGER | OverflowMenuVariant.DEFAULT",
+                    "references": {
+                        "OverflowMenuVariant": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuVariant"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "OverflowMenuVariant.DEFAULT"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemClick",
+                "name": "itemClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "OverflowMenuEvent",
+                    "resolved": "OverflowMenuEvent",
+                    "references": {
+                        "OverflowMenuEvent": {
+                            "location": "import",
+                            "path": "../_vars",
+                            "id": "src/components/xv-overflow-menu/_vars.ts::OverflowMenuEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get listeners() {
+        return [{
+                "name": "click",
+                "method": "handleClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-overflow-menu-item.js.map