globuswebcomponents 1.6.8 → 1.6.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_25.cjs.entry.js +4 -4
- package/dist/cjs/gb-avatar_25.cjs.entry.js.map +1 -1
- package/dist/collection/components/gb-breadcrumbs/gb-breadcrumbs.js +13 -7
- package/dist/collection/components/gb-breadcrumbs/gb-breadcrumbs.js.map +1 -1
- package/dist/components/gb-breadcrumbs.js +4 -4
- package/dist/components/gb-breadcrumbs.js.map +1 -1
- package/dist/docs.json +11 -6
- package/dist/esm/gb-avatar_25.entry.js +4 -4
- package/dist/esm/gb-avatar_25.entry.js.map +1 -1
- package/dist/globuscomponents/globuscomponents.esm.js +1 -1
- package/dist/globuscomponents/p-89cf1c92.entry.js +2 -0
- package/dist/globuscomponents/p-89cf1c92.entry.js.map +1 -0
- package/dist/types/components/gb-breadcrumbs/gb-breadcrumbs.d.ts +9 -11
- package/dist/types/components.d.ts +2 -2
- package/package.json +1 -1
- package/dist/globuscomponents/p-fed2c1e0.entry.js +0 -2
- package/dist/globuscomponents/p-fed2c1e0.entry.js.map +0 -1
|
@@ -12,10 +12,11 @@ export class GbBreadcrumbs {
|
|
|
12
12
|
}
|
|
13
13
|
componentWillLoad() {
|
|
14
14
|
this.visibleBreadcrumbs = [...this.breadcrumbs];
|
|
15
|
-
this.handleBreadcrumbUpdate();
|
|
16
15
|
}
|
|
17
|
-
handleBreadcrumbUpdate() {
|
|
18
|
-
|
|
16
|
+
handleBreadcrumbUpdate(newVal, oldVal) {
|
|
17
|
+
oldVal = [];
|
|
18
|
+
this.breadcrumbs = [];
|
|
19
|
+
this.breadcrumbs = [...newVal];
|
|
19
20
|
}
|
|
20
21
|
handleBreadcrumbClick(clickedId, url) {
|
|
21
22
|
const index = this.visibleBreadcrumbs.findIndex(b => b.id === clickedId);
|
|
@@ -47,7 +48,7 @@ export class GbBreadcrumbs {
|
|
|
47
48
|
}
|
|
48
49
|
render() {
|
|
49
50
|
const btnType = this.resolveType();
|
|
50
|
-
return (h("div", { key: '
|
|
51
|
+
return (h("div", { key: 'd9118f7e9d27563bca3df61c6ea31c9a4a15ec5b', class: `breadcrumbs_div ${this.type}` }, h("div", { key: '6bc009e44a0e8867434fc8ecc931ad9e5f08b7ec', class: `tabs ${this.type}` }, h("gb-breadcrumb-button-base", { key: 'bd094cb841b49585d0c8dc1d9b2c6501c0a0694f', icon: true, "icon-src": this.icon, type: btnType, current: this.visibleBreadcrumbs.length === 0, onClick: () => this.handleHomeClick() }), this.visibleBreadcrumbs.map((breadcrumb, index) => (h("div", { class: "breadcrumb-item", key: breadcrumb.id }, this.renderDivider(), h("gb-breadcrumb-button-base", { icon: false, label: breadcrumb.label, type: btnType, current: index === this.visibleBreadcrumbs.length - 1, onClick: () => this.handleBreadcrumbClick(breadcrumb.id, breadcrumb.url) })))))));
|
|
51
52
|
}
|
|
52
53
|
static get is() { return "gb-breadcrumbs"; }
|
|
53
54
|
static get encapsulation() { return "shadow"; }
|
|
@@ -107,9 +108,14 @@ export class GbBreadcrumbs {
|
|
|
107
108
|
"type": "unknown",
|
|
108
109
|
"mutable": false,
|
|
109
110
|
"complexType": {
|
|
110
|
-
"original": "
|
|
111
|
-
"resolved": "
|
|
112
|
-
"references": {
|
|
111
|
+
"original": "breadCrumb[]",
|
|
112
|
+
"resolved": "breadCrumb[]",
|
|
113
|
+
"references": {
|
|
114
|
+
"breadCrumb": {
|
|
115
|
+
"location": "global",
|
|
116
|
+
"id": "global::breadCrumb"
|
|
117
|
+
}
|
|
118
|
+
}
|
|
113
119
|
},
|
|
114
120
|
"required": false,
|
|
115
121
|
"optional": false,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"gb-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/gb-breadcrumbs/gb-breadcrumbs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;
|
|
1
|
+
{"version":3,"file":"gb-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/gb-breadcrumbs/gb-breadcrumbs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Event, EventEmitter, State, Watch } from '@stencil/core';\r\n\r\ninterface breadCrumb {\r\n label: string; \r\n id: string; \r\n url: string\r\n}\r\n@Component({\r\n tag: 'gb-breadcrumbs',\r\n styleUrl: 'gb-breadcrumbs.css',\r\n shadow: true,\r\n})\r\n\r\nexport class GbBreadcrumbs {\r\n @Prop() type: 'text' | 'text_with_line' | 'button_primary' | 'button_gray' | 'button_gray_with_border' = 'text';\r\n @Prop() divider: 'chevron' | 'slash' = 'chevron';\r\n @Prop() breadcrumbs: breadCrumb[] = [\r\n // { label: 'Projects', id: 'projects' },\r\n // { label: 'Design System', id: 'design-system' },\r\n // { label: 'Buttons', id: 'buttons' },\r\n ];\r\n @Prop() icon?: string;\r\n @Event() breadcrumbClicked: EventEmitter<{ id: string; url?: string }>;\r\n @State() visibleBreadcrumbs: breadCrumb[] = [];\r\n\r\n componentWillLoad() {\r\n this.visibleBreadcrumbs = [...this.breadcrumbs];\r\n }\r\n\r\n @Watch('breadcrumbs')\r\n handleBreadcrumbUpdate(newVal: breadCrumb[], oldVal: breadCrumb[]) {\r\n oldVal = []\r\n this.breadcrumbs = [];\r\n this.breadcrumbs = [...newVal];\r\n }\r\n\r\n private handleBreadcrumbClick(clickedId: string, url: string) {\r\n const index = this.visibleBreadcrumbs.findIndex(b => b.id === clickedId);\r\n if (index !== -1) {\r\n this.visibleBreadcrumbs = this.visibleBreadcrumbs.slice(0, index + 1);\r\n this.breadcrumbClicked.emit({ id: clickedId, url });\r\n }\r\n }\r\n\r\n private handleHomeClick() {\r\n this.visibleBreadcrumbs = [];\r\n this.breadcrumbClicked.emit({ id: 'home' });\r\n }\r\n\r\n private renderDivider() {\r\n return this.divider === 'chevron' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M6 4C6 4 10 6.946 10 8C10 9.054 6 12 6 12\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5.833 18.333L14.167 1.667\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n );\r\n }\r\n\r\n private resolveType() {\r\n switch (this.type) {\r\n case 'text':\r\n case 'text_with_line':\r\n return 'text';\r\n case 'button_primary':\r\n return 'button_primary';\r\n case 'button_gray':\r\n case 'button_gray_with_border':\r\n return 'button_gray';\r\n default:\r\n return 'text';\r\n }\r\n }\r\n\r\n render() {\r\n const btnType = this.resolveType();\r\n\r\n return (\r\n <div class={`breadcrumbs_div ${this.type}`}>\r\n <div class={`tabs ${this.type}`}>\r\n {/* Home button */}\r\n <gb-breadcrumb-button-base\r\n icon={true}\r\n icon-src={this.icon}\r\n type={btnType}\r\n current={this.visibleBreadcrumbs.length === 0}\r\n onClick={() => this.handleHomeClick()}\r\n ></gb-breadcrumb-button-base>\r\n\r\n {this.visibleBreadcrumbs.map((breadcrumb, index) => (\r\n <div class=\"breadcrumb-item\" key={breadcrumb.id}>\r\n {this.renderDivider()}\r\n <gb-breadcrumb-button-base\r\n icon={false}\r\n label={breadcrumb.label}\r\n type={btnType}\r\n current={index === this.visibleBreadcrumbs.length - 1}\r\n onClick={() => this.handleBreadcrumbClick(breadcrumb.id, breadcrumb.url)}\r\n ></gb-breadcrumb-button-base>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"]}
|
|
@@ -20,10 +20,10 @@ const GbBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class GbBreadcrumbs ext
|
|
|
20
20
|
}
|
|
21
21
|
componentWillLoad() {
|
|
22
22
|
this.visibleBreadcrumbs = [...this.breadcrumbs];
|
|
23
|
-
this.handleBreadcrumbUpdate();
|
|
24
23
|
}
|
|
25
|
-
handleBreadcrumbUpdate() {
|
|
26
|
-
this.breadcrumbs =
|
|
24
|
+
handleBreadcrumbUpdate(newVal, oldVal) {
|
|
25
|
+
this.breadcrumbs = [];
|
|
26
|
+
this.breadcrumbs = [...newVal];
|
|
27
27
|
}
|
|
28
28
|
handleBreadcrumbClick(clickedId, url) {
|
|
29
29
|
const index = this.visibleBreadcrumbs.findIndex(b => b.id === clickedId);
|
|
@@ -55,7 +55,7 @@ const GbBreadcrumbs$1 = /*@__PURE__*/ proxyCustomElement(class GbBreadcrumbs ext
|
|
|
55
55
|
}
|
|
56
56
|
render() {
|
|
57
57
|
const btnType = this.resolveType();
|
|
58
|
-
return (h("div", { key: '
|
|
58
|
+
return (h("div", { key: 'd9118f7e9d27563bca3df61c6ea31c9a4a15ec5b', class: `breadcrumbs_div ${this.type}` }, h("div", { key: '6bc009e44a0e8867434fc8ecc931ad9e5f08b7ec', class: `tabs ${this.type}` }, h("gb-breadcrumb-button-base", { key: 'bd094cb841b49585d0c8dc1d9b2c6501c0a0694f', icon: true, "icon-src": this.icon, type: btnType, current: this.visibleBreadcrumbs.length === 0, onClick: () => this.handleHomeClick() }), this.visibleBreadcrumbs.map((breadcrumb, index) => (h("div", { class: "breadcrumb-item", key: breadcrumb.id }, this.renderDivider(), h("gb-breadcrumb-button-base", { icon: false, label: breadcrumb.label, type: btnType, current: index === this.visibleBreadcrumbs.length - 1, onClick: () => this.handleBreadcrumbClick(breadcrumb.id, breadcrumb.url) })))))));
|
|
59
59
|
}
|
|
60
60
|
static get watchers() { return {
|
|
61
61
|
"breadcrumbs": ["handleBreadcrumbUpdate"]
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"gb-breadcrumbs.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,morEAAmorE;;
|
|
1
|
+
{"file":"gb-breadcrumbs.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,morEAAmorE;;MCa/orEA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;AAN1B,IAAA,WAAA,GAAA;;;;;AAOU,QAAA,IAAI,CAAA,IAAA,GAA6F,MAAM;AACvG,QAAA,IAAO,CAAA,OAAA,GAAwB,SAAS;QACxC,IAAA,CAAA,WAAW,GAAiB;;;;SAInC;AAGQ,QAAA,IAAkB,CAAA,kBAAA,GAAiB,EAAE;AAoF/C;IAlFC,iBAAiB,GAAA;QACf,IAAI,CAAC,kBAAkB,GAAG,CAAC,GAAG,IAAI,CAAC,WAAW,CAAC;;IAIjD,sBAAsB,CAAC,MAAoB,EAAE,MAAoB,EAAA;AAE/D,QAAA,IAAI,CAAC,WAAW,GAAG,EAAE;AACrB,QAAA,IAAI,CAAC,WAAW,GAAG,CAAC,GAAG,MAAM,CAAC;;IAGxB,qBAAqB,CAAC,SAAiB,EAAE,GAAW,EAAA;AAC1D,QAAA,MAAM,KAAK,GAAG,IAAI,CAAC,kBAAkB,CAAC,SAAS,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,SAAS,CAAC;AACxE,QAAA,IAAI,KAAK,KAAK,EAAE,EAAE;AAChB,YAAA,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,kBAAkB,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,GAAG,CAAC,CAAC;AACrE,YAAA,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;;;IAI/C,eAAe,GAAA;AACrB,QAAA,IAAI,CAAC,kBAAkB,GAAG,EAAE;QAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,CAAC;;IAGrC,aAAa,GAAA;QACnB,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAC/B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,2CAA2C,EAAC,MAAM,EAAC,SAAS,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,GAAG,CACrI,KAEN,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAA,EAC5F,CAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,4BAA4B,EAAC,MAAM,EAAC,SAAS,EAAA,cAAA,EAAc,KAAK,EAAA,gBAAA,EAAgB,OAAO,EAAiB,iBAAA,EAAA,OAAO,EAAG,CAAA,CACtH,CACP;;IAGK,WAAW,GAAA;AACjB,QAAA,QAAQ,IAAI,CAAC,IAAI;AACf,YAAA,KAAK,MAAM;AACX,YAAA,KAAK,gBAAgB;AACnB,gBAAA,OAAO,MAAM;AACf,YAAA,KAAK,gBAAgB;AACnB,gBAAA,OAAO,gBAAgB;AACzB,YAAA,KAAK,aAAa;AAClB,YAAA,KAAK,yBAAyB;AAC5B,gBAAA,OAAO,aAAa;AACtB,YAAA;AACE,gBAAA,OAAO,MAAM;;;IAInB,MAAM,GAAA;AACJ,QAAA,MAAM,OAAO,GAAG,IAAI,CAAC,WAAW,EAAE;AAElC,QAAA,QACE,4DAAK,KAAK,EAAE,CAAmB,gBAAA,EAAA,IAAI,CAAC,IAAI,CAAA,CAAE,EAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAA,KAAA,EAAQ,IAAI,CAAC,IAAI,CAAE,CAAA,EAAA,EAE7B,CAAA,CAAA,2BAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAE,IAAI,EAAA,UAAA,EACA,IAAI,CAAC,IAAI,EACnB,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,MAAM,KAAK,CAAC,EAC7C,OAAO,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,EACV,CAAA,EAE5B,IAAI,CAAC,kBAAkB,CAAC,GAAG,CAAC,CAAC,UAAU,EAAE,KAAK,MAC7C,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAC,GAAG,EAAE,UAAU,CAAC,EAAE,EAAA,EAC5C,IAAI,CAAC,aAAa,EAAE,EACrB,CACE,CAAA,2BAAA,EAAA,EAAA,IAAI,EAAE,KAAK,EACX,KAAK,EAAE,UAAU,CAAC,KAAK,EACvB,IAAI,EAAE,OAAO,EACb,OAAO,EAAE,KAAK,KAAK,IAAI,CAAC,kBAAkB,CAAC,MAAM,GAAG,CAAC,EACrD,OAAO,EAAE,MAAM,IAAI,CAAC,qBAAqB,CAAC,UAAU,CAAC,EAAE,EAAE,UAAU,CAAC,GAAG,CAAC,EAC7C,CAAA,CACzB,CACP,CAAC,CACE,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["GbBreadcrumbs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/gb-breadcrumbs/gb-breadcrumbs.css?tag=gb-breadcrumbs&encapsulation=shadow","src/components/gb-breadcrumbs/gb-breadcrumbs.tsx"],"sourcesContent":["@import './../../global/global.css';\r\n\r\n:host{\r\n width: 100%;\r\n}\r\n\r\n.breadcrumbs_div {\r\n display: inline-flex;\r\n align-items: center;\r\n}\r\n\r\n.breadcrumb-item{\r\n display: flex;\r\n align-items: center;\r\n gap: var(--spacing-2);\r\n}\r\n\r\n.breadcrumbs_div.text_with_line {\r\n display: inline-flex;\r\n padding: 0.5rem 0rem;\r\n flex-direction: column;\r\n justify-content: center;\r\n align-items: flex-start;\r\n gap: 0.5rem;\r\n border-top: 1px solid var(--color-border-subtler, #e3e8ef);\r\n border-bottom: 1px solid var(--color-border-subtler, #e3e8ef);\r\n}\r\n\r\n.breadcrumbs_div.button_gray_with_border{\r\npadding: 0.25rem;\r\nalign-items: center;\r\nborder-radius: 0.5rem;\r\nborder: 1px solid var(--color-border-subtler, #CDD5DF);\r\nbackground: var(--color-background-gray-subtlest, #F6F8FA);\r\n}\r\n\r\n.tabs {\r\n display: flex;\r\n align-items: center;\r\n}\r\n\r\n.tabs.text,\r\n.tabs.text_with_line {\r\n gap: var(--spacing-3);\r\n}\r\n\r\n.tabs.text_with_line {\r\n padding-left: var(--spacing-3);\r\n}\r\n\r\n.tabs.button_primary,\r\n.tabs.button_gray,\r\n.tabs.button_gray_with_border {\r\n gap: var(--spacing-2);\r\n}\r\n","import { Component, Prop, h, Event, EventEmitter, State, Watch } from '@stencil/core';\r\n\r\ninterface breadCrumb {\r\n label: string; \r\n id: string; \r\n url: string\r\n}\r\n@Component({\r\n tag: 'gb-breadcrumbs',\r\n styleUrl: 'gb-breadcrumbs.css',\r\n shadow: true,\r\n})\r\n\r\nexport class GbBreadcrumbs {\r\n @Prop() type: 'text' | 'text_with_line' | 'button_primary' | 'button_gray' | 'button_gray_with_border' = 'text';\r\n @Prop() divider: 'chevron' | 'slash' = 'chevron';\r\n @Prop() breadcrumbs: breadCrumb[] = [\r\n // { label: 'Projects', id: 'projects' },\r\n // { label: 'Design System', id: 'design-system' },\r\n // { label: 'Buttons', id: 'buttons' },\r\n ];\r\n @Prop() icon?: string;\r\n @Event() breadcrumbClicked: EventEmitter<{ id: string; url?: string }>;\r\n @State() visibleBreadcrumbs: breadCrumb[] = [];\r\n\r\n componentWillLoad() {\r\n this.visibleBreadcrumbs = [...this.breadcrumbs];\r\n }\r\n\r\n @Watch('breadcrumbs')\r\n handleBreadcrumbUpdate(newVal: breadCrumb[], oldVal: breadCrumb[]) {\r\n oldVal = []\r\n this.breadcrumbs = [];\r\n this.breadcrumbs = [...newVal];\r\n }\r\n\r\n private handleBreadcrumbClick(clickedId: string, url: string) {\r\n const index = this.visibleBreadcrumbs.findIndex(b => b.id === clickedId);\r\n if (index !== -1) {\r\n this.visibleBreadcrumbs = this.visibleBreadcrumbs.slice(0, index + 1);\r\n this.breadcrumbClicked.emit({ id: clickedId, url });\r\n }\r\n }\r\n\r\n private handleHomeClick() {\r\n this.visibleBreadcrumbs = [];\r\n this.breadcrumbClicked.emit({ id: 'home' });\r\n }\r\n\r\n private renderDivider() {\r\n return this.divider === 'chevron' ? (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 16 16\" fill=\"none\">\r\n <path d=\"M6 4C6 4 10 6.946 10 8C10 9.054 6 12 6 12\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n ) : (\r\n <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\" fill=\"none\">\r\n <path d=\"M5.833 18.333L14.167 1.667\" stroke=\"#CDD5DF\" stroke-width=\"1.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\" />\r\n </svg>\r\n );\r\n }\r\n\r\n private resolveType() {\r\n switch (this.type) {\r\n case 'text':\r\n case 'text_with_line':\r\n return 'text';\r\n case 'button_primary':\r\n return 'button_primary';\r\n case 'button_gray':\r\n case 'button_gray_with_border':\r\n return 'button_gray';\r\n default:\r\n return 'text';\r\n }\r\n }\r\n\r\n render() {\r\n const btnType = this.resolveType();\r\n\r\n return (\r\n <div class={`breadcrumbs_div ${this.type}`}>\r\n <div class={`tabs ${this.type}`}>\r\n {/* Home button */}\r\n <gb-breadcrumb-button-base\r\n icon={true}\r\n icon-src={this.icon}\r\n type={btnType}\r\n current={this.visibleBreadcrumbs.length === 0}\r\n onClick={() => this.handleHomeClick()}\r\n ></gb-breadcrumb-button-base>\r\n\r\n {this.visibleBreadcrumbs.map((breadcrumb, index) => (\r\n <div class=\"breadcrumb-item\" key={breadcrumb.id}>\r\n {this.renderDivider()}\r\n <gb-breadcrumb-button-base\r\n icon={false}\r\n label={breadcrumb.label}\r\n type={btnType}\r\n current={index === this.visibleBreadcrumbs.length - 1}\r\n onClick={() => this.handleBreadcrumbClick(breadcrumb.id, breadcrumb.url)}\r\n ></gb-breadcrumb-button-base>\r\n </div>\r\n ))}\r\n </div>\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
|
package/dist/docs.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"timestamp": "2025-04-
|
|
2
|
+
"timestamp": "2025-04-14T14:17:50",
|
|
3
3
|
"compiler": {
|
|
4
4
|
"name": "@stencil/core",
|
|
5
5
|
"version": "4.28.2",
|
|
@@ -3142,11 +3142,16 @@
|
|
|
3142
3142
|
"props": [
|
|
3143
3143
|
{
|
|
3144
3144
|
"name": "breadcrumbs",
|
|
3145
|
-
"type": "
|
|
3145
|
+
"type": "breadCrumb[]",
|
|
3146
3146
|
"complexType": {
|
|
3147
|
-
"original": "
|
|
3148
|
-
"resolved": "
|
|
3149
|
-
"references": {
|
|
3147
|
+
"original": "breadCrumb[]",
|
|
3148
|
+
"resolved": "breadCrumb[]",
|
|
3149
|
+
"references": {
|
|
3150
|
+
"breadCrumb": {
|
|
3151
|
+
"location": "global",
|
|
3152
|
+
"id": "global::breadCrumb"
|
|
3153
|
+
}
|
|
3154
|
+
}
|
|
3150
3155
|
},
|
|
3151
3156
|
"mutable": false,
|
|
3152
3157
|
"reflectToAttr": false,
|
|
@@ -3155,7 +3160,7 @@
|
|
|
3155
3160
|
"default": "[\r\n // { label: 'Projects', id: 'projects' },\r\n // { label: 'Design System', id: 'design-system' },\r\n // { label: 'Buttons', id: 'buttons' },\r\n ]",
|
|
3156
3161
|
"values": [
|
|
3157
3162
|
{
|
|
3158
|
-
"type": "
|
|
3163
|
+
"type": "breadCrumb[]"
|
|
3159
3164
|
}
|
|
3160
3165
|
],
|
|
3161
3166
|
"optional": false,
|
|
@@ -290,10 +290,10 @@ const GbBreadcrumbs = class {
|
|
|
290
290
|
}
|
|
291
291
|
componentWillLoad() {
|
|
292
292
|
this.visibleBreadcrumbs = [...this.breadcrumbs];
|
|
293
|
-
this.handleBreadcrumbUpdate();
|
|
294
293
|
}
|
|
295
|
-
handleBreadcrumbUpdate() {
|
|
296
|
-
this.breadcrumbs =
|
|
294
|
+
handleBreadcrumbUpdate(newVal, oldVal) {
|
|
295
|
+
this.breadcrumbs = [];
|
|
296
|
+
this.breadcrumbs = [...newVal];
|
|
297
297
|
}
|
|
298
298
|
handleBreadcrumbClick(clickedId, url) {
|
|
299
299
|
const index = this.visibleBreadcrumbs.findIndex(b => b.id === clickedId);
|
|
@@ -325,7 +325,7 @@ const GbBreadcrumbs = class {
|
|
|
325
325
|
}
|
|
326
326
|
render() {
|
|
327
327
|
const btnType = this.resolveType();
|
|
328
|
-
return (h("div", { key: '
|
|
328
|
+
return (h("div", { key: 'd9118f7e9d27563bca3df61c6ea31c9a4a15ec5b', class: `breadcrumbs_div ${this.type}` }, h("div", { key: '6bc009e44a0e8867434fc8ecc931ad9e5f08b7ec', class: `tabs ${this.type}` }, h("gb-breadcrumb-button-base", { key: 'bd094cb841b49585d0c8dc1d9b2c6501c0a0694f', icon: true, "icon-src": this.icon, type: btnType, current: this.visibleBreadcrumbs.length === 0, onClick: () => this.handleHomeClick() }), this.visibleBreadcrumbs.map((breadcrumb, index) => (h("div", { class: "breadcrumb-item", key: breadcrumb.id }, this.renderDivider(), h("gb-breadcrumb-button-base", { icon: false, label: breadcrumb.label, type: btnType, current: index === this.visibleBreadcrumbs.length - 1, onClick: () => this.handleBreadcrumbClick(breadcrumb.id, breadcrumb.url) })))))));
|
|
329
329
|
}
|
|
330
330
|
static get watchers() { return {
|
|
331
331
|
"breadcrumbs": ["handleBreadcrumbUpdate"]
|