@oiz/stzh-components 2.14.1 → 2.14.2

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 (68) hide show
  1. package/dist/cjs/{app-globals-8d05cb28.js → app-globals-856f268a.js} +2 -2
  2. package/dist/cjs/{app-globals-8d05cb28.js.map → app-globals-856f268a.js.map} +1 -1
  3. package/dist/cjs/index.cjs.js.map +1 -1
  4. package/dist/cjs/loader.cjs.js +1 -1
  5. package/dist/cjs/stzh-actionset_4.cjs.entry.js +15 -27
  6. package/dist/cjs/stzh-actionset_4.cjs.entry.js.map +1 -1
  7. package/dist/cjs/stzh-appnav.cjs.entry.js +1 -1
  8. package/dist/cjs/stzh-appnav.cjs.entry.js.map +1 -1
  9. package/dist/cjs/stzh-components.cjs.js +1 -1
  10. package/dist/collection/components/stzh-actionset/stzh-actionset.js +3 -9
  11. package/dist/collection/components/stzh-actionset/stzh-actionset.js.map +1 -1
  12. package/dist/collection/components/stzh-appnav/stzh-appnav.css +0 -3
  13. package/dist/collection/components/stzh-card/stzh-card.css +0 -37
  14. package/dist/collection/components/stzh-card/stzh-card.js +11 -17
  15. package/dist/collection/components/stzh-card/stzh-card.js.map +1 -1
  16. package/dist/collection/components/stzh-card/stzh-card.stories.js +1 -2
  17. package/dist/collection/components/stzh-card-list/stzh-card-list.stories.js +0 -2
  18. package/dist/collection/index.js.map +1 -1
  19. package/dist/components/index.js +1 -1
  20. package/dist/components/index2.js.map +1 -1
  21. package/dist/components/stzh-actionset2.js +3 -9
  22. package/dist/components/stzh-actionset2.js.map +1 -1
  23. package/dist/components/stzh-appnav.js +1 -1
  24. package/dist/components/stzh-appnav.js.map +1 -1
  25. package/dist/components/stzh-card2.js +12 -18
  26. package/dist/components/stzh-card2.js.map +1 -1
  27. package/dist/esm/{app-globals-fb258145.js → app-globals-8a09d78c.js} +2 -2
  28. package/dist/esm/{app-globals-fb258145.js.map → app-globals-8a09d78c.js.map} +1 -1
  29. package/dist/esm/index.js.map +1 -1
  30. package/dist/esm/loader.js +1 -1
  31. package/dist/esm/stzh-actionset_4.entry.js +15 -27
  32. package/dist/esm/stzh-actionset_4.entry.js.map +1 -1
  33. package/dist/esm/stzh-appnav.entry.js +1 -1
  34. package/dist/esm/stzh-appnav.entry.js.map +1 -1
  35. package/dist/esm/stzh-components.js +1 -1
  36. package/dist/esm-es5/{app-globals-fb258145.js → app-globals-8a09d78c.js} +2 -2
  37. package/dist/esm-es5/index.js.map +1 -1
  38. package/dist/esm-es5/loader.js +1 -1
  39. package/dist/esm-es5/stzh-actionset_4.entry.js +2 -2
  40. package/dist/esm-es5/stzh-actionset_4.entry.js.map +1 -1
  41. package/dist/esm-es5/stzh-appnav.entry.js +1 -1
  42. package/dist/esm-es5/stzh-appnav.entry.js.map +1 -1
  43. package/dist/esm-es5/stzh-components.js +1 -1
  44. package/dist/stzh-components/index.esm.js.map +1 -1
  45. package/dist/stzh-components/p-0bb08043.system.js.map +1 -1
  46. package/dist/stzh-components/{p-90df75de.system.entry.js → p-5733dcff.system.entry.js} +2 -2
  47. package/dist/stzh-components/p-5733dcff.system.entry.js.map +1 -0
  48. package/dist/stzh-components/{p-61209b86.system.js → p-6af6b8ac.system.js} +2 -2
  49. package/dist/stzh-components/{p-592a0a81.system.js → p-6c7cc671.system.js} +2 -2
  50. package/dist/stzh-components/{p-4926cc0e.entry.js → p-964e87a2.entry.js} +3 -3
  51. package/dist/stzh-components/p-964e87a2.entry.js.map +1 -0
  52. package/dist/stzh-components/{p-6a2947fe.system.entry.js → p-a14e154a.system.entry.js} +3 -3
  53. package/dist/stzh-components/p-a14e154a.system.entry.js.map +1 -0
  54. package/dist/stzh-components/{p-ae0889eb.js → p-bd52acfe.js} +2 -2
  55. package/dist/stzh-components/{p-c53ea563.entry.js → p-de184696.entry.js} +2 -2
  56. package/dist/stzh-components/p-de184696.entry.js.map +1 -0
  57. package/dist/stzh-components/stzh-components.esm.js +1 -1
  58. package/dist/stzh-components/stzh-components.js +1 -1
  59. package/dist/types/index.d.ts +0 -1
  60. package/package.json +1 -1
  61. package/dist/stzh-components/p-4926cc0e.entry.js.map +0 -1
  62. package/dist/stzh-components/p-6a2947fe.system.entry.js.map +0 -1
  63. package/dist/stzh-components/p-90df75de.system.entry.js.map +0 -1
  64. package/dist/stzh-components/p-c53ea563.entry.js.map +0 -1
  65. /package/dist/esm-es5/{app-globals-fb258145.js.map → app-globals-8a09d78c.js.map} +0 -0
  66. /package/dist/stzh-components/{p-61209b86.system.js.map → p-6af6b8ac.system.js.map} +0 -0
  67. /package/dist/stzh-components/{p-592a0a81.system.js.map → p-6c7cc671.system.js.map} +0 -0
  68. /package/dist/stzh-components/{p-ae0889eb.js.map → p-bd52acfe.js.map} +0 -0
package/dist/cjs/stzh-appnav.cjs.entry.js CHANGED
@@ -6,7 +6,7 @@ const index = require('./index-45029280.js');
6
6
  const utils = require('./utils-01c0bbdd.js');
7
7
  require('./string-utils-5dd70320.js');
8
8
 
9
- const stzhAppnavCss = ".sc-stzh-appnav-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-appnav-h{display:none}.sc-stzh-appnav-h *.sc-stzh-appnav,.sc-stzh-appnav-h *.sc-stzh-appnav::before,.sc-stzh-appnav-h *.sc-stzh-appnav::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-appnav-h .has-focus.sc-stzh-appnav{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav{outline-style:none !important}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav::-moz-focus-inner{border:0 !important}.sc-stzh-appnav-h{width:100%}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link{--text-decoration-line:none;--hover-text-decoration-line:underline;letter-spacing:0.01em}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link--is-active{text-decoration:underline}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:row;flex-direction:row}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-xsmall)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-small)}}@media screen and (max-width: 599px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__icon-wrapper{height:auto}}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>*:not(:last-child){margin-right:var(--stzh-space-xlarge)}}.stzh-appnav.sc-stzh-appnav{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);height:4rem;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:center}@media screen and (min-width: 600px){.stzh-appnav.sc-stzh-appnav{height:3rem;text-align:left}}.stzh-appnav__items.sc-stzh-appnav{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-appnav__items.sc-stzh-appnav{-ms-flex-positive:0;flex-grow:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}}.stzh-appnav__title.sc-stzh-appnav{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-base-color);-webkit-text-decoration-line:none;text-decoration-line:none;white-space:nowrap;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);display:none}@media screen and (min-width: 800px){.stzh-appnav__title.sc-stzh-appnav{display:-ms-flexbox;display:flex}}.stzh-appnav__title.sc-stzh-appnav:hover{font-family:var(--stzh-font-family-heavy);font-weight:var(--stzh-font-weight-heavy);font-style:var(--stzh-font-style-heavy);color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));text-decoration:underline}.stzh-appnav__title.sc-stzh-appnav:hover .stzh-appnav__status.sc-stzh-appnav{border-color:rgba(7, 2, 80, 0.4);color:var(--stzh-color-white);background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-appnav__status.sc-stzh-appnav{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:0.875rem;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;border:0.0625rem solid rgba(115, 115, 115, 0.25);color:inherit;-webkit-transform:translateY(calc(var(--stzh-space-xsmall) * -1));transform:translateY(calc(var(--stzh-space-xsmall) * -1));margin-left:var(--stzh-space-xxsmall);-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);text-decoration:none}";
9
+ const stzhAppnavCss = ".sc-stzh-appnav-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-appnav-h{display:none}.sc-stzh-appnav-h *.sc-stzh-appnav,.sc-stzh-appnav-h *.sc-stzh-appnav::before,.sc-stzh-appnav-h *.sc-stzh-appnav::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-appnav-h .has-focus.sc-stzh-appnav{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.3125rem}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav{outline-style:none !important}.sc-stzh-appnav-h .stzh-fylingfocus-focused.sc-stzh-appnav::-moz-focus-inner{border:0 !important}.sc-stzh-appnav-h{width:100%}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link{--text-decoration-line:none;--hover-text-decoration-line:underline;letter-spacing:0.01em}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link--is-active{text-decoration:underline}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:column;flex-direction:column}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__inner{-ms-flex-direction:row;flex-direction:row}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-nano-font-size);line-height:var(--stzh-font-nano-text-line-height)}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__text{font-size:var(--stzh-font-micro-font-size);line-height:var(--stzh-font-micro-text-line-height)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-xsmall)}}.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:0}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper+.stzh-link__text:not(:empty){margin-left:var(--stzh-space-small)}}@media screen and (max-width: 599px){.sc-stzh-appnav-h .sc-stzh-appnav-s>stzh-link .stzh-link__icon-wrapper{height:auto}}@media screen and (min-width: 600px){.sc-stzh-appnav-h .sc-stzh-appnav-s>*:not(:last-child){margin-right:var(--stzh-space-xlarge)}}.stzh-appnav.sc-stzh-appnav{display:-ms-flexbox;display:flex;background-color:var(--stzh-color-white);height:4rem;-ms-flex-pack:justify;justify-content:space-between;-ms-flex-align:center;align-items:center;text-align:center}@media screen and (min-width: 600px){.stzh-appnav.sc-stzh-appnav{height:3rem;text-align:left}}.stzh-appnav__items.sc-stzh-appnav{display:-ms-flexbox;display:flex;-ms-flex-pack:distribute;justify-content:space-around;-ms-flex-positive:1;flex-grow:1}@media screen and (min-width: 600px){.stzh-appnav__items.sc-stzh-appnav{-ms-flex-positive:0;flex-grow:0;-ms-flex-align:center;align-items:center;-ms-flex-pack:start;justify-content:flex-start}}.stzh-appnav__title.sc-stzh-appnav{font-family:var(--stzh-font-family-light);font-weight:var(--stzh-font-weight-light);font-style:var(--stzh-font-style-light);font-size:var(--stzh-font-milli-font-size);line-height:var(--stzh-font-milli-text-line-height);letter-spacing:var(--stzh-font-curve---text-letter-spacing);color:var(--stzh-base-color);-webkit-text-decoration-line:none;text-decoration-line:none;white-space:nowrap;-webkit-transition:color var(--stzh-base-transition-animation-speed);transition:color var(--stzh-base-transition-animation-speed);margin-left:var(--stzh-space-small);display:none}@media screen and (min-width: 800px){.stzh-appnav__title.sc-stzh-appnav{display:-ms-flexbox;display:flex}}.stzh-appnav__title.sc-stzh-appnav:hover{color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));text-decoration:underline}.stzh-appnav__title.sc-stzh-appnav:hover .stzh-appnav__status.sc-stzh-appnav{border-color:rgba(7, 2, 80, 0.4);color:var(--stzh-color-white);background-color:var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark))}.stzh-appnav__status.sc-stzh-appnav{font-family:var(--stzh-font-family-regular);font-weight:var(--stzh-font-weight-regular);font-style:var(--stzh-font-style-regular);-webkit-box-sizing:content-box;box-sizing:content-box;display:-ms-inline-flexbox;display:inline-flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center;height:0.875rem;min-width:0.625rem;font-size:0.625rem;line-height:1.4;border-radius:0.875rem;padding:0.0625rem 0.375rem;border:0.0625rem solid rgba(115, 115, 115, 0.25);color:inherit;-webkit-transform:translateY(calc(var(--stzh-space-xsmall) * -1));transform:translateY(calc(var(--stzh-space-xsmall) * -1));margin-left:var(--stzh-space-xxsmall);-webkit-transition:border-color var(--stzh-base-transition-animation-speed);transition:border-color var(--stzh-base-transition-animation-speed);text-decoration:none}";
10
10
 
11
11
  const StzhAppnav = class {
12
12
  constructor(hostRef) {
package/dist/cjs/stzh-appnav.cjs.entry.js.map CHANGED
@@ -1 +1 @@
1
- {"file":"stzh-appnav.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,g6KAAg6K;;MCmBz6K,UAAU;;;IAwBb,SAAI,GAAG;MACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;MAEzD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;UACb,OAAO,EAAE,WAAW;SACE,CAAC,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OACvC,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;mBAGJ,EAAE;;;EA0B5B,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,YAAY,CAAC,KAAK,IAC5EA,iBAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,MAAM,IACzCA,qBAAa,CACT,EACL,IAAI,CAAC,QAAQ;MACZA,eACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,OAAO,iBACL,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,IAEhD,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,SAAS;QACbA,kBAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,SAAS,CAAQ,CAEzD,CAEF,CACD,EACP;GACH;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-appnav/stzh-appnav.scss?tag=stzh-appnav&encapsulation=scoped","src/components/stzh-appnav/stzh-appnav.tsx"],"sourcesContent":[":host {\n width: 100%;\n\n ::slotted(stzh-link) {\n --text-decoration-line: none;\n --hover-text-decoration-line: underline;\n letter-spacing: 0.01em;\n\n .stzh-link--is-active {\n text-decoration: underline;\n }\n\n .stzh-link__inner {\n flex-direction: column;\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n .stzh-link__text {\n @include fontSize('nano');\n\n @include mq($from: small) {\n @include fontSize('micro');\n }\n }\n\n .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n margin-left: 0;\n\n @include mq($from: small) {\n margin-left: space('xsmall');\n }\n }\n\n .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n margin-left: 0;\n\n @include mq($from: small) {\n margin-left: space('small');\n }\n }\n\n .stzh-link__icon-wrapper {\n @include mq($to: small) {\n height: auto;\n }\n }\n }\n\n ::slotted(*:not(:last-child)) {\n @include mq($from: small) {\n margin-right: space('xlarge');\n }\n }\n}\n\n.stzh-appnav {\n display: flex;\n background-color: $colorWhite;\n height: $appnavHeight;\n justify-content: space-between;\n align-items: center;\n text-align: center;\n\n @include mq($from: small) {\n height: $appnavHeightSmall;\n text-align: left;\n }\n\n &__items {\n display: flex;\n justify-content: space-around;\n flex-grow: 1;\n\n @include mq($from: small) {\n flex-grow: 0;\n align-items: center;\n justify-content: flex-start;\n }\n }\n\n &__title {\n @include font('light');\n @include fontSize('milli');\n color: $baseColor;\n text-decoration-line: none;\n white-space: nowrap;\n transition: color $baseTransitionAnimationSpeed;\n margin-left: space('small');\n display: none;\n\n @include mq($from: smallheader) {\n display: flex;\n }\n\n &:hover {\n @include font('heavy');\n color: $colorPrimaryHover;\n text-decoration: underline;\n }\n }\n\n &__title:hover &__status {\n border-color: rgba(7, 2, 80, 0.4);\n color: $colorWhite;\n background-color: $colorPrimaryHover;\n }\n\n &__status {\n @include status;\n transform: translateY(calc(#{space('xsmall')} * -1));\n margin-left: space('xxsmall');\n transition: border-color $baseTransitionAnimationSpeed;\n text-decoration: none;\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhAppnavLocalizedText } from \"./stzh-appnav.localization\";\n\n/**\n * @slot - Slot for `stzh-link` elements\n */\n@Component({\n tag: \"stzh-appnav\",\n styleUrl: \"stzh-appnav.scss\",\n scoped: true\n})\nexport class StzhAppnav {\n /** Translation strings */\n @Prop() localization: StzhAppnavLocalizedText;\n\n /** App title shown on tablet/desktop */\n @Prop() appTitle: string = \"\";\n\n /** Status displayed next to app title (only displayed if `app-title` is defined) */\n @Prop() appStatus: string = \"\";\n\n /** Link of app title (only used if `app-title` is defined) */\n @Prop() appHref: string = \"\";\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the app title link element.\n * Default value will be taken from `appTitle` prop or default slot.\n */\n @Prop() appAnalyticsId: string;\n\n @Element() element: HTMLStzhAppnavElement;\n\n private observer: MutationObserver;\n\n private init = () => {\n const links = this.element.querySelectorAll(\"stzh-link\");\n\n links.forEach((link) => {\n setPropsIfNull(link, {\n size: \"small\",\n variant: \"secondary\"\n } as HTMLStzhLinkElement)\n\n link.setAttribute(\"role\", \"listitem\");\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n }\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <nav class=\"stzh-appnav\" role=\"navigation\" aria-label={this.localization.title}>\n <div class=\"stzh-appnav__items\" role=\"list\">\n <slot></slot>\n </div>\n {this.appTitle &&\n <a\n class=\"stzh-appnav__title\"\n href={this.appHref}\n s-object-id={this.appAnalyticsId || this.appTitle}\n >\n {this.appTitle}\n {this.appStatus &&\n <span class=\"stzh-appnav__status\">{this.appStatus}</span>\n }\n </a>\n }\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
1
+ {"file":"stzh-appnav.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,oyKAAoyK;;MCmB7yK,UAAU;;;IAwBb,SAAI,GAAG;MACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC;MAEzD,KAAK,CAAC,OAAO,CAAC,CAAC,IAAI;QACjBA,oBAAc,CAAC,IAAI,EAAE;UACnB,IAAI,EAAE,OAAO;UACb,OAAO,EAAE,WAAW;SACE,CAAC,CAAA;QAEzB,IAAI,CAAC,YAAY,CAAC,MAAM,EAAE,UAAU,CAAC,CAAC;OACvC,CAAC,CAAC;KACJ,CAAA;;oBA9B0B,EAAE;qBAGD,EAAE;mBAGJ,EAAE;;;EA0B5B,MAAM,iBAAiB;IACrB,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;MACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;KACjG;GACF;EAED,iBAAiB;IACf,IAAI,CAAC,IAAI,EAAE,CAAC;IAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChD,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;MAClC,SAAS,EAAE,IAAI;MACf,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;GACJ;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;MACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;KAC5B;GACF;EAED,MAAM;IACJ,QACEC,QAACC,UAAI,QACHD,iBAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,YAAY,gBAAa,IAAI,CAAC,YAAY,CAAC,KAAK,IAC5EA,iBAAK,KAAK,EAAC,oBAAoB,EAAC,IAAI,EAAC,MAAM,IACzCA,qBAAa,CACT,EACL,IAAI,CAAC,QAAQ;MACZA,eACE,KAAK,EAAC,oBAAoB,EAC1B,IAAI,EAAE,IAAI,CAAC,OAAO,iBACL,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,IAEhD,IAAI,CAAC,QAAQ,EACb,IAAI,CAAC,SAAS;QACbA,kBAAM,KAAK,EAAC,qBAAqB,IAAE,IAAI,CAAC,SAAS,CAAQ,CAEzD,CAEF,CACD,EACP;GACH;;;;;;;","names":["setPropsIfNull","h","Host"],"sources":["src/components/stzh-appnav/stzh-appnav.scss?tag=stzh-appnav&encapsulation=scoped","src/components/stzh-appnav/stzh-appnav.tsx"],"sourcesContent":[":host {\n width: 100%;\n\n ::slotted(stzh-link) {\n --text-decoration-line: none;\n --hover-text-decoration-line: underline;\n letter-spacing: 0.01em;\n\n .stzh-link--is-active {\n text-decoration: underline;\n }\n\n .stzh-link__inner {\n flex-direction: column;\n\n @include mq($from: small) {\n flex-direction: row;\n }\n }\n\n .stzh-link__text {\n @include fontSize('nano');\n\n @include mq($from: small) {\n @include fontSize('micro');\n }\n }\n\n .stzh-link.stzh-link--has-icon .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n margin-left: 0;\n\n @include mq($from: small) {\n margin-left: space('xsmall');\n }\n }\n\n .stzh-link.stzh-link--badge-position-icon.stzh-link--has-icon.stzh-link--has-badge .stzh-link__icon-wrapper + .stzh-link__text:not(:empty) {\n margin-left: 0;\n\n @include mq($from: small) {\n margin-left: space('small');\n }\n }\n\n .stzh-link__icon-wrapper {\n @include mq($to: small) {\n height: auto;\n }\n }\n }\n\n ::slotted(*:not(:last-child)) {\n @include mq($from: small) {\n margin-right: space('xlarge');\n }\n }\n}\n\n.stzh-appnav {\n display: flex;\n background-color: $colorWhite;\n height: $appnavHeight;\n justify-content: space-between;\n align-items: center;\n text-align: center;\n\n @include mq($from: small) {\n height: $appnavHeightSmall;\n text-align: left;\n }\n\n &__items {\n display: flex;\n justify-content: space-around;\n flex-grow: 1;\n\n @include mq($from: small) {\n flex-grow: 0;\n align-items: center;\n justify-content: flex-start;\n }\n }\n\n &__title {\n @include font('light');\n @include fontSize('milli');\n color: $baseColor;\n text-decoration-line: none;\n white-space: nowrap;\n transition: color $baseTransitionAnimationSpeed;\n margin-left: space('small');\n display: none;\n\n @include mq($from: smallheader) {\n display: flex;\n }\n\n &:hover {\n color: $colorPrimaryHover;\n text-decoration: underline;\n }\n }\n\n &__title:hover &__status {\n border-color: rgba(7, 2, 80, 0.4);\n color: $colorWhite;\n background-color: $colorPrimaryHover;\n }\n\n &__status {\n @include status;\n transform: translateY(calc(#{space('xsmall')} * -1));\n margin-left: space('xxsmall');\n transition: border-color $baseTransitionAnimationSpeed;\n text-decoration: none;\n }\n}\n","import {\n Component,\n Host,\n Prop,\n h,\n Element\n} from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\nimport { StzhAppnavLocalizedText } from \"./stzh-appnav.localization\";\n\n/**\n * @slot - Slot for `stzh-link` elements\n */\n@Component({\n tag: \"stzh-appnav\",\n styleUrl: \"stzh-appnav.scss\",\n scoped: true\n})\nexport class StzhAppnav {\n /** Translation strings */\n @Prop() localization: StzhAppnavLocalizedText;\n\n /** App title shown on tablet/desktop */\n @Prop() appTitle: string = \"\";\n\n /** Status displayed next to app title (only displayed if `app-title` is defined) */\n @Prop() appStatus: string = \"\";\n\n /** Link of app title (only used if `app-title` is defined) */\n @Prop() appHref: string = \"\";\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the app title link element.\n * Default value will be taken from `appTitle` prop or default slot.\n */\n @Prop() appAnalyticsId: string;\n\n @Element() element: HTMLStzhAppnavElement;\n\n private observer: MutationObserver;\n\n private init = () => {\n const links = this.element.querySelectorAll(\"stzh-link\");\n\n links.forEach((link) => {\n setPropsIfNull(link, {\n size: \"small\",\n variant: \"secondary\"\n } as HTMLStzhLinkElement)\n\n link.setAttribute(\"role\", \"listitem\");\n });\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"appnav\");\n }\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.init);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n return (\n <Host>\n <nav class=\"stzh-appnav\" role=\"navigation\" aria-label={this.localization.title}>\n <div class=\"stzh-appnav__items\" role=\"list\">\n <slot></slot>\n </div>\n {this.appTitle &&\n <a\n class=\"stzh-appnav__title\"\n href={this.appHref}\n s-object-id={this.appAnalyticsId || this.appTitle}\n >\n {this.appTitle}\n {this.appStatus &&\n <span class=\"stzh-appnav__status\">{this.appStatus}</span>\n }\n </a>\n }\n </nav>\n </Host>\n );\n }\n}\n"],"version":3}
package/dist/cjs/stzh-components.cjs.js CHANGED
@@ -3,7 +3,7 @@
3
3
  Object.defineProperty(exports, '__esModule', { value: true });
4
4
 
5
5
  const index = require('./index-45029280.js');
6
- const appGlobals = require('./app-globals-8d05cb28.js');
6
+ const appGlobals = require('./app-globals-856f268a.js');
7
7
 
8
8
  /*
9
9
  Stencil Client Patch Browser v4.3.0 | MIT Licensed | https://stenciljs.com
package/dist/collection/components/stzh-actionset/stzh-actionset.js CHANGED
@@ -120,18 +120,12 @@ export class StzhActionset {
120
120
  };
121
121
  const Action = (action) => (h("stzh-button", { class: {
122
122
  "stzh-actionset__action": true,
123
- "is-button": true,
124
- // "show-medium": !action.onlyCollapseText,
125
- // "hide-when-collapsed": !action.onlyCollapseText,
126
- // "hide-text-when-collapsed": action.onlyCollapseText
127
- }, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
123
+ "is-button": true
124
+ }, label: action.label, icon: action.icon, iconPosition: action.iconPosition, iconOnly: action.iconOnly, badge: action.badge, variant: action.variant
128
125
  ? action.variant
129
126
  : (this.variant === "stack" ? "secondary" : "tertiary"), size: action.size
130
127
  ? action.size
131
- : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }, h("span", { class: {
132
- // "show-medium": action.onlyCollapseText,
133
- // "hide-when-collapsed": action.onlyCollapseText
134
- } }, action.label)));
128
+ : (this.variant === "stack" ? "default" : "tiny"), badgePosition: "icon", onClick: (e) => { this.actionClick(action, e); } }));
135
129
  return (h(Host, { "has-collapsed-items": this.actionsCollapsed.length > 0 }, h("div", { class: classes }, h("div", { class: "stzh-actionset__actions", role: "group" }, h("div", { ref: (el) => (this.actionsElement = el), class: "stzh-actionset__actions-wrapper" }, this._actions.map(action => ((this.dynamicActions
136
130
  || (!this.dynamicActions &&
137
131
  this.actionsCollapsed.indexOf(action) === -1))
package/dist/collection/components/stzh-actionset/stzh-actionset.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"stzh-actionset.js","sourceRoot":"","sources":["../../../../src/components/stzh-actionset/stzh-actionset.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n tag: \"stzh-actionset\",\n styleUrl: \"stzh-actionset.scss\",\n scoped: true\n})\nexport class StzhActionset {\n /** Translation strings */\n @Prop() localization: StzhActionsetLocalizedText;\n\n /** Variant determining what position the action buttons are */\n @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n /** Button variant of popover button (button thats holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"\";\n\n /** Button size of popover button (button that holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n /** Popover placement of button that holds collapsed actions */\n @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n /**\n * Card header actions.\n * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n */\n @Prop() actions: StzhActionsetItem[] | string = [];\n private _actions: StzhActionsetItem[] = [];\n\n /** Header action click event */\n @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n @Element() element: HTMLStzhActionsetElement;\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @State() actionsCollapsed: StzhActionsetItem[] = [];\n @State() dynamicActions: boolean;\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n\n private actionsElement: HTMLElement;\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-actionset\",\n action,\n originalEvent\n });\n }\n\n private update = () => {\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n\n if (!this.actionsElement) {\n return;\n }\n\n Object.assign(this.actionsElement.style, {\n width: null,\n height: null\n });\n\n let newActionsVisible = 0;\n\n if (\n this.variant === \"overflow\" && this.isMedium\n || this.variant === \"stack\" && this.isSmall\n ) {\n this.dynamicActions = true;\n\n let newActionsHeight = 0;\n let newActionsWidth = 0;\n\n // update height and width\n Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n // check which item is visible and\n if (child.offsetTop === 0) {\n newActionsVisible++;\n\n const style = getComputedStyle(child);\n const marginLeft = parseInt(style.marginLeft);\n const marginRight = parseInt(style.marginRight);\n const marginTop = parseInt(style.marginTop);\n const marginBottom = parseInt(style.marginBottom);\n\n const childWidth = child.offsetWidth + marginLeft + marginRight;\n const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n if (newActionsHeight < childHeight) {\n newActionsHeight = childHeight;\n }\n\n newActionsWidth = newActionsWidth + childWidth + 1;\n }\n });\n\n Object.assign(this.actionsElement.style, {\n width: `${newActionsWidth}px`,\n height: `${newActionsHeight}px`\n });\n } else {\n this.dynamicActions = false;\n\n if (this.variant === \"overflow\") {\n newActionsVisible = 0;\n } else if (this.variant === \"stack\") {\n newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n }\n }\n\n this.actionsCollapsed = this._actions.slice(newActionsVisible);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private mediaChangeHandler = () => {\n this.actionsCollapsed = [];\n requestAnimationFrame(this.update);\n }\n\n async componentWillLoad() {\n this.actionsWatcher(this.actions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n }\n }\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentDidLoad() {\n this.update();\n }\n\n render() {\n const classes = {\n \"stzh-actionset\": true,\n // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n [`stzh-actionset--${this.variant}`]: !!this.variant\n };\n\n const Action = (action: StzhActionsetItem) => (\n <stzh-button\n class={{\n \"stzh-actionset__action\": true,\n \"is-button\": true,\n // \"show-medium\": !action.onlyCollapseText,\n // \"hide-when-collapsed\": !action.onlyCollapseText,\n // \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n iconPosition={action.iconPosition}\n iconOnly={action.iconOnly}\n badge={action.badge}\n variant={action.variant\n ? action.variant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={action.size\n ? action.size\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n badgePosition=\"icon\"\n onClick={(e) => { this.actionClick(action, e) }}\n >\n <span\n class={{\n // \"show-medium\": action.onlyCollapseText,\n // \"hide-when-collapsed\": action.onlyCollapseText\n }}\n >\n {action.label}\n </span>\n </stzh-button>\n );\n\n return (\n <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n <div class={classes}>\n <div class=\"stzh-actionset__actions\" role=\"group\">\n <div\n ref={(el) => (this.actionsElement = el as HTMLElement)}\n class=\"stzh-actionset__actions-wrapper\"\n >\n {this._actions.map(action => (\n (this.dynamicActions\n || (!this.dynamicActions &&\n this.actionsCollapsed.indexOf(action) === -1))\n &&\n (action.tooltipContent\n ?\n <stzh-tooltip\n strategy=\"fixed\"\n content={action.tooltipContent}\n >\n {Action(action)}\n </stzh-tooltip>\n :\n Action(action))\n ))}\n </div>\n\n <stzh-popover\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n strategy=\"fixed\"\n placement={this.popoverPlacement}\n class=\"stzh-actionset__action-popover\"\n >\n <stzh-button\n fullwidth\n disabled={this.actionsCollapsed.length === 0}\n class=\"stzh-actionset__action is-further\"\n variant={this.popoverButtonVariant !== \"\"\n ? this.popoverButtonVariant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={this.popoverButtonSize !== \"\"\n ? this.popoverButtonSize\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n iconOnly={this.variant === \"overflow\" && this.isMedium}\n iconPosition=\"right\"\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.actionsCollapsed.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e) => { this.actionClick(action, e) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"stzh-actionset.js","sourceRoot":"","sources":["../../../../src/components/stzh-actionset/stzh-actionset.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n Prop,\n h,\n Element,\n Watch,\n Event,\n EventEmitter,\n State\n} from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhActionsetItemClickEvent\n} from \"../../index\";\n\nimport { StzhActionsetLocalizedText } from './stzh-actionset.localization';\n\nimport {\n media,\n addMediaChangeListener,\n removeMediaChangeListener\n} from '../../utils/media-utils';\n\nimport {\n Placement,\n} from \"@floating-ui/dom\";\n\n/**\n */\n@Component({\n tag: \"stzh-actionset\",\n styleUrl: \"stzh-actionset.scss\",\n scoped: true\n})\nexport class StzhActionset {\n /** Translation strings */\n @Prop() localization: StzhActionsetLocalizedText;\n\n /** Variant determining what position the action buttons are */\n @Prop({ reflect: true }) variant: \"stack\" | \"overflow\" = \"stack\";\n\n /** Button variant of popover button (button thats holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonVariant: \"\" | \"default\" | \"secondary\" | \"input\" | \"tertiary\" = \"\";\n\n /** Button size of popover button (button that holds collapsed actions) */\n @Prop({ reflect: true }) popoverButtonSize: \"\" | \"default\" | \"small\" | \"tiny\" = \"\";\n\n /** Popover placement of button that holds collapsed actions */\n @Prop({ reflect: true }) popoverPlacement: Placement = \"bottom-end\";\n\n /**\n * Card header actions.\n * Array of objects that can include the button attributes `id`, `variant`, `icon`, `size`, `iconPosition`, `iconOnly`, `label` or `badge`:\n * `[{\"id\":\"action-1\", \"icon\": \"alarm-bell\", \"label\": \"Lorem\"}, {\"id\":\"action-2\", \"icon\": \"mail\", \"label\": \"Lorem\"}]`\n */\n @Prop() actions: StzhActionsetItem[] | string = [];\n private _actions: StzhActionsetItem[] = [];\n\n /** Header action click event */\n @Event() stzhActionClick: EventEmitter<StzhActionsetItemClickEvent>;\n\n @Element() element: HTMLStzhActionsetElement;\n\n @Watch(\"actions\")\n actionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._actions = JSON.parse(newValue);\n } else {\n this._actions = newValue;\n }\n }\n\n @State() actionsCollapsed: StzhActionsetItem[] = [];\n @State() dynamicActions: boolean;\n @State() isSmall: boolean;\n @State() isMedium: boolean;\n\n private actionsElement: HTMLElement;\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private actionClick = (action: StzhActionsetItem, originalEvent: MouseEvent) => {\n this.stzhActionClick.emit({\n component: \"stzh-actionset\",\n action,\n originalEvent\n });\n }\n\n private update = () => {\n this.isSmall = media(\"small\").matches;\n this.isMedium = media(\"medium\").matches;\n\n if (!this.actionsElement) {\n return;\n }\n\n Object.assign(this.actionsElement.style, {\n width: null,\n height: null\n });\n\n let newActionsVisible = 0;\n\n if (\n this.variant === \"overflow\" && this.isMedium\n || this.variant === \"stack\" && this.isSmall\n ) {\n this.dynamicActions = true;\n\n let newActionsHeight = 0;\n let newActionsWidth = 0;\n\n // update height and width\n Array.from(this.actionsElement.children).forEach((child: HTMLElement) => {\n // check which item is visible and\n if (child.offsetTop === 0) {\n newActionsVisible++;\n\n const style = getComputedStyle(child);\n const marginLeft = parseInt(style.marginLeft);\n const marginRight = parseInt(style.marginRight);\n const marginTop = parseInt(style.marginTop);\n const marginBottom = parseInt(style.marginBottom);\n\n const childWidth = child.offsetWidth + marginLeft + marginRight;\n const childHeight = child.offsetHeight + marginTop + marginBottom;\n\n if (newActionsHeight < childHeight) {\n newActionsHeight = childHeight;\n }\n\n newActionsWidth = newActionsWidth + childWidth + 1;\n }\n });\n\n Object.assign(this.actionsElement.style, {\n width: `${newActionsWidth}px`,\n height: `${newActionsHeight}px`\n });\n } else {\n this.dynamicActions = false;\n\n if (this.variant === \"overflow\") {\n newActionsVisible = 0;\n } else if (this.variant === \"stack\") {\n newActionsVisible = this._actions.length <= 3 ? this._actions.length : 2;\n }\n }\n\n this.actionsCollapsed = this._actions.slice(newActionsVisible);\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private mediaChangeHandler = () => {\n this.actionsCollapsed = [];\n requestAnimationFrame(this.update);\n }\n\n async componentWillLoad() {\n this.actionsWatcher(this.actions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"actionset\");\n }\n }\n\n connectedCallback() {\n addMediaChangeListener(this.mediaChangeHandler);\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n removeMediaChangeListener(this.mediaChangeHandler);\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n componentDidLoad() {\n this.update();\n }\n\n render() {\n const classes = {\n \"stzh-actionset\": true,\n // \"stzh-actionset--has-dynamic-actions\": this.dynamicActions,\n \"stzh-actionset--has-collapsed-items\": this.actionsCollapsed.length > 0,\n [`stzh-actionset--${this.variant}`]: !!this.variant\n };\n\n const Action = (action: StzhActionsetItem) => (\n <stzh-button\n class={{\n \"stzh-actionset__action\": true,\n \"is-button\": true\n }}\n label={action.label}\n icon={action.icon}\n iconPosition={action.iconPosition}\n iconOnly={action.iconOnly}\n badge={action.badge}\n variant={action.variant\n ? action.variant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={action.size\n ? action.size\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n badgePosition=\"icon\"\n onClick={(e) => { this.actionClick(action, e) }}\n ></stzh-button>\n );\n\n return (\n <Host has-collapsed-items={this.actionsCollapsed.length > 0}>\n <div class={classes}>\n <div class=\"stzh-actionset__actions\" role=\"group\">\n <div\n ref={(el) => (this.actionsElement = el as HTMLElement)}\n class=\"stzh-actionset__actions-wrapper\"\n >\n {this._actions.map(action => (\n (this.dynamicActions\n || (!this.dynamicActions &&\n this.actionsCollapsed.indexOf(action) === -1))\n &&\n (action.tooltipContent\n ?\n <stzh-tooltip\n strategy=\"fixed\"\n content={action.tooltipContent}\n >\n {Action(action)}\n </stzh-tooltip>\n :\n Action(action))\n ))}\n </div>\n\n <stzh-popover\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n strategy=\"fixed\"\n placement={this.popoverPlacement}\n class=\"stzh-actionset__action-popover\"\n >\n <stzh-button\n fullwidth\n disabled={this.actionsCollapsed.length === 0}\n class=\"stzh-actionset__action is-further\"\n variant={this.popoverButtonVariant !== \"\"\n ? this.popoverButtonVariant\n : (this.variant === \"stack\" ? \"secondary\" : \"tertiary\")}\n size={this.popoverButtonSize !== \"\"\n ? this.popoverButtonSize\n : (this.variant === \"stack\" ? \"default\" : \"tiny\")}\n icon={this.variant === \"stack\" ? \"angle-down\" : \"more-vertical\"}\n iconOnly={this.variant === \"overflow\" && this.isMedium}\n iconPosition=\"right\"\n label={this.variant === \"stack\"\n ? this.localization.furtherActions\n : (!this.isMedium ? this.localization.actions : \"\")}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.actionsCollapsed.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e) => { this.actionClick(action, e) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n </stzh-menu>\n </stzh-popover>\n </div>\n </div>\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/stzh-appnav/stzh-appnav.css CHANGED
@@ -222,9 +222,6 @@
222
222
  }
223
223
  }
224
224
  .stzh-appnav__title:hover {
225
- font-family: var(--stzh-font-family-heavy);
226
- font-weight: var(--stzh-font-weight-heavy);
227
- font-style: var(--stzh-font-style-heavy);
228
225
  color: var(--stzh-color-primary-hover, var(--stzh-color-zueribluedark));
229
226
  text-decoration: underline;
230
227
  }
package/dist/collection/components/stzh-card/stzh-card.css CHANGED
@@ -247,29 +247,6 @@
247
247
  /* Starred */
248
248
  /** Hidden header / footer border */
249
249
  }
250
- @media screen and (max-width: 1023px) {
251
- .stzh-card .vshow-medium {
252
- border: 0;
253
- clip: rect(0 0 0 0);
254
- -webkit-clip-path: inset(100%);
255
- clip-path: inset(100%);
256
- width: 0.0625rem;
257
- height: 0.0625rem;
258
- overflow: hidden;
259
- padding: 0;
260
- position: absolute;
261
- }
262
- }
263
- @media screen and (max-width: 1023px) {
264
- .stzh-card .show-medium {
265
- display: none;
266
- }
267
- }
268
- @media screen and (min-width: 1024px) {
269
- .stzh-card .hide-medium {
270
- display: none;
271
- }
272
- }
273
250
  .stzh-card__content-wrapper {
274
251
  position: relative;
275
252
  flex-grow: 1;
@@ -492,23 +469,9 @@
492
469
  .stzh-card--is-collapsible .stzh-card__header {
493
470
  cursor: pointer;
494
471
  }
495
- .stzh-card--is-collapsed .vhide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .vhide-when-collapsed {
496
- border: 0;
497
- clip: rect(0 0 0 0);
498
- -webkit-clip-path: inset(100%);
499
- clip-path: inset(100%);
500
- width: 0.0625rem;
501
- height: 0.0625rem;
502
- overflow: hidden;
503
- padding: 0;
504
- position: absolute;
505
- }
506
472
  .stzh-card--is-collapsed .hide-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .hide-when-collapsed {
507
473
  display: none;
508
474
  }
509
- .stzh-card--is-collapsed .show-when-collapsed, .stzh-card--has-collapsed-header .stzh-card__header .show-when-collapsed {
510
- display: block;
511
- }
512
475
  .stzh-card--is-collapsed .stzh-card__header {
513
476
  border-bottom: none;
514
477
  }
package/dist/collection/components/stzh-card/stzh-card.js CHANGED
@@ -263,7 +263,7 @@ export class StzhCard {
263
263
  .indexOf(sortableChildElement) === ((_c = sortableChildElement === null || sortableChildElement === void 0 ? void 0 : sortableChildElement.parentElement) === null || _c === void 0 ? void 0 : _c.children.length) - 1;
264
264
  const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;
265
265
  const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;
266
- const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
266
+ // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);
267
267
  // const headerActions = [
268
268
  // ...this._headerActions
269
269
  // ];
@@ -271,7 +271,7 @@ export class StzhCard {
271
271
  const hasHeader = hasHeading
272
272
  || this._subtitles.length > 0
273
273
  || this._headerActions.length > 0
274
- || nonCollapsingTextHeaderActions.length > 0
274
+ // || nonCollapsingTextHeaderActions.length > 0
275
275
  || this.starrable
276
276
  || sortableActionsEnabled;
277
277
  const hasFooter = footerUsed
@@ -297,25 +297,19 @@ export class StzhCard {
297
297
  };
298
298
  return (h(Host, { role: "listitem", "aria-label": this.heading, "is-sortable": sortableEnabled }, h("article", { ref: (el) => (this.mainElement = el), class: classes }, h("a", { ref: (el) => (this.imageLinkElement = el), "aria-hidden": "true", tabindex: "-1", class: "stzh-card__image-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("slot", { name: "image" })), h("div", { class: "stzh-card__content-wrapper" }, h("stzh-icon", { class: "stzh-card__dnd", name: "drag" }), h("header", { ref: (el) => (this.headerElement = el), class: "stzh-card__header", onClick: this.headerClick }, h("div", { class: "stzh-card__header-top" }, h("div", { ref: (el) => (this.headerLeftElement = el), class: "stzh-card__header-left" }, h("div", { class: "stzh-card__title-area" }, hasHeading &&
299
299
  h(Heading, { class: "stzh-card__title" }, h("a", { ref: (el) => (this.titleLinkElement = el), class: "stzh-card__title-link", href: this.href, target: this.target, onClick: this.href ? this.cardClick : null }, h("div", { ref: (el) => (this.headingTextElement = el) }, this.heading ? this.heading : h("slot", { name: "heading" })))), this._subtitles.length > 0 &&
300
- h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this._headerActions.map(action => (h("stzh-button", { class: {
301
- "stzh-card__card-action": true,
302
- "is-button": true,
303
- "show-medium": !action.onlyCollapseText,
304
- "hide-when-collapsed": !action.onlyCollapseText,
305
- "hide-text-when-collapsed": action.onlyCollapseText
306
- }, icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, variant: "tertiary", size: "tiny", badgePosition: "icon", onClick: () => { this.actionClick(action); } }, h("span", { class: {
307
- "vshow-medium": action.onlyCollapseText,
308
- "vhide-when-collapsed": action.onlyCollapseText
309
- } }, action.label)))), this.starrable &&
310
- h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&
300
+ h(Subtitle, { class: "stzh-card__subtitle", onClick: this.subtitleClick }, this._subtitles.map(subtitle => (h("span", { class: "stzh-card__subtitle-text" }, subtitle)))))), h("div", { ref: (el) => (this.headerRightElement = el), class: "stzh-card__header-right" }, h("div", { class: "stzh-card__card-actions" }, this.starrable &&
301
+ h("stzh-tooltip", null, h("stzh-button", { class: "stzh-card__card-action is-star", icon: this.starred ? "star-filled" : "star", variant: "tertiary", size: "tiny", iconOnly: true, onClick: this.starToggleClick }), h("div", { slot: "content" }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)), (this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) &&
311
302
  h("stzh-popover", { label: this.localization.actionsPopoverLabel, placement: "bottom-end", class: {
312
303
  "stzh-card__card-action-popover": true,
313
- "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
314
- } }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this.starrable &&
315
- h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd), nonCollapsingTextHeaderActions.map(action => (h("stzh-menu-item", { class: "hide-medium show-when-collapsed", icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); } }, action.label))), sortableActionsEnabled &&
304
+ // "hide-medium show-when-collapsed": !this.starrable && !sortableActionsEnabled
305
+ } }, h("stzh-button", { class: "stzh-card__card-action is-further", variant: "tertiary", size: "tiny", icon: "more-vertical", iconOnly: true }), h("stzh-menu", { slot: "content" }, this._headerActions.map(action => (h("stzh-menu-item", {
306
+ // class="hide-medium show-when-collapsed"
307
+ icon: action.icon, badge: action.badge, badgeEmpty: action.badgeEmpty, badgeType: action.badgeType, onClick: () => { this.actionClick(action); }
308
+ }, action.label))), sortableActionsEnabled &&
316
309
  h(Fragment, null, !isFirstItemInSortable &&
317
310
  h("stzh-menu-item", { icon: "arrow-up", onClick: this.arrowUpClick }, this.localization.actionMoveUp), !isLastItemInSortable &&
318
- h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown))))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
311
+ h("stzh-menu-item", { icon: "arrow-down", onClick: this.arrowDownClick }, this.localization.actionMoveDown)), this.starrable &&
312
+ h("stzh-menu-item", { icon: this.starred ? "star-filled" : "star", onClick: this.starToggleClick }, this.starred ? this.localization.actionRemove : this.localization.actionAdd)))))), h("div", { class: "stzh-card__header-meta" }, h("slot", { name: "meta" }))), h("div", { class: "stzh-card__content hide-when-collapsed" }, h("slot", { name: "content" })), h("div", { class: "stzh-card__footer hide-when-collapsed" }, h("slot", { name: "footer" }, this._footerActions.length > 0 &&
319
313
  h("stzh-actionset", { class: "stzh-card__footer-actionset", actions: this._footerActions }), this.selectable &&
320
314
  h("stzh-button", { class: "stzh-card__footer-select-button", fullwidth: true, type: "radio", variant: "secondary", name: this.name, value: this.value, checked: this.checked, disabled: this.disabled, label: this.localization.select, onStzhChange: this.handleSelectionChange }), this.withArrow &&
321
315
  h("stzh-icon", { class: "stzh-card__footer-arrow", name: "arrow-right-long" })))))));
package/dist/collection/components/stzh-card/stzh-card.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"stzh-card.js","sourceRoot":"","sources":["../../../../src/components/stzh-card/stzh-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n Fragment,\n forceUpdate\n} from \"@stencil/core\";\n\nimport {\n StzhCardHeaderAction,\n StzhActionsetItem,\n StzhCardCollapseEvent,\n StzhCardSubtitleClickEvent,\n StzhCardStarClickEvent,\n StzhCardClickEvent,\n StzhCardHeaderActionClickEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)\n */\n@Component({\n tag: \"stzh-card\",\n styleUrl: \"stzh-card.scss\",\n scoped: true\n})\nexport class StzhCard {\n /** Translation strings */\n @Prop() localization: StzhCardLocalizedText;\n\n /** Whether card is collapsed or not */\n @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n /** Whether card was starred */\n @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n /**\n * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n */\n @Prop({ reflect: true }) starrable: boolean = false;\n\n /** Whether card is selectable */\n @Prop({ reflect: true }) selectable: boolean = false;\n\n /** Whether card is checked (if card is selectable) */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** The name of the input element (if card is selectable) */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** Href of card */\n @Prop({ reflect: true }) href: string;\n\n /** target if the button is used as link (if href used) */\n @Prop() target: string;\n\n /** The value of the input element (if card is selectable) */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Whether the element is disabled or not (if card is selectable) */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether card arrow is shown in footer area */\n @Prop({ reflect: true }) withArrow: boolean = false;\n\n /** Heading (or use heading slot instead) */\n @Prop() heading: string = \"\";\n\n /** Heading level */\n @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n /** Subtitle */\n @Prop() subtitle: string | string[] = \"\";\n private _subtitles = [];\n\n /** Card header actions */\n @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\n\n /**\n * Card footer actions.\n * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n * You can listen to clicks with the `stzhActionClick` event.\n */\n @Prop() footerActions: string | StzhActionsetItem[] = [];\n private _footerActions: StzhActionsetItem[];\n\n /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n @Prop() subtitleInteractive: boolean = false;\n\n /**\n * Whether sorting should be disabled.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n */\n @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n /** Whether card is collapsible */\n @Prop({ reflect: true }) collapsible: boolean = false;\n\n /** Whether to hide header separation border */\n @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n /** Whether to hide footer separation border */\n @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n /** Whether card elevation should be hidden */\n @Prop({ reflect: true }) hideElevation: boolean = false;\n\n /**\n * Whether movement menu items should be shown.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n */\n @Prop() hideMovementActions: boolean = false;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhCardElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n /** Collapse event */\n @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n /** Subtitle click event */\n @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n /** Star click event */\n @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n /** Header action click event */\n @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n @Watch(\"subtitle\")\n subtitleWatcher(newValue: string[] | string) {\n if (typeof newValue === \"string\") {\n if (newValue === \"\") {\n this._subtitles = [];\n } else {\n try {\n this._subtitles = JSON.parse(newValue);\n } catch(err) {\n this._subtitles = [newValue];\n }\n }\n } else {\n this._subtitles = newValue;\n }\n }\n\n @Watch(\"headerActions\")\n headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n if (typeof newValue === \"string\") {\n this._headerActions = JSON.parse(newValue);\n } else {\n this._headerActions = newValue;\n }\n }\n\n @Watch(\"footerActions\")\n footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._footerActions = JSON.parse(newValue);\n } else {\n this._footerActions = newValue;\n }\n }\n\n @Watch(\"collapsed\")\n collapsedWatcher() {\n this.handleResize();\n }\n\n private observer: MutationObserver;\n\n private nodeChange = (entries) => {\n let changeInSlot = false;\n\n entries.forEach((entry) => {\n if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n changeInSlot = true;\n }\n });\n\n if (changeInSlot) {\n forceUpdate(this.element);\n }\n };\n\n private mainElement: HTMLElement;\n private headerElement: HTMLElement;\n private headerLeftElement: HTMLElement;\n private headerRightElement: HTMLElement;\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private update = () => {\n if (!this.mainElement) {\n return;\n }\n\n this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n if (media('medium').matches) {\n const headerWidth = this.headerElement.clientWidth;\n const leftWidth = this.headerLeftElement.clientWidth;\n const rightWidth = this.headerRightElement.clientWidth;\n\n if (headerWidth - leftWidth <= rightWidth) {\n this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n }\n }\n }\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n const found = composedPathTags.some(r => filterTags.includes(r))\n\n if (!found) {\n this.collapsed = !this.collapsed;\n\n this.stzhCollapse.emit({\n component: \"stzh-card\",\n collapsed: this.collapsed\n });\n }\n }\n\n private subtitleClick = () => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\"\n });\n }\n }\n\n private starToggleClick = () => {\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred\n });\n }\n\n private actionClick = (action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action\n });\n }\n\n private arrowUpClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"up\");\n }\n }\n\n private arrowDownClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"down\");\n }\n }\n\n private updateElementInsideSortable = () => {\n const currentSortable = this.element.closest(\"stzh-sortable\");\n\n // check if element is still inside sortable\n if (!currentSortable) {\n this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n return;\n }\n\n if (this.element) {\n forceUpdate(this.element);\n }\n }\n\n private init = () => {\n const chips = this.element.querySelectorAll(\n 'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n );\n\n chips.forEach((chip) => {\n setPropsIfNull(chip, {\n size: \"small\"\n } as HTMLStzhChipElement)\n });\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private handleMutation = (entries) => {\n this.init();\n this.nodeChange(entries);\n }\n\n private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n this.checked = event.detail.checked;\n }\n\n private cardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent\n });\n }\n\n private findSortableChildElement(): HTMLElement | undefined {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n let element: HTMLElement = this.element;\n let sortableContainer = null;\n\n if (typeof sortable.container === \"function\") {\n sortableContainer = sortable.container();\n } else {\n sortableContainer = sortable.container;\n }\n\n while (element.parentElement && element.parentElement !== sortableContainer) {\n element = element.parentElement;\n }\n\n return element;\n }\n }\n\n async componentWillLoad() {\n this.subtitleWatcher(this.subtitle);\n this.headerActionsWatcher(this.headerActions);\n this.footerActionsWatcher(this.footerActions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n }\n }\n\n componentDidLoad() {\n this.sortable = this.element.closest(\"stzh-sortable\");\n\n if (this.sortable) {\n this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n if (objectId) {\n this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.handleMutation);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const imageUsed: boolean = hasSlot(this.element, \"image\");\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n const footerUsed: boolean = hasSlot(this.element, \"footer\");\n const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n const Heading = `h${this.headingLevel}`;\n const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n const sortableChildElement = this.findSortableChildElement();\n\n const isFirstItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n // const headerActions = [\n // ...this._headerActions\n // ];\n\n const hasHeading = !!this.heading || headingUsed;\n\n const hasHeader = hasHeading\n || this._subtitles.length > 0\n || this._headerActions.length > 0\n || nonCollapsingTextHeaderActions.length > 0\n || this.starrable\n || sortableActionsEnabled;\n\n const hasFooter = footerUsed\n || this._footerActions.length > 0\n || this.selectable\n || this.withArrow;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--has-link\": !!this.href,\n \"stzh-card--has-image\": imageUsed,\n \"stzh-card--has-content\": contentUsed,\n \"stzh-card--has-subtitle\": !!this.subtitle,\n \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n \"stzh-card--has-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\n \"stzh-card--is-collapsible\": this.collapsible,\n \"stzh-card--is-collapsed\": this.collapsed,\n \"stzh-card--is-starred\": this.starred,\n \"stzh-card--is-checked\": this.checked,\n \"stzh-card--is-sortable\": sortableEnabled\n };\n\n return (\n <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n <article\n ref={(el) => (this.mainElement = el as HTMLElement)}\n class={classes}\n >\n <a\n ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class=\"stzh-card__image-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <slot name=\"image\"></slot>\n </a>\n <div class=\"stzh-card__content-wrapper\">\n <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n\n <header\n ref={(el) => (this.headerElement = el as HTMLElement)}\n class=\"stzh-card__header\"\n onClick={this.headerClick}\n >\n <div class=\"stzh-card__header-top\">\n <div\n ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n class=\"stzh-card__header-left\"\n >\n <div class=\"stzh-card__title-area\">\n {hasHeading &&\n <Heading class=\"stzh-card__title\">\n <a\n ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n class=\"stzh-card__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </a>\n </Heading>\n }\n {this._subtitles.length > 0 &&\n <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n {this._subtitles.map(subtitle => (\n <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n ))}\n </Subtitle>\n }\n </div>\n </div>\n <div\n ref={(el) => (this.headerRightElement = el as HTMLElement)}\n class=\"stzh-card__header-right\"\n >\n <div class=\"stzh-card__card-actions\">\n {this._headerActions.map(action => (\n <stzh-button\n class={{\n \"stzh-card__card-action\": true,\n \"is-button\": true,\n \"show-medium\": !action.onlyCollapseText,\n \"hide-when-collapsed\": !action.onlyCollapseText,\n \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n variant=\"tertiary\"\n size=\"tiny\"\n badgePosition=\"icon\"\n onClick={() => { this.actionClick(action) }}\n >\n <span\n class={{\n \"vshow-medium\": action.onlyCollapseText,\n \"vhide-when-collapsed\": action.onlyCollapseText\n }}\n >\n {action.label}\n </span>\n </stzh-button>\n ))}\n\n {this.starrable &&\n <stzh-tooltip>\n <stzh-button\n class=\"stzh-card__card-action is-star\"\n icon={this.starred ? \"star-filled\" : \"star\"}\n variant=\"tertiary\"\n size=\"tiny\"\n iconOnly={true}\n onClick={this.starToggleClick}\n ></stzh-button>\n <div slot=\"content\">\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </div>\n </stzh-tooltip>\n }\n\n {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n\n {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) &&\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class={{\n \"stzh-card__card-action-popover\": true,\n \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n }}\n >\n <stzh-button\n class=\"stzh-card__card-action is-further\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-vertical\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this.starrable &&\n <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </stzh-menu-item>\n }\n\n {nonCollapsingTextHeaderActions.map(action => (\n <stzh-menu-item\n class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={() => { this.actionClick(action) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n\n {sortableActionsEnabled &&\n <Fragment>\n {!isFirstItemInSortable &&\n <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n {this.localization.actionMoveUp}\n </stzh-menu-item>\n }\n {!isLastItemInSortable &&\n <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n {this.localization.actionMoveDown}\n </stzh-menu-item>\n }\n </Fragment>\n }\n </stzh-menu>\n </stzh-popover>\n }\n </div>\n </div>\n </div>\n\n <div class=\"stzh-card__header-meta\">\n <slot name=\"meta\"></slot>\n </div>\n </header>\n\n <div class=\"stzh-card__content hide-when-collapsed\">\n <slot name=\"content\"></slot>\n </div>\n\n <div class=\"stzh-card__footer hide-when-collapsed\">\n <slot name=\"footer\">\n {this._footerActions.length > 0 &&\n <stzh-actionset\n class=\"stzh-card__footer-actionset\"\n actions={this._footerActions}\n ></stzh-actionset>\n }\n\n {this.selectable &&\n <stzh-button\n class=\"stzh-card__footer-select-button\"\n fullwidth\n type=\"radio\"\n variant=\"secondary\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n label={this.localization.select}\n onStzhChange={this.handleSelectionChange}\n ></stzh-button>\n }\n\n {this.withArrow &&\n <stzh-icon\n class=\"stzh-card__footer-arrow\"\n name=\"arrow-right-long\"\n ></stzh-icon>}\n </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"]}
1
+ {"version":3,"file":"stzh-card.js","sourceRoot":"","sources":["../../../../src/components/stzh-card/stzh-card.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Element,\n Prop,\n Watch,\n Event,\n EventEmitter,\n Fragment,\n forceUpdate\n} from \"@stencil/core\";\n\nimport {\n StzhCardHeaderAction,\n StzhActionsetItem,\n StzhCardCollapseEvent,\n StzhCardSubtitleClickEvent,\n StzhCardStarClickEvent,\n StzhCardClickEvent,\n StzhCardHeaderActionClickEvent,\n StzhButtonChangeEvent\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\nimport { media } from '../../utils/media-utils';\n\nimport { StzhCardLocalizedText } from './stzh-card.localization';\n\n/**\n * @slot heading - Slot for heading\n * @slot image - Slot for optional image element\n * @slot content - Slot for content for any elements\n * @slot meta - Slot for meta elements (status or chip)\n * @slot footer - Slot to replace footer content (`footerActions`, 'withArrow`, and `selectable` button are not shown anymore)\n */\n@Component({\n tag: \"stzh-card\",\n styleUrl: \"stzh-card.scss\",\n scoped: true\n})\nexport class StzhCard {\n /** Translation strings */\n @Prop() localization: StzhCardLocalizedText;\n\n /** Whether card is collapsed or not */\n @Prop({ reflect: true, mutable: true }) collapsed: boolean = false;\n\n /** Whether card was starred */\n @Prop({ reflect: true, mutable: true }) starred: boolean = false;\n\n /**\n * Whether card star is displayed (with tooltip and menu-item in mobile popover).\n * The tooltip / menu-item text can be adjusted in the translations file (`actionAdd` & `actionRemove`).\n */\n @Prop({ reflect: true }) starrable: boolean = false;\n\n /** Whether card is selectable */\n @Prop({ reflect: true }) selectable: boolean = false;\n\n /** Whether card is checked (if card is selectable) */\n @Prop({ reflect: true }) checked: boolean = false;\n\n /** The name of the input element (if card is selectable) */\n @Prop({ reflect: true }) name: string = \"\";\n\n /** Href of card */\n @Prop({ reflect: true }) href: string;\n\n /** target if the button is used as link (if href used) */\n @Prop() target: string;\n\n /** The value of the input element (if card is selectable) */\n @Prop({ mutable: true }) value: string = \"\";\n\n /** Whether the element is disabled or not (if card is selectable) */\n @Prop({ reflect: true }) disabled: boolean = false;\n\n /** Whether card arrow is shown in footer area */\n @Prop({ reflect: true }) withArrow: boolean = false;\n\n /** Heading (or use heading slot instead) */\n @Prop() heading: string = \"\";\n\n /** Heading level */\n @Prop({ reflect: true }) headingLevel: \"1\" | \"2\" | \"3\" | \"4\" = \"3\";\n\n /** Subtitle */\n @Prop() subtitle: string | string[] = \"\";\n private _subtitles = [];\n\n /** Card header actions */\n @Prop() headerActions: string | StzhCardHeaderAction[] = [];\n private _headerActions: StzhCardHeaderAction[];\n\n /**\n * Card footer actions.\n * The [`stzh-actionset`](?path=/story/components-actionset) component is used internally.\n * You can listen to clicks with the `stzhActionClick` event.\n */\n @Prop() footerActions: string | StzhActionsetItem[] = [];\n private _footerActions: StzhActionsetItem[];\n\n /** Whether subtitle should be rendered as button and event `stzhSubtitleClick` executed on click */\n @Prop() subtitleInteractive: boolean = false;\n\n /**\n * Whether sorting should be disabled.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n */\n @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n /** Whether card is collapsible */\n @Prop({ reflect: true }) collapsible: boolean = false;\n\n /** Whether to hide header separation border */\n @Prop({ reflect: true }) hideHeaderBorder: boolean = false;\n\n /** Whether to hide footer separation border */\n @Prop({ reflect: true }) hideFooterBorder: boolean = false;\n\n /** Whether card elevation should be hidden */\n @Prop({ reflect: true }) hideElevation: boolean = false;\n\n /**\n * Whether movement menu items should be shown.\n * Has no effect if card is not inside a `card-list` element, which has `sortableEnabled` property set to true.\n */\n @Prop() hideMovementActions: boolean = false;\n\n /**\n * For Adobe Analytics.\n * Will be rendered as value of `s-object-id` attribute to the link elements.\n * Default value will be taken from `heading` prop/slot.\n */\n @Prop() analyticsId: string;\n\n @Element() element: HTMLStzhCardElement;\n\n /** Click event (if href is used) */\n @Event() stzhClick: EventEmitter<StzhCardClickEvent>;\n\n /** Collapse event */\n @Event() stzhCollapse: EventEmitter<StzhCardCollapseEvent>;\n\n /** Subtitle click event */\n @Event() stzhSubtitleClick: EventEmitter<StzhCardSubtitleClickEvent>;\n\n /** Star click event */\n @Event() stzhStarClick: EventEmitter<StzhCardStarClickEvent>;\n\n /** Header action click event */\n @Event() stzhHeaderActionClick: EventEmitter<StzhCardHeaderActionClickEvent>;\n\n @Watch(\"subtitle\")\n subtitleWatcher(newValue: string[] | string) {\n if (typeof newValue === \"string\") {\n if (newValue === \"\") {\n this._subtitles = [];\n } else {\n try {\n this._subtitles = JSON.parse(newValue);\n } catch(err) {\n this._subtitles = [newValue];\n }\n }\n } else {\n this._subtitles = newValue;\n }\n }\n\n @Watch(\"headerActions\")\n headerActionsWatcher(newValue: StzhCardHeaderAction[] | string) {\n if (typeof newValue === \"string\") {\n this._headerActions = JSON.parse(newValue);\n } else {\n this._headerActions = newValue;\n }\n }\n\n @Watch(\"footerActions\")\n footerActionsWatcher(newValue: StzhActionsetItem[] | string) {\n if (typeof newValue === \"string\") {\n this._footerActions = JSON.parse(newValue);\n } else {\n this._footerActions = newValue;\n }\n }\n\n @Watch(\"collapsed\")\n collapsedWatcher() {\n this.handleResize();\n }\n\n private observer: MutationObserver;\n\n private nodeChange = (entries) => {\n let changeInSlot = false;\n\n entries.forEach((entry) => {\n if (entry.target.closest('[slot]') || entry.target.hasAttribute('slot')) {\n changeInSlot = true;\n }\n });\n\n if (changeInSlot) {\n forceUpdate(this.element);\n }\n };\n\n private mainElement: HTMLElement;\n private headerElement: HTMLElement;\n private headerLeftElement: HTMLElement;\n private headerRightElement: HTMLElement;\n private imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n\n private update = () => {\n if (!this.mainElement) {\n return;\n }\n\n this.mainElement.classList.remove(\"stzh-card--has-collapsed-header\");\n\n if (media('medium').matches) {\n const headerWidth = this.headerElement.clientWidth;\n const leftWidth = this.headerLeftElement.clientWidth;\n const rightWidth = this.headerRightElement.clientWidth;\n\n if (headerWidth - leftWidth <= rightWidth) {\n this.mainElement.classList.add(\"stzh-card--has-collapsed-header\");\n }\n }\n }\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\"stzh-popover\", \"stzh-tooltip\", \"button\", \"a\", \"input\", \"select\", \"textarea\", \"iframe\", \"details\", \"label\", \"area\"];\n const composedPathTags = event.composedPath().map(element => (element as HTMLElement).tagName?.toLowerCase());\n const found = composedPathTags.some(r => filterTags.includes(r))\n\n if (!found) {\n this.collapsed = !this.collapsed;\n\n this.stzhCollapse.emit({\n component: \"stzh-card\",\n collapsed: this.collapsed\n });\n }\n }\n\n private subtitleClick = () => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\"\n });\n }\n }\n\n private starToggleClick = () => {\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred\n });\n }\n\n private actionClick = (action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action\n });\n }\n\n private arrowUpClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"up\");\n }\n }\n\n private arrowDownClick = () => {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n const element = this.findSortableChildElement();\n sortable.moveItem(element, \"down\");\n }\n }\n\n private updateElementInsideSortable = () => {\n const currentSortable = this.element.closest(\"stzh-sortable\");\n\n // check if element is still inside sortable\n if (!currentSortable) {\n this.sortable.removeEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.removeEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n return;\n }\n\n if (this.element) {\n forceUpdate(this.element);\n }\n }\n\n private init = () => {\n const chips = this.element.querySelectorAll(\n 'stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip'\n );\n\n chips.forEach((chip) => {\n setPropsIfNull(chip, {\n size: \"small\"\n } as HTMLStzhChipElement)\n });\n }\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.update);\n }\n\n private handleMutation = (entries) => {\n this.init();\n this.nodeChange(entries);\n }\n\n private handleSelectionChange = (event: CustomEvent<StzhButtonChangeEvent>) => {\n this.checked = event.detail.checked;\n }\n\n private cardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent\n });\n }\n\n private findSortableChildElement(): HTMLElement | undefined {\n const sortable = this.element.closest(\"stzh-sortable\");\n\n if (sortable) {\n let element: HTMLElement = this.element;\n let sortableContainer = null;\n\n if (typeof sortable.container === \"function\") {\n sortableContainer = sortable.container();\n } else {\n sortableContainer = sortable.container;\n }\n\n while (element.parentElement && element.parentElement !== sortableContainer) {\n element = element.parentElement;\n }\n\n return element;\n }\n }\n\n async componentWillLoad() {\n this.subtitleWatcher(this.subtitle);\n this.headerActionsWatcher(this.headerActions);\n this.footerActionsWatcher(this.footerActions);\n\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"card\");\n }\n }\n\n componentDidLoad() {\n this.sortable = this.element.closest(\"stzh-sortable\");\n\n if (this.sortable) {\n this.sortable.addEventListener(\"stzhUpdate\", this.updateElementInsideSortable);\n this.sortable.addEventListener(\"stzhDisable\", this.updateElementInsideSortable)\n }\n }\n\n componentDidRender() {\n requestAnimationFrame(() => {\n const objectId = this.analyticsId || this.headingTextElement?.innerText;\n\n if (objectId) {\n this.imageLinkElement?.setAttribute(\"s-object-id\", objectId);\n this.titleLinkElement?.setAttribute(\"s-object-id\", objectId);\n }\n });\n }\n\n connectedCallback() {\n this.init();\n\n this.observer = new MutationObserver(this.handleMutation);\n this.observer.observe(this.element, {\n childList: true,\n subtree: true\n });\n\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n }\n\n render() {\n const imageUsed: boolean = hasSlot(this.element, \"image\");\n const headingUsed: boolean = hasSlot(this.element, \"heading\");\n const footerUsed: boolean = hasSlot(this.element, \"footer\");\n const contentUsed: boolean = hasSlot(this.element, \"content\");\n\n const Heading = `h${this.headingLevel}`;\n const Subtitle = `${this.subtitleInteractive ? 'button' : 'span'}`;\n\n const sortableChildElement = this.findSortableChildElement();\n\n const isFirstItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable = sortableChildElement?.parentElement\n && Array.from(sortableChildElement?.parentElement?.children)\n .indexOf(sortableChildElement) === sortableChildElement?.parentElement?.children.length - 1;\n\n const sortableEnabled = !this.sortableDisabled && this.sortable && !this.sortable.disabled;\n const sortableActionsEnabled = sortableEnabled && !this.hideMovementActions;\n\n // const nonCollapsingTextHeaderActions = this._headerActions.filter(action => !action.onlyCollapseText);\n\n // const headerActions = [\n // ...this._headerActions\n // ];\n\n const hasHeading = !!this.heading || headingUsed;\n\n const hasHeader = hasHeading\n || this._subtitles.length > 0\n || this._headerActions.length > 0\n // || nonCollapsingTextHeaderActions.length > 0\n || this.starrable\n || sortableActionsEnabled;\n\n const hasFooter = footerUsed\n || this._footerActions.length > 0\n || this.selectable\n || this.withArrow;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--has-link\": !!this.href,\n \"stzh-card--has-image\": imageUsed,\n \"stzh-card--has-content\": contentUsed,\n \"stzh-card--has-subtitle\": !!this.subtitle,\n \"stzh-card--has-subtitle-interactive\": !!this.subtitle && this.subtitleInteractive,\n \"stzh-card--has-hidden-header-border\": this.hideHeaderBorder,\n \"stzh-card--has-hidden-footer-border\": this.hideFooterBorder,\n \"stzh-card--has-header\": hasHeader,\n \"stzh-card--has-footer\": hasFooter,\n \"stzh-card--is-collapsible\": this.collapsible,\n \"stzh-card--is-collapsed\": this.collapsed,\n \"stzh-card--is-starred\": this.starred,\n \"stzh-card--is-checked\": this.checked,\n \"stzh-card--is-sortable\": sortableEnabled\n };\n\n return (\n <Host role=\"listitem\" aria-label={this.heading} is-sortable={sortableEnabled}>\n <article\n ref={(el) => (this.mainElement = el as HTMLElement)}\n class={classes}\n >\n <a\n ref={(el) => (this.imageLinkElement = el as HTMLAnchorElement)}\n aria-hidden=\"true\"\n tabindex=\"-1\"\n class=\"stzh-card__image-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <slot name=\"image\"></slot>\n </a>\n <div class=\"stzh-card__content-wrapper\">\n <stzh-icon class=\"stzh-card__dnd\" name=\"drag\"></stzh-icon>\n\n <header\n ref={(el) => (this.headerElement = el as HTMLElement)}\n class=\"stzh-card__header\"\n onClick={this.headerClick}\n >\n <div class=\"stzh-card__header-top\">\n <div\n ref={(el) => (this.headerLeftElement = el as HTMLElement)}\n class=\"stzh-card__header-left\"\n >\n <div class=\"stzh-card__title-area\">\n {hasHeading &&\n <Heading class=\"stzh-card__title\">\n <a\n ref={(el) => (this.titleLinkElement = el as HTMLAnchorElement)}\n class=\"stzh-card__title-link\"\n href={this.href}\n target={this.target}\n onClick={this.href ? this.cardClick : null}\n >\n <div ref={(el) => (this.headingTextElement = el as HTMLDivElement)}>\n {this.heading ? this.heading : <slot name=\"heading\"></slot>}\n </div>\n </a>\n </Heading>\n }\n {this._subtitles.length > 0 &&\n <Subtitle class=\"stzh-card__subtitle\" onClick={this.subtitleClick}>\n {this._subtitles.map(subtitle => (\n <span class=\"stzh-card__subtitle-text\">{subtitle}</span>\n ))}\n </Subtitle>\n }\n </div>\n </div>\n <div\n ref={(el) => (this.headerRightElement = el as HTMLElement)}\n class=\"stzh-card__header-right\"\n >\n <div class=\"stzh-card__card-actions\">\n {/* {this._headerActions.map(action => (\n <stzh-button\n class={{\n \"stzh-card__card-action\": true,\n \"is-button\": true,\n \"show-medium\": !action.onlyCollapseText,\n \"hide-when-collapsed\": !action.onlyCollapseText,\n \"hide-text-when-collapsed\": action.onlyCollapseText\n }}\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n variant=\"tertiary\"\n size=\"tiny\"\n badgePosition=\"icon\"\n onClick={() => { this.actionClick(action) }}\n >\n <span\n class={{\n \"vshow-medium\": action.onlyCollapseText,\n \"vhide-when-collapsed\": action.onlyCollapseText\n }}\n >\n {action.label}\n </span>\n </stzh-button>\n ))} */}\n\n {this.starrable &&\n <stzh-tooltip>\n <stzh-button\n class=\"stzh-card__card-action is-star\"\n icon={this.starred ? \"star-filled\" : \"star\"}\n variant=\"tertiary\"\n size=\"tiny\"\n iconOnly={true}\n onClick={this.starToggleClick}\n ></stzh-button>\n <div slot=\"content\">\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </div>\n </stzh-tooltip>\n }\n\n {/* <stzh-actionset actions={headerActions} variant=\"overflow\"></stzh-actionset> */}\n {/* {(nonCollapsingTextHeaderActions.length > 0 || this.starrable || sortableActionsEnabled) && */}\n {(this._headerActions.length > 0 || this.starrable || sortableActionsEnabled) &&\n <stzh-popover\n label={this.localization.actionsPopoverLabel}\n placement=\"bottom-end\"\n class={{\n \"stzh-card__card-action-popover\": true,\n // \"hide-medium show-when-collapsed\": !this.starrable && !sortableActionsEnabled\n }}\n >\n <stzh-button\n class=\"stzh-card__card-action is-further\"\n variant=\"tertiary\"\n size=\"tiny\"\n icon=\"more-vertical\"\n iconOnly={true}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {/* {nonCollapsingTextHeaderActions.map(action => ( */}\n {this._headerActions.map(action => (\n <stzh-menu-item\n // class=\"hide-medium show-when-collapsed\"\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={() => { this.actionClick(action) }}\n >\n {action.label}\n </stzh-menu-item>\n ))}\n\n {sortableActionsEnabled &&\n <Fragment>\n {!isFirstItemInSortable &&\n <stzh-menu-item icon=\"arrow-up\" onClick={this.arrowUpClick}>\n {this.localization.actionMoveUp}\n </stzh-menu-item>\n }\n {!isLastItemInSortable &&\n <stzh-menu-item icon=\"arrow-down\" onClick={this.arrowDownClick}>\n {this.localization.actionMoveDown}\n </stzh-menu-item>\n }\n </Fragment>\n }\n\n {this.starrable &&\n <stzh-menu-item icon={this.starred ? \"star-filled\" : \"star\"} onClick={this.starToggleClick}>\n {this.starred ? this.localization.actionRemove : this.localization.actionAdd}\n </stzh-menu-item>\n }\n </stzh-menu>\n </stzh-popover>\n }\n </div>\n </div>\n </div>\n\n <div class=\"stzh-card__header-meta\">\n <slot name=\"meta\"></slot>\n </div>\n </header>\n\n <div class=\"stzh-card__content hide-when-collapsed\">\n <slot name=\"content\"></slot>\n </div>\n\n <div class=\"stzh-card__footer hide-when-collapsed\">\n <slot name=\"footer\">\n {this._footerActions.length > 0 &&\n <stzh-actionset\n class=\"stzh-card__footer-actionset\"\n actions={this._footerActions}\n ></stzh-actionset>\n }\n\n {this.selectable &&\n <stzh-button\n class=\"stzh-card__footer-select-button\"\n fullwidth\n type=\"radio\"\n variant=\"secondary\"\n name={this.name}\n value={this.value}\n checked={this.checked}\n disabled={this.disabled}\n label={this.localization.select}\n onStzhChange={this.handleSelectionChange}\n ></stzh-button>\n }\n\n {this.withArrow &&\n <stzh-icon\n class=\"stzh-card__footer-arrow\"\n name=\"arrow-right-long\"\n ></stzh-icon>}\n </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"]}
package/dist/collection/components/stzh-card/stzh-card.stories.js CHANGED
@@ -69,8 +69,7 @@ const headerActions = [
69
69
  "id": "message",
70
70
  "icon": "mail",
71
71
  "badge": "3",
72
- "label": "Messages",
73
- "onlyCollapseText": true
72
+ "label": "Messages"
74
73
  }
75
74
  ];
76
75
 
package/dist/collection/components/stzh-card-list/stzh-card-list.stories.js CHANGED
@@ -10,7 +10,6 @@ const story = createComponentStory(COMPONENT_NAME);
10
10
  const actions = `[
11
11
  {
12
12
  "id": "message",
13
- "onlyCollapseText": true,
14
13
  "icon": "mail",
15
14
  "badge": "3",
16
15
  "label": "Messages"
@@ -35,7 +34,6 @@ const actions2 = `[
35
34
  },
36
35
  {
37
36
  "id": "message",
38
- "onlyCollapseText": true,
39
37
  "icon": "mail",
40
38
  "badge": "3",
41
39
  "label": "Messages"