globuswebcomponents 1.7.7 → 1.7.8

package/dist/collection/components/gb-simple-side-bar-item/gb-simple-side-bar-item.css

@@ -2658,177 +2658,183 @@
     margin-top: -0.416em;
 }
 
-:host{
-    position: relative;
+:host {
+  position: relative;
 }
 
-.side_bar_item_container{
-    padding: 0 var(--spacing-4);
+.side_bar_item_container {
+  padding: 0 var(--spacing-4);
 }
 
-.nav_item_base.icon_only{
-    width: fit-content;
+.nav_item_base.icon_only {
+  width: fit-content;
 }
 
-.nav_item_base{
-    display: flex;
-    padding: var(--spacing-2) var(--spacing-3);
-    justify-content: space-between;
-    align-items: center;
-    gap: 0.5rem;
-    align-self: stretch;
-    border-radius: var(--rounded-sm);
-    cursor: pointer;
-    position: relative;
-    flex-grow: 1;
+.nav_item_base {
+  display: flex;
+  padding: var(--spacing-2) var(--spacing-3);
+  justify-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  align-self: stretch;
+  border-radius: var(--rounded-sm);
+  cursor: pointer;
+  position: relative;
+  flex-grow: 1;
 }
 
-.content{
-    display: flex;
-    align-items: center;
-    gap: 0.75rem;
-    flex-grow: 1;
+.content {
+  display: flex;
+  align-items: center;
+  gap: 0.75rem;
+  flex-grow: 1;
+  max-width: 100%;
 }
 
-.bar{
-    position: absolute;
-    left: 0rem;
-    width: 0.25rem;
-    height: 1.25rem;
+.bar {
+  position: absolute;
+  left: 0rem;
+  width: 0.25rem;
+  height: 1.25rem;
 }
 
-.icon{
-    display: flex;
-    align-items: center;
-    width: 1.5rem;
-    height: 1.5rem;
+.icon {
+  display: flex;
+  align-items: center;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 
-.label_text{
-    width: 10rem;
-    max-width: 100%;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
+.label_text {
+  max-width: 100%;
+  overflow-x: hidden;
+  overflow-y: none;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  scrollbar-width: none;
+}
+
+.label_text::-webkit-scrollbar {
+  display: none;
 }
 
 /* State and Category Styles */
 .nav_item_base.plain_background.default,
-.nav_item_base.colored_background.default{
-    background: transparent;
+.nav_item_base.colored_background.default {
+  background: transparent;
 }
 
-.nav_item_base.plain_background.active{
-    background: var(--color-background-information-subtler, #C8E0F9);
+.nav_item_base.plain_background.active {
+  background: var(--color-background-information-subtler, #c8e0f9);
 }
 
-.nav_item_base.default.plain_background:hover{
-    background: var(--color-background-gray-subtler, #EEF2F6);
+.nav_item_base.default.plain_background:hover {
+  background: var(--color-background-gray-subtler, #eef2f6);
 }
 
-.nav_item_base.colored_background.active{
-    background: var(--color-background-information-bold, #042F59);
+.nav_item_base.colored_background.active {
+  background: var(--color-background-information-bold, #042f59);
 }
 
-.nav_item_base.default.colored_background:hover{
-    background: var(--color-blanket, rgba(33, 44, 101, 0.4));
+.nav_item_base.default.colored_background:hover {
+  background: var(--color-blanket, rgba(33, 44, 101, 0.4));
 }
 
-.label_text.plain_background.default{
-    color: var(--color-text, #4B5565);
+.label_text.plain_background.default {
+  color: var(--color-text, #4b5565);
 }
 
-.label_text.plain_background.active{
-    color: var(--color-text-information-bold, #042F59);
+.label_text.plain_background.active {
+  color: var(--color-text-information-bold, #042f59);
 }
 
-.label_text.colored_background{
-    color: var(--color-text-inverse, #FFFFFF);
+.label_text.colored_background {
+  color: var(--color-text-inverse, #ffffff);
 }
 
 /* Icon Color Styles */
 .icon.plain_background path[stroke] {
-    stroke: var(--color-icon, #4B5565);
+  stroke: var(--color-icon, #4b5565);
 }
 
 .icon.plain_background.active path[stroke] {
-    stroke: var(--color-icon-information-bold, #042F59);
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.plain_background.active path[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.plain_background path#Icon[fill] {
-    fill: var(--color-icon, #4B5565);
+  fill: var(--color-icon, #4b5565);
 }
 
 .icon.plain_background.active path#Icon[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.plain_background.active path#Accent[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.plain_background circle[stroke] {
-    stroke: var(--color-icon, #4B5565);
+  stroke: var(--color-icon, #4b5565);
 }
 
 .icon.plain_background.active circle[fill] {
-    fill: var(--color-icon-information-bold, #042F59);
+  fill: var(--color-icon-information-bold, #042f59);
 }
 
 .icon.colored_background path[stroke] {
-    stroke: var(--color-icon-inverse, #FFFFFF);
+  stroke: var(--color-icon-inverse, #ffffff);
 }
 
 .icon.colored_background.active path[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--color-icon-inverse, #ffffff);
 }
 
 .icon.colored_background path#Icon[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--color-icon-inverse, #ffffff);
 }
 
 .icon.colored_background.active path#Accent[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--color-icon-inverse, #ffffff);
 }
 
 .icon.colored_background circle[stroke] {
-    stroke: var(--color-icon-inverse, #FFFFFF);
+  stroke: var(--color-icon-inverse, #ffffff);
 }
 
 .icon.colored_background.active circle[fill] {
-    fill: var(--color-icon-inverse, #FFFFFF);
+  fill: var(--color-icon-inverse, #ffffff);
 }
 
 .icon.plain_background.default path[fill],
 .icon.colored_background.default path[fill],
 .icon.plain_background.default circle[fill],
 .icon.colored_background.default circle[fill] {
-    fill: transparent;
+  fill: transparent;
 }
 
 /* Arrow Color Styles */
-.arrow.default.plain_background path{
-    stroke: var(--color-icon, #4B5565);
+.arrow.default.plain_background path {
+  stroke: var(--color-icon, #4b5565);
 }
 
-.arrow.active.plain_background path{
-    stroke: var(--color-icon-information-bold, #042F59);
+.arrow.active.plain_background path {
+  stroke: var(--color-icon-information-bold, #042f59);
 }
 
-.arrow.default.colored_background path{
-    stroke: var(--color-icon-inverse, #FFFFFF);
+.arrow.default.colored_background path {
+  stroke: var(--color-icon-inverse, #ffffff);
 }
 
-.arrow.active.colored_background path{
-    stroke: var(--color-icon-inverse, #FFFFFF);
+.arrow.active.colored_background path {
+  stroke: var(--color-icon-inverse, #ffffff);
 }
 
-.tooltip{
-    position: absolute;
-    top: 0.2rem;
-    left: 4.3rem;
-}
+.tooltip {
+  position: absolute;
+  top: 0.2rem;
+  left: 4.3rem;
+}

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js

@@ -8,10 +8,10 @@ export class GbThemeTab {
         this.themetabClicked.emit(mode);
     }
     render() {
-        const systemIconSrc = getAssetPath(`assets/computer.svg`);
+        const systemIconSrc = getAssetPath(`assets/laptop.svg`);
         const sunSrc = getAssetPath(`assets/sun-02.svg`);
         const moonSrc = getAssetPath(`assets/moon-02.svg`);
-        return (h("div", { key: 'b006e9345f20557ae754cd68784c03262de09493', class: `theme_tab_div` }, h("div", { key: '24d373000fd21d5ec1664483f327ca6039176692', class: "tab" }, h("gb-icon-button-base", { key: '83bfcdc240ff0c4b102218780c00f3f343b96c08', current: this.currentActiveTab === 'System' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('System') })), h("div", { key: 'b15ad0722f8297dfa36337c13f96a460f44e6e06', class: "tab" }, h("gb-icon-button-base", { key: '491e23da5589232341cf149d55f2adb90455f466', current: this.currentActiveTab === 'Light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('Light') })), h("div", { key: 'bb9c651aa194e436f9c2d95cadaa88cfb7b3c186', class: "tab" }, h("gb-icon-button-base", { key: 'daae6cfddade0c592329bc783954f4202c385dc3', current: this.currentActiveTab === 'Dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('Dark') }))));
+        return (h("div", { key: 'c465268b8b4686f90799c1f3a834e3854eaf07b5', class: `theme_tab_div` }, h("div", { key: 'be72bf0bdf377b2043c8a6f04ba7a0ebda4c18a6', class: "tab" }, h("gb-icon-button-base", { key: '9755712260476f684d36954b52c52bbb367642e7', current: this.currentActiveTab === 'System' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.tabClicked('System') })), h("div", { key: 'aea9468cb3db4c4d7f8df6289bb7c94cb9ff3a6f', class: "tab" }, h("gb-icon-button-base", { key: 'ad4ee52a93dab2523453976385989c5246766fd5', current: this.currentActiveTab === 'Light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.tabClicked('Light') })), h("div", { key: 'b9bc27f03c2c2adf97a130147aca24ce6cb1330e', class: "tab" }, h("gb-icon-button-base", { key: '0dcdc323bf40977989411479ea96ecdb83bf1069', current: this.currentActiveTab === 'Dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.tabClicked('Dark') }))));
     }
     static get is() { return "gb-theme-tab"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/gb-theme-tab/gb-theme-tab.js.map

@@ -1 +1 @@
-{"version":3,"file":"gb-theme-tab.js","sourceRoot":"","sources":["../../../src/components/gb-theme-tab/gb-theme-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7F,MAAM,OAAO,UAAU;IALvB;QAQW,qBAAgB,GAAW,QAAQ,CAAC;KAyC9C;IAvCC,UAAU,CAAC,IAAY;QACrB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,YAAY,CAAC,qBAAqB,CAAC,CAAC;QAC1D,MAAM,MAAM,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;QAEnD,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACxD,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GACjB,CACnB,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-theme-tab',\r\n  styleUrl: 'gb-theme-tab.css',\r\n  shadow: true,\r\n})\r\nexport class GbThemeTab {\r\n  @Prop() theme: ThemeTypes;\r\n  @Event() themetabClicked: EventEmitter<string>;\r\n  @State() currentActiveTab: string = 'System';\r\n\r\n  tabClicked(mode: string) {\r\n    this.currentActiveTab = mode;\r\n    this.themetabClicked.emit(mode);\r\n  }\r\n\r\n  render() {\r\n    const systemIconSrc = getAssetPath(`assets/computer.svg`);\r\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\r\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\r\n\r\n    return (\r\n      <div class={`theme_tab_div`}>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'System' ? true : false}\r\n            icon={systemIconSrc}\r\n            label=\"System\"\r\n            onClick={() => this.tabClicked('System')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'Light' ? true : false}\r\n            icon={sunSrc}\r\n            label=\"Light\"\r\n            onClick={() => this.tabClicked('Light')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'Dark' ? true : false}\r\n            icon={moonSrc}\r\n            label=\"Dark\"\r\n            onClick={() => this.tabClicked('Dark')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"gb-theme-tab.js","sourceRoot":"","sources":["../../../src/components/gb-theme-tab/gb-theme-tab.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAQ7F,MAAM,OAAO,UAAU;IALvB;QAQW,qBAAgB,GAAW,QAAQ,CAAC;KAyC9C;IAvCC,UAAU,CAAC,IAAY;QACrB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAClC,CAAC;IAED,MAAM;QACJ,MAAM,aAAa,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACxD,MAAM,MAAM,GAAG,YAAY,CAAC,mBAAmB,CAAC,CAAC;QACjD,MAAM,OAAO,GAAG,YAAY,CAAC,oBAAoB,CAAC,CAAC;QAEnD,OAAO,CACL,4DAAK,KAAK,EAAE,eAAe;YACzB,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EAC1D,IAAI,EAAE,aAAa,EACnB,KAAK,EAAC,QAAQ,EACd,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,QAAQ,CAAC,GACnB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,OAAO,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACzD,IAAI,EAAE,MAAM,EACZ,KAAK,EAAC,OAAO,EACb,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,GAClB,CACnB;YACN,4DAAK,KAAK,EAAC,KAAK;gBACd,4EACE,OAAO,EAAE,IAAI,CAAC,gBAAgB,KAAK,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,EACxD,IAAI,EAAE,OAAO,EACb,KAAK,EAAC,MAAM,EACZ,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,GACjB,CACnB,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, Prop, State, getAssetPath, h } from '@stencil/core';\r\nimport { ThemeTypes } from '../../models/reusableModels';\r\n\r\n@Component({\r\n  tag: 'gb-theme-tab',\r\n  styleUrl: 'gb-theme-tab.css',\r\n  shadow: true,\r\n})\r\nexport class GbThemeTab {\r\n  @Prop() theme: ThemeTypes;\r\n  @Event() themetabClicked: EventEmitter<string>;\r\n  @State() currentActiveTab: string = 'System';\r\n\r\n  tabClicked(mode: string) {\r\n    this.currentActiveTab = mode;\r\n    this.themetabClicked.emit(mode);\r\n  }\r\n\r\n  render() {\r\n    const systemIconSrc = getAssetPath(`assets/laptop.svg`);\r\n    const sunSrc = getAssetPath(`assets/sun-02.svg`);\r\n    const moonSrc = getAssetPath(`assets/moon-02.svg`);\r\n\r\n    return (\r\n      <div class={`theme_tab_div`}>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'System' ? true : false}\r\n            icon={systemIconSrc}\r\n            label=\"System\"\r\n            onClick={() => this.tabClicked('System')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'Light' ? true : false}\r\n            icon={sunSrc}\r\n            label=\"Light\"\r\n            onClick={() => this.tabClicked('Light')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base\r\n            current={this.currentActiveTab === 'Dark' ? true : false}\r\n            icon={moonSrc}\r\n            label=\"Dark\"\r\n            onClick={() => this.tabClicked('Dark')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}