npm - @oiz/stzh-components - Versions diffs - 4.5.0 → 4.6.0-beta2 - Mend

@oiz/stzh-components 4.5.0 → 4.6.0-beta2

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 (1006) hide show

package/dist/components/{p-a649af8a.js.map → p-a7393afc.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-a649af8a.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,w/oBAAw/oB,CAAC;AAC7gpB,uBAAe,WAAW;;MC4Bb,QAAQ;;;;;;;;;QAsDX,eAAU,GAAG,EAAE,CAAC;QAiHhB,eAAU,GAAG,OAAO;YAC1B,IAAI,YAAY,GAAG,KAAK,CAAC;YAEzB,OAAO,CAAC,OAAO,CAAC,KAAK;gBACnB,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;oBACvE,YAAY,GAAG,IAAI,CAAC;iBACrB;aACF,CAAC,CAAC;YAEH,IAAI,YAAY,EAAE;gBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3B;SACF,CAAC;QAOM,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACrB,OAAO;aACR;YAED,MAAM,UAAU,GAAG;gBACjB,cAAc;gBACd,cAAc;gBACd,QAAQ;gBACR,YAAY;gBACZ,GAAG;gBACH,OAAO;gBACP,QAAQ;gBACR,UAAU;gBACV,QAAQ;gBACR,SAAS;gBACT,OAAO;gBACP,MAAM;aACP,CAAC;YACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,OAAO,cAAI,OAAA,MAAC,OAAuB,CAAC,OAAO,0CAAE,WAAW,EAAE,CAAA,EAAA,CAAC,CAAC;YAC9G,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YAEjE,IAAI,CAAC,KAAK,EAAE;gBACV,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBAEjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,SAAS,EAAE,WAAW;oBACtB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAiB;YACxC,IAAI,IAAI,CAAC,mBAAmB,EAAE;gBAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;oBAC1B,SAAS,EAAE,WAAW;oBACtB,aAAa,EAAE,KAAK;iBACrB,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,SAAS,EAAE,WAAW;gBACtB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,MAA4B;YACpE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;gBAC9B,SAAS,EAAE,WAAW;gBACtB,MAAM;gBACN,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG;YACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;YAEvD,IAAI,QAAQ,EAAE;gBACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aAClC;SACF,CAAC;QAEM,mBAAc,GAAG;YACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;YAEvD,IAAI,QAAQ,EAAE;gBACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;aACpC;SACF,CAAC;QAEM,gCAA2B,GAAG;YACpC,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;;YAG9D,IAAI,CAAC,eAAe,EAAE;gBACpB,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;gBAClF,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;gBACnF,OAAO;aACR;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3B;SACF,CAAC;QAEM,SAAI,GAAG;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;YAE/F,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,oDAAoD,CAAC,CAAC;YAElG,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,OAAO;iBACS,CAAC,CAAC;aAC3B,CAAC,CAAC;YAEH,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,SAAS;iBACO,CAAC,CAAC;aAC3B,CAAC,CAAC;SACJ,CAAC;QAEM,mBAAc,GAAG,OAAO;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAC1B,CAAC;QAEM,0BAAqB,GAAG,CAAC,KAAyC;YACxE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;SACrC,CAAC;QAEM,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,iBACjB,SAAS,EAAE,WAAW,EACtB,aAAa,KACT,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,GACxC,CAAC;SACJ,CAAC;;+BAjT2D,MAAM;uBAGT,SAAS;yBAGN,KAAK;uBAGP,KAAK;yBAMlB,KAAK;0BAGJ,KAAK;uBAGR,KAAK;oBAGT,EAAE;;;qBASD,EAAE;wBAGE,KAAK;8BAGC,KAAK;uBAG9B,EAAE;4BAGmC,GAAG;wBAG5B,EAAE;6BAIiB,EAAE;;;6BAmBL,EAAE;mCAIjB,KAAK;gCAMS,KAAK;2BAGV,KAAK;mCAMd,KAAK;;qBAUpB,EAAE;0BAGqB,KAAK;yBAGA,SAAS;;IAoB7D,eAAe,CAAC,QAA2B;QACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,QAAQ,KAAK,EAAE,EAAE;gBACnB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;aACtB;iBAAM;gBACL,IAAI;oBACF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;iBACxC;gBAAC,OAAO,GAAG,EAAE;oBACZ,IAAI,CAAC,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC;iBAC9B;aACF;SACF;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;SAC5B;KACF;IAGD,oBAAoB,CAAC,QAAyC;QAC5D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;IAGD,oBAAoB,CAAC,QAAsC;QACzD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;IAqJO,wBAAwB;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAEvD,IAAI,QAAQ,EAAE;YACZ,IAAI,OAAO,GAAgB,IAAI,CAAC,OAAO,CAAC;YACxC,IAAI,iBAAiB,GAAG,IAAI,CAAC;YAE7B,IAAI,OAAO,QAAQ,CAAC,SAAS,KAAK,UAAU,EAAE;gBAC5C,iBAAiB,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;aAC1C;iBAAM;gBACL,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC;aACxC;YAED,OAAO,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,aAAa,KAAK,iBAAiB,EAAE;gBAC3E,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;aACjC;YAED,OAAO,OAAO,CAAC;SAChB;KACF;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE9C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SAC/F;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAEtD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;YAC/E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;SACjF;KACF;IAED,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;gBAC7D,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;;QACJ,MAAM,SAAS,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC1D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC9D,MAAM,UAAU,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC5D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAE9D,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,mBAAmB,GAAG,QAAQ,GAAG,MAAM,EAAE,CAAC;QAEnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAE7D,MAAM,qBAAqB,GACzB,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;YACnC,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAEhG,MAAM,oBAAoB,GACxB,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;YACnC,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC;gBACrF,CAAA,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,MAAM,IAAG,CAAC,CAAC;QAE7D,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC3F,MAAM,sBAAsB,GAAG,eAAe,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC;QAE5E,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC;QAEjD,MAAM,SAAS,GACb,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;YAC1B,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;YAC9B,IAAI,CAAC,SAAS;YACd,sBAAsB;YACtB,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,IAAI,CAAC,UAAU,CAAC;QAElB,MAAM,SAAS,GAAG,UAAU,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;QAElF,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QAEzG,MAAM,QAAQ,GAAG,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC5E,MAAM,aAAa,GAAG,YAAY,QAAQ,EAAE,CAAC;QAE7C,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,4BAA4B,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC7D,6BAA6B,EAAE,IAAI,CAAC,eAAe,KAAK,OAAO;YAC/D,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;YAClC,sBAAsB,EAAE,SAAS;YACjC,wBAAwB,EAAE,WAAW;YACrC,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;YAC1C,qCAAqC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB;YAClF,uBAAuB,EAAE,SAAS;YAClC,uBAAuB,EAAE,SAAS;YAClC,2BAA2B,EAAE,IAAI,CAAC,WAAW;YAC7C,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,uBAAuB,EAAE,IAAI,CAAC,OAAO;YACrC,uBAAuB,EAAE,IAAI,CAAC,OAAO;YACrC,wBAAwB,EAAE,eAAe;YACzC,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,cAAc;SAC1C,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,OAAO,iBAAe,eAAe,IAC1E;;YAEE,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAEjD,0DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,iBAChD,MAAM,EAClB,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAEhD,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,EACJ,4DAAK,KAAK,EAAC,4BAA4B,IACrC,kEAAW,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,GAAa,EAC1D,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACxD,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,MAC7B,mEACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,SAAS,GACR,CACf,EACD,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,uBAAuB,IAC/B,UAAU,KACT,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,IAC/B,0DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,EAC5D,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,sBAC9B,aAAa,IAE/B,4DAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACJ,CACI,CACX,EACD,6DAAM,EAAE,EAAE,aAAa,EAAE,MAAM,UAC5B,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CACzB,EACN,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,KACzB,EAAC,QAAQ,qDAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,KAC3B,YAAM,KAAK,EAAC,0BAA0B,IAAE,QAAQ,CAAQ,CACzD,CAAC,CACO,CACZ,CACG,CACF,EACN,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,IACnE,IAAI,CAAC,SAAS,KACb,uEACE,oEACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAC3C,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GAChB,EACf,4DAAK,IAAI,EAAC,SAAS,IAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CACxE,CACO,CAChB,EAEA,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,sBAAsB,MAC1E,qEACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAC5C,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;gBACL,gCAAgC,EAAE,IAAI;;aAEvC,IAED,oEACE,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,eAAe,EACpB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,UAAU,EAAE,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAC7C,aAAa,EAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,sBAAsB,KAAI,MAAA,sBAAsB,CAAC,CAAC,CAAC,0CAAE,SAAS,CAAA,IAAI,SAAS,GAC9E,EACf,kEAAW,IAAI,EAAC,SAAS,IACtB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,KAC7B,sBACE,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;aAC7B,IAEA,MAAM,CAAC,KAAK,CACE,CAClB,CAAC,EAED,sBAAsB,KACrB,EAAC,QAAQ,uDACN,CAAC,qBAAqB,KACrB,uEAAgB,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACvD,IAAI,CAAC,YAAY,CAAC,YAAY,CAChB,CAClB,EACA,CAAC,oBAAoB,KACpB,uEAAgB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC3D,IAAI,CAAC,YAAY,CAAC,cAAc,CAClB,CAClB,CACQ,CACZ,EAEA,IAAI,CAAC,SAAS,KACb,uEAAgB,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACvF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAC7D,CAClB,CACS,CACC,CAChB,CACG,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACC,EAET,4DAAK,KAAK,EAAC,wCAAwC,IACjD,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EAEN,4DAAK,KAAK,EAAC,uCAAuC,IAChD,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,KAC7B,uEAAgB,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAmB,CACpG,EAEA,IAAI,CAAC,UAAU,KACd,oEACE,KAAK,EAAC,iCAAiC,EACvC,SAAS,QACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAC/B,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAC3B,CAChB,CACI,CACH,CACF,CACE,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx"],"sourcesContent":["/*\n @prop --content-min-height: Min height of content\n /\n\n:host {\n // --box-shadow: none;\n --border-radius: 0px;\n\n --content-min-height: 120px;\n\n --dnd-visibility: hidden;\n --dnd-opacity: 0;\n\n display: flex;\n flex-direction: column;\n position: relative;\n border-radius: var(--border-radius);\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n &[collapsed]:not([collapsed=\"false\"]) {\n --content-min-height: none;\n }\n\n &[checked]:not([checked=\"false\"]) {\n outline: 3px solid $colorPrimary;\n }\n\n &.is-ghost::after,\n .is-ghost &::after {\n border-radius: var(--border-radius);\n }\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n // --box-shadow: #{$boxShadowOverlay};\n }\n\n &.is-ghost,\n .is-ghost & {\n // --box-shadow: none;\n overflow: hidden;\n }\n\n &.is-drag,\n &.is-chosen,\n &.is-ghost,\n &.is-selected,\n .is-drag &,\n .is-chosen &,\n .is-ghost &,\n .is-selected &,\n &[is-sortable]:hover {\n --dnd-visibility: visible;\n --dnd-opacity: 1;\n }\n\n ::slotted([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\n }\n\n ::slotted(table) {\n border: 0;\n border-spacing: 0;\n\n th {\n @include font;\n }\n\n td,\n th {\n padding: 0;\n }\n\n td {\n color: $colorBlack;\n padding-left: space(\"xsmall\");\n }\n }\n}\n\n.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n background-color: $colorGrey10;\n border-radius: var(--border-radius);\n // box-shadow: var(--box-shadow);\n // transition: box-shadow $baseTransitionAnimationSpeed;\n\n // .vshow-medium {\n // @include mq($to: medium) {\n // @include visuallyhidden;\n // }\n // }\n\n // .show-medium {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n // .hide-medium {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n &--background-grey {\n background-color: $colorGrey10;\n }\n\n &--background-white {\n background-color: $colorWhite;\n }\n\n &--background-grey &__card-action-popover {\n --stzh-popover-background: #{$colorGrey20};\n --stzh-popover-item-hover-bg: #{$colorGrey30};\n }\n\n &__content-wrapper {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: var(--content-min-height);\n }\n\n &__dnd {\n --size: #{iconSize(\"xsmall\")};\n position: absolute;\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 3px;\n top: 23px;\n display: flex;\n visibility: var(--dnd-visibility);\n opacity: var(--dnd-opacity);\n transition: all $baseTransitionAnimationSpeed;\n display: none;\n\n @include mq($from: medium) {\n display: block;\n }\n\n @include mq($from: large) {\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 4px;\n top: 27px;\n }\n }\n\n &__header-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n &__header-meta {\n &:not(:empty) {\n display: inline-flex;\n margin-top: space(\"xsmall\");\n gap: space(\"xsmall\");\n }\n }\n\n &__header-left,\n &__header-right {\n display: flex;\n }\n\n &__header-right {\n @include spaceCurve(\"padding-left\", \"tiny\");\n }\n\n &__left {\n align-self: center;\n }\n\n &__title-area {\n @include wordWrap;\n overflow: hidden;\n }\n\n &__title,\n &__subtitle {\n margin: 0;\n }\n\n &__title-link {\n color: inherit;\n text-decoration-line: none;\n }\n\n &__title {\n @include font(\"title\");\n @include fontSize(\"milli\");\n }\n\n &__image-link {\n display: block;\n }\n\n &__subtitle {\n @include fontSize(\"milli\");\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n text-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n margin-left: -0.5625em;\n }\n\n &__subtitle-text {\n position: relative;\n display: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n padding-left: 0.5625em;\n\n &::after {\n content: \",\";\n position: absolute;\n left: 0;\n }\n }\n\n &__content {\n @include fontSize(\"milli\");\n flex-grow: 1;\n }\n\n // &__footer-meta {\n // @include fontSize('micro');\n // display: flex;\n // flex-wrap: wrap;\n // gap: space('xsmall');\n // color: $colorGrey80;\n // }\n\n // &__footer-meta-separator {\n // width: 1px;\n // background-color: currentColor;\n // flex-shrink: 0;\n // }\n\n &__card-actions {\n display: inline-flex;\n white-space: nowrap;\n }\n\n &__card-action {\n @include mq($to: medium) {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$baseColor};\n }\n\n &.is-button {\n --icon-size: #{iconSize(\"small\")};\n }\n\n &.is-placeholder {\n width: space(\"xxlarge\");\n height: space(\"xxlarge\");\n }\n\n &.is-star {\n }\n }\n\n &__card-action-popover {\n --width: auto;\n }\n\n / Service /\n\n &--service &__subtitle {\n @include fontCurve(\"p1\");\n }\n\n &--service &__subtitle {\n @include fontCurve(\"p1\");\n }\n\n &--service &__title {\n @include fontCurve(\"h3\", \"heading\");\n }\n\n / Has content /\n\n &--has-content &__content {\n @include spaceCurve(\"padding-bottom\", \"large\");\n padding-top: space(\"xlarge\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n\n @include mq($from: medium) {\n @include spaceCurve(\"padding-bottom\", \"medium\");\n }\n }\n\n &--has-content#{&}--service &__content {\n @include spaceCurve(\"padding\", \"regular\");\n }\n\n / Has header /\n\n &--has-header &__header {\n padding-top: space(\"xlarge\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n }\n\n &--has-header#{&}--has-content &__content {\n padding-top: space(\"xsmall\");\n }\n\n &--has-header#{&}--service &__header {\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &--has-header#{&}--has-content#{&}--service &__content {\n @include spaceCurve(\"padding-top\", \"regular\");\n }\n\n / Has footer /\n\n &--has-footer &__footer {\n @include spaceCurve(\"padding-bottom\", \"medium\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n }\n\n &--has-footer#{&}--has-content &__content {\n padding-bottom: space(\"medium\");\n }\n\n &--has-footer#{&}--service &__footer {\n @include spaceCurve(\"padding-bottom\", \"regular\");\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &--has-footer#{&}--has-content#{&}--service &__content {\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n / Has tag /\n\n &--has-tag#{&}--has-header &__header {\n padding-top: space(\"xxxlarge\");\n }\n\n / Has Link /\n\n &--has-link &__title-link,\n &--has-link &__content {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n // &::before {\n // transition: all $baseTransitionAnimationSpeed;\n // }\n }\n\n &--has-link &__header-meta,\n &--has-link &__footer-actionset,\n &--has-link &__footer-select-button {\n position: relative;\n z-index: 2;\n }\n\n &--has-link:has(#{&}__image-link:hover) &__title-link,\n &--has-link:has(#{&}__image-link:hover) &__content,\n &--has-link:has(#{&}__title-link:hover) &__title-link,\n &--has-link:has(#{&}__title-link:hover) &__content {\n color: $colorSecondary60;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary20;\n // }\n }\n\n // &__footer-arrow {\n // color: $colorPrimary;\n // }\n\n // &--has-link:hover &__footer-arrow {\n // color: $colorSecondary60;\n // }\n\n / Interactive Subtitle /\n\n &--has-subtitle-interactive &__subtitle {\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n appearance: none;\n background: none;\n border: none;\n transition: color $baseTransitionAnimationSpeed;\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n / Is collapsible /\n\n &--is-collapsible &__header {\n cursor: pointer;\n }\n\n / Collapsed (Header) /\n\n &--is-collapsed,\n &--has-collapsed-header &__header {\n // .vhide-when-collapsed {\n // @include visuallyhidden;\n // }\n\n .hide-when-collapsed {\n display: none;\n }\n\n // .show-when-collapsed {\n // display: block;\n // }\n }\n\n &--is-collapsed &__header {\n // border-bottom: none;\n padding-bottom: space(\"xlarge\");\n }\n\n &--is-collapsed#{&}--service &__header {\n // border-bottom: none;\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n &--is-collapsed &__card-action,\n &--has-collapsed-header &__card-action {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n / Starred /\n\n &--is-starred &__card-action.is-star {\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n / Hyphens /\n &--hyphens &__heading,\n &--hyphens &__title {\n hyphens: auto;\n }\n}\n\n.stzh-card__header {\n position: relative;\n}\n\n.stzh-card__badge {\n position: absolute;\n left: -5px;\n top: -5px;\n z-index: 1;\n}\n","import { Component, Element, Event, EventEmitter, forceUpdate, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhButtonChangeEvent,\n StzhCardClickEvent,\n StzhCardCollapseEvent,\n StzhCardHeaderAction,\n StzhCardHeaderActionClickEvent,\n StzhCardStarClickEvent,\n StzhCardSubtitleClickEvent,\n StzhBadgeType,\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\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` 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 background should be grey (default) or white /\n @Prop({ reflect: true }) backgroundColor: \"grey\" \| \"white\" = \"grey\";\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"service\" = \"default\";\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 /* Automatic Hyphens /\n @Prop({ reflect: true }) hyphensEnabled: 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 Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n /\n @Prop() headerActionsBadge: string;\n\n /\n If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n * By default, it takes the badge type from the first one. With this property you can overwrite it.\n /\n @Prop() headerActionsBadgeType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\";\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 `cardlist` element, which has `sortableEnabled` property set to true.\n /\n @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n /* Whether card is collapsible (only effective if href is not set) /\n @Prop({ reflect: true }) collapsible: boolean = false;\n\n /\n Whether movement menu items should be shown.\n * Has no effect if card is not inside a `cardlist` 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 /* Badge /\n @Prop() badge: string = \"\";\n \n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n \n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n @Element() element: HTMLStzhCardElement;\n\n /* Click event /\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 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 imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\n \"stzh-popover\",\n \"stzh-tooltip\",\n \"button\",\n \"stzh-badge\",\n \"a\",\n \"input\",\n \"select\",\n \"textarea\",\n \"iframe\",\n \"details\",\n \"label\",\n \"area\",\n ];\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 = (event: MouseEvent) => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\",\n originalEvent: event,\n });\n }\n };\n\n private starToggleClick = (event: MouseEvent) => {\n this.starred = !this.starred;\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred,\n originalEvent: event,\n });\n };\n\n private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action,\n originalEvent: event,\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('stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip');\n\n const texts = this.element.querySelectorAll('stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text');\n\n chips.forEach(chip => {\n setPropsIfNull(chip, {\n size: \"small\",\n } as HTMLStzhChipElement);\n });\n\n texts.forEach(text => {\n setPropsIfNull(text, {\n size: \"inherit\",\n } as HTMLStzhTextElement);\n });\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 handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent,\n ...(this.href ? { href: this.href } : {}),\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\n disconnectedCallback() {\n if (this.observer) {\n this.observer.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 =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) ===\n 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 hasHeading = !!this.heading \|\| headingUsed;\n\n const hasHeader =\n hasHeading \|\|\n this._subtitles.length > 0 \|\|\n this._headerActions.length > 0 \|\|\n this.starrable \|\|\n sortableActionsEnabled \|\|\n !!this.badge \|\| \n this.badgeEmpty;\n\n const hasFooter = footerUsed \|\| this._footerActions.length > 0 \|\| this.selectable;\n\n const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge \|\| action.badgeEmpty);\n\n const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;\n const descriptionId = `stzh-card${uniqueId}`;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--background-grey\": this.backgroundColor === \"grey\",\n \"stzh-card--background-white\": this.backgroundColor === \"white\",\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-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 [`stzh-card--${this.variant}`]: !!this.variant,\n \"stzh-card--hyphens\": this.hyphensEnabled,\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 onClick={!this.href ? this.handleCardClick : null}\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 ?? null}\n target={this.target}\n onClick={this.href ? this.handleCardClick : 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 <header class=\"stzh-card__header\" onClick={this.headerClick}>\n {(this.badge \|\| this.badgeEmpty) && (\n <stzh-badge\n class=\"stzh-card__badge\"\n label={this.badge}\n type={this.badgeType}\n ></stzh-badge>\n )}\n <div class=\"stzh-card__header-top\">\n <div class=\"stzh-card__header-left\">\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 ?? null}\n target={this.target}\n onClick={this.href ? this.handleCardClick : null}\n aria-describedby={descriptionId}\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 <span id={descriptionId} hidden>\n {this.localization?.clickTitle}\n </span>\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 class=\"stzh-card__header-right\">\n <div class=\"stzh-card__card-actions\" onClick={e => e.stopPropagation()}>\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 {(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 badge={this.headerActionsBadge}\n badgeEmpty={headerActionsWithBadge.length > 0}\n badgePosition=\"icon\"\n badgeType={this.headerActionsBadgeType \|\| headerActionsWithBadge[0]?.badgeType \|\| \"default\"}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this._headerActions.map(action => (\n <stzh-menu-item\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e: MouseEvent) => {\n this.actionClick(e, action);\n }}\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 class=\"stzh-card__footer-actionset\" actions={this._footerActions}></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 </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-a7393afc.js","mappings":";;;;;;;;;;;;AAAA,MAAM,WAAW,GAAG,w/oBAAw/oB,CAAC;AAC7gpB,uBAAe,WAAW;;MC4Bb,QAAQ;;;;;;;;;QAsDX,eAAU,GAAG,EAAE,CAAC;QAiHhB,eAAU,GAAG,OAAO;YAC1B,IAAI,YAAY,GAAG,KAAK,CAAC;YAEzB,OAAO,CAAC,OAAO,CAAC,KAAK;gBACnB,IAAI,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,KAAK,CAAC,MAAM,CAAC,YAAY,CAAC,MAAM,CAAC,EAAE;oBACvE,YAAY,GAAG,IAAI,CAAC;iBACrB;aACF,CAAC,CAAC;YAEH,IAAI,YAAY,EAAE;gBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3B;SACF,CAAC;QAOM,gBAAW,GAAG,CAAC,KAAiB;YACtC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACrB,OAAO;aACR;YAED,MAAM,UAAU,GAAG;gBACjB,cAAc;gBACd,cAAc;gBACd,QAAQ;gBACR,YAAY;gBACZ,GAAG;gBACH,OAAO;gBACP,QAAQ;gBACR,UAAU;gBACV,QAAQ;gBACR,SAAS;gBACT,OAAO;gBACP,MAAM;aACP,CAAC;YACF,MAAM,gBAAgB,GAAG,KAAK,CAAC,YAAY,EAAE,CAAC,GAAG,CAAC,OAAO,cAAI,OAAA,MAAC,OAAuB,CAAC,OAAO,0CAAE,WAAW,EAAE,CAAA,EAAA,CAAC,CAAC;YAC9G,MAAM,KAAK,GAAG,gBAAgB,CAAC,IAAI,CAAC,CAAC,IAAI,UAAU,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;YAEjE,IAAI,CAAC,KAAK,EAAE;gBACV,IAAI,CAAC,SAAS,GAAG,CAAC,IAAI,CAAC,SAAS,CAAC;gBAEjC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;oBACrB,SAAS,EAAE,WAAW;oBACtB,SAAS,EAAE,IAAI,CAAC,SAAS;iBAC1B,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,kBAAa,GAAG,CAAC,KAAiB;YACxC,IAAI,IAAI,CAAC,mBAAmB,EAAE;gBAC5B,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC;oBAC1B,SAAS,EAAE,WAAW;oBACtB,aAAa,EAAE,KAAK;iBACrB,CAAC,CAAC;aACJ;SACF,CAAC;QAEM,oBAAe,GAAG,CAAC,KAAiB;YAC1C,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC;gBACtB,SAAS,EAAE,WAAW;gBACtB,OAAO,EAAE,IAAI,CAAC,OAAO;gBACrB,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,gBAAW,GAAG,CAAC,KAAiB,EAAE,MAA4B;YACpE,IAAI,CAAC,qBAAqB,CAAC,IAAI,CAAC;gBAC9B,SAAS,EAAE,WAAW;gBACtB,MAAM;gBACN,aAAa,EAAE,KAAK;aACrB,CAAC,CAAC;SACJ,CAAC;QAEM,iBAAY,GAAG;YACrB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;YAEvD,IAAI,QAAQ,EAAE;gBACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;aAClC;SACF,CAAC;QAEM,mBAAc,GAAG;YACvB,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;YAEvD,IAAI,QAAQ,EAAE;gBACZ,MAAM,OAAO,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;gBAChD,QAAQ,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;aACpC;SACF,CAAC;QAEM,gCAA2B,GAAG;YACpC,MAAM,eAAe,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;;YAG9D,IAAI,CAAC,eAAe,EAAE;gBACpB,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;gBAClF,IAAI,CAAC,QAAQ,CAAC,mBAAmB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;gBACnF,OAAO;aACR;YAED,IAAI,IAAI,CAAC,OAAO,EAAE;gBAChB,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;aAC3B;SACF,CAAC;QAEM,SAAI,GAAG;YACb,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,iDAAiD,CAAC,CAAC;YAE/F,MAAM,KAAK,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,oDAAoD,CAAC,CAAC;YAElG,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,OAAO;iBACS,CAAC,CAAC;aAC3B,CAAC,CAAC;YAEH,KAAK,CAAC,OAAO,CAAC,IAAI;gBAChB,cAAc,CAAC,IAAI,EAAE;oBACnB,IAAI,EAAE,SAAS;iBACO,CAAC,CAAC;aAC3B,CAAC,CAAC;SACJ,CAAC;QAEM,mBAAc,GAAG,OAAO;YAC9B,IAAI,CAAC,IAAI,EAAE,CAAC;YACZ,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;SAC1B,CAAC;QAEM,0BAAqB,GAAG,CAAC,KAAyC;YACxE,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC;SACrC,CAAC;QAEM,oBAAe,GAAG,CAAC,aAAyB;YAClD,IAAI,CAAC,SAAS,CAAC,IAAI,iBACjB,SAAS,EAAE,WAAW,EACtB,aAAa,KACT,IAAI,CAAC,IAAI,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAE,GACxC,CAAC;SACJ,CAAC;;+BAjT2D,MAAM;uBAGT,SAAS;yBAGN,KAAK;uBAGP,KAAK;yBAMlB,KAAK;0BAGJ,KAAK;uBAGR,KAAK;oBAGT,EAAE;;;qBASD,EAAE;wBAGE,KAAK;8BAGC,KAAK;uBAG9B,EAAE;4BAGmC,GAAG;wBAG5B,EAAE;6BAIiB,EAAE;;;6BAmBL,EAAE;mCAIjB,KAAK;gCAMS,KAAK;2BAGV,KAAK;mCAMd,KAAK;;qBAUpB,EAAE;0BAGqB,KAAK;yBAGA,SAAS;;IAoB7D,eAAe,CAAC,QAA2B;QACzC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,QAAQ,KAAK,EAAE,EAAE;gBACnB,IAAI,CAAC,UAAU,GAAG,EAAE,CAAC;aACtB;iBAAM;gBACL,IAAI;oBACF,IAAI,CAAC,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;iBACxC;gBAAC,OAAO,GAAG,EAAE;oBACZ,IAAI,CAAC,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC;iBAC9B;aACF;SACF;aAAM;YACL,IAAI,CAAC,UAAU,GAAG,QAAQ,CAAC;SAC5B;KACF;IAGD,oBAAoB,CAAC,QAAyC;QAC5D,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;IAGD,oBAAoB,CAAC,QAAsC;QACzD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;YAChC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC;SAC5C;aAAM;YACL,IAAI,CAAC,cAAc,GAAG,QAAQ,CAAC;SAChC;KACF;IAqJO,wBAAwB;QAC9B,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAEvD,IAAI,QAAQ,EAAE;YACZ,IAAI,OAAO,GAAgB,IAAI,CAAC,OAAO,CAAC;YACxC,IAAI,iBAAiB,GAAG,IAAI,CAAC;YAE7B,IAAI,OAAO,QAAQ,CAAC,SAAS,KAAK,UAAU,EAAE;gBAC5C,iBAAiB,GAAG,QAAQ,CAAC,SAAS,EAAE,CAAC;aAC1C;iBAAM;gBACL,iBAAiB,GAAG,QAAQ,CAAC,SAAS,CAAC;aACxC;YAED,OAAO,OAAO,CAAC,aAAa,IAAI,OAAO,CAAC,aAAa,KAAK,iBAAiB,EAAE;gBAC3E,OAAO,GAAG,OAAO,CAAC,aAAa,CAAC;aACjC;YAED,OAAO,OAAO,CAAC;SAChB;KACF;IAED,MAAM,iBAAiB;QACrB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACpC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAE9C,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;YACtB,IAAI,CAAC,YAAY,GAAG,MAAM,MAAM,CAAC,cAAc,CAAC,KAAK,CAAC,iBAAiB,CAAC,IAAI,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC;SAC/F;KACF;IAED,gBAAgB;QACd,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,eAAe,CAAC,CAAC;QAEtD,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;YAC/E,IAAI,CAAC,QAAQ,CAAC,gBAAgB,CAAC,aAAa,EAAE,IAAI,CAAC,2BAA2B,CAAC,CAAC;SACjF;KACF;IAED,kBAAkB;QAChB,qBAAqB,CAAC;;YACpB,MAAM,QAAQ,GAAG,IAAI,CAAC,WAAW,KAAI,MAAA,IAAI,CAAC,kBAAkB,0CAAE,SAAS,CAAA,CAAC;YAExE,IAAI,QAAQ,EAAE;gBACZ,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;gBAC7D,MAAA,IAAI,CAAC,gBAAgB,0CAAE,YAAY,CAAC,aAAa,EAAE,QAAQ,CAAC,CAAC;aAC9D;SACF,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;QAC1D,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE;YAClC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;;QACJ,MAAM,SAAS,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAC1D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAC9D,MAAM,UAAU,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC;QAC5D,MAAM,WAAW,GAAY,OAAO,CAAC,IAAI,CAAC,OAAO,EAAE,SAAS,CAAC,CAAC;QAE9D,MAAM,OAAO,GAAG,IAAI,IAAI,CAAC,YAAY,EAAE,CAAC;QACxC,MAAM,QAAQ,GAAG,GAAG,IAAI,CAAC,mBAAmB,GAAG,QAAQ,GAAG,MAAM,EAAE,CAAC;QAEnE,MAAM,oBAAoB,GAAG,IAAI,CAAC,wBAAwB,EAAE,CAAC;QAE7D,MAAM,qBAAqB,GACzB,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;YACnC,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC,KAAK,CAAC,CAAC;QAEhG,MAAM,oBAAoB,GACxB,CAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa;YACnC,KAAK,CAAC,IAAI,CAAC,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,CAAC,OAAO,CAAC,oBAAoB,CAAC;gBACrF,CAAA,MAAA,oBAAoB,aAApB,oBAAoB,uBAApB,oBAAoB,CAAE,aAAa,0CAAE,QAAQ,CAAC,MAAM,IAAG,CAAC,CAAC;QAE7D,MAAM,eAAe,GAAG,CAAC,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC;QAC3F,MAAM,sBAAsB,GAAG,eAAe,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC;QAE5E,MAAM,UAAU,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO,IAAI,WAAW,CAAC;QAEjD,MAAM,SAAS,GACb,UAAU;YACV,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC;YAC1B,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC;YAC9B,IAAI,CAAC,SAAS;YACd,sBAAsB;YACtB,CAAC,CAAC,IAAI,CAAC,KAAK;YACZ,IAAI,CAAC,UAAU,CAAC;QAElB,MAAM,SAAS,GAAG,UAAU,IAAI,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC;QAElF,MAAM,sBAAsB,GAAG,IAAI,CAAC,cAAc,CAAC,MAAM,CAAC,MAAM,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,IAAI,MAAM,CAAC,UAAU,CAAC,CAAC;QAEzG,MAAM,QAAQ,GAAG,kBAAkB,IAAI,CAAC,MAAM,EAAE,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC;QAC5E,MAAM,aAAa,GAAG,YAAY,QAAQ,EAAE,CAAC;QAE7C,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,4BAA4B,EAAE,IAAI,CAAC,eAAe,KAAK,MAAM;YAC7D,6BAA6B,EAAE,IAAI,CAAC,eAAe,KAAK,OAAO;YAC/D,qBAAqB,EAAE,CAAC,CAAC,IAAI,CAAC,IAAI;YAClC,sBAAsB,EAAE,SAAS;YACjC,wBAAwB,EAAE,WAAW;YACrC,yBAAyB,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ;YAC1C,qCAAqC,EAAE,CAAC,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,mBAAmB;YAClF,uBAAuB,EAAE,SAAS;YAClC,uBAAuB,EAAE,SAAS;YAClC,2BAA2B,EAAE,IAAI,CAAC,WAAW;YAC7C,yBAAyB,EAAE,IAAI,CAAC,SAAS;YACzC,uBAAuB,EAAE,IAAI,CAAC,OAAO;YACrC,uBAAuB,EAAE,IAAI,CAAC,OAAO;YACrC,wBAAwB,EAAE,eAAe;YACzC,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;YAC9C,oBAAoB,EAAE,IAAI,CAAC,cAAc;SAC1C,CAAC;QAEF,QACE,EAAC,IAAI,qDAAC,IAAI,EAAC,UAAU,gBAAa,IAAI,CAAC,OAAO,iBAAe,eAAe,IAC1E;;YAEE,KAAK,EAAE,OAAO,EACd,OAAO,EAAE,CAAC,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAEjD,0DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,iBAChD,MAAM,EAClB,QAAQ,EAAC,IAAI,EACb,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,IAEhD,6DAAM,IAAI,EAAC,OAAO,GAAQ,CACxB,EACJ,4DAAK,KAAK,EAAC,4BAA4B,IACrC,kEAAW,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAC,MAAM,GAAa,EAC1D,+DAAQ,KAAK,EAAC,mBAAmB,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IACxD,CAAC,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,UAAU,MAC7B,mEACE,KAAK,EAAC,kBAAkB,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,SAAS,GACR,CACf,EACD,4DAAK,KAAK,EAAC,uBAAuB,IAChC,4DAAK,KAAK,EAAC,wBAAwB,IACjC,4DAAK,KAAK,EAAC,uBAAuB,IAC/B,UAAU,KACT,EAAC,OAAO,qDAAC,KAAK,EAAC,kBAAkB,IAC/B,0DACE,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,gBAAgB,GAAG,EAAuB,CAAC,EAC5D,KAAK,EAAC,uBAAuB,EAC7B,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,IAAI,EACvB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,OAAO,EAAE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC,eAAe,GAAG,IAAI,sBAC9B,aAAa,IAE/B,4DAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,kBAAkB,GAAG,EAAoB,CAAC,IAC7D,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,GAAG,YAAM,IAAI,EAAC,SAAS,GAAQ,CACvD,CACJ,CACI,CACX,EACD,6DAAM,EAAE,EAAE,aAAa,EAAE,MAAM,UAC5B,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CACzB,EACN,IAAI,CAAC,UAAU,CAAC,MAAM,GAAG,CAAC,KACzB,EAAC,QAAQ,qDAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,IAC9D,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,QAAQ,KAC3B,YAAM,KAAK,EAAC,0BAA0B,IAAE,QAAQ,CAAQ,CACzD,CAAC,CACO,CACZ,CACG,CACF,EACN,4DAAK,KAAK,EAAC,yBAAyB,IAClC,4DAAK,KAAK,EAAC,yBAAyB,EAAC,OAAO,EAAE,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,IACnE,IAAI,CAAC,SAAS,KACb,uEACE,oEACE,KAAK,EAAC,gCAAgC,EACtC,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAC3C,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,QAAQ,EAAE,IAAI,EACd,OAAO,EAAE,IAAI,CAAC,eAAe,GAChB,EACf,4DAAK,IAAI,EAAC,SAAS,IAChB,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CACxE,CACO,CAChB,EAEA,CAAC,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,SAAS,IAAI,sBAAsB,MAC1E,qEACE,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,mBAAmB,EAC5C,SAAS,EAAC,YAAY,EACtB,KAAK,EAAE;gBACL,gCAAgC,EAAE,IAAI;;aAEvC,IAED,oEACE,KAAK,EAAC,mCAAmC,EACzC,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,eAAe,EACpB,QAAQ,EAAE,IAAI,EACd,KAAK,EAAE,IAAI,CAAC,kBAAkB,EAC9B,UAAU,EAAE,sBAAsB,CAAC,MAAM,GAAG,CAAC,EAC7C,aAAa,EAAC,MAAM,EACpB,SAAS,EAAE,IAAI,CAAC,sBAAsB,KAAI,MAAA,sBAAsB,CAAC,CAAC,CAAC,0CAAE,SAAS,CAAA,IAAI,SAAS,GAC9E,EACf,kEAAW,IAAI,EAAC,SAAS,IACtB,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,MAAM,KAC7B,sBACE,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,MAAM,CAAC,KAAK,EACnB,UAAU,EAAE,MAAM,CAAC,UAAU,EAC7B,SAAS,EAAE,MAAM,CAAC,SAAS,EAC3B,OAAO,EAAE,CAAC,CAAa;gBACrB,IAAI,CAAC,WAAW,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC;aAC7B,IAEA,MAAM,CAAC,KAAK,CACE,CAClB,CAAC,EAED,sBAAsB,KACrB,EAAC,QAAQ,uDACN,CAAC,qBAAqB,KACrB,uEAAgB,IAAI,EAAC,UAAU,EAAC,OAAO,EAAE,IAAI,CAAC,YAAY,IACvD,IAAI,CAAC,YAAY,CAAC,YAAY,CAChB,CAClB,EACA,CAAC,oBAAoB,KACpB,uEAAgB,IAAI,EAAC,YAAY,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,IAC3D,IAAI,CAAC,YAAY,CAAC,cAAc,CAClB,CAClB,CACQ,CACZ,EAEA,IAAI,CAAC,SAAS,KACb,uEAAgB,IAAI,EAAE,IAAI,CAAC,OAAO,GAAG,aAAa,GAAG,MAAM,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACvF,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,YAAY,CAAC,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,SAAS,CAC7D,CAClB,CACS,CACC,CAChB,CACG,CACF,CACF,EAEN,4DAAK,KAAK,EAAC,wBAAwB,IACjC,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACC,EAET,4DAAK,KAAK,EAAC,wCAAwC,IACjD,6DAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,EAEN,4DAAK,KAAK,EAAC,uCAAuC,IAChD,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,cAAc,CAAC,MAAM,GAAG,CAAC,KAC7B,uEAAgB,KAAK,EAAC,6BAA6B,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,GAAmB,CACpG,EAEA,IAAI,CAAC,UAAU,KACd,oEACE,KAAK,EAAC,iCAAiC,EACvC,SAAS,QACT,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,WAAW,EACnB,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,YAAY,CAAC,MAAM,EAC/B,YAAY,EAAE,IAAI,CAAC,qBAAqB,GAC3B,CAChB,CACI,CACH,CACF,CACE,CACL,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-card/stzh-card.scss?tag=stzh-card&encapsulation=scoped","src/components/stzh-card/stzh-card.tsx"],"sourcesContent":["/*\n @prop --content-min-height: Min height of content\n /\n\n:host {\n // --box-shadow: none;\n --border-radius: 0px;\n\n --content-min-height: 120px;\n\n --dnd-visibility: hidden;\n --dnd-opacity: 0;\n\n display: flex;\n flex-direction: column;\n position: relative;\n border-radius: var(--border-radius);\n\n @media print {\n page-break-inside: avoid;\n break-inside: avoid;\n }\n\n &[collapsed]:not([collapsed=\"false\"]) {\n --content-min-height: none;\n }\n\n &[checked]:not([checked=\"false\"]) {\n outline: 3px solid $colorPrimary;\n }\n\n &.is-ghost::after,\n .is-ghost &::after {\n border-radius: var(--border-radius);\n }\n\n &[href]:hover,\n &[href]:focus-within,\n &.is-selected,\n &.is-chosen,\n .is-selected &,\n .is-chosen & {\n // --box-shadow: #{$boxShadowOverlay};\n }\n\n &.is-ghost,\n .is-ghost & {\n // --box-shadow: none;\n overflow: hidden;\n }\n\n &.is-drag,\n &.is-chosen,\n &.is-ghost,\n &.is-selected,\n .is-drag &,\n .is-chosen &,\n .is-ghost &,\n .is-selected &,\n &[is-sortable]:hover {\n --dnd-visibility: visible;\n --dnd-opacity: 1;\n }\n\n ::slotted([slot=\"image\"]) {\n width: 100%;\n max-width: 100%;\n }\n\n ::slotted(img[slot=\"image\"]) {\n display: block;\n }\n\n ::slotted(table) {\n border: 0;\n border-spacing: 0;\n\n th {\n @include font;\n }\n\n td,\n th {\n padding: 0;\n }\n\n td {\n color: $colorBlack;\n padding-left: space(\"xsmall\");\n }\n }\n}\n\n.stzh-card {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n background-color: $colorGrey10;\n border-radius: var(--border-radius);\n // box-shadow: var(--box-shadow);\n // transition: box-shadow $baseTransitionAnimationSpeed;\n\n // .vshow-medium {\n // @include mq($to: medium) {\n // @include visuallyhidden;\n // }\n // }\n\n // .show-medium {\n // @include mq($to: medium) {\n // display: none;\n // }\n // }\n\n // .hide-medium {\n // @include mq($from: medium) {\n // display: none;\n // }\n // }\n\n &--background-grey {\n background-color: $colorGrey10;\n }\n\n &--background-white {\n background-color: $colorWhite;\n }\n\n &--background-grey &__card-action-popover {\n --stzh-popover-background: #{$colorGrey20};\n --stzh-popover-item-hover-bg: #{$colorGrey30};\n }\n\n &__content-wrapper {\n position: relative;\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n min-height: var(--content-min-height);\n }\n\n &__dnd {\n --size: #{iconSize(\"xsmall\")};\n position: absolute;\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 3px;\n top: 23px;\n display: flex;\n visibility: var(--dnd-visibility);\n opacity: var(--dnd-opacity);\n transition: all $baseTransitionAnimationSpeed;\n display: none;\n\n @include mq($from: medium) {\n display: block;\n }\n\n @include mq($from: large) {\n // INFO: we don't use space() values here, because we want this element to align with the heading\n left: 4px;\n top: 27px;\n }\n }\n\n &__header-top {\n display: flex;\n justify-content: space-between;\n align-items: flex-start;\n }\n\n &__header-meta {\n &:not(:empty) {\n display: inline-flex;\n margin-top: space(\"xsmall\");\n gap: space(\"xsmall\");\n }\n }\n\n &__header-left,\n &__header-right {\n display: flex;\n }\n\n &__header-right {\n @include spaceCurve(\"padding-left\", \"tiny\");\n }\n\n &__left {\n align-self: center;\n }\n\n &__title-area {\n @include wordWrap;\n overflow: hidden;\n }\n\n &__title,\n &__subtitle {\n margin: 0;\n }\n\n &__title-link {\n color: inherit;\n text-decoration-line: none;\n }\n\n &__title {\n @include font(\"title\");\n @include fontSize(\"milli\");\n }\n\n &__image-link {\n display: block;\n }\n\n &__subtitle {\n @include fontSize(\"milli\");\n display: flex;\n align-items: center;\n flex-wrap: wrap;\n text-decoration-line: none;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n margin-left: -0.5625em;\n }\n\n &__subtitle-text {\n position: relative;\n display: inline-flex;\n // INFO: we don't use space() values here, since we try to mimic the width of a whitespace here\n padding-left: 0.5625em;\n\n &::after {\n content: \",\";\n position: absolute;\n left: 0;\n }\n }\n\n &__content {\n @include fontSize(\"milli\");\n flex-grow: 1;\n }\n\n // &__footer-meta {\n // @include fontSize('micro');\n // display: flex;\n // flex-wrap: wrap;\n // gap: space('xsmall');\n // color: $colorGrey80;\n // }\n\n // &__footer-meta-separator {\n // width: 1px;\n // background-color: currentColor;\n // flex-shrink: 0;\n // }\n\n &__card-actions {\n display: inline-flex;\n white-space: nowrap;\n }\n\n &__card-action {\n @include mq($to: medium) {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n &[variant=\"tertiary\"] {\n --color: #{$baseColor};\n }\n\n &.is-button {\n --icon-size: #{iconSize(\"small\")};\n }\n\n &.is-placeholder {\n width: space(\"xxlarge\");\n height: space(\"xxlarge\");\n }\n\n &.is-star {\n }\n }\n\n &__card-action-popover {\n --width: auto;\n }\n\n / Service /\n\n &--service &__subtitle {\n @include fontCurve(\"p1\");\n }\n\n &--service &__subtitle {\n @include fontCurve(\"p1\");\n }\n\n &--service &__title {\n @include fontCurve(\"h3\", \"heading\");\n }\n\n / Has content /\n\n &--has-content &__content {\n @include spaceCurve(\"padding-bottom\", \"large\");\n padding-top: space(\"xlarge\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n\n @include mq($from: medium) {\n @include spaceCurve(\"padding-bottom\", \"medium\");\n }\n }\n\n &--has-content#{&}--service &__content {\n @include spaceCurve(\"padding\", \"regular\");\n }\n\n / Has header /\n\n &--has-header &__header {\n padding-top: space(\"xlarge\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n }\n\n &--has-header#{&}--has-content &__content {\n padding-top: space(\"xsmall\");\n }\n\n &--has-header#{&}--service &__header {\n @include spaceCurve(\"padding-top\", \"regular\");\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &--has-header#{&}--has-content#{&}--service &__content {\n @include spaceCurve(\"padding-top\", \"regular\");\n }\n\n / Has footer /\n\n &--has-footer &__footer {\n @include spaceCurve(\"padding-bottom\", \"medium\");\n padding-left: space(\"xlarge\");\n padding-right: space(\"medium\");\n }\n\n &--has-footer#{&}--has-content &__content {\n padding-bottom: space(\"medium\");\n }\n\n &--has-footer#{&}--service &__footer {\n @include spaceCurve(\"padding-bottom\", \"regular\");\n @include spaceCurve(\"padding-left\", \"regular\");\n @include spaceCurve(\"padding-right\", \"regular\");\n }\n\n &--has-footer#{&}--has-content#{&}--service &__content {\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n / Has tag /\n\n &--has-tag#{&}--has-header &__header {\n padding-top: space(\"xxxlarge\");\n }\n\n / Has Link /\n\n &--has-link &__title-link,\n &--has-link &__content {\n transition: color $baseTransitionAnimationSpeed;\n }\n\n &--has-link &__title-link {\n color: $colorPrimary;\n text-decoration-line: none;\n border-radius: $buttonBorderRadius;\n cursor: pointer;\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n }\n\n // &::before {\n // transition: all $baseTransitionAnimationSpeed;\n // }\n }\n\n &--has-link &__header-meta,\n &--has-link &__footer-actionset,\n &--has-link &__footer-select-button {\n position: relative;\n z-index: 2;\n }\n\n &--has-link:has(#{&}__image-link:hover) &__title-link,\n &--has-link:has(#{&}__image-link:hover) &__content,\n &--has-link:has(#{&}__title-link:hover) &__title-link,\n &--has-link:has(#{&}__title-link:hover) &__content {\n color: $colorSecondary60;\n\n // &::before,\n // &::before {\n // background-color: $colorPrimary20;\n // }\n }\n\n // &__footer-arrow {\n // color: $colorPrimary;\n // }\n\n // &--has-link:hover &__footer-arrow {\n // color: $colorSecondary60;\n // }\n\n / Interactive Subtitle /\n\n &--has-subtitle-interactive &__subtitle {\n cursor: pointer;\n font-family: inherit;\n padding: 0;\n appearance: none;\n background: none;\n border: none;\n transition: color $baseTransitionAnimationSpeed;\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n / Is collapsible /\n\n &--is-collapsible &__header {\n cursor: pointer;\n }\n\n / Collapsed (Header) /\n\n &--is-collapsed,\n &--has-collapsed-header &__header {\n // .vhide-when-collapsed {\n // @include visuallyhidden;\n // }\n\n .hide-when-collapsed {\n display: none;\n }\n\n // .show-when-collapsed {\n // display: block;\n // }\n }\n\n &--is-collapsed &__header {\n // border-bottom: none;\n padding-bottom: space(\"xlarge\");\n }\n\n &--is-collapsed#{&}--service &__header {\n // border-bottom: none;\n @include spaceCurve(\"padding-bottom\", \"regular\");\n }\n\n &--is-collapsed &__card-action,\n &--has-collapsed-header &__card-action {\n --icon-text-margin: 0px;\n --badge-icon-text-margin: 0px;\n }\n\n / Starred /\n\n &--is-starred &__card-action.is-star {\n color: $colorPrimary;\n\n &:hover,\n &:focus {\n color: $colorPrimaryHover;\n }\n }\n\n / Hyphens /\n &--hyphens &__heading,\n &--hyphens &__title {\n hyphens: auto;\n }\n}\n\n.stzh-card__header {\n position: relative;\n}\n\n.stzh-card__badge {\n position: absolute;\n left: -5px;\n top: -5px;\n z-index: 1;\n}\n","import { Component, Element, Event, EventEmitter, forceUpdate, Fragment, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport {\n StzhActionsetItem,\n StzhButtonChangeEvent,\n StzhCardClickEvent,\n StzhCardCollapseEvent,\n StzhCardHeaderAction,\n StzhCardHeaderActionClickEvent,\n StzhCardStarClickEvent,\n StzhCardSubtitleClickEvent,\n StzhBadgeType,\n} from \"../../index\";\n\nimport { hasSlot, setPropsIfNull } from \"../../utils/utils\";\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` 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 background should be grey (default) or white /\n @Prop({ reflect: true }) backgroundColor: \"grey\" \| \"white\" = \"grey\";\n\n /* Variant /\n @Prop({ reflect: true }) variant: \"default\" \| \"service\" = \"default\";\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 /* Automatic Hyphens /\n @Prop({ reflect: true }) hyphensEnabled: 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 Set a badge text if header action badge exists (see headerActionsBadgeType for more info).\n /\n @Prop() headerActionsBadge: string;\n\n /\n If a header action with a badge exists inside `headerActions`, the more actions popover will automatically have a empty badge.\n * By default, it takes the badge type from the first one. With this property you can overwrite it.\n /\n @Prop() headerActionsBadgeType: \"default\" \| \"success\" \| \"warning\" \| \"error\" \| \"info\";\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 `cardlist` element, which has `sortableEnabled` property set to true.\n /\n @Prop({ reflect: true }) sortableDisabled: boolean = false;\n\n /* Whether card is collapsible (only effective if href is not set) /\n @Prop({ reflect: true }) collapsible: boolean = false;\n\n /\n Whether movement menu items should be shown.\n * Has no effect if card is not inside a `cardlist` 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 /* Badge /\n @Prop() badge: string = \"\";\n \n /* Whether badge should be displayed empty /\n @Prop({ reflect: true }) badgeEmpty: boolean = false;\n \n /* Badge type /\n @Prop({ reflect: true }) badgeType: StzhBadgeType = \"default\";\n\n @Element() element: HTMLStzhCardElement;\n\n /* Click event /\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 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 imageLinkElement: HTMLAnchorElement;\n private titleLinkElement: HTMLAnchorElement;\n private headingTextElement: HTMLDivElement;\n private sortable: HTMLStzhSortableElement;\n\n private headerClick = (event: MouseEvent) => {\n if (!this.collapsible) {\n return;\n }\n\n const filterTags = [\n \"stzh-popover\",\n \"stzh-tooltip\",\n \"button\",\n \"stzh-badge\",\n \"a\",\n \"input\",\n \"select\",\n \"textarea\",\n \"iframe\",\n \"details\",\n \"label\",\n \"area\",\n ];\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 = (event: MouseEvent) => {\n if (this.subtitleInteractive) {\n this.stzhSubtitleClick.emit({\n component: \"stzh-card\",\n originalEvent: event,\n });\n }\n };\n\n private starToggleClick = (event: MouseEvent) => {\n this.starred = !this.starred;\n this.stzhStarClick.emit({\n component: \"stzh-card\",\n starred: this.starred,\n originalEvent: event,\n });\n };\n\n private actionClick = (event: MouseEvent, action: StzhCardHeaderAction) => {\n this.stzhHeaderActionClick.emit({\n component: \"stzh-card\",\n action,\n originalEvent: event,\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('stzh-chip[slot=\"meta\"], [slot=\"meta\"] stzh-chip');\n\n const texts = this.element.querySelectorAll('stzh-text[slot=\"content\"], [slot=\"meta\"] stzh-text');\n\n chips.forEach(chip => {\n setPropsIfNull(chip, {\n size: \"small\",\n } as HTMLStzhChipElement);\n });\n\n texts.forEach(text => {\n setPropsIfNull(text, {\n size: \"inherit\",\n } as HTMLStzhTextElement);\n });\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 handleCardClick = (originalEvent: MouseEvent) => {\n this.stzhClick.emit({\n component: \"stzh-card\",\n originalEvent,\n ...(this.href ? { href: this.href } : {}),\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\n disconnectedCallback() {\n if (this.observer) {\n this.observer.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 =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) === 0;\n\n const isLastItemInSortable =\n sortableChildElement?.parentElement &&\n Array.from(sortableChildElement?.parentElement?.children).indexOf(sortableChildElement) ===\n 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 hasHeading = !!this.heading \|\| headingUsed;\n\n const hasHeader =\n hasHeading \|\|\n this._subtitles.length > 0 \|\|\n this._headerActions.length > 0 \|\|\n this.starrable \|\|\n sortableActionsEnabled \|\|\n !!this.badge \|\| \n this.badgeEmpty;\n\n const hasFooter = footerUsed \|\| this._footerActions.length > 0 \|\| this.selectable;\n\n const headerActionsWithBadge = this._headerActions.filter(action => !!action.badge \|\| action.badgeEmpty);\n\n const uniqueId = `--is-described-${Math.random().toString(36).slice(2, 9)}`;\n const descriptionId = `stzh-card${uniqueId}`;\n\n const classes = {\n \"stzh-card\": true,\n \"stzh-card--background-grey\": this.backgroundColor === \"grey\",\n \"stzh-card--background-white\": this.backgroundColor === \"white\",\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-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 [`stzh-card--${this.variant}`]: !!this.variant,\n \"stzh-card--hyphens\": this.hyphensEnabled,\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 onClick={!this.href ? this.handleCardClick : null}\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 ?? null}\n target={this.target}\n onClick={this.href ? this.handleCardClick : 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 <header class=\"stzh-card__header\" onClick={this.headerClick}>\n {(this.badge \|\| this.badgeEmpty) && (\n <stzh-badge\n class=\"stzh-card__badge\"\n label={this.badge}\n type={this.badgeType}\n ></stzh-badge>\n )}\n <div class=\"stzh-card__header-top\">\n <div class=\"stzh-card__header-left\">\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 ?? null}\n target={this.target}\n onClick={this.href ? this.handleCardClick : null}\n aria-describedby={descriptionId}\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 <span id={descriptionId} hidden>\n {this.localization?.clickTitle}\n </span>\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 class=\"stzh-card__header-right\">\n <div class=\"stzh-card__card-actions\" onClick={e => e.stopPropagation()}>\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 {(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 badge={this.headerActionsBadge}\n badgeEmpty={headerActionsWithBadge.length > 0}\n badgePosition=\"icon\"\n badgeType={this.headerActionsBadgeType \|\| headerActionsWithBadge[0]?.badgeType \|\| \"default\"}\n ></stzh-button>\n <stzh-menu slot=\"content\">\n {this._headerActions.map(action => (\n <stzh-menu-item\n icon={action.icon}\n badge={action.badge}\n badgeEmpty={action.badgeEmpty}\n badgeType={action.badgeType}\n onClick={(e: MouseEvent) => {\n this.actionClick(e, action);\n }}\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 class=\"stzh-card__footer-actionset\" actions={this._footerActions}></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 </slot>\n </div>\n </div>\n </article>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-b9a50363.js → p-a773eb1b.js} RENAMED Viewed

@@ -1,7 +1,7 @@
 import { p as proxyCustomElement, H, c as createEvent, h, d as Host } from './p-8f01554b.js';
-import { d as defineCustomElement$3 } from './p-17efbc57.js';
-import { d as defineCustomElement$2 } from './p-5a8587ab.js';
-import { d as defineCustomElement$1 } from './p-0ac64574.js';
+import { d as defineCustomElement$3 } from './p-42e86bbd.js';
+import { d as defineCustomElement$2 } from './p-a2659715.js';
+import { d as defineCustomElement$1 } from './p-10d1bf15.js';
 const stzhClampCss = ":host{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;}:host[hidden],:host[stzh-hidden]{display:none}:host::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}:host *,:host *::before,:host *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}:host .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}:host .stzh-fylingfocus-focused{outline-style:none !important}:host .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}stzh-clamp{font-family:var(--stzh-font-family-medium);font-weight:var(--stzh-font-weight-medium);font-style:var(--stzh-font-style-medium);color:var(--stzh-base-color);box-sizing:border-box;display:block;--current-lines:var(--lines, 0);width:100%;color:inherit;font-family:inherit;font-weight:inherit;font-style:inherit;font-size:inherit;line-height:inherit}stzh-clamp[hidden],stzh-clamp[stzh-hidden]{display:none}stzh-clamp::selection{color:var(--stzh-selection-color);background-color:var(--stzh-selection-background-color)}stzh-clamp *,stzh-clamp *::before,stzh-clamp *::after{box-sizing:border-box;text-underline-offset:var(--stzh-link-text-underline-offset);text-decoration-thickness:var(--stzh-link-text-decoration-thickness);-webkit-text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink);text-decoration-skip-ink:var(--stzh-link-text-decoration-skip-ink)}stzh-clamp .has-focus{outline:var(--stzh-flyingfocus-color) solid 0.125rem;outline-offset:0.125rem}stzh-clamp .stzh-fylingfocus-focused{outline-style:none !important}stzh-clamp .stzh-fylingfocus-focused::-moz-focus-inner{border:0 !important}@media screen and (min-width: 600px){stzh-clamp{--current-lines:var(--lines-small, var(--lines, 0))}}@media screen and (min-width: 900px){stzh-clamp{--current-lines:var(--lines-medium, var(--lines-small, var(--lines, 0)))}}@media screen and (min-width: 1260px){stzh-clamp{--current-lines:var(\n      --lines-large,\n      var(--lines-medium, var(--lines-small, var(--lines, 0)))\n    )}}@media screen and (min-width: 1600px){stzh-clamp{--current-lines:var(\n      --lines-ultra,\n      var(\n        --lines-large,\n        var(--lines-medium, var(--lines-small, var(--lines, 0)))\n      )\n    )}}.stzh-clamp{position:relative}.stzh-clamp__text{overflow-wrap:break-word;word-wrap:break-word;word-break:break-word;hyphens:auto;display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden}.stzh-clamp__text>*:first-child{margin-top:0 !important}.stzh-clamp__text>*:last-child{margin-bottom:0 !important}.stzh-clamp__text.is-clone{position:absolute;visibility:hidden;opacity:0;top:0;left:0;width:100%}@media screen and (min-width: 900px){.stzh-clamp__trigger{margin-top:var(--stzh-space-xxsmall)}}.stzh-clamp--is-not-expanded .stzh-clamp__text,.stzh-clamp__text.is-clone{-webkit-line-clamp:var(--current-lines);line-clamp:var(--current-lines)}";
 const StzhClampStyle0 = stzhClampCss;
@@ -94,13 +94,13 @@ const StzhClamp = /*@__PURE__*/ proxyCustomElement(class StzhClamp extends H {
             "stzh-clamp": true,
             "stzh-clamp--is-not-expanded": !this.expanded,
         };
-        return (h(Host, { key: 'ce2564683bb369204b34d6172388b15af81ed849', style: {
+        return (h(Host, { key: '4c3beb6c44ea2c7e85074c232058429c5c2f6f90', style: {
                 "--lines": this.lines ? this.lines.toString() : null,
                 "--lines-small": this.linesSmall ? this.linesSmall.toString() : null,
                 "--lines-medium": this.linesMedium ? this.linesMedium.toString() : null,
                 "--lines-large": this.linesLarge ? this.linesLarge.toString() : null,
                 "--lines-ultra": this.linesUltra ? this.linesUltra.toString() : null,
-            } }, h("div", { key: '56f31cdbcd4b3fa77c03b2935772a22037d65690', class: classes }, h("div", { key: '7176aa165e8ab282b88881382e0482ec9c7b186c', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: '45a9d189f108270afe090fe1f5ec81ee965efa85' })), h("div", { key: 'd6e1bbac98926f8571d8abe521e72b1072e89a9b', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: 'f5ee1f3dbf26525b06e68bc05cb41968dbc51c41', class: "stzh-clamp__trigger", a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
+            } }, h("div", { key: '6dea274e23657d573a734c5262d336a832d0a6e4', class: classes }, h("div", { key: '9d8e15e67d8a9f79e7529cd84a4927d229f4f9a6', ref: el => (this.textElement = el), class: "stzh-clamp__text" }, h("slot", { key: 'af576c95944517bfbba6be6cc09bcc0c52d42db4' })), h("div", { key: 'd9b1407596a639ba1608bf2487388c2d528a8ef0', ref: el => (this.textCloneElement = el), class: "stzh-clamp__text is-clone rs_skip", "aria-hidden": "true" }), this.showExpandLink && this.clamped && (h("stzh-link", { key: '4789e0580e79636b866e4137e7342cbd1b3d4f4d', class: "stzh-clamp__trigger", a11yTabindex: "-1", "aria-hidden": "true", onClick: this.handleExpandClick }, !this.expanded ? this.localization.showMore : this.localization.showLess)))));
     }
     get element() { return this; }
     static get style() { return StzhClampStyle0; }
@@ -147,4 +147,4 @@ function defineCustomElement() {
 export { StzhClamp as S, defineCustomElement as d };
-//# sourceMappingURL=p-b9a50363.js.map
+//# sourceMappingURL=p-a773eb1b.js.map

package/dist/components/{p-b9a50363.js.map → p-a773eb1b.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-b9a50363.js","mappings":"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","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/*\n @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n /\n\nstzh-clamp {\n @include host;\n --current-lines: var(--lines, 0);\n\n @include mq($from: small) {\n --current-lines: var(--lines-small, var(--lines, 0));\n }\n\n @include mq($from: medium) {\n --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n }\n\n @include mq($from: large) {\n --current-lines: var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n );\n }\n\n @include mq($from: ultra) {\n --current-lines: var(\n --lines-ultra,\n var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n )\n );\n }\n\n width: 100%;\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.stzh-clamp {\n position: relative;\n\n &__text {\n @include wordWrap;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n &.is-clone {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n }\n }\n\n &__trigger {\n @include mq($from: medium) {\n margin-top: space(\"xxsmall\");\n }\n }\n\n &--is-not-expanded &__text,\n &__text.is-clone {\n -webkit-line-clamp: var(--current-lines);\n line-clamp: var(--current-lines);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n @slot - Slot for clamp text\n /\n@Component({\n tag: \"stzh-clamp\",\n styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n /* Translation strings /\n @Prop() localization: StzhClampLocalizedText;\n\n /* Line number /\n @Prop() lines: number = 1;\n /* Line number above small breakpoint /\n @Prop() linesSmall: number = 0;\n /* Line number above medium breakpoint /\n @Prop() linesMedium: number = 0;\n /* Line number above large breakpoint /\n @Prop() linesLarge: number = 0;\n /* Line number above ultra breakpoint /\n @Prop() linesUltra: number = 0;\n\n /* Whether expand link is shown /\n @Prop() showExpandLink: boolean = false;\n\n /* Whether clamping is expanded /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n /* Whether the text is currently clamped (readonly) /\n @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n @Element() element: HTMLStzhClampElement;\n\n /* Event when clamping state changed /\n @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n /* Event when expanding state changed */\n @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n @Method()\n async update() {\n this.textCloneElement.innerHTML = this.textElement.innerHTML;\n this.updateClamped();\n }\n\n private textElement: HTMLElement;\n private textCloneElement: HTMLElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private mutationObserver: MutationObserver;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private updateClamped = () => {\n if (!this.textCloneElement) {\n return;\n }\n\n const beforeClamped = this.clamped;\n this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n if (beforeClamped !== this.clamped) {\n this.stzhClamp.emit({\n component: \"stzh-clamp\",\n clamped: this.clamped,\n });\n }\n };\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateClamped);\n };\n\n private handleMutaton = () => {\n this.update();\n };\n\n private handleExpandClick = async () => {\n this.expanded = !this.expanded;\n await this.waitForNextRender();\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded,\n });\n };\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n }\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(this.handleMutaton);\n this.mutationObserver.observe(this.textElement, {\n childList: true,\n subtree: true,\n });\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n\n this.update();\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-clamp\": true,\n \"stzh-clamp--is-not-expanded\": !this.expanded,\n };\n\n return (\n <Host\n style={{\n \"--lines\": this.lines ? this.lines.toString() : null,\n \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n }}\n >\n <div class={classes}>\n <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n <slot></slot>\n </div>\n\n <div\n ref={el => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone rs_skip\"\n aria-hidden=\"true\"\n ></div>\n\n {this.showExpandLink && this.clamped && (\n <stzh-link\n class=\"stzh-clamp__trigger\"\n a11yTabindex=\"-1\"\n aria-hidden=\"true\"\n onClick={this.handleExpandClick}\n >\n {!this.expanded ? this.localization.showMore : this.localization.showLess}\n </stzh-link>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-a773eb1b.js","mappings":"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","names":[],"sources":["src/components/stzh-clamp/stzh-clamp.scss?tag=stzh-clamp","src/components/stzh-clamp/stzh-clamp.tsx"],"sourcesContent":["/*\n @prop --current-lines: Currently clamped lines number (can be used instead of `lines-{BREAKPOINT}` attributes)\n /\n\nstzh-clamp {\n @include host;\n --current-lines: var(--lines, 0);\n\n @include mq($from: small) {\n --current-lines: var(--lines-small, var(--lines, 0));\n }\n\n @include mq($from: medium) {\n --current-lines: var(--lines-medium, var(--lines-small, var(--lines, 0)));\n }\n\n @include mq($from: large) {\n --current-lines: var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n );\n }\n\n @include mq($from: ultra) {\n --current-lines: var(\n --lines-ultra,\n var(\n --lines-large,\n var(--lines-medium, var(--lines-small, var(--lines, 0)))\n )\n );\n }\n\n width: 100%;\n color: inherit;\n font-family: inherit;\n font-weight: inherit;\n font-style: inherit;\n font-size: inherit;\n line-height: inherit;\n}\n\n.stzh-clamp {\n position: relative;\n\n &__text {\n @include wordWrap;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n overflow: hidden;\n\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n &.is-clone {\n position: absolute;\n visibility: hidden;\n opacity: 0;\n top: 0;\n left: 0;\n width: 100%;\n }\n }\n\n &__trigger {\n @include mq($from: medium) {\n margin-top: space(\"xxsmall\");\n }\n }\n\n &--is-not-expanded &__text,\n &__text.is-clone {\n -webkit-line-clamp: var(--current-lines);\n line-clamp: var(--current-lines);\n }\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Method, Prop } from \"@stencil/core\";\n\nimport { StzhClampClampEvent, StzhClampExpandEvent } from \"../../index\";\n\nimport { StzhClampLocalizedText } from \"./stzh-clamp.localization\";\n\n/\n @slot - Slot for clamp text\n /\n@Component({\n tag: \"stzh-clamp\",\n styleUrl: \"stzh-clamp.scss\",\n})\nexport class StzhClamp {\n /* Translation strings /\n @Prop() localization: StzhClampLocalizedText;\n\n /* Line number /\n @Prop() lines: number = 1;\n /* Line number above small breakpoint /\n @Prop() linesSmall: number = 0;\n /* Line number above medium breakpoint /\n @Prop() linesMedium: number = 0;\n /* Line number above large breakpoint /\n @Prop() linesLarge: number = 0;\n /* Line number above ultra breakpoint /\n @Prop() linesUltra: number = 0;\n\n /* Whether expand link is shown /\n @Prop() showExpandLink: boolean = false;\n\n /* Whether clamping is expanded /\n @Prop({ mutable: true, reflect: true }) expanded: boolean = false;\n\n /* Whether the text is currently clamped (readonly) /\n @Prop({ mutable: true, reflect: true }) clamped: boolean = false;\n\n @Element() element: HTMLStzhClampElement;\n\n /* Event when clamping state changed /\n @Event() stzhClamp: EventEmitter<StzhClampClampEvent>;\n\n /* Event when expanding state changed */\n @Event() stzhExpand: EventEmitter<StzhClampExpandEvent>;\n\n @Method()\n async update() {\n this.textCloneElement.innerHTML = this.textElement.innerHTML;\n this.updateClamped();\n }\n\n private textElement: HTMLElement;\n private textCloneElement: HTMLElement;\n\n private debounceResize: number;\n private resizeObserver: ResizeObserver;\n private mutationObserver: MutationObserver;\n private renderPromiseResolve: (value?: unknown) => void;\n\n private updateClamped = () => {\n if (!this.textCloneElement) {\n return;\n }\n\n const beforeClamped = this.clamped;\n this.clamped = this.textCloneElement.scrollHeight > this.textCloneElement.clientHeight;\n\n if (beforeClamped !== this.clamped) {\n this.stzhClamp.emit({\n component: \"stzh-clamp\",\n clamped: this.clamped,\n });\n }\n };\n\n private handleResize = () => {\n if (this.debounceResize) {\n window.cancelAnimationFrame(this.debounceResize);\n }\n\n this.debounceResize = requestAnimationFrame(this.updateClamped);\n };\n\n private handleMutaton = () => {\n this.update();\n };\n\n private handleExpandClick = async () => {\n this.expanded = !this.expanded;\n await this.waitForNextRender();\n\n this.stzhExpand.emit({\n component: \"stzh-clamp\",\n expanded: this.expanded,\n });\n };\n\n private waitForNextRender() {\n return new Promise(resolve => (this.renderPromiseResolve = resolve));\n }\n\n async componentWillLoad() {\n if (!this.localization) {\n this.localization = await window.stzhComponents.utils.fetchTranslations(this.element, \"clamp\");\n }\n }\n\n componentDidLoad() {\n this.mutationObserver = new MutationObserver(this.handleMutaton);\n this.mutationObserver.observe(this.textElement, {\n childList: true,\n subtree: true,\n });\n }\n\n componentDidRender() {\n if (this.renderPromiseResolve) {\n this.renderPromiseResolve();\n }\n\n this.update();\n }\n\n connectedCallback() {\n this.resizeObserver = new ResizeObserver(this.handleResize);\n this.resizeObserver.observe(this.element);\n }\n\n disconnectedCallback() {\n if (this.resizeObserver) {\n this.resizeObserver.disconnect();\n }\n\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-clamp\": true,\n \"stzh-clamp--is-not-expanded\": !this.expanded,\n };\n\n return (\n <Host\n style={{\n \"--lines\": this.lines ? this.lines.toString() : null,\n \"--lines-small\": this.linesSmall ? this.linesSmall.toString() : null,\n \"--lines-medium\": this.linesMedium ? this.linesMedium.toString() : null,\n \"--lines-large\": this.linesLarge ? this.linesLarge.toString() : null,\n \"--lines-ultra\": this.linesUltra ? this.linesUltra.toString() : null,\n }}\n >\n <div class={classes}>\n <div ref={el => (this.textElement = el as HTMLDivElement)} class=\"stzh-clamp__text\">\n <slot></slot>\n </div>\n\n <div\n ref={el => (this.textCloneElement = el as HTMLDivElement)}\n class=\"stzh-clamp__text is-clone rs_skip\"\n aria-hidden=\"true\"\n ></div>\n\n {this.showExpandLink && this.clamped && (\n <stzh-link\n class=\"stzh-clamp__trigger\"\n a11yTabindex=\"-1\"\n aria-hidden=\"true\"\n onClick={this.handleExpandClick}\n >\n {!this.expanded ? this.localization.showMore : this.localization.showLess}\n </stzh-link>\n )}\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-26ddf3b3.js → p-a87c8ead.js} RENAMED Viewed

@@ -15,7 +15,7 @@ const StzhList = /*@__PURE__*/ proxyCustomElement(class StzhList extends H {
             "stzh-list": true,
             [`stzh-list--${this.variant}`]: !!this.variant,
         };
-        return (h(Host, { key: 'cab51fa289bbc227c7194a4f13ce48f0c545ad81' }, h("div", { key: 'e264dea5d6d6adbe0601149d65a840b9e7b8a2f6', class: classes, role: "list" }, h("slot", { key: 'f16515c05d38db80712e8babf923c2726520d3e8' }))));
+        return (h(Host, { key: 'e1f72d17b9c193f894b672137b8df398ca7a34ac' }, h("div", { key: 'e907b513e73be3aef1ef763d880ada9a213e574e', class: classes, role: "list" }, h("slot", { key: 'a38331619add2055d7be8e1acd9a4439bcf2b58f' }))));
     }
     get element() { return this; }
     static get style() { return StzhListStyle0; }
@@ -38,4 +38,4 @@ function defineCustomElement() {
 export { StzhList as S, defineCustomElement as d };
-//# sourceMappingURL=p-26ddf3b3.js.map
+//# sourceMappingURL=p-a87c8ead.js.map

package/dist/components/{p-26ddf3b3.js.map → p-a87c8ead.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~26ddf3b3~~.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uuEAAuuE,CAAC;AAC5vE,uBAAe,WAAW;;MCSb,QAAQ;;;;;uBAEuD,WAAW;;IAIrF,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAC/C,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,IAC9B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-list/stzh-list.scss?tag=stzh-list&encapsulation=shadow","src/components/stzh-list/stzh-list.tsx"],"sourcesContent":[":host {\n --font-size: var(--stzh-list-font-size, var(--stzh-font-milli-font-size));\n --line-height: var(\n --stzh-list-line-height,\n var(--stzh-font-milli-text-line-height)\n );\n --letter-spacing: var(--stzh-list-letter-spacing, normal);\n\n @include mq($from: medium) {\n --font-size: var(--stzh-list-font-size, var(--stzh-font-centi-font-size));\n --line-height: var(\n --stzh-list-line-height,\n var(--stzh-font-centi-text-line-height)\n );\n }\n\n counter-reset: li-counter;\n\n ::slotted(stzh-list-item) {\n --icon-checklist-visibility: hidden;\n\n counter-increment: li-counter;\n position: relative;\n }\n}\n\n:host([variant=\"unordered\"]) ::slotted(stzh-list-item) {\n --icon-checklist-visibility: hidden;\n\n padding-left: calc(#{space(\"xsmall\")} + #{space(\"small\")});\n\n &::before {\n content: \"–\"; // old one: \\2014\n }\n}\n\n:host([variant=\"ordered\"]) ::slotted(stzh-list-item) {\n --icon-checklist-visibility: hidden;\n\n padding-left: calc(#{space(\"large\")} + #{space(\"small\")});\n\n &::before {\n content: counter(li-counter) \". \";\n }\n}\n\n:host([variant=\"checklist\"]) ::slotted(stzh-list-item) {\n --icon-checklist-visibility: visible;\n\n padding-left: calc(#{iconSize(\"medium\")} + #{space(\"small\")});\n}\n\n.stzh-list {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\n/*\n @slot - Slot for `stzh-list-item`\n /\n@Component({\n tag: \"stzh-list\",\n styleUrl: \"stzh-list.scss\",\n shadow: true,\n})\nexport class StzhList {\n /* Variant */\n @Prop({ reflect: true }) variant: \"unordered\" \| \"ordered\" \| \"checklist\" = \"unordered\";\n\n @Element() element: HTMLStzhListElement;\n\n render() {\n const classes = {\n \"stzh-list\": true,\n [`stzh-list--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host>\n <div class={classes} role=\"list\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-a87c8ead.js","mappings":";;AAAA,MAAM,WAAW,GAAG,uuEAAuuE,CAAC;AAC5vE,uBAAe,WAAW;;MCSb,QAAQ;;;;;uBAEuD,WAAW;;IAIrF,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,WAAW,EAAE,IAAI;YACjB,CAAC,cAAc,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,OAAO;SAC/C,CAAC;QAEF,QACE,EAAC,IAAI,uDACH,4DAAK,KAAK,EAAE,OAAO,EAAE,IAAI,EAAC,MAAM,IAC9B,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-list/stzh-list.scss?tag=stzh-list&encapsulation=shadow","src/components/stzh-list/stzh-list.tsx"],"sourcesContent":[":host {\n --font-size: var(--stzh-list-font-size, var(--stzh-font-milli-font-size));\n --line-height: var(\n --stzh-list-line-height,\n var(--stzh-font-milli-text-line-height)\n );\n --letter-spacing: var(--stzh-list-letter-spacing, normal);\n\n @include mq($from: medium) {\n --font-size: var(--stzh-list-font-size, var(--stzh-font-centi-font-size));\n --line-height: var(\n --stzh-list-line-height,\n var(--stzh-font-centi-text-line-height)\n );\n }\n\n counter-reset: li-counter;\n\n ::slotted(stzh-list-item) {\n --icon-checklist-visibility: hidden;\n\n counter-increment: li-counter;\n position: relative;\n }\n}\n\n:host([variant=\"unordered\"]) ::slotted(stzh-list-item) {\n --icon-checklist-visibility: hidden;\n\n padding-left: calc(#{space(\"xsmall\")} + #{space(\"small\")});\n\n &::before {\n content: \"–\"; // old one: \\2014\n }\n}\n\n:host([variant=\"ordered\"]) ::slotted(stzh-list-item) {\n --icon-checklist-visibility: hidden;\n\n padding-left: calc(#{space(\"large\")} + #{space(\"small\")});\n\n &::before {\n content: counter(li-counter) \". \";\n }\n}\n\n:host([variant=\"checklist\"]) ::slotted(stzh-list-item) {\n --icon-checklist-visibility: visible;\n\n padding-left: calc(#{iconSize(\"medium\")} + #{space(\"small\")});\n}\n\n.stzh-list {\n font-size: var(--font-size);\n line-height: var(--line-height);\n letter-spacing: var(--letter-spacing);\n}\n","import { Component, Host, h, Element, Prop } from \"@stencil/core\";\n\n/*\n @slot - Slot for `stzh-list-item`\n /\n@Component({\n tag: \"stzh-list\",\n styleUrl: \"stzh-list.scss\",\n shadow: true,\n})\nexport class StzhList {\n /* Variant */\n @Prop({ reflect: true }) variant: \"unordered\" \| \"ordered\" \| \"checklist\" = \"unordered\";\n\n @Element() element: HTMLStzhListElement;\n\n render() {\n const classes = {\n \"stzh-list\": true,\n [`stzh-list--${this.variant}`]: !!this.variant,\n };\n\n return (\n <Host>\n <div class={classes} role=\"list\">\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-9a31aa56.js → p-ace11500.js} RENAMED Viewed

@@ -18,7 +18,7 @@ const StzhText = /*@__PURE__*/ proxyCustomElement(class StzhText extends H {
         this.sizeUltra = "inherit";
     }
     render() {
-        return (h(Host, { key: '1ec9314cc970b7a79bbedae80e303b125dc19157' }, h("div", { key: '825ebf793d96136e562ceb2b1766f9db718bccab', class: {
+        return (h(Host, { key: '4edd3f2248c8094b2021064cce3de41f89b9323c' }, h("div", { key: '1bb5fa635d1dd15bbf1f267cfbb6a13398a81514', class: {
                 "stzh-text": true,
                 "stzh-text--is-lead": this.lead,
                 [`stzh-text--font-${this.font}`]: !!this.font,
@@ -28,7 +28,7 @@ const StzhText = /*@__PURE__*/ proxyCustomElement(class StzhText extends H {
                 [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,
                 [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,
                 [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,
-            } }, h("div", { key: '279ba05023ca81c3c37332dd4aa91183632b0b8d', class: "stzh-text__text" }, h("div", { key: '8991039f634dd5722439bfda60b57dda1975fec0', class: "stzh-text__icon" }, h("slot", { key: '59534b453bae64bf2ba2e563b86c1f9198f48c64', name: "icon" })), h("div", { key: 'c8aa41f6be05d1586fc2569107011ab95fbb9e1f', class: "stzh-text__text-inner" }, h("slot", { key: '649a5bede6d99063f718cedb86cc2584dcf08adb' }))))));
+            } }, h("div", { key: 'bd7e38c7d66e5a865201144c49d6d3345b51259f', class: "stzh-text__text" }, h("div", { key: '2696e430d823e471f97d50eda19fc0d43646e180', class: "stzh-text__icon" }, h("slot", { key: 'fe826eeb0330d49a5d5c579c80f34445e725a7a4', name: "icon" })), h("div", { key: '64d964ed407b4de13a482165a6df4668d9ff4662', class: "stzh-text__text-inner" }, h("slot", { key: '2726cba0de25e8f78faaea415ccba5eaab299623' }))))));
     }
     static get style() { return StzhTextStyle0; }
 }, [6, "stzh-text", {
@@ -58,4 +58,4 @@ function defineCustomElement() {
 export { StzhText as S, defineCustomElement as d };
-//# sourceMappingURL=p-9a31aa56.js.map
+//# sourceMappingURL=p-ace11500.js.map

package/dist/components/{p-9a31aa56.js.map → p-ace11500.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-~~9a31aa56~~.js","mappings":";;AAAA,MAAM,WAAW,GAAG,u0uCAAu0uC,CAAC;AAC51uC,uBAAe,WAAW;;MCYb,QAAQ;;;;oBAEQ,SAAS;qBAGU,SAAS;oBAGd,KAAK;qBAG6C,SAAS;oBAG7D,SAAS;yBAEJ,SAAS;0BAER,SAAS;yBAEV,SAAS;yBAET,SAAS;;IAErD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,0BAA0B,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;aAC9D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,8DAAa,CACT,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\n @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n \n @prop --stzh-base-color: Global: Text color\n * @prop --stzh-base-lead-color: Global: Lead text color\n /\n\n:host {\n --icon-size: 1.25em;\n --icon-vertical-align: text-bottom;\n --color: #{$baseColor};\n --display: var(--stzh-text-display, block);\n\n width: 100%;\n color: var(--color);\n\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n ::slotted(:first-child) {\n margin-top: 0 !important;\n }\n\n ::slotted(:last-child) {\n margin-bottom: 0 !important;\n }\n\n ::slotted(a),\n ::slotted( a) {\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n &:hover {\n color: $linkHoverColor;\n text-decoration-line: $linkHoverTextDecorationLine;\n\n @media (hover: none) {\n color: inherit;\n }\n }\n }\n\n ::slotted(b),\n ::slotted(strong),\n ::slotted(* b),\n ::slotted(* strong) {\n @include font(\"heavy\");\n }\n\n ::slotted(i),\n ::slotted(em),\n ::slotted(* i),\n ::slotted(* em) {\n @include font;\n }\n\n &[lead]:not([lead=\"false\"]) {\n --color: #{$baseLeadColor};\n }\n\n &[color=\"primary\"] {\n --color: #{$colorPrimary70};\n }\n\n &[color=\"secondary\"] {\n --color: #{$colorSecondary60};\n }\n\n &[color=\"info\"] {\n --color: #{$textInfoColor};\n }\n\n &[color=\"inherit\"] {\n --color: initial;\n }\n}\n\n.stzh-text {\n --stzh-icon-size: var(--icon-size);\n --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n --stzh-list-font-size: \"\";\n --stzh-list-line-height: \"\";\n --stzh-list-letter-spacing: \"\";\n\n // default font styling without attributes\n @include fontCurve($textFontCurveDefault);\n @include gridGutter;\n display: var(--display);\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n color: var(--color);\n\n &__text {\n grid-area: text;\n display: flex;\n }\n\n &__icon {\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: 0.25em;\n }\n }\n\n &__text-inner {\n flex-grow: 1;\n }\n\n /* Lead variant /\n\n &--is-lead {\n @include font(\"heavy\");\n @include fontCurve(\"lead\", \"lead\");\n }\n\n / Font variants /\n\n @each $font, $value in $fonts {\n &--font-#{$font} {\n @include font($font);\n }\n }\n\n / Curve variants /\n\n &--curve-none {\n font-size: inherit;\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName);\n }\n }\n\n / Size variants when consumer wants to overwrite predefined font curves /\n\n @each $size, $value in $fontSizes {\n &--size-#{$size} {\n @include fontSize($size);\n }\n }\n\n @each $breakpoint, $size in $breakpoints {\n @each $size, $value in $fontSizes {\n &--size-#{$breakpoint}-#{$size} {\n @include mq($from: $breakpoint) {\n @include fontSize($size);\n }\n }\n }\n }\n}\n\n.stzh-text__text-inner {\n text-overflow: var(--text-overflow, clip);\n white-space: var(--white-space, normal);\n overflow: var(--overflow, visible);\n width: var(--width, initial);\n max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/\n @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n /\n@Component({\n tag: \"stzh-text\",\n styleUrl: \"stzh-text.scss\",\n scoped: true,\n})\nexport class StzhText {\n /* Font used /\n @Prop() font: Font.Fonts = \"default\";\n\n /* Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n /* Whether if text is lead text /\n @Prop({ reflect: true }) lead: boolean = false;\n\n /* Color used /\n @Prop({ reflect: true }) color: \"default\" \| \"primary\" \| \"secondary\" \| \"info\" \| \"inherit\" = \"default\";\n\n /* Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() size: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeSmall: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeMedium: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeLarge: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeUltra: Font.Sizes \| \"inherit\" = \"inherit\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-text\": true,\n \"stzh-text--is-lead\": this.lead,\n [`stzh-text--font-${this.font}`]: !!this.font,\n [`stzh-text--curve-${this.curve}`]: !!this.curve,\n [`stzh-text--size-${this.size}`]: !!this.size,\n [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n }}\n >\n <div class=\"stzh-text__text\">\n <div class=\"stzh-text__icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"stzh-text__text-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-ace11500.js","mappings":";;AAAA,MAAM,WAAW,GAAG,u0uCAAu0uC,CAAC;AAC51uC,uBAAe,WAAW;;MCYb,QAAQ;;;;oBAEQ,SAAS;qBAGU,SAAS;oBAGd,KAAK;qBAG6C,SAAS;oBAG7D,SAAS;yBAEJ,SAAS;0BAER,SAAS;yBAEV,SAAS;yBAET,SAAS;;IAErD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,4DACE,KAAK,EAAE;gBACL,WAAW,EAAE,IAAI;gBACjB,oBAAoB,EAAE,IAAI,CAAC,IAAI;gBAC/B,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,oBAAoB,IAAI,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,KAAK;gBAChD,CAAC,mBAAmB,IAAI,CAAC,IAAI,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI;gBAC7C,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,0BAA0B,IAAI,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,UAAU;gBAChE,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;gBAC7D,CAAC,yBAAyB,IAAI,CAAC,SAAS,EAAE,GAAG,CAAC,CAAC,IAAI,CAAC,SAAS;aAC9D,IAED,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,4DAAK,KAAK,EAAC,iBAAiB,IAC1B,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,EACN,4DAAK,KAAK,EAAC,uBAAuB,IAChC,8DAAa,CACT,CACF,CACF,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-text/stzh-text.scss?tag=stzh-text&encapsulation=scoped","src/components/stzh-text/stzh-text.tsx"],"sourcesContent":["/*\n @prop --color: Text color (also `color` can be overwritten)\n * @prop --icon-size: Icon size\n * @prop --icon-vertical-align: Icon vertical alignment\n \n @prop --stzh-base-color: Global: Text color\n * @prop --stzh-base-lead-color: Global: Lead text color\n /\n\n:host {\n --icon-size: 1.25em;\n --icon-vertical-align: text-bottom;\n --color: #{$baseColor};\n --display: var(--stzh-text-display, block);\n\n width: 100%;\n color: var(--color);\n\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumns}\n );\n\n @include mq($from: small) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text\"\n );\n }\n\n @include mq($from: medium) {\n --grid-template-areas: var(\n --stzh-text-grid-template-areas,\n \"text text text text text text text text\"\n );\n\n --grid-template-columns: var(\n --stzh-text-grid-template-columns,\n #{$gridColumnsMedium}\n );\n }\n\n ::slotted(:first-child) {\n margin-top: 0 !important;\n }\n\n ::slotted(:last-child) {\n margin-bottom: 0 !important;\n }\n\n ::slotted(a),\n ::slotted( a) {\n color: $linkColor;\n transition: color $baseTransitionAnimationSpeed;\n border-radius: $buttonBorderRadius;\n text-underline-offset: $linkTextUnderlineOffset;\n text-decoration-line: $linkTextDecorationLine;\n text-decoration-thickness: $linkTextDecorationThickness;\n text-decoration-skip-ink: $linkTextDecorationSkipInk;\n\n &:hover {\n color: $linkHoverColor;\n text-decoration-line: $linkHoverTextDecorationLine;\n\n @media (hover: none) {\n color: inherit;\n }\n }\n }\n\n ::slotted(b),\n ::slotted(strong),\n ::slotted(* b),\n ::slotted(* strong) {\n @include font(\"heavy\");\n }\n\n ::slotted(i),\n ::slotted(em),\n ::slotted(* i),\n ::slotted(* em) {\n @include font;\n }\n\n &[lead]:not([lead=\"false\"]) {\n --color: #{$baseLeadColor};\n }\n\n &[color=\"primary\"] {\n --color: #{$colorPrimary70};\n }\n\n &[color=\"secondary\"] {\n --color: #{$colorSecondary60};\n }\n\n &[color=\"info\"] {\n --color: #{$textInfoColor};\n }\n\n &[color=\"inherit\"] {\n --color: initial;\n }\n}\n\n.stzh-text {\n --stzh-icon-size: var(--icon-size);\n --stzh-icon-vertical-align: var(--icon-vertical-align);\n\n --stzh-list-font-size: \"\";\n --stzh-list-line-height: \"\";\n --stzh-list-letter-spacing: \"\";\n\n // default font styling without attributes\n @include fontCurve($textFontCurveDefault);\n @include gridGutter;\n display: var(--display);\n grid-template-areas: var(--grid-template-areas);\n grid-template-columns: var(--grid-template-columns);\n\n color: var(--color);\n\n &__text {\n grid-area: text;\n display: flex;\n }\n\n &__icon {\n flex-shrink: 0;\n\n &:not(:empty) {\n margin-right: 0.25em;\n }\n }\n\n &__text-inner {\n flex-grow: 1;\n }\n\n /* Lead variant /\n\n &--is-lead {\n @include font(\"heavy\");\n @include fontCurve(\"lead\", \"lead\");\n }\n\n / Font variants /\n\n @each $font, $value in $fonts {\n &--font-#{$font} {\n @include font($font);\n }\n }\n\n / Curve variants /\n\n &--curve-none {\n font-size: inherit;\n }\n\n @each $fontCurveName, $config in $fontCurves {\n &--curve-#{$fontCurveName} {\n @include fontCurve($fontCurveName);\n }\n }\n\n / Size variants when consumer wants to overwrite predefined font curves /\n\n @each $size, $value in $fontSizes {\n &--size-#{$size} {\n @include fontSize($size);\n }\n }\n\n @each $breakpoint, $size in $breakpoints {\n @each $size, $value in $fontSizes {\n &--size-#{$breakpoint}-#{$size} {\n @include mq($from: $breakpoint) {\n @include fontSize($size);\n }\n }\n }\n }\n}\n\n.stzh-text__text-inner {\n text-overflow: var(--text-overflow, clip);\n white-space: var(--white-space, normal);\n overflow: var(--overflow, visible);\n width: var(--width, initial);\n max-width: var(--max-width, initial);\n}\n","import { Component, Host, h, Prop } from \"@stencil/core\";\n\nimport { Font } from \"../../index\";\n\n/\n @slot - Slot for text and icons\n * @slot icon - Slot for icon that should be on left side of the text (not inline)\n /\n@Component({\n tag: \"stzh-text\",\n styleUrl: \"stzh-text.scss\",\n scoped: true,\n})\nexport class StzhText {\n /* Font used /\n @Prop() font: Font.Fonts = \"default\";\n\n /* Type of curve (see [Spacings docs page](/docs/tokens-typography--docs#curves) for more info). /\n @Prop({ reflect: true }) curve: Font.Curves = \"default\";\n\n /* Whether if text is lead text /\n @Prop({ reflect: true }) lead: boolean = false;\n\n /* Color used /\n @Prop({ reflect: true }) color: \"default\" \| \"primary\" \| \"secondary\" \| \"info\" \| \"inherit\" = \"default\";\n\n /* Manually overwrite font size applied by curve attribute (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() size: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above small breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeSmall: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above medium breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeMedium: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above large breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). /\n @Prop() sizeLarge: Font.Sizes \| \"inherit\" = \"inherit\";\n /* Manually overwrite font size applied by curve attribute above ultra breakpoint (see [Spacings docs page](/docs/tokens-typography--docs#sizes) for more info). */\n @Prop() sizeUltra: Font.Sizes \| \"inherit\" = \"inherit\";\n\n render() {\n return (\n <Host>\n <div\n class={{\n \"stzh-text\": true,\n \"stzh-text--is-lead\": this.lead,\n [`stzh-text--font-${this.font}`]: !!this.font,\n [`stzh-text--curve-${this.curve}`]: !!this.curve,\n [`stzh-text--size-${this.size}`]: !!this.size,\n [`stzh-text--size-small-${this.sizeSmall}`]: !!this.sizeSmall,\n [`stzh-text--size-medium-${this.sizeMedium}`]: !!this.sizeMedium,\n [`stzh-text--size-large-${this.sizeLarge}`]: !!this.sizeLarge,\n [`stzh-text--size-ultra-${this.sizeUltra}`]: !!this.sizeUltra,\n }}\n >\n <div class=\"stzh-text__text\">\n <div class=\"stzh-text__icon\">\n <slot name=\"icon\"></slot>\n </div>\n <div class=\"stzh-text__text-inner\">\n <slot></slot>\n </div>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/{p-55b58017.js → p-ad34b5e0.js} RENAMED Viewed

@@ -50,7 +50,7 @@ const StzhCspace = /*@__PURE__*/ proxyCustomElement(class StzhCspace extends H {
         const classes = {
             "stzh-cspace": true,
         };
-        return (h(Host, { key: '79360c513e2ac661287290f10bffe7759810e52b', "has-hidden-first-margin": typeof this.removeFirstMargin === "boolean" ? this.removeFirstMargin : true, "has-hidden-last-margin": typeof this.removeLastMargin === "boolean" ? this.removeLastMargin : true }, h("div", { key: '187ffd3cdcfe9d2d0bc4a695db9bb7b829c490bd', ref: el => (this.rootElement = el), class: classes }, h("slot", { key: '92730db4406d5571dca85b73152fa95369e8eff1' }))));
+        return (h(Host, { key: 'f153d3a3bc466282e357366c894e14130800ac79', "has-hidden-first-margin": typeof this.removeFirstMargin === "boolean" ? this.removeFirstMargin : true, "has-hidden-last-margin": typeof this.removeLastMargin === "boolean" ? this.removeLastMargin : true }, h("div", { key: '14483f534bdfe96b133c7b126f2aa679ac53a914', ref: el => (this.rootElement = el), class: classes }, h("slot", { key: '05e906b11ed1547d698b7f61e67be071ed16858f' }))));
     }
     get element() { return this; }
     static get watchers() { return {
@@ -80,4 +80,4 @@ function defineCustomElement() {
 export { StzhCspace as S, defineCustomElement as d };
-//# sourceMappingURL=p-55b58017.js.map
+//# sourceMappingURL=p-ad34b5e0.js.map

package/dist/components/{p-55b58017.js.map → p-ad34b5e0.js.map} RENAMED Viewed

	@@ -1 +1 @@
1	- {"file":"p-55b58017.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,u0+GAAu0+G,CAAC;AAC91+G,yBAAe,aAAa;;MCUf,UAAU;;;;QAoBb,SAAI,GAAG;YACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACrB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;gBAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;sBAC/B,4BAA4B;sBAC5B,sKAAsK,CAC3K,CAAC;gBAEF,sBAAsB,CAAC,OAAO,CAAC,gBAAgB;oBAC7C,cAAc,CAAC,gBAAgB,EAAE;wBAC/B,iBAAiB,EAAE,KAAK;wBACxB,gBAAgB,EAAE,KAAK;qBAC2B,CAAC,CAAC;iBACvD,CAAC,CAAC;aACJ;SACF,CAAC;;;mCA/B6E,QAAQ;;IAKvF,0BAA0B;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IA0BD,kBAAkB;QAChB,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjD;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;SACpB,CAAC;QAEF,QACE,EAAC,IAAI,gFACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,4DAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,IACpE,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n @include host;\n color: inherit;\n font-weight: inherit;\n font-family: inherit;\n letter-spacing: inherit;\n\n // Remove edge margin\n\n &[has-hidden-first-margin] > .stzh-cspace {\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > .section:first-child > :first-child {\n margin-top: 0 !important;\n }\n }\n\n &[has-hidden-last-margin] > .stzh-cspace {\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n & > .section:last-child > :last-child {\n margin-bottom: 0 !important;\n }\n }\n}\n\nstzh-cspace > .stzh-cspace {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n // display: flex;\n // flex-direction: column;\n // align-items: flex-start;\n\n & > .section > h1,\n & > h1,\n & > .section > :where(stzh-heading[level=\"1\"]),\n & > :where(stzh-heading[level=\"1\"]) {\n @include spaceCurve(\"margin-top\", \"large\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > h2,\n & > h2,\n & > .section > :where(stzh-heading[level=\"2\"]),\n & > :where(stzh-heading[level=\"2\"]) {\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > h3,\n & > h3,\n & > .section > :where(stzh-heading[level=\"3\"]),\n & > :where(stzh-heading[level=\"3\"]) {\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > h4,\n & > h4,\n & > .section > :where(stzh-heading[level=\"4\"]),\n & > :where(stzh-heading[level=\"4\"]) {\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > p,\n & > p,\n & > .section > stzh-text,\n & > stzh-text,\n & > .section > ul,\n & > ul,\n & > .section > ol,\n & > ol,\n & > .section > dl,\n & > dl,\n & > .section > stzh-list,\n & > stzh-list {\n @include spaceCurve(\"margin-bottom\", \"small\");\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"hero\"]),\n & > :where(stzh-text[curve=\"hero\"]),\n & > .section > :where(stzh-heading[curve=\"hero\"]),\n & > :where(stzh-heading[curve=\"hero\"]) {\n @include spaceCurve(\"margin-bottom\", \"medium\");\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"h1\"]),\n & > :where(stzh-text[curve=\"h1\"]),\n & > .section > :where(stzh-heading[curve=\"h1\"]),\n & > :where(stzh-heading[curve=\"h1\"]) {\n @include spaceCurve(\"margin-top\", \"large\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > :where(stzh-text[curve=\"h2\"]),\n & > :where(stzh-text[curve=\"h2\"]),\n & > .section > :where(stzh-heading[curve=\"h2\"]),\n & > :where(stzh-heading[curve=\"h2\"]) {\n @include spaceCurve(\"margin-top\", \"large\");\n @include spaceCurve(\"margin-bottom\", \"small\");\n }\n\n & > .section > :where(stzh-text[curve=\"h3\"]),\n & > :where(stzh-text[curve=\"h3\"]),\n & > .section > :where(stzh-heading[curve=\"h3\"]),\n & > :where(stzh-heading[curve=\"h3\"]) {\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > :where(stzh-text[curve=\"h4\"]),\n & > :where(stzh-text[curve=\"h4\"]),\n & > .section > :where(stzh-heading[curve=\"h4\"]),\n & > :where(stzh-heading[curve=\"h4\"]) {\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > :where(stzh-text[curve=\"p1\"]),\n & > :where(stzh-text[curve=\"p1\"]),\n & > .section > :where(stzh-heading[curve=\"p1\"]),\n & > :where(stzh-heading[curve=\"p1\"]) {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"p2\"]),\n & > :where(stzh-text[curve=\"p2\"]),\n & > .section > :where(stzh-heading[curve=\"p2\"]),\n & > :where(stzh-heading[curve=\"p2\"]) {\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"small\");\n }\n\n & > .section > stzh-input, // DONE\n & > stzh-input, // DONE\n & > .section > stzh-datepicker, // DONE\n & > stzh-datepicker, // DONE\n & > .section > stzh-daterange, // DONE\n & > stzh-daterange, // DONE\n & > .section > stzh-dropdown, // DONE\n & > stzh-dropdown, // DONE\n & > .section > stzh-upload, // DONE\n & > stzh-upload, // DONE\n & > .section > stzh-checkbox, // DONE\n & > stzh-checkbox, // DONE\n & > .section > stzh-checkboxgroup, // DONE\n & > stzh-checkboxgroup, // DONE\n & > .section > stzh-radio, // DONE\n & > stzh-radio, // DONE\n & > .section > stzh-radiogroup, // DONE\n & > stzh-radiogroup {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > stzh-chipgroup, // DONE\n & > stzh-chipgroup, // DONE\n & > .section > stzh-chipselect, // DONE\n & > stzh-chipselect {\n // DONE\n margin-bottom: space(\"xlarge\");\n }\n\n & > .section > stzh-http-error, // DONE\n & > stzh-http-error {\n // DONE\n @include spaceCurve(\"margin-top\", \"big\");\n }\n\n & > .section > stzh-message, // DONE\n & > stzh-message {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-cardlist, // DONE\n & > stzh-cardlist, // DONE\n & > .section > stzh-contact, // DONE\n & > stzh-contact, // DONE\n & > .section > stzh-accordion, // DONE\n & > stzh-accordion, // DONE\n & > .section > stzh-anchornav, // DONE\n & > stzh-anchornav, // DONE\n & > .section > stzh-audio, // DONE\n & > stzh-audio, // DONE\n & > .section > stzh-microsite-teaserlist,\n & > stzh-microsite-teaserlist,\n & > .section > stzh-gallery, // DONE\n & > stzh-gallery, // DONE\n & > .section > stzh-panorama,\n & > stzh-panorama,\n & > .section > stzh-chart,\n & > stzh-chart,\n & > .section > stzh-sitemap,\n & > stzh-sitemap,\n & > .section > stzh-hr,\n & > stzh-hr,\n & > .section > stzh-archivelist,\n & > stzh-archivelist,\n & > .section > stzh-figure, // DONE\n & > stzh-figure, // DONE\n & > stzh-iframe, // DONE\n & > .section > stzh-youtube, // DONE\n & > stzh-youtube, // DONE\n & > .section > stzh-vbz-ticker,\n & > stzh-vbz-ticker {\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-ratio, // DONE\n & > stzh-ratio, // DONE\n & > .section > stzh-button, // DONE\n & > stzh-button, // DONE\n & > .section > stzh-space, // DONE\n & > stzh-space, // DONE\n & > .section > stzh-row, // DONE\n & > stzh-row, // DONE\n & > .section > stzh-eventinfo, // DONE\n & > stzh-eventinfo, // DONE\n & > .section > stzh-eventdata, // DONE\n & > stzh-eventdata, // DONE\n & > .section > stzh-datalist, // DONE\n & > stzh-datalist, // DONE\n & > .section > stzh-textandimage, // DONE\n & > stzh-textandimage {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-section[variant=\"highlight\"], // DONE\n & > stzh-section[variant=\"highlight\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"contextbox\"], // DONE\n & > stzh-section[variant=\"contextbox\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"default\"], // DONE\n & > stzh-section[variant=\"default\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"greybox\"], // DONE\n & > stzh-section[variant=\"default\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"poimax\"], // DONE\n & > stzh-section[variant=\"poimax\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n margin-bottom: space(\"xsmall\");\n }\n\n & > .section > stzh-pagetitle[background=\"default\"], // DONE\n & > stzh-pagetitle[background=\"default\"] {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"section-inner\");\n }\n\n & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n & > stzh-richtext[has-hidden-last-margin] {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-cta, // DONE\n & > stzh-cta {\n // DONE\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-olmap,\n & > stzh-olmap {\n @include spaceCurve(\"margin-top\", \"medium\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-breadcrumb, // DONE\n & > stzh-breadcrumb {\n // DONE\n @include spaceCurve(\"margin-top\", \"medium\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-card,\n & > stzh-card {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-appointments,\n & > stzh-appointments {\n @include spaceCurve(\"margin-bottom\", \"big\");\n\n &[has-heading] {\n @include spaceCurve(\"margin-top\", \"regular\");\n }\n }\n\n & > .section > stzh-table, // DONE\n & > stzh-table, // DONE\n & > .section > stzh-datatable, // DONE\n & > stzh-datatable {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-pagebottom,\n & > stzh-pagebottom {\n @include spaceCurve(\"margin-top\", \"medium\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-stepper,\n & > stzh-stepper {\n @include spaceCurve(\"margin-top\", \"big\");\n }\n\n & > .section > stzh-pagination, // DONE\n & > stzh-pagination {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-actions, // DONE\n & > stzh-actions {\n // DONE\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"big\");\n }\n\n & > .section > stzh-saptcha, // DONE\n & > stzh-saptcha {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-fieldset, // DONE\n & > stzh-fieldset {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n\n &[legend] {\n @include spaceCurve(\"margin-top\", \"regular\");\n }\n }\n\n // & > stzh-heading[level=\"4\"] + stzh-datalist,\n // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n // margin-top: 0;\n // }\n\n /* Utility classes for applying spacing curves /\n\n @each $spaceCurve, $value in $spaceCurves {\n $defaultSize: map-get($value, \"size\");\n $breakpointSizes: map-get($value, \"sizes\");\n\n & > .section > .cspace-y-curve-#{$spaceCurve},\n & > .cspace-y-curve-#{$spaceCurve} {\n @include spaceCurve(\"margin-top\", $spaceCurve);\n @include spaceCurve(\"margin-bottom\", $spaceCurve);\n }\n\n & > .section > .cspace-t-curve-#{$spaceCurve},\n & > .cspace-t-curve-#{$spaceCurve} {\n @include spaceCurve(\"margin-top\", $spaceCurve);\n }\n\n & > .section > .cspace-b-curve-#{$spaceCurve},\n & > .cspace-b-curve-#{$spaceCurve} {\n @include spaceCurve(\"margin-bottom\", $spaceCurve);\n }\n }\n\n / Utility classes for applying spacing values /\n\n @each $breakpoint, $size in $breakpoints {\n @each $space, $value in $spaceSizes {\n @if $breakpoint {\n & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n & > .#{$breakpoint}\\:cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n & > .#{$breakpoint}\\:cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n & > .#{$breakpoint}\\:cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n } @else {\n & > .section > .cspace-y-#{$space},\n & > .cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .cspace-t-#{$space},\n & > .cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .cspace-b-#{$space},\n & > .cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n }\n }\n }\n\n & > .section > .cspace-y-0,\n & > .cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .cspace-t-0,\n & > .cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .cspace-b-0,\n & > .cspace-b-0 {\n margin-bottom: 0;\n }\n\n @each $breakpoint, $size in $breakpoints {\n & > .section > .#{$breakpoint}\\:cspace-y-0,\n & > .#{$breakpoint}\\:cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-0,\n & > .#{$breakpoint}\\:cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-0,\n & > .#{$breakpoint}\\:cspace-b-0 {\n margin-bottom: 0;\n }\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot - Slot for any elements that should be vertically spaced\n /\n@Component({\n tag: \"stzh-cspace\",\n styleUrl: \"stzh-cspace.scss\",\n})\nexport class StzhCspace {\n /* Whether first top margin of first child component should be set to 0. /\n @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n /* Whether last bottom margin of last child component should be set to 0. /\n @Prop({ reflect: true }) removeLastMargin: boolean;\n\n /* Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n @Prop({ reflect: true }) preventRemoveNested: \"direct\" \| \"deep\" \| \"disabled\" = \"direct\";\n\n @Element() element: HTMLStzhCspaceElement;\n\n @Watch(\"preventRemoveNested\")\n preventRemoveNestedWatcher() {\n this.init();\n }\n\n private observer: MutationObserver;\n private rootElement: HTMLElement;\n\n private init = () => {\n if (!this.rootElement) {\n return;\n }\n\n if (this.preventRemoveNested !== \"disabled\") {\n const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n this.preventRemoveNested === \"deep\"\n ? \"stzh-cspace, stzh-richtext\"\n : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\",\n );\n\n nestedCspaceOrRichtext.forEach(cspaceOrRichtext => {\n setPropsIfNull(cspaceOrRichtext, {\n removeFirstMargin: false,\n removeLastMargin: false,\n } as HTMLStzhCspaceElement \| HTMLStzhRichtextElement);\n });\n }\n };\n\n componentDidRender() {\n this.init();\n\n this.observer.observe(this.rootElement, {\n childList: true,\n subtree: true,\n });\n }\n\n connectedCallback() {\n this.observer = new MutationObserver(this.init);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-cspace\": true,\n };\n\n return (\n <Host\n has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n >\n <div ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"p-ad34b5e0.js","mappings":";;;AAAA,MAAM,aAAa,GAAG,u0+GAAu0+G,CAAC;AAC91+G,yBAAe,aAAa;;MCUf,UAAU;;;;QAoBb,SAAI,GAAG;YACb,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;gBACrB,OAAO;aACR;YAED,IAAI,IAAI,CAAC,mBAAmB,KAAK,UAAU,EAAE;gBAC3C,MAAM,sBAAsB,GAAG,IAAI,CAAC,WAAW,CAAC,gBAAgB,CAC9D,IAAI,CAAC,mBAAmB,KAAK,MAAM;sBAC/B,4BAA4B;sBAC5B,sKAAsK,CAC3K,CAAC;gBAEF,sBAAsB,CAAC,OAAO,CAAC,gBAAgB;oBAC7C,cAAc,CAAC,gBAAgB,EAAE;wBAC/B,iBAAiB,EAAE,KAAK;wBACxB,gBAAgB,EAAE,KAAK;qBAC2B,CAAC,CAAC;iBACvD,CAAC,CAAC;aACJ;SACF,CAAC;;;mCA/B6E,QAAQ;;IAKvF,0BAA0B;QACxB,IAAI,CAAC,IAAI,EAAE,CAAC;KACb;IA0BD,kBAAkB;QAChB,IAAI,CAAC,IAAI,EAAE,CAAC;QAEZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,WAAW,EAAE;YACtC,SAAS,EAAE,IAAI;YACf,OAAO,EAAE,IAAI;SACd,CAAC,CAAC;KACJ;IAED,iBAAiB;QACf,IAAI,CAAC,QAAQ,GAAG,IAAI,gBAAgB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACjD;IAED,oBAAoB;QAClB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;SAC5B;KACF;IAED,MAAM;QACJ,MAAM,OAAO,GAAG;YACd,aAAa,EAAE,IAAI;SACpB,CAAC;QAEF,QACE,EAAC,IAAI,gFACsB,OAAO,IAAI,CAAC,iBAAiB,KAAK,SAAS,GAAG,IAAI,CAAC,iBAAiB,GAAG,IAAI,4BAC5E,OAAO,IAAI,CAAC,gBAAgB,KAAK,SAAS,GAAG,IAAI,CAAC,gBAAgB,GAAG,IAAI,IAEjG,4DAAK,GAAG,EAAE,EAAE,KAAK,IAAI,CAAC,WAAW,GAAG,EAAiB,CAAC,EAAE,KAAK,EAAE,OAAO,IACpE,8DAAa,CACT,CACD,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/stzh-cspace/stzh-cspace.scss?tag=stzh-cspace","src/components/stzh-cspace/stzh-cspace.tsx"],"sourcesContent":["stzh-cspace {\n @include host;\n color: inherit;\n font-weight: inherit;\n font-family: inherit;\n letter-spacing: inherit;\n\n // Remove edge margin\n\n &[has-hidden-first-margin] > .stzh-cspace {\n & > :first-child {\n margin-top: 0 !important;\n }\n\n & > .section:first-child > :first-child {\n margin-top: 0 !important;\n }\n }\n\n &[has-hidden-last-margin] > .stzh-cspace {\n & > :last-child {\n margin-bottom: 0 !important;\n }\n\n & > .section:last-child > :last-child {\n margin-bottom: 0 !important;\n }\n }\n}\n\nstzh-cspace > .stzh-cspace {\n display: grid;\n grid-template-columns: minmax(0, 1fr);\n // display: flex;\n // flex-direction: column;\n // align-items: flex-start;\n\n & > .section > h1,\n & > h1,\n & > .section > :where(stzh-heading[level=\"1\"]),\n & > :where(stzh-heading[level=\"1\"]) {\n @include spaceCurve(\"margin-top\", \"large\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > h2,\n & > h2,\n & > .section > :where(stzh-heading[level=\"2\"]),\n & > :where(stzh-heading[level=\"2\"]) {\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > h3,\n & > h3,\n & > .section > :where(stzh-heading[level=\"3\"]),\n & > :where(stzh-heading[level=\"3\"]) {\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > h4,\n & > h4,\n & > .section > :where(stzh-heading[level=\"4\"]),\n & > :where(stzh-heading[level=\"4\"]) {\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > p,\n & > p,\n & > .section > stzh-text,\n & > stzh-text,\n & > .section > ul,\n & > ul,\n & > .section > ol,\n & > ol,\n & > .section > dl,\n & > dl,\n & > .section > stzh-list,\n & > stzh-list {\n @include spaceCurve(\"margin-bottom\", \"small\");\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"hero\"]),\n & > :where(stzh-text[curve=\"hero\"]),\n & > .section > :where(stzh-heading[curve=\"hero\"]),\n & > :where(stzh-heading[curve=\"hero\"]) {\n @include spaceCurve(\"margin-bottom\", \"medium\");\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"h1\"]),\n & > :where(stzh-text[curve=\"h1\"]),\n & > .section > :where(stzh-heading[curve=\"h1\"]),\n & > :where(stzh-heading[curve=\"h1\"]) {\n @include spaceCurve(\"margin-top\", \"large\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > :where(stzh-text[curve=\"h2\"]),\n & > :where(stzh-text[curve=\"h2\"]),\n & > .section > :where(stzh-heading[curve=\"h2\"]),\n & > :where(stzh-heading[curve=\"h2\"]) {\n @include spaceCurve(\"margin-top\", \"large\");\n @include spaceCurve(\"margin-bottom\", \"small\");\n }\n\n & > .section > :where(stzh-text[curve=\"h3\"]),\n & > :where(stzh-text[curve=\"h3\"]),\n & > .section > :where(stzh-heading[curve=\"h3\"]),\n & > :where(stzh-heading[curve=\"h3\"]) {\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > :where(stzh-text[curve=\"h4\"]),\n & > :where(stzh-text[curve=\"h4\"]),\n & > .section > :where(stzh-heading[curve=\"h4\"]),\n & > :where(stzh-heading[curve=\"h4\"]) {\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > :where(stzh-text[curve=\"p1\"]),\n & > :where(stzh-text[curve=\"p1\"]),\n & > .section > :where(stzh-heading[curve=\"p1\"]),\n & > :where(stzh-heading[curve=\"p1\"]) {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n margin-top: 0;\n }\n\n & > .section > :where(stzh-text[curve=\"p2\"]),\n & > :where(stzh-text[curve=\"p2\"]),\n & > .section > :where(stzh-heading[curve=\"p2\"]),\n & > :where(stzh-heading[curve=\"p2\"]) {\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"small\");\n }\n\n & > .section > stzh-input, // DONE\n & > stzh-input, // DONE\n & > .section > stzh-datepicker, // DONE\n & > stzh-datepicker, // DONE\n & > .section > stzh-daterange, // DONE\n & > stzh-daterange, // DONE\n & > .section > stzh-dropdown, // DONE\n & > stzh-dropdown, // DONE\n & > .section > stzh-upload, // DONE\n & > stzh-upload, // DONE\n & > .section > stzh-checkbox, // DONE\n & > stzh-checkbox, // DONE\n & > .section > stzh-checkboxgroup, // DONE\n & > stzh-checkboxgroup, // DONE\n & > .section > stzh-radio, // DONE\n & > stzh-radio, // DONE\n & > .section > stzh-radiogroup, // DONE\n & > stzh-radiogroup {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n }\n\n & > .section > stzh-chipgroup, // DONE\n & > stzh-chipgroup, // DONE\n & > .section > stzh-chipselect, // DONE\n & > stzh-chipselect {\n // DONE\n margin-bottom: space(\"xlarge\");\n }\n\n & > .section > stzh-http-error, // DONE\n & > stzh-http-error {\n // DONE\n @include spaceCurve(\"margin-top\", \"big\");\n }\n\n & > .section > stzh-message, // DONE\n & > stzh-message {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-cardlist, // DONE\n & > stzh-cardlist, // DONE\n & > .section > stzh-contact, // DONE\n & > stzh-contact, // DONE\n & > .section > stzh-accordion, // DONE\n & > stzh-accordion, // DONE\n & > .section > stzh-anchornav, // DONE\n & > stzh-anchornav, // DONE\n & > .section > stzh-audio, // DONE\n & > stzh-audio, // DONE\n & > .section > stzh-microsite-teaserlist,\n & > stzh-microsite-teaserlist,\n & > .section > stzh-gallery, // DONE\n & > stzh-gallery, // DONE\n & > .section > stzh-panorama,\n & > stzh-panorama,\n & > .section > stzh-chart,\n & > stzh-chart,\n & > .section > stzh-sitemap,\n & > stzh-sitemap,\n & > .section > stzh-hr,\n & > stzh-hr,\n & > .section > stzh-archivelist,\n & > stzh-archivelist,\n & > .section > stzh-figure, // DONE\n & > stzh-figure, // DONE\n & > stzh-iframe, // DONE\n & > .section > stzh-youtube, // DONE\n & > stzh-youtube, // DONE\n & > .section > stzh-vbz-ticker,\n & > stzh-vbz-ticker {\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-ratio, // DONE\n & > stzh-ratio, // DONE\n & > .section > stzh-button, // DONE\n & > stzh-button, // DONE\n & > .section > stzh-space, // DONE\n & > stzh-space, // DONE\n & > .section > stzh-row, // DONE\n & > stzh-row, // DONE\n & > .section > stzh-eventinfo, // DONE\n & > stzh-eventinfo, // DONE\n & > .section > stzh-eventdata, // DONE\n & > stzh-eventdata, // DONE\n & > .section > stzh-datalist, // DONE\n & > stzh-datalist, // DONE\n & > .section > stzh-textandimage, // DONE\n & > stzh-textandimage {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-section[variant=\"highlight\"], // DONE\n & > stzh-section[variant=\"highlight\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"contextbox\"], // DONE\n & > stzh-section[variant=\"contextbox\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"default\"], // DONE\n & > stzh-section[variant=\"default\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"greybox\"], // DONE\n & > stzh-section[variant=\"default\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-section[variant=\"poimax\"], // DONE\n & > stzh-section[variant=\"poimax\"] {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n margin-bottom: space(\"xsmall\");\n }\n\n & > .section > stzh-pagetitle[background=\"default\"], // DONE\n & > stzh-pagetitle[background=\"default\"] {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"section-inner\");\n }\n\n & > .section > stzh-richtext[has-hidden-last-margin], // DONE\n & > stzh-richtext[has-hidden-last-margin] {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-cta, // DONE\n & > stzh-cta {\n // DONE\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-olmap,\n & > stzh-olmap {\n @include spaceCurve(\"margin-top\", \"medium\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-breadcrumb, // DONE\n & > stzh-breadcrumb {\n // DONE\n @include spaceCurve(\"margin-top\", \"medium\");\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-card,\n & > stzh-card {\n @include spaceCurve(\"margin-bottom\", \"regular\");\n }\n\n & > .section > stzh-appointments,\n & > stzh-appointments {\n @include spaceCurve(\"margin-bottom\", \"big\");\n\n &[has-heading] {\n @include spaceCurve(\"margin-top\", \"regular\");\n }\n }\n\n & > .section > stzh-table, // DONE\n & > stzh-table, // DONE\n & > .section > stzh-datatable, // DONE\n & > stzh-datatable {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-pagebottom,\n & > stzh-pagebottom {\n @include spaceCurve(\"margin-top\", \"medium\");\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-stepper,\n & > stzh-stepper {\n @include spaceCurve(\"margin-top\", \"big\");\n }\n\n & > .section > stzh-pagination, // DONE\n & > stzh-pagination {\n // DONE\n @include spaceCurve(\"margin-top\", \"regular\");\n @include spaceCurve(\"margin-bottom\", \"large\");\n }\n\n & > .section > stzh-actions, // DONE\n & > stzh-actions {\n // DONE\n @include spaceCurve(\"margin-top\", \"small\");\n @include spaceCurve(\"margin-bottom\", \"big\");\n }\n\n & > .section > stzh-saptcha, // DONE\n & > stzh-saptcha {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"medium\");\n }\n\n & > .section > stzh-fieldset, // DONE\n & > stzh-fieldset {\n // DONE\n @include spaceCurve(\"margin-bottom\", \"tiny\");\n\n &[legend] {\n @include spaceCurve(\"margin-top\", \"regular\");\n }\n }\n\n // & > stzh-heading[level=\"4\"] + stzh-datalist,\n // & > stzh-heading[curve=\"h4\"] + stzh-datalist {\n // margin-top: 0;\n // }\n\n /* Utility classes for applying spacing curves /\n\n @each $spaceCurve, $value in $spaceCurves {\n $defaultSize: map-get($value, \"size\");\n $breakpointSizes: map-get($value, \"sizes\");\n\n & > .section > .cspace-y-curve-#{$spaceCurve},\n & > .cspace-y-curve-#{$spaceCurve} {\n @include spaceCurve(\"margin-top\", $spaceCurve);\n @include spaceCurve(\"margin-bottom\", $spaceCurve);\n }\n\n & > .section > .cspace-t-curve-#{$spaceCurve},\n & > .cspace-t-curve-#{$spaceCurve} {\n @include spaceCurve(\"margin-top\", $spaceCurve);\n }\n\n & > .section > .cspace-b-curve-#{$spaceCurve},\n & > .cspace-b-curve-#{$spaceCurve} {\n @include spaceCurve(\"margin-bottom\", $spaceCurve);\n }\n }\n\n / Utility classes for applying spacing values /\n\n @each $breakpoint, $size in $breakpoints {\n @each $space, $value in $spaceSizes {\n @if $breakpoint {\n & > .section > .#{$breakpoint}\\:cspace-y-#{$space},\n & > .#{$breakpoint}\\:cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-#{$space},\n & > .#{$breakpoint}\\:cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-#{$space},\n & > .#{$breakpoint}\\:cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n } @else {\n & > .section > .cspace-y-#{$space},\n & > .cspace-y-#{$space} {\n margin-top: #{$value};\n margin-bottom: #{$value};\n }\n\n & > .section > .cspace-t-#{$space},\n & > .cspace-t-#{$space} {\n margin-top: #{$value};\n }\n\n & > .section > .cspace-b-#{$space},\n & > .cspace-b-#{$space} {\n margin-bottom: #{$value};\n }\n }\n }\n }\n\n & > .section > .cspace-y-0,\n & > .cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .cspace-t-0,\n & > .cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .cspace-b-0,\n & > .cspace-b-0 {\n margin-bottom: 0;\n }\n\n @each $breakpoint, $size in $breakpoints {\n & > .section > .#{$breakpoint}\\:cspace-y-0,\n & > .#{$breakpoint}\\:cspace-y-0 {\n margin-top: 0;\n margin-bottom: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-t-0,\n & > .#{$breakpoint}\\:cspace-t-0 {\n margin-top: 0;\n }\n\n & > .section > .#{$breakpoint}\\:cspace-b-0,\n & > .#{$breakpoint}\\:cspace-b-0 {\n margin-bottom: 0;\n }\n }\n}\n","import { Component, Element, h, Host, Prop, Watch } from \"@stencil/core\";\n\nimport { setPropsIfNull } from \"../../utils/utils\";\n\n/\n @slot - Slot for any elements that should be vertically spaced\n /\n@Component({\n tag: \"stzh-cspace\",\n styleUrl: \"stzh-cspace.scss\",\n})\nexport class StzhCspace {\n /* Whether first top margin of first child component should be set to 0. /\n @Prop({ reflect: true }) removeFirstMargin: boolean;\n\n /* Whether last bottom margin of last child component should be set to 0. /\n @Prop({ reflect: true }) removeLastMargin: boolean;\n\n /* Whether removing first/last margin should be automatically prevented for nested cspace/richtext */\n @Prop({ reflect: true }) preventRemoveNested: \"direct\" \| \"deep\" \| \"disabled\" = \"direct\";\n\n @Element() element: HTMLStzhCspaceElement;\n\n @Watch(\"preventRemoveNested\")\n preventRemoveNestedWatcher() {\n this.init();\n }\n\n private observer: MutationObserver;\n private rootElement: HTMLElement;\n\n private init = () => {\n if (!this.rootElement) {\n return;\n }\n\n if (this.preventRemoveNested !== \"disabled\") {\n const nestedCspaceOrRichtext = this.rootElement.querySelectorAll(\n this.preventRemoveNested === \"deep\"\n ? \"stzh-cspace, stzh-richtext\"\n : \":scope > stzh-cspace, :scope > .section > stzh-cspace, stzh-show > stzh-cspace, :scope > stzh-richtext, :scope > .section > stzh-richtext, stzh-show > stzh-richtext\",\n );\n\n nestedCspaceOrRichtext.forEach(cspaceOrRichtext => {\n setPropsIfNull(cspaceOrRichtext, {\n removeFirstMargin: false,\n removeLastMargin: false,\n } as HTMLStzhCspaceElement \| HTMLStzhRichtextElement);\n });\n }\n };\n\n componentDidRender() {\n this.init();\n\n this.observer.observe(this.rootElement, {\n childList: true,\n subtree: true,\n });\n }\n\n connectedCallback() {\n this.observer = new MutationObserver(this.init);\n }\n\n disconnectedCallback() {\n if (this.observer) {\n this.observer.disconnect();\n }\n }\n\n render() {\n const classes = {\n \"stzh-cspace\": true,\n };\n\n return (\n <Host\n has-hidden-first-margin={typeof this.removeFirstMargin === \"boolean\" ? this.removeFirstMargin : true}\n has-hidden-last-margin={typeof this.removeLastMargin === \"boolean\" ? this.removeLastMargin : true}\n >\n <div ref={el => (this.rootElement = el as HTMLElement)} class={classes}>\n <slot></slot>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}