npm - globuswebcomponents - Versions diffs - 2.5.0 → 2.5.2 - Mend

globuswebcomponents 2.5.0 → 2.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (736) hide show

package/dist/collection/components/gb-btn/gb-btn.css CHANGED Viewed

@@ -2746,9 +2746,10 @@ button {
   cursor: pointer;
   border-radius: var(--rounded-sm);
   width: 100%;
+  transition: background-color 0.15s, color 0.15s;
 }
-button.only{
+button.only {
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2773,62 +2774,62 @@ button .icon svg circle {
 }
 /* Button Sizes Styles */
-button.xl2{
-  padding: var(--spacing-none) var(--spacing-6);
+button.default.xl2 {
+  /* padding: var(--spacing-none) var(--spacing-6); */
   height: 3.5rem;
   gap: var(--spacing-3);
 }
-button.xl{
-  padding: var(--spacing-none) var(--spacing-5);
+button.default.xl {
+  /* padding: var(--spacing-none) var(--spacing-5); */
   height: 3rem;
   gap: var(--spacing-2);
 }
-button.lg{
-  padding: 0.625rem 1.125rem;
+button.default.lg {
+  /* padding: 0.625rem 1.125rem; */
   height: 2.75rem;
   gap: var(--spacing-2);
 }
-button.md{
-  padding: var(--spacing-none) var(--spacing-4);
+button.default.md {
+  /* padding: var(--spacing-none) var(--spacing-4); */
   height: 2.5rem;
   gap: var(--spacing-2);
 }
-button.sm{
-  padding: var(--spacing-none) var(--spacing-3);
+button.default.sm {
+  /* padding: var(--spacing-none) var(--spacing-3); */
   height: 2.25rem;
   gap: var(--spacing-2);
 }
-button.only.xl2{
+button.only.xl2 {
   width: 3.5rem;
   height: 3.5rem;
 }
-button.only.xl{
+button.only.xl {
   width: 3rem;
   height: 3rem;
 }
-button.only.lg{
+button.only.lg {
   width: 2.75rem;
   height: 2.75rem;
 }
-button.only.md{
+button.only.md {
   width: 2.5rem;
   height: 2.5rem;
 }
-button.only.sm{
+button.only.sm {
   width: 2.25rem;
   height: 2.25rem;
 }
-button.xl2 .icon svg{
+button.xl2 .icon svg {
   width: var(--spacing-6);
   height: var(--spacing-6);
 }
@@ -2836,205 +2837,260 @@ button.xl2 .icon svg{
 button.xl .icon svg,
 button.lg .icon svg,
 button.md .icon svg,
-button.sm .icon svg{
+button.sm .icon svg {
   width: var(--spacing-5);
   height: var(--spacing-5);
 }
 /* Hierarchy Styles */
 button.primary {
-  background-color: var(--color-background-brandRed, #E21B2E);
-  --icon-color: var(--color-icon-inverse, #FFFFFF);
-  color: var(--color-text-inverse, #FFFFFF);
+  background-color: var(--color-background-brandRed, #e21b2e);
+  --icon-color: var(--color-icon-inverse, #ffffff);
+  color: var(--color-text-inverse, #ffffff);
 }
 button.secondary_gray {
   background-color: transparent;
-  border: 1px solid var(--color-border, #9AA4B2);
-  --icon-color: var(--color-icon, #4B5565);
-  color: var(--color-text, #4B5565);
+  border: 1px solid var(--color-border, #9aa4b2);
+  --icon-color: var(--color-icon, #4b5565);
+  color: var(--color-text, #4b5565);
 }
 button.secondary_color {
   background-color: transparent;
-  border: 1px solid var(--color-border-brandRed, #E21B2E);
-  --icon-color: var(--color-icon-brandRed, #E21B2E);
-  color: var(--color-text-brandRed, #E21B2E);
+  border: 1px solid var(--color-border-brandRed, #e21b2e);
+  --icon-color: var(--color-icon-brandRed, #e21b2e);
+  color: var(--color-text-brandRed, #e21b2e);
 }
 button.tertiary_gray {
   background-color: transparent;
-  --icon-color: var(--color-icon, #4B5565);
-  color: var(--color-text, #4B5565);
+  --icon-color: var(--color-icon, #4b5565);
+  color: var(--color-text, #4b5565);
 }
 button.tertiary_color {
   background-color: transparent;
-  --icon-color: var(--color-icon-brandRed, #E21B2E);
-  color: var(--color-text-brandRed, #E21B2E);
+  --icon-color: var(--color-icon-brandRed, #e21b2e);
+  color: var(--color-text-brandRed, #e21b2e);
 }
 button.link_gray {
   background-color: transparent;
-  --icon-color: var(--color-icon, #4B5565);
-  color: var(--color-text, #4B5565);
+  --icon-color: var(--color-icon, #4b5565);
+  color: var(--color-text, #4b5565);
   height: fit-content;
 }
 button.link_color {
   background-color: transparent;
-  --icon-color: var(--color-link, #075DB2);
-  color: var(--color-link, #075DB2);
+  --icon-color: var(--color-link, #075db2);
+  color: var(--color-link, #075db2);
   padding: var(--spacing-none);
   height: fit-content;
 }
 /* Button Destructive Styles */
-button.primary.destructive{
-  background-color: var(--color-background-danger, #B51726);
-  color: var(--color-text-inverse, #FFFFFF);
-  --icon-color: var(--color-icon-danger-inverse, #FFFFFF);
+button.primary.destructive {
+  background-color: var(--color-background-danger, #b51726);
+  color: var(--color-text-inverse, #ffffff);
+  --icon-color: var(--color-icon-danger-inverse, #ffffff);
 }
-button.secondary_gray.destructive, button.secondary_color.destructive{
-  border: 1px solid var(--color-border-danger, #B51726);
-  color: var(--color-text-danger, #B51726);
-  --icon-color: var(--color-icon-danger, #B51726);
+button.secondary_gray.destructive,
+button.secondary_color.destructive {
+  border: 1px solid var(--color-border-danger, #b51726);
+  color: var(--color-text-danger, #b51726);
+  --icon-color: var(--color-icon-danger, #b51726);
 }
 button.tertiary_gray.destructive,
-button.tertiary_color.destructive{
-  color: var(--color-text-danger, #B51726);
-  --icon-color: var(--color-icon-danger, #B51726);
+button.tertiary_color.destructive {
+  color: var(--color-text-danger, #b51726);
+  --icon-color: var(--color-icon-danger, #b51726);
 }
-button.link_gray.destructive,
-button.link_color.destructive{
-  color: var(--color-text-danger, #B51726);
-  --icon-color: var(--color-icon-danger, #B51726);
+button.link_gray.destructive,
+button.link_color.destructive {
+  color: var(--color-text-danger, #b51726);
+  --icon-color: var(--color-icon-danger, #b51726);
 }
 /* Button States Styles */
-button.primary:hover{
-  background-color: var(--color-background-brandRed-hover, #CC1A2A);
+button.primary:hover {
+  background-color: var(--color-background-brandRed-hover, #cc1a2a);
 }
-button.primary:active{
-  background-color: var(--color-background-brandRed-pressed, #B51726);
+button.primary:active {
+  background-color: var(--color-background-brandRed-pressed, #b51726);
 }
-button.secondary_gray:hover{
-  background-color: var(--color-background-gray-subtler, #EEF2F6);
+button.secondary_gray:hover {
+  background-color: var(--color-background-gray-subtler, #eef2f6);
 }
-button.secondary_gray:active{
-  background-color: var(--color-background-gray-subtle, #E3E8EF);
+button.secondary_gray:active {
+  background-color: var(--color-background-gray-subtle, #e3e8ef);
 }
-button.secondary_color:hover{
-  background-color: var(--color-background-danger-subtlest, #FEF1F2);
+button.secondary_color:hover {
+  background-color: var(--color-background-danger-subtlest, #fef1f2);
 }
-button.secondary_color:active{
-  background-color: var(--color-background-danger-subtler, #FDE3E5);
+button.secondary_color:active {
+  background-color: var(--color-background-danger-subtler, #fde3e5);
 }
-button.tertiary_gray:hover{
-  background-color: var(--color-background-gray-subtler, #EEF2F6);
+button.tertiary_gray:hover {
+  background-color: var(--color-background-gray-subtler, #eef2f6);
 }
-button.tertiary_gray:active{
-  background-color: var(--color-background-gray-subtle, #E3E8EF);
+button.tertiary_gray:active {
+  background-color: var(--color-background-gray-subtle, #e3e8ef);
 }
-button.tertiary_color:hover{
-  background-color: var(--color-background-danger-subtlest, #FEF1F2);
+button.tertiary_color:hover {
+  background-color: var(--color-background-danger-subtlest, #fef1f2);
 }
-button.tertiary_color:active{
-  background-color: var(--color-background-danger-subtler, #FDE3E5);
+button.tertiary_color:active {
+  background-color: var(--color-background-danger-subtler, #fde3e5);
 }
 button.link_gray:hover,
-button.link_color:hover{
+button.link_color:hover {
   text-decoration: underline;
 }
-button.link_gray:active{
+button.link_gray:active {
   text-decoration: none;
   color: var(--color-text-bold, #202939);
 }
-button.link_color:active{
+button.link_color:active {
   text-decoration: none;
-  color: var(--color-link-pressed, #064E94);
+  color: var(--color-link-pressed, #064e94);
 }
-button.primary.destructive:hover{
-  background-color: var(--color-background-danger-bold, #8C121D);
+button.primary.destructive:hover {
+  background-color: var(--color-background-danger-bold, #8c121d);
 }
-button.primary.destructive:active{
-  background-color: var(--color-background-brandRed-hover, #CC1A2A); /* ask Mr Gideon about this */
+button.primary.destructive:active {
+  background-color: var(--color-background-brandRed-hover, #cc1a2a); /* ask Mr Gideon about this */
 }
-button.secondary_gray.destructive:hover,
-button.secondary_color.destructive:hover{
-  background-color: var(--color-background-danger-subtlest, #FEF1F2);
+button.secondary_gray.destructive:hover,
+button.secondary_color.destructive:hover {
+  background-color: var(--color-background-danger-subtlest, #fef1f2);
 }
-button.secondary_gray.destructive:active,
-button.secondary_color.destructive:active{
-  background-color: var(--color-background-danger-subtler, #FDE3E5);
+button.secondary_gray.destructive:active,
+button.secondary_color.destructive:active {
+  background-color: var(--color-background-danger-subtler, #fde3e5);
 }
-button.tertiary_gray.destructive:hover,
-button.tertiary_color.destructive:hover{
-  background-color: var(--color-background-danger-subtlest, #FEF1F2);
+button.tertiary_gray.destructive:hover,
+button.tertiary_color.destructive:hover {
+  background-color: var(--color-background-danger-subtlest, #fef1f2);
 }
-button.tertiary_gray.destructive:active,
-button.tertiary_color.destructive:active{
-  background-color: var(--color-background-danger-subtler, #FDE3E5);
+button.tertiary_gray.destructive:active,
+button.tertiary_color.destructive:active {
+  background-color: var(--color-background-danger-subtler, #fde3e5);
 }
-button.link_gray.destructive:active{
-  color: var(--color-text-danger-bold, #8C121D);
+button.link_gray.destructive:active {
+  color: var(--color-text-danger-bold, #8c121d);
 }
-button.link_color.destructive:active{
-  color: var(--color-text-warning-bold, #93370D);
+button.link_color.destructive:active {
+  color: var(--color-text-warning-bold, #93370d);
 }
 /* Button Disabled Styles */
-button.disabled{
+button.disabled {
   cursor: not-allowed;
-  pointer-events: none;
 }
 button.primary.disabled {
-  background-color: var(--color-background-disabled, #F6F8FA);
+  background-color: var(--color-background-disabled, #f6f8fa);
   --icon-color: var(--color-icon-disabled, #9aa4b2);
   color: var(--color-text-disabled, #9aa4b2);
 }
 button.secondary_gray.disabled,
-button.secondary_color.disabled{
+button.secondary_color.disabled {
   --icon-color: var(--color-icon-disabled, #9aa4b2);
   color: var(--color-text-disabled, #9aa4b2);
-  border-color: var(--color-border-disabled, #E3E8EF);
+  border-color: var(--color-border-disabled, #e3e8ef);
 }
 button.tertiary_gray.disabled,
 button.tertiary_color.disabled,
 button.link_gray.disabled,
-button.link_color.disabled{
+button.link_color.disabled {
   --icon-color: var(--color-icon-disabled, #9aa4b2);
   color: var(--color-text-disabled, #9aa4b2);
 }
-.btn_text{
+.btn_text {
   white-space: nowrap;
   display: flex;
   align-items: center;
-}
+}
+.btn_text::first-letter {
+  text-transform: uppercase;
+}
+.loader {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
+  animation: l13 1s infinite linear;
+}
+/* Loader Sizes */
+.loader.default.sm,
+.loader.default.md,
+.loader.default.lg,
+.loader.default.xl {
+  width: 2rem;
+}
+.loader.default.xl2 {
+  width: 2.2rem;
+}
+.loader.only.sm,
+.loader.only.md,
+.loader.only.lg,
+.loader.only.xl {
+  width: 1.5rem;
+}
+.loader.only.xl2 {
+  width: 1.7rem;
+}
+/* Loader Colors */
+.loader.primary {
+  background: radial-gradient(farthest-side, var(--color-text-inverse, #ffffff) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--color-text-inverse, #ffffff));
+}
+.loader.secondary_gray,
+.loader.tertiary_gray{
+  background: radial-gradient(farthest-side, var(--color-text, #4b5565) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--color-text, #4b5565));
+}
+.loader.secondary_color,
+.loader.tertiary_color{
+  background: radial-gradient(farthest-side, var(--color-text-brandRed, #e21b2e) 94%, #0000) top/8px 8px no-repeat, conic-gradient(#0000 30%, var(--color-text-brandRed, #e21b2e));
+}
+@keyframes l13 {
+  100% {
+    transform: rotate(1turn);
+  }
+}

package/dist/collection/components/gb-btn/gb-btn.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { getAssetPath, h } from "@stencil/core";
+import { getAssetPath, h, Fragment } from "@stencil/core";
 export class GbButton {
     constructor() {
         this.destructive = false;
@@ -15,6 +15,9 @@ export class GbButton {
             this.loadIcon(this.iconTrailingSwap, 'trailing');
         }
         const buttonSlot = this.el.querySelector('p');
+        if (this.state === 'loading') {
+            buttonSlot.style.display = 'none';
+        }
         if (buttonSlot) {
             buttonSlot.classList.add(this.getButtonTextClasses());
             buttonSlot.classList.add('nowrap');
@@ -40,8 +43,8 @@ export class GbButton {
             destructive: this.destructive,
             disabled: this.state === 'disabled',
             default: this.icon === 'default',
+            loading: this.state === 'loading',
             only: this.icon === 'only',
-            // leftandrighticon: this.iconLeading && this.iconTrailing
         };
     }
     getButtonTextClasses() {
@@ -65,7 +68,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: 'e86df1876cb5e6b90b6d78cf21cc3a6eb14d691d', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '58d6a483861057c7e9a1f4c24d7350d88ec8f39f', class: `btn_text` }, h("slot", { key: '8166ba41f945c3cf5851a4dd03668e3a056110c1' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: '64fdbebac8cb134e82c31fb125f5d88c57637b6f', class: this.getButtonClasses() }, this.state === 'loading' && h("div", { key: '8ddf61f6d62750d595d6e3ee0722a611a589a287', class: `loader ${this.hierarchy} ${this.size} ${this.icon}` }), this.state !== 'loading' && (h(Fragment, null, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '310c0d8e361d3bf281092a7eb47d3ed6c3bda63c', class: `btn_text` }, h("slot", { key: '3f770929e060709be15603ac28784aecc201eae4' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))));
     }
     static get is() { return "gb-btn"; }
     static get originalStyleUrls() {
@@ -173,9 +176,15 @@ export class GbButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'disabled'",
-                    "resolved": "\"default\" | \"disabled\"",
-                    "references": {}
+                    "original": "StateType",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\" | \"loading\"",
+                    "references": {
+                        "StateType": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::StateType"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,

package/dist/collection/components/gb-btn/gb-btn.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-btn.js","sourceRoot":"","sources":["../../../src/components/gb-btn/gb-btn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAOjF~~,MAAM,OAAO,QAAQ;IAJrB;QAQU,gBAAW,GAAY,KAAK,CAAC;QAE7B,gBAAW,GAAY,KAAK,CAAC;QAE7B,iBAAY,GAAY,KAAK,CAAC;QAG7B,mBAAc,GAAW,EAAE,CAAC;QAC5B,oBAAe,GAAW,EAAE,CAAC;~~KAgFvC~~;~~IA9EC~~,iBAAiB;QACf,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAC7C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;QACjD,CAAC;QACD,IAAI,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC/C,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,CAAC,CAAC;QACnD,CAAC;QAED,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAE9C,IAAI,UAAU,EAAE,CAAC;YACf,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;YACtD,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,QAAgB,EAAE,IAA4B;QAC3D,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,IAAI,KAAK,SAAS,EAAE,CAAC;YACvB,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,eAAe,GAAG,GAAG,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,yDAAyD;IACzD,gBAAgB;QACd,OAAO;YACL,MAAM,EAAE,IAAI;YACZ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,IAAI;YACjB,CAAC,IAAI,CAAC,SAAS,CAAC,EAAE,IAAI;YACtB,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU;YACnC,OAAO,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;YAChC,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;~~YAC1B~~,~~0DAA0D;SAC3D,~~CAAC;IACJ,CAAC;IAED,oBAAoB;QAClB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,KAAK;gBACR,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,OAAO,WAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAAC;IAC3F,CAAC;IAED,kBAAkB;QAChB,OAAO,WAAK,KAAK,EAAC,iBAAiB,EAAC,SAAS,EAAE,IAAI,CAAC,eAAe,GAAQ,CAAC;IAC9E,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DAAQ,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;YACnC,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE;~~YACvE~~,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,4DAAK,KAAK,EAAE,UAAU;~~gBACpB~~,8DAAa,CACT,CACP;~~YACA~~,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE;~~YAC9C~~,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,~~CAC1C~~,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-btn',\r\n styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n @Prop() size: GeneralSizes;\r\n @Prop() hierarchy: GeneralHierarchies;\r\n @Prop() icon: 'default' \| 'only';\r\n @Prop() destructive: boolean = false;\r\n @Prop() state: ~~'default' \| 'disabled'~~;\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string;\r\n @Prop() iconTrailing: boolean = false;\r\n @Prop() iconTrailingSwap: string;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n @State() trailingIconSvg: string = '';\r\n\r\n componentWillLoad() {\r\n if (this.iconLeading && this.iconLeadingSwap) {\r\n this.loadIcon(this.iconLeadingSwap, 'leading');\r\n }\r\n if (this.iconTrailing && this.iconTrailingSwap) {\r\n this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n }\r\n\r\n const buttonSlot = this.el.querySelector('p');\r\n\r\n if (buttonSlot) {\r\n buttonSlot.classList.add(this.getButtonTextClasses());\r\n buttonSlot.classList.add('nowrap');\r\n }\r\n }\r\n\r\n async loadIcon(iconName: string, type: 'leading' \| 'trailing') {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n if (type === 'leading') {\r\n this.leadingIconSvg = svg;\r\n } else {\r\n this.trailingIconSvg = svg;\r\n }\r\n }\r\n\r\n // Helper to apply color styles based on the button state\r\n getButtonClasses() {\r\n return {\r\n button: true,\r\n [this.size]: true,\r\n [this.hierarchy]: true,\r\n destructive: this.destructive,\r\n disabled: this.state === 'disabled',\r\n default: this.icon === 'default',\r\n ~~only~~: this.~~icon~~ === '~~only~~',\r\n ~~// leftandrighticon~~: this.~~iconLeading~~ && ~~this.iconTrailing\~~r\n };\r\n }\r\n\r\n getButtonTextClasses() {\r\n switch (this.size) {\r\n case 'xl2':\r\n return 'text-lg-semi-bold';\r\n case 'xl':\r\n return 'text-md-semi-bold';\r\n case 'lg':\r\n return 'text-md-semi-bold';\r\n case 'md':\r\n return 'text-sm-semi-bold';\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n }\r\n }\r\n\r\n renderLeadingIcon() {\r\n return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n }\r\n\r\n renderTrailingIcon() {\r\n return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n }\r\n\r\n render() {\r\n return (\r\n <button class={this.getButtonClasses()}>\r\n {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n {this.icon === 'default' && (\r\n <div class={`btn_text`}>\r\n <slot></slot>\r\n </div>\r\n )}\r\n {this.iconTrailing && this.renderTrailingIcon()}\r\n {this.icon === 'only' && this.renderLeadingIcon()}\r\n </button>\r\n );\r\n }\r\n}"]}
1	+ {"version":3,"file":"gb-btn.js","sourceRoot":"","sources":["../../../src/components/gb-btn/gb-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State, Fragment } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes, StateType } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-btn',\r\n styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n @Prop() size: GeneralSizes;\r\n @Prop() hierarchy: GeneralHierarchies;\r\n @Prop() icon: 'default' \| 'only';\r\n @Prop() destructive: boolean = false;\r\n @Prop() state: StateType;\r\n @Prop() iconLeading: boolean = false;\r\n @Prop() iconLeadingSwap: string;\r\n @Prop() iconTrailing: boolean = false;\r\n @Prop() iconTrailingSwap: string;\r\n @Element() el: HTMLElement;\r\n @State() leadingIconSvg: string = '';\r\n @State() trailingIconSvg: string = '';\r\n\r\n componentWillLoad() {\r\n if (this.iconLeading && this.iconLeadingSwap) {\r\n this.loadIcon(this.iconLeadingSwap, 'leading');\r\n }\r\n if (this.iconTrailing && this.iconTrailingSwap) {\r\n this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n }\r\n\r\n const buttonSlot = this.el.querySelector('p');\r\n\r\n if(this.state === 'loading') {\r\n buttonSlot.style.display = 'none';\r\n }\r\n\r\n if (buttonSlot) {\r\n buttonSlot.classList.add(this.getButtonTextClasses());\r\n buttonSlot.classList.add('nowrap');\r\n }\r\n }\r\n\r\n async loadIcon(iconName: string, type: 'leading' \| 'trailing') {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n if (type === 'leading') {\r\n this.leadingIconSvg = svg;\r\n } else {\r\n this.trailingIconSvg = svg;\r\n }\r\n }\r\n\r\n // Helper to apply color styles based on the button state\r\n getButtonClasses() {\r\n return {\r\n button: true,\r\n [this.size]: true,\r\n [this.hierarchy]: true,\r\n destructive: this.destructive,\r\n disabled: this.state === 'disabled',\r\n default: this.icon === 'default',\r\n loading: this.state === 'loading',\r\n only: this.icon === 'only',\r\n };\r\n }\r\n\r\n getButtonTextClasses() {\r\n switch (this.size) {\r\n case 'xl2':\r\n return 'text-lg-semi-bold';\r\n case 'xl':\r\n return 'text-md-semi-bold';\r\n case 'lg':\r\n return 'text-md-semi-bold';\r\n case 'md':\r\n return 'text-sm-semi-bold';\r\n case 'sm':\r\n return 'text-sm-semi-bold';\r\n }\r\n }\r\n\r\n renderLeadingIcon() {\r\n return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n }\r\n\r\n renderTrailingIcon() {\r\n return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n }\r\n\r\n render() {\r\n return (\r\n <button class={this.getButtonClasses()}>\r\n {this.state === 'loading' && <div class={`loader ${this.hierarchy} ${this.size} ${this.icon}`}></div>}\r\n {this.state !== 'loading' && (\r\n <>\r\n {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n {this.icon === 'default' && (\r\n <div class={`btn_text`}>\r\n <slot></slot>\r\n </div>\r\n )}\r\n {this.iconTrailing && this.renderTrailingIcon()}\r\n {this.icon === 'only' && this.renderLeadingIcon()}\r\n </>\r\n )}\r\n </button>\r\n );\r\n }\r\n}"]}