globuswebcomponents 1.0.9 → 1.1.1

package/dist/globuscomponents/p-129fb0a8.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["gbInputDropdownMenuItemCss","GbInputDropdownMenuItemStyle0","GbInputDropdownMenuItem","componentDidLoad","nameSlot","this","el","querySelector","supportingTextSlot","initialsSlot","classList","add","handleClick","dropdownItemClicked","emit","render","h","key","class","onClick","selected","disabled","state","checkbox","type","role","id","xmlns","width","height","viewBox","fill","d","stroke","size","color","text","name","slot","Fragment","cx","cy","r","checked","supportingText","gbTagCss","GbTagStyle0","GbTag","onTagClose","onCheckboxClicked","labelSlot","flagSwap","getAssetPath","icon","src","alt","action","gbTagCheckboxCss","GbTagCheckboxStyle0","GbTagCheckbox","gbTagCloseCss","GbTagCloseStyle0","GbTagClose","gbTagCountCss","GbTagCountStyle0","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 { AvatarColorTypes, 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: AvatarColorTypes;\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-39e8e77b.entry.js

@@ -1,2 +0,0 @@
-import{r as i,h as e}from"./p-ec3a36ed.js";const t='import { Component, Prop, h } from "@stencil/core";\r\n\r\n@Component({\r\n    tag: \'gb-wysiwyg-tooltip\',\r\n    styleUrl: \'gb-WYSIWYG-tooltip\',\r\n    shadow: true\r\n})\r\n\r\nexport class GbWysiwygTooltip {\r\n    @Prop() arrow: \'center\' | \'left\' | \'right\';\r\n    @Prop() breakpoint: \'default\' | \'mobile\';\r\n\r\n    render() {\r\n\r\n        const classes= {\r\n            [this.arrow]: true,\r\n            [this.breakpoint]: true    \r\n        }\r\n\r\n        return(\r\n            <div class={classes}>\r\n                <div class="container">\r\n                    <div class="icons">\r\n                        <gb-wysiwyg-editor-icon type="bold"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="italic"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="H1"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="H2"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="quote"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="link"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="photo"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="list_bullet"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type="list_numbers"></gb-wysiwyg-editor-icon>\r\n                    </div>\r\n                    <div class="tooltip-arrow">\r\n                        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="9" viewBox="0 0 18 9" fill="none">\r\n                            <path d="M17.4853 0.485287L9.70711 8.26347C9.31658 8.65399 8.68342 8.65399 8.29289 8.26347L0.514724 0.485287H17.4853Z" fill="white"/>\r\n                        </svg>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}';const r=t;const o=class{constructor(e){i(this,e);this.arrow=undefined;this.breakpoint=undefined}render(){const i={[this.arrow]:true,[this.breakpoint]:true};return e("div",{key:"6049be630ceadccdbe472fca100f7f8bb8bc855d",class:i},e("div",{key:"37c7f18c5deef18ed76ece14e035156a2c629aa2",class:"container"},e("div",{key:"297759a3248df960155d7d53d1e165865c6ff6da",class:"icons"},e("gb-wysiwyg-editor-icon",{key:"a7323977c09557261a4c358e6392534007c9f0ba",type:"bold"}),e("gb-wysiwyg-editor-icon",{key:"5f7a5f29db072c1014ce322b1d1522a1aef8b1e7",type:"italic"}),e("gb-wysiwyg-editor-icon",{key:"43a53d7d728f0da412ba3085d9101a20f07c9d95",type:"H1"}),e("gb-wysiwyg-editor-icon",{key:"35c2082c7aa9e5de64803b133cd598c54fa1e4ad",type:"H2"}),e("gb-wysiwyg-editor-icon",{key:"0fd5faa61a5cfae75278f1c083775cda62ae26c8",type:"quote"}),e("gb-wysiwyg-editor-icon",{key:"0c8b8e17374603897577f298e43ca614f6cfd7c9",type:"link"}),e("gb-wysiwyg-editor-icon",{key:"0a3f8c38f80fae9b962f6a74002fa63689b55073",type:"photo"}),e("gb-wysiwyg-editor-icon",{key:"814d11cab8231663ea74a244b148e62b64937b3a",type:"list_bullet"}),e("gb-wysiwyg-editor-icon",{key:"a2db4e0a1a599688bd04ab2425656b571ccae796",type:"list_numbers"})),e("div",{key:"c952767fd099bd03a0c8a273f8cf3ff3b6e7efa2",class:"tooltip-arrow"},e("svg",{key:"29927566cb00085528e01bb36c14a3adda7daad6",xmlns:"http://www.w3.org/2000/svg",width:"18",height:"9",viewBox:"0 0 18 9",fill:"none"},e("path",{key:"c39879e133b95b2716432ca36a7b778c717acf59",d:"M17.4853 0.485287L9.70711 8.26347C9.31658 8.65399 8.68342 8.65399 8.29289 8.26347L0.514724 0.485287H17.4853Z",fill:"white"})))))}};o.style=r;export{o as gb_wysiwyg_tooltip};
-//# sourceMappingURL=p-39e8e77b.entry.js.map

package/dist/globuscomponents/p-39e8e77b.entry.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["GbWysiwygTooltipStyle0","gbWYSIWYGTooltipTsx","GbWysiwygTooltip","render","classes","this","arrow","breakpoint","h","key","class","type","xmlns","width","height","viewBox","fill","d"],"sources":["src/components/gb-WYSIWYG-tooltip/gb-WYSIWYG-tooltip.tsx"],"sourcesContent":["import { Component, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n    tag: 'gb-wysiwyg-tooltip',\r\n    styleUrl: 'gb-WYSIWYG-tooltip',\r\n    shadow: true\r\n})\r\n\r\nexport class GbWysiwygTooltip {\r\n    @Prop() arrow: 'center' | 'left' | 'right';\r\n    @Prop() breakpoint: 'default' | 'mobile';\r\n\r\n    render() {\r\n\r\n        const classes= {\r\n            [this.arrow]: true,\r\n            [this.breakpoint]: true    \r\n        }\r\n\r\n        return(\r\n            <div class={classes}>\r\n                <div class=\"container\">\r\n                    <div class=\"icons\">\r\n                        <gb-wysiwyg-editor-icon type=\"bold\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"italic\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"H1\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"H2\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"quote\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"link\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"photo\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"list_bullet\"></gb-wysiwyg-editor-icon>\r\n                        <gb-wysiwyg-editor-icon type=\"list_numbers\"></gb-wysiwyg-editor-icon>\r\n                    </div>\r\n                    <div class=\"tooltip-arrow\">\r\n                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"18\" height=\"9\" viewBox=\"0 0 18 9\" fill=\"none\">\r\n                            <path d=\"M17.4853 0.485287L9.70711 8.26347C9.31658 8.65399 8.68342 8.65399 8.29289 8.26347L0.514724 0.485287H17.4853Z\" fill=\"white\"/>\r\n                        </svg>\r\n                    </div>\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}"],"mappings":"s8DAAA,MAAAA,EAAAC,E,MAQaC,EAAgB,M,wEAIzB,MAAAC,GAEI,MAAMC,EAAS,CACX,CAACC,KAAKC,OAAQ,KACd,CAACD,KAAKE,YAAa,MAGvB,OACIC,EAAA,OAAAC,IAAA,2CAAKC,MAAON,GACRI,EAAA,OAAAC,IAAA,2CAAKC,MAAM,aACPF,EAAA,OAAAC,IAAA,2CAAKC,MAAM,SACPF,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,SAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,WAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,OAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,OAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,UAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,SAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,UAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,gBAC7BH,EAAA,0BAAAC,IAAA,2CAAwBE,KAAK,kBAEjCH,EAAA,OAAAC,IAAA,2CAAKC,MAAM,iBACPF,EAAA,OAAAC,IAAA,2CAAKG,MAAM,6BAA6BC,MAAM,KAAKC,OAAO,IAAIC,QAAQ,WAAWC,KAAK,QAClFR,EAAA,QAAAC,IAAA,2CAAMQ,EAAE,+GAA+GD,KAAK,a","ignoreList":[]}