xv-webcomponents 0.1.9 → 0.1.11

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/utils/utils.js

@@ -1,4 +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

@@ -1 +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","sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\r\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n"]}
+{"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"]}