globuswebcomponents 2.18.6 → 2.18.8

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

@@ -1,4 +1,5 @@
 import { getAssetPath, h, Fragment } from "@stencil/core";
+import { getIconPath } from "../../utils/icons";
 export class GbButton {
     constructor() {
         this.size = 'xl';
@@ -14,11 +15,14 @@ export class GbButton {
         this.arrow = 'bottom_center';
         this.event = false;
         this.rounded = false;
-        this.iconLeadingStyle = '';
-        this.iconLeadingType = '';
-        this.iconTrailingStyle = '';
-        this.iconTrailingType = '';
+        this.iconLeadingStyle = 'stroke';
+        this.iconLeadingType = 'rounded';
+        this.iconTrailingStyle = 'stroke';
+        this.iconTrailingType = 'rounded';
+        this.iconLeadingName = '';
+        this.iconTrailingName = '';
         this.fullWidth = true;
+        this.iconPath = '';
         this.leadingIconSvg = '';
         this.trailingIconSvg = '';
         this.internalButtonState = '';
@@ -32,11 +36,17 @@ export class GbButton {
     }
     componentWillLoad() {
         var _a;
-        if (this.iconLeading && this.iconLeadingSwap) {
-            this.loadIcon(this.iconLeadingSwap, 'leading');
+        if (this.iconLeadingSwap) {
+            this.loadIcon(this.iconLeadingSwap, 'leading', 'swap');
         }
-        if (this.iconTrailing && this.iconTrailingSwap) {
-            this.loadIcon(this.iconTrailingSwap, 'trailing');
+        else if (this.iconLeadingName) {
+            this.loadIcon(this.iconLeadingName, 'leading', 'name');
+        }
+        if (this.iconTrailingSwap) {
+            this.loadIcon(this.iconTrailingSwap, 'trailing', 'swap');
+        }
+        else if (this.iconTrailingName) {
+            this.loadIcon(this.iconTrailingName, 'trailing', 'name');
         }
         const buttonSlot = (_a = this.el) === null || _a === void 0 ? void 0 : _a.querySelector('p');
         if (this.state === 'loading') {
@@ -47,9 +57,16 @@ export class GbButton {
             buttonSlot.classList.add('nowrap');
         }
     }
-    async loadIcon(iconName, type) {
-        const iconPath = getAssetPath(`${iconName}`);
-        const response = await fetch(iconPath);
+    async loadIcon(iconName, type, mode) {
+        if (mode === 'name') {
+            const style = type === 'leading' ? this.iconLeadingStyle : this.iconTrailingStyle;
+            const iconType = type === 'leading' ? this.iconLeadingType : this.iconTrailingType;
+            this.iconPath = getAssetPath(getIconPath(iconName, style, iconType));
+        }
+        else {
+            this.iconPath = getAssetPath(`${iconName}`);
+        }
+        const response = await fetch(this.iconPath);
         const svg = await response.text();
         if (type === 'leading') {
             this.leadingIconSvg = svg;
@@ -94,7 +111,7 @@ export class GbButton {
         this.buttonClicked.emit();
     }
     render() {
-        return (h("div", { key: 'fd9dacc4a9e22b47faf99a8ff63c0655c2817149', class: `button_wrapper ${this.fullWidth ? 'full_width' : ''}`, onClick: () => this.emitButtonEvent() }, h("button", { key: '7f643aed374f2df3aab26476230ab87ced037953', disabled: this.state === 'disabled', class: this.getButtonClasses(), onMouseEnter: () => (this.tooltipShown = true), onMouseLeave: () => (this.tooltipShown = false) }, this.state === 'loading' && h("div", { key: 'a2057ee45cadbd314ef35f761e430b5ad83450e9', class: `loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}` }), this.state !== 'loading' && (h(Fragment, null, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: 'b5a28562daa46f120c1d11385b0aa09f82f3d6e0', class: `btn_text` }, h("slot", { key: '9a046982747755c6a652e7490dcf8c346f1a95d4' }))), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))), this.tooltipText && this.icon === 'only' && this.tooltipShown && (h("gb-tooltip", { key: 'ce85fdaed53700e9318981fd219b40390c87ecd7', "show-arrow": true, arrow: this.arrow, class: `tooltip ${this.size}` }, h("p", { key: '3312175445c9981986ffd180e4bd44ac7efed89d', slot: "label" }, this.tooltipText)))));
+        return (h("div", { key: 'f456fd93837e9cf6162f8a009333b8fb05a68ec6', class: `button_wrapper ${this.fullWidth ? 'full_width' : ''}`, onClick: () => this.emitButtonEvent() }, h("button", { key: 'f4971fcf213f675d213dcdfa1daf0201ecd584d8', disabled: this.state === 'disabled', class: this.getButtonClasses(), onMouseEnter: () => (this.tooltipShown = true), onMouseLeave: () => (this.tooltipShown = false) }, this.state === 'loading' && h("div", { key: '95d2d607b600384ba07dfc3cac51bae7e8e6ef86', class: `loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}` }), this.state !== 'loading' && (h(Fragment, null, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && (h("div", { key: '6b8251dfd4507cbfc495f261bbca531b8c782954', class: `btn_text` }, h("slot", { key: 'c73983e48f284706c1219e2ab010aac8ac44be30' }))), this.iconTrailing && this.icon === 'default' && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()))), this.tooltipText && this.icon === 'only' && this.tooltipShown && (h("gb-tooltip", { key: '5333f9805b40d1066e12d231953e906331b466c5', "show-arrow": true, arrow: this.arrow, class: `tooltip ${this.size}` }, h("p", { key: '387a4d8493d1c5fe0c15d8a3c7d2bd268dfd7376', slot: "label" }, this.tooltipText)))));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }
@@ -399,9 +416,15 @@ export class GbButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconStyles",
+                    "resolved": "\"bulk\" | \"duotone\" | \"solid\" | \"stroke\" | \"two-tone\"",
+                    "references": {
+                        "IconStyles": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::IconStyles"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -413,15 +436,21 @@ export class GbButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon-leading-style",
-                "defaultValue": "''"
+                "defaultValue": "'stroke'"
             },
             "iconLeadingType": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconTypes",
+                    "resolved": "\"rounded\" | \"sharp\"",
+                    "references": {
+                        "IconTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::IconTypes"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -433,15 +462,21 @@ export class GbButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon-leading-type",
-                "defaultValue": "''"
+                "defaultValue": "'rounded'"
             },
             "iconTrailingStyle": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconStyles",
+                    "resolved": "\"bulk\" | \"duotone\" | \"solid\" | \"stroke\" | \"two-tone\"",
+                    "references": {
+                        "IconStyles": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::IconStyles"
+                        }
+                    }
                 },
                 "required": false,
                 "optional": false,
@@ -453,9 +488,35 @@ export class GbButton {
                 "setter": false,
                 "reflect": false,
                 "attribute": "icon-trailing-style",
-                "defaultValue": "''"
+                "defaultValue": "'stroke'"
             },
             "iconTrailingType": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "IconTypes",
+                    "resolved": "\"rounded\" | \"sharp\"",
+                    "references": {
+                        "IconTypes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::IconTypes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-trailing-type",
+                "defaultValue": "'rounded'"
+            },
+            "iconLeadingName": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -472,25 +533,28 @@ export class GbButton {
                 "getter": false,
                 "setter": false,
                 "reflect": false,
-                "attribute": "icon-trailing-type",
+                "attribute": "icon-leading-name",
                 "defaultValue": "''"
             },
-            "iconConfig": {
-                "type": "unknown",
+            "iconTrailingName": {
+                "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "{\r\n    iconLeadingStyle: string,\r\n    iconLeadingType: string\r\n  }",
-                    "resolved": "{ iconLeadingStyle: string; iconLeadingType: string; }",
+                    "original": "string",
+                    "resolved": "string",
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
                 },
                 "getter": false,
-                "setter": false
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-trailing-name",
+                "defaultValue": "''"
             },
             "fullWidth": {
                 "type": "boolean",
@@ -516,6 +580,7 @@ export class GbButton {
     }
     static get states() {
         return {
+            "iconPath": {},
             "leadingIconSvg": {},
             "trailingIconSvg": {},
             "internalButtonState": {},

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, Fragment, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { ArrowPositions, 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 = 'xl';\r\n  @Prop() hierarchy: GeneralHierarchies = 'primary';\r\n  @Prop() icon: 'default' | 'only' = 'default';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType = 'default';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string = '';\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string = '';\r\n  @Prop() tooltipText: string = '';\r\n  @Prop() arrow: ArrowPositions = 'bottom_center';\r\n  @Prop() event: boolean = false;\r\n  @Prop() rounded: boolean = false;\r\n  @Prop() iconLeadingStyle: string = '';\r\n  @Prop() iconLeadingType: string = '';\r\n  @Prop() iconTrailingStyle: string = '';\r\n  @Prop() iconTrailingType: string = '';\r\n  @Prop() iconConfig?: {\r\n    iconLeadingStyle: string,\r\n    iconLeadingType: string\r\n  }\r\n  @Prop() fullWidth: boolean = true;\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() tooltipShown: boolean = false;\r\n  @Event() buttonClicked: EventEmitter<void>;\r\n\r\n  @Method()\r\n  async getNativeButton(): Promise<HTMLButtonElement | null> {\r\n    return this.el.shadowRoot.querySelector('button') ?? null;\r\n  }\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      only: this.icon === 'only',\r\n      rounded: this.rounded && this.icon === 'only',\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xxl':\r\n        return 'text-md-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  emitButtonEvent() {\r\n    this.buttonClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`button_wrapper ${this.fullWidth ? 'full_width' : ''}`} onClick={() => this.emitButtonEvent()}>\r\n        <button\r\n          disabled={this.state === 'disabled'}\r\n          class={this.getButtonClasses()}\r\n          onMouseEnter={() => (this.tooltipShown = true)}\r\n          onMouseLeave={() => (this.tooltipShown = false)}\r\n        >\r\n          {this.state === 'loading' && <div class={`loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}`}></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        {this.tooltipText && this.icon === 'only' && this.tooltipShown && (\r\n          <gb-tooltip show-arrow={true} arrow={this.arrow} class={`tooltip ${this.size}`}>\r\n            <p slot=\"label\">{this.tooltipText}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\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,KAAK,EAAgB,MAAM,eAAe,CAAC;AAExH,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAQhD,MAAM,OAAO,QAAQ;IANrB;QAOU,SAAI,GAAiB,IAAI,CAAC;QAC1B,cAAS,GAAuB,SAAS,CAAC;QAC1C,SAAI,GAAuB,SAAS,CAAC;QACrC,gBAAW,GAAY,KAAK,CAAC;QAC7B,UAAK,GAAc,SAAS,CAAC;QAC7B,gBAAW,GAAY,KAAK,CAAC;QAC7B,oBAAe,GAAW,EAAE,CAAC;QAC7B,iBAAY,GAAY,KAAK,CAAC;QAC9B,qBAAgB,GAAW,EAAE,CAAC;QAC9B,gBAAW,GAAW,EAAE,CAAC;QACzB,UAAK,GAAmB,eAAe,CAAC;QACxC,UAAK,GAAY,KAAK,CAAC;QACvB,YAAO,GAAY,KAAK,CAAC;QACzB,qBAAgB,GAAe,QAAQ,CAAC;QACxC,oBAAe,GAAc,SAAS,CAAC;QACvC,sBAAiB,GAAe,QAAQ,CAAC;QACzC,qBAAgB,GAAc,SAAS,CAAC;QACxC,oBAAe,GAAW,EAAE,CAAC;QAC7B,qBAAgB,GAAW,EAAE,CAAC;QAC9B,cAAS,GAAY,IAAI,CAAC;QAEzB,aAAQ,GAAW,EAAE,CAAC;QACtB,mBAAc,GAAW,EAAE,CAAC;QAC5B,oBAAe,GAAW,EAAE,CAAC;QAC7B,wBAAmB,GAAW,EAAE,CAAC;QACjC,6BAAwB,GAAW,EAAE,CAAC;QACtC,8BAAyB,GAAW,EAAE,CAAC;QACvC,iBAAY,GAAY,KAAK,CAAC;KA0HxC;IAtHC,KAAK,CAAC,eAAe;;QACnB,OAAO,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,CAAC,aAAa,CAAC,QAAQ,CAAC,mCAAI,IAAI,CAAC;IAC5D,CAAC;IAED,iBAAiB;;QACf,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YACzB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QACzD,CAAC;aAAM,IAAI,IAAI,CAAC,eAAe,EAAE,CAAC;YAChC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,eAAe,EAAE,SAAS,EAAE,MAAM,CAAC,CAAC;QACzD,CAAC;QAED,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YAC1B,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;QAC3D,CAAC;aAAM,IAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACjC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,gBAAgB,EAAE,UAAU,EAAE,MAAM,CAAC,CAAC;QAC3D,CAAC;QAED,MAAM,UAAU,GAAG,MAAA,IAAI,CAAC,EAAE,0CAAE,aAAa,CAAC,GAAG,CAAC,CAAC;QAE/C,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,IAAI,EAAE,CAAC,CAAC;YAC5D,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,KAAK,CAAC,QAAQ,CAAC,QAAgB,EAAE,IAA4B,EAAE,IAAqB;QAClF,IAAI,IAAI,KAAK,MAAM,EAAE,CAAC;YACpB,MAAM,KAAK,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,IAAI,CAAC,iBAAiB,CAAC;YAClF,MAAM,QAAQ,GAAG,IAAI,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;YACnF,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,WAAW,CAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;QACvE,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC9C,CAAC;QAED,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QAC5C,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,IAAI,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;YAC1B,OAAO,EAAE,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM;SAC9C,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,eAAe;QACb,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC;IAC5B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,kBAAkB,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,eAAe,EAAE;YACvG,+DACE,QAAQ,EAAE,IAAI,CAAC,KAAK,KAAK,UAAU,EACnC,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAC9B,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,IAAI,CAAC,EAC9C,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,YAAY,GAAG,KAAK,CAAC;gBAE9C,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,4DAAK,KAAK,EAAE,UAAU,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,EAAE,GAAQ;gBAC7I,IAAI,CAAC,KAAK,KAAK,SAAS,IAAI,CAC3B;oBACG,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,iBAAiB,EAAE;oBACvE,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B,4DAAK,KAAK,EAAE,UAAU;wBACpB,8DAAa,CACT,CACP;oBACA,IAAI,CAAC,YAAY,IAAI,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,IAAI,CAAC,kBAAkB,EAAE;oBACzE,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,iBAAiB,EAAE,CAChD,CACJ,CACM;YACR,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,IAAI,CAAC,YAAY,IAAI,CAChE,iFAAwB,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,KAAK,EAAE,WAAW,IAAI,CAAC,IAAI,EAAE;gBAC5E,0DAAG,IAAI,EAAC,OAAO,IAAE,IAAI,CAAC,WAAW,CAAK,CAC3B,CACd,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State, Fragment, Method, Event, EventEmitter } from '@stencil/core';\r\nimport { ArrowPositions, GeneralHierarchies, GeneralSizes, IconStyles, IconTypes, StateType } from '../../models/reusableModels';\r\nimport { getIconPath } from '../../utils/icons';\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 = 'xl';\r\n  @Prop() hierarchy: GeneralHierarchies = 'primary';\r\n  @Prop() icon: 'default' | 'only' = 'default';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType = 'default';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string = '';\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string = '';\r\n  @Prop() tooltipText: string = '';\r\n  @Prop() arrow: ArrowPositions = 'bottom_center';\r\n  @Prop() event: boolean = false;\r\n  @Prop() rounded: boolean = false;\r\n  @Prop() iconLeadingStyle: IconStyles = 'stroke';\r\n  @Prop() iconLeadingType: IconTypes = 'rounded';\r\n  @Prop() iconTrailingStyle: IconStyles = 'stroke';\r\n  @Prop() iconTrailingType: IconTypes = 'rounded';\r\n  @Prop() iconLeadingName: string = '';\r\n  @Prop() iconTrailingName: string = '';\r\n  @Prop() fullWidth: boolean = true;\r\n  @Element() el: HTMLElement;\r\n  @State() iconPath: string = '';\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() tooltipShown: boolean = false;\r\n  @Event() buttonClicked: EventEmitter<void>;\r\n\r\n  @Method()\r\n  async getNativeButton(): Promise<HTMLButtonElement | null> {\r\n    return this.el.shadowRoot.querySelector('button') ?? null;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading', 'swap');\r\n    } else if (this.iconLeadingName) {\r\n      this.loadIcon(this.iconLeadingName, 'leading', 'name');\r\n    }\r\n\r\n    if (this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing', 'swap');\r\n    } else if (this.iconTrailingName) {\r\n      this.loadIcon(this.iconTrailingName, 'trailing', 'name');\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', mode: 'swap' | 'name') {\r\n    if (mode === 'name') {\r\n      const style = type === 'leading' ? this.iconLeadingStyle : this.iconTrailingStyle;\r\n      const iconType = type === 'leading' ? this.iconLeadingType : this.iconTrailingType;\r\n      this.iconPath = getAssetPath(getIconPath(iconName, style, iconType));\r\n    } else {\r\n      this.iconPath = getAssetPath(`${iconName}`);\r\n    }\r\n\r\n    const response = await fetch(this.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      only: this.icon === 'only',\r\n      rounded: this.rounded && this.icon === 'only',\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xxl':\r\n        return 'text-md-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  emitButtonEvent() {\r\n    this.buttonClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`button_wrapper ${this.fullWidth ? 'full_width' : ''}`} onClick={() => this.emitButtonEvent()}>\r\n        <button\r\n          disabled={this.state === 'disabled'}\r\n          class={this.getButtonClasses()}\r\n          onMouseEnter={() => (this.tooltipShown = true)}\r\n          onMouseLeave={() => (this.tooltipShown = false)}\r\n        >\r\n          {this.state === 'loading' && <div class={`loader ${this.hierarchy} ${this.size} ${this.icon} ${this.destructive ? 'destructive' : ''}`}></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.icon === 'default' && this.renderTrailingIcon()}\r\n              {this.icon === 'only' && this.renderLeadingIcon()}\r\n            </>\r\n          )}\r\n        </button>\r\n        {this.tooltipText && this.icon === 'only' && this.tooltipShown && (\r\n          <gb-tooltip show-arrow={true} arrow={this.arrow} class={`tooltip ${this.size}`}>\r\n            <p slot=\"label\">{this.tooltipText}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,5 +1,6 @@
 import { Component, Element, getAssetPath, h, Prop, State, Fragment, Method, Event, EventEmitter } from '@stencil/core';
-import { ArrowPositions, GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';
+import { ArrowPositions, GeneralHierarchies, GeneralSizes, IconStyles, IconTypes, StateType } from '../../models/reusableModels';
+import { getIconPath } from '../../utils/icons';
 
 @Component({
   tag: 'gb-button',
@@ -21,16 +22,15 @@ export class GbButton {
   @Prop() arrow: ArrowPositions = 'bottom_center';
   @Prop() event: boolean = false;
   @Prop() rounded: boolean = false;
-  @Prop() iconLeadingStyle: string = '';
-  @Prop() iconLeadingType: string = '';
-  @Prop() iconTrailingStyle: string = '';
-  @Prop() iconTrailingType: string = '';
-  @Prop() iconConfig?: {
-    iconLeadingStyle: string,
-    iconLeadingType: string
-  }
+  @Prop() iconLeadingStyle: IconStyles = 'stroke';
+  @Prop() iconLeadingType: IconTypes = 'rounded';
+  @Prop() iconTrailingStyle: IconStyles = 'stroke';
+  @Prop() iconTrailingType: IconTypes = 'rounded';
+  @Prop() iconLeadingName: string = '';
+  @Prop() iconTrailingName: string = '';
   @Prop() fullWidth: boolean = true;
   @Element() el: HTMLElement;
+  @State() iconPath: string = '';
   @State() leadingIconSvg: string = '';
   @State() trailingIconSvg: string = '';
   @State() internalButtonState: string = '';
@@ -45,11 +45,16 @@ export class GbButton {
   }
 
   componentWillLoad() {
-    if (this.iconLeading && this.iconLeadingSwap) {
-      this.loadIcon(this.iconLeadingSwap, 'leading');
+    if (this.iconLeadingSwap) {
+      this.loadIcon(this.iconLeadingSwap, 'leading', 'swap');
+    } else if (this.iconLeadingName) {
+      this.loadIcon(this.iconLeadingName, 'leading', 'name');
     }
-    if (this.iconTrailing && this.iconTrailingSwap) {
-      this.loadIcon(this.iconTrailingSwap, 'trailing');
+
+    if (this.iconTrailingSwap) {
+      this.loadIcon(this.iconTrailingSwap, 'trailing', 'swap');
+    } else if (this.iconTrailingName) {
+      this.loadIcon(this.iconTrailingName, 'trailing', 'name');
     }
 
     const buttonSlot = this.el?.querySelector('p');
@@ -64,9 +69,16 @@ export class GbButton {
     }
   }
 
-  async loadIcon(iconName: string, type: 'leading' | 'trailing') {
-    const iconPath = getAssetPath(`${iconName}`);
-    const response = await fetch(iconPath);
+  async loadIcon(iconName: string, type: 'leading' | 'trailing', mode: 'swap' | 'name') {
+    if (mode === 'name') {
+      const style = type === 'leading' ? this.iconLeadingStyle : this.iconTrailingStyle;
+      const iconType = type === 'leading' ? this.iconLeadingType : this.iconTrailingType;
+      this.iconPath = getAssetPath(getIconPath(iconName, style, iconType));
+    } else {
+      this.iconPath = getAssetPath(`${iconName}`);
+    }
+
+    const response = await fetch(this.iconPath);
     const svg = await response.text();
     if (type === 'leading') {
       this.leadingIconSvg = svg;
@@ -133,7 +145,7 @@ export class GbButton {
                   <slot></slot>
                 </div>
               )}
-              {this.iconTrailing && this.renderTrailingIcon()}
+              {this.iconTrailing && this.icon === 'default' && this.renderTrailingIcon()}
               {this.icon === 'only' && this.renderLeadingIcon()}
             </>
           )}

package/dist/collection/components/gb-button/readme.md

@@ -13,15 +13,16 @@
 | `fullWidth`         | `full-width`          |             | `boolean`                                                                                                                     | `true`            |
 | `hierarchy`         | `hierarchy`           |             | `"link_color" \| "link_gray" \| "primary" \| "secondary_color" \| "secondary_gray" \| "tertiary_color" \| "tertiary_gray"`    | `'primary'`       |
 | `icon`              | `icon`                |             | `"default" \| "only"`                                                                                                         | `'default'`       |
-| `iconConfig`        | --                    |             | `{ iconLeadingStyle: string; iconLeadingType: string; }`                                                                      | `undefined`       |
 | `iconLeading`       | `icon-leading`        |             | `boolean`                                                                                                                     | `false`           |
-| `iconLeadingStyle`  | `icon-leading-style`  |             | `string`                                                                                                                      | `''`              |
+| `iconLeadingName`   | `icon-leading-name`   |             | `string`                                                                                                                      | `''`              |
+| `iconLeadingStyle`  | `icon-leading-style`  |             | `"bulk" \| "duotone" \| "solid" \| "stroke" \| "two-tone"`                                                                    | `'stroke'`        |
 | `iconLeadingSwap`   | `icon-leading-swap`   |             | `string`                                                                                                                      | `''`              |
-| `iconLeadingType`   | `icon-leading-type`   |             | `string`                                                                                                                      | `''`              |
+| `iconLeadingType`   | `icon-leading-type`   |             | `"rounded" \| "sharp"`                                                                                                        | `'rounded'`       |
 | `iconTrailing`      | `icon-trailing`       |             | `boolean`                                                                                                                     | `false`           |
-| `iconTrailingStyle` | `icon-trailing-style` |             | `string`                                                                                                                      | `''`              |
+| `iconTrailingName`  | `icon-trailing-name`  |             | `string`                                                                                                                      | `''`              |
+| `iconTrailingStyle` | `icon-trailing-style` |             | `"bulk" \| "duotone" \| "solid" \| "stroke" \| "two-tone"`                                                                    | `'stroke'`        |
 | `iconTrailingSwap`  | `icon-trailing-swap`  |             | `string`                                                                                                                      | `''`              |
-| `iconTrailingType`  | `icon-trailing-type`  |             | `string`                                                                                                                      | `''`              |
+| `iconTrailingType`  | `icon-trailing-type`  |             | `"rounded" \| "sharp"`                                                                                                        | `'rounded'`       |
 | `rounded`           | `rounded`             |             | `boolean`                                                                                                                     | `false`           |
 | `size`              | `size`                |             | `"lg" \| "md" \| "profile_lg" \| "profile_md" \| "profile_sm" \| "sm" \| "xl" \| "xs" \| "xxl" \| "xxs" \| "xxxl" \| "xxxxl"` | `'xl'`            |
 | `state`             | `state`               |             | `"applied" \| "default" \| "disabled" \| "loading" \| "open"`                                                                 | `'default'`       |