xv-webcomponents 0.1.10 → 0.1.12

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

@@ -0,0 +1,158 @@
+import { Host, h } from "@stencil/core";
+export class XvTag {
+    constructor() {
+        this.size = 'md';
+        this.color = '';
+        this.bg = '';
+        this.disabled = false;
+        this.closeable = false;
+    }
+    closeHandler(e) {
+        if (this.disabled)
+            return;
+        this.closeClick.emit(e);
+    }
+    render() {
+        return (h(Host, { key: 'a80efe5ce83faee34abb8f23956e0a5dad597734', style: { color: this.color, background: this.bg }, class: `xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}` }, h("div", { key: 'def67b2d9a6638de4941b071e529c41daf8150b0', class: "xv-tag_content" }, h("slot", { key: '0489ac38e1eea6a1ba186b78b2e17637650c4c2d' })), this.closeable && (h("button", { key: 'be5108f430f4f4d11d76a4b88a69ca2997a2c939', onClick: this.closeHandler.bind(this), class: "xv-tag_close" }))));
+    }
+    static get is() { return "xv-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tag.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "color",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "bg": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "bg",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "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"
+            },
+            "closeable": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "closeable",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "closeClick",
+                "name": "closeClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xv-tag.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tag.js","sourceRoot":"","sources":["../../../src/components/xv-tag/xv-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,KAAK;IALlB;QAMU,SAAI,GAAuB,IAAI,CAAC;QAChC,UAAK,GAAW,EAAE,CAAC;QACnB,OAAE,GAAW,EAAE,CAAC;QAChB,aAAQ,GAAY,KAAK,CAAC;QAC1B,cAAS,GAAY,KAAK,CAAC;KAwBpC;IArBC,YAAY,CAAC,CAAe;QAC1B,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAE1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,KAAK,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,UAAU,EAAE,IAAI,CAAC,EAAE,EAAE,EACjD,KAAK,EAAE,UAAU,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,IAAI,IAAI,CAAC,IAAI,EAAE;YAE/D,4DAAK,KAAK,EAAC,gBAAgB;gBACzB,8DAAa,CACT;YACL,IAAI,CAAC,SAAS,IAAI,CACjB,+DAAQ,OAAO,EAAE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,KAAK,EAAC,cAAc,GAAU,CAC9E,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-tag',\r\n  styleUrl: 'xv-tag.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTag {\r\n  @Prop() size: 'sm' | 'md' | 'lg' = 'md';\r\n  @Prop() color: string = '';\r\n  @Prop() bg: string = '';\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() closeable: boolean = false;\r\n  @Event() closeClick: EventEmitter<PointerEvent>;\r\n\r\n  closeHandler(e: PointerEvent) {\r\n    if (this.disabled) return;\r\n\r\n    this.closeClick.emit(e);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host\r\n        style={{ color: this.color, background: this.bg }}\r\n        class={`xv-tag ${this.disabled ? 'disabled' : ''} ${this.size}`}\r\n      >\r\n        <div class=\"xv-tag_content\">\r\n          <slot></slot>\r\n        </div>\r\n        {this.closeable && (\r\n          <button onClick={this.closeHandler.bind(this)} class=\"xv-tag_close\"></button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,153 @@
+:host {
+  position: relative;
+  display: inline-block;
+  cursor: pointer;
+}
+
+/* General styles for tooltip */
+:host::before,
+:host::after {
+  position: absolute;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
+  z-index: 10;
+}
+
+/* Tooltip */
+:host::before {
+  content: attr(tooltip);
+  background: var(--background-inverse, #333);
+  color: var(--icon-inverse, #fff);
+  padding: var(--gap-sm, 5px) var(--gap-md, 16px);
+  border-radius: 2px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  max-width: 70vw;
+  font-family: var(--fz-body, Tahoma);
+  font-size: var(fz-md, 14px);
+  font-weight: 400;
+  line-height: 18px;
+  letter-spacing: 0.16px;
+}
+
+/* Arrow */
+:host::after {
+  content: "";
+  border: 6px solid transparent;
+}
+
+/* Show Tooltip and arrow */
+:host(:hover)::before,
+:host(:hover)::after,
+:host(:focus)::before,
+:host(:focus)::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+/* Tooltip positions */
+:host(.xv-tooltip_top)::before {
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-5px);
+}
+
+:host(.xv-tooltip_top)::after {
+  bottom: 100%;
+  left: 50%;
+  border-top-color: var(--background-inverse, #333);
+  transform: translateX(-50%) translateY(5px);
+}
+
+:host(.xv-tooltip_top-left)::before {
+  bottom: 100%;
+  left: 0;
+  transform: translateY(-5px);
+}
+
+:host(.xv-tooltip_top-left)::after {
+  bottom: 100%;
+  left: 10px;
+  border-top-color: black;
+  transform: translateY(5px);
+}
+
+:host(.xv-tooltip_top-right)::before {
+  bottom: 100%;
+  right: 0;
+  transform: translateY(-5px);
+}
+
+:host(.xv-tooltip_top-right)::after {
+  bottom: 100%;
+  right: 10px;
+  border-top-color: var(--background-inverse, #333);
+  transform: translateY(5px);
+}
+
+:host(.xv-tooltip_bottom)::before {
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(5px);
+}
+
+:host(.xv-tooltip_bottom)::after {
+  top: 100%;
+  left: 50%;
+  border-bottom-color: black;
+  transform: translateX(-50%) translateY(-5px);
+}
+
+:host(.xv-tooltip_bottom-left)::before {
+  top: 100%;
+  left: 0;
+  transform: translateY(5px);
+}
+
+:host(.xv-tooltip_bottom-left)::after {
+  top: 100%;
+  left: 10px;
+  border-bottom-color: var(--background-inverse, #333);
+  transform: translateY(-5px);
+}
+
+:host(.xv-tooltip_bottom-right)::before {
+  top: 100%;
+  right: 0;
+  transform: translateY(5px);
+}
+
+:host(.xv-tooltip_bottom-right)::after {
+  top: 100%;
+  right: 10px;
+  border-bottom-color: var(--background-inverse, #333);
+  transform: translateY(-5px);
+}
+
+:host(.xv-tooltip_left)::before {
+  right: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(-5px);
+}
+
+:host(.xv-tooltip_left)::after {
+  right: 100%;
+  top: 50%;
+  border-left-color: var(--background-inverse, #333);
+  transform: translateY(-50%) translateX(5px);
+}
+
+:host(.xv-tooltip_right)::before {
+  left: 100%;
+  top: 50%;
+  transform: translateY(-50%) translateX(5px);
+}
+
+:host(.xv-tooltip_right)::after {
+  left: 100%;
+  top: 50%;
+  border-right-color: var(--background-inverse, #333);
+  transform: translateY(-50%) translateX(-5px);
+}

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

@@ -0,0 +1,70 @@
+import { Host, h } from "@stencil/core";
+export class XvTooltip {
+    constructor() {
+        /**
+         * Tooltip and arrow position related to element
+         * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.
+         * By default, "top"
+         */
+        this.position = 'top';
+    }
+    render() {
+        return (h(Host, { key: 'd91cba6a2425ac5188d0c3908d670887849ddf9b', tooltip: this.message, class: `xv-tooltip_${this.position}` }, h("slot", { key: 'f8b284b78d72f5a1e53880173e9df9a286e4ab59' }, h("svg", { key: '2b3dc074585eff9515c3383dd1415f7655425c0e', xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 512 512", width: 16, height: 16 }, h("path", { key: 'd2d1e7eb69b531ae9212ee6da186628f57482317', fill: "currentColor", d: "M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z" })))));
+    }
+    static get is() { return "xv-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-tooltip.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "message": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Message what will be shown for tooltip *"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "message",
+                "reflect": false
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"bottom-left\" | \"bottom-right\" | \"left\" | \"right\" | \"top\" | \"top-left\" | \"top-right\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Tooltip and arrow position related to element\r\npossible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\nBy default, \"top\""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'top'"
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-tooltip.js","sourceRoot":"","sources":["../../../src/components/xv-tooltip/xv-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,SAAS;IALtB;QAQE;;;;WAIG;QACK,aAAQ,GAAoG,KAAK,CAAC;KAgB3H;IAdC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,KAAK,EAAE,cAAc,IAAI,CAAC,QAAQ,EAAE;YAC/D;gBACE,4DAAK,KAAK,EAAC,4BAA4B,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE;oBACjF,6DACE,IAAI,EAAC,cAAc,EACnB,CAAC,EAAC,yTAAyT,GAC3T,CACE,CACD,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-tooltip',\r\n  styleUrl: 'xv-tooltip.scss',\r\n  shadow: true,\r\n})\r\nexport class XvTooltip {\r\n  /** Message what will be shown for tooltip **/\r\n  @Prop() message: string;\r\n  /**\r\n   * Tooltip and arrow position related to element\r\n   * possible options: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right'.\r\n   * By default, \"top\"\r\n   */\r\n  @Prop() position: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'right' = 'top';\r\n\r\n  render() {\r\n    return (\r\n      <Host tooltip={this.message} class={`xv-tooltip_${this.position}`}>\r\n        <slot>\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 512 512\" width={16} height={16}>\r\n            <path\r\n              fill=\"currentColor\"\r\n              d=\"M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM216 336c-13.3 0-24 10.7-24 24s10.7 24 24 24l80 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-8 0 0-88c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24s10.7 24 24 24l24 0 0 64-24 0zm40-144a32 32 0 1 0 0-64 32 32 0 1 0 0 64z\"\r\n            />\r\n          </svg>\r\n        </slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/index.js

@@ -0,0 +1,11 @@
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+export { format } from './utils/utils';
+//# sourceMappingURL=index.js.map

package/dist/collection/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAEH,OAAO,EAAE,MAAM,EAAE,MAAM,eAAe,CAAC","sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport { format } from './utils/utils';\r\nexport type * from './components.d.ts';\r\n"]}

package/dist/collection/utils/utils.js

@@ -0,0 +1,7 @@
+export function format(first, middle, last) {
+    return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
+}
+export function uidGenerator() {
+    return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16));
+}
+//# sourceMappingURL=utils.js.map

package/dist/collection/utils/utils.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils/utils.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa;IACnE,OAAO,CAAC,KAAK,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,GAAG,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,IAAI,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;AACjF,CAAC;AAED,MAAM,UAAU,YAAY;IAC1B,OAAO,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,CAClE,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,CAAC,CAChF,CAAC;AACJ,CAAC","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\r\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n\r\nexport function uidGenerator() {\r\n  return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\r\n    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\r\n  );\r\n}\r\n"]}