npm - @dso-toolkit/core - Versions diffs - 82.0.0 → 83.0.0 - Mend

@dso-toolkit/core 82.0.0 → 83.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (963) hide show

package/dist/components/dso-header.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-header.js","mappings":";;;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,QAAQ;AACf,YAAA,MAAM,EAAE,SAAS;AACjB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,YAAY,EAAE,MAAM;AACrB,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,YAAY,EAAE;AACZ,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,KAAK,EAAE,UAAU;AACjB,YAAA,MAAM,EAAE,WAAW;AACnB,YAAA,IAAI,EAAE,MAAM;AACZ,YAAA,YAAY,EAAE,MAAM;AACpB,YAAA,QAAQ,EAAE,qBAAqB;AAChC,SAAA;AACF,KAAA;CACF;;ACVM,MAAM,QAAQ,GAAuC,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,EAAE,GAAG,EAAE,KAAI;IAC1F,QACE,UAAI,KAAK,EAAE,IAAI,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAA;AAChE,QAAA,CAAA,CAAA,GAAA,EAAA,EAAG,IAAI,EAAE,IAAI,CAAC,GAAG,EAAA,cAAA,EAAgB,IAAI,CAAC,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,OAAO,EAAE,OAAO,EAAA,EAChF,IAAI,CAAC,KAAK,CACT,CACD;AAET,CAAC;;ACpBD,MAAM,SAAS,GAAG,stPAAstP;;AC6BxuP,MAAM,uBAAuB,GAAG,GAAG;MAYtB,MAAM,iBAAAA,kBAAA,CAAA,MAAA,MAAA,SAAA,WAAA,CAAA;AALnB,IAAA,WAAA,GAAA;;;;;AASE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAqB,EAAE;AAE/B;;;AAGG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAsB,MAAM;AAEnC;;AAEG;AAEH,QAAA,IAAU,CAAA,UAAA,GAAqB,MAAM;AAgBrC;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AA2BhB;;AAEG;AAEH,QAAA,IAAc,CAAA,cAAA,GAAG,KAAK;AAWtB,QAAA,IAAqB,CAAA,qBAAA,GAAuB,SAAS;AAGrD,QAAA,IAAqB,CAAA,qBAAA,GAAG,CAAC;AAOjB,QAAA,IAAqB,CAAA,qBAAA,GAAG,MAAK;AACnC,YAAA,IAAI,CAAC,qBAAqB,GAAG,SAAS;AACxC,SAAC;QAMO,IAAY,CAAA,YAAA,GAAG,CAAC,CAAa,EAAE,IAA0B,EAAE,OAA6B,KAAI;;AAClG,YAAA,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC;AACvB,gBAAA,aAAa,EAAE,CAAC;AAChB,gBAAA,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC;gBACnC,IAAI;AACJ,gBAAA,QAAQ,EAAE,OAAO,KAAA,IAAA,IAAP,OAAO,KAAP,MAAA,GAAA,MAAA,GAAA,OAAO,CAAE,QAAQ;AAC3B,gBAAA,GAAG,EAAE,CAAA,EAAA,GAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,GAAG,mCAAI,CAAA,EAAA,GAAA,OAAO,aAAP,OAAO,KAAA,MAAA,GAAA,MAAA,GAAP,OAAO,CAAE,QAAQ,0CAAE,GAAG;AAC5C,aAAA,CAAC;AACJ,SAAC;AAIO,QAAA,IAAmB,CAAA,mBAAA,GAAkC,EAAE;AAIvD,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAuE1C,QAAA,IAAA,CAAA,cAAc,GAAG,IAAI,cAAc,CAAC,MAAK;YAC/C,IAAI,CAAC,qBAAqB,EAAE;AAE5B,YAAA,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC;AACxB,SAAC,CAAC;AAwQH;IA/WC,eAAe,GAAA;QACb,IAAI,CAAC,qBAAqB,EAAE;;AAO9B,IAAA,IAAY,SAAS,GAAA;QACnB,OAAO,IAAI,CAAC,OAAO,KAAK,QAAQ,IAAI,MAAM,CAAC,UAAU,GAAG,uBAAuB;;AAqBjF;;;;;;;;AAQG;AACK,IAAA,8BAA8B,CAAC,UAA4B,EAAA;;AACjE,QAAA,MAAM,cAAc,GAAG,UAAU,CAAC,WAAW;AAE7C,QAAA,MAAM,YAAY,GAAG,IAAI,CAAC,mBAAmB,CAAC,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,CAAC;QAClF,MAAM,iBAAiB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,0BAA0B,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,YAAY;AACzE,QAAA,MAAM,gBAAgB,GAAG,IAAI,CAAC,0BAA0B;QAExD,IAAI,CAAC,iBAAiB,IAAI,CAAC,gBAAgB,IAAI,CAAC,YAAY,EAAE;AAC5D,YAAA,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM;;AAGxC,QAAA,MAAM,8BAA8B,GAClC,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,WAAW,IAAI,YAAY,CAAC,UAAU,GAAG,YAAY,CAAC,WAAW,CAAC;QAEnH,MAAM,aAAa,GAAG,iBAAiB,CAAC,UAAU,GAAG,iBAAiB,CAAC,WAAW,GAAG,8BAA8B;AAEnH,QAAA,IAAI,aAAa,IAAI,cAAc,EAAE;AACnC,YAAA,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM;;AAGxC,QAAA,MAAM,8BAA8B,GAAG,IAAI,CAAC;AAC1C,cAAE,IAAI,CAAC,0BAA0B,CAAC,UAAU;gBAC1C,IAAI,CAAC,0BAA0B,CAAC,WAAW;AAC3C,iBAAC,gBAAgB,CAAC,UAAU,GAAG,gBAAgB,CAAC,WAAW;cAC3D,CAAC;AAEL,QAAA,MAAM,cAAc,GAAG,cAAc,GAAG,8BAA8B,GAAG,8BAA8B;QAEvG,MAAM,gBAAgB,GAAG,IAAI,CAAC,mBAAmB,CAAC,SAAS,CACzD,CAAC,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,UAAU,GAAG,QAAQ,CAAC,WAAW,GAAG,cAAc,CACtF;AAED,QAAA,IAAI,gBAAgB,GAAG,CAAC,EAAE;AACxB,YAAA,OAAO,IAAI,CAAC,mBAAmB,CAAC,MAAM;;AAGxC,QAAA,OAAO,gBAAgB;;IAGjB,8BAA8B,GAAA;;AACpC,QAAA,IAAI,CAAC,IAAI,CAAC,eAAe,EAAE;AACzB,YAAA,OAAO,CAAC;;AAGV,QAAA,QACE,IAAI,CAAC,IAAI,CAAC,YAAY;AACtB,aAAC,CAAA,MAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,qBAAqB,GAAG,MAAM,IAAG,IAAI,CAAC,IAAI,CAAC,qBAAqB,EAAE,CAAC,GAAG,CAAC;;AAIlG,IAAA,IAAY,oBAAoB,GAAA;AAC9B,QAAA,OAAO,OAAO,IAAI,CAAC,qBAAqB,KAAK;AAC3C,cAAE,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,EAAE,IAAI,CAAC,qBAAqB;AACnD,cAAE,IAAI,CAAC,QAAQ;;AAGnB,IAAA,IAAY,mBAAmB,GAAA;QAC7B,OAAO,OAAO,IAAI,CAAC,qBAAqB,KAAK,QAAQ,GAAG,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,IAAI,CAAC,qBAAqB,CAAC,GAAG,EAAE;;IAS9G,iBAAiB,GAAA;QACf,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGxC,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE;;IAGlC,kBAAkB,GAAA;AAChB,QAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE;YAC1B;;QAGF,IAAI,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,eAAe,EAAE;YAC1C,IAAI,CAAC,eAAe,CAAC,qBAAqB,GAAG,IAAI,CAAC,8BAA8B,EAAE;;QAGpF,IAAI,OAAO,IAAI,CAAC,qBAAqB,KAAK,WAAW,IAAI,IAAI,CAAC,UAAU,EAAE;YACxE,IAAI,CAAC,qBAAqB,GAAG,IAAI,CAAC,8BAA8B,CAAC,IAAI,CAAC,UAAU,CAAC;;;IAIrF,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAa,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAA,EAAA,IAAI,CAAC,SAAS,EAAA,EAC9B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,CAAG,CAChB,EACL,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,EAAE,GAAG,IAAI,CAAC,YAAY,EAAE,CACxD,CACD;;IAIH,aAAa,GAAA;AACnB,QAAA,QACE,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,IAAI,IAAI,CAAC,UAAU,KAAK,MAAM,MACzE,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,UAAU,EAAA,EACnB,CACiB,CAAA,mBAAA,EAAA,EAAA,gBAAA,EAAA,OAAO,EACtB,qBAAqB,EAAE,IAAI,CAAC,qBAAqB,EACjD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,EAAA,EAElD,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,cAAc,EAAA,CAAY,CAClC,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CAAA,CAAA,IAAA,EAAA,IAAA,EACG,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,QAAQ,MAC1B,CAAC,CAAA,QAAQ,IACP,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC9D,GAAG,EAAE,QAAQ,CAAC,KAAK,EACnB,CAAA,CACH,CAAC,EACD,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,WAAW,EACtB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAE1E,EAAA,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CACpB,CACD,CACN,EACA,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,KAC5E,CAAA,CAAA,IAAA,EAAA,IAAA,EACE,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EAAA,EAE5E,IAAI,CAAC,eAAe,EACrB,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,eAAe,EAAuB,EAAA,iBAAA,CAAA,CAChD,CACD,CACN,EACA,IAAI,CAAC,UAAU,KAAK,WAAW,KAC9B,cACG,IAAI,CAAC,QAAQ,IACZ,SAAG,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,EAAA,EAC1F,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACjB,KAEJ,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,IAChE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACZ,CACV,CACE,CACN,EACA,IAAI,CAAC,UAAU,KAAK,UAAU,KAC7B,cACG,IAAI,CAAC,SAAS,IACb,SAAG,IAAI,EAAE,IAAI,CAAC,SAAS,EAAE,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,EAAA,EAC7F,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClB,KAEJ,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,IACjE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb,CACV,CACE,CACN,EACA,IAAI,CAAC,QAAQ,KACZ,cACG,IAAI,CAAC,OAAO,IACX,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAAA,EAEnE,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,MAAM,EAAA,CAAY,CAC/B,KAEJ,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,cAAc,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAA,EACrF,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,MAAM,EAAA,CAAY,CAC1B,CACV,CACE,CACN,CACE,CACD,CACY,CAChB,CACP;;IAIG,YAAY,GAAA;AAClB,QAAA,IAAI,CAAC,mBAAmB,GAAG,EAAE;QAE7B,QACE,EAAC,QAAQ,EAAA,IAAA,EACP,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC5B,IAAI,CAAC,cAAc,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,UAAU,KAAK,UAAU,KAC5E,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAClB,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,cAAc,EACzB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,SAAS,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EAE5E,EAAA,IAAI,CAAC,eAAe,CACnB,CACA,CACP,EACA,IAAI,CAAC,UAAU,KAAK,WAAW,KAC9B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,OAAO,IACf,IAAI,CAAC,QAAQ,IACZ,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,QAAQ,EACnB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,IAEpE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACjB,KAEJ,cAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,OAAO,CAAC,EACrF,EAAA,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CACZ,CACV,CACG,CACP,EACA,IAAI,CAAC,UAAU,KAAK,UAAU,KAC7B,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,QAAQ,IAChB,IAAI,CAAC,SAAS,IACb,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,SAAS,EACpB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,SAAS,EAAE,CAAC,IAEtE,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAClB,KAEJ,cAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,QAAQ,CAAC,EACtF,EAAA,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CACb,CACV,CACG,CACP,EACA,IAAI,CAAC,QAAQ,KACZ,WAAK,KAAK,EAAC,MAAM,EAAA,EACd,IAAI,CAAC,OAAO,IACX,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,OAAO,EAClB,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAAA,EAEnE,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,MAAM,EAAA,CAAY,CAC/B,KAEJ,CAAA,CAAA,QAAA,EAAA,EAAQ,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,MAAM,CAAC,EAAA,EACrF,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAQ,EAChC,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,MAAM,EAAA,CAAY,CAC1B,CACV,CACG,CACP,CACG,EACL,CAAC,IAAI,CAAC,QAAQ,CAAC,MAAM,GAAG,CAAC,IAAI,IAAI,CAAC,WAAW,MAC5C,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAA,CAAA,IAAA,EAAA,EACE,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,cAAc,EAAE,EAAE,KAAK,EAAE,IAAI,CAAC,qBAAqB,KAAK,SAAS,EAAE,CAAC,EAC3F,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAAA,EAE5C,IAAI,CAAC,oBAAoB,CAAC,GAAG,CAAC,CAAC,QAAQ,EAAE,CAAC,MACzC,CAAC,CAAA,QAAQ,EACP,EAAA,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC9D,GAAG,EAAE,QAAQ,CAAC,KAAK,EACnB,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,mBAAmB,CAAC,CAAC,CAAC,GAAG,EAAE,CAAC,EAAA,CAC/C,CACH,CAAC,EACD,CAAC,IAAI,CAAC,qBAAqB,KAAK,SAAS,IAAI,IAAI,CAAC,mBAAmB,CAAC,MAAM,GAAG,CAAC,MAC/E,CAAA,CAAA,IAAA,EAAA,EAAA,aAAA,EACe,IAAI,CAAC,qBAAqB,KAAK,SAAS,EACrD,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC,EACnD,KAAK,EAAC,oBAAoB,EAAA,EAE1B,CAAA,CAAA,mBAAA,EAAA,IAAA,EACE,CAAA,CAAA,QAAA,EAAA,EAAQ,IAAI,EAAC,QAAQ,EAAC,IAAI,EAAC,QAAQ,EAAA,EACjC,CAAA,CAAA,MAAA,EAAA,IAAA,EAAO,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAQ,EACxC,CAAU,CAAA,UAAA,EAAA,EAAA,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,qBAAqB,GAAY,CAC9D,EACT,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,sBAAsB,EAAA,EAC/B,CACG,CAAA,IAAA,EAAA,IAAA,EAAA,IAAI,CAAC,mBAAmB,CAAC,GAAG,CAAC,CAAC,QAAQ,MACrC,CAAC,CAAA,QAAQ,EACP,EAAA,IAAI,EAAE,QAAQ,EACd,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,QAAQ,EAAE,CAAC,EAC9D,GAAG,EAAE,QAAQ,CAAC,KAAK,EACnB,CAAA,CACH,CAAC,CACC,CACD,CACY,CACjB,CACN,EACA,IAAI,CAAC,WAAW,KACf,UACE,KAAK,EAAE,IAAI,CAAC,gBAAgB,EAAE,EAAE,YAAY,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,EACpE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,0BAA0B,GAAG,EAAE,CAAC,EAAA,EAEnD,CAAA,CAAA,GAAA,EAAA,EACE,IAAI,EAAE,IAAI,CAAC,WAAW,EAAA,cAAA,EACR,IAAI,CAAC,cAAc,GAAG,MAAM,GAAG,SAAS,EACtD,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,EAAE,UAAU,EAAE,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,EAAE,CAAC,EAAA,EAE3E,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAC,WAAW,EAAC,KAAK,EAAC,qBAAqB,EAAY,CAAA,EACjE,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,CACpB,CACD,CACN,CACE,CACD,CACP,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n item: HeaderMenuItem;\r\n onClick: (event: MouseEvent) => void;\r\n key: string;\r\n ref?: (el: HTMLLIElement \| undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n return (\r\n <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host([is-compact]) {\r\n ::slotted([slot=\"logo\"]) {\r\n --_dso-logo-block-size: #{units.$ru5} !important;\r\n }\r\n\r\n .dso-header {\r\n flex-wrap: nowrap;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n .dso-header {\r\n align-items: center;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 375px;\r\n }\r\n }\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile + .logout,\r\n .logout + .help,\r\n .login + .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n max-inline-size: 100%;\r\n position: relative; // Needed for menu item calculations\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited:not(:hover):not(:focus-visible) {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n &.ready {\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include link.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inset-inline-start: units.$ru2 * -1 !important;\r\n inset-block-start: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: flex-end;\r\n color: colors.$bosgroen;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .main-menu-item-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n\r\n .dropdown-menu-item .main-menu-item-icon {\r\n margin-inline-end: 0;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n HeaderAuthStatus,\r\n HeaderCompactMode,\r\n HeaderEvent,\r\n HeaderMenuItem,\r\n HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n menuItem?: HeaderMenuItem;\r\n url?: string;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu: HeaderMenuItem[] = [];\r\n\r\n /\r\n Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n * the viewport is smaller than 992px.\r\n /\r\n @Prop()\r\n compact: HeaderCompactMode = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: HeaderAuthStatus = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive = false;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n /\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @State()\r\n visibleMenuItemsCount: number \| undefined = undefined;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n @Watch(\"mainMenu\")\r\n mainMenuChanged() {\r\n this.resetVisibleMenuItems();\r\n }\r\n\r\n private resetVisibleMenuItems = () => {\r\n this.visibleMenuItemsCount = undefined;\r\n };\r\n\r\n private get isCompact() {\r\n return this.compact === \"always\" \|\| window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n };\r\n\r\n private dropdownElement: HTMLDsoDropdownMenuElement \| undefined;\r\n private navElement: HTMLUListElement \| undefined;\r\n private menuItemElementRefs: (HTMLLIElement \| undefined)[] = [];\r\n private dropdownMenuItemElementRef: HTMLLIElement \| undefined;\r\n private userHomeMenuItemElementRef: HTMLLIElement \| undefined;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n /\r\n Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n \r\n When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n \r\n @param navElement The navigation element to calculate the overflow menu item count for.\r\n * @returns The number of menu items that can fit in the available space.\r\n */\r\n private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n const availableWidth = navElement.offsetWidth;\r\n\r\n const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n if (!mostRightMenuItem \|\| !dropdownMenuItem \|\| !lastMenuItem) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const dropdownMenuItemEffectiveWidth =\r\n dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n if (requiredWidth <= availableWidth) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n ? this.userHomeMenuItemElementRef.offsetLeft +\r\n this.userHomeMenuItemElementRef.offsetWidth -\r\n (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n : 0;\r\n\r\n const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n );\r\n\r\n if (visibleMenuItems < 0) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n return visibleMenuItems;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private get visibleMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\"\r\n ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n : this.mainMenu;\r\n }\r\n\r\n private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n }\r\n\r\n private resizeObserver = new ResizeObserver(() => {\r\n this.resetVisibleMenuItems();\r\n\r\n forceUpdate(this.host);\r\n });\r\n\r\n connectedCallback(): void {\r\n this.resizeObserver.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.isCompact && this.dropdownElement) {\r\n this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n\r\n if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host is-compact={this.isCompact}>\r\n <div class=\"dso-header\">\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderCompact() {\r\n return (\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )\r\n );\r\n }\r\n\r\n private renderNormal() {\r\n this.menuItemElementRefs = [];\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {(this.mainMenu.length > 0 \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul\r\n class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n ref={(element) => (this.navElement = element)}\r\n >\r\n {this.visibleMainMenuItems.map((menuItem, i) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n />\r\n ))}\r\n {(this.visibleMenuItemsCount === undefined \|\| this.hiddenMainMenuItems.length > 0) && (\r\n <li\r\n aria-hidden={this.visibleMenuItemsCount === undefined}\r\n ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n class=\"dropdown-menu-item\"\r\n >\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.hiddenMainMenuItems.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li\r\n class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n >\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\" class=\"main-menu-item-icon\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-header.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/header/header.i18n.ts","src/components/header/menu-item.functional-component.tsx","src/components/header/header.scss?tag=dso-header&encapsulation=shadow","src/components/header/header.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Log in\",\r\n logout: \"Log out\",\r\n help: \"Help\",\r\n overflowMenu: \"More\",\r\n },\r\n },\r\n nl: {\r\n \"dso-header\": {\r\n menu: \"Menu\",\r\n login: \"Inloggen\",\r\n logout: \"Uitloggen\",\r\n help: \"Help\",\r\n overflowMenu: \"Meer\",\r\n userHome: \"Mijn Omgevingsloket\",\r\n },\r\n },\r\n};\r\n","import { FunctionalComponent, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { HeaderMenuItem } from \"./header.interfaces\";\r\n\r\nexport interface MenuItemProps {\r\n item: HeaderMenuItem;\r\n onClick: (event: MouseEvent) => void;\r\n key: string;\r\n ref?: (el: HTMLLIElement \| undefined) => void;\r\n}\r\n\r\nexport const MenuItem: FunctionalComponent<MenuItemProps> = ({ item, onClick, key, ref }) => {\r\n return (\r\n <li class={clsx({ \"dso-active\": item.active })} key={key} ref={ref}>\r\n <a href={item.url} aria-current={item.active ? \"page\" : undefined} onClick={onClick}>\r\n {item.label}\r\n </a>\r\n </li>\r\n );\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n@use \"~dso-toolkit/src/components/link\";\r\n@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n@use \"header.variables\" as core-header-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin nav-item-border($color) {\r\n border-block-end: 4px solid $color;\r\n}\r\n\r\n@mixin nav-item-main {\r\n font-size: 1.25em;\r\n line-height: 1;\r\n padding-block: units.$u2;\r\n padding-inline: 0;\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n:host([is-compact]) {\r\n ::slotted([slot=\"logo\"]) {\r\n --_dso-logo-block-size: #{units.$ru5} !important;\r\n }\r\n\r\n .dso-header {\r\n flex-wrap: nowrap;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 100%;\r\n }\r\n }\r\n}\r\n\r\n:host(:not([is-compact])) {\r\n .dso-header {\r\n align-items: center;\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inline-size: 375px;\r\n }\r\n }\r\n}\r\n\r\n.dso-header {\r\n border-block-end: 1px solid colors.$grijs-20;\r\n display: flex;\r\n flex-wrap: wrap;\r\n position: relative;\r\n\r\n .dso-nav {\r\n border: 0;\r\n }\r\n}\r\n\r\n.logo-container {\r\n flex: 1 1 12.5rem;\r\n margin-inline-end: units.$u3;\r\n padding-block-end: units.$u2;\r\n padding-block-start: units.$u2;\r\n}\r\n\r\n.dso-header-session {\r\n display: flex;\r\n align-items: center;\r\n margin-inline-start: auto;\r\n\r\n .profile,\r\n .login,\r\n .logout,\r\n .help {\r\n .dso-tertiary {\r\n display: flex;\r\n gap: 0.5rem;\r\n\r\n cursor: pointer;\r\n\r\n border: 0;\r\n\r\n background-color: transparent;\r\n\r\n padding-inline: 0;\r\n\r\n outline-offset: 2px;\r\n\r\n font-family: typography.$font-family-base;\r\n color: colors.$grasgroen;\r\n font-size: 1rem;\r\n font-weight: 600;\r\n line-height: 1.5;\r\n text-decoration: none;\r\n\r\n &:hover {\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n\r\n .profile + .logout,\r\n .logout + .help,\r\n .login + .help {\r\n border-inline-start: 3px solid colors.$grijs-20;\r\n margin-inline-start: units.$u1;\r\n padding-inline-start: units.$u1;\r\n }\r\n\r\n .help {\r\n a,\r\n button {\r\n display: flex;\r\n }\r\n }\r\n}\r\n\r\n.dso-navbar {\r\n flex-basis: 100%;\r\n max-inline-size: 100%;\r\n position: relative; // Needed for menu item calculations\r\n}\r\n\r\ndso-dropdown-menu {\r\n @include dropdown-menu.children();\r\n\r\n button {\r\n background-color: transparent;\r\n border: 0;\r\n display: flex;\r\n font-family: typography.$font-family-base;\r\n align-items: center;\r\n position: relative;\r\n\r\n dso-icon {\r\n inline-size: units.$u3;\r\n block-size: units.$u3;\r\n margin-inline-start: units.$u1;\r\n padding-block-start: units.$u1 * 0.25;\r\n }\r\n\r\n &[aria-expanded=\"true\"] {\r\n dso-icon {\r\n transform: rotate(180deg);\r\n }\r\n }\r\n }\r\n\r\n .dso-dropdown-options {\r\n border: 0;\r\n border-radius: 0;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n\r\n ul {\r\n margin: 0;\r\n padding: 0;\r\n list-style: none;\r\n\r\n li {\r\n a,\r\n button {\r\n display: block;\r\n padding: units.$u2;\r\n color: colors.$bosgroen;\r\n font-size: 1.25rem;\r\n white-space: pre-wrap;\r\n text-decoration: none;\r\n\r\n &:focus-visible {\r\n background-color: colors.$grasgroen;\r\n color: colors.$wit;\r\n }\r\n\r\n &:hover {\r\n background-color: colors.$wit;\r\n color: colors.$bosgroen;\r\n text-decoration: underline;\r\n }\r\n\r\n &:visited:not(:hover):not(:focus-visible) {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n button {\r\n inline-size: 100%;\r\n text-align: start;\r\n\r\n dso-icon {\r\n margin-inline-start: units.$u1;\r\n }\r\n }\r\n\r\n &.dso-active {\r\n a {\r\n font-weight: 600;\r\n }\r\n }\r\n\r\n + li {\r\n border-block-start: 1px solid colors.$grijs-20;\r\n }\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dropdown {\r\n margin-inline-start: auto;\r\n display: flex;\r\n align-items: center;\r\n\r\n dso-dropdown-menu {\r\n position: static;\r\n\r\n .dso-dropdown-options {\r\n inset-inline-end: 0;\r\n inset-block-start: 100%;\r\n box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.4);\r\n }\r\n\r\n > button {\r\n color: colors.$grasgroen;\r\n font-size: typography.$font-size-base;\r\n font-weight: 600;\r\n line-height: normal;\r\n position: relative;\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: 50%;\r\n transform: translateY(-50%);\r\n }\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n }\r\n }\r\n}\r\n\r\n.dso-nav {\r\n &.ready {\r\n .menu-user-home {\r\n margin-inline-start: auto;\r\n }\r\n }\r\n\r\n align-items: end;\r\n column-gap: units.$u4;\r\n display: flex;\r\n list-style: none;\r\n margin-block-end: 0;\r\n margin-block-start: 0;\r\n padding-inline-start: 0;\r\n\r\n > li {\r\n margin-block-end: 4px;\r\n\r\n > a {\r\n display: block;\r\n\r\n &,\r\n &:hover,\r\n &:focus,\r\n &:visited {\r\n color: colors.$bosgroen;\r\n }\r\n }\r\n\r\n &.dso-active,\r\n &.is-active {\r\n margin-block-end: 0;\r\n\r\n > a {\r\n @include nav-item-border(core-header-variables.$navigation-selected-color);\r\n\r\n font-weight: bold;\r\n }\r\n }\r\n }\r\n\r\n &.dso-nav-main {\r\n display: flex !important;\r\n\r\n > li {\r\n > a {\r\n @include link.reverse();\r\n @include nav-item-main();\r\n\r\n // stylelint-disable-next-line declaration-property-value-disallowed-list -- no wrapping wanted because of icon\r\n white-space: nowrap;\r\n }\r\n }\r\n\r\n dso-dropdown-menu {\r\n .dso-dropdown-options {\r\n inset-inline-start: units.$ru2 * -1 !important;\r\n inset-block-start: 3px !important;\r\n }\r\n\r\n button {\r\n @include nav-item-main();\r\n\r\n align-items: flex-end;\r\n color: colors.$bosgroen;\r\n\r\n &:hover,\r\n &:active {\r\n cursor: pointer;\r\n text-decoration: underline;\r\n }\r\n\r\n &::after {\r\n margin-inline-start: units.$u1;\r\n position: absolute;\r\n inset-inline-end: 0px;\r\n inset-block-start: auto;\r\n transform: none;\r\n }\r\n }\r\n }\r\n }\r\n\r\n .main-menu-item-icon {\r\n block-size: 1em;\r\n margin-inline-end: units.$u1;\r\n position: relative;\r\n inset-block-start: -2px;\r\n inline-size: 1.2em;\r\n }\r\n\r\n .dropdown-menu-item .main-menu-item-icon {\r\n margin-inline-end: 0;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Host,\r\n Prop,\r\n State,\r\n Watch,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { translations } from \"./header.i18n\";\r\nimport {\r\n HeaderAuthStatus,\r\n HeaderCompactMode,\r\n HeaderEvent,\r\n HeaderMenuItem,\r\n HeaderNavigationType,\r\n} from \"./header.interfaces\";\r\nimport { MenuItem } from \"./menu-item.functional-component\";\r\n\r\nconst minDesktopViewportWidth = 992;\r\n\r\ninterface ClickHandlerOptions {\r\n menuItem?: HeaderMenuItem;\r\n url?: string;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-header\",\r\n styleUrl: \"header.scss\",\r\n shadow: true,\r\n})\r\nexport class Header implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoHeaderElement;\r\n\r\n /*\r\n The main menu items.\r\n /\r\n @Prop()\r\n mainMenu: HeaderMenuItem[] = [];\r\n\r\n /\r\n Set to \"always\" to force the header to be compact. Otherwise it will be compact when\r\n * the viewport is smaller than 992px.\r\n /\r\n @Prop()\r\n compact: HeaderCompactMode = \"auto\";\r\n\r\n /\r\n Used to show the login/logout option. 'none' renders nothing.\r\n /\r\n @Prop()\r\n authStatus: HeaderAuthStatus = \"none\";\r\n\r\n /\r\n When the `authStatus` is `loggedOut` a loginUrl can be provided.\r\n * The login button will then render as an anchor.\r\n /\r\n @Prop()\r\n loginUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"logout\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n logoutUrl?: string;\r\n\r\n /\r\n Show a help-button or link in the header\r\n /\r\n @Prop()\r\n showHelp = false;\r\n\r\n /\r\n The URL to open when the user activates \"help\".\r\n * If no URL is specified, a button element is used instead.\r\n /\r\n @Prop()\r\n helpUrl?: string;\r\n\r\n /\r\n The name to show when the user is logged in.\r\n /\r\n @Prop()\r\n userProfileName?: string;\r\n\r\n /\r\n The URL to open when the user activates the profile url.\r\n /\r\n @Prop()\r\n userProfileUrl?: string;\r\n\r\n /\r\n The URL to open when the user activates \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeUrl?: string;\r\n\r\n /\r\n Set this to true when the user is at \"Mijn Omgevingsloket\".\r\n /\r\n @Prop()\r\n userHomeActive = false;\r\n\r\n /\r\n Emitted when something in the header is selected.\r\n \r\n `event.detail.type` indicates the functionality the user pressed. eg. `'login'` or `'menuItem'`\r\n /\r\n @Event()\r\n dsoHeaderClick!: EventEmitter<HeaderEvent>;\r\n\r\n @State()\r\n visibleMenuItemsCount: number \| undefined = undefined;\r\n\r\n @State()\r\n dropdownOptionsOffset = 0;\r\n\r\n @Watch(\"mainMenu\")\r\n mainMenuChanged() {\r\n this.resetVisibleMenuItems();\r\n }\r\n\r\n private resetVisibleMenuItems = () => {\r\n this.visibleMenuItemsCount = undefined;\r\n };\r\n\r\n private get isCompact() {\r\n return this.compact === \"always\" \|\| window.innerWidth < minDesktopViewportWidth;\r\n }\r\n\r\n private clickHandler = (e: MouseEvent, type: HeaderNavigationType, options?: ClickHandlerOptions) => {\r\n this.dsoHeaderClick.emit({\r\n originalEvent: e,\r\n isModifiedEvent: isModifiedEvent(e),\r\n type,\r\n menuItem: options?.menuItem,\r\n url: options?.url ?? options?.menuItem?.url,\r\n });\r\n };\r\n\r\n private dropdownElement: HTMLDsoDropdownMenuElement \| undefined;\r\n private navElement: HTMLUListElement \| undefined;\r\n private menuItemElementRefs: (HTMLLIElement \| undefined)[] = [];\r\n private dropdownMenuItemElementRef: HTMLLIElement \| undefined;\r\n private userHomeMenuItemElementRef: HTMLLIElement \| undefined;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n /\r\n Before determining the visible menu items, all the menu items are rendered (including the dropdown menu item and the user home menu item).\r\n * Then the visible menu items are calculated in componentDidRender() and ONLY when the visibleMenuItemsCount is undefined.\r\n \r\n When the window resizes or this.mainMenu changes, a reset is triggered to recalculate the visible menu items.\r\n \r\n @param navElement The navigation element to calculate the overflow menu item count for.\r\n * @returns The number of menu items that can fit in the available space.\r\n */\r\n private calculateOverflowMenuItemCount(navElement: HTMLUListElement): number {\r\n const availableWidth = navElement.offsetWidth;\r\n\r\n const lastMenuItem = this.menuItemElementRefs[this.menuItemElementRefs.length - 1];\r\n const mostRightMenuItem = this.userHomeMenuItemElementRef ?? lastMenuItem;\r\n const dropdownMenuItem = this.dropdownMenuItemElementRef;\r\n\r\n if (!mostRightMenuItem \|\| !dropdownMenuItem \|\| !lastMenuItem) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const dropdownMenuItemEffectiveWidth =\r\n dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth - (lastMenuItem.offsetLeft + lastMenuItem.offsetWidth);\r\n\r\n const requiredWidth = mostRightMenuItem.offsetLeft + mostRightMenuItem.offsetWidth - dropdownMenuItemEffectiveWidth;\r\n\r\n if (requiredWidth <= availableWidth) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n const userHomeMenuItemEffectiveWidth = this.userHomeMenuItemElementRef\r\n ? this.userHomeMenuItemElementRef.offsetLeft +\r\n this.userHomeMenuItemElementRef.offsetWidth -\r\n (dropdownMenuItem.offsetLeft + dropdownMenuItem.offsetWidth)\r\n : 0;\r\n\r\n const remainingWidth = availableWidth - dropdownMenuItemEffectiveWidth - userHomeMenuItemEffectiveWidth;\r\n\r\n const visibleMenuItems = this.menuItemElementRefs.findIndex(\r\n (menuItem) => menuItem && menuItem.offsetLeft + menuItem.offsetWidth > remainingWidth,\r\n );\r\n\r\n if (visibleMenuItems < 0) {\r\n return this.menuItemElementRefs.length;\r\n }\r\n\r\n return visibleMenuItems;\r\n }\r\n\r\n private calculateDropdownOptionsOffset() {\r\n if (!this.dropdownElement) {\r\n return 0;\r\n }\r\n\r\n return (\r\n this.host.clientHeight -\r\n (this.dropdownElement?.getBoundingClientRect().bottom - this.host.getBoundingClientRect().top)\r\n );\r\n }\r\n\r\n private get visibleMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\"\r\n ? this.mainMenu.slice(0, this.visibleMenuItemsCount)\r\n : this.mainMenu;\r\n }\r\n\r\n private get hiddenMainMenuItems(): HeaderMenuItem[] {\r\n return typeof this.visibleMenuItemsCount === \"number\" ? this.mainMenu.slice(this.visibleMenuItemsCount) : [];\r\n }\r\n\r\n private resizeObserver = new ResizeObserver(() => {\r\n this.resetVisibleMenuItems();\r\n\r\n forceUpdate(this.host);\r\n });\r\n\r\n connectedCallback(): void {\r\n this.resizeObserver.observe(this.host);\r\n }\r\n\r\n disconnectedCallback() {\r\n this.resizeObserver.disconnect();\r\n }\r\n\r\n componentDidRender() {\r\n if (!this.host.isConnected) {\r\n return;\r\n }\r\n\r\n if (this.isCompact && this.dropdownElement) {\r\n this.dropdownElement.dropdownOptionsOffset = this.calculateDropdownOptionsOffset();\r\n }\r\n\r\n if (typeof this.visibleMenuItemsCount === \"undefined\" && this.navElement) {\r\n this.visibleMenuItemsCount = this.calculateOverflowMenuItemCount(this.navElement);\r\n }\r\n }\r\n\r\n render() {\r\n return (\r\n <Host is-compact={this.isCompact}>\r\n <div class=\"dso-header\">\r\n <div class=\"logo-container\">\r\n <slot name=\"logo\" />\r\n </div>\r\n {this.isCompact ? this.renderCompact() : this.renderNormal()}\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private renderCompact() {\r\n return (\r\n (this.mainMenu.length > 0 \|\| this.userHomeUrl \|\| this.authStatus !== \"none\") && (\r\n <div class=\"dropdown\">\r\n <dso-dropdown-menu\r\n dropdown-align=\"right\"\r\n dropdownOptionsOffset={this.dropdownOptionsOffset}\r\n ref={(element) => (this.dropdownElement = element)}\r\n >\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"menu\")}</span>\r\n <dso-icon icon=\"chevron-down\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.mainMenu.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n {this.userHomeUrl && (\r\n <li>\r\n <a\r\n href={this.userHomeUrl}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <li>\r\n <a\r\n href={this.userProfileUrl}\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n <span class=\"profile-label\"> - Mijn profiel</span>\r\n </a>\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <li>\r\n {this.loginUrl ? (\r\n <a href={this.loginUrl} onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}>\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <li>\r\n {this.logoutUrl ? (\r\n <a href={this.logoutUrl} onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}>\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n {this.showHelp && (\r\n <li>\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button type=\"button\" class=\"dso-tertiary\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </li>\r\n )}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </div>\r\n )\r\n );\r\n }\r\n\r\n private renderNormal() {\r\n this.menuItemElementRefs = [];\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-header-session\">\r\n {this.userProfileUrl && this.userProfileName && this.authStatus === \"loggedIn\" && (\r\n <div class=\"profile\">\r\n <a\r\n href={this.userProfileUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"profile\", { url: this.userProfileUrl })}\r\n >\r\n {this.userProfileName}\r\n </a>\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedOut\" && (\r\n <div class=\"login\">\r\n {this.loginUrl ? (\r\n <a\r\n href={this.loginUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"login\", { url: this.loginUrl })}\r\n >\r\n {this.text(\"login\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"login\")}>\r\n {this.text(\"login\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.authStatus === \"loggedIn\" && (\r\n <div class=\"logout\">\r\n {this.logoutUrl ? (\r\n <a\r\n href={this.logoutUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"logout\", { url: this.logoutUrl })}\r\n >\r\n {this.text(\"logout\")}\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"logout\")}>\r\n {this.text(\"logout\")}\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n {this.showHelp && (\r\n <div class=\"help\">\r\n {this.helpUrl ? (\r\n <a\r\n href={this.helpUrl}\r\n class=\"dso-tertiary\"\r\n onClick={(e) => this.clickHandler(e, \"help\", { url: this.helpUrl })}\r\n >\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </a>\r\n ) : (\r\n <button class=\"dso-tertiary\" type=\"button\" onClick={(e) => this.clickHandler(e, \"help\")}>\r\n <span>{this.text(\"help\")}</span>\r\n <dso-icon icon=\"help\"></dso-icon>\r\n </button>\r\n )}\r\n </div>\r\n )}\r\n </div>\r\n {(this.mainMenu.length > 0 \|\| this.userHomeUrl) && (\r\n <nav class=\"dso-navbar\">\r\n <ul\r\n class={clsx(\"dso-nav\", \"dso-nav-main\", { ready: this.visibleMenuItemsCount !== undefined })}\r\n ref={(element) => (this.navElement = element)}\r\n >\r\n {this.visibleMainMenuItems.map((menuItem, i) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n ref={(el) => (this.menuItemElementRefs[i] = el)}\r\n />\r\n ))}\r\n {(this.visibleMenuItemsCount === undefined \|\| this.hiddenMainMenuItems.length > 0) && (\r\n <li\r\n aria-hidden={this.visibleMenuItemsCount === undefined}\r\n ref={(el) => (this.dropdownMenuItemElementRef = el)}\r\n class=\"dropdown-menu-item\"\r\n >\r\n <dso-dropdown-menu>\r\n <button type=\"button\" slot=\"toggle\">\r\n <span>{this.text(\"overflowMenu\")}</span>\r\n <dso-icon icon=\"chevron-down\" class=\"main-menu-item-icon\"></dso-icon>\r\n </button>\r\n <div class=\"dso-dropdown-options\">\r\n <ul>\r\n {this.hiddenMainMenuItems.map((menuItem) => (\r\n <MenuItem\r\n item={menuItem}\r\n onClick={(e) => this.clickHandler(e, \"menuItem\", { menuItem })}\r\n key={menuItem.label}\r\n />\r\n ))}\r\n </ul>\r\n </div>\r\n </dso-dropdown-menu>\r\n </li>\r\n )}\r\n {this.userHomeUrl && (\r\n <li\r\n class={clsx(\"menu-user-home\", { \"dso-active\": this.userHomeActive })}\r\n ref={(el) => (this.userHomeMenuItemElementRef = el)}\r\n >\r\n <a\r\n href={this.userHomeUrl}\r\n aria-current={this.userHomeActive ? \"page\" : undefined}\r\n onClick={(e) => this.clickHandler(e, \"userHome\", { url: this.userHomeUrl })}\r\n >\r\n <dso-icon icon=\"user-line\" class=\"main-menu-item-icon\"></dso-icon>\r\n {this.text(\"userHome\")}\r\n </a>\r\n </li>\r\n )}\r\n </ul>\r\n </nav>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-highlight-box.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
-const highlightBoxCss = "*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset);display:block;container-type:inline-size;position:relative;z-index:1}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}";
+const highlightBoxCss = "*,*::after,*::before{box-sizing:border-box}.dso-step-counter{background-color:#275937;border:8px solid #79b929;border-radius:50%;box-sizing:content-box;color:#fff;font-size:1.25rem;font-weight:500;block-size:2rem;inset-inline-start:16px;line-height:2rem;position:absolute;text-align:center;inset-block-start:-1.5rem;inline-size:2rem}:host{margin-block-start:16px;padding:16px;margin-block-end:24px;block-size:var(--highlight-box-block-size, unset);min-block-size:var(--highlight-box-min-block-size, unset)}:host[has-counter]{block-size:var(--highlight-box-counter-block-size, unset)}:host:not([has-counter]){block-size:var(--highlight-box-nocounter-block-size, unset)}:host{display:block;container-type:inline-size;position:relative;z-index:1}";
 const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends HTMLElement {
     constructor() {
@@ -11,7 +11,7 @@ const HighlightBox = /*@__PURE__*/ proxyCustomElement(class HighlightBox extends
     render() {
         var _a;
         const hasCounter = this.step || !!this.element.querySelector("[slot=icon]");
-        return (h(Host, { key: 'dcab89eb00fb42509d6917d54f8c69ef7c099a7f', "has-counter": hasCounter }, hasCounter && h("div", { key: 'ac0ec43ec8d847aa29bb321d98d5d1ac8545cfea', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'd00f28194251ed549e34bded6b645fc79b82ad46', name: "icon" })), h("slot", { key: '5cd1bdfbf5754f22a11f89e0c1db5d7d545aba46' })));
+        return (h(Host, { key: 'baa2e7b69d8594b34bb3f87b10e50155fcb8bbeb', "has-counter": hasCounter }, hasCounter && h("div", { key: 'e1a29441395455061a92191c2a0d09cac29a1e3d', class: "dso-step-counter" }, (_a = this.step) !== null && _a !== void 0 ? _a : h("slot", { key: 'db2bf2c61f04cc0f0a6ac8cd17af5c083cea10f5', name: "icon" })), h("slot", { key: '9ab5693fccdaed92f15dce9c7a76b954f5b53693' })));
     }
     get element() { return this; }
     static get style() { return highlightBoxCss; }

package/dist/components/dso-highlight-box.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,~~muBAAmuB~~;;~~MCO9uB~~,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-highlight-box.js","mappings":";;AAAA,MAAM,eAAe,GAAG,yuBAAyuB;;MCOpvB,YAAY,iBAAAA,kBAAA,CAAA,MAAA,YAAA,SAAA,WAAA,CAAA;;;;;;IAkCvB,MAAM,GAAA;;AACJ,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,aAAa,CAAC;AAE3E,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,aAAA,EAAc,UAAU,EAAA,EAC1B,UAAU,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,kBAAkB,IAAE,CAAA,EAAA,GAAA,IAAI,CAAC,IAAI,mCAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,GAAQ,CAAO,EAC3F,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/highlight-box/highlight-box.scss?tag=dso-highlight-box&encapsulation=shadow","src/components/highlight-box/highlight-box.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/highlight-box\";\r\n@use \"~dso-toolkit/src/components/step-counter\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@include step-counter.step-counter();\r\n\r\n:host {\r\n @include highlight-box.root();\r\n\r\n display: block;\r\n container-type: inline-size;\r\n position: relative;\r\n z-index: 1;\r\n}\r\n","import { Component, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-highlight-box\",\r\n styleUrl: \"highlight-box.scss\",\r\n shadow: true,\r\n})\r\nexport class HighlightBox {\r\n /*\r\n For yellow Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n yellow?: boolean;\r\n\r\n /\r\n For a bordered Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n border?: boolean;\r\n\r\n /\r\n For a while Highlight Box.\r\n /\r\n @Prop({ reflect: true })\r\n white?: boolean;\r\n\r\n /\r\n For an Highlight Box with a drop shadow.\r\n /\r\n @Prop({ reflect: true })\r\n dropShadow?: boolean;\r\n\r\n /\r\n To create a step indicator.\r\n */\r\n @Prop({ reflect: true })\r\n step?: number;\r\n\r\n @Element()\r\n private element!: HTMLDsoHighlightBoxElement;\r\n\r\n render() {\r\n const hasCounter = this.step \|\| !!this.element.querySelector(\"[slot=icon]\");\r\n\r\n return (\r\n <Host has-counter={hasCounter}>\r\n {hasCounter && <div class=\"dso-step-counter\">{this.step ?? <slot name=\"icon\"></slot>}</div>}\r\n <slot></slot>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-history-item.js CHANGED Viewed

@@ -44,7 +44,7 @@ const HistoryItem = /*@__PURE__*/ proxyCustomElement(class HistoryItem extends H
         return this.host.querySelector("[slot='warning']");
     }
     render() {
-        return (h(Fragment, { key: '25ded905c52c75f290d68f026ee428088ef11d33' }, h("div", { key: 'bb76d9f4b424fa348a0ec0b2c69ec8398b8b1c01', class: "history-item-date" }, h("slot", { key: '45e86c09b0a01f841fabaeaa469c22528f506188', name: "date" })), h("div", { key: '32df84fe88c34b9e73bb46ce4082b1150cd87bcb', class: "history-item-content" }, h("div", { key: '8b27dfeae1482ca1260ad61f1e85e45de3513fed', class: "history-item-status-message" }, h("dso-icon", { key: 'a176b5cafce73214b40ec258c984e4d5a9ba88c1', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '2529d09ac3017016bc2b5927a836a736c3d4234d', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: 'de071e8c737f352eb135a0eeec9d8edf0d253447', class: "history-item-title" }, h("a", { key: '98866c1cfeb33f9e0de1ef85560904f076538aef', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '2df06f57a5f3c38bd67415b3eadefabee7637989', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '900b4b3d37f164c456d3c56d2b4a9334e2993bb1', class: "history-item-explanation" }, h("slot", { key: 'dba257dc1cdd8bcbc2ddfb31d8641f2023c366c0', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '93b0cd86f8aea38ed154b4cd031552de9f6b5fb0', class: "history-item-warning" }, h("dso-icon", { key: 'e6111333ccdd0591c15386d65e2f5b87f2b04c34', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'a7dcf352bd38f9d083f8981b2064f559d24dcba8', name: "warning" }))))));
+        return (h(Fragment, { key: '2e77d236980aed9e08e35161d001d17f1728a83b' }, h("div", { key: 'c0c0be85009c8f7d97c321a5bdbf43bda7a6f64b', class: "history-item-date" }, h("slot", { key: '099aefc48360345b5d55f6aebe5f9d29aefe59c9', name: "date" })), h("div", { key: 'c4da694c8b9659aecbd6a4594bb5f46dfa372456', class: "history-item-content" }, h("div", { key: '9fd28a25b87a15bf57442a7648834d57e6f260e6', class: "history-item-status-message" }, h("dso-icon", { key: 'cf331e4b19413148a68bafc6bc1849551bb6f435', icon: this.typeIcons[this.type], "aria-hidden": "true" }), h("slot", { key: '8aa1952d43a8bdf28f63d81e3723e8634be9a0be', name: "status" })), this.titleSlottedElement !== null && this.href && (h("div", { key: '7128bf286bf5f92c4e061f7b06ad8a709fb88d87', class: "history-item-title" }, h("a", { key: '38635bb3ff0de20d5fdb8633bd5699112cfa753b', href: this.href, class: "title-anchor", onClick: (e) => this.clickEventHandler(e) }, h("slot", { key: '6a0efc08c7f7d4283f6417505bb727dc4bab75d4', name: "title" })))), this.explanationSlottedElement !== null && (h("div", { key: '505111ed0bf510619c6814b89f01a4ed96f8e2bd', class: "history-item-explanation" }, h("slot", { key: '2b27be5812d5b62e11da7b1a1d4da0c68dd1f625', name: "explanation" }))), this.warningSlottedElement !== null && (h("div", { key: '6f6b7e404bf94a00c0835098470d00b70ba5203b', class: "history-item-warning" }, h("dso-icon", { key: '1e8c8c07ebed9ccb58f21f9b2a6c279510b19e4b', icon: "status-warning-inline", role: "img", "aria-label": "Waarschuwing" }), h("slot", { key: 'df67c18e8aea8dfabf5e9ca5cbd33cb0cba0d47b', name: "warning" }))))));
     }
     get host() { return this; }
     static get style() { return historyItemCss; }

package/dist/components/dso-input-range.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
-const inputRangeCss = ":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c;border-radius:50%}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5;border:1px solid #666;border-radius:0.5rem}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c;border-color:transparent;border-radius:50%}.input::-moz-range-thumb:hover{background-color:#275937}";
+const inputRangeCss = ":host{display:flex;align-items:center;gap:0.5rem;padding:0.5rem;inline-size:100%}*,*::after,*::before{box-sizing:border-box}.counter{flex-shrink:0;min-inline-size:5ch}.counter.min{text-align:end}.counter.max{text-align:start}.input{flex-grow:1;appearance:none;background-color:transparent;cursor:pointer}.input::-webkit-slider-runnable-track{block-size:0.5rem;background-color:#e5e5e5}.input::-webkit-slider-runnable-track:hover{background-color:#ccc}.input::-webkit-slider-runnable-track{border:1px solid #666;border-radius:0.5rem}.input::-webkit-slider-thumb{block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.55rem;background-color:#39870c}.input::-webkit-slider-thumb:hover{background-color:#275937}.input::-webkit-slider-thumb{border-radius:50%}.input::-moz-range-track{box-sizing:border-box;block-size:0.5rem;background-color:#e5e5e5}.input::-moz-range-track:hover{background-color:#ccc}.input::-moz-range-track{border:1px solid #666;border-radius:0.5rem}.input::-moz-range-thumb{box-sizing:border-box;block-size:1.5rem;inline-size:1.5rem;appearance:none;margin-block-start:-0.5rem;background-color:#39870c}.input::-moz-range-thumb:hover{background-color:#275937}.input::-moz-range-thumb{border-color:transparent;border-radius:50%}";
 const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends HTMLElement {
     constructor() {
@@ -17,13 +17,13 @@ const InputRange = /*@__PURE__*/ proxyCustomElement(class InputRange extends HTM
         const min = this.min || 0;
         const max = this.max || 100;
         const step = this.step || 1;
-        return (h(Fragment, null, this.description && (h("span", { key: '0c75a4a89ead97c9b50838f0c975c1419fff9c29', id: "description", hidden: true }, this.description)), h("span", { key: '77a65b197480a6e24e73efb592fae58488cb3635', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '9494837e51c48ff8be17cd482867f4c7691b30e6', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        return (h(Fragment, null, this.description && (h("span", { key: 'f3796a5bbd719af7fe23c285ba4f1519eaaaf1b9', id: "description", hidden: true }, this.description)), h("span", { key: '91eeb869d8529a793ab25c766cb38b75dd388ba7', class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { key: '98734659f11a5d9793f76b7ebd170b56fe1ef965', type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
                 originalEvent: event,
                 value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
                 max,
                 min,
                 step,
-            }) }), h("span", { key: 'efa3762a2f4775b3445efa9482ec4851b04a0889', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+            }) }), h("span", { key: '04774c80c6ac969cf1338d3b4ea39dabf531539b', class: "counter max", "aria-hidden": "true" }, max, this.unit)));
     }
     get host() { return this; }
     static get style() { return inputRangeCss; }

package/dist/components/dso-input-range.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-input-range.js","mappings":";;AAAA,MAAM,aAAa,GAAG~~,0nCAA0nC~~;;~~MCSnoC~~,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AAoCE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA0DlB;IAzCC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAE3B,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,WAAW,KACf,6DAAM,EAAE,EAAC,aAAa,EAAC,MAAM,EAC1B,IAAA,EAAA,EAAA,IAAI,CAAC,WAAW,CACZ,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,EACD,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,kBAAA,EACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;AACL,aAAA,CAAC,EAEJ,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n\r\n padding: 0.5rem;\r\n\r\n inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n flex-shrink: 0;\r\n\r\n min-inline-size: 5ch;\r\n\r\n &.min {\r\n text-align: end;\r\n }\r\n\r\n &.max {\r\n text-align: start;\r\n }\r\n}\r\n\r\n.input {\r\n flex-grow: 1;\r\n\r\n appearance: none;\r\n\r\n background-color: transparent;\r\n\r\n cursor: pointer;\r\n\r\n &::-webkit-slider-runnable-track {\r\n block-size: 0.5rem;\r\n\r\n background-color: colors.$grijs-10;\r\n &:hover {\r\n background-color: colors.$grijs-20;\r\n }\r\n\r\n border: 1px solid colors.$grijs-60;\r\n border-radius: 0.5rem;\r\n }\r\n\r\n &::-webkit-slider-thumb {\r\n block-size: 1.5rem;\r\n inline-size: 1.5rem;\r\n\r\n appearance: none;\r\n\r\n margin-block-start: -0.55rem;\r\n\r\n background-color: colors.$grasgroen;\r\n &:hover {\r\n background-color: colors.$bosgroen;\r\n }\r\n\r\n border-radius: 50%;\r\n }\r\n\r\n &::-moz-range-track {\r\n box-sizing: border-box;\r\n\r\n block-size: 0.5rem;\r\n\r\n background-color: colors.$grijs-10;\r\n &:hover {\r\n background-color: colors.$grijs-20;\r\n }\r\n\r\n border: 1px solid colors.$grijs-60;\r\n border-radius: 0.5rem;\r\n }\r\n\r\n &::-moz-range-thumb {\r\n box-sizing: border-box;\r\n\r\n block-size: 1.5rem;\r\n inline-size: 1.5rem;\r\n\r\n appearance: none;\r\n\r\n margin-block-start: -0.5rem;\r\n\r\n background-color: colors.$grasgroen;\r\n &:hover {\r\n background-color: colors.$bosgroen;\r\n }\r\n\r\n border-color: transparent;\r\n border-radius: 50%;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-input-range\",\r\n styleUrl: \"input-range.scss\",\r\n shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n /*\r\n The minimum value of the range.\r\n /\r\n @Prop()\r\n min?: number;\r\n\r\n /\r\n The maximum value of the range.\r\n /\r\n @Prop()\r\n max?: number;\r\n\r\n /\r\n The value of the range.\r\n /\r\n @Prop()\r\n value?: number;\r\n\r\n /\r\n The step to increment the value by.\r\n /\r\n @Prop()\r\n step?: number;\r\n\r\n /\r\n The label of the range.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The unit of the range.\r\n /\r\n @Prop()\r\n unit: string = \"\";\r\n\r\n /\r\n The description of the range.\r\n /\r\n @Prop()\r\n description?: string;\r\n\r\n /\r\n Emitted when the value has changed.\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoInputRangeElement;\r\n\r\n render() {\r\n const min = this.min \|\| 0;\r\n const max = this.max \|\| 100;\r\n const step = this.step \|\| 1;\r\n\r\n return (\r\n <>\r\n {this.description && (\r\n <span id=\"description\" hidden>\r\n {this.description}\r\n </span>\r\n )}\r\n <span class=\"counter min\" aria-hidden=\"true\">\r\n {min}\r\n {this.unit}\r\n </span>\r\n <input\r\n type=\"range\"\r\n min={this.min}\r\n max={this.max}\r\n value={this.value}\r\n class=\"input\"\r\n aria-label={this.label}\r\n aria-describedby={this.description ? \"description\" : undefined}\r\n onChange={(event) =>\r\n this.dsoChange.emit({\r\n originalEvent: event,\r\n value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n max,\r\n min,\r\n step,\r\n })\r\n }\r\n />\r\n <span class=\"counter max\" aria-hidden=\"true\">\r\n {max}\r\n {this.unit}\r\n </span>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-input-range.js","mappings":";;AAAA,MAAM,aAAa,GAAG,+uCAA+uC;;MCSxvC,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AAoCE;;AAEG;AAEH,QAAA,IAAI,CAAA,IAAA,GAAW,EAAE;AA0DlB;IAzCC,MAAM,GAAA;AACJ,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC;AACzB,QAAA,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG;AAC3B,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC;AAE3B,QAAA,QACE,CAAA,CAAA,QAAA,EAAA,IAAA,EACG,IAAI,CAAC,WAAW,KACf,6DAAM,EAAE,EAAC,aAAa,EAAC,MAAM,EAC1B,IAAA,EAAA,EAAA,IAAI,CAAC,WAAW,CACZ,CACR,EACD,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,EACP,CACE,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,EACD,YAAA,EAAA,IAAI,CAAC,KAAK,EAAA,kBAAA,EACJ,IAAI,CAAC,WAAW,GAAG,aAAa,GAAG,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,KACd,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;AAClB,gBAAA,aAAa,EAAE,KAAK;gBACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,GAAG,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,SAAS;gBAC9F,GAAG;gBACH,GAAG;gBACH,IAAI;AACL,aAAA,CAAC,EAEJ,CAAA,EACF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,aAAa,EAAA,aAAA,EAAa,MAAM,EAAA,EACzC,GAAG,EACH,IAAI,CAAC,IAAI,CACL,CACN;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/input-range/input-range.scss?tag=dso-input-range&encapsulation=shadow","src/components/input-range/input-range.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n:host {\r\n display: flex;\r\n align-items: center;\r\n gap: 0.5rem;\r\n\r\n padding: 0.5rem;\r\n\r\n inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.counter {\r\n flex-shrink: 0;\r\n\r\n min-inline-size: 5ch;\r\n\r\n &.min {\r\n text-align: end;\r\n }\r\n\r\n &.max {\r\n text-align: start;\r\n }\r\n}\r\n\r\n.input {\r\n flex-grow: 1;\r\n\r\n appearance: none;\r\n\r\n background-color: transparent;\r\n\r\n cursor: pointer;\r\n\r\n &::-webkit-slider-runnable-track {\r\n block-size: 0.5rem;\r\n\r\n background-color: colors.$grijs-10;\r\n &:hover {\r\n background-color: colors.$grijs-20;\r\n }\r\n\r\n border: 1px solid colors.$grijs-60;\r\n border-radius: 0.5rem;\r\n }\r\n\r\n &::-webkit-slider-thumb {\r\n block-size: 1.5rem;\r\n inline-size: 1.5rem;\r\n\r\n appearance: none;\r\n\r\n margin-block-start: -0.55rem;\r\n\r\n background-color: colors.$grasgroen;\r\n &:hover {\r\n background-color: colors.$bosgroen;\r\n }\r\n\r\n border-radius: 50%;\r\n }\r\n\r\n &::-moz-range-track {\r\n box-sizing: border-box;\r\n\r\n block-size: 0.5rem;\r\n\r\n background-color: colors.$grijs-10;\r\n &:hover {\r\n background-color: colors.$grijs-20;\r\n }\r\n\r\n border: 1px solid colors.$grijs-60;\r\n border-radius: 0.5rem;\r\n }\r\n\r\n &::-moz-range-thumb {\r\n box-sizing: border-box;\r\n\r\n block-size: 1.5rem;\r\n inline-size: 1.5rem;\r\n\r\n appearance: none;\r\n\r\n margin-block-start: -0.5rem;\r\n\r\n background-color: colors.$grasgroen;\r\n &:hover {\r\n background-color: colors.$bosgroen;\r\n }\r\n\r\n border-color: transparent;\r\n border-radius: 50%;\r\n }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-input-range\",\r\n styleUrl: \"input-range.scss\",\r\n shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n /*\r\n The minimum value of the range.\r\n /\r\n @Prop()\r\n min?: number;\r\n\r\n /\r\n The maximum value of the range.\r\n /\r\n @Prop()\r\n max?: number;\r\n\r\n /\r\n The value of the range.\r\n /\r\n @Prop()\r\n value?: number;\r\n\r\n /\r\n The step to increment the value by.\r\n /\r\n @Prop()\r\n step?: number;\r\n\r\n /\r\n The label of the range.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The unit of the range.\r\n /\r\n @Prop()\r\n unit: string = \"\";\r\n\r\n /\r\n The description of the range.\r\n /\r\n @Prop()\r\n description?: string;\r\n\r\n /\r\n Emitted when the value has changed.\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoInputRangeElement;\r\n\r\n render() {\r\n const min = this.min \|\| 0;\r\n const max = this.max \|\| 100;\r\n const step = this.step \|\| 1;\r\n\r\n return (\r\n <>\r\n {this.description && (\r\n <span id=\"description\" hidden>\r\n {this.description}\r\n </span>\r\n )}\r\n <span class=\"counter min\" aria-hidden=\"true\">\r\n {min}\r\n {this.unit}\r\n </span>\r\n <input\r\n type=\"range\"\r\n min={this.min}\r\n max={this.max}\r\n value={this.value}\r\n class=\"input\"\r\n aria-label={this.label}\r\n aria-describedby={this.description ? \"description\" : undefined}\r\n onChange={(event) =>\r\n this.dsoChange.emit({\r\n originalEvent: event,\r\n value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n max,\r\n min,\r\n step,\r\n })\r\n }\r\n />\r\n <span class=\"counter max\" aria-hidden=\"true\">\r\n {max}\r\n {this.unit}\r\n </span>\r\n </>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-legend-item.js CHANGED Viewed

@@ -41,7 +41,7 @@ const LegendItem = /*@__PURE__*/ proxyCustomElement(class LegendItem extends HTM
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
         const hasOptions = this.optionsSlottedElement !== null;
-        return (h(Host, { key: '38be1df12f1f113816674acf519ca76556f1403a', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: '9fddb3543595f36d22ec4142ee5fba58e3c990ab', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: 'b9df4829c8cc3c2126266f34ce88cb1d53eafff7' }, h("slot", { key: '495da7eb326370bb0feee44527a809507e6e74e6', name: "symbol" }))), h("div", { key: '3bdf1190237821c2bef9884a14f04ab017c4087b' }, h("slot", { key: '377992fc61ae3161abdf7abe3f71f86e8e894993' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: 'ef6fb8d9106dc9e89f97d9b21a8a7448639deef4', position: "bottom" }, this.disabledMessage)), h("div", { key: '560eb094f29cb4c0a61bc6dd34f36dee6e0ff999', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: 'a79be1bd5099dc462a49d23ec71ea904f24b017e', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '17bd79c80420e0c49200eaaf1e27e9e5ee341756', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: 'ed80008eaa2043b2cf48d994f9702289e6ccecbb', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '1b3f645207191ddb22434c859c13107724f7c190', name: "options" })))));
+        return (h(Host, { key: 'd4e2f6d842f7ca0157c262d6f4512e1decf04a9d', onMouseEnter: () => this.dsoMouseEnter.emit(), onMouseLeave: () => this.dsoMouseLeave.emit() }, h("div", { key: 'cfd02f4df6aa26b14fdbee59b466f90f8d8cbee2', class: clsx("legend-item", { "legend-item-symbol": hasSymbol }) }, hasSymbol && (h("div", { key: '0d2c32702db90dbe44583a44c50055aba1958cf4' }, h("slot", { key: 'bebec9612d2ddbb73f930b6d7fd6826e8f30e8af', name: "symbol" }))), h("div", { key: 'b4badff0166ace15d3e1fc0be215705801af1067' }, h("slot", { key: '23ca6f63fd79d869ee906a3a857b3c56a837364c' })), this.disabled && this.disabledMessage && (h("dso-toggletip", { key: '648ce50e21c68c7f400c8a08a7e5df6704d19a43', position: "bottom" }, this.disabledMessage)), h("div", { key: 'b296b98e92f779c77020ec235c2d4cbfe061c4f0', class: "legend-item-right-content" }, hasOptions && !this.disabled && (h("dso-icon-button", { key: '865c48d41bd29c744940bfd71f48cd66d488b526', label: "Opties", icon: "more", variant: "tertiary", class: { active: this.showOptions }, id: "edit-button", onDsoClick: () => (this.showOptions = !this.showOptions) })), this.activatable && (h("dso-slide-toggle", { key: '4130979dbe5871e51a58f656fbb910fb3e713de2', accessibleLabel: "Maak actief", checked: this.active, disabled: this.disabled, onDsoActiveChange: (e) => this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e }) })))), hasOptions && (h("div", { key: '87667bd6400a0bc4adb212e7f38bc7ee50052f3e', hidden: this.disabled || !this.showOptions, class: "options" }, h("slot", { key: '0d875c2b0d2a41441766255041b397c66b4cfe69', name: "options" })))));
     }
     get host() { return this; }
     static get style() { return legendItemCss; }

package/dist/components/dso-legend-item.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-legend-item.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/symbol.mixins\" as symbol-mixins;\r\n@use \"legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(span[slot=\"symbol\"]) {\r\n @include symbol-mixins.symbolContainer(\r\n legend-item-variables.$symbol-block-size,\r\n legend-item-variables.$symbol-inline-size\r\n );\r\n}\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol + .options {\r\n margin-block-start: units.$u1;\r\n }\r\n\r\n dso-icon-button.active {\r\n --_dso-icon-button-tertiary-color: #{colors.$bosgroen-140};\r\n }\r\n}\r\n\r\n.legend-item-right-content {\r\n margin-inline-start: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-content: center;\r\n align-items: center;\r\n\r\n dso-slide-toggle {\r\n display: flex;\r\n align-self: center;\r\n line-height: 1;\r\n margin-inline-start: 8px;\r\n padding-block-start: 0 !important;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n /\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /\r\n To disable the Legend Item\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Message to be shown behind a toggletip when the Legend Item is disabled\r\n /\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /\r\n Controls whether this Legend Item can be active or not\r\n /\r\n @Prop({ reflect: true })\r\n activatable?: boolean;\r\n\r\n /\r\n Controls whether this Legend Item is active or not\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n /\r\n Emitted when the mouse enters the Legend Item\r\n /\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /\r\n Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showOptions = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get optionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='options']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n {hasSymbol && (\r\n <div>\r\n <slot name=\"symbol\" />\r\n </div>\r\n )}\r\n <div>\r\n <slot />\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n\r\n <div class=\"legend-item-right-content\">\r\n {hasOptions && !this.disabled && (\r\n <dso-icon-button\r\n label=\"Opties\"\r\n icon=\"more\"\r\n variant=\"tertiary\"\r\n class={{ active: this.showOptions }}\r\n id=\"edit-button\"\r\n onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n />\r\n )}\r\n {this.activatable && (\r\n <dso-slide-toggle\r\n accessibleLabel=\"Maak actief\"\r\n checked={this.active}\r\n disabled={this.disabled}\r\n onDsoActiveChange={(e) =>\r\n this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n }\r\n />\r\n )}\r\n </div>\r\n </div>\r\n {hasOptions && (\r\n <div hidden={this.disabled \|\| !this.showOptions} class=\"options\">\r\n <slot name=\"options\" />\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-legend-item.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,ovBAAovB;;MC0B7vB,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAA,WAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;;;AASE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAuChB,QAAA,IAAW,CAAA,WAAA,GAAG,KAAK;AA0EpB;IAtEC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;AAE1E,QAAA,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC;;IAGjF,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;QAEnC,OAAO,IAAI,CAAC,gBAAgB;;AAG9B,IAAA,IAAI,oBAAoB,GAAA;QACtB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC;;AAGnD,IAAA,IAAI,qBAAqB,GAAA;QACvB,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,kBAAkB,CAAC;;IAGpD,MAAM,GAAA;AACJ,QAAA,MAAM,SAAS,GAAG,IAAI,CAAC,oBAAoB,KAAK,IAAI;AACpD,QAAA,MAAM,UAAU,GAAG,IAAI,CAAC,qBAAqB,KAAK,IAAI;AAEtD,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAE,YAAY,EAAE,MAAM,IAAI,CAAC,aAAa,CAAC,IAAI,EAAE,EAAA,EAChG,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,aAAa,EAAE,EAAE,oBAAoB,EAAE,SAAS,EAAE,CAAC,EAAA,EACjE,SAAS,KACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACP,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EACL,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,eAAe,KACpC,CAAe,CAAA,eAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,QAAQ,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,eAAe,CAAiB,CACxE,EAED,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACnC,UAAU,IAAI,CAAC,IAAI,CAAC,QAAQ,KAC3B,CACE,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,QAAQ,EACd,IAAI,EAAC,MAAM,EACX,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,WAAW,EAAE,EACnC,EAAE,EAAC,aAAa,EAChB,UAAU,EAAE,OAAO,IAAI,CAAC,WAAW,GAAG,CAAC,IAAI,CAAC,WAAW,CAAC,EAAA,CACxD,CACH,EACA,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,kBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,eAAe,EAAC,aAAa,EAC7B,OAAO,EAAE,IAAI,CAAC,MAAM,EACpB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,iBAAiB,EAAE,CAAC,CAAC,KACnB,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,CAEpG,CACH,CACG,CACF,EACL,UAAU,KACT,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,MAAM,EAAE,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,KAAK,EAAC,SAAS,EAAA,EAC9D,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACP,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement"],"sources":["src/components/legend-item/legend-item.scss?tag=dso-legend-item&encapsulation=shadow","src/components/legend-item/legend-item.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/global/mixins/symbol.mixins\" as symbol-mixins;\r\n@use \"legend-item.variables\" as legend-item-variables;\r\n\r\n:host {\r\n display: block;\r\n padding-block: units.$u1 * 0.5;\r\n padding-inline: units.$u1 * 0.5;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n::slotted(span[slot=\"symbol\"]) {\r\n @include symbol-mixins.symbolContainer(\r\n legend-item-variables.$symbol-block-size,\r\n legend-item-variables.$symbol-inline-size\r\n );\r\n}\r\n\r\n.legend-item {\r\n display: flex;\r\n position: relative;\r\n\r\n &.legend-item-symbol + .options {\r\n margin-block-start: units.$u1;\r\n }\r\n\r\n dso-icon-button.active {\r\n --_dso-icon-button-tertiary-color: #{colors.$bosgroen-140};\r\n }\r\n}\r\n\r\n.legend-item-right-content {\r\n margin-inline-start: auto;\r\n display: flex;\r\n justify-content: center;\r\n align-content: center;\r\n align-items: center;\r\n\r\n dso-slide-toggle {\r\n display: flex;\r\n align-self: center;\r\n line-height: 1;\r\n margin-inline-start: 8px;\r\n padding-block-start: 0 !important;\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Host,\r\n Prop,\r\n State,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { LegendItemActiveChangeEvent } from \"./legend-item.interfaces\";\r\n\r\n/*\r\n @slot The label for this Legend Item\r\n * @slot symbol - A span where the symbol is styled upon\r\n * @slot options - The slot to place controls in (i.e. `dso-input-range`). If present, this will cause the appearance of an edit-button (three dots) to show the controls. Will not be displayed if property `disabled` is set to true.\r\n /\r\n@Component({\r\n tag: \"dso-legend-item\",\r\n styleUrl: \"legend-item.scss\",\r\n shadow: true,\r\n})\r\nexport class LegendItem implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoLegendItemElement;\r\n\r\n /\r\n To disable the Legend Item\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Message to be shown behind a toggletip when the Legend Item is disabled\r\n /\r\n @Prop()\r\n disabledMessage?: string;\r\n\r\n /\r\n Controls whether this Legend Item can be active or not\r\n /\r\n @Prop({ reflect: true })\r\n activatable?: boolean;\r\n\r\n /\r\n Controls whether this Legend Item is active or not\r\n /\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /\r\n Emitted when user checks or unchecks the Slide Toggle.\r\n /\r\n @Event()\r\n dsoActiveChange!: EventEmitter<LegendItemActiveChangeEvent>;\r\n\r\n /\r\n Emitted when the mouse enters the Legend Item\r\n /\r\n @Event()\r\n dsoMouseEnter!: EventEmitter;\r\n\r\n /\r\n Emitted when the mouse leaves the Legend Item\r\n */\r\n @Event()\r\n dsoMouseLeave!: EventEmitter;\r\n\r\n @State()\r\n showOptions = false;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n connectedCallback(): void {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, { attributes: true, childList: true });\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n\r\n get symbolSlottedElement() {\r\n return this.host.querySelector(\"[slot='symbol']\");\r\n }\r\n\r\n get optionsSlottedElement() {\r\n return this.host.querySelector(\"[slot='options']\");\r\n }\r\n\r\n render() {\r\n const hasSymbol = this.symbolSlottedElement !== null;\r\n const hasOptions = this.optionsSlottedElement !== null;\r\n\r\n return (\r\n <Host onMouseEnter={() => this.dsoMouseEnter.emit()} onMouseLeave={() => this.dsoMouseLeave.emit()}>\r\n <div class={clsx(\"legend-item\", { \"legend-item-symbol\": hasSymbol })}>\r\n {hasSymbol && (\r\n <div>\r\n <slot name=\"symbol\" />\r\n </div>\r\n )}\r\n <div>\r\n <slot />\r\n </div>\r\n {this.disabled && this.disabledMessage && (\r\n <dso-toggletip position=\"bottom\">{this.disabledMessage}</dso-toggletip>\r\n )}\r\n\r\n <div class=\"legend-item-right-content\">\r\n {hasOptions && !this.disabled && (\r\n <dso-icon-button\r\n label=\"Opties\"\r\n icon=\"more\"\r\n variant=\"tertiary\"\r\n class={{ active: this.showOptions }}\r\n id=\"edit-button\"\r\n onDsoClick={() => (this.showOptions = !this.showOptions)}\r\n />\r\n )}\r\n {this.activatable && (\r\n <dso-slide-toggle\r\n accessibleLabel=\"Maak actief\"\r\n checked={this.active}\r\n disabled={this.disabled}\r\n onDsoActiveChange={(e) =>\r\n this.dsoActiveChange.emit({ current: Boolean(this.active), next: !this.active, originalEvent: e })\r\n }\r\n />\r\n )}\r\n </div>\r\n </div>\r\n {hasOptions && (\r\n <div hidden={this.disabled \|\| !this.showOptions} class=\"options\">\r\n <slot name=\"options\" />\r\n </div>\r\n )}\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-list-button.js CHANGED Viewed

@@ -6,7 +6,7 @@ import { d as defineCustomElement$4 } from './info.js';
 import { d as defineCustomElement$3 } from './info-button.js';
 import { d as defineCustomElement$2 } from './selectable.js';
-const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button dso-selectable:not(:last-child) {\n  margin-block-end: 0;\n}\n.dso-list-button .dso-selectable-container label {\n  font-weight: 700;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  page-break-before: always;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
+const listButtonCss = "*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  border: 0;\n  overflow: hidden;\n  clip-path: inset(0);\n}\n\n.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\n.dso-tertiary:active {\n  outline: 0;\n}\n.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\n.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\n.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\n.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon {\n  margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary span {\n  vertical-align: middle;\n}\n.dso-tertiary {\n  cursor: pointer;\n}\n\n.dso-input-number {\n  align-items: center;\n  display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n  text-align: center;\n  inline-size: 1.5rem;\n  font-size: 14px;\n}\n\n.dso-button-group {\n  display: flex;\n  flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n  background-color: #fff;\n  border-color: #e5e5e5;\n  color: #666;\n}\n.dso-button-group.dso-disabled > * {\n  pointer-events: none;\n}\n.dso-button-group > * {\n  border-radius: 0;\n}\n.dso-button-group > *:first-child {\n  border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n  border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n  border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n  border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n  border-style: solid;\n  border-width: 1px;\n  flex-wrap: nowrap;\n  padding-block: 0;\n  padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n@media screen and (max-width: 767px) {\n  .dso-button-group > .dso-input-number {\n    justify-content: center;\n  }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-button-group .dso-list-button {\n  padding-inline-end: 15px;\n}\n\n.dso-list-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n  outline-offset: 2px;\n}\n.dso-list-button:active {\n  outline: 0;\n}\n.dso-list-button {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #191919;\n}\n.dso-list-button {\n  border-radius: 4px;\n  border-width: 1px;\n  border-style: solid;\n  font-weight: 600;\n  padding-block: 15px;\n  padding-inline: 15px 47px;\n  position: relative;\n  text-align: start;\n  white-space: normal;\n  inline-size: 100%;\n  cursor: pointer;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n  background-color: #fff;\n  border-color: #d7e7ce;\n  color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #ccc;\n  color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n  opacity: 1;\n}\n.dso-list-button dso-selectable:not(:last-child) {\n  margin-block-end: 0;\n}\n.dso-list-button .dso-selectable-container label {\n  font-weight: 700;\n}\n.dso-list-button.dso-selected {\n  border-color: #39870c;\n  border-width: 1px;\n  box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n  .dso-list-button.dso-selected.dso-single-count {\n    border-inline-end: 0;\n    box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n  }\n}\n.dso-list-button label {\n  cursor: inherit;\n}\n.dso-list-button > span {\n  display: block;\n}\n.dso-list-button .dso-sublabel,\n.dso-list-button .subcontent {\n  font-weight: 400;\n  inline-size: 100%;\n  padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n  block-size: 24px;\n  color: #39870c;\n  inset-block-start: 15px;\n  inset-inline-end: 15px;\n  inline-size: 24px;\n  break-before: page;\n  position: absolute;\n}\n@media screen and (max-width: 767px) {\n  .dso-list-button.dso-selected.dso-single-count::after {\n    inline-size: 0;\n  }\n}";
 const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTMLElement {
     constructor() {
@@ -80,7 +80,7 @@ const ListButton = /*@__PURE__*/ proxyCustomElement(class ListButton extends HTM
     }
     render() {
         const selected = this.checked || (this.count !== undefined && this.count > 0);
-        return (h("div", { key: '8cbfa76101157d473ca590fae8abb9dc0b21ed4f', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: '827c846d4b1f675c8c1cfdb88e74d8e1c6f89a25', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: '8d6dd54020dafcb0422299ac5c8a22b3a40940e1', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: 'f4977f991eb94ed7a39c52dc4a1080329f62516c', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: 'cbbe81498a4fa41bf56562912dfd1970bf8ba7ea', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '253b1cfea57ecfb1c217caa59ec110cd0c727c28', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: 'f9ac1b6becfe6437862ecd53686ddfc1173ee859', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: 'b46d7fd959d085c6485c79dd50e15d4ad6c21d0c', class: "subcontent" }, h("slot", { key: 'a482b7d5837ccded712c9586fa90a7e47232b768', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'be7eeb3245496ddf7c46a2ad964b94b3f569b2cf', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: 'afc63a9435f731bb4475be5bcfaea77da68fd80e' }, h("dso-icon-button", { key: '231403e30c4475e11b3615d7a5b9360cf548a8a9', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: '18907024014d48c2c421898b009d7675748d5cab', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '08d683773392eb6248a7b4698473321757d90c40', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
+        return (h("div", { key: 'c27cab802da7b149c54da89e044000879b35a1ea', class: clsx(["dso-button-group", { "dso-disabled": this.disabled }]) }, h("div", { key: 'bdb5da45f124bad1335734fc0670bdc63b0b3e0a', class: clsx(["dso-list-button", { "dso-selected": selected, "dso-single-count": this.count === 1 }]), onClick: (e) => this.handleSelectClick(e) }, h("dso-selectable", { key: 'f6a6593be437c4bddaad0342061e27f64fce08ee', type: "checkbox", value: "list-button", name: "naam", checked: selected, disabled: this.disabled }, this.label, this.sublabel && h("span", { key: '14ff0ccfe9c54f1a133264435fcdc9fda42a2c97', class: "sr-only" }, " ", this.sublabel), this.subcontentSlot && (h("span", { key: '68b35d92a01ad90522ee630bdc8836e89cb5f134', class: "sr-only" }, this.subcontentPrefix && this.subcontentPrefix + ":", " ", h("span", { key: '9ddaf40939b76068574b42857667c6acf8c1235f', innerHTML: this.subcontentSlot.innerHTML })))), this.sublabel && h("span", { key: 'f1a64f125d1e69d9105093b7fda37d596b4e59c1', class: "dso-sublabel" }, this.sublabel), this.subcontentSlot && (h("div", { key: '6e48a9e6a9911c0a1e6bd8c47ccb54a07bb63ea9', class: "subcontent" }, h("slot", { key: 'dc3e3eb22ee6cf0a165929ea205777f5d2275412', name: "subcontent" })))), this.count !== undefined && this.count > 0 && (h("div", { key: 'c83d39740d933691268167f6bf8c1caf03427320', class: "dso-input-number" }, this.count > 1 && (h(Fragment, { key: '70b5184ffed37bd800054eee6cd075e5e87a3e6d' }, h("dso-icon-button", { key: '9916a89644c6dbef589cc6576ed227100b99c734', label: "Aantal verlagen", variant: "tertiary", icon: "minus-circle", disabled: this.count === Number(this.min) || this.disabled, onDsoClick: (e) => this.stepValue(e, "decrement") }), h("span", { key: 'edf865339b29c1cbd0092e9fbc3f4ee8bb69223a', class: "dso-input-step-counter", "aria-label": "Aantal", "aria-live": "polite" }, this.count))), h("dso-icon-button", { key: '847465aa1ce444b5c158075539931d244d0efdaa', label: "Aantal verhogen", variant: "tertiary", icon: "plus-circle", disabled: this.count === Number(this.max) || this.disabled, onDsoClick: (e) => this.stepValue(e, "increment") })))));
     }
     get host() { return this; }
     static get style() { return listButtonCss; }

package/dist/components/dso-list-button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"dso-list-button.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n dso-selectable:not(:last-child) {\r\n margin-block-end: 0;\r\n }\r\n\r\n .dso-selectable-container label {\r\n font-weight: 700;\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel,\r\n .subcontent {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: units.$u4;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n page-break-before: always;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n {this.label}\r\n {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <span class=\"sr-only\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n </span>\r\n )}\r\n </dso-selectable>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <div class=\"subcontent\">\r\n <slot name=\"subcontent\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <Fragment>\r\n <dso-icon-button\r\n label=\"Aantal verlagen\"\r\n variant=\"tertiary\"\r\n icon=\"minus-circle\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onDsoClick={(e) => this.stepValue(e, \"decrement\")}\r\n />\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </Fragment>\r\n )}\r\n\r\n <dso-icon-button\r\n label=\"Aantal verhogen\"\r\n variant=\"tertiary\"\r\n icon=\"plus-circle\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onDsoClick={(e) => this.stepValue(e, \"increment\")}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}
1	+ {"file":"dso-list-button.js","mappings":"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","names":["__stencil_proxyCustomElement"],"sources":["src/components/list-button/list-button.scss?tag=dso-list-button&encapsulation=shadow","src/components/list-button/list-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"list-button.variables\" as list-button-variables;\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _state-styling($background-color: inherit, $border-color: inherit, $color: inherit) {\r\n & {\r\n background-color: $background-color;\r\n border-color: $border-color;\r\n color: $color;\r\n }\r\n}\r\n\r\n:host {\r\n display: block;\r\n}\r\n\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-tertiary {\r\n @include button.tertiary($modifiers: false);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n cursor: pointer;\r\n }\r\n}\r\n\r\n.dso-input-number {\r\n align-items: center;\r\n display: flex;\r\n\r\n .dso-input-step-counter {\r\n text-align: center;\r\n inline-size: units.$ru3;\r\n font-size: list-button-variables.$font-size-count;\r\n }\r\n}\r\n\r\n.dso-button-group {\r\n display: flex;\r\n flex-direction: row;\r\n\r\n &.dso-disabled {\r\n > * {\r\n @include _state-styling(colors.$wit, colors.$grijs-10, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n pointer-events: none;\r\n }\r\n }\r\n }\r\n\r\n > * {\r\n border-radius: 0;\r\n\r\n &:first-child {\r\n border-radius: list-button-variables.$border-radius 0 0 list-button-variables.$border-radius;\r\n }\r\n\r\n &:not(:first-child) {\r\n border-inline-start-style: none !important;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 list-button-variables.$border-radius list-button-variables.$border-radius 0;\r\n }\r\n\r\n &:only-child {\r\n border-radius: list-button-variables.$border-radius;\r\n }\r\n }\r\n\r\n > .dso-input-number {\r\n border-style: solid;\r\n border-width: 1px;\r\n flex-wrap: nowrap;\r\n padding-block: 0;\r\n padding-inline: units.$u2;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n justify-content: center;\r\n }\r\n }\r\n\r\n > :hover + .dso-input-number,\r\n > :focus + .dso-input-number {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n\r\n > .dso-selected + .dso-input-number {\r\n box-shadow:\r\n inset 0 -1px 0 0 button.$secondary-border-color,\r\n inset 0 1px 0 0 button.$secondary-border-color,\r\n inset -1px 0 0 0 button.$secondary-border-color;\r\n\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n > :active + .dso-input-number,\r\n > .active + .dso-input-number {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n > .disabled + .dso-input-number,\r\n > [disabled] + .dso-input-number {\r\n &,\r\n &:hover {\r\n opacity: 1;\r\n\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n }\r\n }\r\n\r\n .dso-list-button {\r\n padding-inline-end: #{units.$u2 - 1};\r\n }\r\n}\r\n\r\n.dso-list-button {\r\n @include button.base($modifiers: false);\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-90);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2977\r\n & {\r\n border-radius: button.$border-radius;\r\n border-width: 1px;\r\n border-style: solid;\r\n font-weight: 600;\r\n padding-block: #{units.$u2 - 1};\r\n padding-inline: #{units.$u2 - 1} #{units.$u6 - 1};\r\n position: relative;\r\n text-align: start;\r\n white-space: normal;\r\n inline-size: 100%;\r\n cursor: pointer;\r\n }\r\n\r\n &:hover,\r\n &:focus {\r\n @include _state-styling(colors.$wit, button.$secondary-border-color, colors.$grijs-90);\r\n }\r\n\r\n &:active,\r\n &.active {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, button.$secondary-hover-background-color, colors.$grijs-90);\r\n }\r\n }\r\n\r\n &.disabled,\r\n &[disabled] {\r\n &,\r\n &:hover {\r\n @include _state-styling(colors.$wit, colors.$grijs-20, colors.$grijs-60);\r\n\r\n // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n & {\r\n opacity: 1;\r\n }\r\n }\r\n }\r\n\r\n dso-selectable:not(:last-child) {\r\n margin-block-end: 0;\r\n }\r\n\r\n .dso-selectable-container label {\r\n font-weight: 700;\r\n }\r\n\r\n &.dso-selected {\r\n border-color: colors.$grasgroen;\r\n border-width: 1px;\r\n box-shadow:\r\n inset 0px 0px 0px 1px colors.$grasgroen,\r\n inset -1px 0px 0px 0px colors.$grasgroen;\r\n\r\n &.dso-single-count {\r\n @media screen and (min-width: media-query-breakpoints.$screen-sm-min) {\r\n border-inline-end: 0;\r\n box-shadow:\r\n colors.$grasgroen 0px 1px 0px 0px inset,\r\n colors.$grasgroen 1px 0px 0px 0px inset,\r\n colors.$grasgroen 0px -1px 0px 0px inset;\r\n }\r\n }\r\n }\r\n\r\n label {\r\n cursor: inherit;\r\n }\r\n\r\n > span {\r\n display: block;\r\n }\r\n\r\n .dso-sublabel,\r\n .subcontent {\r\n font-weight: 400;\r\n inline-size: 100%;\r\n padding-inline-start: units.$u4;\r\n }\r\n\r\n dso-icon {\r\n block-size: units.$u3;\r\n color: colors.$grasgroen;\r\n inset-block-start: #{units.$u2 - 1};\r\n inset-inline-end: #{units.$u2 - 1};\r\n inline-size: units.$u3;\r\n break-before: page;\r\n position: absolute;\r\n }\r\n\r\n @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n &.dso-selected.dso-single-count {\r\n &::after {\r\n inline-size: 0;\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Prop,\r\n forceUpdate,\r\n h,\r\n} from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { ListButtonChangeEvent, ListButtonSelectedEvent } from \"./list-button.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-list-button\",\r\n shadow: true,\r\n styleUrl: \"list-button.scss\",\r\n})\r\nexport class ListButton implements ComponentInterface {\r\n @Element()\r\n host!: HTMLDsoListButtonElement;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private get subcontentSlot() {\r\n return this.host.querySelector<HTMLElement>(\"[slot='subcontent']\");\r\n }\r\n\r\n /\r\n The label of the List Button.\r\n /\r\n @Prop()\r\n label?: string;\r\n\r\n /\r\n The sublabel of the List Button.\r\n /\r\n @Prop()\r\n sublabel?: string;\r\n\r\n /\r\n When defined the count can show on the List Button.\r\n /\r\n @Prop()\r\n count?: number;\r\n\r\n /\r\n The minimum value.\r\n /\r\n @Prop()\r\n min?: string \| number;\r\n\r\n /\r\n The maximum value.\r\n /\r\n @Prop()\r\n max?: string \| number;\r\n\r\n /\r\n Whether the List Button is checked.\r\n /\r\n @Prop({ reflect: true })\r\n checked = false;\r\n\r\n /\r\n Whether the List Button is disabled.\r\n /\r\n @Prop({ reflect: true })\r\n disabled = false;\r\n\r\n /\r\n Prefix to subcontent for the purpose of screenreading.\r\n /\r\n @Prop()\r\n subcontentPrefix?: string;\r\n\r\n /\r\n Emitted when the user changes the count.\r\n /\r\n @Event()\r\n dsoCountChange!: EventEmitter<ListButtonChangeEvent>;\r\n\r\n /\r\n Emitted when the user activates the List Button itself.\r\n \r\n Does not fire when the user activates the count controls.\r\n */\r\n @Event()\r\n dsoSelectedChange!: EventEmitter<ListButtonSelectedEvent>;\r\n\r\n connectedCallback() {\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n }\r\n\r\n componentDidRender(): void {\r\n if (!this.subcontentSlot?.hasAttribute(\"aria-hidden\")) {\r\n this.subcontentSlot?.setAttribute(\"aria-hidden\", \"true\");\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.mutationObserver?.disconnect();\r\n delete this.mutationObserver;\r\n }\r\n\r\n private stepValue(e: Event, direction: \"increment\" \| \"decrement\"): void {\r\n if (typeof this.count === \"number\") {\r\n const newValue = direction === \"increment\" ? this.count + 1 : this.count - 1;\r\n\r\n if (!this.isNewCountValid(newValue)) {\r\n return;\r\n }\r\n\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: newValue,\r\n });\r\n }\r\n }\r\n\r\n private handleSelectClick(e: Event): void {\r\n e.preventDefault();\r\n\r\n if (this.count !== undefined) {\r\n this.dsoCountChange.emit({\r\n originalEvent: e,\r\n count: this.count > 0 ? 0 : 1,\r\n });\r\n\r\n return;\r\n }\r\n\r\n this.dsoSelectedChange.emit({\r\n originalEvent: e,\r\n checked: !this.checked,\r\n });\r\n }\r\n\r\n private isNewCountValid(newValue: number): boolean {\r\n return !(\r\n this.min !== undefined &&\r\n this.max !== undefined &&\r\n (newValue < Number(this.min) \|\| newValue > Number(this.max))\r\n );\r\n }\r\n\r\n render() {\r\n const selected = this.checked \|\| (this.count !== undefined && this.count > 0);\r\n\r\n return (\r\n <div class={clsx([\"dso-button-group\", { \"dso-disabled\": this.disabled }])}>\r\n <div\r\n class={clsx([\"dso-list-button\", { \"dso-selected\": selected, \"dso-single-count\": this.count === 1 }])}\r\n onClick={(e) => this.handleSelectClick(e)}\r\n >\r\n <dso-selectable type=\"checkbox\" value=\"list-button\" name=\"naam\" checked={selected} disabled={this.disabled}>\r\n {this.label}\r\n {this.sublabel && <span class=\"sr-only\"> {this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <span class=\"sr-only\">\r\n {this.subcontentPrefix && this.subcontentPrefix + \":\"}{\" \"}\r\n <span innerHTML={this.subcontentSlot.innerHTML}></span>\r\n </span>\r\n )}\r\n </dso-selectable>\r\n {this.sublabel && <span class=\"dso-sublabel\">{this.sublabel}</span>}\r\n {this.subcontentSlot && (\r\n <div class=\"subcontent\">\r\n <slot name=\"subcontent\" />\r\n </div>\r\n )}\r\n </div>\r\n\r\n {this.count !== undefined && this.count > 0 && (\r\n <div class=\"dso-input-number\">\r\n {this.count > 1 && (\r\n <Fragment>\r\n <dso-icon-button\r\n label=\"Aantal verlagen\"\r\n variant=\"tertiary\"\r\n icon=\"minus-circle\"\r\n disabled={this.count === Number(this.min) \|\| this.disabled}\r\n onDsoClick={(e) => this.stepValue(e, \"decrement\")}\r\n />\r\n <span class=\"dso-input-step-counter\" aria-label=\"Aantal\" aria-live=\"polite\">\r\n {this.count}\r\n </span>\r\n </Fragment>\r\n )}\r\n\r\n <dso-icon-button\r\n label=\"Aantal verhogen\"\r\n variant=\"tertiary\"\r\n icon=\"plus-circle\"\r\n disabled={this.count === Number(this.max) \|\| this.disabled}\r\n onDsoClick={(e) => this.stepValue(e, \"increment\")}\r\n />\r\n </div>\r\n )}\r\n </div>\r\n );\r\n }\r\n}\r\n"],"version":3}

package/dist/components/dso-logo.js CHANGED Viewed

@@ -31,7 +31,7 @@ const Logo = /*@__PURE__*/ proxyCustomElement(class Logo extends HTMLElement {
     }
     render() {
         return (h(Fragment, null, this.logoUrl ? (h("a", { class: "logo-url", href: this.logoUrl, onClick: this.handleLogoClick }, h(DsoLogo$1, { name: this.name }))) : (h(DsoLogo$1, { name: this.name })), this.label &&
-            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '443ca86b8144c0d1a77f4fbe1312135ad76b1124', class: "logo-ribbon" }, this.ribbon)));
+            (!this.labelUrl ? (h("span", { class: "logo-label" }, this.label)) : (h("a", { class: "logo-label-url", href: this.labelUrl, onClick: this.handleLabelClick }, h("span", { class: "logo-label" }, this.label)))), this.ribbon && h("div", { key: '25100f9a1520b25402d3606e13d50d72e4b42147', class: "logo-ribbon" }, this.ribbon)));
     }
     static get style() { return logoCss; }
 }, [257, "dso-logo", {

package/dist/components/dso-map-base-layers.js CHANGED Viewed

@@ -20,7 +20,7 @@ const translations = {
     },
 };
-const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";
+const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(0)}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";
 const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers extends HTMLElement {
     constructor() {
@@ -51,7 +51,7 @@ const MapBaseLayers = /*@__PURE__*/ proxyCustomElement(class MapBaseLayers exten
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: '82499cc4e8f841a055b61a3d380f63273159eff6', class: "form-group dso-radios" }, h("legend", { key: 'bee0a0eb7939f1849ff8c7c28f195d6d0ee4eb46', class: "sr-only" }, "Achtergrond"), h("div", { key: '297074406cd7409f220d0675976cd479124ef801', class: "dso-label-container" }, h("span", { key: '3de870d39e90f5b2c893785f148da982635d4dc5', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: '474555d74316b62427604b6c4c0f697aa09ab675', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: '7a2f2b49ef2ccabe6ebc3e0e5c7ed76c5b72a746', class: "form-group dso-radios" }, h("legend", { key: 'a19b169cc43a70f2e38ceba818bf450952339ff8', class: "sr-only" }, "Achtergrond"), h("div", { key: '64c795570bab8cb5b3992edc2dac4dd6569a5f11', class: "dso-label-container" }, h("span", { key: '1824e0e617af0ef91df2bdf978bbf16645038a62', class: "control-label", "aria-hidden": "true" }, this.text("background"))), h("div", { key: 'f5d41837ed502d2adea72f7ddaebf01f499ef251', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
     get host() { return this; }
     static get style() { return mapBaseLayersCss; }