@siemens/ix 1.5.0-beta.2 → 1.5.0-beta.3
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/ix-breadcrumb_2.cjs.entry.js +6 -2
- package/dist/cjs/ix-breadcrumb_2.cjs.entry.js.map +1 -1
- package/dist/cjs/ix-date-picker_2.cjs.entry.js +3077 -3835
- package/dist/cjs/ix-date-picker_2.cjs.entry.js.map +1 -1
- package/dist/collection/components/breadcrumb/breadcrumb.css +2 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js +5 -1
- package/dist/collection/components/breadcrumb/breadcrumb.js.map +1 -1
- package/dist/components/ix-breadcrumb.js +6 -2
- package/dist/components/ix-breadcrumb.js.map +1 -1
- package/dist/components/luxon.js +3077 -3835
- package/dist/components/luxon.js.map +1 -1
- package/dist/esm/ix-breadcrumb_2.entry.js +6 -2
- package/dist/esm/ix-breadcrumb_2.entry.js.map +1 -1
- package/dist/esm/ix-date-picker_2.entry.js +3077 -3835
- package/dist/esm/ix-date-picker_2.entry.js.map +1 -1
- package/dist/siemens-ix/p-78f2b858.entry.js +2 -0
- package/dist/siemens-ix/p-78f2b858.entry.js.map +1 -0
- package/dist/siemens-ix/p-dbcf33de.entry.js +2 -0
- package/dist/siemens-ix/p-dbcf33de.entry.js.map +1 -0
- package/dist/siemens-ix/siemens-ix.esm.js +1 -1
- package/dist/types/components/date-picker/date-picker.d.ts +3 -3
- package/dist/types/components/time-picker/time-picker.d.ts +3 -3
- package/package.json +3 -4
- package/dist/siemens-ix/p-1701b127.entry.js +0 -2
- package/dist/siemens-ix/p-1701b127.entry.js.map +0 -1
- package/dist/siemens-ix/p-cdb54f7c.entry.js +0 -2
- package/dist/siemens-ix/p-cdb54f7c.entry.js.map +0 -1
|
@@ -6,7 +6,7 @@ const index = require('./index-478a4b66.js');
|
|
|
6
6
|
const anime_es = require('./anime.es-8822f296.js');
|
|
7
7
|
const mutationObserver = require('./mutation-observer-eaaa5399.js');
|
|
8
8
|
|
|
9
|
-
const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:
|
|
9
|
+
const breadcrumbCss = ".sc-ix-breadcrumb-h{display:flex;height:2.5rem;justify-content:flex-start;align-items:center;background-color:transparent;overflow:hidden}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb{position:relative;display:flex;justify-content:flex-start;align-items:center;white-space:nowrap;border-radius:var(--theme-breadcrumb--border-radius);height:2rem;max-height:2rem;min-width:0;-webkit-margin-end:0.25rem;margin-inline-end:0.25rem;padding:0.5rem 0 0.5rem 0.25rem;outline:none;cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:flex;align-items:center;min-width:0;font-weight:700}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb ix-icon.sc-ix-breadcrumb{-webkit-margin-end:0.25rem;margin-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{-webkit-margin-start:0.25rem;margin-inline-start:0.25rem;-webkit-margin-end:0;margin-inline-end:0}.sc-ix-breadcrumb-h .crumb.last.sc-ix-breadcrumb{background-color:transparent !important;cursor:default;-webkit-padding-end:0.25rem;padding-inline-end:0.25rem}.sc-ix-breadcrumb-h .crumb.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):focus-visible{border-color:var(--theme-focus--border-color)}.sc-ix-breadcrumb-h .crumb.sc-ix-breadcrumb:not(:last-of-type){flex-shrink:0;max-width:14rem}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb{overflow:visible}.sc-ix-breadcrumb-h .crumb-dropdown.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .remove-anchor.sc-ix-breadcrumb::after{display:none}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb{display:flex}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .more-text-ellipsis.sc-ix-breadcrumb{width:1rem;display:inline-block;font-weight:700}.sc-ix-breadcrumb-h .more-text.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{line-height:unset}.sc-ix-breadcrumb-h .crumb-items.sc-ix-breadcrumb{display:contents}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-btn--background);border:var(--theme-btn--btn-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color)}.sc-ix-breadcrumb-h .crumb.btn.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color)}.sc-ix-breadcrumb-h .crumb.btn.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-last--color)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-btn--background--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-btn--background--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn--color--active)}.sc-ix-breadcrumb-h .crumb.btn.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-btn-arrow--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb{background-color:var(--theme-breadcrumb-ghost--background);border:var(--theme-btn--ghost-thickness) solid transparent;transition:150ms}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color)}.sc-ix-breadcrumb-h .crumb.ghost.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color)}.sc-ix-breadcrumb-h .crumb.ghost.last.sc-ix-breadcrumb .crumb-text.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-last--color)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover{background-color:var(--theme-breadcrumb-ghost--background--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):hover .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--hover)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled){cursor:pointer}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active{background-color:var(--theme-breadcrumb-ghost--background--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb,.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .glyph.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost--color--active)}.sc-ix-breadcrumb-h .crumb.ghost.clickable.sc-ix-breadcrumb:not(.remove-hover):not(.disabled):not(:disabled):active .crumb-text.sc-ix-breadcrumb+.glyph-chevron-right-small.sc-ix-breadcrumb{color:var(--theme-breadcrumb-ghost-arrow--color--active)}";
|
|
10
10
|
|
|
11
11
|
const Breadcrumb = class {
|
|
12
12
|
constructor(hostRef) {
|
|
@@ -112,7 +112,11 @@ const Breadcrumb = class {
|
|
|
112
112
|
btn: !this.ghost,
|
|
113
113
|
last: isLastItem,
|
|
114
114
|
'remove-hover': isLastItem,
|
|
115
|
-
}, onClick: () => this.clickItem(item.label, last), "data-testid": "item" }, index.h("span", { class: "crumb-text remove-anchor" }, item.icon ? index.h("ix-icon", { name: item.icon, size: "16" }) : '',
|
|
115
|
+
}, onClick: () => this.clickItem(item.label, last), "data-testid": "item" }, index.h("span", { class: "crumb-text remove-anchor" }, item.icon ? index.h("ix-icon", { name: item.icon, size: "16" }) : '', index.h("span", { style: {
|
|
116
|
+
whiteSpace: 'nowrap',
|
|
117
|
+
overflow: 'hidden',
|
|
118
|
+
textOverflow: 'ellipsis',
|
|
119
|
+
} }, item.label)), !isLastItem ? (index.h("span", { class: "glyph glyph-18 glyph-chevron-right-small text-default-text" })) : null));
|
|
116
120
|
});
|
|
117
121
|
}
|
|
118
122
|
render() {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"file":"ix-breadcrumb.ix-breadcrumb-item.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,2mQAA2mQ;;MC2BpnQ,UAAU;;;;;4BAIM,CAAC;qBAKE,EAAE;iBAKhB,KAAK;;;iBA0BgC,EAAE;;EARvD,IAAI,eAAe;IACjB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,oBAAoB,CAAC,CAAC,CAAC;GAC5E;EAED,IAAI,UAAU;IACZ,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAAC,qBAAqB,CAAC,CAAC,CAAC;GAC7E;EAMO,WAAW,CAAC,IAAY;IAC9B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAC3B;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,GAAGA,uCAAsB,CAAC;MAC7C,MAAM,YAAY,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;MACrC,MAAM,MAAM,GAAG;QACb,IAAI,CAAC,KAAK,GAAG,YAAY,CAAC;OAC3B,CAAC;MAEF,IAAI,YAAY,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QAC5C,MAAM,EAAE,CAAC;OACV;WAAM,IAAI,YAAY,CAAC,MAAM,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,EAAE;QAClD,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,CAAgB,CAAC;QACxE,IAAI,CAAC,gBAAgB,CAAC,IAAI,EAAE,MAAM,MAAM,EAAE,CAAC,CAAC;OAC7C;KACF,CAAC,CAAC;IAEH,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAC3B,IAAI,CAAC,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,EAC9C;MACE,OAAO,EAAE,IAAI;MACb,SAAS,EAAE,IAAI;KAChB,CACF,CAAC;GACH;EAED,iBAAiB;IACf,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC;GAC9B;EAEO,QAAQ;IACd,OAAO,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC,IAAI;MACnC,OAAO,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;KAC/C,CAAC,CAAC;GACJ;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;GACrC;EAEO,gBAAgB,CAAC,GAAgB,EAAE,QAAoB;IAC7DC,cAAO,CAAC;MACN,OAAO,EAAE,GAAG;MACZ,UAAU,EAAE,OAAO;MACnB,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,MAAM,EAAE,QAAQ;MAChB,QAAQ,EAAE,MAAM,QAAQ,EAAE;KAC3B,CAAC,CAAC;GACJ;EAEO,eAAe,CAAC,GAAgB;IACtCA,cAAO,CAAC;MACN,OAAO,EAAE,GAAG;MACZ,QAAQ,EAAE,GAAG;MACb,OAAO,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC;MACf,UAAU,EAAE,CAAC,OAAO,EAAE,IAAI,CAAC;MAC3B,MAAM,EAAE,QAAQ;KACjB,CAAC,CAAC;GACJ;EAEO,mBAAmB,CAAC,GAAmB,EAAE,IAAa;;IAC5D,IAAI,IAAI,EAAE;MACR,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,CAAC;KAC3B;IACD,IAAI,IAAI,KAAI,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAA,EAAE;MAClC,IAAI,CAAC,aAAa,GAAG,GAAG,CAAC;KAC1B;GACF;EAEO,gBAAgB;IACtB,IAAI,UAAU,GAAG,CAAC,CAAC;IAEnB,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,EAAE;MAC7C,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC;KACxD;IAED,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC;GACrC;EAEO,SAAS,CAAC,IAAY,EAAE,IAAa;IAC3C,IAAI,CAAC,IAAI,EAAE;MACT,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC;KACxB;GACF;EAEO,qBAAqB;IAC3B,OAAO,IAAI,CAAC,gBAAgB,EAAE,CAAC,GAAG,CAAC,CAAC,IAAI,EAAEC,OAAK,EAAE,KAAK;;MACpD,MAAM,IAAI,GAAGA,OAAK,KAAK,KAAK,CAAC,MAAM,GAAG,CAAC,CAAC;MAExC,MAAM,UAAU,GAAG,IAAI,IAAI,EAAC,MAAA,IAAI,CAAC,SAAS,0CAAE,MAAM,CAAA,CAAC;MACnD,QACEC,iBACE,GAAG,EAAE,CAAC,GAAG,KAAK,IAAI,CAAC,mBAAmB,CAAC,GAAG,EAAE,IAAI,CAAC,qBAChCD,OAAK,EACtB,KAAK,EAAE;UACL,KAAK,EAAE,IAAI;UACX,SAAS,EAAE,IAAI;UACf,KAAK,EAAE,IAAI,CAAC,KAAK;UACjB,GAAG,EAAE,CAAC,IAAI,CAAC,KAAK;UAChB,IAAI,EAAE,UAAU;UAChB,cAAc,EAAE,UAAU;SAC3B,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,iBACnC,MAAM,IAElBC,kBAAM,KAAK,EAAC,0BAA0B,IACnC,IAAI,CAAC,IAAI,GAAGA,qBAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,IAAI,EAAC,IAAI,GAAW,GAAG,EAAE,EAC/D,IAAI,CAAC,KAAK,CACN,EACN,CAAC,UAAU,IACVA,kBAAM,KAAK,EAAC,4DAA4D,GAAQ,IAC9E,IAAI,CACJ,EACN;KACH,CAAC,CAAC;GACJ;EAED,MAAM;;IACJ,QACEA,QAACC,UAAI,QACHD,yBACE,OAAO,EACL,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,IAAI,CAAC,gBAAgB;UACtC,IAAI,CAAC,iBAAiB;UACtB,IAAI,IAGT,IAAI,CAAC,KAAK;OACR,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,KAAK,CAAC,MAAM,GAAG,IAAI,CAAC,gBAAgB,CAAC;OACnD,GAAG,CAAC,CAAC,IAAI,MACRA,8BACE,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,MAAM,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,GACzB,CACrB,CAAC,CACQ,EACb,CAAA,MAAA,IAAI,CAAC,KAAK,0CAAE,MAAM,IAAG,IAAI,CAAC,gBAAgB,IACzCA,iBACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAE,CAAC,GAAG,MAAM,IAAI,CAAC,iBAAiB,GAAG,GAAG,CAAC,IAE5CA,kBAAM,KAAK,EAAC,yBAAyB,IACnCA,kBAAM,KAAK,EAAC,oBAAoB,UAAW,EAC3CA,kBAAM,KAAK,EAAC,oCAAoC,GAAQ,CACnD,CACH,IACJ,IAAI,EACRA,iBAAK,KAAK,EAAC,aAAa,IACrB,IAAI,CAAC,qBAAqB,EAAE,EAC7BA,qBAAa,CACT,EACNA,yBAAa,OAAO,EAAE,IAAI,CAAC,aAAa,IACrC,MAAA,IAAI,CAAC,SAAS,0CAAE,GAAG,CAAC,CAAC,IAAI,MACxBA,8BACE,KAAK,EAAE,IAAI,EACX,OAAO,EAAE,CAAC,CAAC;QACT,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UAClB,KAAK,EAAE,CAAC;UACR,IAAI;SACL,CAAC,CAAC;OACJ,GACiB,CACrB,CAAC,CACU,CACT,EACP;GACH;;;;;AChPH,MAAM,iBAAiB,GAAG,yCAAyC;;MCgBtD,cAAc;;;;;;EAWzB,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,qBAAa,CACR,EACP;GACH;;;;;;;","names":["createMutationObserver","animejs","index","h","Host"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=scoped","./src/components/breadcrumb/breadcrumb.tsx","./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=scoped","./src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n@mixin crumb-hover($variant) {\n @include hover {\n background-color: var(--theme-breadcrumb-#{$variant}--background--hover);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-breadcrumb-#{$variant}--background--active);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n}\n\n@mixin breadcrumb($variant) {\n .crumb.#{$variant} {\n background-color: var(--theme-breadcrumb-#{$variant}--background);\n border: var(--theme-btn--#{$variant}-thickness) solid transparent;\n transition: $default-time;\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color);\n }\n\n &.last .crumb-text {\n color: var(--theme-breadcrumb-#{$variant}-last--color);\n }\n\n &.clickable:not(.remove-hover) {\n @include hover {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--hover\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--active\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n }\n }\n}\n\n:host {\n display: flex;\n height: $large-control-height;\n justify-content: flex-start;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .crumb {\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n white-space: nowrap;\n border-radius: var(--theme-breadcrumb--border-radius);\n height: $default-control-height;\n max-height: $default-control-height;\n min-width: 0;\n margin-inline-end: $tiny-space;\n padding: $small-space 0 $small-space $tiny-space;\n outline: none;\n cursor: pointer;\n\n @include crumb-hover('btn');\n\n .crumb-text {\n @include ellipsis;\n display: block;\n min-width: 0;\n font-weight: $font-weight-bold;\n\n ix-icon {\n margin-inline-end: $tiny-space;\n }\n }\n\n .crumb-text + .glyph-chevron-right-small {\n margin-inline-start: $tiny-space;\n margin-inline-end: 0; // Overwrite global selector: .btn .glyph\n }\n\n &.last {\n background-color: transparent !important;\n cursor: default;\n padding-inline-end: $tiny-space;\n }\n\n &.clickable:not(.remove-hover) {\n @include focus-visible {\n border-color: var(--theme-focus--border-color);\n }\n }\n\n &:not(:last-of-type) {\n flex-shrink: 0;\n max-width: 14rem;\n }\n }\n\n .crumb-dropdown {\n overflow: visible;\n\n .glyph::after {\n display: none;\n }\n }\n\n .remove-anchor::after {\n display: none;\n }\n\n .more-text {\n display: flex;\n\n .more-text-ellipsis {\n width: 1rem;\n display: inline-block;\n font-weight: $font-weight-bold;\n }\n\n .glyph {\n line-height: unset;\n }\n }\n\n .crumb-items {\n display: contents;\n }\n\n @include breadcrumb('btn');\n @include breadcrumb('ghost');\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n scoped: true,\n})\nexport class Breadcrumb {\n /**\n * Excess items will get hidden inside of dropdown\n */\n @Prop() visibleItemCount = 9;\n\n /**\n * Items will be accessible through a dropdown\n */\n @Prop() nextItems: string[] = [];\n\n /**\n * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n */\n @Prop() ghost = false;\n\n /**\n * Crumb item clicked event\n */\n @Event() itemClick: EventEmitter<string>;\n\n /**\n * Next item clicked event\n */\n @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n @State() previousButtonRef: HTMLElement;\n\n @State() nextButtonRef: HTMLElement;\n\n @Element() hostElement: HTMLIxBreadcrumbElement;\n\n get breadcrumbItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n }\n\n get crumbItems() {\n return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));\n }\n\n @State() items: { label: string; icon?: string }[] = [];\n\n private mutationObserver: MutationObserver;\n\n private onItemClick(item: string) {\n this.itemClick.emit(item);\n }\n\n componentDidLoad() {\n this.mutationObserver = createMutationObserver(() => {\n const updatedItems = this.getItems();\n const update = () => {\n this.items = updatedItems;\n };\n\n if (updatedItems.length >= this.items.length) {\n update();\n } else if (updatedItems.length < this.items.length) {\n const last = this.crumbItems[this.crumbItems.length - 1] as HTMLElement;\n this.animationFadeOut(last, () => update());\n }\n });\n\n this.mutationObserver.observe(\n this.hostElement.querySelector('.crumb-items'),\n {\n subtree: true,\n childList: true,\n }\n );\n }\n\n componentWillLoad() {\n this.items = this.getItems();\n }\n\n private getItems() {\n return this.breadcrumbItems.map((item) => {\n return { label: item.label, icon: item.icon };\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n private animationFadeOut(ref: HTMLElement, complete: () => void) {\n animejs({\n targets: ref,\n translateX: '-100%',\n duration: 150,\n opacity: [1, 0],\n easing: 'linear',\n complete: () => complete(),\n });\n }\n\n private animationFadeIn(ref: HTMLElement) {\n animejs({\n targets: ref,\n duration: 150,\n opacity: [0, 1],\n translateX: ['-100%', '0%'],\n easing: 'linear',\n });\n }\n\n private handleLastButtonRef(ref: HTMLDivElement, last: boolean) {\n if (last) {\n this.animationFadeIn(ref);\n }\n if (last && this.nextItems?.length) {\n this.nextButtonRef = ref;\n }\n }\n\n private sliceHiddenItems() {\n let sliceIndex = 0;\n\n if (this.items.length > this.visibleItemCount) {\n sliceIndex = this.items.length - this.visibleItemCount;\n }\n\n return this.items.slice(sliceIndex);\n }\n\n private clickItem(item: string, last: boolean) {\n if (!last) {\n this.onItemClick(item);\n }\n }\n\n private renderBreadcrumbItems() {\n return this.sliceHiddenItems().map((item, index, array) => {\n const last = index === array.length - 1;\n\n const isLastItem = last && !this.nextItems?.length;\n return (\n <div\n ref={(ref) => this.handleLastButtonRef(ref, last)}\n data-breadcrumb={index}\n class={{\n crumb: true,\n clickable: true,\n ghost: this.ghost,\n btn: !this.ghost,\n last: isLastItem,\n 'remove-hover': isLastItem,\n }}\n onClick={() => this.clickItem(item.label, last)}\n data-testid=\"item\"\n >\n <span class=\"crumb-text remove-anchor\">\n {item.icon ? <ix-icon name={item.icon} size=\"16\"></ix-icon> : ''}\n {item.label}\n </span>\n {!isLastItem ? (\n <span class=\"glyph glyph-18 glyph-chevron-right-small text-default-text\"></span>\n ) : null}\n </div>\n );\n });\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown\n trigger={\n this.items?.length > this.visibleItemCount\n ? this.previousButtonRef\n : null\n }\n >\n {this.items\n .slice(0, this.items.length - this.visibleItemCount)\n .map((item) => (\n <ix-dropdown-item\n label={item.label}\n onClick={() => this.onItemClick(item.label)}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n {this.items?.length > this.visibleItemCount ? (\n <div\n class=\"crumb crumb-dropdown\"\n ref={(ref) => (this.previousButtonRef = ref)}\n >\n <span class=\"remove-anchor more-text\">\n <span class=\"more-text-ellipsis\">...</span>\n <span class=\"glyph glyph-16 glyph-chevron-right\"></span>\n </span>\n </div>\n ) : null}\n <div class=\"crumb-items\">\n {this.renderBreadcrumbItems()}\n <slot></slot>\n </div>\n <ix-dropdown trigger={this.nextButtonRef}>\n {this.nextItems?.map((item) => (\n <ix-dropdown-item\n label={item}\n onClick={(e) => {\n this.nextClick.emit({\n event: e,\n item,\n });\n }}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n </Host>\n );\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n scoped: true,\n})\nexport class BreadcrumbItem {\n /**\n * Breadcrumb label\n */\n @Prop() label: string;\n\n /**\n * Icon to be displayed next ot the label\n */\n @Prop() icon: string;\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|
|
1
|
+
{"file":"ix-breadcrumb.ix-breadcrumb-item.entry.cjs.js","mappings":"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","names":["createMutationObserver","animejs","index","h","Host"],"sources":["./src/components/breadcrumb/breadcrumb.scss?tag=ix-breadcrumb&encapsulation=scoped","./src/components/breadcrumb/breadcrumb.tsx","./src/components/breadcrumb-item/breadcrumb-item.scss?tag=ix-breadcrumb-item&encapsulation=scoped","./src/components/breadcrumb-item/breadcrumb-item.tsx"],"sourcesContent":["/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n@import 'common-variables';\n@import 'mixins/hover';\n@import 'mixins/text-truncation';\n\n@mixin crumb-hover($variant) {\n @include hover {\n background-color: var(--theme-breadcrumb-#{$variant}--background--hover);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(--theme-breadcrumb-#{$variant}--background--active);\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n}\n\n@mixin breadcrumb($variant) {\n .crumb.#{$variant} {\n background-color: var(--theme-breadcrumb-#{$variant}--background);\n border: var(--theme-btn--#{$variant}-thickness) solid transparent;\n transition: $default-time;\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color);\n }\n\n &.last .crumb-text {\n color: var(--theme-breadcrumb-#{$variant}-last--color);\n }\n\n &.clickable:not(.remove-hover) {\n @include hover {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--hover\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--hover);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--hover);\n }\n }\n\n @include active {\n background-color: var(\n --theme-breadcrumb-#{$variant}--background--active\n );\n\n .crumb-text,\n .glyph {\n color: var(--theme-breadcrumb-#{$variant}--color--active);\n }\n\n .crumb-text + .glyph-chevron-right-small {\n color: var(--theme-breadcrumb-#{$variant}-arrow--color--active);\n }\n }\n }\n }\n}\n\n:host {\n display: flex;\n height: $large-control-height;\n justify-content: flex-start;\n align-items: center;\n background-color: transparent;\n overflow: hidden;\n\n .crumb {\n position: relative;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n white-space: nowrap;\n border-radius: var(--theme-breadcrumb--border-radius);\n height: $default-control-height;\n max-height: $default-control-height;\n min-width: 0;\n margin-inline-end: $tiny-space;\n padding: $small-space 0 $small-space $tiny-space;\n outline: none;\n cursor: pointer;\n\n @include crumb-hover('btn');\n\n .crumb-text {\n @include ellipsis;\n display: flex;\n align-items: center;\n min-width: 0;\n font-weight: $font-weight-bold;\n\n ix-icon {\n margin-inline-end: $tiny-space;\n }\n }\n\n .crumb-text + .glyph-chevron-right-small {\n margin-inline-start: $tiny-space;\n margin-inline-end: 0; // Overwrite global selector: .btn .glyph\n }\n\n &.last {\n background-color: transparent !important;\n cursor: default;\n padding-inline-end: $tiny-space;\n }\n\n &.clickable:not(.remove-hover) {\n @include focus-visible {\n border-color: var(--theme-focus--border-color);\n }\n }\n\n &:not(:last-of-type) {\n flex-shrink: 0;\n max-width: 14rem;\n }\n }\n\n .crumb-dropdown {\n overflow: visible;\n\n .glyph::after {\n display: none;\n }\n }\n\n .remove-anchor::after {\n display: none;\n }\n\n .more-text {\n display: flex;\n\n .more-text-ellipsis {\n width: 1rem;\n display: inline-block;\n font-weight: $font-weight-bold;\n }\n\n .glyph {\n line-height: unset;\n }\n }\n\n .crumb-items {\n display: contents;\n }\n\n @include breadcrumb('btn');\n @include breadcrumb('ghost');\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n Component,\n Element,\n Event,\n EventEmitter,\n h,\n Host,\n Prop,\n State,\n} from '@stencil/core';\nimport animejs from 'animejs';\nimport { createMutationObserver } from '../utils/mutation-observer';\n\n@Component({\n tag: 'ix-breadcrumb',\n styleUrl: 'breadcrumb.scss',\n scoped: true,\n})\nexport class Breadcrumb {\n /**\n * Excess items will get hidden inside of dropdown\n */\n @Prop() visibleItemCount = 9;\n\n /**\n * Items will be accessible through a dropdown\n */\n @Prop() nextItems: string[] = [];\n\n /**\n * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)\n */\n @Prop() ghost = false;\n\n /**\n * Crumb item clicked event\n */\n @Event() itemClick: EventEmitter<string>;\n\n /**\n * Next item clicked event\n */\n @Event() nextClick: EventEmitter<{ event: UIEvent; item: string }>;\n\n @State() previousButtonRef: HTMLElement;\n\n @State() nextButtonRef: HTMLElement;\n\n @Element() hostElement: HTMLIxBreadcrumbElement;\n\n get breadcrumbItems() {\n return Array.from(this.hostElement.querySelectorAll('ix-breadcrumb-item'));\n }\n\n get crumbItems() {\n return Array.from(this.hostElement.querySelectorAll('.crumb-items .crumb'));\n }\n\n @State() items: { label: string; icon?: string }[] = [];\n\n private mutationObserver: MutationObserver;\n\n private onItemClick(item: string) {\n this.itemClick.emit(item);\n }\n\n componentDidLoad() {\n this.mutationObserver = createMutationObserver(() => {\n const updatedItems = this.getItems();\n const update = () => {\n this.items = updatedItems;\n };\n\n if (updatedItems.length >= this.items.length) {\n update();\n } else if (updatedItems.length < this.items.length) {\n const last = this.crumbItems[this.crumbItems.length - 1] as HTMLElement;\n this.animationFadeOut(last, () => update());\n }\n });\n\n this.mutationObserver.observe(\n this.hostElement.querySelector('.crumb-items'),\n {\n subtree: true,\n childList: true,\n }\n );\n }\n\n componentWillLoad() {\n this.items = this.getItems();\n }\n\n private getItems() {\n return this.breadcrumbItems.map((item) => {\n return { label: item.label, icon: item.icon };\n });\n }\n\n disconnectedCallback() {\n this.mutationObserver?.disconnect();\n }\n\n private animationFadeOut(ref: HTMLElement, complete: () => void) {\n animejs({\n targets: ref,\n translateX: '-100%',\n duration: 150,\n opacity: [1, 0],\n easing: 'linear',\n complete: () => complete(),\n });\n }\n\n private animationFadeIn(ref: HTMLElement) {\n animejs({\n targets: ref,\n duration: 150,\n opacity: [0, 1],\n translateX: ['-100%', '0%'],\n easing: 'linear',\n });\n }\n\n private handleLastButtonRef(ref: HTMLDivElement, last: boolean) {\n if (last) {\n this.animationFadeIn(ref);\n }\n if (last && this.nextItems?.length) {\n this.nextButtonRef = ref;\n }\n }\n\n private sliceHiddenItems() {\n let sliceIndex = 0;\n\n if (this.items.length > this.visibleItemCount) {\n sliceIndex = this.items.length - this.visibleItemCount;\n }\n\n return this.items.slice(sliceIndex);\n }\n\n private clickItem(item: string, last: boolean) {\n if (!last) {\n this.onItemClick(item);\n }\n }\n\n private renderBreadcrumbItems() {\n return this.sliceHiddenItems().map((item, index, array) => {\n const last = index === array.length - 1;\n\n const isLastItem = last && !this.nextItems?.length;\n return (\n <div\n ref={(ref) => this.handleLastButtonRef(ref, last)}\n data-breadcrumb={index}\n class={{\n crumb: true,\n clickable: true,\n ghost: this.ghost,\n btn: !this.ghost,\n last: isLastItem,\n 'remove-hover': isLastItem,\n }}\n onClick={() => this.clickItem(item.label, last)}\n data-testid=\"item\"\n >\n <span class=\"crumb-text remove-anchor\">\n {item.icon ? <ix-icon name={item.icon} size=\"16\"></ix-icon> : ''}\n <span\n style={{\n whiteSpace: 'nowrap',\n overflow: 'hidden',\n textOverflow: 'ellipsis',\n }}\n >\n {item.label}\n </span>\n </span>\n {!isLastItem ? (\n <span class=\"glyph glyph-18 glyph-chevron-right-small text-default-text\"></span>\n ) : null}\n </div>\n );\n });\n }\n\n render() {\n return (\n <Host>\n <ix-dropdown\n trigger={\n this.items?.length > this.visibleItemCount\n ? this.previousButtonRef\n : null\n }\n >\n {this.items\n .slice(0, this.items.length - this.visibleItemCount)\n .map((item) => (\n <ix-dropdown-item\n label={item.label}\n onClick={() => this.onItemClick(item.label)}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n {this.items?.length > this.visibleItemCount ? (\n <div\n class=\"crumb crumb-dropdown\"\n ref={(ref) => (this.previousButtonRef = ref)}\n >\n <span class=\"remove-anchor more-text\">\n <span class=\"more-text-ellipsis\">...</span>\n <span class=\"glyph glyph-16 glyph-chevron-right\"></span>\n </span>\n </div>\n ) : null}\n <div class=\"crumb-items\">\n {this.renderBreadcrumbItems()}\n <slot></slot>\n </div>\n <ix-dropdown trigger={this.nextButtonRef}>\n {this.nextItems?.map((item) => (\n <ix-dropdown-item\n label={item}\n onClick={(e) => {\n this.nextClick.emit({\n event: e,\n item,\n });\n }}\n ></ix-dropdown-item>\n ))}\n </ix-dropdown>\n </Host>\n );\n }\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\n:host {\n display: block;\n}\n","/*\n * SPDX-FileCopyrightText: 2023 Siemens AG\n *\n * SPDX-License-Identifier: MIT\n *\n * This source code is licensed under the MIT license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { Component, h, Host, Prop } from '@stencil/core';\n\n@Component({\n tag: 'ix-breadcrumb-item',\n styleUrl: 'breadcrumb-item.scss',\n scoped: true,\n})\nexport class BreadcrumbItem {\n /**\n * Breadcrumb label\n */\n @Prop() label: string;\n\n /**\n * Icon to be displayed next ot the label\n */\n @Prop() icon: string;\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
|