globuswebcomponents 1.3.4 → 1.3.5
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_32.cjs.entry.js +1 -1
- package/dist/cjs/gb-avatar_32.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-header/gb-header.js +1 -1
- package/dist/collection/components/gb-header/gb-header.js.map +1 -1
- package/dist/components/gb-header.js +1 -1
- package/dist/components/gb-header.js.map +1 -1
- package/dist/docs.json +1 -1
- package/dist/esm/gb-avatar_32.entry.js +1 -1
- package/dist/esm/gb-avatar_32.entry.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/{p-f666ab38.entry.js → p-6766111b.entry.js} +2 -2
- package/dist/globuscomponents/p-6766111b.entry.js.map +1 -0
- package/package.json +1 -1
- package/dist/globuscomponents/p-f666ab38.entry.js.map +0 -1
|
@@ -50,7 +50,7 @@ export class GbHeader {
|
|
|
50
50
|
const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
|
|
51
51
|
const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);
|
|
52
52
|
const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);
|
|
53
|
-
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '
|
|
53
|
+
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '2ce1bc88f9dd3d05b98b8e6c194ff267a2d1747f', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '50bb4aa47e78bc4dc0e61c9eb3b9e95d683e5ec9', src: logo, alt: "" })), h("div", { key: 'a9a9ecfdd28d4e44e4d9046c0e57c13ad07fd762', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '0e69e359f719a422ed3267158c9130b1956b126e', src: iconLogo, alt: "" })))), h("div", { key: '4b8011a3de7b2f7e6f0fd7a0be4727735d694f2f', class: "inner_content" }, h("div", { key: 'ac586242978e6fc7521d90b1d58de54ed5fe0d7e', class: `action` }, this.showHelp && h("gb-header-icon", { key: 'e6a28785ba274970291a9cd4f2fbeaafad3628ad', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: 'a7a8b857753a2af10e3959cb80d9b4752c29c79a', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: '91f39c66cb6564916bd1a7361cc26557a49bb13a', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
|
|
54
54
|
}
|
|
55
55
|
static get is() { return "gb-header"; }
|
|
56
56
|
static get encapsulation() { return "shadow"; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAgB,YAAY,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AACjH,OAAO,EAAoB,SAAS,EAAE,MAAM,6BAA6B,CAAC;AAO1E,MAAM,OAAO,QAAQ;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;0BAEN,KAAK;gCACC,KAAK;wBACb,KAAK;wBACL,KAAK;;IAKjC,oBAAoB;QAClB,QAAQ,IAAI,CAAC,KAAK,EAAE,CAAC;YACnB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;QACpB,CAAC;IACH,CAAC;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE,CAAC;YACb,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;QACtD,CAAC;IACH,CAAC;IAGD,KAAK,CAAC,mBAAmB,CAAC,IAAY;QACpC,uCAAuC;QACvC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAClC,sBAAsB;IACxB,CAAC;IAED,KAAK,CAAC,aAAa;QACjB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;IAC1B,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,YAAY,CAAC,kCAAkC,CAAC,CAAC;QAC9D,MAAM,QAAQ,GAAG,YAAY,CAAC,mCAAmC,CAAC,CAAC;QAEnE,OAAO,CACL,4DAAK,KAAK,EAAE,YAAY;YACtB,4DAAK,KAAK,EAAC,SAAS;gBACjB,IAAI,CAAC,QAAQ,IAAI,CAChB;oBACE,4DAAK,KAAK,EAAC,MAAM;
|
|
1
|
+
{"version":3,"file":"gb-header.js","sourceRoot":"","sources":["../../../src/components/gb-header/gb-header.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop, Fragment } from \"@stencil/core\";\r\nimport { AvatarColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-header',\r\n styleUrl: 'gb-header.css',\r\n shadow: true,\r\n})\r\nexport class GbHeader {\r\n @Prop() state: StateEnum;\r\n @Prop() showIndicator: boolean = false;\r\n @Prop() text: boolean = false;\r\n @Prop() placeholder: boolean = false;\r\n @Prop() color: AvatarColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Prop() showNotification: boolean = false;\r\n @Prop() showHelp: boolean = false;\r\n @Prop() showLogo: boolean = false;\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<string>;\r\n @Event() menuClicked: EventEmitter<void>;\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n if (initials) {\r\n initials.classList.add('text-md-semi-bold');\r\n initials.classList.add(this.applyColorToInitials());\r\n }\r\n }\r\n\r\n @Method()\r\n async onNavBarItemClicked(item: string) {\r\n // console.log('nav-bar-item clicked');\r\n this.navBarItemClicked.emit(item);\r\n // console.log(index);\r\n }\r\n\r\n async onMenuClicked() {\r\n this.menuClicked.emit();\r\n }\r\n\r\n render() {\r\n const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n return (\r\n <div class={`header_div`}>\r\n <div class=\"content\">\r\n {this.showLogo && (\r\n <>\r\n <div class=\"logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n <img src={logo} alt=\"\" />\r\n </div>\r\n <div class=\"icon_logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n <img src={iconLogo} alt=\"\" />\r\n </div>\r\n </>\r\n )}\r\n <div class=\"inner_content\">\r\n <div class={`action`}>\r\n {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked('help')}></gb-header-icon>}\r\n {this.showNotification && (\r\n <gb-header-icon\r\n state={this.state}\r\n icon={notificationIconSrc}\r\n show-indicator={this.showIndicator}\r\n onClick={() => this.onNavBarItemClicked('notification')}\r\n ></gb-header-icon>\r\n )}\r\n </div>\r\n <gb-avatar\r\n size=\"md\"\r\n text={this.text}\r\n placeholder={this.placeholder}\r\n color={this.color}\r\n show-border={this.showBorder}\r\n onClick={() => this.onNavBarItemClicked('avatar')}\r\n >\r\n {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n </gb-avatar>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"]}
|
|
@@ -63,7 +63,7 @@ const GbHeader$1 = /*@__PURE__*/ proxyCustomElement(class GbHeader extends H {
|
|
|
63
63
|
const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
|
|
64
64
|
const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);
|
|
65
65
|
const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);
|
|
66
|
-
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '
|
|
66
|
+
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '2ce1bc88f9dd3d05b98b8e6c194ff267a2d1747f', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '50bb4aa47e78bc4dc0e61c9eb3b9e95d683e5ec9', src: logo, alt: "" })), h("div", { key: 'a9a9ecfdd28d4e44e4d9046c0e57c13ad07fd762', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '0e69e359f719a422ed3267158c9130b1956b126e', src: iconLogo, alt: "" })))), h("div", { key: '4b8011a3de7b2f7e6f0fd7a0be4727735d694f2f', class: "inner_content" }, h("div", { key: 'ac586242978e6fc7521d90b1d58de54ed5fe0d7e', class: `action` }, this.showHelp && h("gb-header-icon", { key: 'e6a28785ba274970291a9cd4f2fbeaafad3628ad', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: 'a7a8b857753a2af10e3959cb80d9b4752c29c79a', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: '91f39c66cb6564916bd1a7361cc26557a49bb13a', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
|
|
67
67
|
}
|
|
68
68
|
get el() { return this; }
|
|
69
69
|
static get style() { return GbHeaderStyle0; }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-header.js","mappings":";;;;;;;AAAA,MAAM,WAAW,GAAG,soBAAsoB,CAAC;AAC3pB,uBAAe,WAAW;;MCObA,UAAQ;;;;;;;;6BAEc,KAAK;oBACd,KAAK;2BACE,KAAK;;0BAEN,KAAK;gCACC,KAAK;wBACb,KAAK;wBACL,KAAK;;IAKjC,oBAAoB;QAClB,QAAQ,IAAI,CAAC,KAAK;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,MAAM;gBACT,OAAO,MAAM,CAAC;YAChB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;YAClB,KAAK,OAAO;gBACV,OAAO,OAAO,CAAC;YACjB,KAAK,QAAQ;gBACX,OAAO,QAAQ,CAAC;SACnB;KACF;IAED,gBAAgB;QACd,MAAM,QAAQ,GAAG,IAAI,CAAC,EAAE,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;QAE5D,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,mBAAmB,CAAC,CAAC;YAC5C,QAAQ,CAAC,SAAS,CAAC,GAAG,CAAC,IAAI,CAAC,oBAAoB,EAAE,CAAC,CAAC;SACrD;KACF;IAGD,MAAM,mBAAmB,CAAC,IAAY;;QAEpC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;;KAEnC;IAED,MAAM,aAAa;QACjB,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;KACzB;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,YAAY,CAAC,wBAAwB,CAAC,CAAC;QAC3D,MAAM,mBAAmB,GAAG,YAAY,CAAC,4BAA4B,CAAC,CAAC;QACvE,MAAM,IAAI,GAAG,YAAY,CAAC,kCAAkC,CAAC,CAAC;QAC9D,MAAM,QAAQ,GAAG,YAAY,CAAC,mCAAmC,CAAC,CAAC;QAEnE,QACE,4DAAK,KAAK,EAAE,YAAY,IACtB,4DAAK,KAAK,EAAC,SAAS,IACjB,IAAI,CAAC,QAAQ,KACZ,kBACE,4DAAK,KAAK,EAAC,MAAM,
|
|
1
|
+
{"file":"gb-header.js","mappings":"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","names":["GbHeader"],"sources":["src/components/gb-header/gb-header.css?tag=gb-header&encapsulation=shadow","src/components/gb-header/gb-header.tsx"],"sourcesContent":[".header_div{\r\n display: flex;\r\n flex-direction: column;\r\n align-items: center; \r\n width: 100%;\r\n border-bottom: 0.7px solid var(--color-border-subtle, #CDD5DF);\r\n background: var(--color-surface, #FFFFFF);\r\n}\r\n\r\n.content{\r\n display: flex;\r\n height: 4.5rem;\r\n padding: 0rem 2rem;\r\n justify-content: space-between;\r\n align-items: center;\r\n align-self: stretch;\r\n}\r\n\r\n.logo{\r\n display: block;\r\n}\r\n\r\n.icon_logo{\r\n display: none;\r\n}\r\n\r\n.inner_content{\r\n display: flex;\r\n justify-content: flex-end;\r\n align-items: center;\r\n gap: var(--spacing-4);\r\n flex: 1 0 0;\r\n}\r\n\r\n.action{\r\n display: flex;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n@media (max-width: 440px) {\r\n .content{\r\n padding: var(--spacing-none) var(--spacing-5);\r\n }\r\n}\r\n\r\n@media (max-width: 450px) {\r\n .logo{\r\n display: none;\r\n }\r\n\r\n .icon_logo{\r\n display: block;\r\n }\r\n}","import { Component, Element, Event, EventEmitter, getAssetPath, h, Method, Prop, Fragment } from \"@stencil/core\";\r\nimport { AvatarColorTypes, StateEnum } from \"../../models/reusableModels\";\r\n\r\n@Component({\r\n tag: 'gb-header',\r\n styleUrl: 'gb-header.css',\r\n shadow: true,\r\n})\r\nexport class GbHeader {\r\n @Prop() state: StateEnum;\r\n @Prop() showIndicator: boolean = false;\r\n @Prop() text: boolean = false;\r\n @Prop() placeholder: boolean = false;\r\n @Prop() color: AvatarColorTypes;\r\n @Prop() showBorder: boolean = false;\r\n @Prop() showNotification: boolean = false;\r\n @Prop() showHelp: boolean = false;\r\n @Prop() showLogo: boolean = false;\r\n @Element() el: HTMLElement;\r\n @Event() navBarItemClicked: EventEmitter<string>;\r\n @Event() menuClicked: EventEmitter<void>;\r\n\r\n applyColorToInitials() {\r\n switch (this.color) {\r\n case 'gray':\r\n return 'gray';\r\n case 'blue':\r\n return 'blue';\r\n case 'cyan':\r\n return 'cyan';\r\n case 'pink':\r\n return 'pink';\r\n case 'purple':\r\n return 'purple';\r\n case 'green':\r\n return 'green';\r\n case 'yellow':\r\n return 'yellow';\r\n }\r\n }\r\n\r\n componentDidLoad() {\r\n const initials = this.el.querySelector(\"[slot='initials']\");\r\n\r\n if (initials) {\r\n initials.classList.add('text-md-semi-bold');\r\n initials.classList.add(this.applyColorToInitials());\r\n }\r\n }\r\n\r\n @Method()\r\n async onNavBarItemClicked(item: string) {\r\n // console.log('nav-bar-item clicked');\r\n this.navBarItemClicked.emit(item);\r\n // console.log(index);\r\n }\r\n\r\n async onMenuClicked() {\r\n this.menuClicked.emit();\r\n }\r\n\r\n render() {\r\n const helpIconSrc = getAssetPath(`assets/help-circle.svg`);\r\n const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);\r\n const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);\r\n const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);\r\n\r\n return (\r\n <div class={`header_div`}>\r\n <div class=\"content\">\r\n {this.showLogo && (\r\n <>\r\n <div class=\"logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n <img src={logo} alt=\"\" />\r\n </div>\r\n <div class=\"icon_logo\" onClick={() => this.onNavBarItemClicked('logo')}>\r\n <img src={iconLogo} alt=\"\" />\r\n </div>\r\n </>\r\n )}\r\n <div class=\"inner_content\">\r\n <div class={`action`}>\r\n {this.showHelp && <gb-header-icon state={StateEnum.Default} icon={helpIconSrc} onClick={() => this.onNavBarItemClicked('help')}></gb-header-icon>}\r\n {this.showNotification && (\r\n <gb-header-icon\r\n state={this.state}\r\n icon={notificationIconSrc}\r\n show-indicator={this.showIndicator}\r\n onClick={() => this.onNavBarItemClicked('notification')}\r\n ></gb-header-icon>\r\n )}\r\n </div>\r\n <gb-avatar\r\n size=\"md\"\r\n text={this.text}\r\n placeholder={this.placeholder}\r\n color={this.color}\r\n show-border={this.showBorder}\r\n onClick={() => this.onNavBarItemClicked('avatar')}\r\n >\r\n {this.text ? <slot slot=\"initials\" name=\"initials\"></slot> : <slot name=\"image\" slot=\"image\"></slot>}\r\n </gb-avatar>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n }\r\n}"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -774,7 +774,7 @@ const GbHeader = class {
|
|
|
774
774
|
const notificationIconSrc = getAssetPath(`assets/notification-03.svg`);
|
|
775
775
|
const logo = getAssetPath(`assets/globus_bank_logo_blue.svg`);
|
|
776
776
|
const iconLogo = getAssetPath(`assets/globus_bank_logo_white.svg`);
|
|
777
|
-
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '
|
|
777
|
+
return (h("div", { key: 'c871dff6d2b245ebdc0211623459fb1023c3d3f2', class: `header_div` }, h("div", { key: '61b783b3b8a6f516eb6ac8dc9629b0524c8810ea', class: "content" }, this.showLogo && (h(Fragment, null, h("div", { key: '2ce1bc88f9dd3d05b98b8e6c194ff267a2d1747f', class: "logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '50bb4aa47e78bc4dc0e61c9eb3b9e95d683e5ec9', src: logo, alt: "" })), h("div", { key: 'a9a9ecfdd28d4e44e4d9046c0e57c13ad07fd762', class: "icon_logo", onClick: () => this.onNavBarItemClicked('logo') }, h("img", { key: '0e69e359f719a422ed3267158c9130b1956b126e', src: iconLogo, alt: "" })))), h("div", { key: '4b8011a3de7b2f7e6f0fd7a0be4727735d694f2f', class: "inner_content" }, h("div", { key: 'ac586242978e6fc7521d90b1d58de54ed5fe0d7e', class: `action` }, this.showHelp && h("gb-header-icon", { key: 'e6a28785ba274970291a9cd4f2fbeaafad3628ad', state: StateEnum.Default, icon: helpIconSrc, onClick: () => this.onNavBarItemClicked('help') }), this.showNotification && (h("gb-header-icon", { key: 'a7a8b857753a2af10e3959cb80d9b4752c29c79a', state: this.state, icon: notificationIconSrc, "show-indicator": this.showIndicator, onClick: () => this.onNavBarItemClicked('notification') }))), h("gb-avatar", { key: '91f39c66cb6564916bd1a7361cc26557a49bb13a', size: "md", text: this.text, placeholder: this.placeholder, color: this.color, "show-border": this.showBorder, onClick: () => this.onNavBarItemClicked('avatar') }, this.text ? h("slot", { slot: "initials", name: "initials" }) : h("slot", { name: "image", slot: "image" }))))));
|
|
778
778
|
}
|
|
779
779
|
get el() { return getElement(this); }
|
|
780
780
|
};
|