globuswebcomponents 1.6.9 → 1.7.0

package/dist/globuscomponents/p-c3dd79a4.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbInputDropdownMenuItemCss","GbInputDropdownMenuItem","constructor","hostRef","this","supportingText","selected","componentDidLoad","nameSlot","el","querySelector","supportingTextSlot","initialsSlot","classList","add","handleClick","dropdownItemClicked","emit","render","h","key","class","onClick","disabled","state","checkbox","type","role","id","xmlns","width","height","viewBox","fill","d","stroke","size","color","text","name","slot","Fragment","cx","cy","r","checked","gbTagCss","GbTag","onTagClose","onCheckboxClicked","labelSlot","flagSwap","getAssetPath","icon","src","alt","action","gbTagCheckboxCss","GbTagCheckbox","gbTagCloseCss","GbTagClose","gbTagCountCss","GbTagCount"],"sources":["src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.css?tag=gb-input-dropdown-menu-item&encapsulation=shadow","src/components/gb-input-dropdown-menu-item/gb-input-dropdown-menu-item.tsx","src/components/gb-tag/gb-tag.css?tag=gb-tag&encapsulation=shadow","src/components/gb-tag/gb-tag.tsx","src/components/gb-tag-checkbox/gb-tag-checkbox.css?tag=gb-tag-checkbox&encapsulation=shadow","src/components/gb-tag-checkbox/gb-tag-checkbox.tsx","src/components/gb-tag-close/gb-tag-close.css?tag=gb-tag-close&encapsulation=shadow","src/components/gb-tag-close/gb-tag-close.tsx","src/components/gb-tag-count/gb-tag-count.css?tag=gb-tag-count&encapsulation=shadow","src/components/gb-tag-count/gb-tag-count.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.dropdown-container {\r\n    display: flex;\r\n    padding: var(--spacing-1);\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    border-radius: var(--rounded-none);\r\n    cursor: pointer;\r\n}\r\n\r\n.dropdown-item {\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n    flex: 1 0 0;\r\n    border-radius: var(--rounded-xs);\r\n    cursor: pointer;\r\n    color: var(--color-text, #4B5565);\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    letter-spacing: var(--Font-Letter-spacing-T-md, 0px);\r\n}\r\n\r\n::slotted([slot='name']) {\r\n    font-size: var(--Font-Size-T-md, 16px);\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    line-height: var(--Font-Line-height-T-md, 24px); /* 150% */\r\n}\r\n\r\n::slotted([slot='name'].no_wrap) {\r\n    white-space: nowrap;\r\n}\r\n\r\n::slotted([slot=\"supporting_text\"]) {\r\n    font-size: var(--Font-Size-T-sm, 14px);\r\n    font-weight: var(--Font-Weight-Regular, 400);\r\n    line-height: var(--Font-Line-height-T-sm, 20px); /* 142.857% */\r\n    overflow: hidden;\r\n    white-space: nowrap;\r\n    text-overflow: ellipsis;\r\n}\r\n\r\n/* State Styles */\r\n.dropdown-item:hover{\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.dropdown-item:active{\r\n    background-color: var(--color-background-gray-subtle, #E3E8EF);\r\n}\r\n\r\n.dropdown-item.default.selected,\r\n.dropdown-item.icon_leading.selected,\r\n.dropdown-item.avatar_leading.selected,\r\n.dropdown-item.dot_leading.selected{\r\n    background-color: var(--color-background-information-subtlest, #E4F0FC);\r\n}\r\n\r\n.dropdown-item.default.selected:hover,\r\n.dropdown-item.icon_leading.selected:hover,\r\n.dropdown-item.avatar_leading.selected:hover,\r\n.dropdown-item.dot_leading.selected:hover{\r\n    background-color: var(--color-background-discovery-subtlest, #F0F9FF);\r\n}\r\n\r\n.dropdown-item.default.selected:active,\r\n.dropdown-item.icon_leading.selected:active,\r\n.dropdown-item.avatar_leading.selected:active,\r\n.dropdown-item.dot_leading.selected:active{\r\n    background-color: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.dropdown-item.default.selected.disabled,\r\n.dropdown-item.icon_leading.selected.disabled,\r\n.dropdown-item.avatar_leading.selected.disabled,\r\n.dropdown-item.dot_leading.selected.disabled,\r\n.dropdown-item.checkbox.selected.disabled{\r\n    background-color: transparent;\r\n    color: var(--color-text-disabled, #CDD5DF);\r\n}\r\n\r\n.content {\r\n    display: flex;\r\n    min-height: 2.5rem;\r\n    padding: 0 var(--spacing-2);\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n    gap: var(--spacing-2);\r\n    flex: 1 0 0;\r\n}\r\n\r\n.dropdown-item--selected slot {\r\n    flex-grow: 1;\r\n    margin-right: 8px;\r\n}\r\n\r\n.dropdown-item--selected svg:last-of-type {\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.tick{\r\n    display: flex;\r\n    align-items: center;\r\n    padding-right: var(--spacing-2);\r\n}","import { Component, Element, Prop, h, Fragment, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport { ColorTypes, DropdownTypes, StateEnum } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-input-dropdown-menu-item',\r\n  styleUrl: 'gb-input-dropdown-menu-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbInputDropdownMenuItem {\r\n  @Prop() type: DropdownTypes;\r\n  @Prop() supportingText: boolean = false;\r\n  @Prop({ mutable: true }) selected: boolean = false;\r\n  @Prop() state: StateEnum;\r\n  @Prop() color: ColorTypes;\r\n  @Element() el: HTMLElement;\r\n  @Event() dropdownItemClicked: EventEmitter<void>;\r\n\r\n  componentDidLoad() {\r\n    const nameSlot = this.el.querySelector('[slot=\"name\"]');\r\n    const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n    const initialsSlot = this.el.querySelector('[slot=\"initials\"]');\r\n\r\n    if (nameSlot) {\r\n      nameSlot.classList.add('text-md-medium');\r\n      nameSlot.classList.add('no_wrap');\r\n    }\r\n\r\n    if (initialsSlot) {\r\n      initialsSlot.classList.add('text-xs-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  @Method()\r\n  async handleClick() {\r\n    this.dropdownItemClicked.emit()\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      // <div class=\"dropdown-container\" onClick={() => (this.selected = !this.selected)}>\r\n      <div class=\"dropdown-container\" onClick={() => this.handleClick()}>\r\n        <div\r\n          class={{\r\n            'dropdown-item': true,\r\n            'selected': this.selected,\r\n            'disabled': this.state === 'disabled',\r\n            'checkbox': this.type === 'checkbox',\r\n            [this.type]: true,\r\n          }}\r\n          role=\"option\"\r\n          aria-selected={this.selected ? 'true' : 'false'}\r\n          aria-disabled={this.state === 'disabled' ? 'true' : 'false'}\r\n        >\r\n          <div class=\"content\">\r\n            {this.type === 'icon_leading' && (\r\n              <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                <path\r\n                  d=\"M5.48131 12.9013C4.30234 13.6034 1.21114 15.0368 3.09388 16.8305C4.01359 17.7067 5.03791 18.3334 6.32572 18.3334H13.6743C14.9621 18.3334 15.9864 17.7067 16.9061 16.8305C18.7889 15.0368 15.6977 13.6034 14.5187 12.9013C11.754 11.2551 8.24599 11.2551 5.48131 12.9013Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n                <path\r\n                  d=\"M13.75 5.41669C13.75 7.48776 12.0711 9.16669 10 9.16669C7.92893 9.16669 6.25 7.48776 6.25 5.41669C6.25 3.34562 7.92893 1.66669 10 1.66669C12.0711 1.66669 13.75 3.34562 13.75 5.41669Z\"\r\n                  stroke=\"#4B5565\"\r\n                  stroke-width=\"1.5\"\r\n                />\r\n              </svg>\r\n            )}\r\n            {this.type === 'avatar_leading' && (\r\n              <gb-avatar class=\"avatar-icon\" size=\"xs\" color={this.color} text={true}>\r\n                <slot name=\"initials\" slot=\"initials\"></slot>\r\n              </gb-avatar>\r\n            )}\r\n            {this.type === 'dot_leading' && (\r\n              <>\r\n                {this.state === 'default' ? (\r\n                  <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#17B26A\" />\r\n                  </svg>\r\n                ) : (\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <circle cx=\"5\" cy=\"5\" r=\"4\" fill=\"#EEF2F6\" />\r\n                  </svg>\r\n                )}\r\n              </>\r\n            )}\r\n            {this.type === 'checkbox' && <gb-checkbox class=\"checkbox\" size=\"md\" type=\"checkbox\" state={this.state} checked={this.selected}></gb-checkbox>}\r\n            <slot name=\"name\"></slot>\r\n            {this.supportingText && (\r\n              <span>\r\n                <slot name=\"supporting_text\"></slot>\r\n              </span>\r\n            )}\r\n          </div>\r\n          {this.selected && this.type !== 'checkbox' && (\r\n            <div class={`tick`}>\r\n              {this.state !== 'disabled' ? (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\" class={`${this.state}`}>\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#075DB2\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              ) : (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n                  <path\r\n                    d=\"M4.16669 12.0834C4.16669 12.0834 5.41669 12.0834 7.08335 15C7.08335 15 11.7157 7.36115 15.8334 5.83337\"\r\n                    stroke=\"#CDD5DF\"\r\n                    stroke-width=\"1.66667\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </div>\r\n          )}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n:host{\r\n    display: flex;\r\n    align-items: center;\r\n    width: fit-content;\r\n}\r\n\r\n.container {\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-1);\r\n    flex-shrink: 0;\r\n    border-radius: var(--rounded-xs);\r\n    border: 1px solid var(--color-boarder-subtle, #CDD5DF);\r\n    background: var(--color-background-card, #FFFFFF);  \r\n}\r\n\r\n.content {\r\n    display: flex;\r\n    padding: var(--spacing-none);\r\n    text-align: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-none);\r\n    color: var(--color-text, #4B5565);\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    letter-spacing: var(--Font-Letter-spacing-T-sm, 0rem);\r\n}\r\n\r\n.icon {\r\n    border: none;\r\n}\r\n\r\n.container.sm {\r\n    height: var(--spacing-6);\r\n    padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.container.md {\r\n    height: 1.75rem;\r\n    padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.container.lg {\r\n    height: var(--spacing-7);\r\n    padding: var(--spacing-none) var(--spacing-1) var(--spacing-none) var(--spacing-2);\r\n}\r\n\r\n.content.sm {\r\n    gap: var(--spacing-1);\r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\n.content.md {\r\n    gap: 0.3125rem;\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);   \r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem); \r\n}\r\n\r\n.content.lg {\r\n    gap: 0.375rem;\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);\r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem); /* 142.857% */\r\n}\r\n\r\n.label{\r\n    display: flex;\r\n    align-items: center;\r\n}","import { Component, Method, Prop, getAssetPath, h, Fragment, Event, EventEmitter, Element } from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-tag',\r\n  styleUrl: 'gb-tag.css',\r\n  shadow: true,\r\n})\r\nexport class GbTag {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() icon?: 'country' | 'avatar' | 'dot' | 'false';\r\n  @Prop() action: 'X_close' | 'text_only' | 'count';\r\n  @Prop() flagSwap: string;\r\n  @Prop() checkbox?: boolean;\r\n  @Event() checkboxClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  @Method()\r\n  async onTagClose() {\r\n    // console.log('close tag clicked');\r\n  }\r\n\r\n  async onCheckboxClicked() {\r\n    // this.checkboxClicked.emit()\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const labelSlot = this.el.querySelector('p');\r\n\r\n    if(labelSlot) {\r\n      if(this.size === 'sm') {\r\n        labelSlot.classList.add('text-xs-medium');\r\n      } else if(this.size === 'md') {\r\n        labelSlot.classList.add('text-sm-medium');\r\n      } else if(this.size === 'lg') {\r\n        labelSlot.classList.add('text-sm-medium');\r\n      }\r\n    }\r\n  }\r\n\r\n  render() {\r\n    const flagSwap = getAssetPath(`${this.flagSwap}`);\r\n\r\n    return (\r\n      <div class={`container ${this.size}`}>\r\n        <div class={`content ${this.size}`}>\r\n          {this.checkbox && <gb-tag-checkbox size={this.size}></gb-tag-checkbox>}\r\n          {this.icon === 'false' && <></>}\r\n          {this.icon === 'country' && (\r\n            <div class=\"icon left-icon\">\r\n              <img src={flagSwap} alt=\"Country Icon\" />\r\n            </div>\r\n          )}\r\n          {this.icon === 'avatar' && (\r\n            <gb-avatar class=\"avatar-icon\" size=\"xxs\" status-icon=\"false\" text={true} color=\"gray\">\r\n              <slot name=\"initials\" slot=\"initials\"></slot>\r\n            </gb-avatar>\r\n          )}\r\n          {this.icon === 'dot' && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"8\" height=\"8\" viewBox=\"0 0 8 8\" fill=\"none\">\r\n              <circle cx=\"4\" cy=\"4\" r=\"3\" fill=\"#17B26A\" />\r\n            </svg>\r\n          )}\r\n          <div class=\"label\">\r\n            <slot></slot>\r\n          </div>\r\n          {this.action === 'count' && (\r\n            <gb-tag-count size={this.size}>\r\n              <slot slot=\"count\" name=\"count\"></slot>\r\n            </gb-tag-count>\r\n          )}\r\n        </div>\r\n        {this.action === 'X_close' && <gb-tag-close size={this.size} onClick={() => this.onTagClose()}></gb-tag-close>}\r\n      </div>\r\n    );\r\n  }\r\n}","@import './../../global/global.css';\r\n\r\n.checkbox-container {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  position: relative;\r\n  cursor: pointer;\r\n}\r\n\r\ninput[type=\"checkbox\"] {\r\n  opacity: 0;\r\n  position: absolute;\r\n  width: 100%;\r\n  height: 100%;\r\n  cursor: pointer;\r\n}\r\n\r\n.custom-checkbox {\r\n  display: flex;\r\n  align-items: center;\r\n  justify-content: center;\r\n  border-radius: var(--rounded-xs);\r\n  border: 1px solid var(--color-border-input, #CDD5DF);\r\n  background: transparent;\r\n  transition: background 0.2s, border 0.2s;\r\n  margin-top: 10px;\r\n}\r\n\r\n.sm {\r\n  width: 14px;\r\n  height: 14px;\r\n}\r\n\r\n.md {\r\n  width: var(--spacing-4);\r\n  height: var(--spacing-4);\r\n  flex-shrink: 0;\r\n}\r\n\r\n.lg {\r\n  width: 18px;\r\n  height: 18px;\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + .custom-checkbox {\r\n  background: var(--color-background-selected, #075DB2);\r\n  border: 1px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\ninput[type=\"checkbox\"]:checked + .custom-checkbox .checkmark {\r\n  display: block;\r\n}\r\n\r\n.checkmark {\r\n  display: none;\r\n  width: var(--spacing-3);\r\n  height: var(--spacing-3);\r\n}\r\n\r\n.checkbox-container:hover .custom-checkbox {\r\n  border: 1px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.checkbox-container.disabled .custom-checkbox {\r\n  background: var(--color-background-disabled, #F6F8FA);\r\n  border: 1px solid var(--color-border-disabled, #E3E8EF);\r\n}\r\n\r\n.checkbox-container.disabled .checkmark {\r\n  fill: var(--color-icon-disabled, #CDD5DF);\r\n}\r\n\r\n","import { Component, Prop, h} from \"@stencil/core\";\r\nimport { GeneralSizes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-tag-checkbox',\r\n  styleUrl: 'gb-tag-checkbox.css',\r\n  shadow: true\r\n})\r\n\r\nexport class GbTagCheckbox {\r\n    @Prop() checked: boolean = false;\r\n    @Prop() size: GeneralSizes = 'md';\r\n    @Prop() disabled: boolean = false;\r\n  \r\n    render() {\r\n      return (\r\n        <label class={`checkbox-container ${this.size} ${this.disabled ? 'disabled' : ''}`}>\r\n          <input \r\n            type=\"checkbox\" \r\n            checked={this.checked} \r\n            disabled={this.disabled} \r\n          />\r\n          <span class={`custom-checkbox ${this.size}`}>\r\n            <svg class=\"checkmark\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 12 12\" fill=\"none\">\r\n              <path d=\"M2.5 7.25C2.5 7.25 3.25 7.25 4.25 9C4.25 9 7.02941 4.41667 9.5 3.5\" stroke=\"white\" stroke-width=\"1.71429\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          </span>\r\n        </label>\r\n      );\r\n    }\r\n}\r\n","@import './../../global/global.css';\r\n\r\ndiv {\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-none);\r\n    border-radius: 3px;\r\n    cursor: pointer;\r\n}\r\n\r\ndiv:hover {\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\ndiv:hover svg path {\r\n    stroke: var(--color-icon-bold, #202939);\r\n}\r\n\r\ndiv.sm,\r\ndiv.md {\r\n    padding: var(--spacing-half);\r\n}\r\n\r\ndiv.lg {\r\n    padding: 3px;\r\n}\r\n\r\ndiv.sm svg{\r\n    width: 10px;\r\n    height: 10px;\r\n}\r\n\r\ndiv.md svg{\r\n    width: var(--spacing-3);\r\n    height: var(--spacing-3);\r\n}\r\n\r\ndiv.lg svg{\r\n    width: 14px;\r\n    height: 14px;\r\n}","import {Component, Prop, h} from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-tag-close',\r\n    styleUrl: 'gb-tag-close.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTagClose{\r\n    @Prop() size: GeneralSizes;\r\n\r\n    render() {\r\n        return (\r\n            <div class={this.size}>\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"10\" height=\"10\" viewBox=\"0 0 10 10\" fill=\"none\">\r\n                    <path d=\"M7.91683 2.08328L2.0835 7.91662M2.0835 2.08328L7.91683 7.91662\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n            </div>\r\n        )\r\n    }\r\n}","@import './../../global/global.css';\r\n\r\ndiv {\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: center;\r\n    gap: var(--spacing-none);\r\n    flex-shrink: 0;\r\n    border-radius: 3px;\r\n    background-color: var(--color-background-gray-subtler, #EEF2F6);\r\n}  \r\n\r\ndiv.sm {\r\n    width: 16px;\r\n    height: 16px;\r\n    padding: var(--spacing-none) var(--spacing-1);\r\n}\r\n\r\n.sm p{\r\n    width: 8px;\r\n    height: 16px; \r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem);\r\n}\r\n\r\ndiv.md {\r\n    width: 1.125rem;\r\n    height: 1.125rem;\r\n    padding: var(--spacing-none) 5px;\r\n}\r\n\r\n.md p{\r\n    width: 0.5625rem;\r\n    height: 1.125rem;\r\n    font-size: var(--Font-Size-T-xs, 0.75rem);\r\n    line-height: var(--Font-Line-height-T-xs, 1.125rem); \r\n}\r\n\r\ndiv.lg {\r\n    width: 1.25rem;\r\n    height: 1.25rem;\r\n}\r\n\r\n.lg p{\r\n    font-size: var(--Font-Size-T-sm, 0.875rem);\r\n    line-height: var(--Font-Line-height-T-sm, 1.25rem);\r\n}\r\n\r\np{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    flex-shrink: 0;\r\n    color: var(--color-text, #4B5565);\r\n    text-align: center;\r\n    font-family: var(--Font-Family-Body, Sora);\r\n    font-style: normal;\r\n    font-weight: var(--Font-Weight-Medium, 500);\r\n    letter-spacing: var(--Font-Letter-spacing-T-sm, 0px);\r\n}\r\n\r\n\r\n","import {Component, Prop, h} from '@stencil/core';\r\nimport { GeneralSizes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n    tag: 'gb-tag-count',\r\n    styleUrl: 'gb-tag-count.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbTagCount{\r\n    @Prop() size: GeneralSizes;\r\n\r\n    render() {\r\n        return (\r\n            <div class={this.size}>\r\n                <slot name=\"count\"></slot>\r\n            </div>\r\n        )\r\n    }\r\n}"],"mappings":"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","ignoreList":[]}

package/dist/globuscomponents/p-ecb5aefe.entry.js

@@ -1,2 +0,0 @@
-import{r as e,h as c}from"./p-Dlqa7tPI.js";const s="";const t=class{constructor(c){e(this,c)}render(){return c("div",{key:"2a1cc127f05af5889fbb7f61c7e27f09f03eef69",class:"table_cell_div"})}};t.style=s;export{t as gb_table_cell};
-//# sourceMappingURL=p-ecb5aefe.entry.js.map

package/dist/globuscomponents/p-fcb556ec.entry.js

@@ -1,2 +0,0 @@
-import{r as e,c as a,a as s,h as i,F as t,g as c}from"./p-Dlqa7tPI.js";import{S as n}from"./p-cHn6O-Kf.js";const o=".header_div{display:flex;flex-direction:column;align-items:center;width:100%;border-bottom:0.7px solid var(--color-border-subtle, #CDD5DF);background:var(--color-surface, #FFFFFF)}.content{display:flex;height:4.5rem;padding:0rem 2rem;justify-content:space-between;align-items:center;align-self:stretch}.logo{display:block}.icon_logo{display:none}.inner_content{display:flex;justify-content:flex-end;align-items:center;gap:var(--spacing-4);flex:1 0 0}.action{display:flex;gap:var(--spacing-2)}@media (max-width: 440px){.content{padding:var(--spacing-none) var(--spacing-5)}}@media (max-width: 450px){.logo{display:none}.icon_logo{display:block}}";const l=class{constructor(s){e(this,s);this.navBarItemClicked=a(this,"navBarItemClicked");this.menuClicked=a(this,"menuClicked");this.showIndicator=false;this.text=false;this.placeholder=false;this.showBorder=false;this.showNotification=false;this.showHelp=false;this.showLogo=false}applyColorToInitials(){switch(this.color){case"gray":return"gray";case"blue":return"blue";case"cyan":return"cyan";case"pink":return"pink";case"purple":return"purple";case"green":return"green";case"yellow":return"yellow"}}componentDidLoad(){const e=this.el.querySelector("[slot='initials']");if(e){e.classList.add("text-md-semi-bold");e.classList.add(this.applyColorToInitials())}}async onNavBarItemClicked(e){this.navBarItemClicked.emit(e)}async onMenuClicked(){this.menuClicked.emit()}render(){const e=s(`assets/help-circle.svg`);const a=s(`assets/notification-03.svg`);const c=s(`assets/globus_bank_logo_blue.svg`);const o=s(`assets/globus_bank_logo_white.svg`);return i("div",{key:"8acca52d4a21239fe66cb89d13c53882b40cc4b1",class:`header_div`},i("div",{key:"70febb3569519ebdd126c34c57cf679a1f687119",class:"content"},this.showLogo&&i(t,null,i("div",{key:"649d85fe91478c7c688d398950a67bcfc1373071",class:"logo",onClick:()=>this.onNavBarItemClicked("logo")},i("img",{key:"2a83182e33e9fb70da79a03176e1397597a74d93",src:c,alt:""})),i("div",{key:"67640df8ec5d92acb9c43d0efd709cb845d8c13d",class:"icon_logo",onClick:()=>this.onNavBarItemClicked("logo")},i("img",{key:"d2d24ed705ca731a78da6c101694d2ee88c36a56",src:o,alt:""}))),i("div",{key:"56f1bd5dc2b3b4d6a18fbf81cea68926a08506d7",class:"inner_content"},i("div",{key:"7f906a7b152bf9d5a02fac68a0cffda42f1861e7",class:`action`},this.showHelp&&i("gb-header-icon",{key:"59d7455fa7b4fa509a2a9c1163ae99e428083dc9",state:n.Default,icon:e,onClick:()=>this.onNavBarItemClicked("help")}),this.showNotification&&i("gb-header-icon",{key:"2c7caff0d3846764cf0330b8225a686593d8a557",state:this.state,icon:a,"show-indicator":this.showIndicator,onClick:()=>this.onNavBarItemClicked("notification")})),i("gb-avatar",{key:"59b1c456f335ca88ebf0ae6a58e2a72e3873c114",size:"md",text:this.text,placeholder:this.placeholder,color:this.color,"show-border":this.showBorder,onClick:()=>this.onNavBarItemClicked("avatar")},this.text?i("slot",{slot:"initials",name:"initials"}):i("slot",{name:"image",slot:"image"})))))}get el(){return c(this)}};l.style=o;export{l as gb_header};
-//# sourceMappingURL=p-fcb556ec.entry.js.map