globuswebcomponents 0.3.5 → 0.3.7

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

@@ -1,15 +1,15 @@
 import { getAssetPath, h } from "@stencil/core";
-export class Tag {
+export class GbTag {
     constructor() {
         this.size = undefined;
         this.icon = undefined;
+        this.action = undefined;
+        this.flagSwap = undefined;
         this.checkbox = undefined;
-        this.closeButton = undefined;
-        this.count = undefined;
     }
     render() {
-        const countryIconSrc = getAssetPath(`assets/country-icon.svg`);
-        return (h("div", { key: '7419286e506c07ac075b9fd3996e3cfad0949087', class: this.size }, this.checkbox && (h("gb-tag-checkbox", { key: 'bff8dadcb04c1d8fef28ea73184b244d506edaac', size: this.size })), this.icon === 'country' && (h("div", { key: 'e73613455c48e1d8bdf3192f533c3f6c35e9e71f', class: "icon left-icon" }, h("img", { key: 'f9b13c50b990e15510901617b7d5ca788f3a50a1', src: countryIconSrc, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '87d96031fade8beebc2f5a6a59a0e90855b6b377', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("img", { key: 'e145fc24130b9636498d05f3153f554860b1f716', src: "./build/assets/avatar_pic.jpg" }))), this.icon === 'dot' && (h("svg", { key: '0979a99e333b4cce688f172133576839f3b0eb5b', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'cca8e6ff98ae638870a6ddcb1a18ccd80cda13f6', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("span", { key: '52975b44677782fce92a0e01cc40120e16829b91', class: "label" }, h("slot", { key: 'd09c716482bd8e7f920c27fd9ab83381d37024e8' })), this.closeButton && (h("gb-tag-close", { key: '396bec3fa762032e5d5f3e344390140bc49bbe71', size: this.size })), this.count && (h("gb-tag-count", { key: 'b3c8e2d787ada85b6bec2b325d7e15dd82a1d7f1' }))));
+        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);
+        return (h("div", { key: '533238e4b05a18563baf2aa7ec5e0ea1680af878', class: `container ${this.size}` }, h("div", { key: '1aad6d3024b07f8c9c0a12a44bf32ef4c9290dee', class: `content ${this.size}` }, this.checkbox && (h("gb-tag-checkbox", { key: '0429f11855077fb81f989285f6ea16221c32c9dc', size: this.size })), this.icon === 'country' && (h("div", { key: '0ec170fe585cacb8c7e5fd3c8f19244db05c7863', class: "icon left-icon" }, h("img", { key: '8b1ed69f348744a05fccb91ade1aee4e2d278824', src: flagSwap, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '7d8e11d7a570ba78f507c0847db88f13f320a3f1', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("slot", { key: '983297b761a933c23dce09c438709867e5bc7fa0', name: 'image', slot: 'image' }))), this.icon === 'dot' && (h("svg", { key: '2b0964711e9282add6d3b0a682b71dcbfd9b941c', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'f63cc49b1390f63da7a4bbe69459c65df104bd42', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("slot", { key: '7c70d7d61b9de3c8129968626234ff33848c8c06' }), this.action === 'count' && (h("gb-tag-count", { key: '94bc654284b23c580f0bf8f179f653e4ae865e0b', size: this.size }, h("slot", { key: 'ef1a24b28f0c8f6c44a03e762223ff0335badb55', slot: "count", name: "count" })))), this.action === 'X_close' && (h("gb-tag-close", { key: '72e5b7289148a5ea6e72c89ce782724593150b8e', size: this.size }))));
     }
     static get is() { return "gb-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -59,41 +59,41 @@ export class Tag {
                 "attribute": "icon",
                 "reflect": false
             },
-            "checkbox": {
-                "type": "boolean",
+            "action": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "'X_close' | 'text_only' | 'count'",
+                    "resolved": "\"X_close\" | \"count\" | \"text_only\"",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "checkbox",
+                "attribute": "action",
                 "reflect": false
             },
-            "closeButton": {
-                "type": "boolean",
+            "flagSwap": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "close-button",
+                "attribute": "flag-swap",
                 "reflect": false
             },
-            "count": {
+            "checkbox": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -107,7 +107,7 @@ export class Tag {
                     "tags": [],
                     "text": ""
                 },
-                "attribute": "count",
+                "attribute": "checkbox",
                 "reflect": false
             }
         };

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

@@ -1 +1 @@
-{"version":3,"file":"gb-tags.js","sourceRoot":"","sources":["../../../src/components/gb-tags/gb-tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,GAAG;;;;;;;;IAOZ,MAAM;QAEF,MAAM,cAAc,GAAG,YAAY,CAAC,yBAAyB,CAAC,CAAC;QAE/D,OAAO,CACJ,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACf,IAAI,CAAC,QAAQ,IAAI,CACd,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAoB,CACvD;YACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CACxB,4DAAK,KAAK,EAAC,gBAAgB;gBACvB,4DAAK,GAAG,EAAE,cAAc,EAAE,GAAG,EAAC,cAAc,GAAG,CAC7C,CACT;YACA,IAAI,CAAC,IAAI,KAAI,QAAQ,IAAI,CACtB,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;gBACxD,4DAAK,GAAG,EAAC,+BAA+B,GAAO,CACvC,CACf;YACA,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CACpB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM;gBACtF,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;YACD,6DAAM,KAAK,EAAC,OAAO;gBACf,8DAAa,CACV;YACN,IAAI,CAAC,WAAW,IAAI,CACjB,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD;YACA,IAAI,CAAC,KAAK,IAAI,CACX,sEAA6B,CAChC,CACA,CACR,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-tag',\r\n    styleUrl: 'gb-tags.css',\r\n    shadow: true\r\n})\r\n\r\nexport class Tag {\r\n    @Prop() size: 'sm' | 'md' | 'lg';\r\n    @Prop() icon?: 'country' | 'avatar' | 'dot';\r\n    @Prop() checkbox?: boolean;\r\n    @Prop() closeButton?: boolean;\r\n    @Prop() count?: boolean;\r\n\r\n    render() {\r\n\r\n        const countryIconSrc = getAssetPath(`assets/country-icon.svg`);\r\n\r\n        return (\r\n           <div class={this.size}>\r\n                {this.checkbox && (\r\n                    <gb-tag-checkbox size={this.size}></gb-tag-checkbox>\r\n                )}\r\n                {this.icon === 'country' && (\r\n                    <div class=\"icon left-icon\">\r\n                        <img src={countryIconSrc} alt=\"Country Icon\" />\r\n                    </div>\r\n                )}\r\n                {this.icon ==='avatar' && (\r\n                    <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n                        <img src=\"./build/assets/avatar_pic.jpg\"></img>\r\n                    </gb-avatar>\r\n                )}\r\n                {this.icon === 'dot' && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                        <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\"/>\r\n                    </svg>\r\n                )}\r\n                <span class=\"label\">\r\n                    <slot></slot>\r\n                </span>\r\n                {this.closeButton && (\r\n                    <gb-tag-close size={this.size}></gb-tag-close>\r\n                )}\r\n                {this.count && (\r\n                    <gb-tag-count></gb-tag-count>\r\n                )}\r\n           </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-tags.js","sourceRoot":"","sources":["../../../src/components/gb-tags/gb-tags.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQjE,MAAM,OAAO,KAAK;;;;;;;;IAOd,MAAM;QAEF,MAAM,QAAQ,GAAG,YAAY,CAAC,UAAU,IAAI,CAAC,QAAQ,MAAM,CAAC,CAAC;QAE7D,OAAO,CACJ,4DAAK,KAAK,EAAE,aAAa,IAAI,CAAC,IAAI,EAAE;YAC/B,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE;gBAC7B,IAAI,CAAC,QAAQ,IAAI,CACd,wEAAiB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAoB,CACvD;gBACA,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CACxB,4DAAK,KAAK,EAAC,gBAAgB;oBACvB,4DAAK,GAAG,EAAE,QAAQ,EAAE,GAAG,EAAC,cAAc,GAAG,CACvC,CACT;gBACA,IAAI,CAAC,IAAI,KAAI,QAAQ,IAAI,CACtB,kEAAW,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,IAAI,iBAAa,OAAO;oBACxD,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC/B,CACf;gBACA,IAAI,CAAC,IAAI,KAAK,KAAK,IAAI,CACpB,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,GAAG,EAAC,MAAM,EAAC,GAAG,EAAC,OAAO,EAAC,SAAS,EAAC,IAAI,EAAC,MAAM;oBACtF,+DAAQ,EAAE,EAAC,GAAG,EAAC,EAAE,EAAC,GAAG,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,SAAS,GAAE,CAC1C,CACT;gBACD,8DAAa;gBACZ,IAAI,CAAC,MAAM,KAAK,OAAO,IAAI,CACxB,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI;oBACzB,6DAAM,IAAI,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,GAAQ,CAC5B,CAClB,CACC;YACL,IAAI,CAAC,MAAM,KAAK,SAAS,IAAI,CAC1B,qEAAc,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB,CACjD,CACA,CACR,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core';\r\n\r\n@Component({\r\n    tag: 'gb-tag',\r\n    styleUrl: 'gb-tags.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTag {\r\n    @Prop() size: 'sm' | 'md' | 'lg';\r\n    @Prop() icon?: 'country' | 'avatar' | 'dot';\r\n    @Prop() action: 'X_close' | 'text_only' | 'count';\r\n    @Prop() flagSwap: string;\r\n    @Prop() checkbox?: boolean;\r\n\r\n    render() {\r\n\r\n        const flagSwap = getAssetPath(`assets/${this.flagSwap}.svg`);\r\n\r\n        return (\r\n           <div class={`container ${this.size}`}>\r\n                <div class={`content ${this.size}`}>\r\n                    {this.checkbox && (\r\n                        <gb-tag-checkbox size={this.size}></gb-tag-checkbox>\r\n                    )}\r\n                    {this.icon === 'country' && (\r\n                        <div class=\"icon left-icon\">\r\n                            <img src={flagSwap} alt=\"Country Icon\" />\r\n                        </div>\r\n                    )}\r\n                    {this.icon ==='avatar' && (\r\n                        <gb-avatar class=\"avatar-icon\" size=\"xs\" status-icon=\"false\">\r\n                            <slot name='image' slot='image'></slot>\r\n                        </gb-avatar>\r\n                    )}\r\n                    {this.icon === 'dot' && (\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n                            <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\"/>\r\n                        </svg>\r\n                    )}\r\n                    <slot></slot>\r\n                    {this.action === 'count' && (\r\n                        <gb-tag-count size={this.size}>\r\n                            <slot slot=\"count\" name=\"count\"></slot>\r\n                        </gb-tag-count>\r\n                    )}\r\n                </div>\r\n                {this.action === 'X_close' && (\r\n                    <gb-tag-close size={this.size}></gb-tag-close>\r\n                )}\r\n           </div>\r\n        );\r\n    }\r\n}"]}