globuswebcomponents 1.0.0 → 1.0.2

package/dist/components/gb-sidebar.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$9 } from './p-24625c69.js';
 import { d as defineCustomElement$8 } from './p-bd1c23b9.js';
 import { d as defineCustomElement$7 } from './p-3254d1d4.js';
 import { d as defineCustomElement$6 } from './p-4a9d5d98.js';
-import { d as defineCustomElement$5 } from './p-0bde1b0e.js';
+import { d as defineCustomElement$5 } from './p-180a087a.js';
 import { d as defineCustomElement$4 } from './p-ec43535d.js';
 import { d as defineCustomElement$3 } from './p-0c6b277d.js';
 import { d as defineCustomElement$2 } from './p-c2efc577.js';
@@ -75,10 +75,6 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
     }
     componentWillLoad() {
         this.loadIcon(this.iconInstance);
-        // const storedIndex = localStorage.getItem('activeIndex');
-        // if (storedIndex !== null) {
-        //   this.activeIndex = parseInt(storedIndex, 10); // Retrieve active index from localStorage
-        // }
     }
     render() {
         const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';
@@ -86,7 +82,7 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
         const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);
         const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);
         const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);
-        return (h("div", { key: '0dba650e4605938cf5ea70f383ae648d671dd541', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'aa44a32a5724e1b89fd505b48dd3e1c7ada35190', class: "pattern" }, h("img", { key: '43ead0906e10df574f88f2d94c792eed63299975', src: patternSrc, alt: "" }))), h("div", { key: 'dffbac08e3f1768c4d3e8af1bfd24595495bb2e6', class: "nav" }, h("div", { key: 'b89756a997c9171e99937bd86f4fe3257929c5dd', class: `sidebar_header ${this.state}` }, h("div", { key: 'ef108ffc9c51b7e04287d0d0e3a3fbd1bb1d7458', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: '651dbaecfc403806208ca8ef4ec5ad7140604b4e', src: logoSrc, alt: "" })), h("div", { key: '8b3aad291fcbb4e241b210ed847043db213d337e', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '6110ff75f5d5ab2343c9ff9c97d1c32f4a045ce7', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'cc853751982327b80fbf2addeaa00cd15b3144ac', class: "navigation" }, h("div", { key: 'db0bc1dc7cf039244bf4e6c1174f1f2e7e5416d8', class: "item" }, h("gb-side-bar-item", { key: '47e3e9da14e52a5a8328cfbc8ca7a443451a9416', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-side-bar-item", { key: 'bd1c246993f9cc900e247bf1aeeaf35f256efdd5', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-side-bar-item", { key: '70d9ccdb7f0426133c1efb5adcba2d874092d48b', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-side-bar-item", { key: 'c1416aaa53f76738dff2dba344153cf5aa14c4e8', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-side-bar-item", { key: '7b16ef4b41236fe6c40244c3f117d2efe26d2aca', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '262b7740b6ac649790678618243e0a714601b0f7', class: "navigation" }, h("div", { key: '7557cd285bbeb2a7c8487dff7d92ed709de8d827', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: '964202f2347e1b1609671dd6566725ce5f43bfbf', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-side-bar-item", { key: 'aaabe6fbb886f48585225473b8ee4d977e9f6398', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-side-bar-item", { key: '4bb1c4b22122248585281f159c4f2bd42a97e891', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-side-bar-item", { key: 'f8775276129343a93b4706ff712606a4f88fcbca', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-side-bar-item", { key: '89d3ebffd7ebf7069c27af896a83b1e9f7a390aa', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: '902f91fd32bd2c5ab01c8121a3b9e52a64e035ba', class: "application_name" }, h("div", { key: 'f2fcdc418974842e6610c693dd813e43eafb1bd6', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '314c1822b352254b7c47bea22b07e72dba4517ac', class: "application_name_pattern" }, h("img", { key: 'be00ab8cf47f20b60eabbfee1e20c4c2326d6aeb', src: patternSrc, alt: "" }))), h("div", { key: '6d288579ea8f5e7a702d648ac517d1e6fb5620c5', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: 'd810d527999ad748ea36a856d8edff477b256fb6', class: textClass }, h("slot", { key: 'd31145f41c182e9dd74b9e5a919a4d20efc682a4', name: "application_name" })))))));
+        return (h("div", { key: '51bdcfbc114068b6e0ee5004a4d3c6bedec89ef8', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: '8b16d8d0f07ddf3d1414f1ef02f2936f78700b52', class: "pattern" }, h("img", { key: '4c19845be3e80fee03a180dfeb523418ba94eb5f', src: patternSrc, alt: "" }))), h("div", { key: '4c24b20a3642d5b3d65f38390c0f51a6f7c46aa9', class: "nav" }, h("div", { key: '3161a4d0cb3ce59f47bf917239e046dacc9be9e0', class: `sidebar_header ${this.state}` }, h("div", { key: '1163be23f35c0fa9b65da2f7b1e1c82675bdfaa5', class: `logo_and_name ${this.state}` }, this.state === 'expanded' && h(Fragment, null, this.category === 'plain_background' ? h("img", { src: blueLogoSrc }) : h("img", { src: whiteLogoSrc })), this.state === 'collapsed' && h("img", { key: 'fd23546d708289c71e9947342f6f837c7350f386', src: logoSrc, alt: "" })), h("div", { key: '497093513913dca57255607360a1997116f063b7', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '135d5fa3839fe0024d2a7256e226cb0e6332f5f0', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: '738694895513a4cf2458364d3ca8d73ffe0c0643', class: "navigation" }, h("div", { key: '7b61156c08148638cbc60e6217089052e13b1a9b', class: "item" }, h("gb-side-bar-item", { key: '958fc5ecc85cfbe84a5d10d3f17e89ad09b2a72f', state: this.activeIndex === 0 ? 'active' : 'default', icon: this.firstItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(0), label: this.firstItemLabel }), h("gb-side-bar-item", { key: '053fd75f44a6581455a481d0261a0e6ee56e3d43', state: this.activeIndex === 1 ? 'active' : 'default', icon: this.secondItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(1), label: this.secondItemLabel }), this.thirdItemLabel && (h("gb-side-bar-item", { key: 'b96a61329f8970e9309b60a19721458a095cfcab', state: this.activeIndex === 2 ? 'active' : 'default', icon: this.thirdItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(2), label: this.thirdItemLabel })), this.fourthItemLabel && (h("gb-side-bar-item", { key: '9a4fc70436d20dddb7f67980c2991e0f78783a2b', state: this.activeIndex === 3 ? 'active' : 'default', icon: this.fourthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(3), label: this.fourthItemLabel })), this.fifthItemLabel && (h("gb-side-bar-item", { key: '44b36528a699cb5a99dfc25b8b74a890e5a43805', state: this.activeIndex === 4 ? 'active' : 'default', icon: this.fifthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(4), label: this.fifthItemLabel })))), this.showSecondCategory && (h("div", { key: '8bb0192a2d197fea62e41dee19e4b6f371d3081c', class: "navigation" }, h("div", { key: '8b895a23068b68dd9b0a2ac460e93e069c38ed56', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: 'e9c31ea2c421125c9eed3f242bb86b621e06e49d', state: this.activeIndex === 5 ? 'active' : 'default', icon: this.sixthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(5), label: this.sixthItemLabel })), this.seventhItemLabel && (h("gb-side-bar-item", { key: 'b83132ca871446dfde6bb4b6ec07bf71bd61ee3f', state: this.activeIndex === 6 ? 'active' : 'default', icon: this.seventhItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(6), label: this.seventhItemLabel })), this.eighthItemLabel && (h("gb-side-bar-item", { key: '9ddefff31fdc7bf132b85ca4d0380b4a1742e7b0', state: this.activeIndex === 7 ? 'active' : 'default', icon: this.eighthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(7), label: this.eighthItemLabel })), this.ninthItemLabel && (h("gb-side-bar-item", { key: '4d3d57dfd4be41556dfcde55b1270bcb6f40b374', state: this.activeIndex === 8 ? 'active' : 'default', icon: this.ninthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(8), label: this.ninthItemLabel })), this.tenthItemLabel && (h("gb-side-bar-item", { key: '2f11e4ba59ae91aa07a4b92b311009aeb59a8839', state: this.activeIndex === 9 ? 'active' : 'default', icon: this.tenthItemIcon, category: this.category, type: this.state === 'collapsed' ? 'icon_only' : 'full_with_label', onClick: () => this.sideBarItemClicked(9), label: this.tenthItemLabel })))))), this.state === 'expanded' && (h("div", { key: 'f6f7b7ef299245283cbe50f6e5fa4a6544c78699', class: "application_name" }, h("div", { key: '9e4c1d2873d5a9f9e2c78287d107257dc6e46c28', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '26599bb9a4213f4f6e3204c53239746d1c3a5f06', class: "application_name_pattern" }, h("img", { key: 'f51046fa483c8916a9e9d61a9a18231f04d2fbc1', src: patternSrc, alt: "" }))), h("div", { key: 'cbfe72ff8b909f4cd10cd716ab20ae04b659da57', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: 'bd196602a4b423049919f448aff396b75fd311c0', class: textClass }, h("slot", { key: '895bacde03cfae0fef69f69cafe0b10ced299e3d', name: "application_name" })))))));
     }
     get el() { return this; }
     static get style() { return GbSidebarStyle0; }

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

@@ -1 +1 @@
-{"file":"gb-sidebar.js","mappings":"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","names":["GbSidebar"],"sources":["src/components/gb-sidebar/gb-sidebar.css?tag=gb-sidebar&encapsulation=shadow","src/components/gb-sidebar/gb-sidebar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.sidebar_div{\r\n    transition: all 0.3s ease-in-out;\r\n    position: relative;\r\n    height: 100vh;\r\n}\r\n\r\n.pattern{\r\n    position: absolute;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    mix-blend-mode: multiply;\r\n}\r\n\r\n.pattern img{\r\n    width: 100%;\r\n    height: auto;\r\n}\r\n\r\n.sidebar_div.expanded{\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    width: 16.75rem;\r\n}\r\n\r\n.sidebar_div.collapsed{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    width: 5rem;\r\n}\r\n\r\n.nav{\r\n    display: flex;\r\n    width: 100%;\r\n    flex-direction: column;\r\n    gap: var(--spacing-6);\r\n}\r\n\r\n.sidebar_header.expanded{\r\n    display: flex;\r\n    padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-6);\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-top: 1rem;\r\n}\r\n\r\n.sidebar_header.collapsed{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    margin-top: 1rem;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.logo_and_name.expanded{\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n}\r\n\r\n.logo_and_name.collapsed{\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.collapse_button.collapsed{\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.application_name{\r\n    display: flex;\r\n    padding: var(--spacing-6);\r\n}\r\n\r\n.wrapper{\r\n    display: flex;\r\n    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-4);\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-sm);\r\n    position: relative;\r\n    width: 13.75rem;\r\n    height: auto;\r\n    overflow: hidden;\r\n}\r\n\r\n.application_icon.plain_background path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.plain_background path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.application_icon.colored_background path[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.application_name_pattern{\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    mix-blend-mode: multiply;\r\n}\r\n\r\n.application_name_pattern img{\r\n    width: 100%;\r\n}\r\n\r\n.wrapper{\r\n    width: 100%;\r\n}\r\n\r\n.wrapper.colored_background{\r\n    border: 1px solid rgba(255, 255, 255, 0.10);\r\n    background: rgba(0, 0, 0, 0.10);\r\n}\r\n\r\n.wrapper.plain_background{\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n    border: var(--Spacing-None, 1px) solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.plain_background_color{\r\n    color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.colored_background_color{\r\n    color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\n/* Sidebar Category Styles */\r\n.sidebar_div.plain_background{\r\n    border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.sidebar_div.colored_background{\r\n    background-image: linear-gradient(180deg, #064E94 0%, #02182E 100%);\r\n    background-size: cover;\r\n}\r\n\r\n.item{\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n    gap: var(--spacing-1);\r\n}","import { Component, Element, h, Prop, Fragment, State, getAssetPath, Method, Event, EventEmitter } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-sidebar',\r\n  styleUrl: 'gb-sidebar.css',\r\n  shadow: true,\r\n})\r\nexport class GbSidebar {\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed' = 'expanded';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showSecondCategory: boolean = false;\r\n  @Prop() applicationName: string = '';\r\n  @Prop() firstItemIcon: string = '';\r\n  @Prop() secondItemIcon: string = '';\r\n  @Prop() thirdItemIcon: string = '';\r\n  @Prop() fourthItemIcon: string = '';\r\n  @Prop() fifthItemIcon: string = '';\r\n  @Prop() sixthItemIcon: string = '';\r\n  @Prop() seventhItemIcon: string = '';\r\n  @Prop() eighthItemIcon: string = '';\r\n  @Prop() ninthItemIcon: string = '';\r\n  @Prop() tenthItemIcon: string = '';\r\n  @Prop() iconInstance: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() firstItemLabel: string = '';\r\n  @Prop() secondItemLabel: string = '';\r\n  @Prop() thirdItemLabel: string = '';\r\n  @Prop() fourthItemLabel: string = '';\r\n  @Prop() fifthItemLabel: string = '';\r\n  @Prop() sixthItemLabel: string = '';\r\n  @Prop() seventhItemLabel: string = '';\r\n  @Prop() eighthItemLabel: string = '';\r\n  @Prop() ninthItemLabel: string = '';\r\n  @Prop() tenthItemLabel: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) activeIndex: number;\r\n  @State() leadingIconSvg: string = '';\r\n  @Event() sidebarItemClicked: EventEmitter<number>;\r\n  @Event() sidebarState: EventEmitter<string>;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  collapseSideBar() {\r\n    if (this.state === 'expanded') {\r\n      this.state = 'collapsed';\r\n    }\r\n    this.sidebarState.emit('collapsed');\r\n  }\r\n\r\n  expandSideBar() {\r\n    if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n    this.sidebarState.emit('expanded');\r\n  }\r\n\r\n  @Method()\r\n  async sideBarItemClicked(index: number) {\r\n    this.activeIndex = index;\r\n    this.sidebarItemClicked.emit(index);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    applicationName.classList.add('text-lg-bold');\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconInstance);\r\n    // const storedIndex = localStorage.getItem('activeIndex');\r\n    // if (storedIndex !== null) {\r\n    //   this.activeIndex = parseInt(storedIndex, 10); // Retrieve active index from localStorage\r\n    // }\r\n  }\r\n\r\n  render() {\r\n    const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';\r\n    const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n    const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n    const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n    const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n    return (\r\n      <div class={`sidebar_div ${this.state} ${this.category}`}>\r\n        {this.category === 'colored_background' && (\r\n          <div class=\"pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n        )}\r\n        <div class=\"nav\">\r\n          <div class={`sidebar_header ${this.state}`}>\r\n            <div class={`logo_and_name ${this.state}`}>\r\n              {this.state === 'expanded' && <>{this.category === 'plain_background' ? <img src={blueLogoSrc} /> : <img src={whiteLogoSrc} />}</>}\r\n              {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n            </div>\r\n            <div class={`collapse_button ${this.state}`}>\r\n              <gb-collapse-button\r\n                color={this.category === 'plain_background' ? 'gray' : 'white'}\r\n                action={this.state === 'collapsed' ? 'expand' : 'collapse'}\r\n                onClick={() => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar())}\r\n              ></gb-collapse-button>\r\n            </div>\r\n          </div>\r\n          <div class=\"navigation\">\r\n            <div class=\"item\">\r\n              <gb-side-bar-item\r\n                state={this.activeIndex === 0 ? 'active' : 'default'}\r\n                icon={this.firstItemIcon}\r\n                category={this.category}\r\n                type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                onClick={() => this.sideBarItemClicked(0)}\r\n                label={this.firstItemLabel}\r\n              ></gb-side-bar-item>\r\n              <gb-side-bar-item\r\n                state={this.activeIndex === 1 ? 'active' : 'default'}\r\n                icon={this.secondItemIcon}\r\n                category={this.category}\r\n                type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                onClick={() => this.sideBarItemClicked(1)}\r\n                label={this.secondItemLabel}\r\n              ></gb-side-bar-item>\r\n              {this.thirdItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 2 ? 'active' : 'default'}\r\n                  icon={this.thirdItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(2)}\r\n                  label={this.thirdItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n              {this.fourthItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 3 ? 'active' : 'default'}\r\n                  icon={this.fourthItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(3)}\r\n                  label={this.fourthItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n              {this.fifthItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 4 ? 'active' : 'default'}\r\n                  icon={this.fifthItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(4)}\r\n                  label={this.fifthItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.showSecondCategory && (\r\n            <div class=\"navigation\">\r\n              <div class=\"item\">\r\n                {this.sixthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 5 ? 'active' : 'default'}\r\n                    icon={this.sixthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(5)}\r\n                    label={this.sixthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.seventhItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 6 ? 'active' : 'default'}\r\n                    icon={this.seventhItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(6)}\r\n                    label={this.seventhItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.eighthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 7 ? 'active' : 'default'}\r\n                    icon={this.eighthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(7)}\r\n                    label={this.eighthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.ninthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 8 ? 'active' : 'default'}\r\n                    icon={this.ninthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(8)}\r\n                    label={this.ninthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.tenthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 9 ? 'active' : 'default'}\r\n                    icon={this.tenthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(9)}\r\n                    label={this.tenthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.state === 'expanded' && (\r\n          <div class=\"application_name\">\r\n            <div class={`wrapper ${this.category}`}>\r\n              {this.category === 'plain_background' && (\r\n                <div class=\"application_name_pattern\">\r\n                  <img src={patternSrc} alt=\"\" />\r\n                </div>\r\n              )}\r\n              <div class={`application_icon ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n              <span class={textClass}>\r\n                <slot name=\"application_name\"></slot>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}
+{"file":"gb-sidebar.js","mappings":"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","names":["GbSidebar"],"sources":["src/components/gb-sidebar/gb-sidebar.css?tag=gb-sidebar&encapsulation=shadow","src/components/gb-sidebar/gb-sidebar.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n.sidebar_div{\r\n    transition: all 0.3s ease-in-out;\r\n    position: relative;\r\n    height: 100vh;\r\n}\r\n\r\n.pattern{\r\n    position: absolute;\r\n    top: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    overflow: hidden;\r\n    mix-blend-mode: multiply;\r\n}\r\n\r\n.pattern img{\r\n    width: 100%;\r\n    height: auto;\r\n}\r\n\r\n.sidebar_div.expanded{\r\n    display: inline-flex;\r\n    flex-direction: column;\r\n    justify-content: space-between;\r\n    width: 16.75rem;\r\n}\r\n\r\n.sidebar_div.collapsed{\r\n    display: flex;\r\n    flex-direction: column;\r\n    align-items: center;\r\n    width: 5rem;\r\n}\r\n\r\n.nav{\r\n    display: flex;\r\n    width: 100%;\r\n    flex-direction: column;\r\n    gap: var(--spacing-6);\r\n}\r\n\r\n.sidebar_header.expanded{\r\n    display: flex;\r\n    padding: var(--spacing-none) var(--spacing-4) var(--spacing-none) var(--spacing-6);\r\n    justify-content: space-between;\r\n    align-items: center;\r\n    margin-top: 1rem;\r\n}\r\n\r\n.sidebar_header.collapsed{\r\n    display: flex;\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    margin-top: 1rem;\r\n    gap: 1.5rem;\r\n}\r\n\r\n.logo_and_name.expanded{\r\n    display: flex;\r\n    justify-content: flex-start;\r\n    align-items: center;\r\n}\r\n\r\n.logo_and_name.collapsed{\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.collapse_button.collapsed{\r\n    display: flex;\r\n    justify-content: center;\r\n}\r\n\r\n.application_name{\r\n    display: flex;\r\n    padding: var(--spacing-6);\r\n}\r\n\r\n.wrapper{\r\n    display: flex;\r\n    padding: var(--spacing-4) var(--spacing-5) var(--spacing-5) var(--spacing-5);\r\n    flex-direction: column;\r\n    justify-content: center;\r\n    align-items: flex-start;\r\n    gap: var(--spacing-4);\r\n    align-self: stretch;\r\n    border-radius: var(--rounded-sm);\r\n    position: relative;\r\n    width: 13.75rem;\r\n    height: auto;\r\n    overflow: hidden;\r\n}\r\n\r\n.application_icon.plain_background path[stroke] {\r\n    stroke: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.plain_background path[fill] {\r\n    fill: var(--color-icon-information-bold, #042F59);\r\n}\r\n\r\n.application_icon.colored_background path[stroke] {\r\n    stroke: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.application_icon.colored_background path[fill] {\r\n    fill: var(--color-icon-inverse, #FFFFFF);\r\n}\r\n\r\n.application_name_pattern{\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    mix-blend-mode: multiply;\r\n}\r\n\r\n.application_name_pattern img{\r\n    width: 100%;\r\n}\r\n\r\n.wrapper{\r\n    width: 100%;\r\n}\r\n\r\n.wrapper.colored_background{\r\n    border: 1px solid rgba(255, 255, 255, 0.10);\r\n    background: rgba(0, 0, 0, 0.10);\r\n}\r\n\r\n.wrapper.plain_background{\r\n    background: var(--color-background-gray-subtlest, #F6F8FA);\r\n    border: var(--Spacing-None, 1px) solid var(--color-border-subtler, #E3E8EF);\r\n}\r\n\r\n.plain_background_color{\r\n    color: var(--color-text-information-bold, #042F59);\r\n}\r\n\r\n.colored_background_color{\r\n    color: var(--color-text-inverse, #FFFFFF);\r\n}\r\n\r\n/* Sidebar Category Styles */\r\n.sidebar_div.plain_background{\r\n    border-right: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n    background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.sidebar_div.colored_background{\r\n    background-image: linear-gradient(180deg, #064E94 0%, #02182E 100%);\r\n    background-size: cover;\r\n}\r\n\r\n.item{\r\n    display: flex;\r\n    flex-direction: column;\r\n    width: 100%;\r\n    gap: var(--spacing-1);\r\n}","import { Component, Element, h, Prop, Fragment, State, getAssetPath, Method, Event, EventEmitter } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n  tag: 'gb-sidebar',\r\n  styleUrl: 'gb-sidebar.css',\r\n  shadow: true,\r\n})\r\nexport class GbSidebar {\r\n  @Prop({ mutable: true }) state: 'expanded' | 'collapsed' = 'expanded';\r\n  @Prop() category: GeneralBackgroundCategories;\r\n  @Prop() showSecondCategory: boolean = false;\r\n  @Prop() applicationName: string = '';\r\n  @Prop() firstItemIcon: string = '';\r\n  @Prop() secondItemIcon: string = '';\r\n  @Prop() thirdItemIcon: string = '';\r\n  @Prop() fourthItemIcon: string = '';\r\n  @Prop() fifthItemIcon: string = '';\r\n  @Prop() sixthItemIcon: string = '';\r\n  @Prop() seventhItemIcon: string = '';\r\n  @Prop() eighthItemIcon: string = '';\r\n  @Prop() ninthItemIcon: string = '';\r\n  @Prop() tenthItemIcon: string = '';\r\n  @Prop() iconInstance: string = '';\r\n  @Prop() label: string = '';\r\n  @Prop() firstItemLabel: string = '';\r\n  @Prop() secondItemLabel: string = '';\r\n  @Prop() thirdItemLabel: string = '';\r\n  @Prop() fourthItemLabel: string = '';\r\n  @Prop() fifthItemLabel: string = '';\r\n  @Prop() sixthItemLabel: string = '';\r\n  @Prop() seventhItemLabel: string = '';\r\n  @Prop() eighthItemLabel: string = '';\r\n  @Prop() ninthItemLabel: string = '';\r\n  @Prop() tenthItemLabel: string = '';\r\n  @Element() el: HTMLElement;\r\n  @Prop({ mutable: true }) activeIndex: number;\r\n  @State() leadingIconSvg: string = '';\r\n  @Event() sidebarItemClicked: EventEmitter<number>;\r\n  @Event() sidebarState: EventEmitter<string>;\r\n\r\n  async loadIcon(iconName: string) {\r\n    const iconPath = getAssetPath(`${iconName}`);\r\n    const response = await fetch(iconPath);\r\n    const svg = await response.text();\r\n    this.leadingIconSvg = svg;\r\n  }\r\n\r\n  collapseSideBar() {\r\n    if (this.state === 'expanded') {\r\n      this.state = 'collapsed';\r\n    }\r\n    this.sidebarState.emit('collapsed');\r\n  }\r\n\r\n  expandSideBar() {\r\n    if (this.state === 'collapsed') {\r\n      this.state = 'expanded';\r\n    }\r\n    this.sidebarState.emit('expanded');\r\n  }\r\n\r\n  @Method()\r\n  async sideBarItemClicked(index: number) {\r\n    this.activeIndex = index;\r\n    this.sidebarItemClicked.emit(index);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    const applicationName = this.el.querySelector('[slot=\"application_name\"]');\r\n\r\n    applicationName.classList.add('text-lg-bold');\r\n  }\r\n\r\n  componentWillLoad() {\r\n    this.loadIcon(this.iconInstance);\r\n  }\r\n\r\n  render() {\r\n    const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';\r\n    const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);\r\n    const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);\r\n    const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n    const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n    return (\r\n      <div class={`sidebar_div ${this.state} ${this.category}`}>\r\n        {this.category === 'colored_background' && (\r\n          <div class=\"pattern\">\r\n            <img src={patternSrc} alt=\"\" />\r\n          </div>\r\n        )}\r\n        <div class=\"nav\">\r\n          <div class={`sidebar_header ${this.state}`}>\r\n            <div class={`logo_and_name ${this.state}`}>\r\n              {this.state === 'expanded' && <>{this.category === 'plain_background' ? <img src={blueLogoSrc} /> : <img src={whiteLogoSrc} />}</>}\r\n              {this.state === 'collapsed' && <img src={logoSrc} alt=\"\" />}\r\n            </div>\r\n            <div class={`collapse_button ${this.state}`}>\r\n              <gb-collapse-button\r\n                color={this.category === 'plain_background' ? 'gray' : 'white'}\r\n                action={this.state === 'collapsed' ? 'expand' : 'collapse'}\r\n                onClick={() => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar())}\r\n              ></gb-collapse-button>\r\n            </div>\r\n          </div>\r\n          <div class=\"navigation\">\r\n            <div class=\"item\">\r\n              <gb-side-bar-item\r\n                state={this.activeIndex === 0 ? 'active' : 'default'}\r\n                icon={this.firstItemIcon}\r\n                category={this.category}\r\n                type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                onClick={() => this.sideBarItemClicked(0)}\r\n                label={this.firstItemLabel}\r\n              ></gb-side-bar-item>\r\n              <gb-side-bar-item\r\n                state={this.activeIndex === 1 ? 'active' : 'default'}\r\n                icon={this.secondItemIcon}\r\n                category={this.category}\r\n                type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                onClick={() => this.sideBarItemClicked(1)}\r\n                label={this.secondItemLabel}\r\n              ></gb-side-bar-item>\r\n              {this.thirdItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 2 ? 'active' : 'default'}\r\n                  icon={this.thirdItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(2)}\r\n                  label={this.thirdItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n              {this.fourthItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 3 ? 'active' : 'default'}\r\n                  icon={this.fourthItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(3)}\r\n                  label={this.fourthItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n              {this.fifthItemLabel && (\r\n                <gb-side-bar-item\r\n                  state={this.activeIndex === 4 ? 'active' : 'default'}\r\n                  icon={this.fifthItemIcon}\r\n                  category={this.category}\r\n                  type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                  onClick={() => this.sideBarItemClicked(4)}\r\n                  label={this.fifthItemLabel}\r\n                ></gb-side-bar-item>\r\n              )}\r\n            </div>\r\n          </div>\r\n          {this.showSecondCategory && (\r\n            <div class=\"navigation\">\r\n              <div class=\"item\">\r\n                {this.sixthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 5 ? 'active' : 'default'}\r\n                    icon={this.sixthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(5)}\r\n                    label={this.sixthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.seventhItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 6 ? 'active' : 'default'}\r\n                    icon={this.seventhItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(6)}\r\n                    label={this.seventhItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.eighthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 7 ? 'active' : 'default'}\r\n                    icon={this.eighthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(7)}\r\n                    label={this.eighthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.ninthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 8 ? 'active' : 'default'}\r\n                    icon={this.ninthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(8)}\r\n                    label={this.ninthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n                {this.tenthItemLabel && (\r\n                  <gb-side-bar-item\r\n                    state={this.activeIndex === 9 ? 'active' : 'default'}\r\n                    icon={this.tenthItemIcon}\r\n                    category={this.category}\r\n                    type={this.state === 'collapsed' ? 'icon_only' : 'full_with_label'}\r\n                    onClick={() => this.sideBarItemClicked(9)}\r\n                    label={this.tenthItemLabel}\r\n                  ></gb-side-bar-item>\r\n                )}\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n        {this.state === 'expanded' && (\r\n          <div class=\"application_name\">\r\n            <div class={`wrapper ${this.category}`}>\r\n              {this.category === 'plain_background' && (\r\n                <div class=\"application_name_pattern\">\r\n                  <img src={patternSrc} alt=\"\" />\r\n                </div>\r\n              )}\r\n              <div class={`application_icon ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n              <span class={textClass}>\r\n                <slot name=\"application_name\"></slot>\r\n              </span>\r\n            </div>\r\n          </div>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}"],"version":3}

package/dist/components/gb-slider.js

@@ -84,7 +84,7 @@ const GbSlider$1 = /*@__PURE__*/ proxyCustomElement(class GbSlider extends H {
         return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;
     }
     render() {
-        return (h("div", { key: '4adb195a2012f9a24ae64568422bd914b69373ee', class: "slider-container", ref: el => (this.containerEl = el) }, h("div", { key: '59a8ae9a5779ec9b59a6eafeb1832d93590041a8', class: "track", ref: el => (this.trackEl = el) }), h("gb-slider-control-handle", { key: 'ed5fd7aaf74ce4ab04d3758da2c49f9bf913d375', class: "left", value: this.formatValue(this.leftValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '7311f39186fd257097f7f2ec780231010fe27d45', class: "right", value: this.formatValue(this.rightValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'right') })));
+        return (h("div", { key: '34a3752c49b41a38df0181df350f25f23e5438c4', class: "slider-container", ref: el => (this.containerEl = el) }, h("div", { key: '28b607b58396e817ee31ede7db4075461c2a60cb', class: "track", ref: el => (this.trackEl = el) }), h("gb-slider-control-handle", { key: 'db7aaf852f008a34535f4e256873e1f59d2c6636', class: "left", value: this.formatValue(this.leftValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'left') }), h("gb-slider-control-handle", { key: '6d343c3fa3bf469324c6f18a359b7f8fa32ce8e2', class: "right", value: this.formatValue(this.rightValue), type: this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null, style: { left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }, onMouseDown: e => this.handleMouseDown(e, 'right') })));
     }
     get el() { return this; }
     static get style() { return GbSliderStyle0; }

package/dist/components/gb-slider.js.map

@@ -1 +1 @@
-{"file":"gb-slider.js","mappings":"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","names":["GbSlider"],"sources":["src/components/gb-slider/gb-slider.css?tag=gb-slider&encapsulation=shadow","src/components/gb-slider/gb-slider.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  display: block;\r\n  height: 4px;\r\n  padding: 20px;\r\n  cursor: pointer;\r\n}\r\n  \r\n.slider-container {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 8px;\r\n  background-color: var(--color-border-subtler, #E3E8EF);\r\n  border-radius: var(--rounded-xs);\r\n}\r\n  \r\n.track {\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: var(--color-border-selected, #075DB2);\r\n}\r\n  \r\ngb-slider-control-handle {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: pointer;\r\n}","import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() thumbType: 'text' | 'tooltip';\r\n  @Prop() leftControl: number = 0; // Developer can set this\r\n  @Prop() rightControl: number = 100; // Developer can set this\r\n  @Prop() label: 'false' | 'bottom' | 'top_floating';\r\n  @Prop() unit: string = '';\r\n  @Prop() unitPosition: 'left' | 'right' = 'left';\r\n  @State() leftValue: number;\r\n  @State() rightValue: number;\r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement;\r\n  private containerEl: HTMLDivElement;\r\n  private isDragging: boolean = false;\r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  componentWillLoad() {\r\n    // Set the initial values for the slider\r\n    this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));\r\n    this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack();\r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb;\r\n\r\n    // Clamp the initial value of the thumb within bounds\r\n    if (thumb === 'left') {\r\n      this.leftValue = Math.min(this.leftValue, this.rightValue - 1);\r\n    } else {\r\n      this.rightValue = Math.max(this.rightValue, this.leftValue + 1);\r\n    }\r\n\r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return;\r\n\r\n    // Get the bounding box of the slider container\r\n    const boundingBox = this.containerEl.getBoundingClientRect();\r\n\r\n    // Calculate the mouse position relative to the slider container\r\n    const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;\r\n\r\n    // Snap the position to the nearest integer increment of 1\r\n    const value = Math.round(position);\r\n\r\n    // Update the appropriate thumb's value, clamping it within bounds\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb\r\n    } else {\r\n      this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  };\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false;\r\n    this.activeThumb = null;\r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  updateTrack() {\r\n    const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;\r\n    const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;\r\n\r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  formatValue(value: number): string {\r\n    return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={el => (this.containerEl = el as HTMLDivElement)}>\r\n        <div class=\"track\" ref={el => (this.trackEl = el as HTMLDivElement)}></div>\r\n\r\n        <gb-slider-control-handle\r\n          class=\"left\"\r\n          value={this.formatValue(this.leftValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n        <gb-slider-control-handle\r\n          class=\"right\"\r\n          value={this.formatValue(this.rightValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"gb-slider.js","mappings":"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","names":["GbSlider"],"sources":["src/components/gb-slider/gb-slider.css?tag=gb-slider&encapsulation=shadow","src/components/gb-slider/gb-slider.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n  display: block;\r\n  height: 4px;\r\n  padding: 20px;\r\n  cursor: pointer;\r\n}\r\n  \r\n.slider-container {\r\n  position: relative;\r\n  width: 100%;\r\n  height: 8px;\r\n  background-color: var(--color-border-subtler, #E3E8EF);\r\n  border-radius: var(--rounded-xs);\r\n}\r\n  \r\n.track {\r\n  position: absolute;\r\n  height: 100%;\r\n  background-color: var(--color-border-selected, #075DB2);\r\n}\r\n  \r\ngb-slider-control-handle {\r\n  position: absolute;\r\n  top: 50%;\r\n  transform: translate(-50%, -50%);\r\n  cursor: pointer;\r\n}","import { Component, Prop, State, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'gb-slider',\r\n  styleUrl: 'gb-slider.css',\r\n  shadow: true,\r\n})\r\nexport class GbSlider {\r\n  @Element() el: HTMLElement;\r\n  @Prop() min: number = 0;\r\n  @Prop() max: number = 100;\r\n  @Prop() thumbType: 'text' | 'tooltip';\r\n  @Prop() leftControl: number = 0; // Developer can set this\r\n  @Prop() rightControl: number = 100; // Developer can set this\r\n  @Prop() label: 'false' | 'bottom' | 'top_floating';\r\n  @Prop() unit: string = '';\r\n  @Prop() unitPosition: 'left' | 'right' = 'left';\r\n  @State() leftValue: number;\r\n  @State() rightValue: number; \r\n  @Event() thumbValueChanged: EventEmitter<{ left: number; right: number }>;\r\n\r\n  private trackEl: HTMLDivElement;\r\n  private containerEl: HTMLDivElement;\r\n  private isDragging: boolean = false;\r\n  private activeThumb: 'left' | 'right' | null = null;\r\n\r\n  componentWillLoad() {\r\n    // Set the initial values for the slider\r\n    this.leftValue = Math.max(this.min, Math.min(this.leftControl, this.max));\r\n    this.rightValue = Math.max(this.min, Math.min(this.rightControl, this.max));\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.trackEl = this.el.shadowRoot.querySelector('.track');\r\n    this.containerEl = this.el.shadowRoot.querySelector('.slider-container');\r\n    this.updateTrack();\r\n  }\r\n\r\n  handleMouseDown = (_e: MouseEvent, thumb: 'left' | 'right') => {\r\n    this.isDragging = true;\r\n    this.activeThumb = thumb;\r\n\r\n    // Clamp the initial value of the thumb within bounds\r\n    if (thumb === 'left') {\r\n      this.leftValue = Math.min(this.leftValue, this.rightValue - 1);\r\n    } else {\r\n      this.rightValue = Math.max(this.rightValue, this.leftValue + 1);\r\n    }\r\n\r\n    document.addEventListener('mousemove', this.handleMouseMove);\r\n    document.addEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  handleMouseMove = (e: MouseEvent) => {\r\n    if (!this.isDragging) return;\r\n\r\n    // Get the bounding box of the slider container\r\n    const boundingBox = this.containerEl.getBoundingClientRect();\r\n\r\n    // Calculate the mouse position relative to the slider container\r\n    const position = ((e.clientX - boundingBox.left) / boundingBox.width) * (this.max - this.min) + this.min;\r\n\r\n    // Snap the position to the nearest integer increment of 1\r\n    const value = Math.round(position);\r\n\r\n    // Update the appropriate thumb's value, clamping it within bounds\r\n    if (this.activeThumb === 'left') {\r\n      this.leftValue = Math.max(this.min, Math.min(value, this.rightValue - 1)); // Ensure it doesn't exceed right thumb\r\n    } else {\r\n      this.rightValue = Math.min(this.max, Math.max(value, this.leftValue + 1)); // Ensure it doesn't go below left thumb\r\n    }\r\n\r\n    // Update the track's appearance and emit the new values\r\n    this.updateTrack();\r\n    this.thumbValueChanged.emit({ left: this.leftValue, right: this.rightValue });\r\n  };\r\n\r\n  handleMouseUp = () => {\r\n    this.isDragging = false;\r\n    this.activeThumb = null;\r\n    document.removeEventListener('mousemove', this.handleMouseMove);\r\n    document.removeEventListener('mouseup', this.handleMouseUp);\r\n  };\r\n\r\n  updateTrack() {\r\n    const leftPos = ((this.leftValue - this.min) / (this.max - this.min)) * 100;\r\n    const rightPos = ((this.rightValue - this.min) / (this.max - this.min)) * 100;\r\n\r\n    // Update the track's left position and width to match the thumb positions.\r\n    this.trackEl.style.left = `${leftPos}%`;\r\n    this.trackEl.style.width = `${rightPos - leftPos}%`;\r\n  }\r\n\r\n  formatValue(value: number): string {\r\n    return this.unitPosition === 'left' ? `${this.unit}${value}` : `${value}${this.unit}`;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class=\"slider-container\" ref={el => (this.containerEl = el as HTMLDivElement)}>\r\n        <div class=\"track\" ref={el => (this.trackEl = el as HTMLDivElement)}></div>\r\n\r\n        <gb-slider-control-handle\r\n          class=\"left\"\r\n          value={this.formatValue(this.leftValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.leftValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'left')}\r\n        ></gb-slider-control-handle>\r\n        <gb-slider-control-handle\r\n          class=\"right\"\r\n          value={this.formatValue(this.rightValue)}\r\n          type={this.label === 'false' ? '' : this.label === 'bottom' ? 'text' : this.label === 'top_floating' ? 'tooltip' : null}\r\n          style={{ left: `${((this.rightValue - this.min) / (this.max - this.min)) * 100}%` }}\r\n          onMouseDown={e => this.handleMouseDown(e, 'right')}\r\n        ></gb-slider-control-handle>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/components/gb-tag.js

@@ -1,4 +1,4 @@
-import { G as GbTag$1, d as defineCustomElement$1 } from './p-29ca4063.js';
+import { G as GbTag$1, d as defineCustomElement$1 } from './p-bdc413ec.js';
 
 const GbTag = GbTag$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/gb-toggle.js

@@ -11,6 +11,7 @@ const GbToggle$1 = /*@__PURE__*/ proxyCustomElement(class GbToggle extends H {
         this.__attachShadow();
         this.size = undefined;
         this.state = undefined;
+        this.text = false;
         this.supportingText = false;
         this.pressed = false;
     }
@@ -41,13 +42,14 @@ const GbToggle$1 = /*@__PURE__*/ proxyCustomElement(class GbToggle extends H {
         }
     }
     render() {
-        return (h("div", { key: 'a45b0262d39fd73194be1adb4189cad1d2d3953a', class: `toggle_div ${this.size}` }, h("div", { key: '27866b6080c7c45d448bbde9d3a05015e12b8ac2', class: "toggle_base" }, h("gb-toggle-base", { key: '18240a062dc2498f674afff8cb8659b65331f3d7', size: this.size, state: this.state, pressed: this.pressed })), h("div", { key: 'f62a282bde946246aef6b874bb826d38ca8a60a3', class: "text" }, h("slot", { key: '27bc90524cec3a348b46b195b5fd34fb071cc076', name: "main_text" }), this.supportingText && (h("slot", { key: '830636eed9d76477556ccae7d01c9ad0618e36f9', name: "supporting_text" })))));
+        return (h("div", { key: 'a29118d6e08477273156e03378bed7d1fbe5356f', class: `toggle_div ${this.size}` }, h("div", { key: '006867fc0818ea3b66fad0309ed85053ad3131e2', class: "toggle_base" }, h("gb-toggle-base", { key: '3593ae37ba2a69c63f9f6e4f00265dfe489bda28', size: this.size, state: this.state, pressed: this.pressed })), this.text && (h("div", { key: '8b6d5df3e318d0d06f141b77770bafa585523721', class: "text" }, h("slot", { key: '4ce467de7d71e247dd0569f5303bbb3f8928a500', name: "main_text" }), this.supportingText && (h("slot", { key: 'e72f956ad1f5e26ddef145b3df97533a67d007e7', name: "supporting_text" }))))));
     }
     get el() { return this; }
     static get style() { return GbToggleStyle0; }
 }, [1, "gb-toggle", {
         "size": [1],
         "state": [1],
+        "text": [4],
         "supportingText": [4, "supporting-text"],
         "pressed": [4]
     }]);

package/dist/components/gb-toggle.js.map

@@ -1 +1 @@
-{"file":"gb-toggle.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,0TAA0T,CAAC;AAC/U,uBAAe,WAAW;;MCQbA,UAAQ;;;;;;;8BAGiB,KAAK;uBACZ,KAAK;;IAGhC,gBAAgB;QACZ,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;YACpC,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;SACvC;KACJ;IAED,sBAAsB;QAClB,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;YACrC,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;SACxC;KACJ;IAED,gBAAgB;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAG,YAAY,EAAC;YACZ,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;SACvD;QAED,IAAG,kBAAkB,EAAE;YACnB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;SACnE;QAED,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE;YACrB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACzC;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,IACjC,4DAAK,KAAK,EAAC,aAAa,IACpB,uEACA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACH,CAChB,EACN,4DAAK,KAAK,EAAC,MAAM,IACb,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,cAAc,KAChB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACvC,CACC,CACJ,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbToggle"],"sources":["src/components/gb-toggle/gb-toggle.css?tag=gb-toggle&encapsulation=shadow","src/components/gb-toggle/gb-toggle.tsx"],"sourcesContent":[".toggle_div{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    width: fit-content;\r\n}\r\n\r\n.toggle_div.sm{\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.toggle_div.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.div_centered{\r\n    justify-content: center;\r\n    padding-bottom: 0.2rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: var(--color-text, #4B5565);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle',\r\n    styleUrl: 'gb-toggle.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggle {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() pressed: boolean = false;\r\n    @Element() el: HTMLElement;\r\n\r\n    getMainTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return `text-sm-medium`;\r\n            case 'md' : return `text-md-medium`;\r\n        }\r\n    }\r\n\r\n    getSupportingTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return 'text-sm-regular';\r\n            case 'md' : return 'text-md-regular';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const mainTextSlot = this.el.querySelector('[slot=\"main_text\"]');\r\n        const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n        const mainDiv = this.el.querySelector('.text');\r\n\r\n        if(mainTextSlot){\r\n            mainTextSlot.classList.add(this.getMainTextClass());\r\n        }\r\n\r\n        if(supportingTextSlot) {\r\n            supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n        }\r\n\r\n        if(!this.supportingText) {\r\n            mainDiv.classList.add('div_centered');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`toggle_div ${this.size}`}>\r\n                <div class=\"toggle_base\">\r\n                    <gb-toggle-base \r\n                    size={this.size}\r\n                    state={this.state}\r\n                    pressed={this.pressed}\r\n                    ></gb-toggle-base>\r\n                </div>\r\n                <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <slot name=\"supporting_text\"></slot>\r\n                    )}\r\n                </div>\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}
+{"file":"gb-toggle.js","mappings":";;;AAAA,MAAM,WAAW,GAAG,0TAA0T,CAAC;AAC/U,uBAAe,WAAW;;MCQbA,UAAQ;;;;;;;oBAGO,KAAK;8BACK,KAAK;uBACZ,KAAK;;IAGhC,gBAAgB;QACZ,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;YACpC,KAAK,IAAK,EAAE,OAAO,gBAAgB,CAAC;SACvC;KACJ;IAED,sBAAsB;QAClB,QAAO,IAAI,CAAC,IAAI;YACZ,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;YACrC,KAAK,IAAK,EAAE,OAAO,iBAAiB,CAAC;SACxC;KACJ;IAED,gBAAgB;QACZ,MAAM,YAAY,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,oBAAoB,CAAC,CAAC;QACjE,MAAM,kBAAkB,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,0BAA0B,CAAC,CAAC;QAC7E,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;QAE/C,IAAG,YAAY,EAAC;YACZ,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,gBAAgB,EAAE,CAAC,CAAC;SACvD;QAED,IAAG,kBAAkB,EAAE;YACnB,kBAAkB,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,sBAAsB,EAAE,CAAC,CAAC;SACnE;QAED,IAAG,CAAC,IAAI,CAAC,cAAc,EAAE;YACrB,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,cAAc,CAAC,CAAC;SACzC;KACJ;IAED,MAAM;QACF,QACI,4DAAK,KAAK,EAAE,cAAc,IAAI,CAAC,IAAI,EAAE,IACjC,4DAAK,KAAK,EAAC,aAAa,IACpB,uEACA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,GACH,CAChB,EACL,IAAI,CAAC,IAAI,KACN,4DAAK,KAAK,EAAC,MAAM,IACjB,6DAAM,IAAI,EAAC,WAAW,GAAQ,EAC7B,IAAI,CAAC,cAAc,KAChB,6DAAM,IAAI,EAAC,iBAAiB,GAAQ,CACvC,CACC,CACL,CACC,EACT;KACJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbToggle"],"sources":["src/components/gb-toggle/gb-toggle.css?tag=gb-toggle&encapsulation=shadow","src/components/gb-toggle/gb-toggle.tsx"],"sourcesContent":[".toggle_div{\r\n    display: flex;\r\n    justify-content: space-between;\r\n    width: fit-content;\r\n}\r\n\r\n.toggle_div.sm{\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.toggle_div.md{\r\n    gap: var(--spacing-3);\r\n}\r\n\r\n.text{\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: var(--spacing-2);\r\n}\r\n\r\n.div_centered{\r\n    justify-content: center;\r\n    padding-bottom: 0.2rem;\r\n}\r\n\r\n::slotted(p){\r\n    color: var(--color-text, #4B5565);\r\n}","import { Component, Element, h, Prop } from \"@stencil/core\";\r\nimport { GeneralSizes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n    tag: 'gb-toggle',\r\n    styleUrl: 'gb-toggle.css',\r\n    shadow: true\r\n})\r\n\r\nexport class GbToggle {\r\n    @Prop() size: GeneralSizes;\r\n    @Prop() state: StateEnum;\r\n    @Prop() text: boolean = false;\r\n    @Prop() supportingText: boolean = false;\r\n    @Prop() pressed: boolean = false;\r\n    @Element() el: HTMLElement;\r\n\r\n    getMainTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return `text-sm-medium`;\r\n            case 'md' : return `text-md-medium`;\r\n        }\r\n    }\r\n\r\n    getSupportingTextClass() {\r\n        switch(this.size) {\r\n            case 'sm' : return 'text-sm-regular';\r\n            case 'md' : return 'text-md-regular';\r\n        }\r\n    }\r\n\r\n    componentDidLoad() {\r\n        const mainTextSlot = this.el.querySelector('[slot=\"main_text\"]');\r\n        const supportingTextSlot = this.el.querySelector('[slot=\"supporting_text\"]');\r\n        const mainDiv = this.el.querySelector('.text');\r\n\r\n        if(mainTextSlot){\r\n            mainTextSlot.classList.add(this.getMainTextClass());\r\n        }\r\n\r\n        if(supportingTextSlot) {\r\n            supportingTextSlot.classList.add(this.getSupportingTextClass());\r\n        }\r\n\r\n        if(!this.supportingText) {\r\n            mainDiv.classList.add('div_centered');\r\n        }\r\n    }\r\n\r\n    render() {\r\n        return (\r\n            <div class={`toggle_div ${this.size}`}>\r\n                <div class=\"toggle_base\">\r\n                    <gb-toggle-base \r\n                    size={this.size}\r\n                    state={this.state}\r\n                    pressed={this.pressed}\r\n                    ></gb-toggle-base>\r\n                </div>\r\n                {this.text && (\r\n                    <div class=\"text\">\r\n                    <slot name=\"main_text\"></slot>\r\n                    {this.supportingText && (\r\n                        <slot name=\"supporting_text\"></slot>\r\n                    )}\r\n                </div>\r\n                )}\r\n            </div>\r\n        )\r\n    }\r\n}"],"version":3}

package/dist/components/gb-wysiwyg-toolbar.js

@@ -1,4 +1,4 @@
-import { G as GbWysiwygToolbar$1, d as defineCustomElement$1 } from './p-a09c8618.js';
+import { G as GbWysiwygToolbar$1, d as defineCustomElement$1 } from './p-6aefb26b.js';
 
 const GbWysiwygToolbar = GbWysiwygToolbar$1;
 const defineCustomElement = defineCustomElement$1;