globuswebcomponents 0.3.9 → 0.4.1

package/dist/cjs/gb-input-field.cjs.entry.js.map

@@ -1 +0,0 @@
-{"file":"gb-input-field.entry.cjs.js","mappings":"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","names":["getAssetPath","h"],"sources":["src/components/gb-input-field/gb-input-field.css?tag=gb-input-field&encapsulation=shadow","src/components/gb-input-field/gb-input-field.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typo.css';\r\n\r\ndiv {\r\n  display: flex;\r\n  flex-direction: column;\r\n  margin-bottom: 10px;\r\n}\r\n\r\n.input-wrapper {\r\n  display: flex;\r\n  width: 320px;\r\n  align-items: center;\r\n  border: 1px solid #ccc;\r\n  padding: 8px;\r\n  border-radius: 4px;\r\n}\r\n\r\ninput {\r\n  display: -webkit-box;\r\n  -webkit-box-orient: vertical;\r\n  --line-clamp: 1;\r\n  flex: 1 0 0;\r\n}\r\n\r\n.input-wrapper input, .input-wrapper select {\r\n  flex-grow: 1;\r\n  border: none;\r\n  outline: none;\r\n}\r\n\r\n.tag {\r\n  display: flex;\r\n  align-items: center;\r\n  background-color: #f0f0f0;\r\n  border-radius: 12px;\r\n  padding: 4px 8px;\r\n  margin-right: 8px;\r\n}\r\n\r\n.help-text {\r\n  font-size: 12px;\r\n  color: #888;\r\n  margin-top: 4px;\r\n}\r\n\r\nbutton {\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n}\r\n","import { Component, Prop, getAssetPath, h } from '@stencil/core'\r\nimport { GeneralSizes } from '../../models/reusableModels'\r\n\r\n@Component({\r\n  tag: 'gb-input-field',\r\n  styleUrl: 'gb-input-field.css',\r\n  shadow: true\r\n})\r\n\r\nexport class GbInputField {\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() inputType: 'default' | 'icon_leading' | 'leading_dropdown' | 'trailing_dropdown'|'leading_text'|'payment_input'| 'tags' | 'trailing_button' |'password' | 'password_icon_leading' | 'count';\r\n  @Prop() destructive?: boolean;\r\n  @Prop() helpIcon?: boolean = false;\r\n  @Prop() icon?: string;\r\n  @Prop() placeholder: string = ''; \r\n  @Prop() label?: string = '';\r\n\r\n  /*getIconPath(iconName: string) {\r\n    if (!iconName) return null;\r\n    return getAssetPath(`./assets/${iconName}`);\r\n  }\r\n\r\n  renderIcon(iconName: string) {\r\n    const iconPath = this.getIconPath(iconName);\r\n    return iconPath ? <span><img class=\"icon\" src={iconPath} alt=\"icon\" /></span> : null;\r\n  }*/\r\n\r\n  \r\n\r\n  render() {\r\n\r\n    const icon = this.icon ? getAssetPath(`assets/${this.icon}.svg`) : '';\r\n\r\n    const classes = {\r\n      [this.size]: true,\r\n    }\r\n\r\n    return (\r\n      <div class={classes}>\r\n        <label>{this.label}</label>\r\n        {this.inputType === 'default' && (\r\n          <div class=\"input-wrapper\">\r\n            <input placeholder={this.placeholder}>\r\n            </input>\r\n            {this.helpIcon && (\r\n              <div class=\"help-icon\">\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              </div> \r\n            )}\r\n          </div>\r\n        )}\r\n        {this.inputType === 'icon_leading' && (\r\n          <div class=\"input-wrapper\">\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            <input placeholder={this.placeholder} type='email'>\r\n            </input>\r\n            {this.helpIcon && (\r\n                <div class=\"help-icon\">\r\n                  <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                    <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                  </svg>\r\n                </div> \r\n              )}\r\n          </div>\r\n        )}\r\n        {this.inputType === 'leading_dropdown' && (\r\n          <div class=\"input-wrapper\">\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            <select></select>\r\n            <input placeholder={this.placeholder}>\r\n              {this.helpIcon && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              )}\r\n            </input>\r\n          </div>\r\n        )}\r\n        {this.inputType === 'payment_input' && (\r\n          <div class=\"input-wrapper\">\r\n            <span class='payment-icon'>$</span>\r\n            <input placeholder={this.placeholder}>\r\n              {this.helpIcon && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                  <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n                </svg>\r\n              )}\r\n            </input>\r\n          </div>\r\n        )}\r\n        {this.inputType === 'tags' && (\r\n          <input placeholder={this.placeholder}>\r\n            <slot></slot>\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'password' && (\r\n          <input placeholder={this.placeholder}>\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'password_icon_leading' && (\r\n          <input placeholder={this.placeholder}>\r\n            {this.icon && (\r\n              <div class=\"icon\">\r\n                <img src={icon} alt=\"Icon\"></img>\r\n              </div>\r\n            )}\r\n            {this.helpIcon && (\r\n              <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n                <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n              </svg>\r\n            )}\r\n          </input>\r\n        )}\r\n        {this.inputType === 'count' && (\r\n          <input placeholder={this.placeholder}>\r\n          {this.icon && (\r\n            <div class=\"icon\">\r\n              <img src={icon} alt=\"Icon\"></img>\r\n            </div>\r\n          )}\r\n          {this.helpIcon && (\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n              <path d=\"M6.66671 5.99998C6.66671 5.2636 7.26366 4.66665 8.00004 4.66665C8.73642 4.66665 9.33337 5.2636 9.33337 5.99998C9.33337 6.26541 9.25581 6.51273 9.12212 6.72051C8.72365 7.33976 8.00004 7.93027 8.00004 8.66665V8.99998M7.9947 11.3333H8.00069M14.6667 7.99998C14.6667 11.6819 11.6819 14.6666 8.00004 14.6666C4.31814 14.6666 1.33337 11.6819 1.33337 7.99998C1.33337 4.31808 4.31814 1.33331 8.00004 1.33331C11.6819 1.33331 14.6667 4.31808 14.6667 7.99998Z\" stroke=\"#697586\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n          )}\r\n          <span>\r\n            <button class=\"decrease-btn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path d=\"M16.6666 10L3.33329 10\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>\r\n            </button>\r\n            <button class=\"increase-btn\">\r\n            <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n              <path d=\"M10 3.33334L10 16.6667M16.6667 10L3.33337 10\" stroke=\"#4B5565\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\r\n            </svg>        \r\n            </button>\r\n          </span>\r\n        </input>\r\n        )}\r\n        <p class=\"help-text\">This is a hint to help the user</p>\r\n      </div>\r\n    )\r\n  }\r\n}"],"version":3}

package/dist/collection/components/gb-tagcount/gb-tag-count.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"gb-tag-count.js","sourceRoot":"","sources":["../../../src/components/gb-tagcount/gb-tag-count.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,IAAI,EAAE,CAAC,EAAC,MAAM,eAAe,CAAC;AASjD,MAAM,OAAO,UAAU;;;;IAGnB,MAAM;QACF,OAAO,CACH,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI;YACjB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,CACT,CAAA;IACL,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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}"]}

package/dist/components/p-578443b7.js.map

@@ -1 +0,0 @@
-{"file":"p-578443b7.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sk9DAAsk9D,CAAC;AAC7l9D,yBAAe,aAAa;;MCQf,UAAU;;;;;;;IAGnB,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,IAAI,CAAC,IAAI,IACjB,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/gb-tagcount/gb-tag-count.css?tag=gb-tag-count&encapsulation=shadow","src/components/gb-tagcount/gb-tag-count.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typo.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}"],"version":3}

package/dist/components/p-5f271172.js.map

@@ -1 +0,0 @@
-{"file":"p-5f271172.js","mappings":";;;;;;;AAAA,MAAM,kBAAkB,GAAG,qq5EAAqq5E,CAAC;AACjs5E,8BAAe,kBAAkB;;MCOpB,eAAe;;;;;;uBACC,KAAK;;yBAEH,KAAK;qBACT,KAAK;;uBAEJ,EAAE;;IAI5B,cAAc;QACZ,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;SAC3B;KACF;IAED,qBAAqB;QACnB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;YAC7B,KAAK,IAAI;gBACP,OAAO,mBAAmB,CAAC;SAC9B;KACF;IAED,mBAAmB;QACjB,QAAQ,IAAI,CAAC,IAAI;YACf,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;YAC1B,KAAK,IAAI;gBACP,OAAO,gBAAgB,CAAC;SAC3B;KACF;IAED,gBAAgB;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QACvD,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,gBAAgB,CAAC,CAAC;QAEzD,IAAI,IAAI,CAAC,OAAO,EAAE;YAChB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,CAAC;SACrD;aAAM;YACL,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;SAC9C;QAED,IAAG,QAAQ,EAAE;YACT,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,mBAAmB,EAAE,CAAC,CAAC;SACtD;KACF;IAED,WAAW;QACT,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,CAAC;KACxB;IAED,MAAM;QACJ,QACE,4DACA,KAAK,EAAE,kBAAkB,IAAI,CAAC,IAAI;QAChC,IAAI,CAAC,OAAO,GAAG,SAAS,GAAG,EAAE;QAC7B,IAAI,CAAC,SAAS,GAAG,YAAY,GAAG,EAAE;QAClC,IAAI,CAAC,IAAI,EAAE,EAAE,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,EAAE,IAC9C,0DAAG,KAAK,EAAE,GAAG,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,qBAAqB,EAAE,GAAG,IAAI,CAAC,cAAc,EAAE,EAAE,IAAG,IAAI,CAAC,OAAO,CAAK,EACrG,IAAI,CAAC,KAAK,KACT,iEACE,IAAI,EAAC,IAAI,EACT,IAAI,EAAC,YAAY,EACjB,KAAK,EACH,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,gBAAgB,GAAG,aAAa;gBAC9D,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,WAAW,GAAG,aAAa;oBACzD,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,IAAI,KAAK,MAAM,GAAG,aAAa,GAAG,MAAM,IAG/D,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACjB,CACZ,CACG,EACN;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"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';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\r\n:host{\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n.tab_button_div{\r\n    cursor: pointer;\r\n}\r\n\r\n.button_primary,\r\n.button_gray,\r\n.button_white{\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-xs);\r\n}\r\n\r\n.rounded_button_white{\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-full);\r\n}\r\n\r\n.underline,\r\n.underline_filled,\r\n.line{\r\n    display: inline-flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    border-radius: var(--rounded-none);\r\n}\r\n\r\n.count_div{\r\n    display: flex;\r\n    height: 1.375rem;\r\n    min-height: 1.375rem;\r\n    padding: var(--spacing-none) var(--spacing-2);\r\n    align-items: center;\r\n    border-radius: var(--rounded-full);\r\n    border: 1px solid blue;\r\n}\r\n\r\n/* Spacing Styles */\r\n.button_primary,\r\n.button_gray,\r\n.button_white,\r\n.rounded_button_white,\r\n.underline_filled,\r\n.line{\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.underline{\r\n    gap: 0.5rem;\r\n}\r\n\r\n/* Tab Type Styles */\r\n.tab_button_div.button_primary,\r\n.tab_button_div.button_gray,\r\n.tab_button_div.button_white,\r\n.tab_button_div.rounded_button_white,\r\n.tab_button_div.underline_filled,\r\n.tab_button_div.line{\r\n    background: transparent;\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n/* Tab State Styles */\r\n.tab_button_div.button_primary:hover{\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_primary:active{\r\n    background: transparent;\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.button_gray:hover,\r\n.tab_button_div.button_white:hover,\r\n.tab_button_div.rounded_button_white:hover{\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.button_gray:active,\r\n.tab_button_div.button_white:active,\r\n.tab_button_div.rounded_button_white:active{\r\n    background: transparent;\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.underline:hover,\r\n.tab_button_div.underline_filled:hover{\r\n    border-bottom: 1px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline:active,\r\n.tab_button_div.underline_filled:active{\r\n    background: transparent;\r\n    border: none;\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.tab_button_div.line:hover{\r\n    border-radius: var(--rounded-xs);\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.tab_button_div.line:active{\r\n    border-radius: var(--rounded-none);\r\n    background: transparent;\r\n}\r\n\r\n.tab_button_div.button_primary.current:hover{\r\n    background: var(--color-background-information-subtler, #C8E0F9);\r\n    color: var(--color-text-information, #064E94);\r\n}\r\n\r\n.tab_button_div.button_primary.current:active{\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n    color: var(--color-text-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.button_gray.current:hover,\r\n.tab_button_div.button_white.current:hover,\r\n.tab_button_div.rounded_button_white.current:hover{\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_gray.current:active{\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_white.current:active,\r\n.tab_button_div.rounded_button_white.current:active{\r\n    background: var(--color-background-card, #FFFFFF);\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline.current:hover{\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n    color: var(--color-text-information, #064E94);\r\n    border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.underline.current:active{\r\n    background: transparent;\r\n    color: var(--color-text-selected, #075DB2);\r\n    border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.underline_filled.current:hover{\r\n    background: var(--color-background-information-subtler, #C8E0F9);\r\n    color: var(--color-text-information, #064E94);\r\n    border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.underline_filled.current:active{\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n    color: var(--color-text-selected, #075DB2);\r\n    border-color: var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.line.current:hover{\r\n    border-radius: var(--rounded-xs);\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n    color: var(--color-text-information, #064E94);\r\n    border-color: var(--color-border-information, #064E94);\r\n}\r\n\r\n.tab_button_div.line.current:active{\r\n    border-radius: var(--rounded-none);\r\n    background: transparent;\r\n    color: var(--color-text-selected, #075DB2);\r\n    border-left: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Tab Current Styles */\r\n.tab_button_div.button_primary.current{\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n    color: var(--color-text-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.button_gray.current{\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.button_white.current,\r\n.tab_button_div.rounded_button_white.current{\r\n    background: var(--color-background-card, #FFFFFF);\r\n    color: var(--color-text-bold, #202939);\r\n}\r\n\r\n.tab_button_div.underline.current{\r\n    background: transparent;\r\n    color: var(--color-text-selected, #075DB2);\r\n    border-bottom: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.underline_filled.current{\r\n    background: var(--color-background-information-subtlest, #E4F0FC);\r\n    color: var(--color-text-selected, #075DB2);\r\n    border-bottom: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n.tab_button_div.line.current{\r\n    background: transparent;\r\n    color: var(--color-text-selected, #075DB2);\r\n    border-left: 2px solid var(--color-border-selected, #075DB2);\r\n}\r\n\r\n/* Tab Size Styles */\r\n.button_primary.sm,\r\n.button_gray.sm,\r\n.button_white.sm,\r\n.rounded_button_white.sm,\r\n.underline.sm{\r\n    height: 2.375rem;\r\n    padding: var(--spacing-none) var(--spacing-4);\r\n}\r\n\r\n.underline_filled.sm,\r\n.line.sm{\r\n    height: 2.375rem;\r\n    padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.md,\r\n.button_gray.md,\r\n.button_white.md,\r\n.rounded_button_white.md,\r\n.underline.md,\r\n.underline_filled.md,\r\n.line.md{\r\n    height: 2.75rem;\r\n    padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.full_width.sm,\r\n.button_gray.full_width.sm,\r\n.button_white.full_width.sm,\r\n.rounded_button_white.full_width.sm{\r\n    width: 100%;\r\n    height: 2.375rem;\r\n    padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.underline.full_width.sm,\r\n.underline_filled.full_width.sm{\r\n    width: 100%;\r\n    height: 2.375rem;\r\n    padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.button_primary.full_width.md,\r\n.button_gray.full_width.md,\r\n.button_white.full_width.md,\r\n.rounded_button_white.full_width.md{\r\n    width: 100%;\r\n    height: 2.25rem;\r\n    padding: var(--spacing-none) var(--spacing-3);\r\n}\r\n\r\n.underline.full_width.md,\r\n.underline_filled.full_width.md{\r\n    width: 100%;\r\n    height: 2.25rem;\r\n    padding: var(--spacing-none) var(--spacing-3);\r\n}","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { GeneralSizes, TabTypes } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-tab-button-base',\r\n  styleUrl: 'gb-tab-button-base.css',\r\n  shadow: true,\r\n})\r\nexport class GbTabButtonBase {\r\n  @Prop() current: boolean = false;\r\n  @Prop() size: GeneralSizes;\r\n  @Prop() fullWidth: boolean = false;\r\n  @Prop() badge: boolean = false;\r\n  @Prop() type: TabTypes;\r\n  @Prop() tabName: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Event() tabClicked: EventEmitter<void>;\r\n\r\n  getTextClasses() {\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  getCurrentTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-sm-semi-bold';\r\n      case 'md':\r\n        return 'text-md-semi-bold';\r\n    }\r\n  }\r\n\r\n  getCountTextClasses() {\r\n    switch (this.size) {\r\n      case 'sm':\r\n        return 'text-xs-medium';\r\n      case 'md':\r\n        return 'text-sm-medium';\r\n    }\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const tabName = this.el.querySelector('[slot=\"name\"]');\r\n    const tabCount = this.el.querySelector('[slot=\"count\"]');\r\n\r\n    if (this.current) {\r\n      tabName.classList.add(this.getCurrentTextClasses());\r\n    } else {\r\n      tabName.classList.add(this.getTextClasses());\r\n    }\r\n\r\n    if(tabCount) {\r\n        tabCount.classList.add(this.getCountTextClasses());\r\n    }\r\n  }\r\n\r\n  handleClick() {\r\n    this.tabClicked.emit();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div \r\n      class={`tab_button_div ${this.type}\r\n      ${this.current ? 'current' : ''} \r\n      ${this.fullWidth ? 'full_width' : ''} \r\n      ${this.size}`} onClick={() => this.handleClick()}>\r\n        <p class={`${this.current ? this.getCurrentTextClasses() : this.getTextClasses()}`}>{this.tabName}</p>\r\n        {this.badge && (\r\n          <gb-badge\r\n            size=\"sm\"\r\n            type=\"pill_color\"\r\n            color={\r\n              this.current && this.type === 'button_primary' ? 'information' :\r\n              this.current && this.type === 'underline' ? 'information' :\r\n              this.current && this.type === 'line' ? 'information' : 'gray'\r\n            }\r\n          >\r\n            <slot name=\"count\"></slot>\r\n          </gb-badge>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/components/p-7c00ed41.js.map

@@ -1 +0,0 @@
-{"file":"p-7c00ed41.js","mappings":"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","names":[],"sources":["src/components/gb-side-bar-item/gb-side-bar-item.css?tag=gb-side-bar-item&encapsulation=shadow","src/components/gb-side-bar-item/gb-side-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n@import './../../global/spacing.css';\r\n@import './../../global/typography.css';\r\n\r\n:host{\r\n    position: relative;\r\n}\r\n\r\n.side_bar_item_container{\r\n    padding: 0 var(--spacing-4);\r\n}\r\n\r\n.nav_item_base.icon_only{\r\n    width: fit-content;\r\n}\r\n\r\n.nav_item_base{\r\n    display: flex;\r\n    padding: var(--spacing-2) var(--spacing-3);\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    gap: 0.5rem;\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-sm);\r\n    cursor: pointer;\r\n    position: relative;\r\n    flex-grow: 1;\r\n}\r\n\r\n.content{\r\n    display: flex;\r\n    align-items: center;\r\n    gap: 0.75rem;\r\n    flex-grow: 1;\r\n}\r\n\r\n.bar{\r\n    position: absolute;\r\n    left: 0rem;\r\n    width: 0.25rem;\r\n    height: 1.25rem;\r\n}\r\n\r\n.icon{\r\n    display: flex;\r\n    align-items: center;\r\n}\r\n\r\n/* State and Category Styles */\r\n.nav_item_base.plain_background.default,\r\n.nav_item_base.colored_background.default{\r\n    background: transparent;\r\n}\r\n\r\n.nav_item_base.plain_background.active{\r\n    background: var(--color-background-information-subtler, #C8E0F9);\r\n}\r\n\r\n.nav_item_base.default.plain_background:hover{\r\n    background: var(--color-background-gray-subtler, #EEF2F6);\r\n}\r\n\r\n.nav_item_base.colored_background.active{\r\n    background: var(--color-background-information-bold, #042F59);\r\n}\r\n\r\n.nav_item_base.default.colored_background:hover{\r\n    background: var(--color-blanket, rgba(33, 44, 101, 0.4));\r\n}\r\n\r\n.label_text.plain_background.default{\r\n    color: var(--color-text, #4B5565);\r\n}\r\n\r\n.label_text.plain_background.active{\r\n    color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.label_text.colored_background{\r\n    color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background path[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.plain_background circle[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.icon.colored_background circle[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n/* Arrow Color Styles */\r\n.arrow.default.plain_background path{\r\n    stroke: var(--color-icon, #4B5565);\r\n}\r\n\r\n.arrow.active.plain_background path{\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.arrow.default.colored_background path{\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.arrow.active.colored_background path{\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.tooltip{\r\n    position: absolute;\r\n    top: -0.7rem;\r\n    left: 4.3rem;\r\n}","import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-side-bar-item',\r\n  styleUrl: 'gb-side-bar-item.css',\r\n  shadow: true,\r\n})\r\nexport class GbSideBarItem {\r\n  @Prop() state: 'default' | 'active';\r\n  @Prop() type: 'full_with_label' | 'icon_only';\r\n  @Prop() label: string = '';\r\n  @Prop() icon: string = '';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showArrow: boolean = false;\r\n  @Prop() showBadge: boolean = false;\r\n  @Prop({ mutable: true }) showTooltip: boolean = false;\r\n  @State() leadingIconSvg: string = '';\r\n  @State() textState: any;\r\n  @Event()\r\n  sideBarItemClicked: EventEmitter<void>;\r\n  @Element() el: HTMLElement;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.icon);\r\n    this.textState = this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium';\r\n  }\r\n\r\n  onSideBarItemClicked() {\r\n    this.sideBarItemClicked.emit();\r\n  }\r\n\r\n  getLabel() {\r\n    const slottedLabel = this.el.querySelector('slot');\r\n\r\n    console.log(slottedLabel.textContent);\r\n    return slottedLabel.textContent;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n        <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n          {this.state === 'active' && this.category === 'plain_background' && <img src=\"build/assets/bar.svg\" alt=\"\" class=\"bar\" />}\r\n          {this.state === 'active' && this.category === 'colored_background' && <img src=\"build/assets/bar_white.svg\" alt=\"\" class=\"bar\" />}\r\n          <div class=\"content\">\r\n            <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n            {this.type === 'full_with_label' && (\r\n              <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n            )}\r\n          </div>\r\n          {this.type === 'full_with_label' && (\r\n            <>\r\n              {this.showBadge && (\r\n                <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n                  <p>10</p>\r\n                </gb-badge>\r\n              )}\r\n              {this.showArrow && (\r\n                <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n                  <path\r\n                    d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n                    stroke=\"#212C65\"\r\n                    stroke-width=\"1.5\"\r\n                    stroke-linecap=\"round\"\r\n                    stroke-linejoin=\"round\"\r\n                  />\r\n                </svg>\r\n              )}\r\n            </>\r\n          )}\r\n        </div>\r\n        {this.type === 'icon_only' && this.showTooltip && (\r\n          <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n            <p slot=\"label\">{this.label}</p>\r\n          </gb-tooltip>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}