globuswebcomponents 2.2.4 → 2.2.5

package/dist/collection/components/gb-avatar-dropdown/gb-avatar-dropdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-avatar-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, h} from '@stencil/core';\r\nimport { ColorTypes, DropdownRoles, ThemeTypes } from '../../models/reusableModels';\r\n@Component({\r\n  tag: 'gb-avatar-dropdown',\r\n  styleUrl: 'gb-avatar-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n  @Prop() type: 'simple' | 'complex';\r\n  @Prop() text: boolean = false;\r\n  @Prop() showProfile: boolean;\r\n\r\n  @Prop() showThemeTab: boolean;\r\n  @Prop() showRoles: boolean = false;\r\n  @Prop() roles: DropdownRoles[] = [\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ];\r\n  @Prop() showLogOut: boolean;\r\n  @Prop() listGroupOne: boolean;\r\n  @Prop() listGroupTwo: boolean;\r\n  @Prop() listGroupThree: boolean;\r\n  @Prop() color: ColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() currentTheme: ThemeTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() itemClicked: EventEmitter<string>;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onItemClicked(item: string) {\r\n    this.itemClicked.emit(item);\r\n  }\r\n\r\n  emitTheme(theme) {\r\n    // console.log(theme.detail);\r\n    this.themeTabClicked.emit(theme);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameInitials = this.el.querySelector('[slot=\"name\"');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add('text-md-semi-bold');\r\n      slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\r\n    }\r\n\r\n    if (nameInitials) {\r\n      nameInitials.classList.add('text-sm-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    if (this.type === 'simple') {\r\n      return (\r\n        <div class=\"simple-dropdown\">\r\n          <div class=\"profile simple_profile\">\r\n            <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          <div class=\"menu-items\">\r\n            <div class=\"list\">\r\n              {this.showThemeTab && (\r\n                <div class=\"theme_tab\">\r\n                  <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n                </div>\r\n              )}\r\n              {this.showProfile && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K + P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n              {this.showLogOut && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (this.type === 'complex') {\r\n      return (\r\n        <div class=\"complex-dropdown\">\r\n          <div class=\"profile complex_profile\">\r\n            <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          {this.showRoles && (\r\n            <div class=\"roles\">\r\n              <p class=\"text-sm-medium\">Available roles</p>\r\n              <div class=\"badges\">\r\n                {this.roles.map(role => (\r\n                  <gb-badge size=\"md\" color={role.badgeColor} type={role.badgeType}>\r\n                    <p>{role.badgeLabel}</p>\r\n                  </gb-badge>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.showThemeTab && (\r\n            <div class=\"theme_tab\">\r\n              <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n            </div>\r\n          )}\r\n          {this.listGroupOne && (\r\n            <div class=\"list-group-one\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K+P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/book-open-02.svg\"\r\n                  label=\"Documentation\"\r\n                  shortcut\r\n                  shortcutIcon=\"T\"\r\n                  onClick={() => this.onItemClicked('documentation')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"three\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/customer-support.svg\"\r\n                  label=\"Support\"\r\n                  shortcut\r\n                  shortcutIcon=\"C\"\r\n                  onClick={() => this.onItemClicked('support')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupTwo && (\r\n            <div class=\"list-group-two\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/configuration_02.svg\"\r\n                  label=\"Configuration\"\r\n                  shortcut\r\n                  shortcutIcon=\"S\"\r\n                  onClick={() => this.onItemClicked('configuration')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_group.svg\"\r\n                  label=\"Team\"\r\n                  shortcut\r\n                  shortcutIcon=\"K->T\"\r\n                  onClick={() => this.onItemClicked('team')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"three\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_add.svg\"\r\n                  label=\"Invite Members\"\r\n                  shortcut\r\n                  shortcutIcon=\"I\"\r\n                  onClick={() => this.onItemClicked('invite_members')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupThree && (\r\n            <div class=\"list-group-three\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}"]}
+{"version":3,"file":"gb-avatar-dropdown.js","sourceRoot":"","sources":["../../../src/components/gb-avatar-dropdown/gb-avatar-dropdown.tsx"],"names":[],"mappings":"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","sourcesContent":["import {Component, Element, Event, EventEmitter, Prop, h} from '@stencil/core';\r\nimport { ColorTypes, DropdownRoles, ThemeTypes } from '../../models/reusableModels';\r\n@Component({\r\n  tag: 'gb-avatar-dropdown',\r\n  styleUrl: 'gb-avatar-dropdown.css',\r\n  shadow: true,\r\n})\r\nexport class GbAvatarDropdown {\r\n  @Prop() type: 'simple' | 'complex';\r\n  @Prop() text: boolean = false;\r\n  @Prop() showProfile: boolean;\r\n\r\n  @Prop() showThemeTab: boolean;\r\n  @Prop() showRoles: boolean = false;\r\n  @Prop() roles: DropdownRoles[] = [\r\n    // {\r\n    //   badgeLabel: 'Initiator',\r\n    //   badgeColor: 'information',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Authorizer',\r\n    //   badgeColor: 'success',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n    // {\r\n    //   badgeLabel: 'Viewer',\r\n    //   badgeColor: 'gray',\r\n    //   badgeType: 'badge_color',\r\n    // },\r\n  ];\r\n  @Prop() showLogOut: boolean;\r\n  @Prop() listGroupOne: boolean;\r\n  @Prop() listGroupTwo: boolean;\r\n  @Prop() listGroupThree: boolean;\r\n  @Prop() color: ColorTypes;\r\n  @Prop() showBorder: boolean = false;\r\n  @Prop() currentTheme: ThemeTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() itemClicked: EventEmitter<string>;\r\n  @Event() themeTabClicked: EventEmitter<string>;\r\n\r\n  applyColorToInitials() {\r\n    switch (this.color) {\r\n      case 'gray':\r\n        return 'gray';\r\n      case 'blue':\r\n        return 'blue';\r\n      case 'cyan':\r\n        return 'cyan';\r\n      case 'pink':\r\n        return 'pink';\r\n      case 'purple':\r\n        return 'purple';\r\n      case 'green':\r\n        return 'green';\r\n      case 'yellow':\r\n        return 'yellow';\r\n    }\r\n  }\r\n\r\n  onItemClicked(item: string) {\r\n    this.itemClicked.emit(item);\r\n  }\r\n\r\n  emitTheme(theme) {\r\n    console.log(theme.detail);\r\n    this.themeTabClicked.emit(theme);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const slottedInitials = this.el.querySelector('[slot=\"initials\"]');\r\n    const nameInitials = this.el.querySelector('[slot=\"name\"');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"');\r\n\r\n    if (slottedInitials) {\r\n      slottedInitials.classList.add('text-md-semi-bold');\r\n      slottedInitials.classList.add(this.applyColorToInitials() || 'gray');\r\n    }\r\n\r\n    if (nameInitials) {\r\n      nameInitials.classList.add('text-sm-semi-bold');\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add('text-sm-regular');\r\n    }\r\n  }\r\n\r\n  render() {\r\n    if (this.type === 'simple') {\r\n      return (\r\n        <div class=\"simple-dropdown\">\r\n          <div class=\"profile simple_profile\">\r\n            <gb-avatar-label-group size=\"md\" text={true} color={this.color} show-border={this.showBorder}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          <div class=\"menu-items\">\r\n            <div class=\"list\">\r\n              {this.showThemeTab && (\r\n                <div class=\"theme_tab\">\r\n                  <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n                </div>\r\n              )}\r\n              {this.showProfile && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K + P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n              {this.showLogOut && (\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              )}\r\n            </div>\r\n          </div>\r\n        </div>\r\n      );\r\n    }\r\n\r\n    if (this.type === 'complex') {\r\n      return (\r\n        <div class=\"complex-dropdown\">\r\n          <div class=\"profile complex_profile\">\r\n            <gb-avatar-label-group size=\"md\" class=\"label_group\" text={true} color={this.color}>\r\n              <slot name=\"name\" slot=\"name\"></slot>\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n              <slot name=\"supporting_text\" slot=\"supporting_text\"></slot>\r\n            </gb-avatar-label-group>\r\n          </div>\r\n          {this.showRoles && (\r\n            <div class=\"roles\">\r\n              <p class=\"text-sm-medium\">Available roles</p>\r\n              <div class=\"badges\">\r\n                {this.roles.map(role => (\r\n                  <gb-badge size=\"md\" color={role.badgeColor} type={role.badgeType}>\r\n                    <p>{role.badgeLabel}</p>\r\n                  </gb-badge>\r\n                ))}\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.showThemeTab && (\r\n            <div class=\"theme_tab\">\r\n              <gb-theme-tab current-active-tab={this.currentTheme} onThemeTabClicked={this.emitTheme.bind(this)}></gb-theme-tab>\r\n            </div>\r\n          )}\r\n          {this.listGroupOne && (\r\n            <div class=\"list-group-one\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_profile.svg\"\r\n                  label=\"View Profile\"\r\n                  shortcut\r\n                  shortcutIcon=\"K+P\"\r\n                  onClick={() => this.onItemClicked('view_profile')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/book-open-02.svg\"\r\n                  label=\"Documentation\"\r\n                  shortcut\r\n                  shortcutIcon=\"T\"\r\n                  onClick={() => this.onItemClicked('documentation')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"three\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/customer-support.svg\"\r\n                  label=\"Support\"\r\n                  shortcut\r\n                  shortcutIcon=\"C\"\r\n                  onClick={() => this.onItemClicked('support')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupTwo && (\r\n            <div class=\"list-group-two\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/configuration_02.svg\"\r\n                  label=\"Configuration\"\r\n                  shortcut\r\n                  shortcutIcon=\"S\"\r\n                  onClick={() => this.onItemClicked('configuration')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"two\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_group.svg\"\r\n                  label=\"Team\"\r\n                  shortcut\r\n                  shortcutIcon=\"K->T\"\r\n                  onClick={() => this.onItemClicked('team')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n              <div class=\"three\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/user_add.svg\"\r\n                  label=\"Invite Members\"\r\n                  shortcut\r\n                  shortcutIcon=\"I\"\r\n                  onClick={() => this.onItemClicked('invite_members')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n          {this.listGroupThree && (\r\n            <div class=\"list-group-three\">\r\n              <div class=\"one\">\r\n                <gb-dropdown-items-with-shortcut\r\n                  icon\r\n                  iconSrc=\"assets/logout_button.svg\"\r\n                  label=\"Log out\"\r\n                  shortcut\r\n                  shortcutIcon=\"L\"\r\n                  onClick={() => this.onItemClicked('log_out')}\r\n                ></gb-dropdown-items-with-shortcut>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}"]}

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

@@ -2,11 +2,11 @@ import { h } from "@stencil/core";
 export class GbButtonGroup {
     constructor() {
         this.items = [
-            { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },
-            { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },
-            // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },
-            // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },
-            // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },
+        // { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },
+        // { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },
+        // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },
+        // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },
+        // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },
         ];
         // @Prop() label: string = '';
         this.internalItems = [];
@@ -28,7 +28,7 @@ export class GbButtonGroup {
         // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });
     }
     render() {
-        return (h("div", { key: '199da0147b6f0005ef09fff0d50847ae1e88203b', class: "button_group_wrapper" }, this.internalItems.map((item, index) => (h("gb-button-group-base", { key: index, state: "default", icon: this.icon, label: item.label, current: item.current, onClick: () => this.handleSelect(index), "icon-src": item.icon })))));
+        return (h("div", { key: '632331bb7cef4fa676224f659afda761127ab895', class: "button_group_wrapper" }, this.internalItems.map((item, index) => (h("gb-button-group-base", { key: index, state: "default", icon: this.icon, label: item.label, current: item.current, onClick: () => this.handleSelect(index), "icon-src": item.icon })))));
     }
     static get is() { return "gb-button-group"; }
     static get encapsulation() { return "shadow"; }
@@ -61,7 +61,7 @@ export class GbButtonGroup {
                 },
                 "getter": false,
                 "setter": false,
-                "defaultValue": "[\r\n    { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n    { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n  ]"
+                "defaultValue": "[\r\n    // { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n  ]"
             },
             "icon": {
                 "type": "string",

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

@@ -1 +1 @@
-{"version":3,"file":"gb-button-group.js","sourceRoot":"","sources":["../../../src/components/gb-button-group/gb-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASvG,MAAM,OAAO,aAAa;IAN1B;QAQU,UAAK,GAA0D;YACrE,EAAE,KAAK,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,wBAAwB,EAAE;YAChE,EAAE,KAAK,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,wBAAwB,EAAE;YACnE,mEAAmE;YACnE,uEAAuE;YACvE,yEAAyE;SAC1E,CAAC;QAEF,8BAA8B;QACrB,kBAAa,GAA0D,EAAE,CAAC;QAC1E,kBAAa,GAAW,EAAE,CAAC;KA+CrC;IA1CC,cAAc,CAAC,QAA+D;QAC5E,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QAEtD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,CAAC,KAAK,KAAK,IACpB,CAAC,CAAC;QAEJ,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QAEnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,kCAAkC;QAElC,0FAA0F;QAC1F,oGAAoG;IACtG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,4BACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAC7B,IAAI,CAAC,IAAI,GACG,CACzB,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonGroupTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button-group',\r\n  styleUrl: 'gb-button-group.css',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class GbButtonGroup {\r\n  @AttachInternals() internals: ElementInternals;\r\n  @Prop() items: { label: string; current?: boolean; icon?: string }[] = [\r\n    { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n    { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n  ];\r\n  @Prop() icon: ButtonGroupTypes;\r\n  // @Prop() label: string = '';\r\n  @State() internalItems: { label: string; current?: boolean; icon?: string }[] = [];\r\n  @State() selectedValue: string = '';\r\n  // @Event() valueChange: EventEmitter<{ value: string; current: boolean }>;\r\n  @Event() optionChange: EventEmitter<string>;\r\n\r\n  @Watch('items')\r\n  onItemsUpdated(newValue: { label: string; current?: boolean; icon?: string }[]) {\r\n    this.internalItems = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalItems = [...this.items];\r\n  }\r\n\r\n  handleSelect(index: number) {\r\n    const selectedValue = this.internalItems[index].label;\r\n\r\n    this.internalItems = this.internalItems.map((item, i) => ({\r\n      ...item,\r\n      current: i === index,\r\n    }));\r\n\r\n    this.selectedValue = selectedValue;\r\n\r\n    this.optionChange.emit(this.selectedValue);\r\n    // console.log(this.selectedValue)\r\n\r\n    // console.log({ value: this.selectedValue, current: this.internalItems[index].current });\r\n    // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"button_group_wrapper\">\r\n        {this.internalItems.map((item, index) => (\r\n          <gb-button-group-base\r\n            key={index}\r\n            state=\"default\"\r\n            icon={this.icon}\r\n            label={item.label}\r\n            current={item.current}\r\n            onClick={() => this.handleSelect(index)}\r\n            icon-src={item.icon}\r\n          ></gb-button-group-base>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-button-group.js","sourceRoot":"","sources":["../../../src/components/gb-button-group/gb-button-group.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASvG,MAAM,OAAO,aAAa;IAN1B;QAQU,UAAK,GAA0D;QACrE,oEAAoE;QACpE,uEAAuE;QACvE,mEAAmE;QACnE,uEAAuE;QACvE,yEAAyE;SAC1E,CAAC;QAEF,8BAA8B;QACrB,kBAAa,GAA0D,EAAE,CAAC;QAC1E,kBAAa,GAAW,EAAE,CAAC;KA+CrC;IA1CC,cAAc,CAAC,QAA+D;QAC5E,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,CAAC,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IACvC,CAAC;IAED,YAAY,CAAC,KAAa;QACxB,MAAM,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC,KAAK,CAAC;QAEtD,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,iCACpD,IAAI,KACP,OAAO,EAAE,CAAC,KAAK,KAAK,IACpB,CAAC,CAAC;QAEJ,IAAI,CAAC,aAAa,GAAG,aAAa,CAAC;QAEnC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3C,kCAAkC;QAElC,0FAA0F;QAC1F,oGAAoG;IACtG,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAC,sBAAsB,IAC9B,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CACvC,4BACE,GAAG,EAAE,KAAK,EACV,KAAK,EAAC,SAAS,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,KAAK,CAAC,cAC7B,IAAI,CAAC,IAAI,GACG,CACzB,CAAC,CACE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { AttachInternals, Component, Event, EventEmitter, Prop, State, Watch, h } from '@stencil/core';\r\nimport { ButtonGroupTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button-group',\r\n  styleUrl: 'gb-button-group.css',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class GbButtonGroup {\r\n  @AttachInternals() internals: ElementInternals;\r\n  @Prop() items: { label: string; current?: boolean; icon?: string }[] = [\r\n    // { label: 'Male', current: true, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Female', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Hi', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Gideon', current: false, icon: 'assets/calendar-02.svg' },\r\n    // { label: 'Emmanuel', current: false, icon: 'assets/calendar-02.svg' },\r\n  ];\r\n  @Prop() icon: ButtonGroupTypes;\r\n  // @Prop() label: string = '';\r\n  @State() internalItems: { label: string; current?: boolean; icon?: string }[] = [];\r\n  @State() selectedValue: string = '';\r\n  // @Event() valueChange: EventEmitter<{ value: string; current: boolean }>;\r\n  @Event() optionChange: EventEmitter<string>;\r\n\r\n  @Watch('items')\r\n  onItemsUpdated(newValue: { label: string; current?: boolean; icon?: string }[]) {\r\n    this.internalItems = newValue;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalItems = [...this.items];\r\n  }\r\n\r\n  handleSelect(index: number) {\r\n    const selectedValue = this.internalItems[index].label;\r\n\r\n    this.internalItems = this.internalItems.map((item, i) => ({\r\n      ...item,\r\n      current: i === index,\r\n    }));\r\n\r\n    this.selectedValue = selectedValue;\r\n\r\n    this.optionChange.emit(this.selectedValue);\r\n    // console.log(this.selectedValue)\r\n\r\n    // console.log({ value: this.selectedValue, current: this.internalItems[index].current });\r\n    // this.valueChange.emit({ value: this.selectedValue, current: this.internalItems[index].current });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"button_group_wrapper\">\r\n        {this.internalItems.map((item, index) => (\r\n          <gb-button-group-base\r\n            key={index}\r\n            state=\"default\"\r\n            icon={this.icon}\r\n            label={item.label}\r\n            current={item.current}\r\n            onClick={() => this.handleSelect(index)}\r\n            icon-src={item.icon}\r\n          ></gb-button-group-base>\r\n        ))}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/gb-card-icon/gb-card-icon.css

@@ -2662,7 +2662,6 @@
   display: flex;
   width: fit-content;
   height: fit-content;
-  padding: 0.6875rem;
   justify-content: center;
   align-items: center;
   gap: 0.625rem;
@@ -2670,6 +2669,18 @@
   border-radius: 12.5rem;
 }
 
+.card_icon_div.sm {
+  padding: 0.6875rem;
+}
+
+.card_icon_div.lg {
+  padding: 0.75rem;
+}
+
+.card_icon_div.xl {
+  padding: 1.25rem;
+}
+
 .card_icon_div.blue {
   background: var(--color-background-information-subtler, #c8e0f9);
 }
@@ -2703,17 +2714,30 @@
 }
 
 .icon_svg {
-  width: 1.125rem;
-  height: 1.125rem;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 
-.icon_svg path[stroke]{
-  stroke: var(--color-icon-bold, #202939)
+.icon_svg.sm {
+  width: 1.125rem;
+  height: 1.125rem;
 }
 
-.icon_svg path[fill]{
-  fill: var(--color-icon-bold, #202939)
-}
+.icon_svg.lg {
+  width: 1.5rem;
+  height: 1.5rem;
+}
+
+.icon_svg.xl {
+  width: 2rem;
+  height: 2rem;
+}
+
+.icon_svg path[stroke] {
+  stroke: var(--color-icon-bold, #202939);
+}
+
+.icon_svg path[fill] {
+  fill: var(--color-icon-bold, #202939);
+}

package/dist/collection/components/gb-card-icon/gb-card-icon.js

@@ -14,7 +14,7 @@ export class GbCardIcon {
         this.loadIcon(this.icon);
     }
     render() {
-        return (h("div", { key: 'c1baafa1a6e5e31c737d531425b5f1a676383f2c', class: `card_icon_div ${this.color}` }, h("div", { key: 'bf2ef2064bf88b1c1fdb2a4a014e2b8f3aec08e2', class: `icon_svg`, innerHTML: this.leadingIconSvg })));
+        return (h("div", { key: '0f76c936cdb18ee2dfb0b9f5eb4430b362c9c2bb', class: `card_icon_div ${this.color} ${this.size}` }, h("div", { key: 'b9cd2310d94146b02485bca1dd95c1c1bbd49ed8', class: `icon_svg ${this.size}`, innerHTML: this.leadingIconSvg })));
     }
     static get is() { return "gb-card-icon"; }
     static get encapsulation() { return "shadow"; }
@@ -30,6 +30,31 @@ export class GbCardIcon {
     }
     static get properties() {
         return {
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "GeneralSizes",
+                    "resolved": "\"lg\" | \"md\" | \"profile_lg\" | \"profile_md\" | \"profile_sm\" | \"sm\" | \"xl\" | \"xl2\" | \"xl3\" | \"xl4\" | \"xs\" | \"xxs\"",
+                    "references": {
+                        "GeneralSizes": {
+                            "location": "import",
+                            "path": "../../models/reusableModels",
+                            "id": "src/models/reusableModels.ts::GeneralSizes"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "size",
+                "reflect": false
+            },
             "color": {
                 "type": "string",
                 "mutable": false,

package/dist/collection/components/gb-card-icon/gb-card-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-card-icon.js","sourceRoot":"","sources":["../../../src/components/gb-card-icon/gb-card-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,UAAU;IALvB;QAOU,SAAI,GAAW,EAAE,CAAC;QACjB,mBAAc,GAAW,EAAE,CAAC;KAoBtC;IAlBC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,KAAK,EAAE;YACvC,4DAAK,KAAK,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CAC1D,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { ColorTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-card-icon',\r\n  styleUrl: 'gb-card-icon.css',\r\n  shadow: true,\r\n})\r\nexport class GbCardIcon {\r\n  @Prop() color: ColorTypes;\r\n  @Prop() icon: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`card_icon_div ${this.color}`}>\r\n        <div class={`icon_svg`} innerHTML={this.leadingIconSvg}></div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-card-icon.js","sourceRoot":"","sources":["../../../src/components/gb-card-icon/gb-card-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQxE,MAAM,OAAO,UAAU;IALvB;QAQU,SAAI,GAAW,EAAE,CAAC;QACjB,mBAAc,GAAW,EAAE,CAAC;KAoBtC;IAlBC,KAAK,CAAC,QAAQ,CAAC,QAAgB;QAC7B,MAAM,QAAQ,GAAG,YAAY,CAAC,GAAG,QAAQ,EAAE,CAAC,CAAC;QAC7C,MAAM,QAAQ,GAAG,MAAM,KAAK,CAAC,QAAQ,CAAC,CAAC;QACvC,MAAM,GAAG,GAAG,MAAM,QAAQ,CAAC,IAAI,EAAE,CAAC;QAClC,IAAI,CAAC,cAAc,GAAG,GAAG,CAAC;IAC5B,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,EAAE;YACpD,4DAAK,KAAK,EAAE,YAAY,IAAI,CAAC,IAAI,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,GAAQ,CACvE,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { ColorTypes, GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-card-icon',\r\n  styleUrl: 'gb-card-icon.css',\r\n  shadow: true,\r\n})\r\nexport class GbCardIcon {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() color: ColorTypes;\r\n  @Prop() icon: string = '';\r\n  @State() leadingIconSvg: string = '';\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`card_icon_div ${this.color} ${this.size}`}>\r\n        <div class={`icon_svg ${this.size}`} innerHTML={this.leadingIconSvg}></div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -36,7 +36,7 @@ export class GbCheckbox {
         this.checkboxClicked.emit(event.detail);
     }
     render() {
-        return (h("div", { key: 'c6101972cd3a20033cace3cb352f6420c5b7d505', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: 'd1e7bbc20774ab878e1ece544b250117f78cd5b3', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: 'a31a9f53d3037776f545de4f14a1c8c0be39e8b4', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this), checked: this.checked })), this.text && (h("div", { key: '9f4f791474066a42657c9ae671d79d3b323f0927', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: '76ca2002835b09d1f07fad00cf59238d7ea0c1b0', name: "label" }), this.supportingText && h("slot", { key: 'f042fea58c39f6ade719780bd4e0155c4319b03b', name: "supporting_text" })))));
+        return (h("div", { key: 'ea3f75338a569f9fd3bfb7870f8325034f527993', class: `checkbox_div ${this.size} ${this.text ? 'text_class' : ''}` }, h("div", { key: 'b3ed1ba23d18adfb26e7691472b309c8ea06d6ff', class: `checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}` }, h("gb-checkbox-base", { key: 'a43c41cce8d2179691bf18fba3b6bb0b0b2156b4', size: this.size, type: this.type, state: this.state, indeterminate: this.indeterminate, onCheckboxClicked: this.onCheckboxClicked.bind(this), checked: this.checked })), this.text && (h("div", { key: 'c99a703d0c49bd68e85e2fec6c809279c2b979fd', class: `text ${!this.supportingText ? 'no_supporting_text' : ''}` }, h("slot", { key: 'ac1bd5be21ac15d53b833bf1eda604d764c48c74', name: "label" }), this.supportingText && h("slot", { key: '383223d749814a860b078848eb4d848cc19a8033', name: "supporting_text" })))));
     }
     static get is() { return "gb-checkbox"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-checkbox.js","sourceRoot":"","sources":["../../../src/components/gb-checkbox/gb-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,UAAU;IALvB;QAMU,YAAO,GAAY,KAAK,CAAC;QACzB,kBAAa,GAAY,KAAK,CAAC;QAI/B,SAAI,GAAY,KAAK,CAAC;QACtB,mBAAc,GAAY,KAAK,CAAC;KAsDzC;IAlDC,gBAAgB;QACd,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,sBAAsB;QACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAE7E,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,KAAK;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;YACtE,4DAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,EAAE;gBACtF,yEAAkB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAqB,CACtM;YACL,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE;gBACpE,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBACzB,IAAI,CAAC,cAAc,IAAI,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACxD,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { CheckBoxVariants, GeneralSizes, StateType } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-checkbox',\r\n  styleUrl: 'gb-checkbox.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckbox {\r\n  @Prop() checked: boolean = false;\r\n  @Prop() indeterminate: boolean = false;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: CheckBoxVariants;\r\n  @Prop() state: StateType;\r\n  @Prop() text: boolean = false;\r\n  @Prop() supportingText: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() checkboxClicked: EventEmitter<boolean>;\r\n\r\n  getMainTextClass() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return `text-sm-medium`;\r\n      case 'md':\r\n        return `text-md-medium`;\r\n    }\r\n  }\r\n\r\n  getSupportingTextClass() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add(this.getMainTextClass());\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n    }\r\n  }\r\n\r\n  onCheckboxClicked(event) : void {\r\n    this.checkboxClicked.emit(event.detail);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`checkbox_div ${this.size} ${this.text ? 'text_class' : ''}`}>\r\n        <div class={`checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}`}>\r\n          <gb-checkbox-base size={this.size} type={this.type} state={this.state} indeterminate={this.indeterminate} onCheckboxClicked={this.onCheckboxClicked.bind(this)} checked={this.checked}></gb-checkbox-base>\r\n        </div>\r\n        {this.text && (\r\n          <div class={`text ${!this.supportingText ? 'no_supporting_text' : ''}`}>\r\n            <slot name=\"label\"></slot>\r\n            {this.supportingText && <slot name=\"supporting_text\"></slot>}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-checkbox.js","sourceRoot":"","sources":["../../../src/components/gb-checkbox/gb-checkbox.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQjF,MAAM,OAAO,UAAU;IALvB;QAMU,YAAO,GAAY,KAAK,CAAC;QACzB,kBAAa,GAAY,KAAK,CAAC;QAI/B,SAAI,GAAY,KAAK,CAAC;QACtB,mBAAc,GAAY,KAAK,CAAC;KAsDzC;IAlDC,gBAAgB;QACd,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,sBAAsB;QACpB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAC7D,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAE7E,IAAI,YAAY,EAAE,CAAC;YACjB,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;QACtD,CAAC;QAED,IAAI,kBAAkB,EAAE,CAAC;YACvB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;QAClE,CAAC;IACH,CAAC;IAED,iBAAiB,CAAC,KAAK;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,EAAE;YACtE,4DAAK,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAAE,EAAE;gBACtF,yEAAkB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,aAAa,EAAE,IAAI,CAAC,aAAa,EAAE,iBAAiB,EAAE,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,GAAqB,CACtM;YACL,IAAI,CAAC,IAAI,IAAI,CACZ,4DAAK,KAAK,EAAE,QAAQ,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,oBAAoB,CAAC,CAAC,CAAC,EAAE,EAAE;gBACpE,6DAAM,IAAI,EAAC,OAAO,GAAQ;gBACzB,IAAI,CAAC,cAAc,IAAI,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACxD,CACP,CACG,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Event, EventEmitter, h, Prop } from \"@stencil/core\";\r\nimport { CheckBoxVariants, GeneralSizes, StateType } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-checkbox',\r\n  styleUrl: 'gb-checkbox.css',\r\n  shadow: true,\r\n})\r\nexport class GbCheckbox {\r\n  @Prop() checked: boolean = false;\r\n  @Prop() indeterminate: boolean = false;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: CheckBoxVariants; \r\n  @Prop() state: StateType;\r\n  @Prop() text: boolean = false;\r\n  @Prop() supportingText: boolean = false;\r\n  @Element() el: HTMLElement;\r\n  @Event() checkboxClicked: EventEmitter<boolean>;\r\n\r\n  getMainTextClass() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return `text-sm-medium`;\r\n      case 'md':\r\n        return `text-md-medium`;\r\n    }\r\n  }\r\n\r\n  getSupportingTextClass() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const mainTextSlot = this.el.querySelector('[slot=\"label\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n\r\n    if (mainTextSlot) {\r\n      mainTextSlot.classList.add(this.getMainTextClass());\r\n    }\r\n\r\n    if (supportingTextSlot) {\r\n      supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n    }\r\n  }\r\n\r\n  onCheckboxClicked(event) : void {\r\n    this.checkboxClicked.emit(event.detail);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`checkbox_div ${this.size} ${this.text ? 'text_class' : ''}`}>\r\n        <div class={`checkbox_base ${!this.supportingText ? 'checkbox_no_supporting_text' : ''}`}>\r\n          <gb-checkbox-base size={this.size} type={this.type} state={this.state} indeterminate={this.indeterminate} onCheckboxClicked={this.onCheckboxClicked.bind(this)} checked={this.checked}></gb-checkbox-base>\r\n        </div>\r\n        {this.text && (\r\n          <div class={`text ${!this.supportingText ? 'no_supporting_text' : ''}`}>\r\n            <slot name=\"label\"></slot>\r\n            {this.supportingText && <slot name=\"supporting_text\"></slot>}\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-quick-action-card/gb-quick-action-card.js

@@ -5,7 +5,7 @@ export class GbQuickActionCard {
         this.label = '';
     }
     render() {
-        return (h("div", { key: '6d328ffcadb86642fd07b4c61b0c7fd4d85464a8', class: "quick_action_div" }, h("gb-card-icon", { key: '744e1ea523a628d6055704f81a60c40d500dd51e', color: this.color, icon: this.icon }), h("p", { key: '4de693b3d826306fb2a46218a96e15a5239f0073', class: "label text-xs-medium" }, this.label)));
+        return (h("div", { key: '6d328ffcadb86642fd07b4c61b0c7fd4d85464a8', class: "quick_action_div" }, h("gb-card-icon", { key: '09f3bf13874f51a6bf638d52403a8f0f27ed62a4', size: "sm", color: this.color, icon: this.icon }), h("p", { key: '66adf901008fcf4817d5eff4ab5ecdbb3e338681', class: "label text-xs-medium" }, this.label)));
     }
     static get is() { return "gb-quick-action-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-quick-action-card/gb-quick-action-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-quick-action-card.js","sourceRoot":"","sources":["../../../src/components/gb-quick-action-card/gb-quick-action-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;IAN9B;QAQY,SAAI,GAAW,EAAE,CAAC;QAClB,UAAK,GAAW,EAAE,CAAC;KAU9B;IARG,MAAM;QACF,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,qEAAc,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB;YACjE,0DAAG,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\nimport { ColorTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-quick-action-card',\r\n    styleUrl: 'gb-quick-action-card.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbQuickActionCard {\r\n    @Prop() color: ColorTypes;\r\n    @Prop() icon: string = '';\r\n    @Prop() label: string = '';\r\n\r\n    render() {\r\n        return (\r\n          <div class=\"quick_action_div\">\r\n            <gb-card-icon color={this.color} icon={this.icon}></gb-card-icon>\r\n            <p class=\"label text-xs-medium\">{this.label}</p>\r\n          </div>\r\n        );\r\n    }\r\n}"]}
+{"version":3,"file":"gb-quick-action-card.js","sourceRoot":"","sources":["../../../src/components/gb-quick-action-card/gb-quick-action-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AASnD,MAAM,OAAO,iBAAiB;IAN9B;QAQY,SAAI,GAAW,EAAE,CAAC;QAClB,UAAK,GAAW,EAAE,CAAC;KAU9B;IARG,MAAM;QACF,OAAO,CACL,4DAAK,KAAK,EAAC,kBAAkB;YAC3B,qEAAc,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB;YAC3E,0DAAG,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\nimport { ColorTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-quick-action-card',\r\n    styleUrl: 'gb-quick-action-card.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbQuickActionCard {\r\n    @Prop() color: ColorTypes;\r\n    @Prop() icon: string = '';\r\n    @Prop() label: string = '';\r\n\r\n    render() {\r\n        return (\r\n          <div class=\"quick_action_div\">\r\n            <gb-card-icon size=\"sm\" color={this.color} icon={this.icon}></gb-card-icon>\r\n            <p class=\"label text-xs-medium\">{this.label}</p>\r\n          </div>\r\n        );\r\n    }\r\n}"]}

package/dist/collection/components/gb-quick-action-icon/gb-quick-action-icon.js

@@ -6,7 +6,7 @@ export class GbQuickActionIcon {
         this.isHovered = false;
     }
     render() {
-        return (h("div", { key: '7174bb84cb7fbb1e45c9767c48fda8eb601fe5ba', class: "quick_action_icon_div", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("gb-card-icon", { key: '51541f4024c2d25077da7a5ed7c0f2534501f9f5', color: this.isHovered ? 'cyan' : 'blue', icon: this.icon }), h("p", { key: '1188109437218b59b3753c762f7e267a8a125782', class: "label text-xs-medium" }, this.label)));
+        return (h("div", { key: '7174bb84cb7fbb1e45c9767c48fda8eb601fe5ba', class: "quick_action_icon_div", onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false) }, h("gb-card-icon", { key: '8cffed4b523b5115fecb4e93b3cd86c631687341', size: "sm", color: this.isHovered ? 'cyan' : 'blue', icon: this.icon }), h("p", { key: 'e9e599a89c26034a79a7469c151fbaeefc51ee1d', class: "label text-xs-medium" }, this.label)));
     }
     static get is() { return "gb-quick-action-icon"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-quick-action-icon/gb-quick-action-icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-quick-action-icon.js","sourceRoot":"","sources":["../../../src/components/gb-quick-action-icon/gb-quick-action-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,iBAAiB;IAN/B;QAOY,SAAI,GAAW,EAAE,CAAC;QAClB,UAAK,GAAW,EAAE,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;KAUtC;IARE,MAAM;QACF,OAAO,CACL,4DAAK,KAAK,EAAC,uBAAuB,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAC1H,qEAAc,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB;YACvF,0DAAG,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACH","sourcesContent":["import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'gb-quick-action-icon',\r\n    styleUrl: 'gb-quick-action-icon.css',\r\n    shadow: true\r\n})\r\n\r\n export class GbQuickActionIcon {\r\n    @Prop() icon: string = '';\r\n    @Prop() label: string = '';\r\n    @State() isHovered: boolean = false;\r\n\r\n    render() {\r\n        return (\r\n          <div class=\"quick_action_icon_div\" onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)}>\r\n            <gb-card-icon color={this.isHovered ? 'cyan' : 'blue'} icon={this.icon}></gb-card-icon>\r\n            <p class=\"label text-xs-medium\">{this.label}</p>\r\n          </div>\r\n        );\r\n    }\r\n }"]}
+{"version":3,"file":"gb-quick-action-icon.js","sourceRoot":"","sources":["../../../src/components/gb-quick-action-icon/gb-quick-action-icon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQzD,MAAM,OAAO,iBAAiB;IAN/B;QAOY,SAAI,GAAW,EAAE,CAAC;QAClB,UAAK,GAAW,EAAE,CAAC;QAClB,cAAS,GAAY,KAAK,CAAC;KAUtC;IARE,MAAM;QACF,OAAO,CACL,4DAAK,KAAK,EAAC,uBAAuB,EAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC;YAC1H,qEAAc,IAAI,EAAC,IAAI,EAAC,KAAK,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,GAAiB;YACjG,0DAAG,KAAK,EAAC,sBAAsB,IAAE,IAAI,CAAC,KAAK,CAAK,CAC5C,CACP,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACH","sourcesContent":["import { Component, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'gb-quick-action-icon',\r\n    styleUrl: 'gb-quick-action-icon.css',\r\n    shadow: true\r\n})\r\n\r\n export class GbQuickActionIcon {\r\n    @Prop() icon: string = '';\r\n    @Prop() label: string = '';\r\n    @State() isHovered: boolean = false;\r\n\r\n    render() {\r\n        return (\r\n          <div class=\"quick_action_icon_div\" onMouseEnter={() => (this.isHovered = true)} onMouseLeave={() => (this.isHovered = false)}>\r\n            <gb-card-icon size=\"sm\" color={this.isHovered ? 'cyan' : 'blue'} icon={this.icon}></gb-card-icon>\r\n            <p class=\"label text-xs-medium\">{this.label}</p>\r\n          </div>\r\n        );\r\n    }\r\n }"]}

package/dist/collection/components/gb-simple-side-bar-item/gb-simple-side-bar-item.css

@@ -2809,11 +2809,25 @@
   fill: var(--base-white, #ffffff);
 }
 
-.icon.plain_background.default path[fill],
+/* .icon.plain_background.default path[fill],
 .icon.colored_background.default path[fill],
 .icon.plain_background.default circle[fill],
 .icon.colored_background.default circle[fill] {
   fill: transparent;
+} */
+
+.icon.plain_background.default path.has_opacity,
+.icon.plain_background.default g.has_opacity,
+.icon.colored_background.default path.has_opacity,
+.icon.colored_background.default g.has_opacity{
+  opacity: 0;
+}
+
+.icon.plain_background.default path[fill].has_opacity,
+.icon.plain_background.default g.has_opacity,
+.icon.colored_background.default path[fill].has_opacity,
+.icon.colored_background.default g.has_opacity{
+  fill: transparent;
 }
 
 /* Arrow Color Styles */

package/dist/collection/components/gb-simple-side-bar-item/gb-simple-side-bar-item.js

@@ -12,7 +12,18 @@ export class GbSimpleSideBarItem {
         const iconPath = getAssetPath(`${iconName}`);
         const response = await fetch(iconPath);
         const svg = await response.text();
-        this.leadingIconSvg = svg;
+        const parser = new DOMParser();
+        const svgDoc = parser.parseFromString(svg, 'image/svg+xml');
+        const svgElement = svgDoc.documentElement;
+        // Add `has-opacity` class to all elements that have an opacity attribute
+        const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');
+        elementsWithOpacity.forEach(el => {
+            el.classList.add('has_opacity');
+        });
+        // Serialize and store
+        const modifiedSvg = svgElement.outerHTML;
+        console.log(modifiedSvg);
+        this.leadingIconSvg = modifiedSvg;
     }
     componentWillLoad() {
         this.loadIcon(this.icon);
@@ -28,7 +39,7 @@ export class GbSimpleSideBarItem {
     render() {
         const redBarSrc = getAssetPath(`assets/bar.svg`);
         const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);
-        return (h("div", { key: '235205c7f78ea839c55f53ba71e9a31e4d15d626', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'a58c03c0b8137016341536f58383c0ef222fff93', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: 'c37d2d9cde01d1fd59e428110ff31e8b3d95518c', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '53a2507a75f25ce787b25c3e74c04c7288ba5734', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '2c7e228d477ee399e822dcd49428e1eff3c282b1', class: "content" }, h("div", { key: '3c7705d134b635036a71890f3a9af3d5d4abb74a', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '700d18f48c3e59841702c1de18059142d9ee4c85', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '52decb4b99b13f8bc2a4e502c4af3135038f28f6', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '29bfa866c45b0b7ba232c4d433d01e47f03aaaa7' }, "10"))), this.showArrow && (h("svg", { key: 'd951e6c70b225da7fd416217757a7879554ac06d', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: 'edefc142770a7aee64108d4857d9186b1c73e7cd', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '4c632ffe7ec7fb60baccc27cf3404b348765f351', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '0d552ef5916b2388fc8c2f32b10ea5c4d7ae6f6b', slot: "label" }, this.label)))));
+        return (h("div", { key: 'f35d1439a734cf86e50dae57a477ebbf0408b83a', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: '85080e12689f346341d8c3cf82d7f58fcba13e98', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '1eb84f90ea9893731c5b1aa836fb42e559ba647f', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: '433b00dd6c7a643704fe0b9190f3bd9bcceb7b79', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: '44a7759a031aaea9c200d32db55471ef4eeb39ad', class: "content" }, h("div", { key: 'cf0e7bd0a62deccb028710c685395fda92ea0654', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: 'ef6fe194490694cda725d34211be2fe36c433a20', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '78780c575d9c28f0db306c258ad552749a1f7fa2', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '3fefa2d0d6d82a4c88fc18749fefafbe003edf51' }, "10"))), this.showArrow && (h("svg", { key: '09788094fdbb5fe65b41f25d0f32583b7d56ae34', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: '835a477f2c3f98f28358da67dca438f418214229', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: 'b5855938ea4bfe8bf6292ba482a27e8d9a47b0c9', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: 'aa09af1c1853bbcb72baacd64567726e19d711a2', slot: "label" }, this.label)))));
     }
     static get is() { return "gb-simple-side-bar-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-simple-side-bar-item/gb-simple-side-bar-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-simple-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-simple-side-bar-item',\r\n  styleUrl: 'gb-simple-side-bar-item.css',\r\n  shadow: true,\r\n})\r\n\r\nexport class GbSimpleSideBarItem {\r\n  @Prop() state: 'default' | 'active';\r\n  @Prop() type: 'full_with_label' | 'icon_only';\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showBadge: boolean = false;\r\n  @Prop({ mutable: true }) showTooltip: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  // @State() textState: any;\r\n  @Event() sideBarItemClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n    // this.textState = this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium';\r\n  }\r\n\r\n  onSideBarItemClicked() {\r\n    this.sideBarItemClicked.emit();\r\n  }\r\n\r\n  // getLabel() {\r\n  //   const slottedLabel = this.el.querySelector('slot');\r\n  //   return slottedLabel.textContent;\r\n  // }\r\n\r\n  render() {\r\n    const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n    const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\r\n    return (\r\n      <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n        <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n          {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n          {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n          <div class=\"content\">\r\n            <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n            {this.type === 'full_with_label' && (\r\n              <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n            )}\r\n          </div>\r\n          {this.type === 'full_with_label' && (\r\n            <>\r\n              {this.showBadge && (\r\n                <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n                  <p>10</p>\r\n                </gb-badge>\r\n              )}\r\n              {this.showArrow && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n                  <path\r\n                    d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n                    stroke=\"#212C65\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n        {this.type === 'icon_only' && this.showTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-simple-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-simple-side-bar-item',\r\n  styleUrl: 'gb-simple-side-bar-item.css',\r\n  shadow: true,\r\n})\r\n\r\nexport class GbSimpleSideBarItem {\r\n  @Prop() state: 'default' | 'active';\r\n  @Prop() type: 'full_with_label' | 'icon_only';\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showBadge: boolean = false;\r\n  @Prop({ mutable: true }) showTooltip: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  // @State() textState: any;\r\n  @Event() sideBarItemClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n\r\n    const parser = new DOMParser();\r\n    const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n    const svgElement = svgDoc.documentElement;\r\n\r\n    // Add `has-opacity` class to all elements that have an opacity attribute\r\n    const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n    elementsWithOpacity.forEach(el => {\r\n      el.classList.add('has_opacity');\r\n    });\r\n\r\n    // Serialize and store\r\n    const modifiedSvg = svgElement.outerHTML;\r\n    console.log(modifiedSvg)\r\n    this.leadingIconSvg = modifiedSvg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n    // this.textState = this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium';\r\n  }\r\n\r\n  onSideBarItemClicked() {\r\n    this.sideBarItemClicked.emit();\r\n  }\r\n\r\n  // getLabel() {\r\n  //   const slottedLabel = this.el.querySelector('slot');\r\n  //   return slottedLabel.textContent;\r\n  // }\r\n\r\n  render() {\r\n    const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n    const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\r\n    return (\r\n      <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n        <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n          {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n          {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n          <div class=\"content\">\r\n            <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n            {this.type === 'full_with_label' && (\r\n              <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n            )}\r\n          </div>\r\n          {this.type === 'full_with_label' && (\r\n            <>\r\n              {this.showBadge && (\r\n                <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n                  <p>10</p>\r\n                </gb-badge>\r\n              )}\r\n              {this.showArrow && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n                  <path\r\n                    d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n                    stroke=\"#212C65\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n        {this.type === 'icon_only' && this.showTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-step-base/gb-step-base.js

@@ -38,7 +38,7 @@ export class GbStepBase {
         this.internalState = newValue;
     }
     render() {
-        return (h(Fragment, null, this.type === 'text_line' && (h(Fragment, null, h("div", { key: '5f246274ec3d2257023d32b66efa66fa8a0100e5', class: `bar ${this.size} ${this.status} ${this.internalState}` }), this.showContent && (h("div", { key: 'f778520c9ff9168d93ee89d5275db5cbcfb8bd95', class: `text_line_div ${this.size} ${this.status} ${this.internalState}` }, h("div", { key: '7585fe7f46dad5b23d434b9cb02fe7043a29013d', class: `text_line_div_content` }, h("p", { key: '0c7c59d9946fa6af63ca9507cf7414e2131f85ee', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), this.showSupportingText && h("p", { key: '5df15f6eecdb793f615561276891be5b8b8613c0', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))))), this.type === 'icon_only' && (h("div", { key: 'a5f1fec179a1ee061bf25403023e6c25becaf605', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '45c8926c51b5cde322e65994039371df0a4f555e', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '025031bab54d7fbd2adbddf876cfcd8d298b9bfd', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '8ba831844041c666d094787e2e7264f694778d45', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.type === 'icon_left' && (h("div", { key: 'bc53e193812a565d28b484fd71c370f1be48c5f0', class: `icon_left_div ${this.size}` }, h("div", { key: '2d1b0a025387db3e20c6b837ed906b05c5e3cf0b', class: "connector_wrap" }, h("gb-step-icon-base", { key: '92e8d29fff8910ffd780dff1754b619726dcbf40', size: this.size, status: this.internalStatus, state: this.internalState }), this.connector && (h("div", { key: '7b77c6a3beda827997a4b6f896dc574ee349bf2f', class: "connector_div" }, h("div", { key: '33d5c41ce2c5b8d7d6eba998f26a83ff349ebc98', class: `icon_left_connector ${this.internalState} ${this.status}` })))), h("div", { key: '026533b1d2ed27d32cf83a3008ad9f0f7d4c2172', class: "icon_left_text" }, h("p", { key: 'a900ed23e5f6530881ea6881473865a6b0ee5150', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: '1de04cfdc538b0496093830014441717354234df', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'icon_top' && (h("div", { key: '8c769a7be8c168e611ee678a89246eb304c29fcd', class: `icon_top_div ${this.size}` }, h("div", { key: 'd9b9f800cbe9677a8cc2f50de3b8a561d4f4389a', class: "step_icon_div" }, h("div", { key: 'ce3f48a85a7d1cab1ab13a47b1d2c5ab9eb5822a', class: "step_icon" }, h("div", { key: '178e02db52dc5e26ac66f840cecf427fa8ceb273', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '26150628f97962ad6e6638293abb3087a9e375f3', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '4eb67ced9d408bbbc40d1234a4cdb7cc3ab1e99a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '4baef58be43caac1c31baad95870dd8525bbe559', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '4534403b9e087e32e77ac7a224c5c1b3368947b5', class: "icon_top_content" }, h("p", { key: '0d67a0f48310c6c58bf438cf410ab6851d042d0a', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'c62f8a16757613f8e11e1dffe7cc13f6ca4b5d21', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'featured_icon_left' && (h("div", { key: '6e0f7827423db8cd6d2395241b9009b27324e7fe', class: "featured_icon_left_div" }, h("div", { key: '29bb3e22b722517017d96f713c714702bf26ce4e', class: "connector_wrap" }, h("gb-featured-icon", { key: '78553c39e0fe60acbb0a7628346a0e973b3f298c', size: "sm", icon: "assets/user.svg", destructive: this.internalState === 'destructive' ? true : false }), h("div", { key: 'bf2e6a359fb8f414b6d1655058de0edf07b3e18f', class: "connector_div" }, h("div", { key: 'a3eb9d804c8021e6d2daf4d2e79918ba345e9688', class: `featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}` }))), h("div", { key: 'a69cb527dcd49464116b2770ec1f609f0854ff06', class: "featured_icon_left_content" }, h("p", { key: 'd85c9a8d29daba774309bb13cc2b3f8c7e33ad15', class: `featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}` }, this.label), h("p", { key: '52bc786eba533f01c3a21661f0bb596e071b4e2e', class: `featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}` }, this.supportingText))))));
+        return (h(Fragment, null, this.type === 'text_line' && (h(Fragment, null, h("div", { key: '5f246274ec3d2257023d32b66efa66fa8a0100e5', class: `bar ${this.size} ${this.status} ${this.internalState}` }), this.showContent && (h("div", { key: 'f778520c9ff9168d93ee89d5275db5cbcfb8bd95', class: `text_line_div ${this.size} ${this.status} ${this.internalState}` }, h("div", { key: '7585fe7f46dad5b23d434b9cb02fe7043a29013d', class: `text_line_div_content` }, h("p", { key: '0c7c59d9946fa6af63ca9507cf7414e2131f85ee', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), this.showSupportingText && h("p", { key: '5df15f6eecdb793f615561276891be5b8b8613c0', class: `text_line_text text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))))), this.type === 'icon_only' && (h("div", { key: 'a5f1fec179a1ee061bf25403023e6c25becaf605', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '45c8926c51b5cde322e65994039371df0a4f555e', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '025031bab54d7fbd2adbddf876cfcd8d298b9bfd', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '8ba831844041c666d094787e2e7264f694778d45', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))))), this.type === 'icon_left' && (h("div", { key: 'bc53e193812a565d28b484fd71c370f1be48c5f0', class: `icon_left_div ${this.size}` }, h("div", { key: '2d1b0a025387db3e20c6b837ed906b05c5e3cf0b', class: "connector_wrap" }, h("gb-step-icon-base", { key: '92e8d29fff8910ffd780dff1754b619726dcbf40', size: this.size, status: this.internalStatus, state: this.internalState }), this.connector && (h("div", { key: '7b77c6a3beda827997a4b6f896dc574ee349bf2f', class: "connector_div" }, h("div", { key: '33d5c41ce2c5b8d7d6eba998f26a83ff349ebc98', class: `icon_left_connector ${this.internalState} ${this.status}` })))), h("div", { key: '026533b1d2ed27d32cf83a3008ad9f0f7d4c2172', class: "icon_left_text" }, h("p", { key: 'a900ed23e5f6530881ea6881473865a6b0ee5150', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: '1de04cfdc538b0496093830014441717354234df', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'icon_top' && (h("div", { key: '8c769a7be8c168e611ee678a89246eb304c29fcd', class: `icon_top_div ${this.size}` }, h("div", { key: 'd9b9f800cbe9677a8cc2f50de3b8a561d4f4389a', class: "step_icon_div" }, h("div", { key: 'ce3f48a85a7d1cab1ab13a47b1d2c5ab9eb5822a', class: "step_icon" }, h("div", { key: '178e02db52dc5e26ac66f840cecf427fa8ceb273', class: `icon_only_div ${this.status} ${this.internalState} ${this.size}` }, this.status !== 'complete' && h("div", { key: '26150628f97962ad6e6638293abb3087a9e375f3', class: `dot ${this.status} ${this.internalState} ${this.size}` }), this.status === 'complete' && (h("svg", { key: '4eb67ced9d408bbbc40d1234a4cdb7cc3ab1e99a', xmlns: "http://www.w3.org/2000/svg", width: "12", height: "10", viewBox: "0 0 12 10", fill: "none", class: `tick ${this.status} ${this.internalState} ${this.size}` }, h("path", { key: '4baef58be43caac1c31baad95870dd8525bbe559', d: "M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1", stroke: "#075DB2", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), h("div", { key: '4534403b9e087e32e77ac7a224c5c1b3368947b5', class: "icon_top_content" }, h("p", { key: '0d67a0f48310c6c58bf438cf410ab6851d042d0a', class: `text_line_label text-sm-semi-bold ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'c62f8a16757613f8e11e1dffe7cc13f6ca4b5d21', class: `text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}` }, this.supportingText)))), this.type === 'featured_icon_left' && (h("div", { key: '6e0f7827423db8cd6d2395241b9009b27324e7fe', class: "featured_icon_left_div" }, h("div", { key: '29bb3e22b722517017d96f713c714702bf26ce4e', class: "connector_wrap" }, h("gb-featured-icon", { key: '78553c39e0fe60acbb0a7628346a0e973b3f298c', size: "sm", icon: "assets/user.svg", destructive: this.internalState === 'destructive' ? true : false }), this.connector && (h("div", { key: 'ccdbca8db79e875883219c3fff6cf2f9278c0f90', class: "connector_div" }, h("div", { key: 'cdf4098e2ea919ae17c095519ab311b074cff310', class: `featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}` })))), h("div", { key: 'edb997157a9e0d98eaf86fe22ac84359ce5d5c80', class: "featured_icon_left_content" }, h("p", { key: 'b7bce5201986e82d2845ac483438f29a6d2900bc', class: `featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}` }, this.label), h("p", { key: 'de99c47b115d71d4a117638bc5325edb81ae69fa', class: `featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}` }, this.supportingText))))));
     }
     static get is() { return "gb-step-base"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-step-base/gb-step-base.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-step-base.js","sourceRoot":"","sources":["../../../src/components/gb-step-base/gb-step-base.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Fragment, Watch, State } from \"@stencil/core\";\r\nimport { BreakPoints, GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-step-base',\r\n  styleUrl: 'gb-step-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepBase {\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: ProgressStepTypes;\r\n  @Prop() state: ProgressStepStates;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() showContent: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n  @Prop() breakpoint: BreakPoints;\r\n\r\n  featuredIconLeftLabelClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  featuredIconLeftTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalStatus = this.status;\r\n  }\r\n\r\n  @Watch('status')\r\n  onStatusChange(newValue: ProgressStepStatus, _oldValue: ProgressStepStatus) {\r\n    this.internalStatus = newValue;\r\n  }\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: ProgressStepStates, _oldValue: ProgressStepStates) {\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'text_line' && (\r\n          <>\r\n            <div class={`bar ${this.size} ${this.status} ${this.internalState}`}></div>\r\n            {this.showContent && (\r\n              <div class={`text_line_div ${this.size} ${this.status} ${this.internalState}`}>\r\n                <div class={`text_line_div_content`}>\r\n                  <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n                  {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'icon_only' && (\r\n          <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n            {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n            {this.status === 'complete' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            )}\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_left' && (\r\n          <div class={`icon_left_div ${this.size}`}>\r\n            <div class=\"connector_wrap\">\r\n              <gb-step-icon-base size={this.size} status={this.internalStatus} state={this.internalState}></gb-step-icon-base>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`icon_left_connector ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"icon_left_text\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_top' && (\r\n          <div class={`icon_top_div ${this.size}`}>\r\n            <div class=\"step_icon_div\">\r\n              <div class=\"step_icon\">\r\n                <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                  {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n                  {this.status === 'complete' && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                      <path\r\n                        d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                        stroke=\"#075DB2\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"icon_top_content\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'featured_icon_left' && (\r\n          <div class=\"featured_icon_left_div\">\r\n            <div class=\"connector_wrap\">\r\n              <gb-featured-icon size=\"sm\" icon=\"assets/user.svg\" destructive={this.internalState === 'destructive' ? true : false}></gb-featured-icon>\r\n              <div class=\"connector_div\">\r\n                <div class={`featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}`}></div>\r\n              </div>\r\n            </div>\r\n            <div class=\"featured_icon_left_content\">\r\n              <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}"]}
+{"version":3,"file":"gb-step-base.js","sourceRoot":"","sources":["../../../src/components/gb-step-base/gb-step-base.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ3E,MAAM,OAAO,UAAU;IALvB;QAUU,cAAS,GAAY,KAAK,CAAC;QAC3B,gBAAW,GAAY,KAAK,CAAC;QAC7B,uBAAkB,GAAY,KAAK,CAAC;QACpC,UAAK,GAAW,EAAE,CAAC;QACnB,mBAAc,GAAW,EAAE,CAAC;KAiIrC;IA5HC,4BAA4B;QAC1B,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;QAC/B,CAAC;IACH,CAAC;IAED,2BAA2B;QACzB,QAAQ,IAAI,CAAC,IAAI,EAAE,CAAC;YAClB,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;YAC3B,KAAK,IAAI;gBACP,OAAO,iBAAiB,CAAC;QAC7B,CAAC;IACH,CAAC;IAED,iBAAiB;QACf,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC;QAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,MAAM,CAAC;IACpC,CAAC;IAGD,cAAc,CAAC,QAA4B,EAAE,SAA6B;QACxE,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;IACjC,CAAC;IAGD,aAAa,CAAC,QAA4B,EAAE,SAA6B;QACvE,IAAI,CAAC,aAAa,GAAG,QAAQ,CAAC;IAChC,CAAC;IAED,MAAM;QACJ,OAAO,CACL;YACG,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B;gBACE,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,GAAQ;gBAC1E,IAAI,CAAC,WAAW,IAAI,CACnB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE;oBAC3E,4DAAK,KAAK,EAAE,uBAAuB;wBACjC,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;wBACnG,IAAI,CAAC,kBAAkB,IAAI,0DAAG,KAAK,EAAE,kCAAkC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CAClI,CACF,CACP,CACA,CACJ;YACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;gBAC1E,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;gBACzG,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,CAC7B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;oBAC5J,6DAAM,CAAC,EAAC,uEAAuE,EAAC,MAAM,EAAC,SAAS,kBAAc,GAAG,oBAAgB,OAAO,qBAAiB,OAAO,GAAG,CAC/J,CACP,CACG,CACP;YACA,IAAI,CAAC,IAAI,KAAK,WAAW,IAAI,CAC5B,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,IAAI,EAAE;gBACtC,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,0EAAmB,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,CAAC,cAAc,EAAE,KAAK,EAAE,IAAI,CAAC,aAAa,GAAsB;oBAC/G,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAE,uBAAuB,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,GAAQ,CAC1E,CACP,CACG;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBACpG,0DAAG,KAAK,EAAE,kBAAkB,IAAI,CAAC,UAAU,oBAAoB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CACzH,CACF,CACP;YACA,IAAI,CAAC,IAAI,KAAK,UAAU,IAAI,CAC3B,4DAAK,KAAK,EAAE,gBAAgB,IAAI,CAAC,IAAI,EAAE;gBACrC,4DAAK,KAAK,EAAC,eAAe;oBACxB,4DAAK,KAAK,EAAC,WAAW;wBACpB,4DAAK,KAAK,EAAE,iBAAiB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;4BAC1E,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,4DAAK,KAAK,EAAE,OAAO,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE,GAAQ;4BACzG,IAAI,CAAC,MAAM,KAAK,UAAU,IAAI,CAC7B,4DAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,KAAK,EAAE,QAAQ,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,IAAI,EAAE;gCAC5J,6DACE,CAAC,EAAC,uEAAuE,EACzE,MAAM,EAAC,SAAS,kBACH,GAAG,oBACD,OAAO,qBACN,OAAO,GACvB,CACE,CACP,CACG,CACF,CACF;gBACN,4DAAK,KAAK,EAAC,kBAAkB;oBAC3B,0DAAG,KAAK,EAAE,qCAAqC,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBACpG,0DAAG,KAAK,EAAE,kBAAkB,IAAI,CAAC,UAAU,oBAAoB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CACzH,CACF,CACP;YACA,IAAI,CAAC,IAAI,KAAK,oBAAoB,IAAI,CACrC,4DAAK,KAAK,EAAC,wBAAwB;gBACjC,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,yEAAkB,IAAI,EAAC,IAAI,EAAC,IAAI,EAAC,iBAAiB,EAAC,WAAW,EAAE,IAAI,CAAC,aAAa,KAAK,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,GAAqB;oBACvI,IAAI,CAAC,SAAS,IAAI,CACjB,4DAAK,KAAK,EAAC,eAAe;wBACxB,4DAAK,KAAK,EAAE,gCAAgC,IAAI,CAAC,IAAI,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,MAAM,EAAE,GAAQ,CAChG,CACP,CACG;gBACN,4DAAK,KAAK,EAAC,4BAA4B;oBACrC,0DAAG,KAAK,EAAE,4BAA4B,IAAI,CAAC,4BAA4B,EAAE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,KAAK,CAAK;oBAClI,0DAAG,KAAK,EAAE,2BAA2B,IAAI,CAAC,2BAA2B,EAAE,IAAI,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,aAAa,EAAE,IAAG,IAAI,CAAC,cAAc,CAAK,CACrI,CACF,CACP,CACA,CACJ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, h, Fragment, Watch, State } from \"@stencil/core\";\r\nimport { BreakPoints, GeneralSizes, ProgressStepStates, ProgressStepStatus, ProgressStepTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-step-base',\r\n  styleUrl: 'gb-step-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbStepBase {\r\n  @Prop() status: ProgressStepStatus;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() type: ProgressStepTypes;\r\n  @Prop() state: ProgressStepStates;\r\n  @Prop() connector: boolean = false;\r\n  @Prop() showContent: boolean = false;\r\n  @Prop() showSupportingText: boolean = false;\r\n  @Prop() label: string = '';\r\n  @Prop() supportingText: string = '';\r\n  @State() internalState: ProgressStepStates;\r\n  @State() internalStatus: ProgressStepStatus;\r\n  @Prop() breakpoint: BreakPoints;\r\n\r\n  featuredIconLeftLabelClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  featuredIconLeftTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-regular';\r\n      case 'md':\r\n        return 'text-sm-regular';\r\n      case 'lg':\r\n        return 'text-md-regular';\r\n    }\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.internalState = this.state;\r\n    this.internalStatus = this.status;\r\n  }\r\n\r\n  @Watch('status')\r\n  onStatusChange(newValue: ProgressStepStatus, _oldValue: ProgressStepStatus) {\r\n    this.internalStatus = newValue;\r\n  }\r\n\r\n  @Watch('state')\r\n  onStateChange(newValue: ProgressStepStates, _oldValue: ProgressStepStates) {\r\n    this.internalState = newValue;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        {this.type === 'text_line' && (\r\n          <>\r\n            <div class={`bar ${this.size} ${this.status} ${this.internalState}`}></div>\r\n            {this.showContent && (\r\n              <div class={`text_line_div ${this.size} ${this.status} ${this.internalState}`}>\r\n                <div class={`text_line_div_content`}>\r\n                  <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n                  {this.showSupportingText && <p class={`text_line_text text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>}\r\n                </div>\r\n              </div>\r\n            )}\r\n          </>\r\n        )}\r\n        {this.type === 'icon_only' && (\r\n          <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n            {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n            {this.status === 'complete' && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                <path d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\" stroke=\"#075DB2\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n              </svg>\r\n            )}\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_left' && (\r\n          <div class={`icon_left_div ${this.size}`}>\r\n            <div class=\"connector_wrap\">\r\n              <gb-step-icon-base size={this.size} status={this.internalStatus} state={this.internalState}></gb-step-icon-base>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`icon_left_connector ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"icon_left_text\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'icon_top' && (\r\n          <div class={`icon_top_div ${this.size}`}>\r\n            <div class=\"step_icon_div\">\r\n              <div class=\"step_icon\">\r\n                <div class={`icon_only_div ${this.status} ${this.internalState} ${this.size}`}>\r\n                  {this.status !== 'complete' && <div class={`dot ${this.status} ${this.internalState} ${this.size}`}></div>}\r\n                  {this.status === 'complete' && (\r\n                    <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"12\" height=\"10\" viewBox=\"0 0 12 10\" fill=\"none\" class={`tick ${this.status} ${this.internalState} ${this.size}`}>\r\n                      <path\r\n                        d=\"M1 6.45455C1 6.45455 2.07143 6.45455 3.5 9C3.5 9 7.47059 2.33333 11 1\"\r\n                        stroke=\"#075DB2\"\r\n                        stroke-width=\"2\"\r\n                        stroke-linecap=\"round\"\r\n                        stroke-linejoin=\"round\"\r\n                      />\r\n                    </svg>\r\n                  )}\r\n                </div>\r\n              </div>\r\n            </div>\r\n            <div class=\"icon_top_content\">\r\n              <p class={`text_line_label text-sm-semi-bold ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`text_line_text ${this.breakpoint} text-xs-regular ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n        {this.type === 'featured_icon_left' && (\r\n          <div class=\"featured_icon_left_div\">\r\n            <div class=\"connector_wrap\">\r\n              <gb-featured-icon size=\"sm\" icon=\"assets/user.svg\" destructive={this.internalState === 'destructive' ? true : false}></gb-featured-icon>\r\n              {this.connector && (\r\n                <div class=\"connector_div\">\r\n                  <div class={`featured_icon_left_connector ${this.size} ${this.internalState} ${this.status}`}></div>\r\n                </div>\r\n              )}\r\n            </div>\r\n            <div class=\"featured_icon_left_content\">\r\n              <p class={`featured_icon_left_label ${this.featuredIconLeftLabelClasses()} ${this.status} ${this.internalState}`}>{this.label}</p>\r\n              <p class={`featured_icon_left_text ${this.featuredIconLeftTextClasses()} ${this.status} ${this.internalState}`}>{this.supportingText}</p>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}"]}

package/dist/collection/components/gb-table-header/gb-table-header.css

@@ -2691,6 +2691,7 @@
 .input_field{
   flex-grow: 1;
   width: 100%;
+  max-width: 20rem;
 }
 
 .action {

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js

@@ -5,18 +5,20 @@ export class GbThemeTab {
     }
     tabClicked(theme) {
         this.currentActiveTab = theme;
-        // this.themeTabClicked.emit(theme);
-        this.el.dispatchEvent(new CustomEvent('themeChange', {
-            detail: { theme },
-            bubbles: true,
-            composed: true, // This is key
-        }));
+        this.themeTabClicked.emit(theme);
+        // this.el.dispatchEvent(
+        //   new CustomEvent('themeChange', {
+        //     detail: { theme },
+        //     bubbles: true,
+        //     composed: true, // This is key
+        //   }),
+        // );    
     }
     render() {
         const systemIconSrc = getAssetPath(`assets/laptop.svg`);
         const sunSrc = getAssetPath(`assets/sun-02.svg`);
         const moonSrc = getAssetPath(`assets/moon-02.svg`);
-        return (h("div", { key: '31947175a1e4851a7670e765bb2a1fd4c86094b2', class: `theme_tab_div` }, h("div", { key: 'f8203a7ae8f4b36e6bbfa03ca337ff570474a01b', class: "tab" }, h("gb-icon-button-base", { key: 'a2ee41d8666023dd269ab0ad034854b82eed2c7d', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: '495c3ad49a1ca65c2efd7a4bbbe1f35bfd941cb7', class: "tab" }, h("gb-icon-button-base", { key: 'd4374f5707ec6f001f5fbf53177a39bf52c2dd42', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: 'ae5d8d5e5d853b5678478f11f9f99bd2aa912424', class: "tab" }, h("gb-icon-button-base", { key: '0e18c854dd006133968010dc91c853fa83666e82', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
+        return (h("div", { key: '5ae0b6373982977c41786184f3cb3d34dcc0c588', class: `theme_tab_div` }, h("div", { key: '974eacecc75c78baa1708c1db932f2059e5c246e', class: "tab" }, h("gb-icon-button-base", { key: '4bac6ce37533ea34f0e383e575000fd01c911f55', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('system') })), h("div", { key: 'a0c92f49b5236117be54a6531c5fd02112424d59', class: "tab" }, h("gb-icon-button-base", { key: '23312b580e6f72f47c03fb66ad36bfe0e1250933', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('light') })), h("div", { key: '30eaee8a799bb181866b20288447c5b598dedd15', class: "tab" }, h("gb-icon-button-base", { key: 'eb4e07469a6fd508abf1765b0f812023431aa83e', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('dark') }))));
     }
     static get is() { return "gb-theme-tab"; }
     static get encapsulation() { return "shadow"; }