globuswebcomponents 2.18.16 → 2.18.18

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "globuswebcomponents",
-  "version": "2.18.16",
+  "version": "2.18.18",
   "description": "Globus One",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",

package/dist/components/p-BwyyuzDn.js.map

@@ -1 +0,0 @@
-{"file":"p-BwyyuzDn.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-tab-button-base/gb-tab-button-base.css?tag=gb-tab-button-base&encapsulation=shadow","src/components/gb-tab-button-base/gb-tab-button-base.tsx"],"sourcesContent":["@import './../../global/global.css';\n\n:host{\n    display: flex;\n}\n\n.tab_button_div{\n    display: flex;\n    /* align-self: stretch; */\n    cursor: pointer;\n    width: 100%;\n    box-sizing: border-box;\n}\n\n.tab_button_div.truncate{\n    min-width: 0;\n}\n\n.tab_button_div.horizontal{\n    justify-content: center;\n    align-items: center;\n}\n\n.tab_button_div.vertical{\n    justify-content: flex-start;\n    align-items: center;\n}\n\n.tab_name_wrapper{\n    min-width: 0;\n}\n\n.tab_button_div.truncate .tab_name_wrapper{\n    flex: 1;\n}\n\n.tab_name.truncate{\n    width: 100%;\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n}\n\n.tab_text{\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.button_primary,\n.tab_button_div.button_gray,\n.tab_button_div.button_white{\n    display: inline-flex;\n    border-radius: var(--rounded-xs);\n}\n\n.rounded_button_white{\n    display: inline-flex;\n    align-items: center;\n    border-radius: var(--rounded-full);\n}\n\n.underline,\n.underline_filled,\n.line{\n    display: inline-flex;\n    border-radius: var(--rounded-none);\n}\n\n/* Spacing Styles */\n.button_primary,\n.button_gray,\n.button_white,\n.rounded_button_white,\n.underline_filled,\n.line{\n    gap: var(--spacing-2);\n}\n\n.underline{\n    gap: 0.5rem;\n}\n\n/* Tab Type Styles */\n.tab_button_div.button_primary,\n.tab_button_div.button_gray,\n.tab_button_div.button_white,\n.tab_button_div.rounded_button_white,\n.tab_button_div.underline_filled,\n.tab_button_div.line{\n    background: transparent;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.button_white.current{\n    box-shadow: var(--shadow-md);\n}\n\n/* Tab State Styles */\n/* :hover is gated to devices that actually support real hovering. On touch\n * devices (mobile, and DevTools touch emulation), tapping a tab applies :hover\n * and it stays \"stuck\" until a later tap elsewhere clears it - since a\n * `.current:hover` rule below paints a different (hover-tinted) look than\n * plain `.current`, a freshly-tapped tab would look like it hadn't become\n * current until that stray hover state cleared. Excluding touch devices from\n * :hover entirely removes that lag. */\n@media (hover: hover) and (pointer: fine) {\n    .tab_button_div.button_primary:hover{\n        background: var(--color-background-gray-subtler, #EEF2F6);\n        color: var(--color-text-bold, #202939);\n    }\n\n    .tab_button_div.button_gray:hover,\n    .tab_button_div.button_white:hover,\n    .tab_button_div.rounded_button_white:hover{\n        background: var(--color-background-gray-subtle, #E3E8EF);\n        color: var(--color-text, #4B5565);\n    }\n\n    .tab_button_div.underline:hover,\n    .tab_button_div.underline_filled:hover{\n        border-bottom: 1px solid var(--color-border-subtle, #CDD5DF);\n        background: var(--color-background-gray-subtler, #EEF2F6);\n        color: var(--color-text-bold, #202939);\n    }\n\n    .tab_button_div.line:hover{\n        border-radius: var(--rounded-xs);\n        background: var(--color-background-gray-subtler, #EEF2F6);\n    }\n\n    .tab_button_div.button_primary.current:hover{\n        background: var(--color-background-information-subtler, #C8E0F9);\n        color: var(--color-text-information, #064E94);\n    }\n\n    .tab_button_div.button_gray.current:hover,\n    .tab_button_div.button_white.current:hover,\n    .tab_button_div.rounded_button_white.current:hover{\n        background: var(--color-background-gray-subtler, #EEF2F6);\n        color: var(--color-text-bold, #202939);\n    }\n\n    .tab_button_div.underline.current:hover{\n        background: var(--color-background-information-subtlest, #E4F0FC);\n        color: var(--color-text-information, #064E94);\n        border-color: var(--color-border-information, #064E94);\n    }\n\n    .tab_button_div.underline_filled.current:hover{\n        background: var(--color-background-information-subtler, #C8E0F9);\n        color: var(--color-text-information, #064E94);\n        border-color: var(--color-border-information, #064E94);\n    }\n\n    .tab_button_div.line.current:hover{\n        border-radius: var(--rounded-xs);\n        background: var(--color-background-information-subtlest, #E4F0FC);\n        color: var(--color-text-information, #064E94);\n        border-color: var(--color-border-information, #064E94);\n    }\n}\n\n.tab_button_div.button_primary:active{\n    background: transparent;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.button_gray:active,\n.tab_button_div.button_white:active,\n.tab_button_div.rounded_button_white:active{\n    background: transparent;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.underline:active,\n.tab_button_div.underline_filled:active{\n    background: transparent;\n    border: none;\n    color: var(--color-text, #4B5565);\n}\n\n.tab_button_div.line:active{\n    border-radius: var(--rounded-none);\n    background: transparent;\n}\n\n.tab_button_div.button_primary.current:active{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n}\n\n.tab_button_div.button_gray.current:active{\n    background: var(--color-background-gray-subtlest, #F6F8FA);\n    color: var(--color-text-bold, #202939);\n}\n\n.tab_button_div.button_white.current:active,\n.tab_button_div.rounded_button_white.current:active{\n    background: var(--color-background-card, #FFFFFF);\n    color: var(--color-text-bold, #202939);\n}\n\n.tab_button_div.underline.current:active{\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-color: var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.underline_filled.current:active{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n    border-color: var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.line.current:active{\n    border-radius: var(--rounded-none);\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-left: 2px solid var(--color-border-selected, #075DB2);\n}\n\n/* Tab Current Styles */\n.tab_button_div.button_primary.current{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n}\n\n.tab_button_div.button_gray.current{\n    background: var(--color-background-gray-subtlest, #F6F8FA);\n    color: var(--color-text-bold, #202939);\n}\n\n.tab_button_div.button_white.current,\n.tab_button_div.rounded_button_white.current{\n    background: var(--color-background-card, #FFFFFF);\n    color: var(--color-text-bold, #202939);\n    box-shadow: var(--shadow-md);\n}\n\n.tab_button_div.underline.current{\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-bottom: 2px solid var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.underline_filled.current{\n    background: var(--color-background-information-subtlest, #E4F0FC);\n    color: var(--color-text-selected, #075DB2);\n    border-bottom: 2px solid var(--color-border-selected, #075DB2);\n}\n\n.tab_button_div.line.current{\n    background: transparent;\n    color: var(--color-text-selected, #075DB2);\n    border-left: 2px solid var(--color-border-selected, #075DB2);\n}\n\n/* Tab Size Styles */\n.button_primary.sm,\n.button_gray.sm,\n.button_white.sm,\n.rounded_button_white.sm,\n.underline.sm{\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-4);\n}\n\n.underline_filled.sm,\n.line.sm{\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.button_primary.md,\n.button_gray.md,\n.button_white.md,\n.rounded_button_white.md,\n.underline.md,\n.underline_filled.md,\n.line.md{\n    height: 2.75rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.button_primary.full_width.sm,\n.button_gray.full_width.sm,\n.button_white.full_width.sm,\n.rounded_button_white.full_width.sm{\n    width: 100%;\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.underline.full_width.sm,\n.underline_filled.full_width.sm{\n    width: 100%;\n    height: 2.375rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.button_primary.full_width.md,\n.button_gray.full_width.md,\n.button_white.full_width.md,\n.rounded_button_white.full_width.md{\n    width: 100%;\n    height: 2.25rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n\n.underline.full_width.md,\n.underline_filled.full_width.md{\n    width: 100%;\n    height: 2.25rem;\n    padding: var(--spacing-none) var(--spacing-3);\n}\n","import { Component, Element, Event, EventEmitter, Prop, h } from '@stencil/core';\nimport { GeneralSizes, TabTypes } from '../../models/reusableModels';\n\n@Component({\n  tag: 'gb-tab-button-base',\n  styleUrl: 'gb-tab-button-base.css',\n  shadow: true,\n})\nexport class GbTabButtonBase {\n  @Prop() current: boolean = false;\n  @Prop() size: GeneralSizes;\n  @Prop() fullWidth: boolean = false;\n  @Prop() badge: boolean = false;\n  @Prop() type: TabTypes;\n  @Prop() tabName: string = '';\n  @Prop() alignment: 'horizontal' | 'vertical';\n  @Prop() truncate: boolean = false;\n  @Element() el: HTMLElement;\n  @Event() tabClicked: EventEmitter<void>;\n\n  getTextClasses() {\n    switch (this.size) {\n      case 'sm':\n        return 'text-sm-medium';\n      case 'md':\n        return 'text-md-medium';\n    }\n  }\n\n  getCurrentTextClasses() {\n    switch (this.size) {\n      case 'sm':\n        return 'text-sm-semi-bold';\n      case 'md':\n        return 'text-md-semi-bold';\n    }\n  }\n\n  getCountTextClasses() {\n    switch (this.size) {\n      case 'sm':\n        return 'text-xs-medium';\n      case 'md':\n        return 'text-sm-medium';\n    }\n  }\n\n  componentDidLoad() {\n    const tabCount = this.el.querySelector('[slot=\"count\"]');\n\n    if (tabCount) {\n      tabCount.classList.add(this.getCountTextClasses());\n    }\n  }\n\n  handleClick() {\n    this.tabClicked.emit();\n  }\n\n  getFormattedLabel() {\n    const words = this.tabName.split(' ');\n    if (words.length === 0) return this.tabName;\n    return words[0] + ' ' + words.slice(1).join(' ').toLowerCase();\n  }\n\n  render() {\n    return (\n      <div\n        class={`tab_button_div ${this.type}\n      ${this.current ? 'current' : ''}\n      ${this.fullWidth ? 'full_width' : ''}\n      ${this.truncate ? 'truncate' : ''}\n      ${this.size}\n      ${this.alignment}`}\n        onClick={() => this.handleClick()}\n      >\n        <div class=\"tab_name_wrapper\">\n          <p class={`tab_name ${this.truncate ? 'truncate' : ''} ${!this.current ? 'tab_text' : ''} ${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.getFormattedLabel()}</p>\n        </div>\n        {this.badge && (\n          <gb-badge size=\"sm\" type=\"pill_color\" color={this.current ? 'information' : 'gray'}>\n            <slot name=\"count\"></slot>\n          </gb-badge>\n        )}\n      </div>\n    );\n  }\n}\n"],"version":3}