globuswebcomponents 0.2.6 → 0.2.8

package/dist/collection/components/gb-progress-bar/gb-progress-bar.js

@@ -0,0 +1,102 @@
+import { h, Fragment } from "@stencil/core";
+export class GbProgressBar {
+    constructor() {
+        this.progress = undefined;
+        this.showLabel = false;
+        this.labelPosition = undefined;
+        this.el = undefined;
+    }
+    render() {
+        const progressValue = Math.min(Math.max(this.progress, 0), 100);
+        return (h("div", { key: '2b00a3893930a939aabf4d0bf750be1156c9387a', class: `progress_bar_container ${this.labelPosition}` }, h("div", { key: 'd3774d3fb408c8cd9ea8b993735bf1d36d83d8ac', class: "progress_bar" }, h("div", { key: '61bd6f835d6aa6d050836281e7471d89e2857ad1', class: "progress_fill", style: { width: `${progressValue}%` } })), h(Fragment, null, this.showLabel && (h("div", { key: '3f5826e9cd910693a233f4e3025ad241f8cc88f4', class: `label ${this.labelPosition}` }, this.labelPosition === 'right' && h("span", { key: 'c5fa3b01692d711acd886e950e7b4756867283e7', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'bottom' && h("span", { key: 'b665e65b8a9d9e184200c06e4811f882b2a02b46', class: `text-sm-medium` }, progressValue, "%"), this.labelPosition === 'top_floating' && (h("gb-tooltip", { key: 'ad7cca480e090876d5b2e4c9f39b3972d6e1c6e5', class: `top_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 6.5).toString()}%` } }, h("p", { key: '99eed898f67eaf33368813564fa8acf27bcd70a4', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))), this.labelPosition === 'bottom_floating' && (h("gb-tooltip", { key: '74d0ee9de86fc7287a5d4244f26e450cfea42c82', class: `bottom_tooltip`, arrow: "none", style: { marginLeft: `${(progressValue - 59.5).toString()}%` } }, h("p", { key: '7de8d115d59a7f17da2ba26602c91c2d4688c081', slot: "main_text", class: "text-xs-semi-bold" }, progressValue, "%"))))))));
+    }
+    static get is() { return "gb-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-progress-bar.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "progress",
+                "reflect": false
+            },
+            "showLabel": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "show-label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "labelPosition": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'right' | 'bottom' | 'top_floating' | 'bottom_floating'",
+                    "resolved": "\"bottom\" | \"bottom_floating\" | \"right\" | \"top_floating\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label-position",
+                "reflect": false
+            },
+            "el": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "HTMLElement",
+                    "resolved": "HTMLElement",
+                    "references": {
+                        "HTMLElement": {
+                            "location": "global",
+                            "id": "global::HTMLElement"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-progress-bar.js.map

package/dist/collection/components/gb-progress-bar/gb-progress-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-progress-bar.js","sourceRoot":"","sources":["../../../src/components/gb-progress-bar/gb-progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAO7D,MAAM,OAAO,aAAa;;;yBAEK,KAAK;;;;IAIlC,MAAM;QACJ,MAAM,aAAa,GAAG,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,GAAG,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;QAEhE,OAAO,CACL,4DAAK,KAAK,EAAE,0BAA0B,IAAI,CAAC,aAAa,EAAE;YACxD,4DAAK,KAAK,EAAC,cAAc;gBACvB,4DAAK,KAAK,EAAC,eAAe,EAAC,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,aAAa,GAAG,EAAE,GAAQ,CACpE;YACN,kBACG,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAE,SAAS,IAAI,CAAC,aAAa,EAAE;gBACtC,IAAI,CAAC,aAAa,KAAK,OAAO,IAAI,6DAAM,KAAK,EAAE,gBAAgB;oBAAG,aAAa;wBAAS;gBACxF,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,6DAAM,KAAK,EAAE,gBAAgB;oBAAG,aAAa;wBAAS;gBACzF,IAAI,CAAC,aAAa,KAAK,cAAc,IAAI,CACxC,mEAAY,KAAK,EAAE,aAAa,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,GAAG,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE;oBAC1G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB;wBAC1C,aAAa;4BACZ,CACO,CACd;gBACA,IAAI,CAAC,aAAa,KAAK,iBAAiB,IAAI,CAC3C,mEAAY,KAAK,EAAE,gBAAgB,EAAE,KAAK,EAAC,MAAM,EAAC,KAAK,EAAE,EAAE,UAAU,EAAE,GAAG,CAAC,aAAa,GAAG,IAAI,CAAC,CAAC,QAAQ,EAAE,GAAG,EAAE;oBAC9G,0DAAG,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,mBAAmB;wBAC1C,aAAa;4BACZ,CACO,CACd,CACG,CACP,CACA,CACC,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-progress-bar',\r\n  styleUrl: 'gb-progress-bar.css',\r\n  shadow: true,\r\n})\r\nexport class GbProgressBar {\r\n  @Prop() progress: number;\r\n  @Prop() showLabel: boolean = false;\r\n  @Prop() labelPosition: 'right' | 'bottom' | 'top_floating' | 'bottom_floating';\r\n  @Prop() el: HTMLElement;\r\n\r\n  render() {\r\n    const progressValue = Math.min(Math.max(this.progress, 0), 100);\r\n\r\n    return (\r\n      <div class={`progress_bar_container ${this.labelPosition}`}>\r\n        <div class=\"progress_bar\">\r\n          <div class=\"progress_fill\" style={{ width: `${progressValue}%` }}></div>\r\n        </div>\r\n        <>\r\n          {this.showLabel && (\r\n            <div class={`label ${this.labelPosition}`}>\r\n              {this.labelPosition === 'right' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n              {this.labelPosition === 'bottom' && <span class={`text-sm-medium`}>{progressValue}%</span>}\r\n              {this.labelPosition === 'top_floating' && (\r\n                <gb-tooltip class={`top_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 6.5).toString()}%` }}>\r\n                  <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n                    {progressValue}%\r\n                  </p>\r\n                </gb-tooltip>\r\n              )}\r\n              {this.labelPosition === 'bottom_floating' && (\r\n                <gb-tooltip class={`bottom_tooltip`} arrow=\"none\" style={{ marginLeft: `${(progressValue - 59.5).toString()}%` }}>\r\n                  <p slot=\"main_text\" class=\"text-xs-semi-bold\">\r\n                    {progressValue}%\r\n                  </p>\r\n                </gb-tooltip>\r\n              )}\r\n            </div>\r\n          )}\r\n        </>\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-progress-circle/gb-progress-circle.css

@@ -0,0 +1,39 @@
+:host{
+  position: relative;
+
+}
+
+.progress {
+  position: relative;
+    height: 160px;
+    width: 160px;
+    cursor: pointer;
+}
+
+.progress-circle {
+  transform: rotate(-90deg);
+	margin-top: -40px;
+}
+
+.progress-circle-back {
+	fill: none; 
+	stroke: #D2D2D2;
+	stroke-width:10px;
+}
+
+.progress-circle-prog {
+	fill: none; 
+	stroke: #7E3451;
+	stroke-width: 10px;  
+	stroke-dasharray: 100 999;    
+	stroke-dashoffset: 0px;
+    transition: stroke-dasharray 0.7s linear 0s;
+}
+
+.progress-text {
+	width: 100%;
+	position: absolute;
+	top: 60px;
+	text-align: center;
+	font-size: 2em;
+}

package/dist/collection/components/gb-progress-circle/gb-progress-circle.js

@@ -0,0 +1,105 @@
+import { h } from "@stencil/core";
+export class GbProgressCircle {
+    constructor() {
+        this.size = undefined;
+        this.shape = undefined;
+        this.label = false;
+        this.progress = 0;
+    }
+    render() {
+        return (h("div", { key: '81290a35de8a4ad0fcc12680e43fe531875fd84c', class: "progress" }, h("svg", { key: '3c101514dc5dfe1903b443096c38dc0b9f2b99bf', class: "progress-circle", width: "200px", height: "200px", xmlns: "http://www.w3.org/2000/svg" }, h("circle", { key: '07fa7d86419e8365562d51c0b6c9f1ba4e1b90be', class: "progress-circle-back", cx: "80", cy: "80", r: "74" }), h("circle", { key: '3eb215855c2136d4da3897befe9bc3b6658dd6e7', class: "progress-circle-prog", cx: "80", cy: "80", r: "74" })), h("div", { key: 'f144f7e3ca03f5cc98922c28973c8c5fe02739a4', class: "progress-text", "data-progress": "0" }, "50%")));
+    }
+    static get is() { return "gb-progress-circle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-progress-circle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-progress-circle.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "shape": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'circle' | 'half_circle'",
+                    "resolved": "\"circle\" | \"half_circle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "shape",
+                "reflect": false
+            },
+            "label": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "progress",
+                "reflect": false,
+                "defaultValue": "0"
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-progress-circle.js.map

package/dist/collection/components/gb-progress-circle/gb-progress-circle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-progress-circle.js","sourceRoot":"","sources":["../../../src/components/gb-progress-circle/gb-progress-circle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,gBAAgB;;;;qBAGF,KAAK;wBACH,CAAC;;IAE5B,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU;YACnB,4DAAK,KAAK,EAAC,iBAAiB,EAAC,KAAK,EAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAC,KAAK,EAAC,4BAA4B;gBAC1F,+DAAQ,KAAK,EAAC,sBAAsB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU;gBACrE,+DAAQ,KAAK,EAAC,sBAAsB,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CACjE;YACN,4DAAK,KAAK,EAAC,eAAe,mBAAe,GAAG,UAEtC,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-progress-circle',\r\n  styleUrl: 'gb-progress-circle.css',\r\n  shadow: true\r\n})\r\nexport class GbProgressCircle {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() shape: 'circle' | 'half_circle';\r\n  @Prop() label: boolean = false;\r\n  @Prop() progress: number = 0;\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"progress\">\r\n        <svg class=\"progress-circle\" width=\"200px\" height=\"200px\" xmlns=\"http://www.w3.org/2000/svg\">\r\n          <circle class=\"progress-circle-back\" cx=\"80\" cy=\"80\" r=\"74\"></circle>\r\n          <circle class=\"progress-circle-prog\" cx=\"80\" cy=\"80\" r=\"74\"></circle>\r\n        </svg>\r\n        <div class=\"progress-text\" data-progress=\"0\">\r\n          50%\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}"]}