globuswebcomponents 0.3.7 → 0.3.9
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 → gb-avatar_30.cjs.entry.js} +117 -3
- package/dist/cjs/gb-avatar_30.cjs.entry.js.map +1 -0
- package/dist/cjs/globuscomponents.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/gb-button/readme.md +4 -0
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js +21 -2
- package/dist/collection/components/gb-horizontal-tabs/gb-horizontal-tabs.js.map +1 -1
- package/dist/collection/components/gb-sidebar/gb-sidebar.js +24 -2
- package/dist/collection/components/gb-sidebar/gb-sidebar.js.map +1 -1
- package/dist/components/gb-horizontal-tabs.js +5 -3
- package/dist/components/gb-horizontal-tabs.js.map +1 -1
- package/dist/components/gb-sidebar.js +8 -3
- package/dist/components/gb-sidebar.js.map +1 -1
- package/dist/esm/{gb-avatar_28.entry.js → gb-avatar_30.entry.js} +116 -4
- package/dist/esm/gb-avatar_30.entry.js.map +1 -0
- package/dist/esm/globuscomponents.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js.map +1 -1
- package/dist/globuscomponents/{p-fd2fe69d.entry.js → p-2daeb329.entry.js} +2 -2
- package/dist/globuscomponents/p-2daeb329.entry.js.map +1 -0
- package/dist/globuscomponents/readme.md +4 -0
- package/dist/types/components/gb-horizontal-tabs/gb-horizontal-tabs.d.ts +3 -1
- package/dist/types/components/gb-sidebar/gb-sidebar.d.ts +2 -0
- package/dist/types/components.d.ts +32 -0
- package/package.json +1 -1
- package/dist/cjs/gb-avatar_28.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-collapse-button.cjs.entry.js +0 -44
- package/dist/cjs/gb-collapse-button.cjs.entry.js.map +0 -1
- package/dist/cjs/gb-sidebar.cjs.entry.js +0 -79
- package/dist/cjs/gb-sidebar.cjs.entry.js.map +0 -1
- package/dist/esm/gb-avatar_28.entry.js.map +0 -1
- package/dist/esm/gb-collapse-button.entry.js +0 -40
- package/dist/esm/gb-collapse-button.entry.js.map +0 -1
- package/dist/esm/gb-sidebar.entry.js +0 -75
- package/dist/esm/gb-sidebar.entry.js.map +0 -1
- package/dist/globuscomponents/p-77833cb1.entry.js +0 -2
- package/dist/globuscomponents/p-77833cb1.entry.js.map +0 -1
- package/dist/globuscomponents/p-a6522c5c.entry.js +0 -2
- package/dist/globuscomponents/p-a6522c5c.entry.js.map +0 -1
- package/dist/globuscomponents/p-fd2fe69d.entry.js.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { p as proxyCustomElement, H, g as getAssetPath, h, F as Fragment } from './p-3d8f80e9.js';
|
|
1
|
+
import { p as proxyCustomElement, H, c as createEvent, g as getAssetPath, h, F as Fragment } from './p-3d8f80e9.js';
|
|
2
2
|
import { d as defineCustomElement$9 } from './p-837365c7.js';
|
|
3
3
|
import { d as defineCustomElement$8 } from './p-21fecbde.js';
|
|
4
4
|
import { d as defineCustomElement$7 } from './p-5ca81eb7.js';
|
|
@@ -16,6 +16,7 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
|
|
|
16
16
|
super();
|
|
17
17
|
this.__registerHost();
|
|
18
18
|
this.__attachShadow();
|
|
19
|
+
this.sidebarItemClicked = createEvent(this, "sidebarItemClicked", 7);
|
|
19
20
|
this.state = undefined;
|
|
20
21
|
this.category = undefined;
|
|
21
22
|
this.showSecondCategory = false;
|
|
@@ -63,7 +64,7 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
|
|
|
63
64
|
}
|
|
64
65
|
async sideBarItemClicked(index) {
|
|
65
66
|
this.activeIndex = index;
|
|
66
|
-
|
|
67
|
+
this.sidebarItemClicked.emit(index);
|
|
67
68
|
}
|
|
68
69
|
componentDidLoad() {
|
|
69
70
|
const applicationName = this.el.querySelector('[slot="application_name"]');
|
|
@@ -74,7 +75,11 @@ const GbSidebar$1 = /*@__PURE__*/ proxyCustomElement(class GbSidebar extends H {
|
|
|
74
75
|
}
|
|
75
76
|
render() {
|
|
76
77
|
const textClass = this.category === 'plain_background' ? 'plain_background_color' : 'colored_background_color';
|
|
77
|
-
|
|
78
|
+
const patternSrc = getAssetPath(`assets/pattern_wrapper.svg`);
|
|
79
|
+
const logoSrc = getAssetPath(`assets/globus_bank_logo.svg`);
|
|
80
|
+
const blueLogoSrc = getAssetPath(`assets/globus_bank_logo_blue.svg`);
|
|
81
|
+
const whiteLogoSrc = getAssetPath(`assets/globus_bank_logo_white.svg`);
|
|
82
|
+
return (h("div", { key: '0ac5427ca82c0578b36ce732f73ea0c4e0008f3c', class: `sidebar_div ${this.state} ${this.category}` }, this.category === 'colored_background' && (h("div", { key: 'c04bb0758d3a58553f706ab9c92fe60ad63f22c3', class: "pattern" }, h("img", { key: 'f0e5f702b7fb30de411a2cae840329b49e0df841', src: patternSrc, alt: "" }))), h("div", { key: '3e65c6807f720f87898ec7a46e62361c7a2abd39', class: "nav" }, h("div", { key: '1c10b93efb177648c9a09384f612a0e113cfc0cd', class: `sidebar_header ${this.state}` }, h("div", { key: '797cf58019bc9fb39a7e50492d787b398f27e941', 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: 'c2241fbf1f464ed629287d197498c37aafc23781', src: logoSrc, alt: "" })), h("div", { key: 'ab6ef47a5c81a1cd4dd68fb21df7d3364d174ab5', class: `collapse_button ${this.state}` }, h("gb-collapse-button", { key: '8d96b9f549e048029b30440ae665d9833291cb74', color: this.category === 'plain_background' ? 'gray' : 'white', action: this.state === 'collapsed' ? 'expand' : 'collapse', onClick: () => (this.state === 'collapsed' ? this.expandSideBar() : this.collapseSideBar()) }))), h("div", { key: 'e7517390f9aa132fc2cf6f0fe292c85efd8913d4', class: "navigation" }, h("div", { key: 'b04caba3d540e3365edddc71eb09e12f3ea0364c', class: "item" }, h("gb-side-bar-item", { key: '9ba23c0d7a260a2b60c01004b8182055d8572dd1', 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: 'c015c14b1046312fb42054009bf5a81428a7149c', 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: '21921279b4df559488344e2c6763380beb59f547', 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: '0d5dc23f8ac799604e1b09463f9e924cbc87aa96', 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: '3508479dcd08831d2efab119c033aec70b2b211b', 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: 'ad4232ccdebd2b98f4ca4806fff52fc2def5cca9', class: "navigation" }, h("div", { key: '44743d4b4b32a9456d52fb10d2bec3174abce723', class: "item" }, this.sixthItemLabel && (h("gb-side-bar-item", { key: '6f43e118ed29e57a317cc8e847f21d2f17fb8f82', 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: '8e42b504ef8c02486590260adb47211738aec6db', 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: 'db6e3d0a0c6a2dfb1c3697676993903b62814f83', 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: 'd0451638745a4211431e2039dbb8635dad177e31', 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: '6090f7ce58e4b8c24b9d54e3c7e028797b12f701', 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: '637e0ad2f492f8b34dd3c160ea5391392250759d', class: "application_name" }, h("div", { key: 'a89cc7a6aea5f694f575a83617a2795d184878e6', class: `wrapper ${this.category}` }, this.category === 'plain_background' && (h("div", { key: '4037a56635c93c17e4db0d21d85a1ebe28ac697a', class: "application_name_pattern" }, h("img", { key: '8983881b2691127b4c801846d4c53d6fbf7b2434', src: patternSrc, alt: "" }))), h("div", { key: '4077b51f1ed1db76817e9e305547f7a6f97c7f42', class: `application_icon ${this.category}`, innerHTML: this.leadingIconSvg }), h("span", { key: '793c69cdb9a7118c319e6690da3a094584998d6c', class: textClass }, h("slot", { key: 'cda4097872ca2a0c51a76314152b43b533359a21', name: "application_name" })))))));
|
|
78
83
|
}
|
|
79
84
|
get el() { return this; }
|
|
80
85
|
static get style() { return GbSidebarStyle0; }
|
|
@@ -1 +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@import './../../global/spacing.css';\r\n@import './../../global/typography.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);\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: 0rem 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 padding-bottom: var(--spacing-5);\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 padding-bottom: var(--spacing-6);\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 } 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';\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 @State() activeIndex: number = 0;\r\n @State() leadingIconSvg: 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 }\r\n\r\n expandSideBar() {\r\n if (this.state === 'collapsed') {\r\n this.state = 'expanded';\r\n }\r\n }\r\n\r\n @Method()\r\n async sideBarItemClicked(index: number) {\r\n this.activeIndex = index;\r\n console.log(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\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=\"build/assets/pattern_wrapper.svg\" 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' && (\r\n <>{this.category === 'plain_background' ? <img src=\"build/assets/globus_bank_logo_blue.svg\" /> : <img src=\"build/assets/globus_bank_logo_white.svg\" />}</>\r\n )}\r\n {this.state === 'collapsed' && <img src=\"build/assets/globus_bank_logo.svg\" 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 >\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 >\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=\"build/assets/pattern_wrapper.svg\" 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}
|
|
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@import './../../global/spacing.css';\r\n@import './../../global/typography.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);\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: 0rem 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 padding-bottom: var(--spacing-5);\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 padding-bottom: var(--spacing-6);\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';\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 @State() activeIndex: number = 0;\r\n @State() leadingIconSvg: string = '';\r\n @Event() sidebarItemClicked: EventEmitter<number>;\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 }\r\n\r\n expandSideBar() {\r\n if (this.state === 'collapsed') {\r\n this.state = 'expanded';\r\n }\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' && (\r\n <>{this.category === 'plain_background' ? <img src={blueLogoSrc} /> : <img src={whiteLogoSrc} />}</>\r\n )}\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}
|