globuswebcomponents 2.3.0 → 2.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/gb-avatar_28.cjs.entry.js +2 -2
- package/dist/cjs/gb-avatar_28.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-simple-side-bar-item/gb-simple-side-bar-item.js +2 -2
- package/dist/collection/components/gb-simple-side-bar-item/gb-simple-side-bar-item.js.map +1 -1
- package/dist/components/gb-sidebar.js +1 -1
- package/dist/components/gb-simple-side-bar-item.js +1 -1
- package/dist/components/{p-CeHRpUkW.js → p-Ds0r6ywI.js} +4 -4
- package/dist/components/{p-CeHRpUkW.js.map → p-Ds0r6ywI.js.map} +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/gb-avatar_28.entry.js +2 -2
- package/dist/esm/gb-avatar_28.entry.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-94aa3ed3.entry.js → p-ae19f850.entry.js} +2 -2
- package/dist/globuscomponents/{p-94aa3ed3.entry.js.map → p-ae19f850.entry.js.map} +1 -1
- package/dist/types/components/gb-simple-side-bar-item/gb-simple-side-bar-item.d.ts +1 -1
- package/package.json +1 -1
|
@@ -26,7 +26,7 @@ export class GbSimpleSideBarItem {
|
|
|
26
26
|
// console.log(modifiedSvg)
|
|
27
27
|
this.leadingIconSvg = modifiedSvg;
|
|
28
28
|
}
|
|
29
|
-
updateSidebarIcon(
|
|
29
|
+
updateSidebarIcon(newValue, _oldValue) {
|
|
30
30
|
this.internalIcon = newValue;
|
|
31
31
|
}
|
|
32
32
|
componentWillLoad() {
|
|
@@ -39,7 +39,7 @@ export class GbSimpleSideBarItem {
|
|
|
39
39
|
render() {
|
|
40
40
|
const redBarSrc = getAssetPath(`assets/bar.svg`);
|
|
41
41
|
const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);
|
|
42
|
-
return (h("div", { key: '
|
|
42
|
+
return (h("div", { key: '1743031cdb195c32c127b075a5de57012d5c0ba7', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'f21b5df747df2e9cc19a71a2ca1d7392e51dd05a', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '1be2c554e310ebe13b29e2c1315a223b53e697be', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'f015ec9d23db1647f067f1cb884ec8a78abb92c0', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'c26cce22b2fbce9b926e0ebbe61ed292f1858ae2', class: "content" }, h("div", { key: 'e729d602d82d709e2573886cc9e09590c2c628be', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '7dfb46f0482de2db478245c010d1f1b5aa1258dc', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '4d1b68587758eb152eb88e26743e4d54544ad5ad', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '0ca4597aec57aeec4d945c77af1cd22a31950bb9' }, "10"))), this.showArrow && (h("svg", { key: '06f402e530194d6bd9d59c117e0e3f70d18aefbc', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: '5baa5a1992e0bea78e10f134039ce83f6615b8ea', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '608cc8e4db46f9c2eae367270c06824ba0f6d30f', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '1123d0046e145bce3f2ef17ef0b7aeb63928e818', slot: "label" }, this.label)))));
|
|
43
43
|
}
|
|
44
44
|
static get is() { return "gb-simple-side-bar-item"; }
|
|
45
45
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-simple-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,KAAK,EAAE,KAAK,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"gb-simple-side-bar-item.js","sourceRoot":"","sources":["../../../src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element, Watch } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-simple-side-bar-item',\r\n styleUrl: 'gb-simple-side-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbSimpleSideBarItem {\r\n @Prop() state: 'default' | 'active';\r\n @Prop() type: 'full_with_label' | 'icon_only';\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() showArrow: boolean = false;\r\n @Prop() showBadge: boolean = false;\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @State() leadingIconSvg: string = '';\r\n @State() internalIcon: string = '';\r\n @Event() sideBarItemClicked: EventEmitter<void>;\r\n @Element() el: HTMLElement;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n @Watch('icon')\r\n updateSidebarIcon(newValue: string, _oldValue: string) {\r\n this.internalIcon = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n\r\n this.internalIcon = this.icon;\r\n }\r\n\r\n onSideBarItemClicked() {\r\n this.sideBarItemClicked.emit();\r\n }\r\n\r\n render() {\r\n const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\r\n return (\r\n <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n <div class=\"content\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n {this.type === 'full_with_label' && (\r\n <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n )}\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <>\r\n {this.showBadge && (\r\n <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n <p>10</p>\r\n </gb-badge>\r\n )}\r\n {this.showArrow && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n <path\r\n d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n stroke=\"#212C65\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"]}
|
|
@@ -6,7 +6,7 @@ import { d as defineCustomElement$8 } from './p-BFbIeNBl.js';
|
|
|
6
6
|
import { d as defineCustomElement$7 } from './p-1AFRIBxC.js';
|
|
7
7
|
import { d as defineCustomElement$6 } from './p-BOvzczgE.js';
|
|
8
8
|
import { d as defineCustomElement$5 } from './p-BmZ2iCSw.js';
|
|
9
|
-
import { d as defineCustomElement$4 } from './p-
|
|
9
|
+
import { d as defineCustomElement$4 } from './p-Ds0r6ywI.js';
|
|
10
10
|
import { d as defineCustomElement$3 } from './p-CShLpPym.js';
|
|
11
11
|
import { d as defineCustomElement$2 } from './p-C5PcaH3X.js';
|
|
12
12
|
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { G as GbSimpleSideBarItem$1, d as defineCustomElement$1 } from './p-
|
|
1
|
+
import { G as GbSimpleSideBarItem$1, d as defineCustomElement$1 } from './p-Ds0r6ywI.js';
|
|
2
2
|
|
|
3
3
|
const GbSimpleSideBarItem = GbSimpleSideBarItem$1;
|
|
4
4
|
const defineCustomElement = defineCustomElement$1;
|
|
@@ -39,7 +39,7 @@ const GbSimpleSideBarItem = /*@__PURE__*/ proxyCustomElement(class GbSimpleSideB
|
|
|
39
39
|
// console.log(modifiedSvg)
|
|
40
40
|
this.leadingIconSvg = modifiedSvg;
|
|
41
41
|
}
|
|
42
|
-
updateSidebarIcon(
|
|
42
|
+
updateSidebarIcon(newValue, _oldValue) {
|
|
43
43
|
this.internalIcon = newValue;
|
|
44
44
|
}
|
|
45
45
|
componentWillLoad() {
|
|
@@ -52,7 +52,7 @@ const GbSimpleSideBarItem = /*@__PURE__*/ proxyCustomElement(class GbSimpleSideB
|
|
|
52
52
|
render() {
|
|
53
53
|
const redBarSrc = getAssetPath(`assets/bar.svg`);
|
|
54
54
|
const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);
|
|
55
|
-
return (h("div", { key: '
|
|
55
|
+
return (h("div", { key: '1743031cdb195c32c127b075a5de57012d5c0ba7', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'f21b5df747df2e9cc19a71a2ca1d7392e51dd05a', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '1be2c554e310ebe13b29e2c1315a223b53e697be', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'f015ec9d23db1647f067f1cb884ec8a78abb92c0', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'c26cce22b2fbce9b926e0ebbe61ed292f1858ae2', class: "content" }, h("div", { key: 'e729d602d82d709e2573886cc9e09590c2c628be', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '7dfb46f0482de2db478245c010d1f1b5aa1258dc', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '4d1b68587758eb152eb88e26743e4d54544ad5ad', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '0ca4597aec57aeec4d945c77af1cd22a31950bb9' }, "10"))), this.showArrow && (h("svg", { key: '06f402e530194d6bd9d59c117e0e3f70d18aefbc', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: '5baa5a1992e0bea78e10f134039ce83f6615b8ea', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '608cc8e4db46f9c2eae367270c06824ba0f6d30f', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '1123d0046e145bce3f2ef17ef0b7aeb63928e818', slot: "label" }, this.label)))));
|
|
56
56
|
}
|
|
57
57
|
get el() { return this; }
|
|
58
58
|
static get watchers() { return {
|
|
@@ -119,6 +119,6 @@ function defineCustomElement() {
|
|
|
119
119
|
defineCustomElement();
|
|
120
120
|
|
|
121
121
|
export { GbSimpleSideBarItem as G, defineCustomElement as d };
|
|
122
|
-
//# sourceMappingURL=p-
|
|
122
|
+
//# sourceMappingURL=p-Ds0r6ywI.js.map
|
|
123
123
|
|
|
124
|
-
//# sourceMappingURL=p-
|
|
124
|
+
//# sourceMappingURL=p-Ds0r6ywI.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"p-CeHRpUkW.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.css?tag=gb-simple-side-bar-item&encapsulation=shadow","src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n position: relative;\r\n}\r\n\r\n.side_bar_item_container {\r\n padding: 0 var(--spacing-4);\r\n}\r\n\r\n.nav_item_base.icon_only {\r\n width: fit-content;\r\n}\r\n\r\n.nav_item_base {\r\n display: flex;\r\n padding: var(--spacing-2) var(--spacing-3);\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 0.5rem;\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n cursor: pointer;\r\n position: relative;\r\n flex-grow: 1;\r\n}\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n}\r\n\r\n.bar {\r\n position: absolute;\r\n left: 0rem;\r\n width: 0.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n}\r\n\r\n.label_text {\r\n max-width: 100%;\r\n overflow-x: hidden;\r\n overflow-y: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n scrollbar-width: none;\r\n}\r\n\r\n.label_text::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n/* State and Category Styles */\r\n.nav_item_base.plain_background.default,\r\n.nav_item_base.colored_background.default {\r\n background: transparent;\r\n}\r\n\r\n.nav_item_base.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.nav_item_base.default.plain_background:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.nav_item_base.colored_background.active {\r\n background: var(--blue-800, #042f59);\r\n}\r\n\r\n.nav_item_base.default.colored_background:hover {\r\n background: rgba(33, 44, 101, 0.4);\r\n}\r\n\r\n.label_text.plain_background.default {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.label_text.colored_background {\r\n color: var(--base-white, #ffffff);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n/* .icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.default path.has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.colored_background.default path.has_opacity,\r\n.icon.colored_background.default g.has_opacity{\r\n opacity: 0;\r\n}\r\n\r\n.icon.plain_background.default path[fill].has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.colored_background.default path[fill].has_opacity,\r\n.icon.colored_background.default g.has_opacity{\r\n fill: transparent;\r\n}\r\n\r\n/* Arrow Color Styles */\r\n.arrow.default.plain_background path {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.arrow.active.plain_background path {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.arrow.default.colored_background path {\r\n stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.arrow.active.colored_background path {\r\n stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n top: 0.2rem;\r\n left: 4.3rem;\r\n}\r\n","import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element, Watch } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-simple-side-bar-item',\r\n styleUrl: 'gb-simple-side-bar-item.css',\r\n shadow: true,\r\n})\r\n\r\nexport class GbSimpleSideBarItem {\r\n @Prop() state: 'default' | 'active';\r\n @Prop() type: 'full_with_label' | 'icon_only';\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() showArrow: boolean = false;\r\n @Prop() showBadge: boolean = false;\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @State() leadingIconSvg: string = '';\r\n @State() internalIcon: string = '';\r\n @Event() sideBarItemClicked: EventEmitter<void>;\r\n @Element() el: HTMLElement;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n @Watch('icon')\r\n updateSidebarIcon(_oldValue: string, newValue: string) {\r\n this.internalIcon = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n\r\n this.internalIcon = this.icon;\r\n }\r\n\r\n onSideBarItemClicked() {\r\n this.sideBarItemClicked.emit();\r\n }\r\n\r\n render() {\r\n const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\r\n return (\r\n <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n <div class=\"content\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n {this.type === 'full_with_label' && (\r\n <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n )}\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <>\r\n {this.showBadge && (\r\n <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n <p>10</p>\r\n </gb-badge>\r\n )}\r\n {this.showArrow && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n <path\r\n d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n stroke=\"#212C65\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
|
1
|
+
{"file":"p-Ds0r6ywI.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.css?tag=gb-simple-side-bar-item&encapsulation=shadow","src/components/gb-simple-side-bar-item/gb-simple-side-bar-item.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host {\r\n position: relative;\r\n}\r\n\r\n.side_bar_item_container {\r\n padding: 0 var(--spacing-4);\r\n}\r\n\r\n.nav_item_base.icon_only {\r\n width: fit-content;\r\n}\r\n\r\n.nav_item_base {\r\n display: flex;\r\n padding: var(--spacing-2) var(--spacing-3);\r\n justify-content: space-between;\r\n align-items: center;\r\n gap: 0.5rem;\r\n align-self: stretch;\r\n border-radius: var(--rounded-sm);\r\n cursor: pointer;\r\n position: relative;\r\n flex-grow: 1;\r\n}\r\n\r\n.content {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.75rem;\r\n flex-grow: 1;\r\n max-width: 100%;\r\n}\r\n\r\n.bar {\r\n position: absolute;\r\n left: 0rem;\r\n width: 0.25rem;\r\n height: 1.25rem;\r\n}\r\n\r\n.icon {\r\n display: flex;\r\n align-items: center;\r\n width: 1.5rem;\r\n height: 1.5rem;\r\n}\r\n\r\n.label_text {\r\n max-width: 100%;\r\n overflow-x: hidden;\r\n overflow-y: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n scrollbar-width: none;\r\n}\r\n\r\n.label_text::-webkit-scrollbar {\r\n display: none;\r\n}\r\n\r\n/* State and Category Styles */\r\n.nav_item_base.plain_background.default,\r\n.nav_item_base.colored_background.default {\r\n background: transparent;\r\n}\r\n\r\n.nav_item_base.plain_background.active {\r\n background: var(--color-background-information-subtler, #c8e0f9);\r\n}\r\n\r\n.nav_item_base.default.plain_background:hover {\r\n background: var(--color-background-gray-subtler, #eef2f6);\r\n}\r\n\r\n.nav_item_base.colored_background.active {\r\n background: var(--blue-800, #042f59);\r\n}\r\n\r\n.nav_item_base.default.colored_background:hover {\r\n background: rgba(33, 44, 101, 0.4);\r\n}\r\n\r\n.label_text.plain_background.default {\r\n color: var(--color-text, #4b5565);\r\n}\r\n\r\n.label_text.plain_background.active {\r\n color: var(--color-text-information-bold, #042f59);\r\n}\r\n\r\n.label_text.colored_background {\r\n color: var(--base-white, #ffffff);\r\n}\r\n\r\n/* Icon Color Styles */\r\n.icon.plain_background path[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path[stroke] {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background path#Icon[fill] {\r\n fill: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active path#Icon[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background.active path#Accent[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.plain_background circle[stroke] {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.icon.plain_background.active circle[fill] {\r\n fill: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.icon.colored_background path[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background path#Icon[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active path#Accent[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background circle[stroke] {\r\n stroke: var(--base-white, #ffffff);\r\n}\r\n\r\n.icon.colored_background.active circle[fill] {\r\n fill: var(--base-white, #ffffff);\r\n}\r\n\r\n/* .icon.plain_background.default path[fill],\r\n.icon.colored_background.default path[fill],\r\n.icon.plain_background.default circle[fill],\r\n.icon.colored_background.default circle[fill] {\r\n fill: transparent;\r\n} */\r\n\r\n.icon.plain_background.default path.has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.colored_background.default path.has_opacity,\r\n.icon.colored_background.default g.has_opacity{\r\n opacity: 0;\r\n}\r\n\r\n.icon.plain_background.default path[fill].has_opacity,\r\n.icon.plain_background.default g.has_opacity,\r\n.icon.colored_background.default path[fill].has_opacity,\r\n.icon.colored_background.default g.has_opacity{\r\n fill: transparent;\r\n}\r\n\r\n/* Arrow Color Styles */\r\n.arrow.default.plain_background path {\r\n stroke: var(--color-icon, #4b5565);\r\n}\r\n\r\n.arrow.active.plain_background path {\r\n stroke: var(--color-icon-information-bold, #042f59);\r\n}\r\n\r\n.arrow.default.colored_background path {\r\n stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.arrow.active.colored_background path {\r\n stroke: var(--color-icon-inverse, #ffffff);\r\n}\r\n\r\n.tooltip {\r\n position: absolute;\r\n top: 0.2rem;\r\n left: 4.3rem;\r\n}\r\n","import { Component, h, Prop, Fragment, getAssetPath, State, Event, EventEmitter, Element, Watch } from \"@stencil/core\";\r\nimport { GeneralBackgroundCategories } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-simple-side-bar-item',\r\n styleUrl: 'gb-simple-side-bar-item.css',\r\n shadow: true,\r\n})\r\nexport class GbSimpleSideBarItem {\r\n @Prop() state: 'default' | 'active';\r\n @Prop() type: 'full_with_label' | 'icon_only';\r\n @Prop() label: string = '';\r\n @Prop() icon: string = '';\r\n @Prop() category: GeneralBackgroundCategories;\r\n @Prop() showArrow: boolean = false;\r\n @Prop() showBadge: boolean = false;\r\n @Prop({ mutable: true }) showTooltip: boolean = false;\r\n @State() leadingIconSvg: string = '';\r\n @State() internalIcon: string = '';\r\n @Event() sideBarItemClicked: EventEmitter<void>;\r\n @Element() el: HTMLElement;\r\n\r\n async loadIcon(iconName: string) {\r\n const iconPath = getAssetPath(`${iconName}`);\r\n const response = await fetch(iconPath);\r\n const svg = await response.text();\r\n\r\n const parser = new DOMParser();\r\n const svgDoc = parser.parseFromString(svg, 'image/svg+xml');\r\n const svgElement = svgDoc.documentElement;\r\n\r\n // Add `has-opacity` class to all elements that have an opacity attribute\r\n const elementsWithOpacity = svgElement.querySelectorAll('[opacity]');\r\n elementsWithOpacity.forEach(el => {\r\n el.classList.add('has_opacity');\r\n });\r\n\r\n // Serialize and store\r\n const modifiedSvg = svgElement.outerHTML;\r\n // console.log(modifiedSvg)\r\n this.leadingIconSvg = modifiedSvg;\r\n }\r\n\r\n @Watch('icon')\r\n updateSidebarIcon(newValue: string, _oldValue: string) {\r\n this.internalIcon = newValue;\r\n }\r\n\r\n componentWillLoad() {\r\n this.loadIcon(this.icon);\r\n\r\n this.internalIcon = this.icon;\r\n }\r\n\r\n onSideBarItemClicked() {\r\n this.sideBarItemClicked.emit();\r\n }\r\n\r\n render() {\r\n const redBarSrc = getAssetPath(`assets/bar.svg`);\r\n const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);\r\n\r\n return (\r\n <div class={`side_bar_item_container`} onMouseEnter={() => (this.showTooltip = true)} onMouseLeave={() => (this.showTooltip = false)}>\r\n <div class={`nav_item_base ${this.state} ${this.type} ${this.category}`}>\r\n {this.state === 'active' && this.category === 'plain_background' && <img src={redBarSrc} alt=\"\" class=\"bar\" />}\r\n {this.state === 'active' && this.category === 'colored_background' && <img src={whiteBarSrc} alt=\"\" class=\"bar\" />}\r\n <div class=\"content\">\r\n <div class={`icon ${this.state} ${this.category}`} innerHTML={this.leadingIconSvg}></div>\r\n {this.type === 'full_with_label' && (\r\n <p class={`label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}`}>{this.label}</p>\r\n )}\r\n </div>\r\n {this.type === 'full_with_label' && (\r\n <>\r\n {this.showBadge && (\r\n <gb-badge size=\"sm\" type=\"pill_outline\" color={this.state === 'active' ? 'information' : 'gray'}>\r\n <p>10</p>\r\n </gb-badge>\r\n )}\r\n {this.showArrow && (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\" class={`arrow ${this.state} ${this.category}`}>\r\n <path\r\n d=\"M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12\"\r\n stroke=\"#212C65\"\r\n stroke-width=\"1.5\"\r\n stroke-linecap=\"round\"\r\n stroke-linejoin=\"round\"\r\n />\r\n </svg>\r\n )}\r\n </>\r\n )}\r\n </div>\r\n {this.type === 'icon_only' && this.showTooltip && (\r\n <gb-tooltip show-arrow={true} arrow=\"left\" class=\"tooltip\">\r\n <p slot=\"label\">{this.label}</p>\r\n </gb-tooltip>\r\n )}\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -1357,7 +1357,7 @@ const GbSimpleSideBarItem = class {
|
|
|
1357
1357
|
// console.log(modifiedSvg)
|
|
1358
1358
|
this.leadingIconSvg = modifiedSvg;
|
|
1359
1359
|
}
|
|
1360
|
-
updateSidebarIcon(
|
|
1360
|
+
updateSidebarIcon(newValue, _oldValue) {
|
|
1361
1361
|
this.internalIcon = newValue;
|
|
1362
1362
|
}
|
|
1363
1363
|
componentWillLoad() {
|
|
@@ -1370,7 +1370,7 @@ const GbSimpleSideBarItem = class {
|
|
|
1370
1370
|
render() {
|
|
1371
1371
|
const redBarSrc = getAssetPath(`assets/bar.svg`);
|
|
1372
1372
|
const whiteBarSrc = getAssetPath(`assets/bar_white.svg`);
|
|
1373
|
-
return (h("div", { key: '
|
|
1373
|
+
return (h("div", { key: '1743031cdb195c32c127b075a5de57012d5c0ba7', class: `side_bar_item_container`, onMouseEnter: () => (this.showTooltip = true), onMouseLeave: () => (this.showTooltip = false) }, h("div", { key: 'f21b5df747df2e9cc19a71a2ca1d7392e51dd05a', class: `nav_item_base ${this.state} ${this.type} ${this.category}` }, this.state === 'active' && this.category === 'plain_background' && h("img", { key: '1be2c554e310ebe13b29e2c1315a223b53e697be', src: redBarSrc, alt: "", class: "bar" }), this.state === 'active' && this.category === 'colored_background' && h("img", { key: 'f015ec9d23db1647f067f1cb884ec8a78abb92c0', src: whiteBarSrc, alt: "", class: "bar" }), h("div", { key: 'c26cce22b2fbce9b926e0ebbe61ed292f1858ae2', class: "content" }, h("div", { key: 'e729d602d82d709e2573886cc9e09590c2c628be', class: `icon ${this.state} ${this.category}`, innerHTML: this.leadingIconSvg }), this.type === 'full_with_label' && (h("p", { key: '7dfb46f0482de2db478245c010d1f1b5aa1258dc', class: `label_text ${this.category} ${this.state} ${this.state === 'active' ? 'text-md-semi-bold' : 'text-md-medium'}` }, this.label))), this.type === 'full_with_label' && (h(Fragment, null, this.showBadge && (h("gb-badge", { key: '4d1b68587758eb152eb88e26743e4d54544ad5ad', size: "sm", type: "pill_outline", color: this.state === 'active' ? 'information' : 'gray' }, h("p", { key: '0ca4597aec57aeec4d945c77af1cd22a31950bb9' }, "10"))), this.showArrow && (h("svg", { key: '06f402e530194d6bd9d59c117e0e3f70d18aefbc', xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", class: `arrow ${this.state} ${this.category}` }, h("path", { key: '5baa5a1992e0bea78e10f134039ce83f6615b8ea', d: "M6.00003 4C6.00003 4 9.99999 6.94596 10 8.00003C10 9.05411 6 12 6 12", stroke: "#212C65", "stroke-width": "1.5", "stroke-linecap": "round", "stroke-linejoin": "round" })))))), this.type === 'icon_only' && this.showTooltip && (h("gb-tooltip", { key: '608cc8e4db46f9c2eae367270c06824ba0f6d30f', "show-arrow": true, arrow: "left", class: "tooltip" }, h("p", { key: '1123d0046e145bce3f2ef17ef0b7aeb63928e818', slot: "label" }, this.label)))));
|
|
1374
1374
|
}
|
|
1375
1375
|
get el() { return getElement(this); }
|
|
1376
1376
|
static get watchers() { return {
|