npm - globuswebcomponents - Versions diffs - 2.18.5 → 2.18.8 - Mend

globuswebcomponents 2.18.5 → 2.18.8

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 (235) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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'`       |

package/dist/collection/components/gb-input-field/gb-input-field.css CHANGED Viewed

@@ -2664,11 +2664,11 @@ input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
   /* Make the text use your normal color */
-  -webkit-text-fill-color: var(--color-text, #4b5565);
+  -webkit-text-fill-color: var(--color-text, #4b5565) !important;
   /* Remove the yellow background Chrome applies by covering it */
-  -webkit-transition: background-color 9999s ease-in-out 0s;
-  transition: background-color 9999s ease-in-out 0s;
+  -webkit-transition: background-color 9999s ease-in-out 0s !important;
+  transition: background-color 9999s ease-in-out 0s !important;
   /* Or explicitly paint your own background */
   box-shadow: 0 0 0 1000px transparent inset !important;
@@ -2676,11 +2676,11 @@ input:-webkit-autofill:active {
 /* Firefox */
 input:-webkit-autofill {
   background-color: transparent !important;
-  color: var(--color-text, #4b5565);
+  color: var(--color-text, #4b5565) !important;
 }
 input:autofill {
   background-color: transparent !important;
-  color: var(--color-text, #4b5565);
+  color: var(--color-text, #4b5565) !important;
 }
 .input_container,
 .input_with_label {

package/dist/collection/components/gb-rich-text/gb-rich-text.css CHANGED Viewed

@@ -2785,10 +2785,34 @@
   background: var(--color-background-gray-subtler, #eef2f6);
   color: var(--color-icon-default, #364152);
 }
-.ProseMirror-selectednode,
-.ProseMirror-focused img{
-  max-width: 100%;        /* never wider than the editor */
-  max-height: 300px;      /* cap the height so tall portraits don't take over */
-  width: auto;            /* let width scale naturally */
-  height: auto;
+.gb-rich-text__content .ProseMirror img {
+  max-width: 100%;        /* never wider than the editor, still overridable by the resize handle's inline width */
+  height: auto;           /* preserve aspect ratio as width changes */
+}
+/* === Resizable image (see resizable-image.ts) === */
+.gb-rich-text__content .ProseMirror .gb-resizable-image {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+  line-height: 0;
+}
+.gb-rich-text__content .ProseMirror .gb-resizable-image img {
+  display: block;
+}
+.gb-rich-text__content .ProseMirror .gb-resizable-image__handle {
+  position: absolute;
+  right: -4px;
+  bottom: -4px;
+  width: 10px;
+  height: 10px;
+  border: 1.5px solid var(--color-background-card, #ffffff);
+  border-radius: 2px;
+  background: var(--color-border-selected, #075db2);
+  cursor: nwse-resize;
+  opacity: 0;
+  transition: opacity 0.15s;
+}
+.gb-rich-text__content .ProseMirror .gb-resizable-image:hover .gb-resizable-image__handle,
+.gb-rich-text__content .ProseMirror .gb-resizable-image.ProseMirror-selectednode .gb-resizable-image__handle {
+  opacity: 1;
 }

package/dist/collection/components/gb-rich-text/gb-rich-text.js CHANGED Viewed

@@ -1,11 +1,11 @@
 import { h, Fragment } from "@stencil/core";
 import { Editor } from "@tiptap/core";
-import Image from "@tiptap/extension-image";
 import Link from "@tiptap/extension-link";
 import Placeholder from "@tiptap/extension-placeholder";
 import Underline from "@tiptap/extension-underline";
 import StarterKit from "@tiptap/starter-kit";
 import FileHandler from "@tiptap/extension-file-handler";
+import { ResizableImage } from "./resizable-image";
 export class GbRichText {
     constructor() {
         this.label = '';
@@ -38,7 +38,7 @@ export class GbRichText {
                 StarterKit,
                 Underline,
                 Link.configure({ openOnClick: false }),
-                Image,
+                ResizableImage,
                 Placeholder.configure({ placeholder: this.placeholder }),
                 FileHandler.configure({
                     allowedMimeTypes: ['image/jpeg', 'image/png', 'image/gif'],
@@ -162,12 +162,12 @@ export class GbRichText {
         (_a = this.editor) === null || _a === void 0 ? void 0 : _a.destroy();
     }
     render() {
-        return (h("div", { key: '9928f07fa557418f107fc8970a8a6d660c2eb664', class: {
+        return (h("div", { key: '8e35f372364f6b6e7423b3be278b025d65bf3329', class: {
                 'gb-rich-text': true,
                 'gb-rich-text--focused': this.isFocused,
                 'gb-rich-text--error': this.destructive,
                 'gb-rich-text--disabled': this.disabled,
-            } }, this.label && h("label", { key: '0d092f589d34c35df40a7932055e5d61a666df30', class: "gb-rich-text__label text-sm-medium" }, this.label), h("div", { key: '6333cc24ecf0e4f52f870814ecf8d945e7953a76', class: "gb-rich-text__wrapper" }, h("gb-wysiwyg-toolbar", { key: 'bc9f60b4124bbff6bd9c7d728c18428f7d57cfc1', disabledIcons: this.disabledIcons, "is-bold": this.isBold, "is-italic": this.isItalic, "is-h1": this.isH1, "is-h2": this.isH2, "is-underline": this.isUnderline, "is-quote": this.isQuote, "is-link": this.isLink, "is-bullet-list": this.isBulletList, "is-ordered-list": this.isOrderedList, onToolbarAction: (ev) => this.handleToolbarAction(ev) }), this.destructive && (h("svg", { key: '18133040ecb1d5eaa5d92ee8b067a9303d260841', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "alert_circle" }, h("path", { key: 'ebb0dce0726e0b7eda10429e44ee2f1c76fac057', d: "M7.99483 9.99998H8.00081M8.00016 7.99998V5.33331M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z", stroke: "var(--color-icon-danger, #B51726)", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.attachments.length > 0 && (h("div", { key: '23044031819bef9cd45f3533dc0f9b4d291d810d', class: "gb-rich-text__attachments" }, this.attachments.map((attachment, index) => (h("div", { class: "gb-rich-text__attachment-item", key: index }, h("span", { class: "gb-rich-text__attachment-icon" }, h("gb-file-type-icon", { "file-type": this.getFileExtension(attachment.name), "file-style": "default" })), h("div", { class: "gb-rich-text__attachment-info" }, h("span", { class: "gb-rich-text__attachment-name text-sm-medium" }, attachment.name), h("span", { class: "gb-rich-text__attachment-size text-xs-regular" }, this.formatFileSize(attachment.size))), h("gb-button-close", { color: "gray", size: "sm", onClick: () => this.removeAttachment(index) })))))), h("input", { key: '5843d797ed6ebb90db7aa4847eb295460ab7ff8a', ref: el => (this.fileInputEl = el), type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => this.handleFileInput(e) }), h("input", { key: '210cceded9489a05a77b04df351c433f00bb844b', ref: el => (this.attachmentInputEl = el), type: "file", accept: ".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.zip", style: { display: 'none' }, onChange: (e) => this.handleAttachmentInput(e) }), h("div", { key: 'cee6e40b4249eb5bcfc4f2f1fa9a791f6d09a52e', class: "gb-rich-text__content" })), this.showHintText && (h(Fragment, null, !this.destructive ? h("p", { class: "gb-rich-text__hint text-sm-regular" }, this.hintText) : h("p", { class: "error_text text-sm-regular" }, this.errorText)))));
+            } }, this.label && h("label", { key: '48fa31760874f4ba046f8bd1927b0e3ee478e8a9', class: "gb-rich-text__label text-sm-medium" }, this.label), h("div", { key: '4a8d857144b9d32e729bc529596a9179757aca2e', class: "gb-rich-text__wrapper" }, h("gb-wysiwyg-toolbar", { key: 'bb7a7cf92d4463f6b675c81378fc2f5ad44e636a', disabledIcons: this.disabledIcons, "is-bold": this.isBold, "is-italic": this.isItalic, "is-h1": this.isH1, "is-h2": this.isH2, "is-underline": this.isUnderline, "is-quote": this.isQuote, "is-link": this.isLink, "is-bullet-list": this.isBulletList, "is-ordered-list": this.isOrderedList, onToolbarAction: (ev) => this.handleToolbarAction(ev) }), this.destructive && (h("svg", { key: 'e98e952ce38dee168aaeed851be0b7264c3dd677', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: "alert_circle" }, h("path", { key: '5ed5812e747f848d6bacea85a65e5cc1241d940f', d: "M7.99483 9.99998H8.00081M8.00016 7.99998V5.33331M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z", stroke: "var(--color-icon-danger, #B51726)", "stroke-width": "1.33333", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.attachments.length > 0 && (h("div", { key: 'd8f8bfb37e2ec6db50d26967bf5c0b4bf957a0cf', class: "gb-rich-text__attachments" }, this.attachments.map((attachment, index) => (h("div", { class: "gb-rich-text__attachment-item", key: index }, h("span", { class: "gb-rich-text__attachment-icon" }, h("gb-file-type-icon", { "file-type": this.getFileExtension(attachment.name), "file-style": "default" })), h("div", { class: "gb-rich-text__attachment-info" }, h("span", { class: "gb-rich-text__attachment-name text-sm-medium" }, attachment.name), h("span", { class: "gb-rich-text__attachment-size text-xs-regular" }, this.formatFileSize(attachment.size))), h("gb-button-close", { color: "gray", size: "sm", onClick: () => this.removeAttachment(index) })))))), h("input", { key: '29f63449b3e265aad6ffb9415de48768ac47e4a5', ref: el => (this.fileInputEl = el), type: "file", accept: "image/*", style: { display: 'none' }, onChange: (e) => this.handleFileInput(e) }), h("input", { key: '204ddc471af0da8d0f9388c729b792e59bcbcb6a', ref: el => (this.attachmentInputEl = el), type: "file", accept: ".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.zip", style: { display: 'none' }, onChange: (e) => this.handleAttachmentInput(e) }), h("div", { key: '5e2aadf828780b43417670e05296279b12f921be', class: "gb-rich-text__content" })), this.showHintText && (h(Fragment, null, !this.destructive ? h("p", { class: "gb-rich-text__hint text-sm-regular" }, this.hintText) : h("p", { class: "error_text text-sm-regular" }, this.errorText)))));
     }
     static get is() { return "gb-rich-text"; }
     static get originalStyleUrls() {

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

	@@ -1 +1 @@
1	- {"version":3,"file":"gb-rich-text.js","sourceRoot":"","sources":["../../../src/components/gb-rich-text/gb-rich-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h, Fragment } from '@stencil/core';\r\nimport { Editor } from '@tiptap/core';\r\nimport Image from '@tiptap/extension-image';\r\nimport Link from '@tiptap/extension-link';\r\nimport Placeholder from '@tiptap/extension-placeholder';\r\nimport Underline from '@tiptap/extension-underline';\r\nimport StarterKit from '@tiptap/starter-kit';\r\nimport FileHandler from '@tiptap/extension-file-handler';\r\n\r\n@Component({\r\n tag: 'gb-rich-text',\r\n styleUrl: 'gb-rich-text.css',\r\n shadow: false,\r\n})\r\nexport class GbRichText {\r\n @Prop() label: string = '';\r\n @Prop() placeholder: string = '';\r\n @Prop() showHintText: boolean = true;\r\n @Prop() hintText: string = '';\r\n @Prop() value: any;\r\n @Prop() disabled: boolean = false;\r\n @Prop() destructive: boolean = false;\r\n @Prop() errorText: string = '';\r\n // Toolbar icons to disable, e.g. disabled-icons=\"photo,attachment\" or ['photo', 'attachment'].\r\n @Prop() disabledIcons: string \| string[] = [];\r\n\r\n // Active states tracked for toolbar highlighting\r\n @State() isFocused: boolean = false;\r\n @State() isBold: boolean = false;\r\n @State() isItalic: boolean = false;\r\n @State() isH1: boolean = false;\r\n @State() isH2: boolean = false;\r\n @State() isUnderline: boolean = false;\r\n @State() isQuote: boolean = false;\r\n @State() isLink: boolean = false;\r\n @State() isBulletList: boolean = false;\r\n @State() isOrderedList: boolean = false;\r\n @State() attachments: { file: File; name: string; size: number; type: string }[] = [];\r\n @Event() richTextValueChanged: EventEmitter<{ json: any; html: any }>;\r\n @Event() richTextAttachmentAdded: EventEmitter<{ file: File; name: string; size: number; type: string }>;\r\n @Event() gbBlur: EventEmitter<void>;\r\n @Event() gbFocus: EventEmitter<void>;\r\n\r\n @Element() el: HTMLElement;\r\n\r\n private editor: Editor;\r\n private fileInputEl: HTMLInputElement;\r\n private attachmentInputEl: HTMLInputElement;\r\n\r\n componentDidLoad() {\r\n const editorEl = this.el.querySelector('.gb-rich-text__content') as HTMLElement;\r\n\r\n this.editor = new Editor({\r\n element: editorEl,\r\n extensions: [\r\n StarterKit,\r\n Underline,\r\n Link.configure({ openOnClick: false }),\r\n Image,\r\n Placeholder.configure({ placeholder: this.placeholder }),\r\n FileHandler.configure({\r\n allowedMimeTypes: ['image/jpeg', 'image/png', 'image/gif'],\r\n }),\r\n ],\r\n content: this.value,\r\n onUpdate: ({ editor }) => {\r\n const json = editor.getJSON();\r\n const html = editor.getHTML();\r\n this.richTextValueChanged.emit({ json: json, html: html });\r\n this.syncActiveStates(editor);\r\n },\r\n onSelectionUpdate: ({ editor }) => {\r\n this.syncActiveStates(editor);\r\n },\r\n onFocus: () => {\r\n this.isFocused = true;\r\n this.gbFocus.emit();\r\n },\r\n onBlur: () => {\r\n this.isFocused = false;\r\n this.gbBlur.emit();\r\n },\r\n });\r\n }\r\n\r\n private handleFileInput(e: Event) {\r\n const file = (e.target as HTMLInputElement).files?.[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = () => {\r\n const src = reader.result as string;\r\n this.editor.chain().focus().setImage({ src }).run();\r\n };\r\n reader.readAsDataURL(file);\r\n // Reset so same file can be picked again\r\n (e.target as HTMLInputElement).value = '';\r\n }\r\n\r\n private handleAttachmentInput(e: Event) {\r\n const file = (e.target as HTMLInputElement).files?.[0];\r\n if (!file) return;\r\n\r\n const attachment = { file, name: file.name, size: file.size, type: file.type };\r\n\r\n // Push to local state so UI renders it\r\n this.attachments = [...this.attachments, attachment];\r\n\r\n // Emit to Angular parent\r\n this.richTextAttachmentAdded.emit(attachment);\r\n\r\n // Reset so same file can be picked again\r\n (e.target as HTMLInputElement).value = '';\r\n }\r\n\r\n private removeAttachment(index: number) {\r\n this.attachments = this.attachments.filter((_, i) => i !== index);\r\n }\r\n\r\n private formatFileSize(bytes: number): string {\r\n if (bytes < 1024) return `${bytes} B`;\r\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\r\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\r\n }\r\n\r\n private getFileExtension(name: string): string {\r\n const ext = name.split('.').pop()?.toLowerCase() ?? '';\r\n return ext;\r\n }\r\n\r\n // Syncs toolbar active states to current editor selection\r\n private syncActiveStates(editor: Editor) {\r\n this.isBold = editor.isActive('bold');\r\n this.isItalic = editor.isActive('italic');\r\n this.isUnderline = editor.isActive('underline');\r\n this.isH1 = editor.isActive('heading', { level: 1 });\r\n this.isH2 = editor.isActive('heading', { level: 2 });\r\n this.isQuote = editor.isActive('blockquote');\r\n this.isLink = editor.isActive('link');\r\n this.isBulletList = editor.isActive('bulletList');\r\n this.isOrderedList = editor.isActive('orderedList');\r\n }\r\n\r\n // Handles all toolbar action events from gb-wysiwyg-toolbar\r\n private handleToolbarAction(ev: CustomEvent<string>) {\r\n const e = this.editor;\r\n if (!e) return;\r\n\r\n const actionMap: Record<string, () => void> = {\r\n bold: () => e.chain().focus().toggleBold().run(),\r\n italic: () => e.chain().focus().toggleItalic().run(),\r\n underline: () => e.chain().focus().toggleUnderline().run(),\r\n h1: () => e.chain().focus().toggleHeading({ level: 1 }).run(),\r\n h2: () => e.chain().focus().toggleHeading({ level: 2 }).run(),\r\n quote: () => e.chain().focus().toggleBlockquote().run(),\r\n link: () => {\r\n const url = window.prompt('Enter URL');\r\n if (url) e.chain().focus().setLink({ href: url }).run();\r\n },\r\n bulletList: () => e.chain().focus().toggleBulletList().run(),\r\n orderedList: () => e.chain().focus().toggleOrderedList().run(),\r\n photo: () => this.fileInputEl?.click(),\r\n attachment: () => this.attachmentInputEl?.click(),\r\n };\r\n\r\n actionMap[ev.detail]?.();\r\n this.syncActiveStates(e);\r\n }\r\n\r\n @Watch('value')\r\n handleValueChange(newValue: string) {\r\n if (this.editor && newValue) {\r\n this.editor.commands.setContent(newValue);\r\n }\r\n }\r\n\r\n @Method()\r\n async getRichTextHTML(): Promise<string> {\r\n return this.editor?.getHTML() ?? '';\r\n }\r\n\r\n @Method()\r\n async clearContent(): Promise<void> {\r\n this.editor?.commands.clearContent();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.editor?.destroy();\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n class={{\r\n 'gb-rich-text': true,\r\n 'gb-rich-text--focused': this.isFocused,\r\n 'gb-rich-text--error': this.destructive,\r\n 'gb-rich-text--disabled': this.disabled,\r\n }}\r\n >\r\n {this.label && <label class=\"gb-rich-text__label text-sm-medium\">{this.label}</label>}\r\n\r\n <div class=\"gb-rich-text__wrapper\">\r\n <gb-wysiwyg-toolbar\r\n disabledIcons={this.disabledIcons}\r\n is-bold={this.isBold}\r\n is-italic={this.isItalic}\r\n is-h1={this.isH1}\r\n is-h2={this.isH2}\r\n is-underline={this.isUnderline}\r\n is-quote={this.isQuote}\r\n is-link={this.isLink}\r\n is-bullet-list={this.isBulletList}\r\n is-ordered-list={this.isOrderedList}\r\n onToolbarAction={(ev: CustomEvent<string>) => this.handleToolbarAction(ev)}\r\n ></gb-wysiwyg-toolbar>\r\n\r\n {this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class=\"alert_circle\">\r\n <path\r\n d=\"M7.99483 9.99998H8.00081M8.00016 7.99998V5.33331M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"var(--color-icon-danger, #B51726)\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n {this.attachments.length > 0 && (\r\n <div class=\"gb-rich-text__attachments\">\r\n {this.attachments.map((attachment, index) => (\r\n <div class=\"gb-rich-text__attachment-item\" key={index}>\r\n {/* <span class=\"gb-rich-text__attachment-icon\">{this.getFileIcon(attachment.type)}</span> /}\r\n <span class=\"gb-rich-text__attachment-icon\">\r\n <gb-file-type-icon file-type={this.getFileExtension(attachment.name)} file-style=\"default\"></gb-file-type-icon>\r\n </span>\r\n <div class=\"gb-rich-text__attachment-info\">\r\n <span class=\"gb-rich-text__attachment-name text-sm-medium\">{attachment.name}</span>\r\n <span class=\"gb-rich-text__attachment-size text-xs-regular\">{this.formatFileSize(attachment.size)}</span>\r\n </div>\r\n {/ <button\r\n class=\"gb-rich-text__attachment-remove\"\r\n onMouseDown={(ev: MouseEvent) => {\r\n ev.preventDefault();\r\n this.removeAttachment(index);\r\n }}\r\n aria-label=\"Remove attachment\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\r\n </svg>\r\n </button> /}\r\n <gb-button-close color=\"gray\" size=\"sm\" onClick={() => this.removeAttachment(index)}></gb-button-close>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {/ Hidden file input for local image selection /}\r\n <input\r\n ref={el => (this.fileInputEl = el as HTMLInputElement)}\r\n type=\"file\"\r\n accept=\"image/\"\r\n style={{ display: 'none' }}\r\n onChange={(e: Event) => this.handleFileInput(e)}\r\n />\r\n\r\n {/* Hidden file input for attachments /}\r\n <input\r\n ref={el => (this.attachmentInputEl = el as HTMLInputElement)}\r\n type=\"file\"\r\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.zip\"\r\n style={{ display: 'none' }}\r\n onChange={(e: Event) => this.handleAttachmentInput(e)}\r\n />\r\n <div class=\"gb-rich-text__content\"></div>\r\n </div>\r\n\r\n {/ {(this.showHintText \|\| this.errorText) && <span class=\"gb-rich-text__hint text-sm-regular\">{this.destructive ? this.errorText : this.hintText}</span>} */}\r\n {this.showHintText && (\r\n <>{!this.destructive ? <p class=\"gb-rich-text__hint text-sm-regular\">{this.hintText}</p> : <p class=\"error_text text-sm-regular\">{this.errorText}</p>}</>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"gb-rich-text.js","sourceRoot":"","sources":["../../../src/components/gb-rich-text/gb-rich-text.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, Method, Prop, State, Watch, h, Fragment } from '@stencil/core';\r\nimport { Editor } from '@tiptap/core';\r\nimport Link from '@tiptap/extension-link';\r\nimport Placeholder from '@tiptap/extension-placeholder';\r\nimport Underline from '@tiptap/extension-underline';\r\nimport StarterKit from '@tiptap/starter-kit';\r\nimport FileHandler from '@tiptap/extension-file-handler';\r\nimport { ResizableImage } from './resizable-image';\r\n\r\n@Component({\r\n tag: 'gb-rich-text',\r\n styleUrl: 'gb-rich-text.css',\r\n shadow: false,\r\n})\r\nexport class GbRichText {\r\n @Prop() label: string = '';\r\n @Prop() placeholder: string = '';\r\n @Prop() showHintText: boolean = true;\r\n @Prop() hintText: string = '';\r\n @Prop() value: any;\r\n @Prop() disabled: boolean = false;\r\n @Prop() destructive: boolean = false;\r\n @Prop() errorText: string = '';\r\n // Toolbar icons to disable, e.g. disabled-icons=\"photo,attachment\" or ['photo', 'attachment'].\r\n @Prop() disabledIcons: string \| string[] = [];\r\n\r\n // Active states tracked for toolbar highlighting\r\n @State() isFocused: boolean = false;\r\n @State() isBold: boolean = false;\r\n @State() isItalic: boolean = false;\r\n @State() isH1: boolean = false;\r\n @State() isH2: boolean = false;\r\n @State() isUnderline: boolean = false;\r\n @State() isQuote: boolean = false;\r\n @State() isLink: boolean = false;\r\n @State() isBulletList: boolean = false;\r\n @State() isOrderedList: boolean = false;\r\n @State() attachments: { file: File; name: string; size: number; type: string }[] = [];\r\n @Event() richTextValueChanged: EventEmitter<{ json: any; html: any }>;\r\n @Event() richTextAttachmentAdded: EventEmitter<{ file: File; name: string; size: number; type: string }>;\r\n @Event() gbBlur: EventEmitter<void>;\r\n @Event() gbFocus: EventEmitter<void>;\r\n\r\n @Element() el: HTMLElement;\r\n\r\n private editor: Editor;\r\n private fileInputEl: HTMLInputElement;\r\n private attachmentInputEl: HTMLInputElement;\r\n\r\n componentDidLoad() {\r\n const editorEl = this.el.querySelector('.gb-rich-text__content') as HTMLElement;\r\n\r\n this.editor = new Editor({\r\n element: editorEl,\r\n extensions: [\r\n StarterKit,\r\n Underline,\r\n Link.configure({ openOnClick: false }),\r\n ResizableImage,\r\n Placeholder.configure({ placeholder: this.placeholder }),\r\n FileHandler.configure({\r\n allowedMimeTypes: ['image/jpeg', 'image/png', 'image/gif'],\r\n }),\r\n ],\r\n content: this.value,\r\n onUpdate: ({ editor }) => {\r\n const json = editor.getJSON();\r\n const html = editor.getHTML();\r\n this.richTextValueChanged.emit({ json: json, html: html });\r\n this.syncActiveStates(editor);\r\n },\r\n onSelectionUpdate: ({ editor }) => {\r\n this.syncActiveStates(editor);\r\n },\r\n onFocus: () => {\r\n this.isFocused = true;\r\n this.gbFocus.emit();\r\n },\r\n onBlur: () => {\r\n this.isFocused = false;\r\n this.gbBlur.emit();\r\n },\r\n });\r\n }\r\n\r\n private handleFileInput(e: Event) {\r\n const file = (e.target as HTMLInputElement).files?.[0];\r\n if (!file) return;\r\n const reader = new FileReader();\r\n reader.onload = () => {\r\n const src = reader.result as string;\r\n this.editor.chain().focus().setImage({ src }).run();\r\n };\r\n reader.readAsDataURL(file);\r\n // Reset so same file can be picked again\r\n (e.target as HTMLInputElement).value = '';\r\n }\r\n\r\n private handleAttachmentInput(e: Event) {\r\n const file = (e.target as HTMLInputElement).files?.[0];\r\n if (!file) return;\r\n\r\n const attachment = { file, name: file.name, size: file.size, type: file.type };\r\n\r\n // Push to local state so UI renders it\r\n this.attachments = [...this.attachments, attachment];\r\n\r\n // Emit to Angular parent\r\n this.richTextAttachmentAdded.emit(attachment);\r\n\r\n // Reset so same file can be picked again\r\n (e.target as HTMLInputElement).value = '';\r\n }\r\n\r\n private removeAttachment(index: number) {\r\n this.attachments = this.attachments.filter((_, i) => i !== index);\r\n }\r\n\r\n private formatFileSize(bytes: number): string {\r\n if (bytes < 1024) return `${bytes} B`;\r\n if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;\r\n return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;\r\n }\r\n\r\n private getFileExtension(name: string): string {\r\n const ext = name.split('.').pop()?.toLowerCase() ?? '';\r\n return ext;\r\n }\r\n\r\n // Syncs toolbar active states to current editor selection\r\n private syncActiveStates(editor: Editor) {\r\n this.isBold = editor.isActive('bold');\r\n this.isItalic = editor.isActive('italic');\r\n this.isUnderline = editor.isActive('underline');\r\n this.isH1 = editor.isActive('heading', { level: 1 });\r\n this.isH2 = editor.isActive('heading', { level: 2 });\r\n this.isQuote = editor.isActive('blockquote');\r\n this.isLink = editor.isActive('link');\r\n this.isBulletList = editor.isActive('bulletList');\r\n this.isOrderedList = editor.isActive('orderedList');\r\n }\r\n\r\n // Handles all toolbar action events from gb-wysiwyg-toolbar\r\n private handleToolbarAction(ev: CustomEvent<string>) {\r\n const e = this.editor;\r\n if (!e) return;\r\n\r\n const actionMap: Record<string, () => void> = {\r\n bold: () => e.chain().focus().toggleBold().run(),\r\n italic: () => e.chain().focus().toggleItalic().run(),\r\n underline: () => e.chain().focus().toggleUnderline().run(),\r\n h1: () => e.chain().focus().toggleHeading({ level: 1 }).run(),\r\n h2: () => e.chain().focus().toggleHeading({ level: 2 }).run(),\r\n quote: () => e.chain().focus().toggleBlockquote().run(),\r\n link: () => {\r\n const url = window.prompt('Enter URL');\r\n if (url) e.chain().focus().setLink({ href: url }).run();\r\n },\r\n bulletList: () => e.chain().focus().toggleBulletList().run(),\r\n orderedList: () => e.chain().focus().toggleOrderedList().run(),\r\n photo: () => this.fileInputEl?.click(),\r\n attachment: () => this.attachmentInputEl?.click(),\r\n };\r\n\r\n actionMap[ev.detail]?.();\r\n this.syncActiveStates(e);\r\n }\r\n\r\n @Watch('value')\r\n handleValueChange(newValue: string) {\r\n if (this.editor && newValue) {\r\n this.editor.commands.setContent(newValue);\r\n }\r\n }\r\n\r\n @Method()\r\n async getRichTextHTML(): Promise<string> {\r\n return this.editor?.getHTML() ?? '';\r\n }\r\n\r\n @Method()\r\n async clearContent(): Promise<void> {\r\n this.editor?.commands.clearContent();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.editor?.destroy();\r\n }\r\n\r\n render() {\r\n return (\r\n <div\r\n class={{\r\n 'gb-rich-text': true,\r\n 'gb-rich-text--focused': this.isFocused,\r\n 'gb-rich-text--error': this.destructive,\r\n 'gb-rich-text--disabled': this.disabled,\r\n }}\r\n >\r\n {this.label && <label class=\"gb-rich-text__label text-sm-medium\">{this.label}</label>}\r\n\r\n <div class=\"gb-rich-text__wrapper\">\r\n <gb-wysiwyg-toolbar\r\n disabledIcons={this.disabledIcons}\r\n is-bold={this.isBold}\r\n is-italic={this.isItalic}\r\n is-h1={this.isH1}\r\n is-h2={this.isH2}\r\n is-underline={this.isUnderline}\r\n is-quote={this.isQuote}\r\n is-link={this.isLink}\r\n is-bullet-list={this.isBulletList}\r\n is-ordered-list={this.isOrderedList}\r\n onToolbarAction={(ev: CustomEvent<string>) => this.handleToolbarAction(ev)}\r\n ></gb-wysiwyg-toolbar>\r\n\r\n {this.destructive && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class=\"alert_circle\">\r\n <path\r\n d=\"M7.99483 9.99998H8.00081M8.00016 7.99998V5.33331M14.6668 7.99998C14.6668 11.6819 11.6821 14.6666 8.00016 14.6666C4.31826 14.6666 1.3335 11.6819 1.3335 7.99998C1.3335 4.31808 4.31826 1.33331 8.00016 1.33331C11.6821 1.33331 14.6668 4.31808 14.6668 7.99998Z\"\r\n stroke=\"var(--color-icon-danger, #B51726)\"\r\n stroke-width=\"1.33333\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n {this.attachments.length > 0 && (\r\n <div class=\"gb-rich-text__attachments\">\r\n {this.attachments.map((attachment, index) => (\r\n <div class=\"gb-rich-text__attachment-item\" key={index}>\r\n {/* <span class=\"gb-rich-text__attachment-icon\">{this.getFileIcon(attachment.type)}</span> /}\r\n <span class=\"gb-rich-text__attachment-icon\">\r\n <gb-file-type-icon file-type={this.getFileExtension(attachment.name)} file-style=\"default\"></gb-file-type-icon>\r\n </span>\r\n <div class=\"gb-rich-text__attachment-info\">\r\n <span class=\"gb-rich-text__attachment-name text-sm-medium\">{attachment.name}</span>\r\n <span class=\"gb-rich-text__attachment-size text-xs-regular\">{this.formatFileSize(attachment.size)}</span>\r\n </div>\r\n {/ <button\r\n class=\"gb-rich-text__attachment-remove\"\r\n onMouseDown={(ev: MouseEvent) => {\r\n ev.preventDefault();\r\n this.removeAttachment(index);\r\n }}\r\n aria-label=\"Remove attachment\"\r\n >\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M12 4L4 12M4 4l8 8\" stroke=\"currentColor\" stroke-width=\"1.5\" stroke-linecap=\"round\" />\r\n </svg>\r\n </button> /}\r\n <gb-button-close color=\"gray\" size=\"sm\" onClick={() => this.removeAttachment(index)}></gb-button-close>\r\n </div>\r\n ))}\r\n </div>\r\n )}\r\n\r\n {/ Hidden file input for local image selection /}\r\n <input\r\n ref={el => (this.fileInputEl = el as HTMLInputElement)}\r\n type=\"file\"\r\n accept=\"image/\"\r\n style={{ display: 'none' }}\r\n onChange={(e: Event) => this.handleFileInput(e)}\r\n />\r\n\r\n {/* Hidden file input for attachments /}\r\n <input\r\n ref={el => (this.attachmentInputEl = el as HTMLInputElement)}\r\n type=\"file\"\r\n accept=\".pdf,.doc,.docx,.xls,.xlsx,.csv,.txt,.zip\"\r\n style={{ display: 'none' }}\r\n onChange={(e: Event) => this.handleAttachmentInput(e)}\r\n />\r\n <div class=\"gb-rich-text__content\"></div>\r\n </div>\r\n\r\n {/ {(this.showHintText \|\| this.errorText) && <span class=\"gb-rich-text__hint text-sm-regular\">{this.destructive ? this.errorText : this.hintText}</span>} */}\r\n {this.showHintText && (\r\n <>{!this.destructive ? <p class=\"gb-rich-text__hint text-sm-regular\">{this.hintText}</p> : <p class=\"error_text text-sm-regular\">{this.errorText}</p>}</>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"]}