globuswebcomponents 0.2.8 → 0.2.9

package/dist/cjs/globuscomponents.cjs.js

@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["gb-avatar-dropdown.cjs",[[1,"gb-avatar-dropdown",{"type":[1],"text":[4],"showProfile":[4,"show-profile"],"showDarkTheme":[4,"show-dark-theme"],"showLogOut":[4,"show-log-out"],"listGroup1":[4,"list-group-1"],"listGroup2":[4,"list-group-2"],"listGroup3":[4,"list-group-3"]}]]],["gb-tag.cjs",[[1,"gb-tag",{"size":[1],"icon":[1],"checkbox":[4],"closeButton":[4,"close-button"],"count":[4]}]]],["gb-avatar-group.cjs",[[1,"gb-avatar-group",{"size":[1],"moreUsers":[4,"more-users"],"addMoreButton":[4,"add-more-button"],"text":[4],"state":[1]}]]],["gb-file-upload.cjs",[[1,"gb-file-upload",{"icon":[1],"type":[1],"heightSize":[1,"height-size"],"state":[1],"destructive":[4],"showLabel":[4,"show-label"],"buttonState":[1,"button-state"]}]]],["gb-input-dropdown-menu-item.cjs",[[1,"gb-input-dropdown-menu-item",{"type":[1],"supportingText":[4,"supporting-text"],"selected":[4],"state":[1],"checkboxStates":[1,"checkbox-states"]}]]],["gb-badge.cjs",[[1,"gb-badge",{"size":[1],"icon":[1],"iconLeadingSrc":[1,"icon-leading-src"],"iconTrailingSrc":[1,"icon-trailing-src"],"color":[1],"type":[1],"closeButton":[4,"close-button"]}]]],["gb-avatar-profile-photo.cjs",[[1,"gb-avatar-profile-photo",{"placeholder":[4],"text":[4],"size":[1],"verified":[4],"icon":[1]}]]],["gb-help-dropdown.cjs",[[1,"gb-help-dropdown",{"showLogError":[4,"show-log-error"]}]]],["gb-input-dropdown.cjs",[[1,"gb-input-dropdown",{"type":[1],"state":[1],"size":[1],"showLabel":[4,"show-label"],"label":[1],"showPlaceholder":[4,"show-placeholder"],"placeholderText":[1,"placeholder-text"],"showHintText":[4,"show-hint-text"],"hintText":[1,"hint-text"],"showHelpIcon":[4,"show-help-icon"],"iconSwap":[1,"icon-swap"]}]]],["gb-slider.cjs",[[1,"gb-slider",{"min":[2],"max":[2],"thumbType":[1,"thumb-type"],"leftValue":[32],"rightValue":[32]}]]],["gb-collapse-button.cjs",[[1,"gb-collapse-button",{"color":[1],"currentIconDirection":[1025,"current-icon-direction"],"isHovered":[1028,"is-hovered"]}]]],["gb-notification-panel.cjs",[[1,"gb-notification-panel",{"state":[1],"notifications":[32]},[[0,"slotchange","handleSlotChange"]]]]],["gb-toggle.cjs",[[1,"gb-toggle",{"size":[1],"state":[1],"supportingText":[4,"supporting-text"]}]]],["gb-btn_2.cjs",[[4,"gb-btn",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"]}],[1,"test-tooltip",{"showArrow":[4,"show-arrow"],"arrowPosition":[1,"arrow-position"],"visible":[32]}]]],["gb-checkbox-group.cjs",[[1,"gb-checkbox-group",{"size":[1],"breakpoint":[1],"icon":[1],"selected":[4],"type":[1]}]]],["gb-file-type-icon.cjs",[[1,"gb-file-type-icon"]]],["gb-header-icon.cjs",[[1,"gb-header-icon",{"state":[1],"showIndicator":[4,"show-indicator"]}]]],["gb-input-field.cjs",[[1,"gb-input-field",{"size":[1],"inputType":[1,"input-type"],"destructive":[4],"helpIcon":[4,"help-icon"],"icon":[1],"placeholder":[1],"label":[1]}]]],["gb-megainput-field.cjs",[[1,"gb-megainput-field",{"size":[1]}]]],["gb-notification-content.cjs",[[1,"gb-notification-content",{"icon":[1],"label":[1],"time":[1],"supportingText":[1,"supporting-text"]}]]],["gb-progress-circle.cjs",[[1,"gb-progress-circle",{"size":[1],"shape":[1],"label":[4],"progress":[2]}]]],["gb-scrollbar.cjs",[[1,"gb-scrollbar",{"length":[1]}]]],["gb-textarea-input-field.cjs",[[1,"gb-textarea-input-field",{"type":[1],"destructive":[4],"placeholder":[1],"label":[1]}]]],["gb-wysiwyg-editor-icon.cjs",[[1,"gb-wysiwyg-editor-icon"]]],["gb-tooltip.cjs",[[1,"gb-tooltip",{"arrow":[1],"supportingText":[4,"supporting-text"]}]]],["gb-file-upload-item-base.cjs",[[1,"gb-file-upload-item-base",{"icon":[1],"state":[1],"heightSize":[1,"height-size"],"fileType":[1,"file-type"],"buttonState":[1,"button-state"]}]]],["gb-avatar-label-group.cjs",[[1,"gb-avatar-label-group",{"size":[1],"statusIcon":[1,"status-icon"],"state":[1],"placeholder":[4],"text":[4]}]]],["gb-avatar-add-button.cjs",[[1,"gb-avatar-add-button",{"size":[1],"showToolTip":[1028,"show-tool-tip"],"state":[1],"el":[16]}]]],["gb-slider-control-handle.cjs",[[1,"gb-slider-control-handle",{"value":[2],"type":[1],"isHovered":[32],"isFocused":[32]}]]],["gb-badge-close.cjs",[[1,"gb-badge-close",{"color":[1],"type":[1]}]]],["gb-toggle-base.cjs",[[1,"gb-toggle-base",{"size":[1],"state":[1]}]]],["gb-dropdown-items-with-shortcut.cjs",[[1,"gb-dropdown-items-with-shortcut",{"icon":[4],"iconSrc":[1,"icon-src"],"checkbox":[4],"shortcut":[4],"shortcutIcon":[1,"shortcut-icon"],"label":[1],"checkboxStates":[1,"checkbox-states"],"state":[1]}]]],["gb-tag-checkbox_3.cjs",[[1,"gb-tag-checkbox",{"checked":[4],"size":[1],"disabled":[4]}],[1,"gb-tag-close",{"size":[1]}],[1,"gb-tag-count",{"size":[1]}]]],["gb-button_3.cjs",[[1,"gb-progress-bar",{"progress":[2],"showLabel":[4,"show-label"],"labelPosition":[1,"label-position"],"el":[16]}],[1,"gb-button-close",{"size":[1],"color":[1]}],[1,"gb-button",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"],"leadingIconSvg":[32],"trailingIconSvg":[32]}]]],["gb-checkbox_2.cjs",[[1,"gb-checkbox",{"checked":[4],"indeterminate":[4],"size":[1],"type":[1],"state":[1],"supportingText":[4,"supporting-text"]}],[1,"gb-checkbox-base",{"state":[1025],"size":[1],"type":[1],"checked":[1028],"indeterminate":[1028]}]]],["gb-avatar_3.cjs",[[1,"gb-avatar",{"size":[1],"placeholder":[4],"text":[4],"statusIcon":[1,"status-icon"],"state":[1],"icon":[1],"weight":[1]}],[1,"gb-avatar-contrast-inner-border",{"weight":[1],"size":[1]}],[1,"gb-status-indicator",{"statusIcon":[1,"status-icon"],"size":[1],"state":[1],"indicatorStateClass":[1,"indicator-state-class"]}]]]], options);
+  return index.bootstrapLazy([["gb-avatar-dropdown.cjs",[[1,"gb-avatar-dropdown",{"type":[1],"text":[4],"showProfile":[4,"show-profile"],"showDarkTheme":[4,"show-dark-theme"],"showLogOut":[4,"show-log-out"],"listGroup1":[4,"list-group-1"],"listGroup2":[4,"list-group-2"],"listGroup3":[4,"list-group-3"]}]]],["gb-tag.cjs",[[1,"gb-tag",{"size":[1],"icon":[1],"checkbox":[4],"closeButton":[4,"close-button"],"count":[4]}]]],["gb-avatar-group.cjs",[[1,"gb-avatar-group",{"size":[1],"moreUsers":[4,"more-users"],"addMoreButton":[4,"add-more-button"],"text":[4],"state":[1]}]]],["gb-file-upload.cjs",[[1,"gb-file-upload",{"icon":[1],"type":[1],"heightSize":[1,"height-size"],"state":[1],"destructive":[4],"showLabel":[4,"show-label"],"buttonState":[1,"button-state"]}]]],["gb-input-dropdown-menu-item.cjs",[[1,"gb-input-dropdown-menu-item",{"type":[1],"supportingText":[4,"supporting-text"],"selected":[4],"state":[1],"checkboxStates":[1,"checkbox-states"]}]]],["gb-badge.cjs",[[1,"gb-badge",{"size":[1],"icon":[1],"iconLeadingSrc":[1,"icon-leading-src"],"iconTrailingSrc":[1,"icon-trailing-src"],"color":[1],"type":[1],"closeButton":[4,"close-button"]}]]],["gb-avatar-profile-photo.cjs",[[1,"gb-avatar-profile-photo",{"placeholder":[4],"text":[4],"size":[1],"verified":[4],"icon":[1]}]]],["gb-help-dropdown.cjs",[[1,"gb-help-dropdown",{"showLogError":[4,"show-log-error"]}]]],["gb-input-dropdown.cjs",[[1,"gb-input-dropdown",{"type":[1],"state":[1],"size":[1],"showLabel":[4,"show-label"],"label":[1],"showPlaceholder":[4,"show-placeholder"],"placeholderText":[1,"placeholder-text"],"showHintText":[4,"show-hint-text"],"hintText":[1,"hint-text"],"showHelpIcon":[4,"show-help-icon"],"iconSwap":[1,"icon-swap"]}]]],["gb-slider.cjs",[[1,"gb-slider",{"min":[2],"max":[2],"thumbType":[1,"thumb-type"],"leftValue":[32],"rightValue":[32]}]]],["gb-collapse-button.cjs",[[1,"gb-collapse-button",{"color":[1],"currentIconDirection":[1025,"current-icon-direction"],"isHovered":[1028,"is-hovered"]}]]],["gb-notification-panel.cjs",[[1,"gb-notification-panel",{"state":[1],"notifications":[32]},[[0,"slotchange","handleSlotChange"]]]]],["gb-toggle.cjs",[[1,"gb-toggle",{"size":[1],"state":[1],"supportingText":[4,"supporting-text"]}]]],["gb-checkbox-group.cjs",[[1,"gb-checkbox-group",{"size":[1],"breakpoint":[1],"icon":[1],"selected":[4],"type":[1]}]]],["gb-file-type-icon.cjs",[[1,"gb-file-type-icon"]]],["gb-header-icon.cjs",[[1,"gb-header-icon",{"state":[1],"showIndicator":[4,"show-indicator"]}]]],["gb-input-field.cjs",[[1,"gb-input-field",{"size":[1],"inputType":[1,"input-type"],"destructive":[4],"helpIcon":[4,"help-icon"],"icon":[1],"placeholder":[1],"label":[1]}]]],["gb-megainput-field.cjs",[[1,"gb-megainput-field",{"size":[1]}]]],["gb-notification-content.cjs",[[1,"gb-notification-content",{"icon":[1],"label":[1],"time":[1],"supportingText":[1,"supporting-text"]}]]],["gb-progress-circle.cjs",[[1,"gb-progress-circle",{"size":[1],"shape":[1],"label":[4],"progress":[2]}]]],["gb-scrollbar.cjs",[[1,"gb-scrollbar",{"length":[1]}]]],["gb-textarea-input-field.cjs",[[1,"gb-textarea-input-field",{"type":[1],"destructive":[4],"placeholder":[1],"label":[1]}]]],["gb-wysiwyg-editor-icon.cjs",[[1,"gb-wysiwyg-editor-icon"]]],["gb-tooltip.cjs",[[1,"gb-tooltip",{"arrow":[1],"supportingText":[4,"supporting-text"]}]]],["gb-button-close_2.cjs",[[1,"gb-progress-bar",{"progress":[2],"showLabel":[4,"show-label"],"labelPosition":[1,"label-position"],"el":[16]}],[1,"gb-button-close",{"size":[1],"color":[1]}]]],["gb-file-upload-item-base.cjs",[[1,"gb-file-upload-item-base",{"icon":[1],"state":[1],"heightSize":[1,"height-size"],"fileType":[1,"file-type"],"buttonState":[1,"button-state"]}]]],["gb-avatar-label-group.cjs",[[1,"gb-avatar-label-group",{"size":[1],"statusIcon":[1,"status-icon"],"state":[1],"placeholder":[4],"text":[4]}]]],["gb-avatar-add-button.cjs",[[1,"gb-avatar-add-button",{"size":[1],"showToolTip":[1028,"show-tool-tip"],"state":[1],"el":[16]}]]],["gb-slider-control-handle.cjs",[[1,"gb-slider-control-handle",{"value":[2],"type":[1],"isHovered":[32],"isFocused":[32]}]]],["gb-badge-close.cjs",[[1,"gb-badge-close",{"color":[1],"type":[1]}]]],["gb-toggle-base.cjs",[[1,"gb-toggle-base",{"size":[1],"state":[1]}]]],["gb-dropdown-items-with-shortcut.cjs",[[1,"gb-dropdown-items-with-shortcut",{"icon":[4],"iconSrc":[1,"icon-src"],"checkbox":[4],"shortcut":[4],"shortcutIcon":[1,"shortcut-icon"],"label":[1],"checkboxStates":[1,"checkbox-states"],"state":[1]}]]],["gb-btn_3.cjs",[[4,"gb-btn",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"],"leadingIconSvg":[32],"trailingIconSvg":[32]}],[1,"test-tooltip",{"showArrow":[4,"show-arrow"],"arrowPosition":[1,"arrow-position"],"visible":[32]}],[1,"gb-button",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"],"leadingIconSvg":[32],"trailingIconSvg":[32]}]]],["gb-tag-checkbox_3.cjs",[[1,"gb-tag-checkbox",{"checked":[4],"size":[1],"disabled":[4]}],[1,"gb-tag-close",{"size":[1]}],[1,"gb-tag-count",{"size":[1]}]]],["gb-checkbox_2.cjs",[[1,"gb-checkbox",{"checked":[4],"indeterminate":[4],"size":[1],"type":[1],"state":[1],"supportingText":[4,"supporting-text"]}],[1,"gb-checkbox-base",{"state":[1025],"size":[1],"type":[1],"checked":[1028],"indeterminate":[1028]}]]],["gb-avatar_3.cjs",[[1,"gb-avatar",{"size":[1],"placeholder":[4],"text":[4],"statusIcon":[1,"status-icon"],"state":[1],"icon":[1],"weight":[1]}],[1,"gb-avatar-contrast-inner-border",{"weight":[1],"size":[1]}],[1,"gb-status-indicator",{"statusIcon":[1,"status-icon"],"size":[1],"state":[1],"indicatorStateClass":[1,"indicator-state-class"]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/loader.cjs.js

@@ -8,7 +8,7 @@ const appGlobals = require('./app-globals-3a1e7e63.js');
 const defineCustomElements = async (win, options) => {
   if (typeof window === 'undefined') return undefined;
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["gb-avatar-dropdown.cjs",[[1,"gb-avatar-dropdown",{"type":[1],"text":[4],"showProfile":[4,"show-profile"],"showDarkTheme":[4,"show-dark-theme"],"showLogOut":[4,"show-log-out"],"listGroup1":[4,"list-group-1"],"listGroup2":[4,"list-group-2"],"listGroup3":[4,"list-group-3"]}]]],["gb-tag.cjs",[[1,"gb-tag",{"size":[1],"icon":[1],"checkbox":[4],"closeButton":[4,"close-button"],"count":[4]}]]],["gb-avatar-group.cjs",[[1,"gb-avatar-group",{"size":[1],"moreUsers":[4,"more-users"],"addMoreButton":[4,"add-more-button"],"text":[4],"state":[1]}]]],["gb-file-upload.cjs",[[1,"gb-file-upload",{"icon":[1],"type":[1],"heightSize":[1,"height-size"],"state":[1],"destructive":[4],"showLabel":[4,"show-label"],"buttonState":[1,"button-state"]}]]],["gb-input-dropdown-menu-item.cjs",[[1,"gb-input-dropdown-menu-item",{"type":[1],"supportingText":[4,"supporting-text"],"selected":[4],"state":[1],"checkboxStates":[1,"checkbox-states"]}]]],["gb-badge.cjs",[[1,"gb-badge",{"size":[1],"icon":[1],"iconLeadingSrc":[1,"icon-leading-src"],"iconTrailingSrc":[1,"icon-trailing-src"],"color":[1],"type":[1],"closeButton":[4,"close-button"]}]]],["gb-avatar-profile-photo.cjs",[[1,"gb-avatar-profile-photo",{"placeholder":[4],"text":[4],"size":[1],"verified":[4],"icon":[1]}]]],["gb-help-dropdown.cjs",[[1,"gb-help-dropdown",{"showLogError":[4,"show-log-error"]}]]],["gb-input-dropdown.cjs",[[1,"gb-input-dropdown",{"type":[1],"state":[1],"size":[1],"showLabel":[4,"show-label"],"label":[1],"showPlaceholder":[4,"show-placeholder"],"placeholderText":[1,"placeholder-text"],"showHintText":[4,"show-hint-text"],"hintText":[1,"hint-text"],"showHelpIcon":[4,"show-help-icon"],"iconSwap":[1,"icon-swap"]}]]],["gb-slider.cjs",[[1,"gb-slider",{"min":[2],"max":[2],"thumbType":[1,"thumb-type"],"leftValue":[32],"rightValue":[32]}]]],["gb-collapse-button.cjs",[[1,"gb-collapse-button",{"color":[1],"currentIconDirection":[1025,"current-icon-direction"],"isHovered":[1028,"is-hovered"]}]]],["gb-notification-panel.cjs",[[1,"gb-notification-panel",{"state":[1],"notifications":[32]},[[0,"slotchange","handleSlotChange"]]]]],["gb-toggle.cjs",[[1,"gb-toggle",{"size":[1],"state":[1],"supportingText":[4,"supporting-text"]}]]],["gb-btn_2.cjs",[[4,"gb-btn",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"]}],[1,"test-tooltip",{"showArrow":[4,"show-arrow"],"arrowPosition":[1,"arrow-position"],"visible":[32]}]]],["gb-checkbox-group.cjs",[[1,"gb-checkbox-group",{"size":[1],"breakpoint":[1],"icon":[1],"selected":[4],"type":[1]}]]],["gb-file-type-icon.cjs",[[1,"gb-file-type-icon"]]],["gb-header-icon.cjs",[[1,"gb-header-icon",{"state":[1],"showIndicator":[4,"show-indicator"]}]]],["gb-input-field.cjs",[[1,"gb-input-field",{"size":[1],"inputType":[1,"input-type"],"destructive":[4],"helpIcon":[4,"help-icon"],"icon":[1],"placeholder":[1],"label":[1]}]]],["gb-megainput-field.cjs",[[1,"gb-megainput-field",{"size":[1]}]]],["gb-notification-content.cjs",[[1,"gb-notification-content",{"icon":[1],"label":[1],"time":[1],"supportingText":[1,"supporting-text"]}]]],["gb-progress-circle.cjs",[[1,"gb-progress-circle",{"size":[1],"shape":[1],"label":[4],"progress":[2]}]]],["gb-scrollbar.cjs",[[1,"gb-scrollbar",{"length":[1]}]]],["gb-textarea-input-field.cjs",[[1,"gb-textarea-input-field",{"type":[1],"destructive":[4],"placeholder":[1],"label":[1]}]]],["gb-wysiwyg-editor-icon.cjs",[[1,"gb-wysiwyg-editor-icon"]]],["gb-tooltip.cjs",[[1,"gb-tooltip",{"arrow":[1],"supportingText":[4,"supporting-text"]}]]],["gb-file-upload-item-base.cjs",[[1,"gb-file-upload-item-base",{"icon":[1],"state":[1],"heightSize":[1,"height-size"],"fileType":[1,"file-type"],"buttonState":[1,"button-state"]}]]],["gb-avatar-label-group.cjs",[[1,"gb-avatar-label-group",{"size":[1],"statusIcon":[1,"status-icon"],"state":[1],"placeholder":[4],"text":[4]}]]],["gb-avatar-add-button.cjs",[[1,"gb-avatar-add-button",{"size":[1],"showToolTip":[1028,"show-tool-tip"],"state":[1],"el":[16]}]]],["gb-slider-control-handle.cjs",[[1,"gb-slider-control-handle",{"value":[2],"type":[1],"isHovered":[32],"isFocused":[32]}]]],["gb-badge-close.cjs",[[1,"gb-badge-close",{"color":[1],"type":[1]}]]],["gb-toggle-base.cjs",[[1,"gb-toggle-base",{"size":[1],"state":[1]}]]],["gb-dropdown-items-with-shortcut.cjs",[[1,"gb-dropdown-items-with-shortcut",{"icon":[4],"iconSrc":[1,"icon-src"],"checkbox":[4],"shortcut":[4],"shortcutIcon":[1,"shortcut-icon"],"label":[1],"checkboxStates":[1,"checkbox-states"],"state":[1]}]]],["gb-tag-checkbox_3.cjs",[[1,"gb-tag-checkbox",{"checked":[4],"size":[1],"disabled":[4]}],[1,"gb-tag-close",{"size":[1]}],[1,"gb-tag-count",{"size":[1]}]]],["gb-button_3.cjs",[[1,"gb-progress-bar",{"progress":[2],"showLabel":[4,"show-label"],"labelPosition":[1,"label-position"],"el":[16]}],[1,"gb-button-close",{"size":[1],"color":[1]}],[1,"gb-button",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"],"leadingIconSvg":[32],"trailingIconSvg":[32]}]]],["gb-checkbox_2.cjs",[[1,"gb-checkbox",{"checked":[4],"indeterminate":[4],"size":[1],"type":[1],"state":[1],"supportingText":[4,"supporting-text"]}],[1,"gb-checkbox-base",{"state":[1025],"size":[1],"type":[1],"checked":[1028],"indeterminate":[1028]}]]],["gb-avatar_3.cjs",[[1,"gb-avatar",{"size":[1],"placeholder":[4],"text":[4],"statusIcon":[1,"status-icon"],"state":[1],"icon":[1],"weight":[1]}],[1,"gb-avatar-contrast-inner-border",{"weight":[1],"size":[1]}],[1,"gb-status-indicator",{"statusIcon":[1,"status-icon"],"size":[1],"state":[1],"indicatorStateClass":[1,"indicator-state-class"]}]]]], options);
+  return index.bootstrapLazy([["gb-avatar-dropdown.cjs",[[1,"gb-avatar-dropdown",{"type":[1],"text":[4],"showProfile":[4,"show-profile"],"showDarkTheme":[4,"show-dark-theme"],"showLogOut":[4,"show-log-out"],"listGroup1":[4,"list-group-1"],"listGroup2":[4,"list-group-2"],"listGroup3":[4,"list-group-3"]}]]],["gb-tag.cjs",[[1,"gb-tag",{"size":[1],"icon":[1],"checkbox":[4],"closeButton":[4,"close-button"],"count":[4]}]]],["gb-avatar-group.cjs",[[1,"gb-avatar-group",{"size":[1],"moreUsers":[4,"more-users"],"addMoreButton":[4,"add-more-button"],"text":[4],"state":[1]}]]],["gb-file-upload.cjs",[[1,"gb-file-upload",{"icon":[1],"type":[1],"heightSize":[1,"height-size"],"state":[1],"destructive":[4],"showLabel":[4,"show-label"],"buttonState":[1,"button-state"]}]]],["gb-input-dropdown-menu-item.cjs",[[1,"gb-input-dropdown-menu-item",{"type":[1],"supportingText":[4,"supporting-text"],"selected":[4],"state":[1],"checkboxStates":[1,"checkbox-states"]}]]],["gb-badge.cjs",[[1,"gb-badge",{"size":[1],"icon":[1],"iconLeadingSrc":[1,"icon-leading-src"],"iconTrailingSrc":[1,"icon-trailing-src"],"color":[1],"type":[1],"closeButton":[4,"close-button"]}]]],["gb-avatar-profile-photo.cjs",[[1,"gb-avatar-profile-photo",{"placeholder":[4],"text":[4],"size":[1],"verified":[4],"icon":[1]}]]],["gb-help-dropdown.cjs",[[1,"gb-help-dropdown",{"showLogError":[4,"show-log-error"]}]]],["gb-input-dropdown.cjs",[[1,"gb-input-dropdown",{"type":[1],"state":[1],"size":[1],"showLabel":[4,"show-label"],"label":[1],"showPlaceholder":[4,"show-placeholder"],"placeholderText":[1,"placeholder-text"],"showHintText":[4,"show-hint-text"],"hintText":[1,"hint-text"],"showHelpIcon":[4,"show-help-icon"],"iconSwap":[1,"icon-swap"]}]]],["gb-slider.cjs",[[1,"gb-slider",{"min":[2],"max":[2],"thumbType":[1,"thumb-type"],"leftValue":[32],"rightValue":[32]}]]],["gb-collapse-button.cjs",[[1,"gb-collapse-button",{"color":[1],"currentIconDirection":[1025,"current-icon-direction"],"isHovered":[1028,"is-hovered"]}]]],["gb-notification-panel.cjs",[[1,"gb-notification-panel",{"state":[1],"notifications":[32]},[[0,"slotchange","handleSlotChange"]]]]],["gb-toggle.cjs",[[1,"gb-toggle",{"size":[1],"state":[1],"supportingText":[4,"supporting-text"]}]]],["gb-checkbox-group.cjs",[[1,"gb-checkbox-group",{"size":[1],"breakpoint":[1],"icon":[1],"selected":[4],"type":[1]}]]],["gb-file-type-icon.cjs",[[1,"gb-file-type-icon"]]],["gb-header-icon.cjs",[[1,"gb-header-icon",{"state":[1],"showIndicator":[4,"show-indicator"]}]]],["gb-input-field.cjs",[[1,"gb-input-field",{"size":[1],"inputType":[1,"input-type"],"destructive":[4],"helpIcon":[4,"help-icon"],"icon":[1],"placeholder":[1],"label":[1]}]]],["gb-megainput-field.cjs",[[1,"gb-megainput-field",{"size":[1]}]]],["gb-notification-content.cjs",[[1,"gb-notification-content",{"icon":[1],"label":[1],"time":[1],"supportingText":[1,"supporting-text"]}]]],["gb-progress-circle.cjs",[[1,"gb-progress-circle",{"size":[1],"shape":[1],"label":[4],"progress":[2]}]]],["gb-scrollbar.cjs",[[1,"gb-scrollbar",{"length":[1]}]]],["gb-textarea-input-field.cjs",[[1,"gb-textarea-input-field",{"type":[1],"destructive":[4],"placeholder":[1],"label":[1]}]]],["gb-wysiwyg-editor-icon.cjs",[[1,"gb-wysiwyg-editor-icon"]]],["gb-tooltip.cjs",[[1,"gb-tooltip",{"arrow":[1],"supportingText":[4,"supporting-text"]}]]],["gb-button-close_2.cjs",[[1,"gb-progress-bar",{"progress":[2],"showLabel":[4,"show-label"],"labelPosition":[1,"label-position"],"el":[16]}],[1,"gb-button-close",{"size":[1],"color":[1]}]]],["gb-file-upload-item-base.cjs",[[1,"gb-file-upload-item-base",{"icon":[1],"state":[1],"heightSize":[1,"height-size"],"fileType":[1,"file-type"],"buttonState":[1,"button-state"]}]]],["gb-avatar-label-group.cjs",[[1,"gb-avatar-label-group",{"size":[1],"statusIcon":[1,"status-icon"],"state":[1],"placeholder":[4],"text":[4]}]]],["gb-avatar-add-button.cjs",[[1,"gb-avatar-add-button",{"size":[1],"showToolTip":[1028,"show-tool-tip"],"state":[1],"el":[16]}]]],["gb-slider-control-handle.cjs",[[1,"gb-slider-control-handle",{"value":[2],"type":[1],"isHovered":[32],"isFocused":[32]}]]],["gb-badge-close.cjs",[[1,"gb-badge-close",{"color":[1],"type":[1]}]]],["gb-toggle-base.cjs",[[1,"gb-toggle-base",{"size":[1],"state":[1]}]]],["gb-dropdown-items-with-shortcut.cjs",[[1,"gb-dropdown-items-with-shortcut",{"icon":[4],"iconSrc":[1,"icon-src"],"checkbox":[4],"shortcut":[4],"shortcutIcon":[1,"shortcut-icon"],"label":[1],"checkboxStates":[1,"checkbox-states"],"state":[1]}]]],["gb-btn_3.cjs",[[4,"gb-btn",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"],"leadingIconSvg":[32],"trailingIconSvg":[32]}],[1,"test-tooltip",{"showArrow":[4,"show-arrow"],"arrowPosition":[1,"arrow-position"],"visible":[32]}],[1,"gb-button",{"size":[1],"hierarchy":[1],"icon":[1],"destructive":[4],"state":[1],"iconLeading":[4,"icon-leading"],"iconLeadingSwap":[1,"icon-leading-swap"],"iconTrailing":[4,"icon-trailing"],"iconTrailingSwap":[1,"icon-trailing-swap"],"leadingIconSvg":[32],"trailingIconSvg":[32]}]]],["gb-tag-checkbox_3.cjs",[[1,"gb-tag-checkbox",{"checked":[4],"size":[1],"disabled":[4]}],[1,"gb-tag-close",{"size":[1]}],[1,"gb-tag-count",{"size":[1]}]]],["gb-checkbox_2.cjs",[[1,"gb-checkbox",{"checked":[4],"indeterminate":[4],"size":[1],"type":[1],"state":[1],"supportingText":[4,"supporting-text"]}],[1,"gb-checkbox-base",{"state":[1025],"size":[1],"type":[1],"checked":[1028],"indeterminate":[1028]}]]],["gb-avatar_3.cjs",[[1,"gb-avatar",{"size":[1],"placeholder":[4],"text":[4],"statusIcon":[1,"status-icon"],"state":[1],"icon":[1],"weight":[1]}],[1,"gb-avatar-contrast-inner-border",{"weight":[1],"size":[1]}],[1,"gb-status-indicator",{"statusIcon":[1,"status-icon"],"size":[1],"state":[1],"indicatorStateClass":[1,"indicator-state-class"]}]]]], options);
 };
 
 exports.setNonce = index.setNonce;

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

@@ -2466,154 +2466,201 @@
     margin-top: -0.396em;
 }
 
-:host{
+:host {
+  --button-color: var(--primary-color);
+  --icon-color: var(--primary-color);
+}
+
+button {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  border: none;
+  cursor: pointer;
+  border-radius: var(--rounded-sm);
+  width: 100%;
 }
 
-button{
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-shrink: 0;
-    gap: var(--spacing-3);
-    border: none;
-    border-radius: var(--rounded-sm);
-    font-family: var(--font-family);
-    width: 100%;
-    /* box-shadow: var(--shadow-xs); */
-    cursor: pointer;
+button.only{
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
-.button_icon {
-    display: flex;
-    align-items: center;
+button .icon {
+  display: inline-flex;
+  width: auto;
+  height: auto;
 }
 
-.button_icon img {
-  width: var(--spacing-6);
-  height: var(--spacing-6);
+button .icon svg path[fill] {
+  fill: var(--icon-color);
 }
 
-/* Sizes */
-button.default.xl2 {
-  height: 3.5rem;
+button .icon svg path[stroke] {
+  stroke: var(--icon-color);
+}
+
+button .icon svg circle {
+  stroke: var(--icon-color);
+}
+
+/* Button Sizes Styles */
+button.xl2{
   padding: var(--spacing-none) var(--spacing-6);
+  height: 3.5rem;
+  gap: var(--spacing-3);
 }
-  
-button.default.xl {
-  padding: var(--spacing-3) var(--spacing-5);
+
+button.xl{
+  padding: var(--spacing-none) var(--spacing-5);
   height: 3rem;
+  gap: var(--spacing-2);
 }
-  
-button.default.lg {
+
+button.lg{
   padding: 0.625rem 1.125rem;
   height: 2.75rem;
+  gap: var(--spacing-2);
 }
 
-button.default.md {
+button.md{
+  padding: var(--spacing-none) var(--spacing-4);
   height: 2.5rem;
-  padding: 0.625rem var(--spacing-4);
+  gap: var(--spacing-2);
 }
 
-button.default.sm {
-  height: 2.25rem;
+button.sm{
   padding: var(--spacing-none) var(--spacing-3);
+  height: 2.25rem;
+  gap: var(--spacing-2);
 }
 
 button.only.xl2{
   width: 3.5rem;
   height: 3.5rem;
-  padding: var(--spacing-none);
 }
 
 button.only.xl{
   width: 3rem;
   height: 3rem;
-  padding: var(--spacing-none);
 }
 
 button.only.lg{
   width: 2.75rem;
   height: 2.75rem;
-  padding: var(--spacing-none);
 }
 
 button.only.md{
   width: 2.5rem;
   height: 2.5rem;
-  padding: var(--spacing-none);
 }
 
 button.only.sm{
   width: 2.25rem;
   height: 2.25rem;
-  height: fit-content;
-  padding: var(--spacing-none);
 }
 
-button.default.link_gray, button.default.link_color {
-  height: fit-content;
-  padding: 0;
+button.xl2 .icon svg{
+  width: var(--spacing-6);
+  height: var(--spacing-6);
 }
 
-/* Hierarchies */
+button.xl .icon svg,
+button.lg .icon svg,
+button.md .icon svg,
+button.sm .icon svg{
+  width: var(--spacing-5);
+  height: var(--spacing-5);
+}
+
+/* Hierarchy Styles */
 button.primary {
   background-color: var(--color-background-brandRed, #E21B2E);
+  --icon-color: var(--color-icon-inverse, #FFFFFF);
   color: var(--color-text-inverse, #FFFFFF);
 }
 
 button.secondary_gray {
   background-color: transparent;
   border: 1px solid var(--color-border, #9AA4B2);
+  --icon-color: var(--color-icon, #4B5565);
   color: var(--color-text, #4B5565);
 }
 
 button.secondary_color {
   background-color: transparent;
-  color: var(--color-text-brandRed, #E21B2E);
   border: 1px solid var(--color-border-brandRed, #E21B2E);
+  --icon-color: var(--color-icon-brandRed, #E21B2E);
+  color: var(--color-text-brandRed, #E21B2E);
 }
 
-button.tertiary_gray{
+button.tertiary_gray {
   background-color: transparent;
+  --icon-color: var(--color-icon, #4B5565);
   color: var(--color-text, #4B5565);
 }
 
-button.tertiary_color{
+button.tertiary_color {
   background-color: transparent;
+  --icon-color: var(--color-icon-brandRed, #E21B2E);
   color: var(--color-text-brandRed, #E21B2E);
 }
 
-button.link_gray{
-  display: inline-block;
+button.link_gray {
   background-color: transparent;
+  --icon-color: var(--color-icon, #4B5565);
   color: var(--color-text, #4B5565);
-  padding: var(--spacing-none);
-  border-radius: var(--rounded-none);
+  height: fit-content;
 }
 
-button.link_color{
+button.link_color {
   background-color: transparent;
-  padding: var(--spacing-none);
+  --icon-color: var(--color-link, #075DB2);
   color: var(--color-link, #075DB2);
-  border-radius: var(--rounded-none);
+  padding: var(--spacing-none);
+  height: fit-content;
+}
+
+/* Button Destructive Styles */
+button.primary.destructive{
+  background-color: var(--color-background-danger, #B51726);
+  color: var(--color-text-inverse, #FFFFFF);
+  --icon-color: var(--color-icon-danger-inverse, #FFFFFF);
+}
+
+button.secondary_gray.destructive, button.secondary_color.destructive{
+  border: 1px solid var(--color-border-danger, #B51726);
+  color: var(--color-text-danger, #B51726);
+  --icon-color: var(--color-icon-danger, #B51726);
 }
 
-/* States */
-button.primary:hover {
+button.tertiary_gray.destructive,
+button.tertiary_color.destructive{
+  color: var(--color-text-danger, #B51726);
+  --icon-color: var(--color-icon-danger, #B51726);
+}
+
+button.link_gray.destructive, 
+button.link_color.destructive{
+  color: var(--color-text-danger, #B51726);
+  --icon-color: var(--color-icon-danger, #B51726);
+}
+
+/* Button States Styles */
+button.primary:hover{
   background-color: var(--color-background-brandRed-hover, #CC1A2A);
 }
 
-button.primary:active {
+button.primary:active{
   background-color: var(--color-background-brandRed-pressed, #B51726);
 }
 
-button.secondary_gray:hover {
+button.secondary_gray:hover{
   background-color: var(--color-background-gray-subtler, #EEF2F6);
 }
 
-button.secondary_gray:active {
+button.secondary_gray:active{
   background-color: var(--color-background-gray-subtle, #E3E8EF);
 }
 
@@ -2621,32 +2668,39 @@ button.secondary_color:hover{
   background-color: var(--color-background-danger-subtlest, #FEF1F2);
 }
 
-button.secondary_color:active {
+button.secondary_color:active{
   background-color: var(--color-background-danger-subtler, #FDE3E5);
 }
 
-button.tertiary_gray:hover {
+button.tertiary_gray:hover{
   background-color: var(--color-background-gray-subtler, #EEF2F6);
 }
 
-button.tertiary_gray:active {
+button.tertiary_gray:active{
   background-color: var(--color-background-gray-subtle, #E3E8EF);
 }
 
-button.tertiary_color:hover {
+button.tertiary_color:hover{
   background-color: var(--color-background-danger-subtlest, #FEF1F2);
 }
 
-button.tertiary_color:active {
+button.tertiary_color:active{
   background-color: var(--color-background-danger-subtler, #FDE3E5);
 }
 
-button.link_gray:hover, button.link_color:hover {
+button.link_gray:hover,
+button.link_color:hover{
   text-decoration: underline;
 }
 
-button.link_gray:active, button.link_color:active {
-  text-decoration: underline;
+button.link_gray:active{
+  text-decoration: none;
+  color: var(--color-text-bold, #202939);
+}
+
+button.link_gray:active{
+  text-decoration: none;
+  color: var(--color-link-pressed, #064E94);
 }
 
 button.primary.destructive:hover{
@@ -2685,53 +2739,29 @@ button.link_color.destructive:active{
   color: var(--color-text-warning-bold, #93370D);
 }
 
-/* Destructive Button Styles */
-button.primary.destructive{
-  background-color: var(--color-background-danger, #B51726);
-  color: var(--color-text-inverse, #FFFFFF);
-}
-
-button.secondary_gray.destructive, button.secondary_color.destructive{
-  border: 1px solid var(--color-border-danger, #B51726);
-  color: var(--color-text-danger, #B51726);
-}
-
-button.tertiary_gray.destructive,
-button.tertiary_color.destructive{
-  color: var(--color-text-danger, #B51726);
-}
-
-button.link_gray.destructive, 
-button.link_color.destructive{
-  color: var(--color-text-danger, #B51726);
+/* Button Disabled Styles */
+button.disabled{
+  cursor: not-allowed;
+  pointer-events: none;
 }
 
-/* Disabled Styles */
 button.primary.disabled {
   background-color: var(--color-background-disabled, #F6F8FA);
+  --icon-color: var(--color-icon-disabled, #CDD5DF);
   color: var(--color-text-disabled, #CDD5DF);
-  pointer-events: none;
-  cursor: not-allowed;
 }
 
 button.secondary_gray.disabled,
-button.secondary_color.disabled {
+button.secondary_color.disabled{
+  --icon-color: var(--color-icon-disabled, #CDD5DF);
   color: var(--color-text-disabled, #CDD5DF);
   border-color: var(--color-border-disabled, #E3E8EF);
-  pointer-events: none;
-  cursor: not-allowed;
 }
 
 button.tertiary_gray.disabled,
-button.tertiary_color.disabled {
+button.tertiary_color.disabled,
+button.link_gray.disabled,
+button.link_color.disabled{
+  --icon-color: var(--color-icon-disabled, #CDD5DF);
   color: var(--color-text-disabled, #CDD5DF);
-  box-shadow: none;
-  pointer-events: none;
-  cursor: not-allowed;
 }
-
-button.link_gray.disabled, button.link_color.disabled {
-  color: var(--color-text-disabled, #CDD5DF);
-  pointer-events: none;
-  cursor: not-allowed;
-}

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

@@ -1,7 +1,7 @@
-import { getAssetPath, h, Fragment } from "@stencil/core";
+import { getAssetPath, h } from "@stencil/core";
 export class GbButton {
     constructor() {
-        this.size = 'xl';
+        this.size = undefined;
         this.hierarchy = undefined;
         this.icon = undefined;
         this.destructive = false;
@@ -10,30 +10,66 @@ export class GbButton {
         this.iconLeadingSwap = undefined;
         this.iconTrailing = false;
         this.iconTrailingSwap = undefined;
+        this.leadingIconSvg = '';
+        this.trailingIconSvg = '';
     }
-    getTextClass() {
-        switch (this.size) {
-            case 'xl2': return 'text-lg-semi-bold';
-            case 'xl': return 'text-md-semi-bold';
-            case 'lg': return 'text-md-semi-bold';
-            case 'md': return 'text-sm-semi-bold';
-            case 'sm': return 'text-sm-semi-bold';
+    componentWillLoad() {
+        if (this.iconLeading && this.iconLeadingSwap) {
+            this.loadIcon(this.iconLeadingSwap, 'leading');
+        }
+        if (this.iconTrailing && this.iconTrailingSwap) {
+            this.loadIcon(this.iconTrailingSwap, 'trailing');
         }
-    }
-    componentDidLoad() {
         const buttonSlot = this.el.querySelector('p');
         if (buttonSlot) {
-            buttonSlot.classList.add(this.getTextClass());
+            buttonSlot.classList.add(this.getButtonTextClasses());
+        }
+    }
+    async loadIcon(iconName, type) {
+        const iconPath = getAssetPath(`./assets/${iconName}.svg`);
+        const response = await fetch(iconPath);
+        const svg = await response.text();
+        if (type === 'leading') {
+            this.leadingIconSvg = svg;
+        }
+        else {
+            this.trailingIconSvg = svg;
+        }
+    }
+    // Helper to apply color styles based on the button state
+    getButtonClasses() {
+        return {
+            button: true,
+            [this.size]: true,
+            [this.hierarchy]: true,
+            destructive: this.destructive,
+            disabled: this.state === 'disabled',
+            default: this.icon === 'default',
+            only: this.icon === 'only',
+        };
+    }
+    getButtonTextClasses() {
+        switch (this.size) {
+            case 'xl2':
+                return 'text-lg-semi-bold';
+            case 'xl':
+                return 'text-md-semi-bold';
+            case 'lg':
+                return 'text-md-semi-bold';
+            case 'md':
+                return 'text-sm-semi-bold';
+            case 'sm':
+                return 'text-sm-semi-bold';
         }
     }
+    renderLeadingIcon() {
+        return this.leadingIconSvg ? h("div", { class: `icon left-icon ${this.size}`, innerHTML: this.leadingIconSvg }) : null;
+    }
+    renderTrailingIcon() {
+        return this.trailingIconSvg ? h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg }) : null;
+    }
     render() {
-        const iconLeadingSrc = getAssetPath(`assets/${this.iconLeadingSwap}.svg`);
-        const iconTrailingSrc = getAssetPath(`assets/${this.iconTrailingSwap}.svg`);
-        return (h("button", { key: '02f5067a5922a65cd3c197a2acccf2ce970dfa78', class: `${this.size} 
-            ${this.hierarchy} 
-            ${this.destructive ? 'destructive' : ''}
-            ${this.state}
-            ${this.icon}` }, this.icon === 'default' && (h(Fragment, null, this.iconLeading && (h("div", { key: 'f28d258e8163b7e32906d344fe1e2fa2e74df189', class: "button_icon left-icon" }, h("span", { key: '1bfff24b750de99981c799519053234c65351252', class: "icon", innerHTML: iconLeadingSrc }))), h("slot", { key: 'ba179f9ea366410cc166de9675a7f1dd34bf1684' }), this.iconTrailing && (h("div", { key: 'ed6b06722e094a1adfd83762ddf8750a039bd6c6', class: "button_icon right-icon" }, h("span", { key: 'c4b803bb55f88468d911ecf361867b7f73c4a4b2', class: "icon", innerHTML: iconTrailingSrc }))))), this.icon === 'only' && h("img", { key: '3a3b09ff86264b0ed854d13bd60c58ead047b96d', src: iconLeadingSrc, alt: "Icon" })));
+        return (h("button", { key: 'c8f03832dbf94e1824470e29be57598badd4b51f', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '5377b036a12457176a339ed67daba75c06abe106' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-btn"; }
     static get originalStyleUrls() {
@@ -69,8 +105,7 @@ export class GbButton {
                     "text": ""
                 },
                 "attribute": "size",
-                "reflect": false,
-                "defaultValue": "'xl'"
+                "reflect": false
             },
             "hierarchy": {
                 "type": "string",
@@ -134,15 +169,9 @@ export class GbButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "StateEnum",
-                    "resolved": "StateEnum.Default | StateEnum.Disabled",
-                    "references": {
-                        "StateEnum": {
-                            "location": "import",
-                            "path": "../../models/reusableModels",
-                            "id": "src/models/reusableModels.ts::StateEnum"
-                        }
-                    }
+                    "original": "'default' | 'hover' | 'disabled' | 'pressed'",
+                    "resolved": "\"default\" | \"disabled\" | \"hover\" | \"pressed\"",
+                    "references": {}
                 },
                 "required": false,
                 "optional": false,
@@ -180,7 +209,7 @@ export class GbButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -215,7 +244,7 @@ export class GbButton {
                     "references": {}
                 },
                 "required": false,
-                "optional": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
                     "text": ""
@@ -225,6 +254,12 @@ export class GbButton {
             }
         };
     }
+    static get states() {
+        return {
+            "leadingIconSvg": {},
+            "trailingIconSvg": {}
+        };
+    }
     static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=gb-btn.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"gb-btn.js","sourceRoot":"","sources":["../../../src/components/gb-btn/gb-btn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAQpF,MAAM,OAAO,QAAQ;;oBACY,IAAI;;;2BAGF,KAAK;;2BAEL,KAAK;;4BAEJ,KAAK;;;IAIrC,YAAY;QACR,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAChB,KAAK,KAAM,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACxC,KAAK,IAAK,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,mBAAmB,CAAC;YACvC,KAAK,IAAK,CAAC,CAAC,OAAO,mBAAmB,CAAC;QAC3C,CAAC;IACL,CAAC;IAED,gBAAgB;QACZ,MAAM,UAAU,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC;QAE9C,IAAG,UAAU,EAAE,CAAC;YACZ,UAAU,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC;QAClD,CAAC;IACL,CAAC;IAED,MAAM;QAEA,MAAM,cAAc,GAAG,YAAY,CAAC,UAAU,IAAI,CAAC,eAAe,MAAM,CAAC,CAAC;QAC1E,MAAM,eAAe,GAAG,YAAY,CAAC,UAAU,IAAI,CAAC,gBAAgB,MAAM,CAAC,CAAC;QAE9E,OAAO,CACL,+DACE,KAAK,EAAE,GAAG,IAAI,CAAC,IAAI;cACjB,IAAI,CAAC,SAAS;cACd,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE;cACrC,IAAI,CAAC,KAAK;cACV,IAAI,CAAC,IAAI,EAAE;YAEZ,IAAI,CAAC,IAAI,KAAK,SAAS,IAAI,CAC1B;gBACG,IAAI,CAAC,WAAW,IAAI,CACnB,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,cAAc,GAAS,CACjD,CACP;gBACD,8DAAa;gBACZ,IAAI,CAAC,YAAY,IAAI,CACpB,4DAAK,KAAK,EAAC,wBAAwB;oBACjC,6DAAM,KAAK,EAAC,MAAM,EAAC,SAAS,EAAE,eAAe,GAAS,CAClD,CACP,CACA,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,MAAM,IAAI,4DAAK,GAAG,EAAE,cAAc,EAAE,GAAG,EAAC,MAAM,GAAG,CACzD,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, Fragment } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-btn',\r\n    styleUrl: 'gb-btn.css',\r\n})\r\n\r\nexport class GbButton {\r\n    @Prop() size: GeneralSizes = 'xl';\r\n    @Prop() hierarchy: GeneralHierarchies;\r\n    @Prop() icon: 'default' | 'only';\r\n    @Prop() destructive: boolean = false;\r\n    @Prop() state: StateEnum;\r\n    @Prop() iconLeading: boolean = false;\r\n    @Prop() iconLeadingSwap?: string;\r\n    @Prop() iconTrailing: boolean = false;\r\n    @Prop() iconTrailingSwap?: string;\r\n    @Element() el: HTMLElement;\r\n\r\n    getTextClass() {\r\n        switch (this.size) {\r\n            case 'xl2' : return 'text-lg-semi-bold';\r\n            case 'xl' : return 'text-md-semi-bold';\r\n            case 'lg' : return 'text-md-semi-bold';\r\n            case 'md' : return 'text-sm-semi-bold';\r\n            case 'sm' : return 'text-sm-semi-bold';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const buttonSlot = this.el.querySelector('p');\r\n\r\n        if(buttonSlot) {\r\n            buttonSlot.classList.add(this.getTextClass());\r\n        }\r\n    }\r\n\r\n    render() {\r\n\r\n          const iconLeadingSrc = getAssetPath(`assets/${this.iconLeadingSwap}.svg`);\r\n          const iconTrailingSrc = getAssetPath(`assets/${this.iconTrailingSwap}.svg`);\r\n\r\n        return (\r\n          <button\r\n            class={`${this.size} \r\n            ${this.hierarchy} \r\n            ${this.destructive ? 'destructive' : ''}\r\n            ${this.state}\r\n            ${this.icon}`}\r\n          >\r\n            {this.icon === 'default' && (\r\n              <>\r\n                {this.iconLeading && (\r\n                  <div class=\"button_icon left-icon\">\r\n                    <span class=\"icon\" innerHTML={iconLeadingSrc}></span>\r\n                  </div>\r\n                )}\r\n                <slot></slot>\r\n                {this.iconTrailing && (\r\n                  <div class=\"button_icon right-icon\">\r\n                    <span class=\"icon\" innerHTML={iconTrailingSrc}></span>\r\n                  </div>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.icon === 'only' && <img src={iconLeadingSrc} alt=\"Icon\" />}\r\n          </button>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-btn.js","sourceRoot":"","sources":["../../../src/components/gb-btn/gb-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State } from \"@stencil/core\";\r\nimport { GeneralHierarchies, GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-btn',\r\n  styleUrl: 'gb-btn.css',\r\n})\r\nexport class GbButton {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() hierarchy: GeneralHierarchies;\r\n  @Prop() icon: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: 'default' | 'hover' | 'disabled' | 'pressed';\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n    }\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`./assets/${iconName}.svg`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.state === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return this.leadingIconSvg ? <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div> : null;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return this.trailingIconSvg ? <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div> : null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}"]}