globuswebcomponents 0.2.6 → 0.2.8

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

@@ -0,0 +1,79 @@
+import { h } from "@stencil/core";
+export class GbTooltip {
+    constructor() {
+        this.arrow = 'left';
+        this.supportingText = undefined;
+    }
+    componentDidLoad() {
+        const mainTextSlot = this.el.querySelector('[slot="main_text"]');
+        const supportingTextSlot = this.el.querySelector('[slot="supporting_text"]');
+        if (mainTextSlot) {
+            mainTextSlot.classList.add('text-xs-semi-bold');
+        }
+        if (supportingTextSlot) {
+            supportingTextSlot.classList.add('text-xs-regular');
+        }
+    }
+    render() {
+        return (h("div", { key: '419e54fe6e11a351b973f61a08d79bc3aa18a6fb', class: `tooltip ${this.arrow}` }, h("slot", { key: '5ec82f0b90caded75ebd6f389da72e0b29ab81b5', name: "main_text" }), this.supportingText && h("slot", { key: '50bc348626c84da35bb14ece359670160d8e7eee', name: "supporting_text" }), this.arrow && (h("div", { key: '61298dfeae0835b84dc8d3540b2c21d1e7e922ab', class: `tooltip_arrow` }, h("svg", { key: 'f18944fa846cddca5552c247242fb7c603090a42', width: "10", height: "17", viewBox: "0 0 10 17", fill: "none", xmlns: "http://www.w3.org/2000/svg", class: `tooltip_arrow` }, h("path", { key: '002a495bc7d0b07fb85bd6219acd4bf8d4408cd6', d: "M7.5 15L1.73171 9.20549C1.34332 8.81534 1.34332 8.18465 1.73171 7.7945L7.49999 2", stroke: "#E3E8EF" }), h("path", { key: 'b8f7314f66211b01ed120a736a50ced41d339e0a', d: "M9.51471 14.5711C9.51471 15.462 8.43757 15.9081 7.8076 15.2782L1.73653 9.2071C1.346 8.81658 1.346 8.18342 1.73653 7.79289L7.8076 1.72183C8.43757 1.09187 9.51471 1.53803 9.51471 2.42894L9.51471 14.5711Z", fill: "#FCFCFC" }))))));
+    }
+    static get is() { return "gb-tooltip"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-tooltip.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-tooltip.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "arrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "ArrowPositions",
+                    "resolved": "\"bottom_center\" | \"bottom_left\" | \"bottom_right\" | \"left\" | \"none\" | \"right\" | \"top_center\"",
+                    "references": {
+                        "ArrowPositions": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::ArrowPositions"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "arrow",
+                "reflect": false,
+                "defaultValue": "'left'"
+            },
+            "supportingText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "supporting-text",
+                "reflect": false
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-tooltip.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-tooltip.js","sourceRoot":"","sources":["../../../src/components/gb-tooltip/gb-tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,OAAO,SAAS;;qBACc,MAAM;;;IAItC,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAE7E,IAAG,YAAY,EAAE,CAAC;YAChB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;QAClD,CAAC;QAED,IAAG,kBAAkB,EAAE,CAAC;YACtB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAED,MAAM;QACF,OAAO,CACL,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,KAAK,EAAE;YACjC,6DAAM,IAAI,EAAC,WAAW,GAAQ;YAC7B,IAAI,CAAC,cAAc,IAAI,6DAAM,IAAI,EAAC,iBAAiB,GAAQ;YAC3D,IAAI,CAAC,KAAK,IAAI,CACb,4DAAK,KAAK,EAAE,eAAe;gBAczB,4DAAK,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAE,eAAe;oBACnH,6DAAM,CAAC,EAAC,kFAAkF,EAAC,MAAM,EAAC,SAAS,GAAG;oBAC9G,6DACE,CAAC,EAAC,2MAA2M,EAC7M,IAAI,EAAC,SAAS,GACd,CACE,CACF,CACP,CACG,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { ArrowPositions } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-tooltip',\r\n    styleUrl: 'gb-tooltip.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTooltip {\r\n    @Prop() arrow: ArrowPositions = 'left';\r\n    @Prop() supportingText: boolean;\r\n    @Element() el: HTMLElement;\r\n\r\n    componentDidLoad() {\r\n      const mainTextSlot = this.el.querySelector('[slot=\"main_text\"]');\r\n      const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n      if(mainTextSlot) {\r\n        mainTextSlot.classList.add('text-xs-semi-bold');\r\n      }\r\n\r\n      if(supportingTextSlot) {\r\n        supportingTextSlot.classList.add('text-xs-regular');\r\n      }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n          <div class={`tooltip ${this.arrow}`}>\r\n            <slot name=\"main_text\"></slot>\r\n            {this.supportingText && <slot name=\"supporting_text\"></slot>}\r\n            {this.arrow && (\r\n              <div class={`tooltip_arrow`}>\r\n                {/* <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"6\" height=\"17\" viewBox=\"0 0 6 17\" fill=\"none\" class={`arrow`}>\r\n                  <g clip-path=\"url(#clip0_19_31150)\">\r\n                    <path\r\n                      d=\"M-2.51471 2.42894C-2.51471 1.53803 -1.43757 1.09187 -0.807603 1.72183L5.26347 7.79289C5.654 8.18342 5.654 8.81658 5.26347 9.20711L-0.807603 15.2782C-1.43757 15.9081 -2.51471 15.462 -2.51471 14.5711L-2.51471 2.42894Z\"\r\n                      fill=\"#FCFCFC\"\r\n                    />\r\n                  </g>\r\n                  <defs>\r\n                    <clipPath id=\"clip0_19_31150\">\r\n                      <rect width=\"16\" height=\"6\" fill=\"white\" transform=\"matrix(0 -1 1 0 0 16.5)\" />\r\n                    </clipPath>\r\n                  </defs>\r\n                </svg> */}\r\n                <svg width=\"10\" height=\"17\" viewBox=\"0 0 10 17\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\" class={`tooltip_arrow`}>\r\n                  <path d=\"M7.5 15L1.73171 9.20549C1.34332 8.81534 1.34332 8.18465 1.73171 7.7945L7.49999 2\" stroke=\"#E3E8EF\" />\r\n                  <path\r\n                    d=\"M9.51471 14.5711C9.51471 15.462 8.43757 15.9081 7.8076 15.2782L1.73653 9.2071C1.346 8.81658 1.346 8.18342 1.73653 7.79289L7.8076 1.72183C8.43757 1.09187 9.51471 1.53803 9.51471 2.42894L9.51471 14.5711Z\"\r\n                    fill=\"#FCFCFC\"\r\n                  />\r\n                </svg>\r\n              </div>\r\n            )}\r\n          </div>\r\n        );\r\n    }\r\n}"]}