globuswebcomponents 2.2.4 → 2.2.6

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

@@ -7,13 +7,15 @@ export class GbButton {
         this.leadingIconSvg = '';
         this.trailingIconSvg = '';
         this.internalButtonState = '';
+        this.internalIconLeadingState = '';
+        this.internalIconTrailingState = '';
     }
     componentWillLoad() {
         if (this.iconLeading && this.iconLeadingSwap) {
-            this.loadIcon(this.iconLeadingSwap, 'leading');
+            this.loadIcon(this.internalIconLeadingState, 'leading');
         }
         if (this.iconTrailing && this.iconTrailingSwap) {
-            this.loadIcon(this.iconTrailingSwap, 'trailing');
+            this.loadIcon(this.internalIconTrailingState, 'trailing');
         }
         const buttonSlot = this.el.querySelector('p');
         if (buttonSlot) {
@@ -27,6 +29,9 @@ export class GbButton {
     updateButtonState(newValue) {
         this.internalButtonState = newValue;
     }
+    updateIconLeading(newValue) {
+        this.internalIconLeadingState = newValue;
+    }
     componentWillRender() {
         this.internalButtonState = this.state;
     }
@@ -75,7 +80,7 @@ export class GbButton {
         return h("div", { class: "icon right-icon", innerHTML: this.trailingIconSvg });
     }
     render() {
-        return (h("button", { key: '1b9bd885edcced915b19588c347347ab9dfe42e4', disabled: this.internalButtonState === 'disabled', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '44ebde0c4f467b8c4cf3712fa864cd88538041f8' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
+        return (h("button", { key: 'af305be7978c48b6a38bc0d7495f168ce2714f66', disabled: this.internalButtonState === 'disabled', class: this.getButtonClasses() }, this.iconLeading && this.icon === 'default' && this.renderLeadingIcon(), this.icon === 'default' && h("slot", { key: '8c05dfe7d0055796a30224d9bd331c0b3142f97a' }), this.iconTrailing && this.renderTrailingIcon(), this.icon === 'only' && this.renderLeadingIcon()));
     }
     static get is() { return "gb-button"; }
     static get encapsulation() { return "shadow"; }
@@ -290,7 +295,9 @@ export class GbButton {
         return {
             "leadingIconSvg": {},
             "trailingIconSvg": {},
-            "internalButtonState": {}
+            "internalButtonState": {},
+            "internalIconLeadingState": {},
+            "internalIconTrailingState": {}
         };
     }
     static get elementRef() { return "el"; }
@@ -298,6 +305,9 @@ export class GbButton {
         return [{
                 "propName": "state",
                 "methodName": "updateButtonState"
+            }, {
+                "propName": "iconLeadingSwap",
+                "methodName": "updateIconLeading"
             }];
     }
 }

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

@@ -1 +1 @@
-{"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size!: GeneralSizes;\r\n  @Prop() hierarchy!: GeneralHierarchies;\r\n  @Prop() icon!: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType;\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n  @State() internalButtonState: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.iconLeadingSwap, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.iconTrailingSwap, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n\r\n    // if (!this.iconLeading && !this.iconTrailing) {\r\n    //   buttonSlot.classList.add('center');\r\n    // }\r\n  }\r\n\r\n  @Watch('state')\r\n  updateButtonState(newValue: string) {\r\n    this.internalButtonState = newValue;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalButtonState = this.state;\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.internalButtonState === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      oneicon: this.iconLeading || this.iconTrailing,\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button disabled={this.internalButtonState === 'disabled'} class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-button.js","sourceRoot":"","sources":["../../../src/components/gb-button/gb-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, getAssetPath, h, Prop, State, Watch } from '@stencil/core';\r\nimport { GeneralHierarchies, GeneralSizes, StateType } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-button',\r\n  styleUrl: 'gb-button.css',\r\n  shadow: true,\r\n  assetsDirs: [''],\r\n})\r\nexport class GbButton {\r\n  @Prop() size!: GeneralSizes;\r\n  @Prop() hierarchy!: GeneralHierarchies;\r\n  @Prop() icon!: 'default' | 'only';\r\n  @Prop() destructive: boolean = false;\r\n  @Prop() state: StateType;\r\n  @Prop() iconLeading: boolean = false;\r\n  @Prop() iconLeadingSwap: string;\r\n  @Prop() iconTrailing: boolean = false;\r\n  @Prop() iconTrailingSwap: string;\r\n  @Element() el: HTMLElement;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() trailingIconSvg: string = '';\r\n  @State() internalButtonState: string = '';\r\n  @State() internalIconLeadingState: string = '';\r\n  @State() internalIconTrailingState: string = '';\r\n\r\n  componentWillLoad() {\r\n    if (this.iconLeading && this.iconLeadingSwap) {\r\n      this.loadIcon(this.internalIconLeadingState, 'leading');\r\n    }\r\n    if (this.iconTrailing && this.iconTrailingSwap) {\r\n      this.loadIcon(this.internalIconTrailingState, 'trailing');\r\n    }\r\n\r\n    const buttonSlot = this.el.querySelector('p');\r\n\r\n    if (buttonSlot) {\r\n      buttonSlot.classList.add(this.getButtonTextClasses());\r\n      buttonSlot.classList.add('nowrap');\r\n    }\r\n\r\n    // if (!this.iconLeading && !this.iconTrailing) {\r\n    //   buttonSlot.classList.add('center');\r\n    // }\r\n  }\r\n\r\n  @Watch('state')\r\n  updateButtonState(newValue: string) {\r\n    this.internalButtonState = newValue;\r\n  }\r\n\r\n  @Watch('iconLeadingSwap')\r\n  updateIconLeading(newValue: string) {\r\n    this.internalIconLeadingState = newValue;\r\n  }\r\n\r\n  componentWillRender() {\r\n    this.internalButtonState = this.state;\r\n  }\r\n\r\n  async loadIcon(iconName: string, type: 'leading' | 'trailing') {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    if (type === 'leading') {\r\n      this.leadingIconSvg = svg;\r\n    } else {\r\n      this.trailingIconSvg = svg;\r\n    }\r\n  }\r\n\r\n  // Helper to apply color styles based on the button state\r\n  getButtonClasses() {\r\n    return {\r\n      button: true,\r\n      [this.size]: true,\r\n      [this.hierarchy]: true,\r\n      destructive: this.destructive,\r\n      disabled: this.internalButtonState === 'disabled',\r\n      default: this.icon === 'default',\r\n      only: this.icon === 'only',\r\n      oneicon: this.iconLeading || this.iconTrailing,\r\n    };\r\n  }\r\n\r\n  getButtonTextClasses() {\r\n    switch (this.size) {\r\n      case 'xl2':\r\n        return 'text-lg-semi-bold';\r\n      case 'xl':\r\n        return 'text-md-semi-bold';\r\n      case 'lg':\r\n        return 'text-md-semi-bold';\r\n      case 'md':\r\n        return 'text-sm-semi-bold';\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n    }\r\n  }\r\n\r\n  renderLeadingIcon() {\r\n    return <div class={`icon left-icon ${this.size}`} innerHTML={this.leadingIconSvg}></div>;\r\n  }\r\n\r\n  renderTrailingIcon() {\r\n    return <div class=\"icon right-icon\" innerHTML={this.trailingIconSvg}></div>;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button disabled={this.internalButtonState === 'disabled'} class={this.getButtonClasses()}>\r\n        {this.iconLeading && this.icon === 'default' && this.renderLeadingIcon()}\r\n        {this.icon === 'default' && <slot></slot>}\r\n        {this.iconTrailing && this.renderTrailingIcon()}\r\n        {this.icon === 'only' && this.renderLeadingIcon()}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -21,13 +21,15 @@ export class GbButton {
   @State() leadingIconSvg: string = '';
   @State() trailingIconSvg: string = '';
   @State() internalButtonState: string = '';
+  @State() internalIconLeadingState: string = '';
+  @State() internalIconTrailingState: string = '';
 
   componentWillLoad() {
     if (this.iconLeading && this.iconLeadingSwap) {
-      this.loadIcon(this.iconLeadingSwap, 'leading');
+      this.loadIcon(this.internalIconLeadingState, 'leading');
     }
     if (this.iconTrailing && this.iconTrailingSwap) {
-      this.loadIcon(this.iconTrailingSwap, 'trailing');
+      this.loadIcon(this.internalIconTrailingState, 'trailing');
     }
 
     const buttonSlot = this.el.querySelector('p');
@@ -47,6 +49,11 @@ export class GbButton {
     this.internalButtonState = newValue;
   }
 
+  @Watch('iconLeadingSwap')
+  updateIconLeading(newValue: string) {
+    this.internalIconLeadingState = newValue;
+  }
+
   componentWillRender() {
     this.internalButtonState = this.state;
   }

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-sidebar/gb-sidebar.css

@@ -2905,4 +2905,27 @@
     gap: var(--spacing-2);
     height: 100vh;
     padding: var(--spacing-4) var(--spacing-none);
+}
+
+.information_header{
+    display: flex;
+align-items: center;
+gap: var(--spacing-2);
+align-self: stretch;
+}
+
+.need_help.plain_background{
+    color: var(--color-text-brandDarkBlue, #212C65);
+}
+
+.need_help.colored_background{
+    color: var(--base-white, #FFFFFF);
+}
+
+.info.colored_background {
+    color: var(--base-white, #FFFFFF);
+}
+
+.info.plain_background{
+    color: var(--color-text-bold, #202939);
 }

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

@@ -48,6 +48,7 @@ export class GbSidebar {
         };
         this.activePrimaryItem = 'Staff';
         this.activeSecondaryItem = 'Attendance Tracking';
+        this.hasInfo = false;
         this.leadingIconSvg = '';
     }
     async loadIcon(iconName) {
@@ -98,7 +99,8 @@ export class GbSidebar {
         const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);
         const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);
         const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);
-        return (h(Fragment, null, this.type === 'simple' && (h("div", { key: '3e08a7a52af07e57b2647aec5931db7284257cfc', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '5a760c39b63e81c4b9ee372a3e320ad7b6585f4b', class: "pattern" }, h("img", { key: '19498c75e328fc422b4a134d9c40d8883f766199', src: patternSrc, alt: "" }))), h("div", { key: 'e12b6b8faadc581de0969b2c55211411df601ddb', class: "nav" }, h("div", { key: 'e4d0ac18ac74bc9e3c54c4be06dc097fef85efeb', class: `sidebar_header ${this.state}` }, h("div", { key: '33d6b6bf20c15f918231aab3178d98bdffe9be7b', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: '041349e36c5c164690540d1e69686d7b602b8dc6', src: logoSrc, alt: "" })), h("div", { key: 'b905f745f5e1068a3153701b1d476fab1ed46daa', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '8bab216d44272124519a853733752cd04d9c5ab9', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '9e504ff6f6e7e4109a5949746c536c11fb4d4f5c', class: "navigation" }, h("div", { key: '28a66c7922528e5d7cb0d28b146164cf9abb6d80', class: "item" }, h("gb-simple-side-bar-item", { key: '531155f87d094e737ad97d67027664bd38dc9d79', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-simple-side-bar-item", { key: 'bcaa345496e4bc482cd97e7f6028ad763eeae941', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-simple-side-bar-item", { key: 'dff2b2543c693ff8328098abe4cbc8c7f7f9d34a', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-simple-side-bar-item", { key: 'd8f6f19426e89a37749fe5a3c22922120e2e9654', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-simple-side-bar-item", { key: '471a534e6e4e07cd45ecf2963250b4de148168ec', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '102a9faf88794bd808dba8ff23889456ad32fe2e', class: "navigation" }, h("div", { key: '0a6f97d2260254ee67bb7b874b9cd3214d6db154', class: "item" }, this.sixthItemLabel && (h("gb-simple-side-bar-item", { key: '86ea84aa61ff97fba1c78bfa35c80c9e9c2ff42c', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-simple-side-bar-item", { key: '0e4ee0693755cdd607db888482f43a27caff0fb8', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-simple-side-bar-item", { key: '2662070942c15680e13101d066c3e3a5df00e83e', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-simple-side-bar-item", { key: 'efc69161fa3486aa2132e23b3fabeddc0c47adad', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-simple-side-bar-item", { key: '862a280d257d41b2dfcc533e6b3941759d566717', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: 'cf434cb4474bd591050e74372e1ca6f74a127719', class: "application_name" }, h("div", { key: '8530c5774c50aa8dcd46bf9bc889f02431922699', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '8818a2465c7539121a888b16866bb140f6686456', class: "application_name_pattern" }, h("img", { key: 'a43735c68fab35fc669ae76eeaeee1c6b530ec32', src: patternSrc, alt: "" }))), h("div", { key: '6730c822eae899d527c272084bb8182e8606cfe4', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '034e779c12fb12331ce96df42d2ac3b4b2a6b22c', class: textClass }, h("slot", { key: '805e53bb0c9072a4ce0fda8ccdf7547b5a507ac7', name: "application_name" }))))))), this.type === 'complex' && (h("div", { key: '97d6de18499e796d1f06fcb8787bd2d2df7cf2e2', class: `sidebar_and_nav ${this.state}` }, h("div", { key: 'a2bba9212f617e3adb9e00544929af99e40bc599', class: "nav_div" }, h("div", { key: 'cc559f8e4afef415db2731d5b7c170d3508553c5', class: "logo_and_button" }, this.state === 'expanded' && h("img", { key: '699c526a2a9c255ed2b9a56ac55cb5446e747ad3', src: blueLogoSrc }), this.state === 'collapsed' && h("img", { key: '39622d50804772d58df4601fd8783213d32fbf35', src: logoSrc, alt: "" }), h("gb-collapse-button", { key: 'c070dc845275347256652a099bae74e53d702712', color: "gray", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '96642fa66cf939994be33ad05093207ca518caa6', class: "complex_sidebar_div" }, h("div", { key: '1e08938fa9fbca2cb6ecc010c714e5a02deef9bb', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (h("div", { key: 'c8a4e51520f00ee4f00dfb17dcebfabb1ae9b8b9', class: "pattern" }, h("img", { key: '77fba1ebca5c78e7309c26f86f59e0c490548d75', src: patternSrc, alt: "" }))), h("div", { key: '94f0bbd0655ebf387eeae089a335797aa1d5b9d4', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index) => (h("gb-complex-primary-side-bar-item", { key: `${index}`, label: primaryItem, category: this.category, "item-style": this.navItemStyle, icon: this.complexSidebarData[primaryItem].icon, state: this.activePrimaryItem === primaryItem ? 'active' : 'default', onClick: () => this.handlePrimaryClick(primaryItem, index) }))))), h("div", { key: 'bfac29cd3737726e60ceafafbf742b1875d598a6', class: `secondary_side_menu ${this.category} ${this.state}` }, h("div", { key: 'dd3d40fafe524b706f3ae1b7097d1732cb33dce4', class: "sside_menu" }, this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index}`, type: this.state === 'expanded' ? 'full_with_label' : 'icon_only', label: secondaryItem.label, category: this.category, icon: secondaryItem.icon, state: this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default', onClick: () => this.handleSecondaryClick(secondaryItem.label, index) }))))))))));
+        const informationCircleSrc = getAssetPath(`assets/sidebar-information-circle.svg`);
+        return (h(Fragment, null, this.type === 'simple' && (h("div", { key: 'e2022ba3a9d7c918b1d193ee3918c6fa479d2012', class: `simple_sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'a01a1f8e53f75fd1a1fb8aeaf4887de09799f0e8', class: "pattern" }, h("img", { key: 'b1d120b3fab6a56e9de282dcd8d904307b7a6447', src: patternSrc, alt: "" }))), h("div", { key: '946394cdbf0e1075859776e095b78f931bdcbe0b', class: "nav" }, h("div", { key: 'bdc330d154a67c0b4e9ec67efcb03f27f9b858f0', class: `sidebar_header ${this.state}` }, h("div", { key: '36535bbbfe98fdf0bd409d1d12aaab23b2a753b9', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: 'c350cbfcc4606b95efdf65f564a645c2207b70f8', src: logoSrc, alt: "" })), h("div", { key: '1947dc27f61beedde880c3e244c871733a7403cd', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: 'f19b25d5d6b9ef48bb3b5b01bf66a00e953b9f61', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'b295c368110a9e0e91c800af1645c35967f5dda1', class: "navigation" }, h("div", { key: '791146fc4442495e73ae093b528cc67f4ec2ccba', class: "item" }, h("gb-simple-side-bar-item", { key: '0611aedb41a8dfa8fecc1f6a8a55aef5f95a08d1', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-simple-side-bar-item", { key: 'ee6f98f46f0c41d7c3e64febb6596291fd9e50dd', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-simple-side-bar-item", { key: 'f1537527b5ce20c6faf7da13ae239b877be55e55', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-simple-side-bar-item", { key: 'f0cbf92fdf385585df6bd869c4aa90fb3ad9cda6', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-simple-side-bar-item", { key: 'f68e6e68e91a9f1dfd0f95f3ec918acf7b03104e', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '0ab36843ae419e9cd9771b9599c53f519d58e56c', class: "navigation" }, h("div", { key: '8b8c2e79b7cd385a62ce503da58277d397d46275', class: "item" }, this.sixthItemLabel && (h("gb-simple-side-bar-item", { key: '59a6b34b6a057a04865ccfde272321ee0ace1c3c', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-simple-side-bar-item", { key: '3aeb6e88785c92313c12274814734140b272bb84', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-simple-side-bar-item", { key: 'e7c3b5eca7b82a2e300a998f9306f4135fc35b5d', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-simple-side-bar-item", { key: 'd3d3c226d0602d59b1b9e3d94866d968289b2ea0', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-simple-side-bar-item", { key: '00c1f7a5c718ef1734f2486acf517e2aa2993969', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: '399a3d5f628240f0d49018e7be7cf8f43279b827', class: "application_name" }, h("div", { key: '7680e3cc6df9c470b0b8ba5e1b8245e90d3c21e2', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '5f982ba2238f80b90bc9d16bff9ed9224ada91b9', class: "application_name_pattern" }, h("img", { key: '8e0564b1da01d48f192fd5b3832fb4643a471511', src: patternSrc, alt: "" }))), this.hasInfo ? (h(Fragment, null, h("div", { class: "information_header" }, h("img", { src: informationCircleSrc, alt: "" }), h("p", { class: `need_help ${this.category} text-lg-bold` }, "Need help")), h("p", { class: `info ${this.category} text-md-medium` }, "Info@globusbank.co"), h("p", { class: `info ${this.category} text-md-medium` }, "(+234) 123 4324 122"))) : (h(Fragment, null, h("div", { class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { class: textClass }, h("slot", { name: "application_name" }))))))))), this.type === 'complex' && (h("div", { key: '45a2cb6849ff6d34b50412f0ee5841452bde1be7', class: `sidebar_and_nav ${this.state}` }, h("div", { key: 'a17cae52b34f37fac0b5624af540d62bca4407a1', class: "nav_div" }, h("div", { key: 'b2fb1e29efc2f9dcdbea8628d114aadeb2f28ac3', class: "logo_and_button" }, this.state === 'expanded' && h("img", { key: '2735f65f178d2142e03a51d7fce92215ecde1d06', src: blueLogoSrc }), this.state === 'collapsed' && h("img", { key: '3e36e0b2cc8754bddc212dbf44fe7ef189b8f6e6', src: logoSrc, alt: "" }), h("gb-collapse-button", { key: 'faf2f8723159ac9fdc98600788a6826a8e139bda', color: "gray", action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '00638d9447eb92e75d8780a02a21507159819d6d', class: "complex_sidebar_div" }, h("div", { key: '904fe8f30249d1de2bb9bd226179e43b3d401ca2', class: `primary_side_menu ${this.category} ${this.navItemStyle}` }, this.category === 'colored_background' && (h("div", { key: '082581fb8413798e139ea05d4ea6dc1a6afe1f42', class: "pattern" }, h("img", { key: 'f22162133db0276a83c0298d0b2cffcfc3066fa4', src: patternSrc, alt: "" }))), h("div", { key: '8f5826429b7eea4a7005b3bb99dee1aef713007f', class: "primary_side_menu_container" }, Object.keys(this.complexSidebarData).map((primaryItem, index) => (h("gb-complex-primary-side-bar-item", { key: `${index}`, label: primaryItem, category: this.category, "item-style": this.navItemStyle, icon: this.complexSidebarData[primaryItem].icon, state: this.activePrimaryItem === primaryItem ? 'active' : 'default', onClick: () => this.handlePrimaryClick(primaryItem, index) }))))), h("div", { key: 'b0956d836a4936f3ec2d15e443416860112c92f0', class: `secondary_side_menu ${this.category} ${this.state}` }, h("div", { key: '4886da7ba83574cdcd49ad6084b1a6ae420766c3', class: "sside_menu" }, this.complexSidebarData[this.activePrimaryItem].items.map((secondaryItem, index) => (h("gb-complex-secondary-side-bar-item", { key: `${this.activePrimaryItem}-${index}`, type: this.state === 'expanded' ? 'full_with_label' : 'icon_only', label: secondaryItem.label, category: this.category, icon: secondaryItem.icon, state: this.activeSecondaryItem === secondaryItem.label ? 'active' : 'default', onClick: () => this.handleSecondaryClick(secondaryItem.label, index) }))))))))));
     }
     static get is() { return "gb-sidebar"; }
     static get encapsulation() { return "shadow"; }
@@ -715,6 +717,26 @@ export class GbSidebar {
                 "attribute": "active-secondary-item",
                 "reflect": false,
                 "defaultValue": "'Attendance Tracking'"
+            },
+            "hasInfo": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "has-info",
+                "reflect": false,
+                "defaultValue": "false"
             }
         };
     }