globuswebcomponents 1.0.2 → 1.0.3

package/dist/cjs/gb-megainput-field.cjs.entry.js

@@ -25,10 +25,10 @@ const GbMegaInputField = class {
         }
     }
     render() {
-        return (index.h("div", { key: '770996463046fba6eb41b202bdba219dc3bd7202', class: {
+        return (index.h("div", { key: '6b5ebc0cdf0871690a1b05cd2da5fbc6c87f91c4', class: {
                 [this.size]: true,
                 disabled: this.state === 'disabled'
-            } }, index.h("input", { key: '3eef7e201bfce596696dc90b9fe276c337db4964', class: {
+            } }, index.h("input", { key: 'f03d0c9aa8c8703a6051e031d7d25546a9b73688', class: {
                 [this.size]: true,
                 disabled: this.state === 'disabled'
             }, type: "number", min: "0", max: "1", placeholder: "0", value: this.inputValue, onInput: (event) => this.handleInput(event) })));

package/dist/cjs/gb-pagination-dot-group.cjs.entry.js

@@ -16,7 +16,7 @@ const GbPaginationDotGroup = class {
         this.framed = false;
     }
     render() {
-        return (index.h("div", { key: 'df6c6361a10abd397969652e1bc0064fad437ee6', class: "dot_group_div" }, index.h("div", { key: 'ba4eb3f54526c18bec4d1fba79f986d53471e75d' })));
+        return (index.h("div", { key: '07ec77d53f8dd3cf495f5ba9ae75434677fd9400', class: "dot_group_div" }, index.h("div", { key: '53c550aa31df4fdedb450bb725e75ced8ed07dca' })));
     }
 };
 GbPaginationDotGroup.style = GbPaginationDotGroupStyle0;

package/dist/cjs/gb-progress-circle.cjs.entry.js

@@ -39,7 +39,7 @@ const GbProgressCircle = class {
         }
     }
     render() {
-        return (index.h("div", { key: '664c4f0e9fdfadf84ee91bb10bfa7c23636eed3e', class: "gauge" }, index.h("div", { key: 'e179ff0b009cd54f1fa372f4aff5989333f9be99', class: "arc", ref: el => (this.arcElement = el) }), index.h("div", { key: 'e42990834267d372f608e7dc4d7866e00f7cc9fe', class: "mask" }), this.label && (index.h("div", { key: '412374ad04af7c8fb14f4686780f594bb28cdf4d', class: "label", ref: el => (this.labelElement = el) }, index.h("p", { key: '8cbc5de3f2264f3828d011d3c38d765c2a228023', class: "display-lg-semi-bold" }, `${this.progress}%`)))));
+        return (index.h("div", { key: '92a64a225d9e277c1cead42e28ba532be5735c33', class: "gauge" }, index.h("div", { key: '31f47b93724eb88c62615d084fc112f4344bc1f4', class: "arc", ref: el => (this.arcElement = el) }), index.h("div", { key: '24006ef0a8cc36e5d74ba93c0a733b341280a7f9', class: "mask" }), this.label && (index.h("div", { key: '2e42d66a2a4d14691bf6a85eb3766ea54102bf63', class: "label", ref: el => (this.labelElement = el) }, index.h("p", { key: 'f20646812e084b6b70db49a01e3837a5d357c8ba', class: "display-lg-semi-bold" }, `${this.progress}%`)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {

package/dist/cjs/gb-rich-text.cjs.entry.js

@@ -24,7 +24,7 @@ const GbRichText = class {
             destructive: this.destructive,
             disabled: this.state === 'disabled'
         };
-        return (index.h("div", { key: 'c9b9414d8c598bf70a921fde572432cb455de79c', class: classes }, index.h("div", { key: '71cc66d2a0587b6d0c1baed6f9b108b1c39ade2f', class: "input-with-label" }, index.h("label", { key: 'c0b5438d9db01f8c86a260e9d14a657d251dfccb' }, this.label), index.h("div", { key: '5eb071836bc86d45f2709636bfd65e05cd8e8226', class: "input-container" }, index.h("div", { key: 'd55dee1fce024af0c36767b15fd73bf9d85a6c78', class: "toolbar-container" }, index.h("gb-wysiwyg-toolbar", { key: '539719b7a7626c96b405815049d6777435a586a6', breakpoint: "desktop", bold: true, italic: true, h1: true, h2: true, quote: true, link: true, image: true, bulletList: true, numberList: true })), this.destructive && (index.h("span", { key: 'bcaa0fbaf23e9fcd795fdbcb76e62fd2f54917ca', class: "error-icon" }, index.h("svg", { key: 'abb65479c56904c1cd6cd60e7855c2ae512642e7', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { key: 'da1216ebeac4dc432ff52431be98a06c9549b838', d: "M7.99483 10H8.00081M8.00016 8V5.33333M14.6668 8C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 8C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 8Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: 'de6acfde6469d2cb3f19462755882f5e91703511', class: "text-container" }, index.h("textarea", { key: '12105112b1554a8275484699c409a023ab05efda' }, this.showPlaceholder && (index.h("div", { key: 'e4315cd64a5e67dfd1d62994312cff81e85bc4ac' }, this.placeholder)))))), this.showHintText && (index.h("div", { key: 'cc1ecdc21cb3f9b6c409c68fd416e9320a0a6247', class: "hint-text" }, this.hintText))));
+        return (index.h("div", { key: 'e6c8642c08d2ed2c5a2533a287eedc2e8d132141', class: classes }, index.h("div", { key: 'bdb3a13d6f516df9abb2d6517241f9520b32c0d7', class: "input-with-label" }, index.h("label", { key: '091be54c2ddba2e58f842878a74a5314901db583' }, this.label), index.h("div", { key: '84bd0474afa3f01ffbed4ddaef174e77a2dc0a07', class: "input-container" }, index.h("div", { key: 'b8e24f61c541fc003ae2e53514bf6b5ceebed08d', class: "toolbar-container" }, index.h("gb-wysiwyg-toolbar", { key: '935286e2a038397881f559120f4f4acf8d2fe862', breakpoint: "desktop", bold: true, italic: true, h1: true, h2: true, quote: true, link: true, image: true, bulletList: true, numberList: true })), this.destructive && (index.h("span", { key: '6c6b4d434ae954afdc4bd7bf9d0d5bb3448107a9', class: "error-icon" }, index.h("svg", { key: 'ce902df811835e7938b1f0b96c8e844181479e26', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none" }, index.h("path", { key: '7640847db6ecc756ddc38d1f89a3c6c2777a7aa7', d: "M7.99483 10H8.00081M8.00016 8V5.33333M14.6668 8C14.6668 11.6819 11.6821 14.6667 8.00016 14.6667C4.31826 14.6667 1.3335 11.6819 1.3335 8C1.3335 4.3181 4.31826 1.33333 8.00016 1.33333C11.6821 1.33333 14.6668 4.3181 14.6668 8Z", stroke: "#B51726", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" })))), index.h("div", { key: '22c805cb2ea9fba08f5b4e641a8a7e40b8047cfc', class: "text-container" }, index.h("textarea", { key: 'daf663b158090a3049d112b3a09b1d3d705811ec' }, this.showPlaceholder && (index.h("div", { key: '16f1909688bde8917df4eab9bfd77fab3c9d4bd0' }, this.placeholder)))))), this.showHintText && (index.h("div", { key: 'c37283a8e34852d685fda114f49f53c3e669f552', class: "hint-text" }, this.hintText))));
     }
 };
 GbRichText.style = GbRichTextStyle0;

package/dist/cjs/gb-scrollbar.cjs.entry.js

@@ -13,7 +13,7 @@ const GbScrollbar = class {
         this.length = '25%';
     }
     render() {
-        return (index.h("div", { key: '28f02133e1a87048086be1c89b04581290649ec1', class: "scrollbar-container" }, index.h("div", { key: '5abfcb4961ce0cac429ad88961f34d31217fb290', class: "scrollbar", style: { height: this.length } }, index.h("slot", { key: '48a8f586e42b133fbe4836ed3050df3695549c89' }))));
+        return (index.h("div", { key: '07e8ec2ff2a1f7c53cec5b4cff5a1fbe0faa99f6', class: "scrollbar-container" }, index.h("div", { key: '5483410a8af9456cd6f719d5c113b83b6c9abd08', class: "scrollbar", style: { height: this.length } }, index.h("slot", { key: 'de07fc69eb4803455e3b0b02035c078b66f42a73' }))));
     }
 };
 GbScrollbar.style = GbScrollbarStyle0;

package/dist/cjs/gb-toggle.cjs.entry.js

@@ -43,7 +43,7 @@ const GbToggle = class {
         }
     }
     render() {
-        return (index.h("div", { key: 'a29118d6e08477273156e03378bed7d1fbe5356f', class: `toggle_div ${this.size}` }, index.h("div", { key: '006867fc0818ea3b66fad0309ed85053ad3131e2', class: "toggle_base" }, index.h("gb-toggle-base", { key: '3593ae37ba2a69c63f9f6e4f00265dfe489bda28', size: this.size, state: this.state, pressed: this.pressed })), this.text && (index.h("div", { key: '8b6d5df3e318d0d06f141b77770bafa585523721', class: "text" }, index.h("slot", { key: '4ce467de7d71e247dd0569f5303bbb3f8928a500', name: "main_text" }), this.supportingText && (index.h("slot", { key: 'e72f956ad1f5e26ddef145b3df97533a67d007e7', name: "supporting_text" }))))));
+        return (index.h("div", { key: '4680231e8be8ce04a7370335987a990343a3b070', class: `toggle_div ${this.size}` }, index.h("div", { key: '42d078c3486135f0b1dc9267fabcf47a7b905724', class: "toggle_base" }, index.h("gb-toggle-base", { key: '27f4f9a4d1e2d9115574a2e4d3a1bb2ed7721b48', size: this.size, state: this.state, pressed: this.pressed })), this.text && (index.h("div", { key: '24cd4a5953914f713f95e3639a86e2715123dd03', class: "text" }, index.h("slot", { key: 'f183462d89ce46353c1f37e4ddc2f9aff43b17b2', name: "main_text" }), this.supportingText && (index.h("slot", { key: '7c2a9aa26c61ab8822c73c6035e424637349d847', name: "supporting_text" }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/gb-token-field.cjs.entry.js

@@ -18,7 +18,7 @@ const GbTokenField = class {
         this.supportingText = '';
     }
     render() {
-        return (index.h("div", { key: '613520fa0fbf3b2798d34c4c8adf422c157658fa', class: this.size }, index.h("div", { key: '767f1058b02f8f88d63b88db05da3d94cfd6bcc9', class: "input-with-label" }, this.showLabel && (index.h("label", { key: 'e1a0048fb131dba1b7d0f9345533d8fc29559de2' }, this.label)), this.digits === 4 && (index.h("div", { key: 'cf536ff50a54cb55870cea021e86f86c1f1456c3', class: "input-wrapper" }, index.h("gb-megainput-field", { key: '92463a22e2b246f09bb98469e985196bed905733', size: this.size }), index.h("gb-megainput-field", { key: 'db799004d7d79a10a908675875dbb04cb01209c2', size: this.size }), index.h("gb-megainput-field", { key: '81c4ccd174b9089e0b00e625041e47e19f9597a9', size: this.size }), index.h("gb-megainput-field", { key: 'b9f7711a37b85dec28d13b1d57e9972cdce34ea7', size: this.size }))), this.digits === 6 && (index.h("div", { key: 'a706e6ff0cd7ed683bf1fb33e9c66a42aba51c8b', class: "input-wrapper" }, index.h("div", { key: '388497e3e7667dc9dd7e3e5da9792fc14f8857c6', class: "first=section" }, index.h("gb-megainput-field", { key: 'ef58a783bcfcea2522958b20d9240f42381e5db2', size: this.size }), index.h("gb-megainput-field", { key: '2146e1160154fd8cec2c211f6325b4ef167c408b', size: this.size }), index.h("gb-megainput-field", { key: 'f84b5863fa7d2c46f55a6883141ef9c5da1f10d9', size: this.size })), index.h("div", { key: '1e5da9a17971678fc4cf23494f8149434ef775da', class: "second=section" }, index.h("gb-megainput-field", { key: '9fa8df3127a2191a9694ac2c89cd29ea48b5b6b2', size: this.size }), index.h("gb-megainput-field", { key: '037cc806634d48a8374d8e01605e456f0a79a593', size: this.size }), index.h("gb-megainput-field", { key: '5b8fd1451da5a98b49685d01403d805fe8693426', size: this.size })))), this.digits === 8 && (index.h("div", { key: 'ca116ffdee4900f34db430f552e6be17b72ee160', class: "input-wrapper" }, index.h("div", { key: '4749d1d6c1f97d87ee7d2889cebe42f80df1bdbf', class: "first=section" }, index.h("gb-megainput-field", { key: '3310b171e2f88185530f92d8a6949fca76095a27', size: this.size }), index.h("gb-megainput-field", { key: '2ac4b2c35018601da93d0ec3fa8d17b25e51eefb', size: this.size }), index.h("gb-megainput-field", { key: 'b2899da7bef2fd505cc869e83cbb0fc0632c09ed', size: this.size }), index.h("gb-megainput-field", { key: 'a994dff9543611c4fce59c6761ac4b6f54e53816', size: this.size })), index.h("div", { key: 'a7d60f0fc5795ac49356101e98cf4e046a4c2ccc', class: "second=section" }, index.h("gb-megainput-field", { key: 'e961d59bfd0dad0e893215e56421da53799795d9', size: this.size }), index.h("gb-megainput-field", { key: '4fc45105310302ead60a83203d5134085d88fee8', size: this.size }), index.h("gb-megainput-field", { key: '670fcaab96b456e63ba65ed3b2611a60d70217db', size: this.size }), index.h("gb-megainput-field", { key: '3eaee53fd7ca336edaf27aa0e963dfa1a0008af8', size: this.size }))))), index.h("p", { key: '257aac88869ca468b99aa1f0448afa5efd3c3dc8' }, this.supportingText)));
+        return (index.h("div", { key: '4d118a5b1bee57a706a4bf73e550588941ebdbbf', class: this.size }, index.h("div", { key: '3303233df6addbbde11713a7c9c63a0f25338361', class: "input-with-label" }, this.showLabel && (index.h("label", { key: 'd9552b27dc4570ab5e07e5751a24c450041c09ad' }, this.label)), this.digits === 4 && (index.h("div", { key: 'cd950936ff4254baf9c65dd49ff8ebe0ec66d5b1', class: "input-wrapper" }, index.h("gb-megainput-field", { key: '2ae2ca3f677f3075b5994e4c7172f156754035fc', size: this.size }), index.h("gb-megainput-field", { key: '745201255b5f3f657241a0109e6aa6e0e604e633', size: this.size }), index.h("gb-megainput-field", { key: '4ee5dfdb38ffc3d95d0a114e23b247a9fe43d159', size: this.size }), index.h("gb-megainput-field", { key: '50dd6854f4e5467c1a06cc0f66711369083c7663', size: this.size }))), this.digits === 6 && (index.h("div", { key: '687d155a1ddaf5cec3486a8c4d9cd4e4c641b177', class: "input-wrapper" }, index.h("div", { key: '90e0c9e547af07a0cdfaff3f72639d61fb9f3adf', class: "first=section" }, index.h("gb-megainput-field", { key: '594eaf7beab206d63a06e0a71f040464e5de86f1', size: this.size }), index.h("gb-megainput-field", { key: '272b135500bace1ee3090a0fd04677768c22a46d', size: this.size }), index.h("gb-megainput-field", { key: 'fd7158f315c0bb3e6111a096cfc1af69ac0bcdd7', size: this.size })), index.h("div", { key: '8a3f60a0623550775f71c8e471a2d71fc570981b', class: "second=section" }, index.h("gb-megainput-field", { key: '2baabe369ee992c688b0ce81d18d189e09c5200a', size: this.size }), index.h("gb-megainput-field", { key: 'fdb9d212c1b86ee3094eb0617b04dacadfda604c', size: this.size }), index.h("gb-megainput-field", { key: 'bb42f658f1076b72145d3e70cab47742dfc2a7c6', size: this.size })))), this.digits === 8 && (index.h("div", { key: '1d4e71a2e6e9002cd650860a60a4eab14c5e75a8', class: "input-wrapper" }, index.h("div", { key: 'f09edf9dbd3d217a333ff140b5475377dfab7683', class: "first=section" }, index.h("gb-megainput-field", { key: 'ce9f6e7e7add6ce0439ce8524c119319521e6b5e', size: this.size }), index.h("gb-megainput-field", { key: '3f69b53fe602294f218a31d050c237938baecaf4', size: this.size }), index.h("gb-megainput-field", { key: 'bc496bed28f844210722d405b01f251465189bd4', size: this.size }), index.h("gb-megainput-field", { key: '9cf0b142d7437aa00b4a203de9fb331e5b574217', size: this.size })), index.h("div", { key: 'bac95263e070b4697b733e2075cfe1f9b9d0b503', class: "second=section" }, index.h("gb-megainput-field", { key: 'a324edc4e2a4850718d17ed54a2580d211c812ce', size: this.size }), index.h("gb-megainput-field", { key: '83c8327cbb59c1e546bc81a5524733a10353ac95', size: this.size }), index.h("gb-megainput-field", { key: '7c65c35d52bf41bd9206385f18044867360b6b5f', size: this.size }), index.h("gb-megainput-field", { key: '22b5efc1f580653245f56950f2bca0e8f4ca9d37', size: this.size }))))), index.h("p", { key: '6706196e964f996e98aeea4227686845a31a118b' }, this.supportingText)));
     }
 };
 GbTokenField.style = GbTokenFieldStyle0;

package/dist/cjs/gb-verification-code-field.cjs.entry.js

@@ -18,11 +18,11 @@ const GbVerificationCodeField = class {
         this.hintText = '';
     }
     render() {
-        return (index.h("div", { key: '1c19fb4ca47925943de30ea61858ce91523a89b0', class: {
+        return (index.h("div", { key: 'a05ec9b8e5b0fc17453829ab3c1a9f1b068b6134', class: {
                 container: true,
                 [this.size]: true,
                 [this.digits]: true,
-            } }, index.h("div", { key: 'aaff5b9dba6a995b3c5382c597be108ccb5d5308', class: "input-with-label" }, this.showLabel && (index.h("label", { key: '8a407e89220710f0a891b585e25c376afe6157e0', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (index.h("div", { key: 'c2adbb83ee9794e7931ac6a0af24c8ec08d7db62', class: "input-wrapper" }, index.h("gb-megainput-field", { key: 'afdbee5f91c9ac7e3e24be9e28f1c41f6386cde2', size: this.size }), index.h("gb-megainput-field", { key: 'e3a5e35bd1e0a3691fe2100bddc3cdc67611c655', size: this.size }), index.h("gb-megainput-field", { key: '18efba73ed3a57f4b073e39dee36ef549d43e53c', size: this.size }), index.h("gb-megainput-field", { key: 'eb58281dab6a2d2292f4d27cd62af7e71956b774', size: this.size }))), this.digits === 6 && (index.h("div", { key: 'a4fc7678f57f0ee755fde83e2fdea22a6d9f25fb', class: "input-wrapper" }, index.h("gb-megainput-field", { key: 'dab142a3ba82713967a387163396dcceef0ba93b', size: this.size }), index.h("gb-megainput-field", { key: '900b5ed92e3bebb7baa2eac51d3cd52b2f4f104d', size: this.size }), index.h("gb-megainput-field", { key: '3b691892736e3a3effc68fd18ab2c5786ccfa334', size: this.size }), index.h("p", { key: '561f1bb826262855939f468203fe1ab140d44ad4', class: "line display-sm-bold" }, "-"), index.h("gb-megainput-field", { key: '9f029531de00f08128f1f2f9eee0e3538e09252b', size: this.size }), index.h("gb-megainput-field", { key: 'de00b8b12cb92b5a1cd59f022ca1591321fd79db', size: this.size }), index.h("gb-megainput-field", { key: 'f83c30c730134a02e983bacd88cfd5bcdb00fc0b', size: this.size }))), this.digits === 8 && (index.h("div", { key: 'a2c76271f6f7e813634f1193c19c6b3bb30012f3', class: "input-wrapper" }, index.h("gb-megainput-field", { key: 'c2338ce8dd2c9637b86b4b60e7096918d85abcb6', size: this.size }), index.h("gb-megainput-field", { key: '0455d532b0bb6bf866513e6154c1bb55eb7a8354', size: this.size }), index.h("gb-megainput-field", { key: '289eb7fb8d0ecd222bc4d78a746c9a5dfdaad852', size: this.size }), index.h("gb-megainput-field", { key: 'eb7d6ab5f244e2de552800d5e857c93ce730668c', size: this.size }), index.h("p", { key: '457c3c26cbf26b411e83994d9ddad74b39d9ff57', class: "line display-sm-bold" }, "-"), index.h("gb-megainput-field", { key: 'f5e45a4b374fba906128b238aa622b4b2d737fea', size: this.size }), index.h("gb-megainput-field", { key: '063b9ff18a2d2c899068d7cdd600e0d08061956c', size: this.size }), index.h("gb-megainput-field", { key: '28e254336bd72d7ff1b65e4212a91919abaf6ee8', size: this.size }), index.h("gb-megainput-field", { key: '2c2e8f3d2786dd460e432fb7fc749e19b6899be8', size: this.size })))), this.showHintText && (index.h("div", { key: '16cb1590ed71c05a69ddd8f135a30890bb0d4b95', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
+            } }, index.h("div", { key: 'e045687750b5117339f0e145912b9e59d6575fc5', class: "input-with-label" }, this.showLabel && (index.h("label", { key: '4ac106c1aeaeea97e6237855d6455b1a02c3dbc5', class: "text-sm-medium", style: { color: 'var(--color-text, #4B5565)' } }, this.label)), this.digits === 4 && (index.h("div", { key: '8f98d0d0123ffe71ba587819aa1582469eabd479', class: "input-wrapper" }, index.h("gb-megainput-field", { key: '9593cbf554fe42f1a609707864640697678e67a8', size: this.size }), index.h("gb-megainput-field", { key: '910770cc61eb5cf81af9818ebeab0dd5e4b60765', size: this.size }), index.h("gb-megainput-field", { key: 'da1b97293a2a9792b9b955454374a98eb7d687de', size: this.size }), index.h("gb-megainput-field", { key: '084defc3f3d4eab7e711ee68e51a5499bf1fec7b', size: this.size }))), this.digits === 6 && (index.h("div", { key: '77bc16e181b3289d46333e793f86db04954283cd', class: "input-wrapper" }, index.h("gb-megainput-field", { key: '9b4f1a26a52967dde7940b8b37977c1bb1b81a99', size: this.size }), index.h("gb-megainput-field", { key: '908d2b0e303d61465f85e03445e58ff82918e207', size: this.size }), index.h("gb-megainput-field", { key: 'a49c24304405a04b6ecf6d4a8ff6956ac932deae', size: this.size }), index.h("p", { key: '4cde42b48d2fbc0f7ea9fab3501170ed26c40c29', class: "line display-sm-bold" }, "-"), index.h("gb-megainput-field", { key: 'e9ae586acfd3e1d24aa11aa414d8bdce81f93d21', size: this.size }), index.h("gb-megainput-field", { key: '8af38564a0e732f0f234f1096f01f18a89ff61b3', size: this.size }), index.h("gb-megainput-field", { key: '87537c69ade596f6affb9ebf5806287c85cc3b2a', size: this.size }))), this.digits === 8 && (index.h("div", { key: '6c23f67f0f1c5313fdedfe9b832f86bd0f90e42a', class: "input-wrapper" }, index.h("gb-megainput-field", { key: 'eaf9c4755dae9fb9492028a8ac373b442a344b2e', size: this.size }), index.h("gb-megainput-field", { key: '4dc1c1d8b22f33c2b23da264ab4ff234cc726f15', size: this.size }), index.h("gb-megainput-field", { key: '6879402806d970bc08d7540c867514d98093f9ad', size: this.size }), index.h("gb-megainput-field", { key: '91148d0e4590775c4167b7152828998e751f8b2e', size: this.size }), index.h("p", { key: '3ccb209b2b95861ce1ebea6c1de81d99011ee8c3', class: "line display-sm-bold" }, "-"), index.h("gb-megainput-field", { key: '610a7dcdbba625cee9f6465eb924b49cb3f72f5c', size: this.size }), index.h("gb-megainput-field", { key: 'e0cf8d3d6540bee90b26baf3816e40e8855bcb33', size: this.size }), index.h("gb-megainput-field", { key: '578b2ffa21822bc9f518a37bb699c389806d5288', size: this.size }), index.h("gb-megainput-field", { key: '8ffd762dc08c4983127acf16f54bb756888a4ab2', size: this.size })))), this.showHintText && (index.h("div", { key: '6d7646100440350a4f4e7ba74a2332dcf1700bb9', class: "text-sm-regular", style: { color: 'var(--color-text-subtle, #697586)' } }, this.hintText))));
     }
 };
 GbVerificationCodeField.style = GbVerificationCodeFieldStyle0;

package/dist/cjs/test-input-tag.cjs.entry.js

@@ -84,7 +84,7 @@ const TestInputTag = class {
         this.exportValue.emit(this.selectedStaff);
     }
     render() {
-        return (index.h("div", { key: 'd5cb3735c59d7892cafef8f195833b354d7c2d69', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: 'a15cdc9751ba206cf23e47475586d911cc6602bc', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: '84b4b3bf59cdae6368d07e4248cb9d47a8a4542c', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: '6985f517a5c0b632fe88e371fc234561cd526ead', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), index.h("div", { key: 'c2982c7e326b70add132c6e7b8dd7af87f4a3a7d', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index$1) => (
+        return (index.h("div", { key: 'f7a65bb33cdb631aac071a91f003c6fc627cabf0', class: "input_group", ref: el => (this.inputGroupElement = el) }, index.h("label", { key: 'ce5fff49d02a26bce59ca2ef328d6dbbf8b7c96d', htmlFor: this.idOfInput }, this.labelText), index.h("div", { key: '88414f0d44de2fdda683ad4f82bdc60403f4a949', class: "input_like_parent", onClick: () => (this.dropdownOpen = !this.dropdownOpen) }, index.h("input", { key: 'a1eb0d5a27810e9654b256f12368dc54265f96b3', id: this.idOfInput, class: "input_like", type: "text", placeholder: this.placeholderText, value: this.inputValue, readOnly: this.isReadOnly, ref: el => (this.inputElement = el), onBlur: () => this.exportSelectedStaff() }), index.h("div", { key: '954cc7f2cf467dc8f9821e718eb58e7d4ef0f6e2', class: `results_display ${this.selectedStaff.length >= 1 ? 'show_results' : ''}`, ref: el => (this.resultsDisplayElement = el) }, this.selectedStaff.map((staff, index$1) => (
         //   <span>
         //     {staff.fullname}
         //     <img
@@ -93,7 +93,7 @@ const TestInputTag = class {
         //       onClick={() => this.removeStaff(index)}
         //     />
         //   </span>
-        index.h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index$1) }, index.h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, staff.fullname.split(' ')[0])))))), this.show && (index.h("div", { key: 'f8e12b457f121baf9f76d3e641ed6e830e4c8b00', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
+        index.h("gb-tag", { size: "sm", action: "X_close", icon: "avatar", onClick: () => this.removeStaff(index$1) }, index.h("h1", { slot: "initials" }, staff.fullname.split(' ').map(part => part.charAt(0).toUpperCase())), index.h("p", null, staff.fullname.split(' ')[0])))))), this.show && (index.h("div", { key: 'ebf9e70df251b3c5b607671e3755d9b2584f3082', class: `dropdown_menu ${this.show ? 'show' : ''}` }, this.staffInfo.map(staff => (
         //   <li class="aList" onClick={() => this.selectStaff(staff)}>
         //     <div>{staff.fullname}</div>
         //     <div>{staff.email}</div>

package/dist/collection/components/gb-input-dropdown/gb-input-dropdown.css

@@ -2661,6 +2661,7 @@
 
 .input_dropdown_div{
     display: flex;
+    justify-content: space-between;
     align-items: center;
     border-radius: 0.5rem;
     gap: var(--spacing-3);
@@ -2726,13 +2727,17 @@
     display: flex;
     align-items: center;
     gap: var(--spacing-2);
-    width: 100%;
+    /* width: 2rem; */
+    max-width: 100%;
     white-space: nowrap;
 }
 
 .content{
     display: flex;
     gap: var(--spacing-2);
+    overflow: hidden; /* Clip overflowing content */
+    /* width: 50px; */
+    flex: 1 0 0;
 }
 
 .text.tag{
@@ -2890,4 +2895,33 @@ svg.disabled path{
 
 .message{
     color: var(--color-text-bold, #202939);
-}
+}
+
+.text{
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-2);
+    flex: 1 1 auto; /* Allow it to grow and shrink */
+    overflow: hidden; /* Prevent content from overflowing */
+}
+
+.selected_text{
+    overflow: hidden; /* Hide overflowing text */
+    text-overflow: ellipsis;
+    white-space: nowrap; /* Prevent wrapping */
+    flex: 1 1 auto; /* Take up available space and adjust dynamically */
+    min-width: 0; /* Ensures it respects parent width in flexbox */
+}
+
+/* .new_div{
+    background: red;
+    display: flex;
+    flex: 1 0 0;
+    justify-content: space-between;
+} */
+
+/* .icon_and_text{
+    background: purple;
+    display: flex;
+    flex: 1 0 0;
+} */

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

@@ -25,12 +25,13 @@ export class GbInputDropdown {
         // 'Deactivated',
         ];
         this.value = [
-        // { name: 'Mock Item A', username: 'A', selected: false },
-        // { name: 'Mock Item B', username: 'B', selected: false },
-        // { name: 'Mock Item C', username: 'C', selected: false },
-        // 45, 50, 20, 25, 90,
-        // 'Activated',
-        // 'Deactivated',
+            // { name: 'Mock Item A', username: 'A', selected: false },
+            // { name: 'Mock Item B', username: 'B', selected: false },
+            // { name: 'Mock Item C', username: 'C', selected: false },
+            // 45, 50, 20, 25, 90,
+            // 'Activated',
+            // 'Deactivated',
+            'Transaction Status'
         ];
         this.supportingText = false;
         this.color = undefined;
@@ -254,18 +255,18 @@ export class GbInputDropdown {
         const emptyStateBackground = getAssetPath('assets/empty-state-background.svg');
         const illustration = getAssetPath('assets/empty-state-no-data.svg');
         return [
-            h("div", { key: 'b4b15d4f58d61cbe45869eb89aa89c975bc1fa60', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: 'a215fa3db19f217c3d2e13e50b515c398c0bb428', class: `input_with_label` }, this.showLabel && (h("p", { key: '7eedeb0c9f580d61df4b692e5f18c91468001a83', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), h("div", { key: '2e5b64fc8b4970b886e2046b35431a1099e68e2a', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: 'c71981af4f7e4b3a4cc2507190e9e6d25a8f306d', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'f10ac6e511d7ec725c7da249c4ab8fd9309ed6e5', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), h("path", { key: 'fa6bd8b02129ff2a0d54cd2c1a2e4dbc5ee2e64a', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: '5f1eeba20a34aeead03d2b623b7e3541c8a56c11', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: 'bb2c98108ad82a7fd4a693920e36d11b24f57941', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '3b54df8e335c625daeef62385b3155f80d2e179d', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: '2a96424127281bd1f8e95bf106aae9b2d31dcf8d', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: 'ec53834c431d05ccb12cc0a1dc2b5e93b1e27166', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: 'fd1e6ce5950324d64f7d6744db1444341642d0aa', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: 'bd41f559c4e32be7cef28b5fc7d6d1cdc83c99e7', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h("div", { key: '1c010ee705eb3c0a57ba58b3e127f38c89659473', class: "placeholder" }, h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: '878e539ec7a4c0cb7efb844b58f44a75ef4381b8', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: 'eff2ab64014e280b87ce9e89dde97f560ae70b7f', class: `content` }, h("div", { key: '2954fcae2ffcf4ec278b0a3f7fc1f2d5e5a5fbda', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+            h("div", { key: 'baa0a6ce7a592fccd8e2388aa72c6c0acc73cf71', class: `input_dropdown_container ${this.type === 'tags' ? 'tag' : ''}` }, h("div", { key: '19df13f30611fd1ce5b33887cf104e796492b13c', class: `input_with_label` }, this.showLabel && (h("p", { key: 'b4640b03cbfde10b3f3f83bb192945b00984e147', class: "text-sm-regular", style: { color: '#4B5565' } }, this.label.charAt(0).toUpperCase() + this.label.slice(1).toLowerCase())), h("div", { key: '3ada3455bf0779282e53ba96343eb598772eb5b9', class: `input_dropdown_div ${this.size} ${this.state} ${this.type === 'tags' ? 'tag' : ''}`, onClick: e => this.toggleDropdown(e) }, this.type === 'icon_leading' && (h("svg", { key: '7856b32050d7b2830c5ba1644ff1459cddb29405', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '104cd3ec1a7dd0589fd81f00482cbd547c10c5aa', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#697586", "stroke-width": "1.66667" }), h("path", { key: '90204af85f1714da93b01c8c7b648ccde91fc2fb', d: "M13.75 5.41667C13.75 7.48774 12.0711 9.16667 10 9.16667C7.92893 9.16667 6.25 7.48774 6.25 5.41667C6.25 3.3456 7.92893 1.66667 10 1.66667C12.0711 1.66667 13.75 3.3456 13.75 5.41667Z", stroke: "#697586", "stroke-width": "1.66667" }))), this.type === 'avatar_leading' && (h(Fragment, null, this.state === 'default' && (h("svg", { key: 'e526618379719be98e024ba4569d3f1ccf71f35b', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none" }, h("path", { key: '9b1fc31c0bd99fe6f2ef0d5413078a1fc617ad65', d: "M5.48131 12.9013C4.30234 13.6033 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3333 6.32572 18.3333H13.6743C14.9621 18.3333 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6033 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z", stroke: "#4B5565", "stroke-width": "1.66667" }), h("path", { key: '71590c77d475511ee949b2d64c3f266d0873d570', d: "M13.75 5.41666C13.75 7.48772 12.0711 9.16666 10 9.16666C7.92893 9.16666 6.25 7.48772 6.25 5.41666C6.25 3.34559 7.92893 1.66666 10 1.66666C12.0711 1.66666 13.75 3.34559 13.75 5.41666Z", stroke: "#4B5565", "stroke-width": "1.66667" }))), this.state === 'filled' && (h("gb-avatar", { key: '27d83d5cfbf1c9d2b2570d03e22599c61fb57cd1', size: "xs", text: this.text, color: this.color, "show-border": this.showBorder }, h("h1", { key: '8761789e9967def6a338f03cbdb7cfb09a01cb5b', slot: "initials" }, this.selectedItem.name.split(' ').map(part => part.charAt(0).toUpperCase())))))), this.showLeadingIcon && h(Fragment, null, this.type === 'search' || this.type === 'tags' ? h("div", { class: `icon`, innerHTML: this.leadingIconSvg }) : null), this.type === 'dot_leading' && (h("svg", { key: '87ac0f9bf4644cf2a83e37d220451f64ab2720f8', xmlns: "http://www.w3.org/2000/svg", width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", class: `dot ${this.size}` }, h("circle", { key: 'd9e9fb5e369a39ac3b3e3b23bd36dab5016624b8', cx: "5", cy: "5", r: "4", fill: "#079455" }))), h(Fragment, null, this.state === 'default' && (h(Fragment, null, this.placeholder && (h("p", { key: '28acf3f160d3a483d045be40df111e0a68ce58b5', class: "text-md-regular", style: { color: '#CDD5DF' } }, this.placeholder)))), this.state === 'filled' && (h(Fragment, null, h("div", { key: '67cb2bd5379286eaf5fdca03f3c73e3be513ae6a', class: `content` }, h("div", { key: 'a2dbd0810a3b53a302e820f73fbe246b92369529', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, this.selectedItems.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
                 .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
-                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h(Fragment, null, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '8bf4b7581b0f0cfba8a893d8edc9930b16f40da7', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && item.username)))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: 'a7ded872585887f290f7e07912fa0e30cb1f4289', class: `content` }, h("div", { key: 'd150df54e4641c9210fa934287171e6b53947f53', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close", onClick: () => this.handleTagRemove(item) }, h("p", { class: "text-xs-medium" }, item))))))))) : (h("p", { class: "selected_text" }, this.value.length === 0 ? ((_a = this.selectedItem) === null || _a === void 0 ? void 0 : _a.name) || this.selectedItem : h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '7ce8737254577727e07d15d3fa1186a85a38c9c8', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && item.username)))))))))), this.state === 'disabled' && (h(Fragment, null, h("div", { key: '555d3b06ab2dd1c9eef96d7507a77bee00ead2b8', class: `content` }, h("div", { key: 'c4f6128a23b56be55e6db5e3515727d3e408fa51', class: `text text-md-regular ${this.type === 'tags' ? 'tag' : ''}`, style: { color: '#4B5565' } }, this.type === 'tags' ? (h(Fragment, null, this.value.map((item, index) => typeof item === 'object' ? (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item.name.split(' ')[0]), h("h1", { slot: "initials", class: "text-xxs-semi-bold" }, item.name
                 .split(' ')
                 .map(part => part.charAt(0).toUpperCase())
-                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '3d8155ac9d4ca6715db826ab5bd490ef2c0d68d3', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && (h(Fragment, null, "@", item.username)))))))))))))), this.showHelpIcon && (h("div", { key: '156073ab039ea0b7f5207ceef8194a1062795b88', class: `help_icon` }, h("gb-help-tooltip", { key: '7229dfa7d6ada4c7feeb63a9cbf7ba63e88c5859', "show-supporting-text": true }, h("slot", { key: '14597a36dcc34cb72ca08ada56571f7086c9b8eb', name: "tooltip_label", slot: "label" }), h("slot", { key: '8179760a2bc270a41962dcadd0fb1feb3c28167c', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '8dd0f58a78cf3273d210d96566a800b21a50b41c', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: '645651158917d1df8cad8c5135a985a2f8c06875', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: '32097690cf77f13a3dec316d568976131d54b138', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: 'dbf3fcf35634c70998963a7ecbec1eac20c69834', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: '6500780d1efd6261077712304811e3c50c2976e5', class: "dropdown_search_field" }, h("gb-input-field", { key: '56a7a72ef9a9b71d28b9c6ec7bbf429e3cb8c373', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: "Search banks", type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItems.bind(this) }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
+                .join(''))))) : (h("div", { class: "added_tag", key: index }, h("gb-tag", { size: "sm", icon: this.icon ? this.icon : 'avatar', action: "X_close" }, h("p", { class: "text-xs-medium" }, item))))))) : (h(Fragment, null, h(Fragment, null, this.value.map(item => (typeof item === 'object' ? item.name : item)))))), this.supportingText && (h("div", { key: '8c1af1b4d1aba36d25d988da6a73ecd3febf4d25', class: "supporting_text text-sm-regular", style: { color: '#697586' } }, this.type !== 'tags' && (h(Fragment, null, this.value.length === 0 ? (h(Fragment, null, "@", this.selectedItem.username)) : (h(Fragment, null, this.value.map((item) => typeof item === 'object' && (h(Fragment, null, "@", item.username))))))))))))), this.showHelpIcon && (h("div", { key: 'b67eac40ebae53f9bdc31ff7f27ce700a74eecd3', class: `help_icon` }, h("gb-help-tooltip", { key: 'e8fdbae58419f15afd5b90772fb9b7b132ed791c', "show-supporting-text": true }, h("slot", { key: 'da092911cefc1ef6347c54ab47aff1c29ebddd67', name: "tooltip_label", slot: "label" }), h("slot", { key: '6a7623923dec94b57328694eac553a6b812a53c9', name: "tooltip_supporting_text", slot: "supporting_text" })))), this.type !== 'search' && (h("div", { key: '7800f571b143bb8b662f07d93cd04bb89a16b4f0', class: `dropdown_icon ${this.dropdownOpen ? 'opened' : ''}` }, h("svg", { key: 'ea690d9948eb8b2b1f1900347a0751563e448ad1', xmlns: "http://www.w3.org/2000/svg", width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", class: `${this.state}` }, h("path", { key: 'f839400110d13baa25ed56176804816ffa5857c3', d: "M15 7.50004C15 7.50004 11.3176 12.5 9.99996 12.5C8.68237 12.5 5 7.5 5 7.5", stroke: "#697586", "stroke-width": "1.66667", "stroke-linecap": "round", "stroke-linejoin": "round" })))), h(Fragment, null, this.dropdownOpen && (h("div", { key: '93949b44fe40172d20980dbd61eb1a2effe9b3e8', class: `dropdown_menu ${this.menuPosition}`, ref: el => (this.dropdownRef = el), onClick: e => e.stopPropagation() }, this.showSearchInput && (h("div", { key: '3b08aba365fa4f42d49324ffc0be48d4fd0f8228', class: "dropdown_search_field" }, h("gb-input-field", { key: '2e0641aff7f22e127730cd0447751cb381f34c7f', size: "sm", value: this.inputValue, "show-close-button": this.inputValue ? true : false, "icon-swap": "assets/search-01.svg", placeholder: "Search banks", type: "icon_leading", labelText: "label", idOfInput: "3", onInputValueChanged: this.searchItems.bind(this) }))), this.searchItem ? (h(Fragment, null, this.searchItem !== '' && this.searchResults.length > 0 ? (h(Fragment, null, this.searchResults.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))))) : this.searchItem !== '' && this.searchResults.length === 0 ? (
             //Empty state for when there are no search results
-            h("div", { class: "empty_state" }, h("img", { src: emptyStateBackground, class: "background", alt: "" }), h("div", { class: "message_background" }, h("img", { src: illustration, alt: "", class: "illustration" }), h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (h(Fragment, null, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))))) : (h(Fragment, null, this.items.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (typeof item !== 'object' && h("p", { slot: "name" }, item)))))))))))))), this.showHintText && (h("p", { key: 'a573ac9dc29c81bc73349fc8fe147a3ef9fdf80f', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
+            h("div", { class: "empty_state" }, h("img", { src: emptyStateBackground, class: "background", alt: "" }), h("div", { class: "message_background" }, h("img", { src: illustration, alt: "", class: "illustration" }), h("p", { class: "message text-md-semi-bold" }, "No results available")))) : null)) : (h(Fragment, null, this.type === 'tags' ? (h(Fragment, null, this.selectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: true, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))), this.unselectedItems.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: false, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (h("p", { slot: "name" }, item))))))) : (h(Fragment, null, this.items.map(item => (h("gb-input-dropdown-menu-item", { type: this.type === 'search' ? 'checkbox' : this.type === 'tags' ? 'checkbox' : this.type, state: StateEnum.Default, "supporting-text": this.supportingText, selected: this.isItemSelected(item), color: this.color, onClick: () => this.handleItemSelect(item) }, typeof item === 'object' ? (h(Fragment, null, h("p", { slot: "name" }, item.name), h("p", { slot: "supporting_text" }, "@", item.username))) : (typeof item !== 'object' && h("p", { slot: "name" }, item)))))))))))))), this.showHintText && (h("p", { key: 'd37cba03e00d730a2b459b857730858f93d541c6', class: "text-sm-regular", style: { color: '#697586' } }, this.hintText))),
         ];
     }
     static get is() { return "gb-input-dropdown"; }
@@ -570,7 +571,7 @@ export class GbInputDropdown {
                     "tags": [],
                     "text": ""
                 },
-                "defaultValue": "[\r\n    // { name: 'Mock Item A', username: 'A', selected: false },\r\n    // { name: 'Mock Item B', username: 'B', selected: false },\r\n    // { name: 'Mock Item C', username: 'C', selected: false },\r\n    // 45, 50, 20, 25, 90,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n  ]"
+                "defaultValue": "[\r\n    // { name: 'Mock Item A', username: 'A', selected: false },\r\n    // { name: 'Mock Item B', username: 'B', selected: false },\r\n    // { name: 'Mock Item C', username: 'C', selected: false },\r\n    // 45, 50, 20, 25, 90,\r\n    // 'Activated',\r\n    // 'Deactivated',\r\n    'Transaction Status'\r\n  ]"
             },
             "supportingText": {
                 "type": "boolean",