globuswebcomponents 2.5.0 → 2.5.2

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

@@ -2747,9 +2747,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;
@@ -2774,62 +2775,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);
 }
@@ -2837,48 +2838,48 @@ 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);
   padding: var(--spacing-none);
   height: fit-content;
   justify-content: flex-start;
@@ -2886,134 +2887,134 @@ button.link_gray {
 
 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;
   justify-content: flex-start;
 }
 
 /* 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 {
@@ -3023,26 +3024,77 @@ button.primary.disabled {
 }
 
 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{
+.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-button/gb-button.js

@@ -1,4 +1,4 @@
-import { getAssetPath, h } from "@stencil/core";
+import { getAssetPath, h, Fragment } from "@stencil/core";
 export class GbButton {
     constructor() {
         this.destructive = false;
@@ -9,7 +9,6 @@ export class GbButton {
         this.internalButtonState = '';
         this.internalIconLeadingState = '';
         this.internalIconTrailingState = '';
-        this.internalSize = '';
     }
     componentWillLoad() {
         if (this.iconLeading && this.iconLeadingSwap) {
@@ -19,22 +18,13 @@ 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');
         }
-        // if (!this.iconLeading && !this.iconTrailing) {
-        //   buttonSlot.classList.add('center');
-        // }
-    }
-    updateButtonState(newValue) {
-        this.internalButtonState = newValue;
-    }
-    updateSize(newValue) {
-        this.internalSize = newValue;
-    }
-    componentWillRender() {
-        this.internalButtonState = this.state;
     }
     async loadIcon(iconName, type) {
         const iconPath = getAssetPath(`${iconName}`);
@@ -51,17 +41,16 @@ export class GbButton {
     getButtonClasses() {
         return {
             button: true,
-            [this.internalSize]: true,
+            [this.size]: true,
             [this.hierarchy]: true,
             destructive: this.destructive,
-            disabled: this.internalButtonState === 'disabled',
+            disabled: this.state === 'disabled',
             default: this.icon === 'default',
             only: this.icon === 'only',
-            oneicon: this.iconLeading || this.iconTrailing,
         };
     }
     getButtonTextClasses() {
-        switch (this.internalSize) {
+        switch (this.size) {
             case 'xl2':
                 return 'text-lg-semi-bold';
             case 'xl':
@@ -75,13 +64,13 @@ export class GbButton {
         }
     }
     renderLeadingIcon() {
-        return h("div", { class: `icon left-icon ${this.internalSize}`, innerHTML: this.leadingIconSvg });
+        return h("div", { class: `icon left-icon ${this.size}`, innerHTML: this.leadingIconSvg });
     }
     renderTrailingIcon() {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: 'b371e967b77f223b6da4aedcb72fe83feed2e305', disabled: this.internalButtonState === 'disabled', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '21ad6924aec2a7644369bfdbe3be57f54b4128ea' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: 'e34f97215b17de5ac621a682df3b9c61566910b1', disabled: this.internalButtonState === 'disabled', class: this.getButtonClasses() }, this.state === 'loading' && h("div", { key: 'b617a3f263849c27231e694a651b9746f432c7a4', 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: '0fd1275b54a61ba3c47ac8805d966a02c29384bc', class: `btn_text` }, h("slot", { key: 'f175ea3cfea49cb08804462c4114eedb487a9dc3' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }
@@ -192,7 +181,7 @@ export class GbButton {
                 "mutable": false,
                 "complexType": {
                     "original": "StateType",
-                    "resolved": "\"applied\" | \"default\" | \"disabled\"",
+                    "resolved": "\"applied\" | \"default\" | \"disabled\" | \"loading\"",
                     "references": {
                         "StateType": {
                             "location": "import",
@@ -298,19 +287,9 @@ export class GbButton {
             "trailingIconSvg": {},
             "internalButtonState": {},
             "internalIconLeadingState": {},
-            "internalIconTrailingState": {},
-            "internalSize": {}
+            "internalIconTrailingState": {}
         };
     }
     static get elementRef() { return "el"; }
-    static get watchers() {
-        return [{
-                "propName": "state",
-                "methodName": "updateButtonState"
-            }, {
-                "propName": "size",
-                "methodName": "updateSize"
-            }];
-    }
 }
 //# sourceMappingURL=gb-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\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  @State() internalButtonState: string = '';\r\n  @State() internalIconLeadingState: string = '';\r\n  @State() internalIconTrailingState: string = '';\r\n  @State() internalSize: 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    // if (!this.iconLeading && !this.iconTrailing) {\r\n    //   buttonSlot.classList.add('center');\r\n    // }\r\n  }\r\n\r\n  @Watch('state')\r\n  updateButtonState(newValue: string) {\r\n    this.internalButtonState = newValue;\r\n  }\r\n\r\n  @Watch('size')\r\n  updateSize(newValue: GeneralSizes) {\r\n    this.internalSize = newValue;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalButtonState = this.state;\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.internalSize]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.internalButtonState === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      oneicon: this.iconLeading || this.iconTrailing,\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.internalSize) {\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.internalSize}`} 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 disabled={this.internalButtonState === 'disabled'} class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAS3F,MAAM,OAAO,QAAQ;IANrB;QAUU,gBAAW,GAAY,KAAK,CAAC;QAE7B,gBAAW,GAAY,KAAK,CAAC;QAE7B,iBAAY,GAAY,KAAK,CAAC;QAG7B,mBAAc,GAAW,EAAE,CAAC;QAC5B,oBAAe,GAAW,EAAE,CAAC;QAC7B,wBAAmB,GAAW,EAAE,CAAC;QACjC,6BAAwB,GAAW,EAAE,CAAC;QACtC,8BAAyB,GAAW,EAAE,CAAC;KAwFjD;IAtFC,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,IAAI,CAAC,KAAK,KAAK,SAAS,EAAE,CAAC;YAC7B,UAAU,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;QACpC,CAAC;QAED,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;SAC3B,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,QAAQ,EAAE,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE;YACtF,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;YACpG,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B;gBACG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE;gBACvE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,4DAAK,KAAK,EAAE,UAAU;oBACpB,8DAAa,CACT,CACP;gBACA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,kBAAkB,EAAE;gBAC9C,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAChD,CACJ,CACM,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\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  @State() internalButtonState: string = '';\r\n  @State() internalIconLeadingState: string = '';\r\n  @State() internalIconTrailingState: 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      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 disabled={this.internalButtonState === 'disabled'} 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}\r\n"]}