@oiz/stzh-components 2.12.0 → 2.13.0

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 (115) hide show
  1. package/dist/cjs/{app-globals-5c0c2c46.js → app-globals-9e469998.js} +2 -2
  2. package/dist/cjs/{app-globals-5c0c2c46.js.map → app-globals-9e469998.js.map} +1 -1
  3. package/dist/cjs/loader.cjs.js +2 -2
  4. package/dist/cjs/stzh-components.cjs.js +2 -2
  5. package/dist/cjs/stzh-datalist_2.cjs.entry.js +1 -1
  6. package/dist/cjs/stzh-datalist_2.cjs.entry.js.map +1 -1
  7. package/dist/cjs/stzh-dropdown.cjs.entry.js +12 -3
  8. package/dist/cjs/stzh-dropdown.cjs.entry.js.map +1 -1
  9. package/dist/cjs/stzh-input.cjs.entry.js +2 -2
  10. package/dist/cjs/stzh-input.cjs.entry.js.map +1 -1
  11. package/dist/cjs/stzh-upload.cjs.entry.js +8 -0
  12. package/dist/cjs/stzh-upload.cjs.entry.js.map +1 -1
  13. package/dist/collection/assets/i18n/de.json +2 -2
  14. package/dist/collection/assets/i18n/en.json +2 -2
  15. package/dist/collection/components/stzh-datalist-item/stzh-datalist-item.css +1 -0
  16. package/dist/collection/components/stzh-dropdown/stzh-dropdown.js +10 -2
  17. package/dist/collection/components/stzh-dropdown/stzh-dropdown.js.map +1 -1
  18. package/dist/collection/components/stzh-input/stzh-input.css +6 -0
  19. package/dist/collection/components/stzh-input/stzh-input.js +4 -4
  20. package/dist/collection/components/stzh-input/stzh-input.js.map +1 -1
  21. package/dist/collection/components/stzh-upload/stzh-upload.js +12 -0
  22. package/dist/collection/components/stzh-upload/stzh-upload.js.map +1 -1
  23. package/dist/collection/libraries/tom-select/cjs/tom-select.complete.js +4 -3
  24. package/dist/collection/libraries/tom-select/cjs/tom-select.js +4 -3
  25. package/dist/collection/libraries/tom-select/cjs/tom-select.popular.js +4 -3
  26. package/dist/collection/libraries/tom-select/esm/tom-select.complete.js +4 -3
  27. package/dist/collection/libraries/tom-select/esm/tom-select.js +4 -3
  28. package/dist/collection/libraries/tom-select/esm/tom-select.popular.js +4 -3
  29. package/dist/collection/libraries/tom-select/js/tom-select.base.js +4 -3
  30. package/dist/collection/libraries/tom-select/js/tom-select.base.min.js +16 -16
  31. package/dist/collection/libraries/tom-select/js/tom-select.complete.js +4 -3
  32. package/dist/collection/libraries/tom-select/js/tom-select.complete.min.js +3 -3
  33. package/dist/collection/libraries/tom-select/js/tom-select.popular.js +4 -3
  34. package/dist/collection/libraries/tom-select/js/tom-select.popular.min.js +30 -30
  35. package/dist/components/index.js +1 -1
  36. package/dist/components/stzh-datalist-item2.js +1 -1
  37. package/dist/components/stzh-datalist-item2.js.map +1 -1
  38. package/dist/components/stzh-dropdown2.js +12 -3
  39. package/dist/components/stzh-dropdown2.js.map +1 -1
  40. package/dist/components/stzh-input2.js +3 -3
  41. package/dist/components/stzh-input2.js.map +1 -1
  42. package/dist/components/stzh-upload.js +10 -0
  43. package/dist/components/stzh-upload.js.map +1 -1
  44. package/dist/esm/{app-globals-bfc779f0.js → app-globals-27a24a34.js} +2 -2
  45. package/dist/esm/{app-globals-bfc779f0.js.map → app-globals-27a24a34.js.map} +1 -1
  46. package/dist/esm/loader.js +2 -2
  47. package/dist/esm/stzh-components.js +2 -2
  48. package/dist/esm/stzh-datalist_2.entry.js +1 -1
  49. package/dist/esm/stzh-datalist_2.entry.js.map +1 -1
  50. package/dist/esm/stzh-dropdown.entry.js +12 -3
  51. package/dist/esm/stzh-dropdown.entry.js.map +1 -1
  52. package/dist/esm/stzh-input.entry.js +2 -2
  53. package/dist/esm/stzh-input.entry.js.map +1 -1
  54. package/dist/esm/stzh-upload.entry.js +8 -0
  55. package/dist/esm/stzh-upload.entry.js.map +1 -1
  56. package/dist/esm-es5/{app-globals-bfc779f0.js → app-globals-27a24a34.js} +2 -2
  57. package/dist/esm-es5/loader.js +1 -1
  58. package/dist/esm-es5/loader.js.map +1 -1
  59. package/dist/esm-es5/stzh-components.js +1 -1
  60. package/dist/esm-es5/stzh-components.js.map +1 -1
  61. package/dist/esm-es5/stzh-datalist_2.entry.js +1 -1
  62. package/dist/esm-es5/stzh-datalist_2.entry.js.map +1 -1
  63. package/dist/esm-es5/stzh-dropdown.entry.js +2 -2
  64. package/dist/esm-es5/stzh-dropdown.entry.js.map +1 -1
  65. package/dist/esm-es5/stzh-input.entry.js +1 -1
  66. package/dist/esm-es5/stzh-input.entry.js.map +1 -1
  67. package/dist/esm-es5/stzh-upload.entry.js +1 -1
  68. package/dist/esm-es5/stzh-upload.entry.js.map +1 -1
  69. package/dist/stzh-components/assets/i18n/de.json +2 -2
  70. package/dist/stzh-components/assets/i18n/en.json +2 -2
  71. package/dist/stzh-components/{p-aa9975e6.entry.js → p-24d82258.entry.js} +2 -2
  72. package/dist/stzh-components/p-24d82258.entry.js.map +1 -0
  73. package/dist/stzh-components/{p-11a57dcd.entry.js → p-2653562a.entry.js} +6 -6
  74. package/dist/stzh-components/p-2653562a.entry.js.map +1 -0
  75. package/dist/stzh-components/{p-4206f3e1.system.entry.js → p-376b64c8.system.entry.js} +5 -5
  76. package/dist/stzh-components/p-376b64c8.system.entry.js.map +1 -0
  77. package/dist/stzh-components/p-651140ac.system.js +2 -0
  78. package/dist/stzh-components/{p-eed26372.system.js.map → p-651140ac.system.js.map} +1 -1
  79. package/dist/stzh-components/{p-ea2fd8f8.js → p-77585f2e.js} +2 -2
  80. package/dist/stzh-components/p-990141f4.entry.js +2 -0
  81. package/dist/stzh-components/p-990141f4.entry.js.map +1 -0
  82. package/dist/stzh-components/p-c1f89d5c.system.entry.js +2 -0
  83. package/dist/stzh-components/p-c1f89d5c.system.entry.js.map +1 -0
  84. package/dist/stzh-components/{p-4488789b.entry.js → p-c90cf7f4.entry.js} +2 -2
  85. package/dist/stzh-components/p-c90cf7f4.entry.js.map +1 -0
  86. package/dist/stzh-components/{p-9035fa3b.system.js → p-cb34f6b6.system.js} +2 -2
  87. package/dist/stzh-components/{p-b19c3193.system.entry.js → p-cf18eff2.system.entry.js} +2 -2
  88. package/dist/stzh-components/p-cf18eff2.system.entry.js.map +1 -0
  89. package/dist/stzh-components/{p-2d88c544.system.entry.js → p-e6444356.system.entry.js} +2 -2
  90. package/dist/stzh-components/p-e6444356.system.entry.js.map +1 -0
  91. package/dist/stzh-components/stzh-components.esm.js +1 -1
  92. package/dist/stzh-components/stzh-components.esm.js.map +1 -1
  93. package/dist/stzh-components/stzh-components.js +1 -1
  94. package/dist/types/components/stzh-dropdown/stzh-dropdown.d.ts +1 -1
  95. package/dist/types/components/stzh-input/stzh-input.d.ts +1 -1
  96. package/dist/types/components/stzh-upload/stzh-upload.d.ts +2 -0
  97. package/dist/types/components.d.ts +4 -4
  98. package/dist/types/libraries/tom-select/types/defaults.d.ts +1 -0
  99. package/dist/types/libraries/tom-select/types/types/settings.d.ts +1 -0
  100. package/dist/vscode-data.json +7537 -0
  101. package/package.json +1 -1
  102. package/dist/stzh-components/p-11a57dcd.entry.js.map +0 -1
  103. package/dist/stzh-components/p-2d88c544.system.entry.js.map +0 -1
  104. package/dist/stzh-components/p-4206f3e1.system.entry.js.map +0 -1
  105. package/dist/stzh-components/p-4488789b.entry.js.map +0 -1
  106. package/dist/stzh-components/p-4ad49ece.entry.js +0 -2
  107. package/dist/stzh-components/p-4ad49ece.entry.js.map +0 -1
  108. package/dist/stzh-components/p-a0b350c2.system.entry.js +0 -2
  109. package/dist/stzh-components/p-a0b350c2.system.entry.js.map +0 -1
  110. package/dist/stzh-components/p-aa9975e6.entry.js.map +0 -1
  111. package/dist/stzh-components/p-b19c3193.system.entry.js.map +0 -1
  112. package/dist/stzh-components/p-eed26372.system.js +0 -2
  113. /package/dist/esm-es5/{app-globals-bfc779f0.js.map → app-globals-27a24a34.js.map} +0 -0
  114. /package/dist/stzh-components/{p-ea2fd8f8.js.map → p-77585f2e.js.map} +0 -0
  115. /package/dist/stzh-components/{p-9035fa3b.system.js.map → p-cb34f6b6.system.js.map} +0 -0
package/dist/cjs/stzh-datalist_2.cjs.entry.js CHANGED
@@ -97,7 +97,7 @@ const StzhDatalist = class {
97
97
  };
98
98
  StzhDatalist.style = stzhDatalistCss;
99
99
 
100
- const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}";
100
+ const stzhDatalistItemCss = ".sc-stzh-datalist-item-h{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);color:var(--stzh-base-color);-webkit-box-sizing:border-box;box-sizing:border-box;display:block}[hidden].sc-stzh-datalist-item-h{display:none}.sc-stzh-datalist-item-h *.sc-stzh-datalist-item,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::before,.sc-stzh-datalist-item-h *.sc-stzh-datalist-item::after{-webkit-box-sizing:border-box;box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness)}.sc-stzh-datalist-item-h .has-focus.sc-stzh-datalist-item{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item{outline-style:none !important}.sc-stzh-datalist-item-h .stzh-fylingfocus-focused.sc-stzh-datalist-item::-moz-focus-inner{border:0 !important}.sc-stzh-datalist-item-h{--font-family:var(--stzh-font-family-regular);--font-weight:var(--stzh-font-weight-regular);--color:inherit;--action-display:flex;--label-min-width:var(--item-label-min-width, none);--leading-icon-background-color:var(--stzh-color-grey5);--leading-icon-color:var(--stzh-color-grey70);--hover-leading-icon-background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));--hover-leading-icon-color:var(--stzh-color-white);--horizontal-min-height:3rem;display:contents}[href].sc-stzh-datalist-item-h:not([href=\"\"]),[a11y-expanded].sc-stzh-datalist-item-h,[a11y-controls].sc-stzh-datalist-item-h{--color:var(--stzh-color-primary, var(--stzh-color-zueriblue));--hover-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.sc-stzh-datalist-item-h .sc-stzh-datalist-item-s>stzh-datalist{margin-left:var(--stzh-space-large)}.stzh-datalist-item.sc-stzh-datalist-item{position:relative;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__vhidden.sc-stzh-datalist-item{border:0;clip:rect(0 0 0 0);-webkit-clip-path:inset(100%);clip-path:inset(100%);width:0.0625rem;height:0.0625rem;overflow:hidden;padding:0;position:absolute}.stzh-datalist-item__wrapper.sc-stzh-datalist-item{-ms-flex-positive:1;flex-grow:1;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item__action-list.sc-stzh-datalist-item{color:inherit;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-family:inherit;background:transparent;border:none;padding:0;-webkit-text-decoration-line:none;text-decoration-line:none}.stzh-datalist-item__leading.is-button.sc-stzh-datalist-item,.stzh-datalist-item__leading.is-link.sc-stzh-datalist-item,.stzh-datalist-item__value.is-button.sc-stzh-datalist-item,.stzh-datalist-item__value.is-link.sc-stzh-datalist-item,.stzh-datalist-item__label.is-button.sc-stzh-datalist-item,.stzh-datalist-item__label.is-link.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-button.sc-stzh-datalist-item,.stzh-datalist-item__meta.is-link.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-button.sc-stzh-datalist-item,.stzh-datalist-item__action-list.is-link.sc-stzh-datalist-item{cursor:pointer}.stzh-datalist-item__leading.sc-stzh-datalist-item{-ms-flex-negative:0;flex-shrink:0}.stzh-datalist-item__leading.sc-stzh-datalist-item:not(:empty){padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--leading-icon-color);background-color:var(--leading-icon-background-color);width:2.5rem;height:2.5rem;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;border-radius:50%;-webkit-transition-property:color, background-color;transition-property:color, background-color;-webkit-transition-duration:var(--stzh-base-transition-animation-speed);transition-duration:var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-default-font-size, var(--stzh-font-milli-font-size));line-height:var(--stzh-font-curve-p1-default-text-line-height, var(--stzh-font-milli-text-line-height));letter-spacing:var(--stzh-font-curve-p1-default-text-letter-spacing);font-family:var(--font-family);font-weight:var(--font-weight);-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 1024px){.stzh-datalist-item__value.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-p1-medium-font-size, var(--stzh-font-centi-font-size));line-height:var(--stzh-font-curve-p1-medium-text-line-height, var(--stzh-font-centi-text-line-height));letter-spacing:var(--stzh-font-curve-p1-medium-text-letter-spacing)}}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--color)}.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-default-font-size, var(--stzh-font-nano-font-size));line-height:var(--stzh-font-curve-caption-default-text-line-height, var(--stzh-font-nano-text-line-height))}@media screen and (min-width: 1024px){.stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item__meta.sc-stzh-datalist-item{font-size:var(--stzh-font-curve-caption-medium-font-size, var(--stzh-font-micro-font-size));line-height:var(--stzh-font-curve-caption-medium-text-line-height, var(--stzh-font-micro-text-line-height))}}.stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-pack:end;justify-content:flex-end}.stzh-datalist-item__label.sc-stzh-datalist-item{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-lead-color)}.stzh-datalist-item__action-list.sc-stzh-datalist-item{display:var(--action-display);-ms-flex-pack:center;justify-content:center;text-align:center}.stzh-datalist-item__action-list.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item__action.is-non-interactive.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;width:var(--stzh-form-input-tiny-height);height:var(--stzh-form-input-tiny-height)}.stzh-datalist-item__action.is-button[variant=tertiary].sc-stzh-datalist-item{--color:inherit}.stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item__icon.sc-stzh-datalist-item{-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed)}.stzh-datalist-item__richtext.sc-stzh-datalist-item{color:inherit;font-family:inherit;font-weight:inherit}.stzh-datalist-item__interactive.sc-stzh-datalist-item{position:absolute;top:0;left:0}.stzh-datalist-item--is-button.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-closed.sc-stzh-datalist-item{display:none}.stzh-datalist-item--is-button.stzh-datalist-item--is-expanded.sc-stzh-datalist-item .stzh-datalist-item__icon.is-open.sc-stzh-datalist-item{display:-ms-inline-flexbox;display:inline-flex}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__icon.sc-stzh-datalist-item{color:var(--hover-color)}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__value.sc-stzh-datalist-item{-webkit-text-decoration-line:underline;text-decoration-line:underline}.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:hover .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item,.stzh-datalist-item--is-interactive.sc-stzh-datalist-item:focus-within .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{color:var(--hover-leading-icon-color);background-color:var(--hover-leading-icon-background-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item{display:-ms-flexbox;display:flex;padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-vertical.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border){border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2.5rem;height:2.5rem}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__leading-icon.sc-stzh-datalist-item{--size:var(--stzh-icon-size-medium)}.stzh-datalist-item--direction-vertical.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item{display:contents}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item+.stzh-datalist-item__nested.sc-stzh-datalist-item .stzh-datalist-item__nested-inner.sc-stzh-datalist-item{grid-column:1/6}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__action-list.sc-stzh-datalist-item{min-height:var(--horizontal-min-height)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:var(--stzh-space-xsmall);padding-bottom:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.stzh-datalist-item--has-hidden-border.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item{padding-top:calc(var(--stzh-space-xsmall) / 2);padding-bottom:calc(var(--stzh-space-xsmall) / 2)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__label.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__value.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__meta.sc-stzh-datalist-item,.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item:not(.stzh-datalist-item--has-hidden-border) .stzh-datalist-item__action-list.sc-stzh-datalist-item{border-bottom:0.0625rem solid var(--stzh-base-border-color)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__label.sc-stzh-datalist-item:not(:empty){min-width:var(--label-min-width);padding-right:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta.sc-stzh-datalist-item:not(:empty){padding-left:var(--stzh-space-xsmall)}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__leading-icon-container.sc-stzh-datalist-item{width:2rem;height:2rem}.stzh-datalist-item--direction-horizontal.sc-stzh-datalist-item .stzh-datalist-item__meta-status.sc-stzh-datalist-item+.stzh-datalist-item__meta-text.sc-stzh-datalist-item{margin-left:var(--stzh-space-xsmall)}";
101
101
 
102
102
  let datalistItemCounter = 0;
103
103
  const StzhDatalistItem = class {
package/dist/cjs/stzh-datalist_2.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"stzh-datalist.stzh-datalist-item.entry.cjs.js","mappings":"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","names":["media","addMediaChangeListener","removeMediaChangeListener","h","Host","Fragment"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":["/**\n * @prop --item-label-min-width: Min width of label\n */\n\n:host {\n --item-label-min-width: 120px;\n\n @include mq($from: smallheader) {\n --item-label-min-width: 144px;\n }\n\n &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n --item-label-min-width: none;\n }\n}\n\n:host ::slotted(stzh-details),\n.stzh-datalist stzh-details {\n --content-grid-column: 1 / 6;\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium')};\n --content-border-bottom: 1px solid #{$baseBorderColor};\n\n @include mq($from: medium) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'medium')};\n }\n\n @include mq($from: large) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'large')};\n }\n}\n\n.stzh-datalist {\n &__list {\n width: 100%;\n }\n\n /* Has hidden border variant */\n\n &--has-hidden-border &__list {\n margin-top: calc(#{space('xsmall')} / -2);\n margin-bottom: calc(#{space('xsmall')} / -2);\n }\n\n /* Vertical variant */\n\n &--direction-horizontal &__list {\n width: 100%;\n display: grid;\n border-collapse: collapse;\n grid-template-columns: auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto;\n align-items: stretch;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /** Direction */\n @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n /** Direction above small breakpoint */\n @Prop({ reflect: true }) directionSmall: \"vertical\" | \"horizontal\" | \"inherit\" = \"horizontal\";\n\n /** Direction above medium breakpoint */\n @Prop({ reflect: true }) directionMedium: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n /** Direction above large breakpoint */\n @Prop({ reflect: true }) directionLarge: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n /** Direction above ultra breakpoint */\n @Prop({ reflect: true }) directionUltra: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n /** Hide border lines between items */\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /**\n * Whether to disable min-width of datalist item label for the `horizontal` variant.\n *\n * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n *\n * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n */\n @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /** Current direction in use (readonly) */\n @Prop({ reflect: true }) currentDirection: \"vertical\" | \"horizontal\";\n\n /**\n * Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n */\n @Prop() items: StzhDatalistItemEntry[] | string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n\n /** Direction attribute change event */\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n /** Hide border change event */\n @Event() stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"hideBorder\")\n hideBorderWatcher(newValue: boolean) {\n this.stzhHideBorderChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.resizeHandler();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: \"vertical\" | \"horizontal\") {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] | string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n resizeHandler = () => {\n if (media(\"ultra\").matches && this.directionUltra !== \"inherit\") {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge !== \"inherit\") {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium !== \"inherit\") {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall !== \"inherit\") {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.hideBorderWatcher(this.hideBorder);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-hidden-border\": this.hideBorder,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --font-family: var(--stzh-font-family-regular);\n --font-weight: var(--stzh-font-weight-regular);\n --color: inherit;\n --action-display: flex;\n --label-min-width: var(--item-label-min-width, none);\n --leading-icon-background-color: #{$colorGrey5};\n --leading-icon-color: #{$colorGrey70};\n\n --hover-leading-icon-background-color: #{$colorPrimaryHover};\n --hover-leading-icon-color: #{$colorWhite};\n\n --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n }\n\n ::slotted(stzh-datalist) {\n margin-left: space('large');\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n align-items: center;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n background-color: var(--leading-icon-background-color);\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value {\n @include fontCurve('p1');\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n flex-grow: 1;\n }\n\n &__value,\n &__icon {\n color: var(--color);\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__label {\n @include font('medium');\n color: $baseLeadColor;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n }\n\n &.is-button[variant=\"tertiary\"] {\n --color: inherit;\n }\n }\n\n &__value,\n &__icon {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__richtext {\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n /* Button variant */\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n /* Interactive variant */\n\n &--is-interactive:hover &__value,\n &--is-interactive:hover &__icon {\n color: var(--hover-color);\n }\n\n &--is-interactive:hover &__value {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__leading-icon-container,\n &--is-interactive:focus-within &__leading-icon-container {\n color: var(--hover-leading-icon-color);\n background-color: var(--hover-leading-icon-background-color);\n }\n\n /* Vertical variant */\n\n &--direction-vertical {\n display: flex;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-vertical#{&}--has-hidden-border {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n &--direction-vertical:not(#{&}--has-hidden-border) {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-vertical &__leading-icon-container {\n width: 40px;\n height: 40px;\n }\n\n &--direction-vertical &__leading-icon {\n --size: #{iconSize('medium')};\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n }\n\n /* Horizontal variant */\n\n &--direction-horizontal,\n &--direction-horizontal + &__nested {\n display: contents;\n }\n\n &--direction-horizontal + &__nested &__nested-inner {\n grid-column: 1 / 6;\n }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__label,\n &--direction-horizontal &__meta,\n &--direction-horizontal &__action-list {\n min-height: var(--horizontal-min-height);\n }\n\n &--direction-horizontal &__label,\n &--direction-horizontal &__value,\n &--direction-horizontal &__meta {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-horizontal#{&}--has-hidden-border &__label,\n &--direction-horizontal#{&}--has-hidden-border &__value,\n &--direction-horizontal#{&}--has-hidden-border &__meta {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-horizontal &__label {\n &:not(:empty) {\n min-width: var(--label-min-width);\n padding-right: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__leading-icon-container {\n width: 32px;\n height: 32px;\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Direction */\n @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n /** Link */\n @Prop({ reflect: true }) href: string;\n\n /** Rel (if href is used) */\n @Prop() rel: string;\n\n /** Target (if href is used) */\n @Prop() target: string;\n\n /** Download attribute of link (if `href` used) */\n @Prop() download: string;\n\n /** Leading icon */\n @Prop() leadingIcon: string;\n\n /** Icon of action button (if href is used, will only be for presentation and default to link icon) */\n @Prop() icon: string;\n\n /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n @Prop() iconLabel: string;\n\n /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n @Prop() iconTooltip: string;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Value (or use value slot instead) */\n @Prop() value: string = \"\";\n\n /** Meta */\n @Prop() meta: string = \"\";\n\n /** Status Label */\n @Prop() statusLabel: string = \"\";\n\n /** Status Type */\n @Prop() statusType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n /** Hide border lines */\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /** Aria expanded of link/button */\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /** Aria controls of link/button */\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /** Whether rel contains external */\n @State() external: boolean = false;\n\n /** Item action click event */\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private actionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n this.hideBorder = event.detail.value;\n }\n\n private renderInner(isButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Fragment>\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.label}\n </Item>\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls || null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n >\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n <slot name=\"value\"></slot>\n </stzh-richtext>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel || this.meta ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.direction = this.datalist.currentDirection;\n this.hideBorder = this.datalist.hideBorder;\n\n this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n this.datalist = null;\n }\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n || typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !this.href && this.icon;\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n };\n\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"tiny\"\n aria-label={this.iconLabel || (`${this.label} ${this.value}`)}\n iconOnly={true}\n icon={this.icon}\n onClick={this.actionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton)}\n </div>\n </Fragment>\n }\n <Item\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.href &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n\n {hasActionButton &&\n (this.iconTooltip ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton())\n }\n </Item>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"stzh-datalist.stzh-datalist-item.entry.cjs.js","mappings":"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","names":["media","addMediaChangeListener","removeMediaChangeListener","h","Host","Fragment"],"sources":["src/components/stzh-datalist/stzh-datalist.scss?tag=stzh-datalist&encapsulation=scoped","src/components/stzh-datalist/stzh-datalist.tsx","src/components/stzh-datalist-item/stzh-datalist-item.scss?tag=stzh-datalist-item&encapsulation=scoped","src/components/stzh-datalist-item/stzh-datalist-item.tsx"],"sourcesContent":["/**\n * @prop --item-label-min-width: Min width of label\n */\n\n:host {\n --item-label-min-width: 120px;\n\n @include mq($from: smallheader) {\n --item-label-min-width: 144px;\n }\n\n &[disable-label-min-width]:not([disable-label-min-width=\"false\"]) {\n --item-label-min-width: none;\n }\n}\n\n:host ::slotted(stzh-details),\n.stzh-datalist stzh-details {\n --content-grid-column: 1 / 6;\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium')};\n --content-border-bottom: 1px solid #{$baseBorderColor};\n\n @include mq($from: medium) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'medium')};\n }\n\n @include mq($from: large) {\n --content-padding: #{space('large')} 0 #{spaceCurveValue('medium', 'large')};\n }\n}\n\n.stzh-datalist {\n &__list {\n width: 100%;\n }\n\n /* Has hidden border variant */\n\n &--has-hidden-border &__list {\n margin-top: calc(#{space('xsmall')} / -2);\n margin-bottom: calc(#{space('xsmall')} / -2);\n }\n\n /* Vertical variant */\n\n &--direction-horizontal &__list {\n width: 100%;\n display: grid;\n border-collapse: collapse;\n grid-template-columns: auto auto minmax(auto, 1fr) minmax(auto, 1fr) auto;\n align-items: stretch;\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Watch,\n Prop,\n Event,\n EventEmitter\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemEntry,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\n/**\n */\n@Component({\n tag: \"stzh-datalist\",\n styleUrl: \"stzh-datalist.scss\",\n scoped: true\n})\nexport class StzhDatalist {\n /** Direction */\n @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n /** Direction above small breakpoint */\n @Prop({ reflect: true }) directionSmall: \"vertical\" | \"horizontal\" | \"inherit\" = \"horizontal\";\n\n /** Direction above medium breakpoint */\n @Prop({ reflect: true }) directionMedium: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n /** Direction above large breakpoint */\n @Prop({ reflect: true }) directionLarge: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n /** Direction above ultra breakpoint */\n @Prop({ reflect: true }) directionUltra: \"vertical\" | \"horizontal\" | \"inherit\" = \"inherit\";\n\n /** Hide border lines between items */\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /**\n * Whether to disable min-width of datalist item label for the `horizontal` variant.\n *\n * If `false`, the default `min-width` is `144px` (for >= 800px) and `120px` (for < 800px).\n * If `true`, the `min-width` is `none`, so the label column, will have the width of cell with the widest content.\n *\n * You can also overwrite the label min-width via CSS with the custom property `--item-label-min-width`.\n */\n @Prop({ reflect: true }) disableLabelMinWidth: boolean = false;\n\n /** Current direction in use (readonly) */\n @Prop({ reflect: true }) currentDirection: \"vertical\" | \"horizontal\";\n\n /**\n * Items in datalist\n * Array of objects that must at least include `value` attribute.\n * Can optionally contain `leadingIcon`, `label`, `meta`, `icon`, `iconLabel`, `iconTooltip`, `href`, `statusLabel`, `statusType` attribute and be nested to display deeper levels:\n * `[{\"value\":\"Value 1\", \"label\": \"Label 1\"}, {\"value\":\"Value 2\", \"label\": \"Label 2\", \"items\": [...]}]`\n */\n @Prop() items: StzhDatalistItemEntry[] | string = [];\n private _items: StzhDatalistItemEntry[] = [];\n\n\n /** Direction attribute change event */\n @Event() stzhDirectionChange: EventEmitter<StzhDatalistDirectionChangeEvent>;\n\n /** Hide border change event */\n @Event() stzhHideBorderChange: EventEmitter<StzhDatalistHideBorderChangeEvent>;\n\n @Element() element: HTMLStzhDatalistElement;\n\n @Watch(\"hideBorder\")\n hideBorderWatcher(newValue: boolean) {\n this.stzhHideBorderChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"direction\")\n @Watch(\"directionSmall\")\n @Watch(\"directionMedium\")\n @Watch(\"directionLarge\")\n @Watch(\"directionUltra\")\n directionWatcher() {\n this.resizeHandler();\n }\n\n @Watch(\"currentDirection\")\n currentDirectionWatcher(newValue: \"vertical\" | \"horizontal\") {\n this.stzhDirectionChange.emit({\n component: \"stzh-datalist\",\n value: newValue\n });\n }\n\n @Watch(\"items\")\n itemsWatcher(newValue: any[] | string) {\n if (typeof newValue === \"string\") {\n this._items = JSON.parse(newValue);\n } else {\n this._items = newValue;\n }\n }\n\n resizeHandler = () => {\n if (media(\"ultra\").matches && this.directionUltra !== \"inherit\") {\n this.currentDirection = this.directionUltra;\n } else if (media(\"large\").matches && this.directionLarge !== \"inherit\") {\n this.currentDirection = this.directionLarge;\n } else if (media(\"medium\").matches && this.directionMedium !== \"inherit\") {\n this.currentDirection = this.directionMedium;\n } else if (media(\"small\").matches && this.directionSmall !== \"inherit\") {\n this.currentDirection = this.directionSmall;\n } else {\n this.currentDirection = this.direction;\n }\n }\n\n async componentWillLoad() {\n this.itemsWatcher(this.items);\n this.hideBorderWatcher(this.hideBorder);\n this.resizeHandler();\n }\n\n connectedCallback() {\n addMediaChangeListener(this.resizeHandler);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.resizeHandler);\n }\n\n render() {\n const classes = {\n \"stzh-datalist\": true,\n \"stzh-datalist--has-hidden-border\": this.hideBorder,\n [`stzh-datalist--direction-${this.currentDirection}`]: !!this.currentDirection\n };\n\n return (\n <Host>\n <div class={classes}>\n <div class=\"stzh-datalist__list\" role=\"list\">\n {this._items.map((item) =>\n <stzh-datalist-item {...item}>\n {item.items && item.items.length > 0 &&\n <stzh-datalist items={item.items}></stzh-datalist>\n }\n </stzh-datalist-item>\n )}\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n",":host {\n --font-family: var(--stzh-font-family-regular);\n --font-weight: var(--stzh-font-weight-regular);\n --color: inherit;\n --action-display: flex;\n --label-min-width: var(--item-label-min-width, none);\n --leading-icon-background-color: #{$colorGrey5};\n --leading-icon-color: #{$colorGrey70};\n\n --hover-leading-icon-background-color: #{$colorPrimaryHover};\n --hover-leading-icon-color: #{$colorWhite};\n\n --horizontal-min-height: 48px;\n\n display: contents;\n\n &[href]:not([href=\"\"]),\n &[a11y-expanded],\n &[a11y-controls] {\n --color: #{$colorPrimary};\n --hover-color: #{$colorPrimaryHover};\n }\n\n ::slotted(stzh-datalist) {\n margin-left: space('large');\n }\n}\n\n.stzh-datalist-item {\n position: relative;\n text-decoration-line: none;\n\n &__vhidden {\n @include visuallyhidden;\n }\n\n &__wrapper {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n }\n\n &__leading,\n &__value,\n &__label,\n &__meta,\n &__action-list {\n color: inherit;\n display: flex;\n align-items: center;\n appearance: none;\n font-family: inherit;\n background: transparent;\n border: none;\n padding: 0;\n text-decoration-line: none;\n\n &.is-button,\n &.is-link {\n cursor: pointer;\n }\n }\n\n &__leading {\n flex-shrink: 0;\n\n &:not(:empty) {\n padding-right: space('xsmall');\n }\n }\n\n &__leading-icon-container {\n color: var(--leading-icon-color);\n background-color: var(--leading-icon-background-color);\n width: 40px;\n height: 40px;\n display: flex;\n justify-content: center;\n align-items: center;\n border-radius: 50%;\n transition-property: color, background-color;\n transition-duration: $baseTransitionAnimationSpeed;\n }\n\n &__value {\n @include fontCurve('p1');\n font-family: var(--font-family);\n font-weight: var(--font-weight);\n flex-grow: 1;\n }\n\n &__value,\n &__icon {\n color: var(--color);\n }\n\n &__label,\n &__meta {\n @include fontCurve('caption');\n }\n\n &__meta {\n justify-content: flex-end;\n }\n\n &__label {\n @include font('medium');\n color: $baseLeadColor;\n }\n\n &__action-list {\n display: var(--action-display);\n justify-content: center;\n text-align: center;\n\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &__action {\n &.is-non-interactive {\n display: flex;\n justify-content: center;\n align-items: center;\n width: $formInputHeightTiny;\n height: $formInputHeightTiny;\n }\n\n &.is-button[variant=\"tertiary\"] {\n --color: inherit;\n }\n }\n\n &__value,\n &__icon {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &__richtext {\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n }\n\n &__interactive {\n position: absolute;\n top: 0;\n left: 0;\n }\n\n /* Button variant */\n\n &--is-button &__icon.is-open {\n display: none;\n }\n\n &--is-button#{&}--is-expanded &__icon {\n &.is-closed {\n display: none;\n }\n\n &.is-open {\n display: inline-flex;\n }\n }\n\n /* Interactive variant */\n\n &--is-interactive:hover &__value,\n &--is-interactive:hover &__icon {\n color: var(--hover-color);\n }\n\n &--is-interactive:hover &__value {\n text-decoration-line: underline;\n }\n\n &--is-interactive:hover &__leading-icon-container,\n &--is-interactive:focus-within &__leading-icon-container {\n color: var(--hover-leading-icon-color);\n background-color: var(--hover-leading-icon-background-color);\n }\n\n /* Vertical variant */\n\n &--direction-vertical {\n display: flex;\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-vertical#{&}--has-hidden-border {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n &--direction-vertical:not(#{&}--has-hidden-border) {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-vertical &__leading-icon-container {\n width: 40px;\n height: 40px;\n }\n\n &--direction-vertical &__leading-icon {\n --size: #{iconSize('medium')};\n }\n\n &--direction-vertical &__meta {\n flex-direction: column;\n align-items: flex-start;\n }\n\n /* Horizontal variant */\n\n &--direction-horizontal,\n &--direction-horizontal + &__nested {\n display: contents;\n }\n\n &--direction-horizontal + &__nested &__nested-inner {\n grid-column: 1 / 6;\n }\n\n &--direction-horizontal &__leading,\n &--direction-horizontal &__value,\n &--direction-horizontal &__label,\n &--direction-horizontal &__meta,\n &--direction-horizontal &__action-list {\n min-height: var(--horizontal-min-height);\n }\n\n &--direction-horizontal &__label,\n &--direction-horizontal &__value,\n &--direction-horizontal &__meta {\n padding-top: space('xsmall');\n padding-bottom: space('xsmall');\n }\n\n &--direction-horizontal#{&}--has-hidden-border &__label,\n &--direction-horizontal#{&}--has-hidden-border &__value,\n &--direction-horizontal#{&}--has-hidden-border &__meta {\n padding-top: calc(#{space('xsmall')} / 2);\n padding-bottom: calc(#{space('xsmall')} / 2);\n }\n\n // &--direction-horizontal:not(#{&}--has-hidden-border) &__leading,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__label,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__value,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__meta,\n &--direction-horizontal:not(#{&}--has-hidden-border) &__action-list {\n border-bottom: 1px solid $baseBorderColor;\n }\n\n &--direction-horizontal &__label {\n &:not(:empty) {\n min-width: var(--label-min-width);\n padding-right: space('xsmall');\n }\n }\n\n &--direction-horizontal &__meta {\n &:not(:empty) {\n padding-left: space('xsmall');\n }\n }\n\n &--direction-horizontal &__leading-icon-container {\n width: 32px;\n height: 32px;\n }\n\n &--direction-horizontal &__meta-status + &__meta-text {\n margin-left: space('xsmall');\n }\n}\n","import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Event,\n EventEmitter,\n Fragment,\n State,\n Watch\n} from \"@stencil/core\";\n\nimport {\n StzhDatalistItemActionClickEvent,\n StzhDatalistDirectionChangeEvent,\n StzhDatalistHideBorderChangeEvent\n} from \"../../index\";\n\nimport { StzhLocaleComponent } from \"../../utils/translation-utils\";\n\nlet datalistItemCounter = 0;\n\n/**\n * @slot - Slot for nested datalist\n * @slot value - Slot for value (or use value slot instead)\n */\n@Component({\n tag: \"stzh-datalist-item\",\n styleUrl: \"stzh-datalist-item.scss\",\n scoped: true\n})\nexport class StzhDatalistItem {\n /** Translation strings */\n @Prop() localization: StzhLocaleComponent;\n\n /** Direction */\n @Prop({ reflect: true }) direction: \"vertical\" | \"horizontal\" = \"vertical\";\n\n /** Link */\n @Prop({ reflect: true }) href: string;\n\n /** Rel (if href is used) */\n @Prop() rel: string;\n\n /** Target (if href is used) */\n @Prop() target: string;\n\n /** Download attribute of link (if `href` used) */\n @Prop() download: string;\n\n /** Leading icon */\n @Prop() leadingIcon: string;\n\n /** Icon of action button (if href is used, will only be for presentation and default to link icon) */\n @Prop() icon: string;\n\n /** Overwrite aria-label of action button (default aria label is `label` and `value`). */\n @Prop() iconLabel: string;\n\n /** Tooltip content of action button. Overwrites aria-label (set by default or `iconLabel`) of action button. */\n @Prop() iconTooltip: string;\n\n /** Label */\n @Prop() label: string = \"\";\n\n /** Value (or use value slot instead) */\n @Prop() value: string = \"\";\n\n /** Meta */\n @Prop() meta: string = \"\";\n\n /** Status Label */\n @Prop() statusLabel: string = \"\";\n\n /** Status Type */\n @Prop() statusType: \"default\" | \"success\" | \"warning\" | \"error\" | \"info\" = \"default\";\n\n /** Hide border lines */\n @Prop({ reflect: true }) hideBorder: boolean = false;\n\n /** Aria expanded of link/button */\n @Prop({ reflect: true, attribute: \"a11y-expanded\" }) a11yExpanded: boolean;\n\n /** Aria controls of link/button */\n @Prop({ attribute: \"a11y-controls\" }) a11yControls: string;\n\n /** Whether rel contains external */\n @State() external: boolean = false;\n\n /** Item action click event */\n @Event() stzhItemActionClick: EventEmitter<StzhDatalistItemActionClickEvent>;\n\n @Element() element: HTMLStzhDatalistItemElement;\n\n @Watch(\"rel\")\n externalWatcher() {\n this.external = this.rel && this.rel.includes(\"external\");\n }\n\n private datalist: HTMLStzhDatalistElement;\n private datalistItemId: string;\n\n private actionClick = (originalEvent: MouseEvent) => {\n this.stzhItemActionClick.emit({\n component: \"stzh-datalist-item\",\n originalEvent\n });\n }\n\n private handleDirectionChange = (event: CustomEvent<StzhDatalistDirectionChangeEvent>) => {\n this.direction = event.detail.value;\n }\n\n private handleHideBorderChange = (event: CustomEvent<StzhDatalistHideBorderChangeEvent>) => {\n this.hideBorder = event.detail.value;\n }\n\n private renderInner(isButton: boolean): DocumentFragment {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Fragment>\n <Item\n aria-hidden={this.label ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-label`}\n class={{\n \"stzh-datalist-item__label\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.label}\n </Item>\n\n <Item\n id={`${this.datalistItemId}-value`}\n class={{\n \"stzh-datalist-item__value\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n aria-labelledby={Item !== 'div' ? `${this.datalistItemId}-label ${this.datalistItemId}-value ${this.datalistItemId}-meta` : null}\n aria-controls={this.a11yControls || null}\n aria-expanded={typeof this.a11yExpanded !== \"undefined\"\n ? (this.a11yExpanded ? \"true\" : \"false\") : null}\n >\n {this.external && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.externalLinkLabel}</div>}\n {this.download && <div class=\"stzh-datalist-item__vhidden\">{this.localization.$globals.downloadLinkLabel}</div>}\n <stzh-richtext class=\"stzh-datalist-item__richtext\" innerHTML={this.value}>\n <slot name=\"value\"></slot>\n </stzh-richtext>\n </Item>\n\n <Item\n aria-hidden={this.statusLabel || this.meta ? null : \"true\"}\n tabindex=\"-1\"\n id={`${this.datalistItemId}-meta`}\n class={{\n \"stzh-datalist-item__meta\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.statusLabel &&\n <stzh-status\n class=\"stzh-datalist-item__meta-status\"\n label={this.statusLabel}\n type={this.statusType}\n ></stzh-status>\n }\n {this.meta && <span class=\"stzh-datalist-item__meta-text\">{this.meta}</span>}\n </Item>\n </Fragment>\n )\n }\n\n private renderLeadingIcon(isButton: boolean): HTMLElement {\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n return (\n <Item\n role=\"presentation\"\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__leading\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.leadingIcon &&\n <div class=\"stzh-datalist-item__leading-icon-container\">\n <stzh-icon class=\"stzh-datalist-item__leading-icon\" name={this.leadingIcon}></stzh-icon>\n </div>\n }\n </Item>\n );\n }\n\n async connectedCallback() {\n this.datalist = this.element.closest(\"stzh-datalist\");\n\n if (this.datalist) {\n this.direction = this.datalist.currentDirection;\n this.hideBorder = this.datalist.hideBorder;\n\n this.datalist.addEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.addEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n }\n }\n\n disconnectedCallback() {\n if (this.datalist) {\n this.datalist.removeEventListener(\"stzhDirectionChange\", this.handleDirectionChange);\n this.datalist.removeEventListener(\"stzhHideBorderChange\", this.handleHideBorderChange);\n this.datalist = null;\n }\n }\n\n async componentWillLoad() {\n this.datalistItemId = `stzh-datalist-item-${datalistItemCounter++}`;\n this.externalWatcher();\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"datalist-item\");\n }\n }\n\n render() {\n const isButton = typeof this.a11yExpanded !== \"undefined\"\n || typeof this.a11yControls !== \"undefined\";\n\n const hasActionButton = !this.href && this.icon;\n\n const classes = {\n \"stzh-datalist-item\": true,\n \"stzh-datalist-item--is-interactive\": !!this.href || isButton,\n \"stzh-datalist-item--is-link\": !!this.href,\n \"stzh-datalist-item--is-button\": isButton,\n \"stzh-datalist-item--is-expanded\": this.a11yExpanded,\n \"stzh-datalist-item--has-hidden-border\": this.hideBorder,\n [`stzh-datalist-item--direction-${this.direction}`]: !!this.direction\n };\n\n const Item = isButton ? \"button\" : (this.href ? \"a\" : \"div\");\n\n const ActionButton = () => {\n return (\n <stzh-button\n class={{\n \"stzh-datalist-item__action\": true,\n \"is-button\": true\n }}\n variant=\"tertiary\"\n size=\"tiny\"\n aria-label={this.iconLabel || (`${this.label} ${this.value}`)}\n iconOnly={true}\n icon={this.icon}\n onClick={this.actionClick}\n ></stzh-button>\n );\n }\n\n return (\n <Host role=\"listitem\">\n <div class={classes}>\n {this.direction === \"horizontal\" ?\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n {this.renderInner(isButton)}\n </Fragment>\n :\n <Fragment>\n {this.renderLeadingIcon(isButton)}\n <div class=\"stzh-datalist-item__wrapper\">\n {this.renderInner(isButton)}\n </div>\n </Fragment>\n }\n <Item\n role={hasActionButton ? null : \"presentation\"}\n aria-hidden={hasActionButton ? null : \"true\"}\n tabindex=\"-1\"\n class={{\n \"stzh-datalist-item__action-list\": true,\n \"is-button\": isButton,\n \"is-link\": !!this.href\n }}\n href={this.href}\n rel={this.rel}\n target={this.target}\n download={this.download}\n >\n {this.href &&\n (this.download ?\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : \"download\"}></stzh-icon>\n </div>\n :\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon\" name={this.icon ? this.icon : (this.external ? \"external-link\" : \"arrow-right\")}></stzh-icon>\n </div>\n )\n }\n\n {isButton &&\n <div class=\"stzh-datalist-item__action is-non-interactive\">\n <stzh-icon class=\"stzh-datalist-item__icon is-closed\" name={this.icon ? this.icon : \"plus\"}></stzh-icon>\n <stzh-icon class=\"stzh-datalist-item__icon is-open\" name={this.icon ? this.icon : \"minus\"}></stzh-icon>\n </div>\n }\n\n {hasActionButton &&\n (this.iconTooltip ?\n <stzh-tooltip content={this.iconTooltip}>\n {ActionButton()}\n </stzh-tooltip>\n :\n ActionButton())\n }\n </Item>\n </div>\n\n <div class=\"stzh-datalist-item__nested\">\n <div class=\"stzh-datalist-item__nested-inner\">\n <slot></slot>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/stzh-dropdown.cjs.entry.js CHANGED
@@ -1613,6 +1613,7 @@ var defaults = {
1613
1613
  searchField: ['text'],
1614
1614
  searchConjunction: 'and',
1615
1615
  mode: null,
1616
+ openDisplay: 'block',
1616
1617
  wrapperClass: 'ts-wrapper',
1617
1618
  controlClass: 'ts-control',
1618
1619
  dropdownClass: 'ts-dropdown',
@@ -3194,7 +3195,7 @@ class TomSelect extends MicroPlugin(MicroEvent) {
3194
3195
  const groups = {};
3195
3196
  const groups_order = [];
3196
3197
  var self = this;
3197
- var query = self.inputValue();
3198
+ var query = this.settings.transformLoadQuery(this.control_input.value);
3198
3199
  const same_query = query === self.lastQuery || query == '' && self.lastQuery == null;
3199
3200
  var results = self.search(query);
3200
3201
  var active_option = null;
@@ -3966,12 +3967,12 @@ class TomSelect extends MicroPlugin(MicroEvent) {
3966
3967
  self.refreshState();
3967
3968
  applyCSS(self.dropdown, {
3968
3969
  visibility: 'hidden',
3969
- display: 'block'
3970
+ display: self.settings.openDisplay
3970
3971
  });
3971
3972
  self.positionDropdown();
3972
3973
  applyCSS(self.dropdown, {
3973
3974
  visibility: 'visible',
3974
- display: 'block'
3975
+ display: self.settings.openDisplay
3975
3976
  });
3976
3977
  self.focus();
3977
3978
  self.trigger('dropdown_open', self.dropdown);
@@ -5156,6 +5157,14 @@ const StzhDropdown = class {
5156
5157
  if (typeof this.transformLoadQuery === "function") {
5157
5158
  return this.transformLoadQuery(inputValue);
5158
5159
  }
5160
+ else if (this.transformLoadQuery === "join") {
5161
+ const lastQueries = Array.from(this.tomSelect.controlChildren())
5162
+ .map((element) => element.innerText);
5163
+ return (lastQueries.length > 0
5164
+ ? lastQueries.join(" ") + (inputValue ? " " : "")
5165
+ : "")
5166
+ + inputValue.replace(/\s\s+/g, ' ');
5167
+ }
5159
5168
  else if (this.transformLoadQuery === "trim-to-single-ws") {
5160
5169
  return inputValue.replace(/\s\s+/g, ' ');
5161
5170
  }