globuswebcomponents 0.2.6 → 0.2.9

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

@@ -0,0 +1,116 @@
+import { getAssetPath, h } from "@stencil/core";
+export class Tag {
+    constructor() {
+        this.size = undefined;
+        this.icon = undefined;
+        this.checkbox = undefined;
+        this.closeButton = undefined;
+        this.count = undefined;
+    }
+    render() {
+        const countryIconSrc = getAssetPath(`assets/country-icon.svg`);
+        return (h("div", { key: '3d0533d60c5fecc1b6f72152cd779cba88e139e1', class: this.size }, this.checkbox && (h("gb-tag-checkbox", { key: '31e49bfef5227f520c459c0b5f7c972bb86f3f8b', size: this.size })), this.icon === 'country' && (h("div", { key: '1ca2b0a1e523edcf434c40845b3244bc89a46677', class: "icon left-icon" }, h("img", { key: '4f1758b071eda4be258669ebae955f7b0bec0a19', src: countryIconSrc, alt: "Country Icon" }))), this.icon === 'avatar' && (h("gb-avatar", { key: '0d7cbe44ffe500889b86704ab0d21d0e9c1d809b', class: "avatar-icon", size: "xs", "status-icon": "false" }, h("img", { key: '5be4c4e32e5167a913b2b0a6e687450e5a6eef1c', src: "./build/assets/avatar_pic.jpg" }))), this.icon === 'dot' && (h("svg", { key: 'f0deda7e7a4b2c27b6f764d067e86e08bcca6417', xmlns: "http://www.w3.org/2000/svg", width: "8", height: "8", viewBox: "0 0 8 8", fill: "none" }, h("circle", { key: 'e985074d62197ecbddefa698107a00ced6d8c3e4', cx: "4", cy: "4", r: "3", fill: "#17B26A" }))), h("span", { key: 'b18e9bad6c626dddded698cde3fea88d01aca4d2', class: "label" }, h("slot", { key: '286e5e6cba54a04960ab60090305f259a9800c52' })), this.closeButton && (h("gb-tag-close", { key: 'b3afded40bf4742398eacf60f9f4152ed1bca047', size: this.size })), this.count && (h("gb-tag-count", { key: 'e9e0b03d5465c09784611f989f550a7dce3ca510' }))));
+    }
+    static get is() { return "gb-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-tags.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-tags.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": ""
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'country' | 'avatar' | 'dot'",
+                    "resolved": "\"avatar\" | \"country\" | \"dot\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "checkbox": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "checkbox",
+                "reflect": false
+            },
+            "closeButton": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "close-button",
+                "reflect": false
+            },
+            "count": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "count",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-tags.js.map

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

@@ -0,0 +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}"]}

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js

@@ -0,0 +1,110 @@
+import { h } from "@stencil/core";
+export class GbTextareaInputField {
+    constructor() {
+        this.type = undefined;
+        this.destructive = undefined;
+        this.placeholder = '';
+        this.label = '';
+    }
+    render() {
+        if (this.type === 'default') {
+            return [
+                h("label", null, this.label),
+                h("textarea", { placeholder: this.placeholder })
+            ];
+        }
+        if (this.type === 'tags') {
+            return [
+                h("label", null),
+                h("textarea", { placeholder: this.placeholder }, h("slot", null))
+            ];
+        }
+    }
+    static get is() { return "gb-textarea-input-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-textarea-input-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-textarea-input-field.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'tags'",
+                    "resolved": "\"default\" | \"tags\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "type",
+                "reflect": false
+            },
+            "destructive": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "destructive",
+                "reflect": false
+            },
+            "placeholder": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "placeholder",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-textarea-input-field.js.map

package/dist/collection/components/gb-textarea-input-field/gb-textarea-input-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-textarea-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-textarea-input-field/gb-textarea-input-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQnD,MAAM,OAAO,oBAAoB;;;;2BAGC,EAAE;qBACR,EAAE;;IAE1B,MAAM;QAEF,IAAG,IAAI,CAAC,IAAI,KAAK,SAAS,EAAE,CAAC;YACzB,OAAO;gBACH,iBAAQ,IAAI,CAAC,KAAK,CAAS;gBAC3B,gBAAU,WAAW,EAAE,IAAI,CAAC,WAAW,GAAa;aACvD,CAAC;QACN,CAAC;QACD,IAAG,IAAI,CAAC,IAAI,KAAK,MAAM,EAAE,CAAC;YACtB,OAAO;gBACH,gBAAe;gBACf,gBAAU,WAAW,EAAE,IAAI,CAAC,WAAW;oBACnC,eAAa,CACN;aACd,CAAA;QACL,CAAC;IAEL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component ({\r\n    tag: 'gb-textarea-input-field',\r\n    styleUrl: 'gb-textarea-input-field.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTextareaInputField {\r\n    @Prop() type: 'default' | 'tags';\r\n    @Prop() destructive? : boolean;\r\n    @Prop() placeholder: string = '';\r\n    @Prop() label: string = '';\r\n\r\n    render() {\r\n        \r\n        if(this.type === 'default') {\r\n            return [\r\n                <label>{this.label}</label>,\r\n                <textarea placeholder={this.placeholder}></textarea>\r\n            ];\r\n        }\r\n        if(this.type === 'tags') {\r\n            return [\r\n                <label></label>,\r\n                <textarea placeholder={this.placeholder}>\r\n                    <slot></slot>\r\n                </textarea>\r\n            ]\r\n        }\r\n        \r\n    }\r\n}"]}

package/dist/collection/components/gb-toggle/gb-toggle.css

@@ -0,0 +1,28 @@
+.toggle_div{
+    display: flex;
+    justify-content: space-between;
+    width: fit-content;
+}
+
+.toggle_div.sm{
+    gap: var(--spacing-2);
+}
+
+.toggle_div.md{
+    gap: var(--spacing-3);
+}
+
+.text{
+    display: flex;
+    flex-direction: column;
+    gap: var(--spacing-2);
+}
+
+.div_centered{
+    justify-content: center;
+    padding-bottom: 0.2rem;
+}
+
+::slotted(p){
+    color: #4B5565;
+}

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

@@ -0,0 +1,119 @@
+import { h } from "@stencil/core";
+export class GbToggle {
+    constructor() {
+        this.size = undefined;
+        this.state = undefined;
+        this.supportingText = false;
+    }
+    getMainTextClass() {
+        switch (this.size) {
+            case 'sm': return `text-sm-medium`;
+            case 'md': return `text-md-medium`;
+        }
+    }
+    getSupportingTextClass() {
+        switch (this.size) {
+            case 'sm': return 'text-sm-regular';
+            case 'md': return 'text-md-regular';
+        }
+    }
+    componentDidLoad() {
+        const mainTextSlot = this.el.querySelector('[slot="main_text"]');
+        const supportingTextSlot = this.el.querySelector('[slot="supporting_text"]');
+        const mainDiv = this.el.querySelector('.text');
+        if (mainTextSlot) {
+            mainTextSlot.classList.add(this.getMainTextClass());
+        }
+        if (supportingTextSlot) {
+            supportingTextSlot.classList.add(this.getSupportingTextClass());
+        }
+        if (!this.supportingText) {
+            mainDiv.classList.add('div_centered');
+        }
+    }
+    render() {
+        return (h("div", { key: '6e8d3bf2457f1a90362acee558ca162b9da997ce', class: `toggle_div ${this.size}` }, h("div", { key: '4465baccfac53d7aa8ef93712d4c1de4672692da', class: "toggle_base" }, h("gb-toggle-base", { key: 'e4c6679e6f90345d387ce479c4f14051c87a5868', size: this.size, state: this.state })), h("div", { key: '3e9081810f1f2beed116852562449fa247c8d175', class: "text" }, h("slot", { key: '086d0c75edd5e5c095e8b74f511c9e9aedc83082', name: "main_text" }), this.supportingText && (h("slot", { key: 'c177105efb22b038ed6af3ecbf9476cdb5dbf40c', name: "supporting_text" })))));
+    }
+    static get is() { return "gb-toggle"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-toggle.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-toggle.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
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            },
+            "supportingText": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "supporting-text",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=gb-toggle.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-toggle.js","sourceRoot":"","sources":["../../../src/components/gb-toggle/gb-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAS5D,MAAM,OAAO,QAAQ;;;;8BAGiB,KAAK;;IAGvC,gBAAgB;QACZ,QAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,KAAK,IAAK,CAAC,CAAC,OAAO,gBAAgB,CAAC;YACpC,KAAK,IAAK,CAAC,CAAC,OAAO,gBAAgB,CAAC;QACxC,CAAC;IACL,CAAC;IAED,sBAAsB;QAClB,QAAO,IAAI,CAAC,IAAI,EAAE,CAAC;YACf,KAAK,IAAK,CAAC,CAAC,OAAO,iBAAiB,CAAC;YACrC,KAAK,IAAK,CAAC,CAAC,OAAO,iBAAiB,CAAC;QACzC,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,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;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAG,YAAY,EAAC,CAAC;YACb,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACxD,CAAC;QAED,IAAG,kBAAkB,EAAE,CAAC;YACpB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;QACpE,CAAC;QAED,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;QAC1C,CAAC;IACL,CAAC;IAED,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE;YACjC,4DAAK,KAAK,EAAC,aAAa;gBACpB,uEACA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,GACC,CAChB;YACN,4DAAK,KAAK,EAAC,MAAM;gBACb,6DAAM,IAAI,EAAC,WAAW,GAAQ;gBAC7B,IAAI,CAAC,cAAc,IAAI,CACpB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACvC,CACC,CACJ,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle',\r\n    styleUrl: 'gb-toggle.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggle {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n    @Prop() supportingText: boolean = false;\r\n    @Element() el: HTMLElement;\r\n\r\n    getMainTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return `text-sm-medium`;\r\n            case 'md' : return `text-md-medium`;\r\n        }\r\n    }\r\n\r\n    getSupportingTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return 'text-sm-regular';\r\n            case 'md' : return 'text-md-regular';\r\n        }\r\n    }\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        const mainDiv = this.el.querySelector('.text');\r\n\r\n        if(mainTextSlot){\r\n            mainTextSlot.classList.add(this.getMainTextClass());\r\n        }\r\n\r\n        if(supportingTextSlot) {\r\n            supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n        }\r\n\r\n        if(!this.supportingText) {\r\n            mainDiv.classList.add('div_centered');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`toggle_div ${this.size}`}>\r\n                <div class=\"toggle_base\">\r\n                    <gb-toggle-base \r\n                    size={this.size}\r\n                    state={this.state}\r\n                    ></gb-toggle-base>\r\n                </div>\r\n                <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <slot name=\"supporting_text\"></slot>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}"]}

package/dist/collection/components/gb-toggle-base/gb-toggle-base.css

@@ -0,0 +1,118 @@
+:root{
+    /* Positive spacing */
+    --spacing-none: 0rem;
+    --spacing-half: 0.125rem;
+    --spacing-1: 0.25rem;
+    --spacing-2: 0.5rem;
+    --spacing-3: 0.75rem;
+    --spacing-4: 1rem;
+    --spacing-5: 1.25rem;
+    --spacing-6: 1.5rem;
+    --spacing-7: 2rem;
+    --spacing-8: 2.5rem;
+    --spacing-12: 3rem;
+    --spacing-16: 4rem;
+    --spacing-20: 5rem;
+    --spacing-24: 6rem;
+    --spacing-32: 8rem;
+    --spacing-40: 10rem;
+    --spacing-48: 12rem;
+    --spacing-56: 14rem;
+    --spacing-64: 16rem;
+
+    /* Negative spacing */
+
+    --spacing-negative-half: -0.125rem;
+    --spacing-negative-1: -0.25rem;
+    --spacing-negative-2: -0.5rem;
+    --spacing-negative-3: -0.75rem;
+    --spacing-negative-4: -1rem;
+    --spacing-negative-5: -1.25rem;
+    --spacing-negative-6: -1.5rem;
+    --spacing-negative-7: -2rem;
+
+    /* Radius  */
+    --rounded-none: 0rem;
+    --rounded-xs: 0.25rem;
+    --rounded-sm: 0.5rem;
+    --rounded-md: 0.75rem;
+    --rounded-lg: 1rem;
+    --rounded-xl: 1.5rem;
+    --rounded-2xl: 2rem;
+    --rounded-full: 62.438rem;
+}
+
+#customCheckbox{
+    visibility: hidden;
+    width: 0;
+    height: 0;
+    margin: 0;
+}
+
+label.default{
+    position: relative;
+    display: inline-block;
+    background-color: #E3E8EF;
+    border-radius: 0.75rem;
+    transition: 0.3s linear;
+    cursor: pointer;
+}
+
+label.sm{
+    width: 2.25rem;
+    height: var(--spacing-5);
+}
+
+label.md{
+    width: 2.75rem;
+    height: var(--spacing-6);
+}
+
+label::after{
+    content: '';
+    position: absolute;
+    left: 0.125rem;
+    top: 0.125rem;
+    border-radius: 15px;
+    background-color: #FFFFFF;
+    transition: left 0.3s ease-out;
+    filter: drop-shadow(0px 1px 2px rgba(16, 24, 40, 0.06)) drop-shadow(0px 1px 3px rgba(16, 24, 40, 0.10));
+}
+
+/* Sizes */
+label.sm::after{
+    width: var(--spacing-4);
+    height: var(--spacing-4);
+}
+
+label.md::after{
+    width: var(--spacing-5);
+    height: var(--spacing-5);
+}
+
+/* States */
+label.disabled{
+    background-color: #F6F8FA;
+    pointer-events: none;
+}
+
+label.disabled::after{
+    background-color: #CDD5DF;
+}
+
+/* Here comes the magic */
+#customCheckbox:checked ~ label{
+    background-color: #075DB2;
+}
+
+#customCheckbox:checked ~ label:hover{
+    background-color: #064E94;
+}
+
+#customCheckbox:checked ~ label.sm::after{
+    left: 18px;
+}
+
+#customCheckbox:checked ~ label.md::after{
+    left: 22px;
+}

package/dist/collection/components/gb-toggle-base/gb-toggle-base.js

@@ -0,0 +1,76 @@
+import { h } from "@stencil/core";
+export class GbToggleBase {
+    constructor() {
+        this.size = undefined;
+        this.state = undefined;
+    }
+    render() {
+        return [
+            h("input", { key: '2352ba1b4ee59ac5652f1000406be2c12715483a', type: "checkbox", id: "customCheckbox" }),
+            h("label", { key: '02ec7f7e5807dc325f39e89f3ee391561abbc8bd', class: `${this.size} ${this.state}`, htmlFor: "customCheckbox" })
+        ];
+    }
+    static get is() { return "gb-toggle-base"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-toggle-base.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-toggle-base.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
+            },
+            "state": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "StateEnum",
+                    "resolved": "StateEnum.Default | StateEnum.Disabled",
+                    "references": {
+                        "StateEnum": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateEnum"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "state",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-toggle-base.js.map

package/dist/collection/components/gb-toggle-base/gb-toggle-base.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"gb-toggle-base.js","sourceRoot":"","sources":["../../../src/components/gb-toggle-base/gb-toggle-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,YAAY;;;;;IAIrB,MAAM;QACF,OAAO;YACH,8DAAO,IAAI,EAAC,UAAU,EAAC,EAAE,EAAC,gBAAgB,GAAE;YAC5C,8DAAO,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,KAAK,EAAE,EAAE,OAAO,EAAC,gBAAgB,GAAS;SAChF,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle-base',\r\n    styleUrl: 'gb-toggle-base.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggleBase {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n\r\n    render() {\r\n        return [\r\n            <input type=\"checkbox\" id=\"customCheckbox\"/>,\r\n            <label class={`${this.size} ${this.state}`} htmlFor=\"customCheckbox\"></label>\r\n        ]\r\n    }\r\n}"]}