globuswebcomponents 0.4.1 → 0.4.3

package/dist/collection/components/gb-password-button/gb-password-button.js

@@ -8,7 +8,7 @@ export class GbPasswordButton {
         this.isPasswordVisible = !this.isPasswordVisible;
     }
     render() {
-        return (h("div", { key: 'd820755627599e39e4443b9c956de1e601178bcd' }, h("gb-btn", { key: 'b15e7551fe0c1ebc3e6bac751d7f66c209557d6d', size: "sm", hierarchy: "link_gray", state: "default", onClick: () => this.togglePasswordVisibility() }, this.isPasswordVisible ? (h("gb-button", { size: "sm", hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "HIDE"))) : (h("gb-button", { size: "sm", hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "SHOW"))))));
+        return (h("div", { key: '1ab4abfa92a8294d9e4937a1b657be4bb4bf89a4' }, h("gb-btn", { key: 'fc9286398b70f3692e69e932a3d8f738e51dcad8', size: "sm", hierarchy: "link_gray", state: "default", onClick: () => this.togglePasswordVisibility() }, this.isPasswordVisible ? (h("gb-button", { size: "sm", hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "HIDE"))) : (h("gb-button", { size: "sm", hierarchy: "link_gray", icon: "default", state: this.state }, h("p", null, "SHOW"))))));
     }
     static get is() { return "gb-password-button"; }
     static get encapsulation() { return "shadow"; }
@@ -28,15 +28,9 @@ export class GbPasswordButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "StateEnum",
-                    "resolved": "StateEnum.Default | StateEnum.Disabled",
-                    "references": {
-                        "StateEnum": {
-                            "location": "import",
-                            "path": "../../components",
-                            "id": "src/components.d.ts::StateEnum"
-                        }
-                    }
+                    "original": "'default' | 'disabled'",
+                    "resolved": "\"default\" | \"disabled\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,

package/dist/collection/components/gb-password-button/gb-password-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-password-button.js","sourceRoot":"","sources":["../../../src/components/gb-password-button/gb-password-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ1D,MAAM,OAAO,gBAAgB;;iCACW,KAAK;;;IAG3C,wBAAwB;QACtB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,+DAAQ,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,IACnG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACxB,iBAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACzE,oBAAW,CACD,CACb,CAAC,CAAC,CAAC,CACF,iBAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACzE,oBAAW,CACD,CACb,CACM,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\r\nimport { StateEnum } from '../../components';\r\n\r\n@Component({\r\n  tag: 'gb-password-button',\r\n  styleUrl: 'gb-password-button.css',\r\n  shadow: true\r\n})\r\nexport class GbPasswordButton {\r\n  @State() isPasswordVisible: boolean = false;\r\n  @Prop() state: StateEnum;\r\n\r\n  togglePasswordVisibility() {\r\n    this.isPasswordVisible = !this.isPasswordVisible;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <gb-btn size=\"sm\" hierarchy=\"link_gray\" state=\"default\" onClick={() => this.togglePasswordVisibility()}>\r\n          {this.isPasswordVisible ? (\r\n            <gb-button size=\"sm\" hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n              <p>HIDE</p>\r\n            </gb-button>\r\n          ) : (\r\n            <gb-button size=\"sm\" hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n              <p>SHOW</p>\r\n            </gb-button>\r\n          )}\r\n        </gb-btn>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-password-button.js","sourceRoot":"","sources":["../../../src/components/gb-password-button/gb-password-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO1D,MAAM,OAAO,gBAAgB;;iCACW,KAAK;;;IAG3C,wBAAwB;QACtB,IAAI,CAAC,iBAAiB,GAAG,CAAC,IAAI,CAAC,iBAAiB,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACE,+DAAQ,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,KAAK,EAAC,SAAS,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,wBAAwB,EAAE,IACnG,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CACxB,iBAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACzE,oBAAW,CACD,CACb,CAAC,CAAC,CAAC,CACF,iBAAW,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,WAAW,EAAC,IAAI,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK;gBACzE,oBAAW,CACD,CACb,CACM,CACL,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-password-button',\r\n  styleUrl: 'gb-password-button.css',\r\n  shadow: true\r\n})\r\nexport class GbPasswordButton {\r\n  @State() isPasswordVisible: boolean = false;\r\n  @Prop() state: 'default' | 'disabled';\r\n\r\n  togglePasswordVisibility() {\r\n    this.isPasswordVisible = !this.isPasswordVisible;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div>\r\n        <gb-btn size=\"sm\" hierarchy=\"link_gray\" state=\"default\" onClick={() => this.togglePasswordVisibility()}>\r\n          {this.isPasswordVisible ? (\r\n            <gb-button size=\"sm\" hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n              <p>HIDE</p>\r\n            </gb-button>\r\n          ) : (\r\n            <gb-button size=\"sm\" hierarchy=\"link_gray\" icon=\"default\" state={this.state}>\r\n              <p>SHOW</p>\r\n            </gb-button>\r\n          )}\r\n        </gb-btn>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -2696,7 +2696,7 @@
     display: inline-flex;
     flex-direction: column;
     justify-content: space-between;
-    width: 100%;
+    width: 16.75rem;
 }
 
 .sidebar_div.collapsed{
@@ -2715,7 +2715,7 @@
 
 .sidebar_header.expanded{
     display: flex;
-    padding: var(--spacing-none) var(--spacing-4);
+    padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-6);
     justify-content: space-between;
     align-items: center;
     margin-top: 1rem;

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

@@ -4,12 +4,12 @@ export class GbTokenField {
         this.size = undefined;
         this.digits = undefined;
         this.showLabel = undefined;
-        this.label = 'Secure code';
+        this.label = '';
         this.showSupportingText = undefined;
         this.supportingText = '';
     }
     render() {
-        return (h("div", { key: 'ba6f742388a8a05fef9ceee6efff7a5de728c3de', class: this.size }, h("div", { key: '2df03ed2ae944f3c47c12e351d553eb4fa21b69e', class: "input-with-label" }, this.showLabel && (h("label", { key: 'a8b76a53e5c5350e9bfa96d38e5ea9ee9f9550e7' }, this.label)), this.digits === 4 && (h("div", { key: '19f48a27d161b2ceca9382c747852f88f19a4f76', class: "input-wrapper" }, h("gb-megainput-field", { key: '2b5f64f9f559328948ea5072b13e714ec5068ca9', size: this.size }), h("gb-megainput-field", { key: '2493e323235442f1effba97bb99b3d0293008af1', size: this.size }), h("gb-megainput-field", { key: 'ff1cea3d4bdbd430305d26d6f300602e81eb497c', size: this.size }), h("gb-megainput-field", { key: '541c126d0beb132fc0860ce91eeb17f1d05b04c2', size: this.size }))), this.digits === 6 && (h("div", { key: 'ffbd9b4a7cc4b0213bf4e2435573088aaf47d424', class: "input-wrapper" }, h("div", { key: 'd1af82f9ca3cd64cd7d2a28dbb887c7f94113611', class: "first=section" }, h("gb-megainput-field", { key: 'b860b2419d61604f9eaad9d9cdaaa108d2cd1c2d', size: this.size }), h("gb-megainput-field", { key: '815e110b663e4b9310ac722a0fa9448ba846aba9', size: this.size }), h("gb-megainput-field", { key: 'fd402168fb024ee4ccbd05a413b3ceb345dc13d1', size: this.size })), h("div", { key: 'c8d969d0bbd25ee86ec986934d81867888a263c4', class: "second=section" }, h("gb-megainput-field", { key: 'a7bd95fec767f37ebcf74020954d017c34352ccb', size: this.size }), h("gb-megainput-field", { key: '5e357db7ecc8a58b6b9b7162efa878aa19b7b5ae', size: this.size }), h("gb-megainput-field", { key: '83b332660d353a4d4ee9d30e4499aed1101dd37a', size: this.size })))), this.digits === 8 && (h("div", { key: '152abbd48b0d2f16e23d53e669aa71139f1cce3e', class: "input-wrapper" }, h("div", { key: 'a7dd290693947c7bd7dd23ac5acb8fd6ebf46521', class: "first=section" }, h("gb-megainput-field", { key: 'af26f24fb4f5cc031dd639709243beed92285d33', size: this.size }), h("gb-megainput-field", { key: '3e8cfcee6bae3d33ab60add14cfc5cac10ffc95c', size: this.size }), h("gb-megainput-field", { key: '0f95754fbaf7129744bc5737398875c885672d04', size: this.size }), h("gb-megainput-field", { key: '92af6df172fde814b3f102bbe689698ecf9322f1', size: this.size })), h("div", { key: 'f0b1e55ee80dea7136636b4c930177763efe803c', class: "second=section" }, h("gb-megainput-field", { key: '1b20c5ace66c63e8747ad27bfddb619c0db4d145', size: this.size }), h("gb-megainput-field", { key: 'ddf8ecff88a694fe98e341aa813370a1f1e3b7f1', size: this.size }), h("gb-megainput-field", { key: '834405b51e192ebc95a32441022c73251408b94a', size: this.size }), h("gb-megainput-field", { key: '07e89aa4b7048289af29d695d15de64851d29365', size: this.size }))))), h("p", { key: 'a0ecb004c06b99f0287237a86f6e1b26a025fdd0' }, this.supportingText)));
+        return (h("div", { key: 'c8a76033c65681da013deac90f54406b50279065', class: this.size }, h("div", { key: 'c09005564c629ef657b424f6b625f1fa360145b6', class: "input-with-label" }, this.showLabel && (h("label", { key: '558456fe823fb535f198aec8410adfa29f31d368' }, this.label)), this.digits === 4 && (h("div", { key: '926f54c8a07a845d0f1c9271f6a36e0ee5b715e7', class: "input-wrapper" }, h("gb-megainput-field", { key: '1ecafdf192563c80acf929b63296bab31c052227', size: this.size }), h("gb-megainput-field", { key: 'cba83c7e370e9a4a41336adbfa3e11e0350d46b6', size: this.size }), h("gb-megainput-field", { key: 'd9aafbe9146acce921aded85324ac5c9a8701dc4', size: this.size }), h("gb-megainput-field", { key: 'c5c5fcbe3649547baf38154e258c09357ae71ed1', size: this.size }))), this.digits === 6 && (h("div", { key: '788a399a2e8c8f194f40ee1f4d9c436985bbcc2b', class: "input-wrapper" }, h("div", { key: '7ac2cae00e411db3ca76b258689cb0d7cb9bcb90', class: "first=section" }, h("gb-megainput-field", { key: 'db3969d253a6338b807d5723a5c02477f9765484', size: this.size }), h("gb-megainput-field", { key: '0ffb79c3edcf45ffbbffb775047a9e0bac84662e', size: this.size }), h("gb-megainput-field", { key: 'adbe0b2c5306168eee0e283ea77be4e1b81ebe0b', size: this.size })), h("div", { key: 'c9a2da7c8846ef7678087c78e654b6b085e59b3f', class: "second=section" }, h("gb-megainput-field", { key: '434a37c61bfbdf1398c5760aecc9bacd25613b00', size: this.size }), h("gb-megainput-field", { key: '2f8a8974285e2dccea2f9063d3d9970e27e27ed2', size: this.size }), h("gb-megainput-field", { key: 'a849f897731ede16e97a38d944ac5302d247b466', size: this.size })))), this.digits === 8 && (h("div", { key: 'ca353222ea1720fd5443d8619ec8b4045692d86b', class: "input-wrapper" }, h("div", { key: 'c1361798ad265a72d7d2d696ef33a4ba5df4d4f1', class: "first=section" }, h("gb-megainput-field", { key: '003801e57588dba6f61b35dcb71049843667381a', size: this.size }), h("gb-megainput-field", { key: '12af7e784ce6bea116124d3062c74fef69178779', size: this.size }), h("gb-megainput-field", { key: 'cf569a7a8fceeb7d0a474fda67a4f6669bbcb1b8', size: this.size }), h("gb-megainput-field", { key: '96875931a7518c41aea13179b401f9daf48d26f1', size: this.size })), h("div", { key: 'a362a31d34e0c792670ac7165101c20e178cf895', class: "second=section" }, h("gb-megainput-field", { key: '6fa56a4a1c337fa6f29d94801acc72d8b71a90e4', size: this.size }), h("gb-megainput-field", { key: 'd2b2286a5194b8465e917c2eb03c0e1f53aee791', size: this.size }), h("gb-megainput-field", { key: 'e432f96cc0c294d983105fd4faceac100514267c', size: this.size }), h("gb-megainput-field", { key: '216c071c86a65df29754e526141e6c3688782b34', size: this.size }))))), h("p", { key: '0fef2ea191d54a2f162ab4e887aead975227261e' }, this.supportingText)));
     }
     static get is() { return "gb-token-field"; }
     static get encapsulation() { return "shadow"; }
@@ -98,7 +98,7 @@ export class GbTokenField {
                 },
                 "attribute": "label",
                 "reflect": false,
-                "defaultValue": "'Secure code'"
+                "defaultValue": "''"
             },
             "showSupportingText": {
                 "type": "boolean",

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

@@ -1 +1 @@
-{"version":3,"file":"gb-token-field.js","sourceRoot":"","sources":["../../../src/components/gb-token-field/gb-token-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASlD,MAAM,OAAO,YAAY;;;;;qBAIG,aAAa;;8BAEJ,EAAE;;IAEnC,MAAM;QAEF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACjB,4DAAK,KAAK,EAAC,kBAAkB;gBACxB,IAAI,CAAC,SAAS,IAAI,CACf,gEAAQ,IAAI,CAAC,KAAK,CAAS,CAC9B;gBACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAClB,4DAAK,KAAK,EAAC,eAAe;oBACtB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;oBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;oBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;oBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD,CACT;gBACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAClB,4DAAK,KAAK,EAAC,eAAe;oBACtB,4DAAK,KAAK,EAAC,eAAe;wBACtB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD;oBACN,4DAAK,KAAK,EAAC,gBAAgB;wBACvB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD,CACJ,CACT;gBACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAClB,4DAAK,KAAK,EAAC,eAAe;oBACtB,4DAAK,KAAK,EAAC,eAAe;wBACtB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD;oBACN,4DAAK,KAAK,EAAC,gBAAgB;wBACvB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD,CACJ,CACT,CACC;YACN,4DAAI,IAAI,CAAC,cAAc,CAAK,CAC1B,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-token-field',\r\n    styleUrl: 'gb-token-field.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTokenField {\r\n    @Prop() size: GeneralSizes\r\n    @Prop() digits: 4 | 6 | 8;\r\n    @Prop() showLabel: boolean;\r\n    @Prop() label: string = 'Secure code';\r\n    @Prop() showSupportingText: boolean;\r\n    @Prop() supportingText: string = '';\r\n\r\n    render() {\r\n\r\n        return (\r\n            <div class={this.size}>\r\n                <div class=\"input-with-label\">\r\n                    {this.showLabel && (\r\n                        <label>{this.label}</label>\r\n                    )}\r\n                    {this.digits === 4 && (\r\n                        <div class=\"input-wrapper\">\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                        </div>\r\n                    )} \r\n                    {this.digits === 6 && (\r\n                        <div class=\"input-wrapper\">\r\n                            <div class=\"first=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                            <div class=\"second=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                        </div>\r\n                    )}\r\n                    {this.digits === 8 && (\r\n                        <div class=\"input-wrapper\">\r\n                            <div class=\"first=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                            <div class=\"second=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                        </div>\r\n                    )}\r\n                </div>  \r\n                <p>{this.supportingText}</p>            \r\n            </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-token-field.js","sourceRoot":"","sources":["../../../src/components/gb-token-field/gb-token-field.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASlD,MAAM,OAAO,YAAY;;;;;qBAIG,EAAE;;8BAEO,EAAE;;IAEnC,MAAM;QAEF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACjB,4DAAK,KAAK,EAAC,kBAAkB;gBACxB,IAAI,CAAC,SAAS,IAAI,CACf,gEAAQ,IAAI,CAAC,KAAK,CAAS,CAC9B;gBACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAClB,4DAAK,KAAK,EAAC,eAAe;oBACtB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;oBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;oBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;oBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD,CACT;gBACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAClB,4DAAK,KAAK,EAAC,eAAe;oBACtB,4DAAK,KAAK,EAAC,eAAe;wBACtB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD;oBACN,4DAAK,KAAK,EAAC,gBAAgB;wBACvB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD,CACJ,CACT;gBACA,IAAI,CAAC,MAAM,KAAK,CAAC,IAAI,CAClB,4DAAK,KAAK,EAAC,eAAe;oBACtB,4DAAK,KAAK,EAAC,eAAe;wBACtB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD;oBACN,4DAAK,KAAK,EAAC,gBAAgB;wBACvB,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB;wBAC1D,2EAAoB,IAAI,EAAE,IAAI,CAAC,IAAI,GAAuB,CACxD,CACJ,CACT,CACC;YACN,4DAAI,IAAI,CAAC,cAAc,CAAK,CAC1B,CACT,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import {Component, Prop, h } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-token-field',\r\n    styleUrl: 'gb-token-field.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTokenField {\r\n    @Prop() size: GeneralSizes\r\n    @Prop() digits: 4 | 6 | 8;\r\n    @Prop() showLabel: boolean;\r\n    @Prop() label: string = '';\r\n    @Prop() showSupportingText: boolean;\r\n    @Prop() supportingText: string = '';\r\n\r\n    render() {\r\n\r\n        return (\r\n            <div class={this.size}>\r\n                <div class=\"input-with-label\">\r\n                    {this.showLabel && (\r\n                        <label>{this.label}</label>\r\n                    )}\r\n                    {this.digits === 4 && (\r\n                        <div class=\"input-wrapper\">\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                        </div>\r\n                    )} \r\n                    {this.digits === 6 && (\r\n                        <div class=\"input-wrapper\">\r\n                            <div class=\"first=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                            <div class=\"second=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                        </div>\r\n                    )}\r\n                    {this.digits === 8 && (\r\n                        <div class=\"input-wrapper\">\r\n                            <div class=\"first=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                            <div class=\"second=section\">\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                                <gb-megainput-field size={this.size}></gb-megainput-field>\r\n                            </div>\r\n                        </div>\r\n                    )}\r\n                </div>  \r\n                <p>{this.supportingText}</p>            \r\n            </div>\r\n        );\r\n    }\r\n}"]}