globuswebcomponents 0.2.6 → 0.2.9

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

@@ -0,0 +1,173 @@
+import { getAssetPath, h } from "@stencil/core";
+export class GbInputField {
+    constructor() {
+        this.size = undefined;
+        this.inputType = undefined;
+        this.destructive = undefined;
+        this.helpIcon = false;
+        this.icon = undefined;
+        this.placeholder = '';
+        this.label = '';
+    }
+    /*getIconPath(iconName: string) {
+      if (!iconName) return null;
+      return getAssetPath(`./assets/${iconName}`);
+    }
+  
+    renderIcon(iconName: string) {
+      const iconPath = this.getIconPath(iconName);
+      return iconPath ? <span><img class="icon" src={iconPath} alt="icon" /></span> : null;
+    }*/
+    render() {
+        const icon = this.icon ? getAssetPath(`assets/${this.icon}.svg`) : '';
+        const classes = {
+            [this.size]: true,
+        };
+        return (h("div", { key: 'd3cb2163d547b42c36fafb321e23256990a5fb3d', class: classes }, h("label", { key: 'a9dfcc3025c43858b29a82cb59d6d90d86ffb505' }, this.label), this.inputType === 'default' && (h("div", { key: '82405c874e940ee80ba84dca09cf17917172782a', class: "input-wrapper" }, h("input", { key: '6f64b7614b03ad8aacae48061c7ac4f44dfb0c7c', placeholder: this.placeholder }), this.helpIcon && (h("div", { key: 'ec84cd00e537195bad705a06bf91fca427742b87', class: "help-icon" }, h("svg", { key: '9eb29a730c13a10f5c21275ca779a6e0ead5ace6', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '12abfc75211a47e0f80ced82c8103b1613108452', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'icon_leading' && (h("div", { key: '216e9966116935f263c6db27eb152d34d4995121', class: "input-wrapper" }, this.icon && (h("div", { key: 'cbe0bf5bc6953df4ff91102ea07079fecdd8498c', class: "icon" }, h("img", { key: 'f48078f1362608a4059c2159a0c6a3a8ade05765', src: icon, alt: "Icon" }))), h("input", { key: 'e99d1abb2ab39b8c53c487fb7b51e642f425c0e5', placeholder: this.placeholder, type: 'email' }), this.helpIcon && (h("div", { key: 'fb1bbad0009a28f2b1a6695247de8e0bafe13a03', class: "help-icon" }, h("svg", { key: '72f2c780e0888c9d1a16714901523c1e68cc3257', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'a6d8d5f39756717bbc376bb97ca534c7f7c8fb63', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'leading_dropdown' && (h("div", { key: 'd0f396004ce87db568f547dfc802bbf48dcd06f4', class: "input-wrapper" }, this.icon && (h("div", { key: 'cdbf5bdc4750eb780dc206666830150a88116f82', class: "icon" }, h("img", { key: '9d77f27ed1982519930931eb53bc4851d6304a8e', src: icon, alt: "Icon" }))), h("select", { key: '60f1aa17b42d770b5b3df18243863f4a58591b22' }), h("input", { key: '4ebb34a1838d4da0571f4ec5e60da31512adbaff', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: '57ffbded81fc87314b87d8aa31faa8f9575c15d9', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '13b718815b227171421485de83a9b4de366921f0', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'payment_input' && (h("div", { key: 'c87bacd767b1103f5012b0db42815666c565dbb6', class: "input-wrapper" }, h("span", { key: '1197ffde5b3a4020ac6520b32f0afed227adbf96', class: 'payment-icon' }, "$"), h("input", { key: '7a483eb45839af8b13bdd19293ce61317a42a46e', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: 'e9cd78f4f920eea8489ec5d84ed1c01fc8dec114', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '8da89e51262bb7bf252066588aacd66d8c43c056', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.inputType === 'tags' && (h("input", { key: '88cd7d4049be5f15fe00bada0e9698c3a12aa06a', placeholder: this.placeholder }, h("slot", { key: '8629ff14650de2d4ae3c54eec4bbc9edf8471851' }), this.helpIcon && (h("svg", { key: 'ca36cdd2417f4700b5035e581f48ed200958f96b', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '3ed9ee9ccd0f7db379de93fd10bb3e4e8c29d9c5', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'password' && (h("input", { key: '7b1b39e183dbdbea3df3a2f50c4fd10cc52bd787', placeholder: this.placeholder }, this.helpIcon && (h("svg", { key: 'bfeeaaf0f245521edef6f5826ba71d037e281ba9', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '785cf1ef83617b2f96324e46710cbfd46d5218f6', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'password_icon_leading' && (h("input", { key: 'ffdf00321b28b38fc07633d6ba68f47c810cb0b3', placeholder: this.placeholder }, this.icon && (h("div", { key: '59eff7935a50780e67ad4c79b2e1d743f96fe4c2', class: "icon" }, h("img", { key: '34b57866d28c2f617abc051cef18071d8a655d6b', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: 'f9c5254e6816dc08502333cab41fe54bc2609969', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: 'd9fbeacc0ffee8c4eef938ae37fa54dd0a8e52dd', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.inputType === 'count' && (h("input", { key: '0ed3460aca362498549be3ac7307e72bb849563f', placeholder: this.placeholder }, this.icon && (h("div", { key: '22677eabb6c23d74f7af237e0d1d4fee6039b696', class: "icon" }, h("img", { key: '082a18a1c70e959c4735fba1272f9c3a791c729b', src: icon, alt: "Icon" }))), this.helpIcon && (h("svg", { key: 'c19d0a8bea8d6d536d80491335d7a8eca9056e3f', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, h("path", { key: '084ad76feb1bbc5f43d366c7a7d754c2c042b6c0', d: "M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z", stroke: "#697586", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("span", { key: '77a947419f4ea35429c61e53e5308623e66fe5df' }, h("button", { key: '6969ab48e0c2970a72b1e797797db8528accc208', class: "decrease-btn" }, h("svg", { key: '712c330fdec3b5daa0e70dfa4c3db7aa73da406a', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '19900dd1e1d17a067596da6499ab77e9a21328de', d: "M16.6666 10L3.33329 10", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" }))), h("button", { key: '6e0d0149d567c00ced9353db82265d2e26c32feb', class: "increase-btn" }, h("svg", { key: '8f513c6316615a3bc748c7ed691b18b60dc88df9', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '6df8674bb205befd0deccca881fa3a9ebb15d574', d: "M10 3.33334L10 16.6667M16.6667 10L3.33337 10", stroke: "#4B5565", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("p", { key: '7b92772ef19c40936499d71daedbc177029332b1', class: "help-text" }, "This is a hint to help the user")));
+    }
+    static get is() { return "gb-input-field"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["gb-input-field.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["gb-input-field.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
+            },
+            "inputType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'icon_leading' | 'leading_dropdown' | 'trailing_dropdown'|'leading_text'|'payment_input'| 'tags' | 'trailing_button' |'password' | 'password_icon_leading' | 'count'",
+                    "resolved": "\"count\" | \"default\" | \"icon_leading\" | \"leading_dropdown\" | \"leading_text\" | \"password\" | \"password_icon_leading\" | \"payment_input\" | \"tags\" | \"trailing_button\" | \"trailing_dropdown\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "input-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
+            },
+            "helpIcon": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "help-icon",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "icon",
+                "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": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}
+//# sourceMappingURL=gb-input-field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"gb-input-field.js","sourceRoot":"","sources":["../../../src/components/gb-input-field/gb-input-field.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, getAssetPath, h } from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels'\r\n\r\n@Component({\r\n  tag: 'gb-input-field',\r\n  styleUrl: 'gb-input-field.css',\r\n  shadow: true\r\n})\r\n\r\nexport class GbInputField {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() inputType: 'default' | 'icon_leading' | 'leading_dropdown' | 'trailing_dropdown'|'leading_text'|'payment_input'| 'tags' | 'trailing_button' |'password' | 'password_icon_leading' | 'count';\r\n  @Prop() destructive?: boolean;\r\n  @Prop() helpIcon?: boolean = false;\r\n  @Prop() icon?: string;\r\n  @Prop() placeholder: string = ''; \r\n  @Prop() label?: string = '';\r\n\r\n  /*getIconPath(iconName: string) {\r\n    if (!iconName) return null;\r\n    return getAssetPath(`./assets/${iconName}`);\r\n  }\r\n\r\n  renderIcon(iconName: string) {\r\n    const iconPath = this.getIconPath(iconName);\r\n    return iconPath ? <span><img class=\"icon\" src={iconPath} alt=\"icon\" /></span> : null;\r\n  }*/\r\n\r\n  \r\n\r\n  render() {\r\n\r\n    const icon = this.icon ? getAssetPath(`assets/${this.icon}.svg`) : '';\r\n\r\n    const classes = {\r\n      [this.size]: true,\r\n    }\r\n\r\n    return (\r\n      <div class={classes}>\r\n        <label>{this.label}</label>\r\n        {this.inputType === 'default' && (\r\n          <div class=\"input-wrapper\">\r\n            <input placeholder={this.placeholder}>\r\n            </input>\r\n            {this.helpIcon && (\r\n              <div class=\"help-icon\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              </div> \r\n            )}\r\n          </div>\r\n        )}\r\n        {this.inputType === 'icon_leading' && (\r\n          <div class=\"input-wrapper\">\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            <input placeholder={this.placeholder} type='email'>\r\n            </input>\r\n            {this.helpIcon && (\r\n                <div class=\"help-icon\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                  </svg>\r\n                </div> \r\n              )}\r\n          </div>\r\n        )}\r\n        {this.inputType === 'leading_dropdown' && (\r\n          <div class=\"input-wrapper\">\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            <select></select>\r\n            <input placeholder={this.placeholder}>\r\n              {this.helpIcon && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              )}\r\n            </input>\r\n          </div>\r\n        )}\r\n        {this.inputType === 'payment_input' && (\r\n          <div class=\"input-wrapper\">\r\n            <span class='payment-icon'>$</span>\r\n            <input placeholder={this.placeholder}>\r\n              {this.helpIcon && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              )}\r\n            </input>\r\n          </div>\r\n        )}\r\n        {this.inputType === 'tags' && (\r\n          <input placeholder={this.placeholder}>\r\n            <slot></slot>\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'password' && (\r\n          <input placeholder={this.placeholder}>\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'password_icon_leading' && (\r\n          <input placeholder={this.placeholder}>\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'count' && (\r\n          <input placeholder={this.placeholder}>\r\n          {this.icon && (\r\n            <div class=\"icon\">\r\n              <img src={icon} alt=\"Icon\"></img>\r\n            </div>\r\n          )}\r\n          {this.helpIcon && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          )}\r\n          <span>\r\n            <button class=\"decrease-btn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path d=\"M16.6666 10L3.33329 10\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n            </button>\r\n            <button class=\"increase-btn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path d=\"M10 3.33334L10 16.6667M16.6667 10L3.33337 10\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>        \r\n            </button>\r\n          </span>\r\n        </input>\r\n        )}\r\n        <p class=\"help-text\">This is a hint to help the user</p>\r\n      </div>\r\n    )\r\n  }\r\n}"]}