@rededor/cura 1.6.0-alpha.2 → 1.6.0-alpha.4

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.
Files changed (62) hide show
  1. package/dist/cjs/cura-accordion_18.cjs.entry.js +30 -21
  2. package/dist/cjs/cura-accordion_18.cjs.entry.js.map +1 -1
  3. package/dist/cjs/cura-display.cjs.entry.js +1 -1
  4. package/dist/cjs/cura-display.cjs.entry.js.map +1 -1
  5. package/dist/cjs/cura.cjs.js +1 -1
  6. package/dist/cjs/loader.cjs.js +1 -1
  7. package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.js +2 -3
  8. package/dist/collection/components/cura-dropdown-search-new/cura-dropdown-search-new.js.map +1 -1
  9. package/dist/collection/components/forms/cura-input-text/cura-input-text.js +3 -2
  10. package/dist/collection/components/forms/cura-input-text/cura-input-text.js.map +1 -1
  11. package/dist/collection/components/forms/cura-label/cura-label.css +12 -3
  12. package/dist/collection/components/forms/cura-label/cura-label.js +26 -5
  13. package/dist/collection/components/forms/cura-label/cura-label.js.map +1 -1
  14. package/dist/collection/components/forms/cura-label/cura-label.stories.js +13 -1
  15. package/dist/collection/components/forms/cura-label/cura-label.stories.js.map +1 -1
  16. package/dist/collection/components/text/cura-display/cura-display.css +22 -22
  17. package/dist/collection/components/text/cura-heading/cura-heading.css +9 -0
  18. package/dist/collection/components/text/cura-heading/cura-heading.js +23 -2
  19. package/dist/collection/components/text/cura-heading/cura-heading.js.map +1 -1
  20. package/dist/collection/components/text/cura-heading/cura-heading.stories.js +13 -1
  21. package/dist/collection/components/text/cura-heading/cura-heading.stories.js.map +1 -1
  22. package/dist/collection/components/text/cura-paragraph/cura-paragraph.css +36 -28
  23. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js +27 -6
  24. package/dist/collection/components/text/cura-paragraph/cura-paragraph.js.map +1 -1
  25. package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js +13 -1
  26. package/dist/collection/components/text/cura-paragraph/cura-paragraph.stories.js.map +1 -1
  27. package/dist/components/cura-display.js +1 -1
  28. package/dist/components/cura-display.js.map +1 -1
  29. package/dist/components/cura-dropdown-search-new.js +2 -3
  30. package/dist/components/cura-dropdown-search-new.js.map +1 -1
  31. package/dist/components/cura-heading2.js +7 -3
  32. package/dist/components/cura-heading2.js.map +1 -1
  33. package/dist/components/cura-input-text2.js +3 -2
  34. package/dist/components/cura-input-text2.js.map +1 -1
  35. package/dist/components/cura-label2.js +10 -6
  36. package/dist/components/cura-label2.js.map +1 -1
  37. package/dist/components/cura-paragraph2.js +11 -7
  38. package/dist/components/cura-paragraph2.js.map +1 -1
  39. package/dist/cura/cura.esm.js +1 -1
  40. package/dist/cura/cura.esm.js.map +1 -1
  41. package/dist/cura/p-8fb3bede.entry.js +2 -0
  42. package/dist/cura/p-8fb3bede.entry.js.map +1 -0
  43. package/dist/cura/p-b3582389.entry.js +2 -0
  44. package/dist/cura/p-b3582389.entry.js.map +1 -0
  45. package/dist/esm/cura-accordion_18.entry.js +30 -21
  46. package/dist/esm/cura-accordion_18.entry.js.map +1 -1
  47. package/dist/esm/cura-display.entry.js +1 -1
  48. package/dist/esm/cura-display.entry.js.map +1 -1
  49. package/dist/esm/cura.js +1 -1
  50. package/dist/esm/loader.js +1 -1
  51. package/dist/types/components/forms/cura-label/cura-label.d.ts +8 -1
  52. package/dist/types/components/forms/cura-label/cura-label.stories.d.ts +15 -0
  53. package/dist/types/components/text/cura-heading/cura-heading.d.ts +8 -1
  54. package/dist/types/components/text/cura-heading/cura-heading.stories.d.ts +15 -0
  55. package/dist/types/components/text/cura-paragraph/cura-paragraph.d.ts +8 -1
  56. package/dist/types/components/text/cura-paragraph/cura-paragraph.stories.d.ts +15 -0
  57. package/dist/types/components.d.ts +24 -0
  58. package/package.json +2 -2
  59. package/dist/cura/p-823d0bb5.entry.js +0 -2
  60. package/dist/cura/p-823d0bb5.entry.js.map +0 -1
  61. package/dist/cura/p-9dd47ec6.entry.js +0 -2
  62. package/dist/cura/p-9dd47ec6.entry.js.map +0 -1
@@ -782,8 +782,7 @@ const CuraDropdownSearchNew = class {
782
782
  }
783
783
  this.dropdownSelectableItems = selectable;
784
784
  this.dropdownItems = elements;
785
- if (hasNotFound)
786
- this.status = 'error';
785
+ this.status = hasNotFound ? 'error' : 'default';
787
786
  }
788
787
  enterZoom() {
789
788
  this.scrollBehavior.disableScroll();
@@ -815,7 +814,7 @@ const CuraDropdownSearchNew = class {
815
814
  };
816
815
  }
817
816
  render() {
818
- return (index.h(index.Host, { key: '1ebfc600579b7a386966dcf00cf7136085e13709', style: this.getHostCSSProperties() }, index.h("div", { key: '80dcb14a6abaa3128197884188ef1f1ebd08d019', class: this.getClasses(), style: this.styles }, index.h("div", { key: '1255e6429cad5132e46c6492e379393632d30297', class: "component-controls" }, this.isMobile && this.zoomState ? (index.h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', index.h("cura-input-text", { key: 'e603b95729405c50726a68897d543355cb131f3f', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", { key: 'a5a0f6df5162929eba35f75db09b2f7bf2f25636', name: "helperText" }))), index.h("div", { key: 'c39b6cf44904bbd755bb43791055d925ffb78d2b', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, index.h("slot", { key: 'd0fc526af6d27f793d195030165be8224ebd356c', onSlotchange: () => this.handleSlotChange() })))));
817
+ return (index.h(index.Host, { key: '10bfe6693cbad85caedd053c7804c66e16b63b9b', style: this.getHostCSSProperties() }, index.h("div", { key: 'b6ed23ac2bd6dd19709bb1525b88c10973382f3c', class: this.getClasses(), style: this.styles }, index.h("div", { key: '89eb60826cb1d3e2d77493da91891d5095f9e732', class: "component-controls" }, this.isMobile && this.zoomState ? (index.h("cura-button-transparent", { fontColor: "dark", onClick: () => this.handleBackClick(), iconName: "arrowLeft", size: "large", iconOnly: true, color: "primary", id: "button-back" })) : '', index.h("cura-input-text", { key: 'cfb55f46fa33ac08c2b64fb47708153c7e0dbb41', disabled: this.disabled, label: this.label, part: "cura-input-field", mode: this.zoomState ? 'transparent' : 'default', required: this.required, iconName: this.icon || 'search', value: this.value, status: this.status, onValueChange: (ev) => this.handleInputValueChange(ev), onInput: (ev) => this._preventEvent(ev), onFocus: () => this.handleFocus(), onClick: (ev) => this._preventEvent(ev), onBlur: () => this.handleBlur(), onFocusout: () => this.handleFocusout(), onInputClear: (ev) => this.handleInputClear(ev), placeholder: this.placeholder, size: this.size, onKeyDown: (ev) => this.handleKeyDown(ev) }, index.h("slot", { key: '4de246df633b7b3c5820dcc8200b0315a74d6988', name: "helperText" }))), index.h("div", { key: 'f5dd97d36299433265ed85e42c1ed7dbf2b157e5', class: "dropdown-container", onMouseOver: () => this.handleDropdownMouseOver() }, index.h("slot", { key: '6001f5ab4aec1b74ad817e17605d45525a536d4a', onSlotchange: () => this.handleSlotChange() })))));
819
818
  }
820
819
  get host() { return index.getElement(this); }
821
820
  };
@@ -873,7 +872,7 @@ const CuraDropdownSearchOptionNew = class {
873
872
  };
874
873
  CuraDropdownSearchOptionNew.style = CuraDropdownSearchOptionNewStyle0;
875
874
 
876
- const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1 ::slotted(b),:host h1 ::slotted(strong),:host h2 ::slotted(b),:host h2 ::slotted(strong),:host h3 ::slotted(b),:host h3 ::slotted(strong),:host h4 ::slotted(b),:host h4 ::slotted(strong),:host h5 ::slotted(b),:host h5 ::slotted(strong),:host h6 ::slotted(b),:host h6 ::slotted(strong){font-weight:var(--font-weight-medium)}:host h1 ::slotted(a),:host h2 ::slotted(a),:host h3 ::slotted(a),:host h4 ::slotted(a),:host h5 ::slotted(a),:host h6 ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-spot);text-underline-offset:10%;cursor:pointer}:host h1 ::slotted(u),:host h2 ::slotted(u),:host h3 ::slotted(u),:host h4 ::slotted(u),:host h5 ::slotted(u),:host h6 ::slotted(u){text-underline-offset:10%}:host h1 ::slotted(abbr),:host h2 ::slotted(abbr),:host h3 ::slotted(abbr),:host h4 ::slotted(abbr),:host h5 ::slotted(abbr),:host h6 ::slotted(abbr){color:var(--color-spot);text-decoration:underline dashed 1px var(--color-spot);text-underline-offset:10%;cursor:default}:host h1 ::slotted(i),:host h2 ::slotted(i),:host h3 ::slotted(i),:host h4 ::slotted(i),:host h5 ::slotted(i),:host h6 ::slotted(i){font-weight:var(--font-weight-medium)}:host h1 ::slotted(em),:host h2 ::slotted(em),:host h3 ::slotted(em),:host h4 ::slotted(em),:host h5 ::slotted(em),:host h6 ::slotted(em){color:var(--color-spot);font-weight:var(--font-weight-bold);font-style:normal}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}";
875
+ const curaHeadingCss = ":host{display:block;font-size:var(--font-size-base)}:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-family:var(--font-family);font-size:1.714em;font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0px}:host h1.bold-weight,:host h2.bold-weight,:host h3.bold-weight,:host h4.bold-weight,:host h5.bold-weight,:host h6.bold-weight{font-weight:var(--font-weight-medium)}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.071em;letter-spacing:-0.58px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.214em;line-height:calc(var(--line-height) + 20%)}:host h1.small.bold-weight,:host h1.small ::slotted(b),:host h1.small ::slotted(strong),:host h2.small.bold-weight,:host h2.small ::slotted(b),:host h2.small ::slotted(strong),:host h3.small.bold-weight,:host h3.small ::slotted(b),:host h3.small ::slotted(strong),:host h4.small.bold-weight,:host h4.small ::slotted(b),:host h4.small ::slotted(strong),:host h5.small.bold-weight,:host h5.small ::slotted(b),:host h5.small ::slotted(strong),:host h6.small.bold-weight,:host h6.small ::slotted(b),:host h6.small ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;font-weight:var(--font-weight-medium);letter-spacing:0.6px}:host h1.xsmall.bold-weight,:host h1.xsmall ::slotted(b),:host h1.xsmall ::slotted(strong),:host h2.xsmall.bold-weight,:host h2.xsmall ::slotted(b),:host h2.xsmall ::slotted(strong),:host h3.xsmall.bold-weight,:host h3.xsmall ::slotted(b),:host h3.xsmall ::slotted(strong),:host h4.xsmall.bold-weight,:host h4.xsmall ::slotted(b),:host h4.xsmall ::slotted(strong),:host h5.xsmall.bold-weight,:host h5.xsmall ::slotted(b),:host h5.xsmall ::slotted(strong),:host h6.xsmall.bold-weight,:host h6.xsmall ::slotted(b),:host h6.xsmall ::slotted(strong){font-weight:var(--font-weight-bold)}:host h1.textoverflow-single,:host h2.textoverflow-single,:host h3.textoverflow-single,:host h4.textoverflow-single,:host h5.textoverflow-single,:host h6.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host h1 ::slotted(b),:host h1 ::slotted(strong),:host h2 ::slotted(b),:host h2 ::slotted(strong),:host h3 ::slotted(b),:host h3 ::slotted(strong),:host h4 ::slotted(b),:host h4 ::slotted(strong),:host h5 ::slotted(b),:host h5 ::slotted(strong),:host h6 ::slotted(b),:host h6 ::slotted(strong){font-weight:var(--font-weight-medium)}:host h1 ::slotted(a),:host h2 ::slotted(a),:host h3 ::slotted(a),:host h4 ::slotted(a),:host h5 ::slotted(a),:host h6 ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-spot);text-underline-offset:10%;cursor:pointer}:host h1 ::slotted(u),:host h2 ::slotted(u),:host h3 ::slotted(u),:host h4 ::slotted(u),:host h5 ::slotted(u),:host h6 ::slotted(u){text-underline-offset:10%}:host h1 ::slotted(abbr),:host h2 ::slotted(abbr),:host h3 ::slotted(abbr),:host h4 ::slotted(abbr),:host h5 ::slotted(abbr),:host h6 ::slotted(abbr){color:var(--color-spot);text-decoration:underline dashed 1px var(--color-spot);text-underline-offset:10%;cursor:default}:host h1 ::slotted(i),:host h2 ::slotted(i),:host h3 ::slotted(i),:host h4 ::slotted(i),:host h5 ::slotted(i),:host h6 ::slotted(i){font-weight:var(--font-weight-medium)}:host h1 ::slotted(em),:host h2 ::slotted(em),:host h3 ::slotted(em),:host h4 ::slotted(em),:host h5 ::slotted(em),:host h6 ::slotted(em){color:var(--color-spot);font-weight:var(--font-weight-bold);font-style:normal}@media (min-width: 769px) and (max-width: 1920px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2em}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.357em;letter-spacing:-0.66px}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.357em}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) + 3%);letter-spacing:0.72px}}@media (min-width: 1921px){:host h1,:host h2,:host h3,:host h4,:host h5,:host h6{font-size:2.5em;line-height:calc(var(--line-height) + 5%);letter-spacing:-0.82px}:host h1.large,:host h2.large,:host h3.large,:host h4.large,:host h5.large,:host h6.large{font-size:2.929em}:host h1.small,:host h2.small,:host h3.small,:host h4.small,:host h5.small,:host h6.small{font-size:1.714em;line-height:calc(var(--line-height) + 30%);letter-spacing:0%}:host h1.xsmall,:host h2.xsmall,:host h3.xsmall,:host h4.xsmall,:host h5.xsmall,:host h6.xsmall{font-size:1em;line-height:calc(var(--line-height) + 12.857%);letter-spacing:0.28px}}";
877
876
  const CuraHeadingStyle0 = curaHeadingCss;
878
877
 
879
878
  const CuraHeading = class {
@@ -887,13 +886,16 @@ const CuraHeading = class {
887
886
  this.color = undefined;
888
887
  this.marginBlock = '1.25em';
889
888
  this.lineHeight = '130%';
889
+ this.textOverflow = 'none';
890
890
  this.styles = {};
891
891
  }
892
892
  connectedCallback() {
893
893
  this.setFontProperties();
894
894
  }
895
895
  getClasses() {
896
- const classes = {};
896
+ const classes = {
897
+ 'textoverflow-single': this.textOverflow === 'single'
898
+ };
897
899
  classes[this.size.toLowerCase()] = true;
898
900
  classes[`${this.weight.toLowerCase()}-weight`] = true;
899
901
  return classes;
@@ -934,7 +936,7 @@ const CuraHeading = class {
934
936
  return tags[`${this.level}`] || tags['default'];
935
937
  }
936
938
  render() {
937
- return (index.h(index.Host, { key: '4391dea57899c00ccd536f007f3054c162957fad', style: this.hostCSSProperties() }, this.getHeadingTag()));
939
+ return (index.h(index.Host, { key: '16917fae239920b3a22f98cebe744b6195865980', style: this.hostCSSProperties() }, this.getHeadingTag()));
938
940
  }
939
941
  get host() { return index.getElement(this); }
940
942
  };
@@ -4772,8 +4774,9 @@ const CuraInputText = class {
4772
4774
  success: { name: 'checkCircle', color: 'success-dark' },
4773
4775
  error: { name: 'alertCircle', color: 'error-dark' },
4774
4776
  default: { name: this.iconName, color: 'neutral-dark' },
4777
+ disabled: { name: this.iconName, color: 'neutral-medium' },
4775
4778
  };
4776
- const iconConfig = iconMap[this.isLoading ? 'loading' : this.status || 'default'];
4779
+ const iconConfig = iconMap[this.isLoading ? 'loading' : this.disabled ? 'disabled' : this.status || 'default'];
4777
4780
  return (index.h("div", { class: "feedback-icon", style: this.styles }, index.h("cura-icon", { name: iconConfig.name, iconset: "default", size: baseIconSize, color: iconConfig.color })));
4778
4781
  }
4779
4782
  renderHelperText() {
@@ -4938,7 +4941,7 @@ const CuraInputText = class {
4938
4941
  e.preventDefault();
4939
4942
  }
4940
4943
  render() {
4941
- return (index.h(index.Host, { key: '6c14493558642a993e4fa541b2a932e6cf9308a1' }, index.h("div", { key: '0084cfcd8ba41736f0cd2ca56a5183b1921c9c52', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, index.h("div", { key: '27998cb277338c329ee0c4afefd7dbf2a7621990', class: "input-wrapper" }, this.label && (index.h("cura-label", { key: '2f57bdcff2b1bdbfcfb9bd01faedec5f372dfe5d', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && index.h("span", { key: 'da05203184e4772fd25853407640de241382f050', class: "required" }, "* "))), index.h("div", { key: '03cbae962e628e3ea3bb7ba0d8cfd0f89f37b758', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), index.h("input", { key: 'e89fdaf2fc20169474afc960b320d64fcc8579bd', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (index.h("cura-icon", { key: 'ea541b239b97920ab02fd88aafec39169c20c5a0', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && index.h("cura-loader-circle", { key: 'ecb67fbc7e3796009f30bd16b0a1c2ce82052666', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
4944
+ return (index.h(index.Host, { key: 'c53dc04465ff2231ccff332ac8b484160ab9132a' }, index.h("div", { key: '58692ae518ada377a5c3e3ff1063b67e486bba27', style: this.styles, onMouseEnter: () => this.handleMouseEnter(), onMouseLeave: () => this.handleMouseLeave(), class: Object.assign({ 'cura-input-group': true }, this.getClasses()) }, index.h("div", { key: '3b7beaaed8856c2b6effc496e613bc9c5bfeedcb', class: "input-wrapper" }, this.label && (index.h("cura-label", { key: 'fd0bac070c03084ad9ad310f042564740f07873e', class: "label", weight: "bold", size: this.size === 'large' ? 'small' : 'xsmall', color: this.getLabelColor() }, this.label, " ", this.required && index.h("span", { key: '71a1c36a7326c7c1383321d80ecdb90ddd09ee24', class: "required" }, "* "))), index.h("div", { key: '1be4fd76aa1e419eebc8feaa0a648579385b8bd2', class: "cura-input-field", part: "cura-input-field", style: this.styles }, this.renderIcon(), index.h("input", { key: '57df52c9261513ee1cd7d8e00e653e7c1f2c92af', name: this.name ? this.name : '', type: this.type, onKeyDown: event => this.handleKeyDown(event), onBlur: this.handleInputBlur.bind(this), onFocus: this.handleInputFocus.bind(this), onInput: event => this.handleInputChange(event), class: this.getClasses(), style: this.styles, placeholder: this.placeholder, disabled: this.disabled || this.isLoading, required: this.required, readonly: this.readOnly, maxlength: this.maxlength, value: this.value !== undefined && this.value !== null ? this.value : '', inputmode: this.maskPreset ? 'tel' : this.inputMode, ref: ref => (this.inputRef = ref), autocomplete: this.autocomplete }), !!this.clearIcon && !this.readOnly && !this.isLoading && !this.disabled && this.value && this.isFocused && (index.h("cura-icon", { key: '4c6e7fdd3dd5670019fea38c02ce077dec5fa4ad', size: this.size === 'large' || this.mode === 'transparent' ? 20 : 16, color: "primary-base", name: "closeCircle", iconset: "default", class: "clear-button", onClick: () => this.handleClearInput() })), this.isLoading && index.h("cura-loader-circle", { key: 'e0aecafef20fac68dbeaff9669ea63df8cfd3ef6', size: this.size === 'large' ? 'medium' : 'small', color: "primary-base" })), this.renderHelperText()))));
4942
4945
  }
4943
4946
  static get formAssociated() { return true; }
4944
4947
  get host() { return index.getElement(this); }
@@ -4954,7 +4957,7 @@ const CuraInputText = class {
4954
4957
  };
4955
4958
  CuraInputText.style = CuraInputTextStyle0;
4956
4959
 
4957
- const curaLabelCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host ::slotted(u){text-underline-offset:10%}:host ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
4960
+ const curaLabelCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:1.143em;font-weight:var(--font-weight-medium);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.32px}:host p.bold-weight,:host p ::slotted(b),:host p ::slotted(strong),:host p ::slotted(u){font-weight:var(--font-weight-bold)}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) - 4%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 4%);letter-spacing:0.56px}:host p.xsmall{font-size:0.857em;line-height:calc(var(--line-height) - 17%);letter-spacing:0.72px}:host p.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host p ::slotted(a){font-weight:var(--font-weight-bold);color:var(--color-link);text-underline-offset:10%}:host p ::slotted(u){text-underline-offset:10%}:host p ::slotted(abbr){color:var(--color-link);text-decoration:underline dashed 1px var(--color-link);text-underline-offset:10%;cursor:default}";
4958
4961
  const CuraLabelStyle0 = curaLabelCss;
4959
4962
 
4960
4963
  const CuraLabel = class {
@@ -4967,6 +4970,7 @@ const CuraLabel = class {
4967
4970
  this.color = undefined;
4968
4971
  this.marginBlock = '0';
4969
4972
  this.lineHeight = '125%';
4973
+ this.textOverflow = 'none';
4970
4974
  this.styles = {};
4971
4975
  }
4972
4976
  handleChangeColor() {
@@ -4977,10 +4981,12 @@ const CuraLabel = class {
4977
4981
  this.setColors();
4978
4982
  }
4979
4983
  getClasses() {
4980
- const sizeclass = {};
4981
- sizeclass[this.size.toLowerCase()] = true;
4982
- sizeclass[`${this.weight.toLowerCase()}-weight`] = true;
4983
- return sizeclass;
4984
+ const classes = {
4985
+ 'textoverflow-single': this.textOverflow === 'single',
4986
+ };
4987
+ classes[this.size.toLowerCase()] = true;
4988
+ classes[`${this.weight.toLowerCase()}-weight`] = true;
4989
+ return classes;
4984
4990
  }
4985
4991
  setFontProperties() {
4986
4992
  this.weights = this.theme.fonts.getWeights();
@@ -5006,7 +5012,7 @@ const CuraLabel = class {
5006
5012
  };
5007
5013
  }
5008
5014
  render() {
5009
- return (index.h(index.Host, { key: '185d6a679086dfc3fc2e1bb2b8e55759e7a68506', style: this.hostCSSProperties() }, index.h("p", { key: 'c5514dcec410d3f2b9b1c0a0cb7ee182b4d082ec', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '6dde4081303f411728cf3c8769252d9565859b67' }))));
5015
+ return (index.h(index.Host, { key: '42bde16eab50dffb9b198cd9d68fb178031bcb24', style: this.hostCSSProperties() }, index.h("p", { key: 'ac8f20f5f28fd37a3229bc2c9b1c0a2f229f31ee', style: this.styles, class: this.getClasses() }, index.h("slot", { key: 'a9a8f4634b10384c3ee083da848a7e72f2a67876' }))));
5010
5016
  }
5011
5017
  get host() { return index.getElement(this); }
5012
5018
  static get watchers() { return {
@@ -5070,7 +5076,7 @@ const CuraPageTemplate = class {
5070
5076
  };
5071
5077
  CuraPageTemplate.style = CuraPageTemplateStyle0;
5072
5078
 
5073
- const curaParagraphCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}:host p.large{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}:host p.caption,:host p.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}@media (min-width: 769px) and (max-width: 1920px){:host p{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}:host p.caption,:host p.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){:host p{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.large{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}:host p.caption,:host p.xsmall{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}:host ::slotted(b),:host ::slotted(strong){font-weight:var(--font-weight-bold)}:host ::slotted(a),:host ::slotted(span a),:host ::slotted(a:-webkit-any-link),:host p a{font-weight:var(--font-weight-medium);color:var(--color-spot);text-underline-offset:10%}:host ::slotted(u){font-weight:var(--font-weight-medium);text-underline-offset:10%}:host ::slotted(i){font-style:italic}:host ::slotted(em){font-weight:var(--font-weight-bold);color:var(--color-spot);font-style:normal}:host ::slotted(abbr){color:var(--color-spot);text-decoration:underline dashed 1px var(--color-spot);text-underline-offset:10%;cursor:default}";
5079
+ const curaParagraphCss = ":host{display:block;font-size:var(--font-size-base)}:host p{font-family:var(--font-family);font-size:var(--font-size-base);font-weight:var(--font-weight-regular);color:var(--color-body);line-height:var(--line-height);margin-block:var(--margin-block);letter-spacing:0.28px}:host p.large{font-size:1.214em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:0.85em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.48px}:host p.caption,:host p.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.6px}:host p.textoverflow-single{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}:host p ::slotted(b),:host p ::slotted(strong){font-weight:var(--font-weight-bold)}:host p ::slotted(a),:host p ::slotted(a:-webkit-any-link){font-weight:var(--font-weight-medium);color:var(--color-spot);text-underline-offset:10%}:host p ::slotted(u){font-weight:var(--font-weight-medium);text-underline-offset:10%}:host p ::slotted(i){font-style:italic}:host p ::slotted(em){font-weight:var(--font-weight-bold);color:var(--color-spot);font-style:normal}:host p ::slotted(abbr){color:var(--color-spot);text-decoration:underline dashed 1px var(--color-spot);text-underline-offset:10%;cursor:default}@media (min-width: 769px) and (max-width: 1920px){:host p{font-size:1.143em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.32px}:host p.large{font-size:1.357em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.small{font-size:1em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.56px}:host p.caption,:host p.xsmall{font-size:0.8571428571em;line-height:calc(var(--line-height) - 5%);letter-spacing:0.72px}}@media (min-width: 1921px){:host p{font-size:1.429em;line-height:calc(var(--line-height) + 10%);letter-spacing:0px}:host p.large{font-size:1.714em;line-height:calc(var(--line-height) + 20%)}:host p.small{font-size:1.21em;line-height:calc(var(--line-height) + 5%);letter-spacing:0px}:host p.caption,:host p.xsmall{font-size:1em;line-height:calc(var(--line-height) + 5%);letter-spacing:0.28px}}";
5074
5080
  const CuraParagraphStyle0 = curaParagraphCss;
5075
5081
 
5076
5082
  const CuraParagraph = class {
@@ -5082,16 +5088,12 @@ const CuraParagraph = class {
5082
5088
  this.color = undefined;
5083
5089
  this.marginBlock = '1.25em';
5084
5090
  this.lineHeight = '140%';
5091
+ this.textOverflow = 'none';
5085
5092
  this.styles = {};
5086
5093
  }
5087
5094
  connectedCallback() {
5088
5095
  this.setFontProperties();
5089
5096
  }
5090
- setsizeClass() {
5091
- const sizeclass = {};
5092
- sizeclass[this.size.toLowerCase()] = true;
5093
- return sizeclass;
5094
- }
5095
5097
  setFontProperties() {
5096
5098
  this.weights = this.theme.fonts.getWeights();
5097
5099
  this.fontSizeBase = this.theme.fonts.getSize();
@@ -5114,8 +5116,15 @@ const CuraParagraph = class {
5114
5116
  '--color-spot': this.theme.colors.getColor(`${this.spotColor}`)
5115
5117
  };
5116
5118
  }
5119
+ getClasses() {
5120
+ const classes = {
5121
+ 'textoverflow-single': this.textOverflow === 'single',
5122
+ };
5123
+ classes[this.size.toLowerCase()] = true;
5124
+ return classes;
5125
+ }
5117
5126
  render() {
5118
- return (index.h(index.Host, { key: '25f7b2e93068638f8268c4b5910d533d0e95f0bf', style: this.hostCSSProperties() }, index.h("p", { key: '359c72d839b3782871e7831dfbe1495908c2c7af', style: this.styles, class: this.setsizeClass() }, index.h("slot", { key: '7d3b014c67bc239efb2cafe532f87105208600d8' }))));
5127
+ return (index.h(index.Host, { key: '7b1bc13afe5749f31574986ac91b497aa7ff2c71', style: this.hostCSSProperties() }, index.h("p", { key: '3614b36c4cd1dadde454b67312dc694fd0063d79', style: this.styles, class: this.getClasses() }, index.h("slot", { key: '7dae91cae891902a729cd1270799ff911289d505' }))));
5119
5128
  }
5120
5129
  get host() { return index.getElement(this); }
5121
5130
  };