globuswebcomponents 1.7.7 → 1.7.9

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

@@ -1,17 +1,46 @@
 import { getAssetPath, h } from "@stencil/core";
 export class GbThemeTab {
     constructor() {
-        this.currentActiveTab = 'System';
+        this.currentActiveTab = 'system';
+        this.handleSystemThemeChange = (e) => {
+            if (this.theme === 'system') {
+                this.setTheme(e.matches ? 'dark' : 'light');
+            }
+        };
+    }
+    componentWillLoad() {
+        const savedTheme = localStorage.getItem('preferred-theme');
+        this.theme = savedTheme || 'system';
+        this.applyTheme(this.theme);
+        if (this.theme === 'system') {
+            const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+            mediaQuery.addEventListener('change', this.handleSystemThemeChange);
+        }
     }
     tabClicked(mode) {
         this.currentActiveTab = mode;
-        this.themetabClicked.emit(mode);
+        // this.themetabClicked.emit(mode);
+    }
+    applyTheme(theme) {
+        let finalTheme = theme;
+        if (theme === 'system') {
+            finalTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+        }
+        document.documentElement.setAttribute('data-theme', finalTheme);
+    }
+    setTheme(theme) {
+        this.currentActiveTab = theme;
+        this.theme = theme;
+        localStorage.setItem('preferred-theme', theme);
+    }
+    getSystemTheme() {
+        return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
     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: '8187c214ddd6b3b90ae5627d1cbd068c9e001e24', class: `theme_tab_div` }, h("div", { key: 'a350b02ccc20fa3f618db3695529f6120c8a9846', class: "tab" }, h("gb-icon-button-base", { key: '3da749b2493f3aa2482703f266860b733205b831', current: this.currentActiveTab === 'system' ? true : false, icon: systemIconSrc, label: "System", onClick: () => this.setTheme('system') })), h("div", { key: '1c13963cce724a824ae7ff4c59d62dd2b717771e', class: "tab" }, h("gb-icon-button-base", { key: '493fb5143905efc7c440a2fac25a57de942bfd6f', current: this.currentActiveTab === 'light' ? true : false, icon: sunSrc, label: "Light", onClick: () => this.setTheme('light') })), h("div", { key: 'ae7fd2f339f10db6808668c2544666f9fa8d1c03', class: "tab" }, h("gb-icon-button-base", { key: 'cd7641bb38e2a151650edadf9d69ede0488abc10', current: this.currentActiveTab === 'dark' ? true : false, icon: moonSrc, label: "Dark", onClick: () => this.setTheme('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":"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","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  componentWillLoad() {\r\n    const savedTheme = localStorage.getItem('preferred-theme') as 'light' | 'dark' | 'system';\r\n    this.theme = savedTheme || 'system';\r\n\r\n    this.applyTheme(this.theme);\r\n\r\n    if (this.theme === 'system') {\r\n      const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');\r\n      mediaQuery.addEventListener('change', this.handleSystemThemeChange);\r\n    }\r\n  }\r\n\r\n  tabClicked(mode: string) {\r\n    this.currentActiveTab = mode;\r\n    // this.themetabClicked.emit(mode);\r\n  }\r\n\r\n  applyTheme(theme: 'light' | 'dark' | 'system') {\r\n    let finalTheme = theme;\r\n    if (theme === 'system') {\r\n      finalTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\r\n    }\r\n\r\n    document.documentElement.setAttribute('data-theme', finalTheme);\r\n  }\r\n\r\n  setTheme(theme: 'light' | 'dark' | 'system') {\r\n    this.currentActiveTab = theme;\r\n    this.theme = theme;\r\n    localStorage.setItem('preferred-theme', theme);\r\n  }\r\n\r\n  getSystemTheme(): 'light' | 'dark' {\r\n    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\r\n  }\r\n\r\n  handleSystemThemeChange = (e: MediaQueryListEvent) => {\r\n    if (this.theme === 'system') {\r\n      this.setTheme(e.matches ? 'dark' : 'light');\r\n    }\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.setTheme('system')}\r\n          ></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base current={this.currentActiveTab === 'light' ? true : false} icon={sunSrc} label=\"Light\" onClick={() => this.setTheme('light')}></gb-icon-button-base>\r\n        </div>\r\n        <div class=\"tab\">\r\n          <gb-icon-button-base current={this.currentActiveTab === 'dark' ? true : false} icon={moonSrc} label=\"Dark\" onClick={() => this.setTheme('dark')}></gb-icon-button-base>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}