@dso-toolkit/core 54.2.1 → 55.0.0

package/dist/cjs/dso-map-overlays.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-map-overlays.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4WAA4W;;MCYtX,WAAW;;;;IAEd,mBAAc,GAA+C,EAAE,CAAC;iBAMhEA,KAAM,EAAE;;;EAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;IAClF,MAAM,OAAO,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,YAAY,gBAAgB,GAAG,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,OAAO,GAAG,KAAK,CAAC;IAEhG,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;GAClD;EAED,kBAAkB;IAChB,IAAI,CAAC,QAAQ;OACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;OAClG,OAAO,CAAC,CAAC,CAAC;;MACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;KAC9C,CAAC,CAAC;IAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;GACvC;EAED,MAAM;IACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;MACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;KACjC;IAED,QACEC,sBAAU,KAAK,EAAC,2BAA2B,IACzCA,oBAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3CA,iBAAK,KAAK,EAAC,qBAAqB,IAC9BA,kBAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACNA,iBAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzBA,4BACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAGA,eAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;GACH;;;;;;","names":["uuidv4","h"],"sources":["./src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","./src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const checked = e.detail.target instanceof HTMLInputElement ? !!e.detail.target.checked : false;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-modal.cjs.entry.js

@@ -2,12 +2,12 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index = require('./index-efc2222e.js');
 const focusTrap_esm = require('./focus-trap.esm-a5b7273f.js');
 const v4 = require('./v4-abb5dc0c.js');
 require('./index.esm-0e935715.js');
 
-const modalCss = "@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;margin-top:15vh;margin-left:auto;margin-right:auto;max-width:640px;opacity:1;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4)}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal .dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal .dso-body p{margin:0 0 16px}.dso-modal .dso-body ul,.dso-modal .dso-body ol{margin-bottom:16px}.dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal .dso-body pre{margin:0 0 16px}.dso-modal .dso-body blockquote{padding:16px 24px}.dso-modal .dso-body dso-highlight-box,.dso-modal .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:0 32px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes slideInFromTop{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{bottom:0;height:100%;left:0;position:fixed;right:0;top:0;z-index:530}.dso-modal .dso-dialog{animation:1s ease-out 0s 1 slideInFromTop;background-color:#fff;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);margin-left:auto;margin-right:auto;margin-top:clamp(40px, 15vh, 15vh);max-width:640px;opacity:1}.dso-modal .dso-header{border-bottom:1px solid #ccc;padding:16px;position:relative}.dso-modal .dso-header h2{color:#275937;margin:0;max-width:calc(100% - 24px)}.dso-modal .dso-header .dso-close{background-color:transparent;border:0;height:32px;padding:0;position:absolute;right:13px;text-align:center;top:16px;width:32px}.dso-modal>.dso-dialog>.dso-body{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{height:calc(100% - 96px - 1.5rem);max-height:calc(70vh - 144px - 1.5em);min-height:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-footer{min-height:80px;padding:16px 32px;text-align:right}@media screen and (max-width: 767px){.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.btn-default,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.btn-default,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.btn-default,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.btn-default{margin-left:16px}.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .btn+.btn-link,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn-link,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn-link,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn-link{margin-left:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-width:100%;margin-top:0}.dso-modal .dso-footer .btn+.btn,.dso-modal .dso-footer .btn+.dso-primary,.dso-modal .dso-footer .btn+.dso-secondary,.dso-modal .dso-footer .btn+.dso-tertiary,.dso-modal .dso-footer .dso-primary+.btn,.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.btn,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.btn,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-left:0}.dso-modal .dso-footer button{text-align:center;width:100%}.dso-modal .dso-footer button+button{margin-top:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span,.dso-modal .dso-footer button.btn-link,.dso-modal .dso-footer button.btn-link span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{margin-bottom:8px;margin-top:8px;min-height:216px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{top:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-height:auto;overflow:auto;padding:8px 32px}}.dso-modal-overlay{background-color:rgba(255, 255, 255, 0.8);bottom:0;display:block;left:0;position:fixed;right:0;top:0;z-index:529}.dso-close dso-icon{color:#39870c}";
 
 const Modal = class {
   constructor(hostRef) {
@@ -33,7 +33,7 @@ const Modal = class {
   }
   render() {
     var _a;
-    return (index.h(index.Fragment, null, index.h("div", { class: "dso-modal-overlay" }), index.h("div", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, index.h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("div", { class: "dso-body", tabIndex: 0 }, index.h("slot", { name: "body" })), this.hasFooter && (index.h("div", { class: "dso-footer" }, index.h("slot", { name: "footer" })))))));
+    return (index.h(index.Fragment, null, index.h("div", { class: "dso-modal-overlay" }), index.h("div", { class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.modalElement = element) }, index.h("div", { class: "dso-dialog", role: "document", ref: (element) => (this.dialogElement = element) }, this.modalTitle ? (index.h("div", { class: "dso-header" }, index.h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (index.h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, index.h("dso-icon", { icon: "times" }), index.h("span", { class: "sr-only" }, "Sluiten"))))) : (index.h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), index.h("dso-scrollable", null, index.h("div", { class: "dso-body", tabIndex: 0 }, index.h("slot", { name: "body" }))), this.hasFooter && (index.h("div", { class: "dso-footer" }, index.h("slot", { name: "footer" })))))));
   }
   setFocusTrap() {
     if (this.dialogElement && !this.trap) {
@@ -75,3 +75,5 @@ const Modal = class {
 Modal.style = modalCss;
 
 exports.dso_modal = Modal;
+
+//# sourceMappingURL=dso-modal.cjs.entry.js.map

package/dist/cjs/dso-modal.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-modal.entry.cjs.js","mappings":"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","names":["v4","h","Fragment","createFocusTrap"],"sources":["./src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","./src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-modal-overlay {\r\n  @include modal.overlay();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State } from \"@stencil/core\";\r\nimport { createFocusTrap, FocusTargetValueOrFalse, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { DsoModalCloseEvent } from \"./modal.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private trap?: FocusTrap;\r\n\r\n  private dialogElement?: HTMLDivElement;\r\n\r\n  private modalElement?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  @State()\r\n  hasFooter?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  /**\r\n   * Selector used to query the element which will be focused when the component instantiated. When undefined the modal focuses the first button.dso-primary in the modal footer. If no button can be found the close button is focused.\r\n   */\r\n  @Prop()\r\n  initialFocus?: string;\r\n\r\n  /**\r\n   * Function that returns the element to focus on Modal close. Return `false` for no focus restore.\r\n   */\r\n  @Prop()\r\n  returnFocus?: (nodeFocusedBeforeActivation: HTMLElement | SVGElement) => FocusTargetValueOrFalse;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<DsoModalCloseEvent>;\r\n\r\n  componentWillLoad(): void {\r\n    this.hasFooter = this.host.querySelector(\"*[slot = 'footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.trap?.deactivate({ onDeactivate: () => undefined }); // override FocusTrap onDeactivate callback to avoid double event emits\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <div class=\"dso-modal-overlay\"></div>\r\n        <div\r\n          class=\"dso-modal\"\r\n          role={this.role ?? undefined}\r\n          aria-modal=\"true\"\r\n          aria-labelledby={this.ariaId}\r\n          ref={(element) => (this.modalElement = element)}\r\n        >\r\n          <div class=\"dso-dialog\" role=\"document\" ref={(element) => (this.dialogElement = element)}>\r\n            {this.modalTitle ? (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n                {this.showCloseButton && (\r\n                  <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                    <dso-icon icon=\"times\"></dso-icon>\r\n                    <span class=\"sr-only\">Sluiten</span>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            ) : (\r\n              <span class=\"sr-only\" id={this.ariaId}>\r\n                Dialoog\r\n              </span>\r\n            )}\r\n\r\n            <dso-scrollable>\r\n              <div class=\"dso-body\" tabIndex={0}>\r\n                <slot name=\"body\" />\r\n              </div>\r\n            </dso-scrollable>\r\n\r\n            {this.hasFooter && (\r\n              <div class=\"dso-footer\">\r\n                <slot name=\"footer\" />\r\n              </div>\r\n            )}\r\n          </div>\r\n        </div>\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.dialogElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.dialogElement, {\r\n        initialFocus: () => {\r\n          if (this.initialFocus) {\r\n            const initialFocusElement = this.host.querySelector<HTMLElement>(this.initialFocus);\r\n            if (!initialFocusElement) {\r\n              console.warn(`element '${this.initialFocus}' could not be found`);\r\n            } else {\r\n              return initialFocusElement;\r\n            }\r\n          }\r\n\r\n          return (\r\n            this.host.querySelector<HTMLButtonElement>(\"div[slot='footer'] .dso-primary\") ??\r\n            this.modalElement?.querySelector<HTMLButtonElement>(\".dso-close\") ??\r\n            false\r\n          );\r\n        },\r\n        allowOutsideClick: true,\r\n        setReturnFocus: (e) => this.returnFocus?.(e) ?? e,\r\n        escapeDeactivates: true,\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.modalElement) {\r\n            return true;\r\n          }\r\n\r\n          return false;\r\n        },\r\n        onDeactivate: () => {\r\n          delete this.trap;\r\n\r\n          this.dsoClose.emit({ originalEvent: undefined });\r\n        },\r\n      }).activate();\r\n    }\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-ozon-content.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index = require('./index-efc2222e.js');
 const index_esm = require('./index.esm-0e935715.js');
 const clsx_m = require('./clsx.m-b81c6b86.js');
 const v4 = require('./v4-abb5dc0c.js');
@@ -22,8 +22,8 @@ class OzonContentAlNode {
     this.name = "Al";
   }
   render(node, { mapNodeToJsx, path }) {
-    const nestedAl = path.some((node) => {
-      const nodeName = getNodeName(node);
+    const nestedAl = path.some((n) => {
+      const nodeName = getNodeName(n);
       return nodeName === "Al" || nodeName === "Opschrift";
     });
     const content = mapNodeToJsx(node.childNodes);
@@ -466,9 +466,7 @@ class Mapper {
     }
     const identity = (_a = mapper.identify) === null || _a === void 0 ? void 0 : _a.call(mapper, node);
     const state = identity ? context.state[identity] : undefined;
-    const setState = identity
-      ? (state) => context.setState(Object.assign(Object.assign({}, context.state), { [identity]: state }))
-      : undefined;
+    const setState = identity ? (s) => context.setState(Object.assign(Object.assign({}, context.state), { [identity]: s })) : undefined;
     return mapper.render(node, {
       mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),
       emitAnchorClick: context.emitAnchorClick,
@@ -505,7 +503,9 @@ const OzonContent = class {
     if (this.interactive !== "" && !this.interactive) {
       return;
     }
-    const doIt = e.composedPath().find((e) => e === this.host || (e instanceof HTMLElement && index_esm.isTabbable(e))) === this.host;
+    const doIt = e
+      .composedPath()
+      .find((eventTarget) => eventTarget === this.host || (eventTarget instanceof HTMLElement && index_esm.isTabbable(eventTarget))) === this.host;
     if (doIt) {
       this.dsoClick.emit({ originalEvent: e });
     }
@@ -528,3 +528,5 @@ const OzonContent = class {
 OzonContent.style = ozonContentCss;
 
 exports.dso_ozon_content = OzonContent;
+
+//# sourceMappingURL=dso-ozon-content.cjs.entry.js.map

package/dist/cjs/dso-ozon-content.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-ozon-content.entry.cjs.js","mappings":"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","names":["h","Fragment","uuidv4","clsx","isTabbable","Host"],"sources":["./src/components/ozon-content/get-node-name.function.ts","./src/components/ozon-content/nodes/al.node.tsx","./src/components/ozon-content/nodes/bron.node.tsx","./src/components/ozon-content/nodes/document.node.tsx","./src/components/ozon-content/nodes/ext-ref.node.tsx","./src/components/ozon-content/nodes/fallback.node.tsx","./src/components/ozon-content/nodes/figuur.node.tsx","./src/components/ozon-content/nodes/inhoud.node.tsx","./src/components/ozon-content/nodes/inline-tekst-afbeelding.node.tsx","./src/components/ozon-content/nodes/inline.nodes.tsx","./src/components/ozon-content/nodes/int-io-ref.node.tsx","./src/components/ozon-content/nodes/int-ref.node.tsx","./src/components/ozon-content/nodes/lijst.node.tsx","./src/components/ozon-content/nodes/nieuwe-tekst.node.tsx","./src/components/ozon-content/nodes/noot.node.tsx","./src/components/ozon-content/nodes/opschrift.node.tsx","./src/components/ozon-content/nodes/table.node/colspec/colspec-mapper.ts","./src/components/ozon-content/nodes/table.node/table-colgroup.tsx","./src/components/ozon-content/nodes/table.node/table-cell.tsx","./src/components/ozon-content/nodes/table.node/table-rows.tsx","./src/components/ozon-content/nodes/table.node/table.node.tsx","./src/components/ozon-content/nodes/text.node.tsx","./src/components/ozon-content/nodes/verwijderde-tekst.node.tsx","./src/components/ozon-content/ozon-content-mapper.tsx","./src/components/ozon-content/ozon-content.scss?tag=dso-ozon-content&encapsulation=scoped","./src/components/ozon-content/ozon-content.tsx"],"sourcesContent":["export function getNodeName(node: Node): string {\r\n  if (node instanceof Element) {\r\n    return node.localName;\r\n  }\r\n\r\n  if (node.nodeName.includes(\":\")) {\r\n    return node.nodeName.substring(node.nodeName.indexOf(\":\") + 1);\r\n  }\r\n\r\n  return node.nodeName;\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentAlNode implements OzonContentNode {\r\n  name = \"Al\";\r\n\r\n  render(node: Element, { mapNodeToJsx, path }: OzonContentNodeContext) {\r\n    const nestedAl = path.some((n) => {\r\n      const nodeName = getNodeName(n);\r\n\r\n      return nodeName === \"Al\" || nodeName === \"Opschrift\";\r\n    });\r\n\r\n    const content = mapNodeToJsx(node.childNodes);\r\n\r\n    return nestedAl ? <span role=\"paragraph\">{content}</span> : <p>{content}</p>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentBronNode implements OzonContentNode {\r\n  name = \"Bron\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <span class=\"dso-ozon-bron\">{mapNodeToJsx(node.childNodes)}</span>;\r\n  }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentDocumentNode implements OzonContentNode {\r\n  name = \"#document\";\r\n\r\n  render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentExtRefNode implements OzonContentNode {\r\n  name = [\"ExtRef\", \"ExtIoRef\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const href = node.tagName === \"ExtIoRef\" ? node.getAttribute(\"href\") : node.getAttribute(\"ref\");\r\n\r\n    return (\r\n      <a target=\"_blank\" rel=\"noopener noreferrer\" href={href ?? undefined}>\r\n        <span class=\"sr-only\">opent in nieuw venster </span>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentFallbackNode implements OzonContentNode {\r\n  // This name does not match any elements\r\n  name = [\"<fallback>\"];\r\n\r\n  render(node: Node, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <span class={`fallback od-${getNodeName(node)}`}>{mapNodeToJsx(node.childNodes)}</span>;\r\n  }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\ntype BijschriftProps = {\r\n  bijschrift?: IBijschrift;\r\n  bron?: ChildNode;\r\n  mapNodeToJsx: (node: Node | NodeList | Node[]) => JSX.Element;\r\n};\r\n\r\ninterface IBijschrift {\r\n  inhoud: NodeListOf<ChildNode>;\r\n  locatie: string;\r\n}\r\n\r\nconst Bijschrift = ({ bijschrift, bron, mapNodeToJsx }: BijschriftProps): HTMLSpanElement => {\r\n  return (\r\n    <span class=\"figuur-bijschrift\">\r\n      {bijschrift && bijschrift.inhoud && mapNodeToJsx(bijschrift.inhoud)}\r\n      {bron && (\r\n        <Fragment>\r\n          {`${bijschrift ? \" \" : \"\"}(bron: `}\r\n          {mapNodeToJsx(bron)})\r\n        </Fragment>\r\n      )}\r\n    </span>\r\n  );\r\n};\r\n\r\nexport class OzonContentFiguurNode implements OzonContentNode {\r\n  name = [\"Figuur\"];\r\n\r\n  setImageDimensions(imageElement: HTMLImageElement, schaal: number) {\r\n    const { naturalHeight, naturalWidth } = imageElement;\r\n\r\n    imageElement.height = naturalHeight * (schaal / 100);\r\n    imageElement.width = naturalWidth * (schaal / 100);\r\n  }\r\n\r\n  onImageLoad(event: Event, schaal?: number) {\r\n    if (event.target instanceof HTMLImageElement && schaal) {\r\n      this.setImageDimensions(event.target, schaal);\r\n    }\r\n  }\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const childNodes = Array.from(node.childNodes);\r\n    const titel = childNodes.find((n) => getNodeName(n) === \"Titel\")?.textContent;\r\n    const bron = childNodes.find((n) => getNodeName(n) === \"Bron\");\r\n\r\n    const illustratieNode = childNodes.find((n) => getNodeName(n) === \"Illustratie\");\r\n    const bijschriftNode = childNodes.find((n) => getNodeName(n) === \"Bijschrift\");\r\n\r\n    if (illustratieNode instanceof Element) {\r\n      const illustratie = {\r\n        naam: illustratieNode.getAttribute(\"naam\"),\r\n        breedte: illustratieNode.getAttribute(\"breedte\"),\r\n        hoogte: illustratieNode.getAttribute(\"hoogte\"),\r\n        uitlijning: illustratieNode.getAttribute(\"uitlijning\"),\r\n        alt: illustratieNode.getAttribute(\"alt\"),\r\n        schaal: illustratieNode.getAttribute(\"schaal\"),\r\n      };\r\n\r\n      const bijschrift =\r\n        bijschriftNode instanceof Element\r\n          ? {\r\n              inhoud: bijschriftNode.childNodes,\r\n              locatie: bijschriftNode.getAttribute(\"locatie\") ?? \"onder\",\r\n            }\r\n          : undefined;\r\n\r\n      return (\r\n        <div class={`dso-ozon-figuur ${bijschrift ? `bijschrift-${bijschrift.locatie}` : \"onder\"}`}>\r\n          {titel && <span class=\"figuur-titel\">{titel}</span>}\r\n          {bijschrift?.locatie === \"boven\" && (\r\n            <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n          )}\r\n          <dso-image-overlay>\r\n            {titel && (\r\n              <div slot=\"titel\">\r\n                <span>{titel}</span>\r\n              </div>\r\n            )}\r\n            <img\r\n              src={illustratie.naam ?? undefined}\r\n              alt={illustratie.alt ?? titel ?? illustratie.naam ?? undefined}\r\n              onLoad={(event: Event) => this.onImageLoad(event, Number(illustratie.schaal))}\r\n            />\r\n            {(bijschrift || bron) && (\r\n              <div slot=\"bijschrift\">\r\n                <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n              </div>\r\n            )}\r\n          </dso-image-overlay>\r\n          {(bijschrift?.locatie === \"onder\" || (!bijschrift && bron)) && (\r\n            <Bijschrift bijschrift={bijschrift} bron={bron} mapNodeToJsx={mapNodeToJsx} />\r\n          )}\r\n        </div>\r\n      );\r\n    }\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInhoudNode implements OzonContentNode {\r\n  name = [\"Inhoud\", \"ContainerBlocksType\", \"BlockMixedcontentMetMaximaleInlinesMarkersPopupsType\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <div class=\"dso-rich-content\">{mapNodeToJsx(node.childNodes)}</div>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineTekstAfbeeldingNode implements OzonContentNode {\r\n  name = [\"InlineTekstAfbeelding\", \"Illustratie\"];\r\n\r\n  render(node: Element) {\r\n    return (\r\n      <img\r\n        src={node.getAttribute(\"naam\") ?? undefined}\r\n        alt={node.getAttribute(\"naam\") ?? undefined}\r\n        height={node.getAttribute(\"hoogte\") ?? undefined}\r\n        width={node.getAttribute(\"breedte\") ?? undefined}\r\n      />\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentInlineNodes implements OzonContentNode {\r\n  name = [\"sub\", \"sup\", \"strong\", \"b\", \"u\", \"i\", \"br\"];\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    if (node.localName === \"br\") {\r\n      return <br />;\r\n    }\r\n\r\n    const Tag = node.localName;\r\n\r\n    return <Tag>{mapNodeToJsx(node.childNodes)}</Tag>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntIoRefNode implements OzonContentNode {\r\n  name = \"IntIoRef\";\r\n\r\n  render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n    const ref = node.getAttribute(\"ref\");\r\n    if (!ref) {\r\n      return mapNodeToJsx(node.childNodes);\r\n    }\r\n\r\n    const intRefOnClick = (event: MouseEvent) => {\r\n      event.preventDefault();\r\n\r\n      const target = event.currentTarget;\r\n      if (!(target instanceof HTMLAnchorElement)) {\r\n        return;\r\n      }\r\n\r\n      const { href } = target;\r\n\r\n      emitAnchorClick({\r\n        node: this.name,\r\n        href,\r\n        documentComponent: ref,\r\n        originalEvent: event,\r\n      });\r\n    };\r\n\r\n    return (\r\n      <a href={`#${ref}`} onClick={intRefOnClick}>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentIntRefNode implements OzonContentNode {\r\n  name = \"IntRef\";\r\n\r\n  render(node: Element, { mapNodeToJsx, emitAnchorClick }: OzonContentNodeContext) {\r\n    const ref = node.getAttribute(\"ref\");\r\n    if (!ref) {\r\n      return mapNodeToJsx(node.childNodes);\r\n    }\r\n\r\n    const intRefOnClick = (event: MouseEvent) => {\r\n      event.preventDefault();\r\n\r\n      const target = event.currentTarget;\r\n      if (!(target instanceof HTMLAnchorElement)) {\r\n        return;\r\n      }\r\n\r\n      const { href } = target;\r\n\r\n      emitAnchorClick({\r\n        node: this.name,\r\n        href,\r\n        documentComponent: ref,\r\n        originalEvent: event,\r\n      });\r\n    };\r\n\r\n    return (\r\n      <a href={`#${ref}`} onClick={intRefOnClick}>\r\n        {mapNodeToJsx(node.childNodes)}\r\n      </a>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentLijstNode implements OzonContentNode {\r\n  name = \"Lijst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    const childNodes = Array.from(node.childNodes);\r\n    const aanhef = childNodes.find((n) => getNodeName(n) === \"Lijstaanhef\");\r\n    const sluiting = childNodes.find((n) => getNodeName(n) === \"Lijstsluiting\");\r\n    const listItems = childNodes.filter((n) => getNodeName(n) === \"Li\");\r\n\r\n    return (\r\n      <div class=\"dso-ozon-lijst od-Lijst\">\r\n        {aanhef && mapNodeToJsx(aanhef)}\r\n        <ul class={node.getAttribute(\"type\") ?? \"\"}>\r\n          {listItems.map((item) => {\r\n            const itemNodes = Array.from(item.childNodes);\r\n            const liNummer = itemNodes.find((n) => getNodeName(n) === \"LiNummer\")?.childNodes;\r\n\r\n            return (\r\n              <li class=\"od-Li\">\r\n                {liNummer && <span class=\"od-LiNummer\">{mapNodeToJsx(liNummer)}</span>}\r\n                {mapNodeToJsx(itemNodes.filter((n) => getNodeName(n) !== \"LiNummer\"))}\r\n              </li>\r\n            );\r\n          })}\r\n        </ul>\r\n        {sluiting && mapNodeToJsx(sluiting)}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNieuweTekstNode implements OzonContentNode {\r\n  name = \"NieuweTekst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <ins>{mapNodeToJsx(node.childNodes)}</ins>;\r\n  }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentNootNode implements OzonContentNode {\r\n  name = \"Noot\";\r\n\r\n  handles = [\"NootNummer\"];\r\n\r\n  identify(): string | undefined {\r\n    return \"Noot\";\r\n  }\r\n\r\n  render(node: Element, { mapNodeToJsx, state: openNoteId, setState }: OzonContentNodeContext<string | undefined>) {\r\n    const noteId = node.getAttribute(\"id\");\r\n    if (!noteId) {\r\n      console.error(\"Noot node without id\", node);\r\n\r\n      return <Fragment />;\r\n    }\r\n\r\n    const noteControlsId = `dso-ozon-note-${noteId}`;\r\n\r\n    const childNodes = Array.from(node.childNodes);\r\n    const nootNummer = childNodes.find((n) => getNodeName(n) === \"NootNummer\")?.textContent ?? noteId;\r\n\r\n    return (\r\n      <>\r\n        <sup>\r\n          <button\r\n            type=\"button\"\r\n            class=\"toggle-note\"\r\n            aria-describedby={noteControlsId}\r\n            onClick={() => setState?.(openNoteId === noteId ? undefined : noteId)}\r\n            onBlur={() => setState?.(undefined)}\r\n            aria-expanded={openNoteId === noteId ? \"true\" : \"false\"}\r\n          >\r\n            {nootNummer}\r\n          </button>\r\n        </sup>\r\n        <dso-tooltip active={openNoteId === noteId} id={noteControlsId} stateless descriptive>\r\n          <span role=\"section\">{mapNodeToJsx(Array.from(node.querySelectorAll(\":scope > Al\")))}</span>\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n","import { h, Fragment } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentOpschriftNode implements OzonContentNode {\r\n  name = \"Opschrift\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <Fragment>{mapNodeToJsx(node.childNodes)}</Fragment>;\r\n  }\r\n}\r\n","import { Colspecs } from \"./colspec.interface\";\r\n\r\nexport function mapColspecs(count: number, nodeList: NodeListOf<Element>): Colspecs {\r\n  const elements = Array.from(nodeList);\r\n  const totalWidth = getTotalWidth(elements);\r\n\r\n  return {\r\n    totalWidth,\r\n    count,\r\n    columns: elements.map((element, index) => {\r\n      const colNumber = element.getAttribute(\"colnum\");\r\n\r\n      return {\r\n        name: element.getAttribute(\"colname\") ?? \"\",\r\n        number: colNumber ? parseInt(colNumber, 10) : index + 1,\r\n        width: getWidth(totalWidth, element),\r\n      };\r\n    }),\r\n  };\r\n}\r\n\r\nfunction getTotalWidth(elements: Element[]): number {\r\n  return elements.reduce((totalWidth, element) => {\r\n    const width = element.getAttribute(\"colwidth\")?.replace(/[^0-9]/, \"\") ?? \"\";\r\n    const colWidth = parseInt(width, 10);\r\n\r\n    return totalWidth + (isNaN(colWidth) ? 0 : colWidth);\r\n  }, 0);\r\n}\r\n\r\nfunction getWidth(totalWidth: number, element: Element): string | undefined {\r\n  const width = element.getAttribute(\"colwidth\");\r\n\r\n  if (!width) {\r\n    return undefined;\r\n  }\r\n\r\n  if (width === \"*\") {\r\n    return \"100%\";\r\n  }\r\n\r\n  if (width.includes(\"*\") || width.match(/^[\\d+]$/)) {\r\n    const colWidth = parseInt(width.replace(/[^0-9]/, \"\"), 10);\r\n\r\n    return `${Math.round((colWidth / totalWidth) * 100)}%`;\r\n  }\r\n\r\n  return width;\r\n}\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nexport const Colgroup: FunctionalComponent<{ colspecs: Colspecs }> = ({ colspecs }) =>\r\n  colspecs.columns.length > 0 ? (\r\n    <colgroup>\r\n      {colspecs.columns.map((colspec) => (\r\n        <col style={{ width: colspec.width }} />\r\n      ))}\r\n    </colgroup>\r\n  ) : (\r\n    <Fragment />\r\n  );\r\n","import { FunctionalComponent } from \"@stencil/core\";\r\nimport { h, JSXBase } from \"@stencil/core/internal\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\n\r\nfunction getData(cell: Element) {\r\n  return {\r\n    moreRows: cell.getAttribute(\"morerows\"),\r\n    nameStart: cell.getAttribute(\"namest\"),\r\n    nameEnd: cell.getAttribute(\"nameend\"),\r\n  };\r\n}\r\n\r\nfunction getColspan({ columns }: Colspecs, nameStart: string, nameEnd: string): number | undefined {\r\n  const colspecStart = columns.find((c) => c.name === nameStart);\r\n  const colspecEnd = columns.find((c) => c.name === nameEnd);\r\n  if (!colspecStart || !colspecEnd) {\r\n    return undefined;\r\n  }\r\n\r\n  const colspan = colspecEnd.number - colspecStart.number + 1;\r\n\r\n  return colspan === 1 ? undefined : colspan;\r\n}\r\n\r\nexport const Cell: FunctionalComponent<{\r\n  context: OzonContentNodeContext;\r\n  colspecs: Colspecs | undefined;\r\n  cell: Element;\r\n}> = ({ context: { mapNodeToJsx }, colspecs, cell }) => {\r\n  const { moreRows, nameStart, nameEnd } = getData(cell);\r\n\r\n  const td: JSXBase.TdHTMLAttributes<HTMLTableCellElement> = {\r\n    rowSpan: moreRows ? parseInt(moreRows, 10) + 1 : undefined,\r\n    colSpan: colspecs && nameStart && nameEnd ? getColspan(colspecs, nameStart, nameEnd) : undefined,\r\n  };\r\n\r\n  return <td {...td}>{mapNodeToJsx(cell.childNodes)}</td>;\r\n};\r\n","import { Fragment, FunctionalComponent, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\n\r\nimport { Colspecs } from \"./colspec/colspec.interface\";\r\nimport { Cell } from \"./table-cell\";\r\n\r\nexport const Rows: FunctionalComponent<{\r\n  context: OzonContentNodeContext;\r\n  colspecs: Colspecs | undefined;\r\n  rows: Element[];\r\n}> = ({ context, colspecs, rows }) => {\r\n  return (\r\n    <>\r\n      {rows.map((row) => (\r\n        <tr>\r\n          {Array.from(row.children).map((cell) => (\r\n            <Cell cell={cell} colspecs={colspecs} context={context} />\r\n          ))}\r\n        </tr>\r\n      ))}\r\n    </>\r\n  );\r\n};\r\n","import { h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getNodeName } from \"../../get-node-name.function\";\r\nimport { OzonContentNodeContext } from \"../../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../../ozon-content-node.interface\";\r\n\r\nimport { mapColspecs } from \"./colspec/colspec-mapper\";\r\nimport { Colgroup } from \"./table-colgroup\";\r\nimport { Rows } from \"./table-rows\";\r\n\r\nfunction mapData(node: Element) {\r\n  const tgroup = node.querySelector(\":scope > tgroup\");\r\n  const colAttribute = tgroup?.getAttribute(\"cols\") ?? undefined;\r\n  const columnCount = colAttribute ? parseInt(colAttribute, 10) : undefined;\r\n\r\n  return {\r\n    caption: node.querySelector(\":scope > title\")?.textContent ?? undefined,\r\n    colspecs: tgroup && columnCount ? mapColspecs(columnCount, tgroup.querySelectorAll(\":scope > colspec\")) : undefined,\r\n    headRows: Array.from(node.querySelectorAll(\":scope > tgroup > thead > row\")),\r\n    bodyRows: Array.from(node.querySelectorAll(\":scope > tgroup > tbody > row\")),\r\n    editAction: node.getAttribute(\"wijzigactie\"),\r\n  };\r\n}\r\n\r\nexport class OzonContentTableNode implements OzonContentNode {\r\n  name = \"table\";\r\n\r\n  handles = [\"title\", \"tgroup\", \"colspec\", \"thead\", \"tbody\", \"row\", \"cell\"];\r\n\r\n  id = uuidv4();\r\n\r\n  render(node: Element, context: OzonContentNodeContext) {\r\n    const { caption, colspecs, headRows, bodyRows, editAction } = mapData(node);\r\n\r\n    const bron = Array.from(node.childNodes).find((n) => getNodeName(n) === \"Bron\");\r\n\r\n    return (\r\n      <dso-table>\r\n        <table\r\n          class={clsx(\"table dso-table-vertical-lines\", {\r\n            \"dso-del\": editAction === \"verwijder\",\r\n            \"dso-ins\": editAction === \"voegtoe\",\r\n          })}\r\n          {...(bron ? { \"aria-describedby\": this.id } : {})}\r\n        >\r\n          {caption && <caption>{caption}</caption>}\r\n          {colspecs && <Colgroup colspecs={colspecs} />}\r\n          {headRows.length > 0 && (\r\n            <thead>\r\n              <Rows rows={headRows} colspecs={colspecs} context={context}></Rows>\r\n            </thead>\r\n          )}\r\n          {bodyRows.length > 0 && (\r\n            <tbody>\r\n              <Rows rows={bodyRows} colspecs={colspecs} context={context}></Rows>\r\n            </tbody>\r\n          )}\r\n        </table>\r\n        {bron && <div id={this.id}>{context.mapNodeToJsx(bron)}</div>}\r\n      </dso-table>\r\n    );\r\n  }\r\n}\r\n","import { Fragment, h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentTextNode implements OzonContentNode {\r\n  name = \"#text\";\r\n\r\n  render(node: Node) {\r\n    return <Fragment>{node.textContent}</Fragment>;\r\n  }\r\n}\r\n","import { h } from \"@stencil/core\";\r\n\r\nimport { OzonContentNodeContext } from \"../ozon-content-node-context.interface\";\r\nimport { OzonContentNode } from \"../ozon-content-node.interface\";\r\n\r\nexport class OzonContentVerwijderdeTekstNode implements OzonContentNode {\r\n  name = \"VerwijderdeTekst\";\r\n\r\n  render(node: Element, { mapNodeToJsx }: OzonContentNodeContext) {\r\n    return <del>{mapNodeToJsx(node.childNodes)}</del>;\r\n  }\r\n}\r\n","import { Fragment, h, JSX } from \"@stencil/core\";\r\n\r\nimport { getNodeName } from \"./get-node-name.function\";\r\nimport { OzonContentAlNode } from \"./nodes/al.node\";\r\nimport { OzonContentBronNode } from \"./nodes/bron.node\";\r\nimport { OzonContentDocumentNode } from \"./nodes/document.node\";\r\nimport { OzonContentExtRefNode } from \"./nodes/ext-ref.node\";\r\nimport { OzonContentFallbackNode } from \"./nodes/fallback.node\";\r\nimport { OzonContentFiguurNode } from \"./nodes/figuur.node\";\r\nimport { OzonContentInhoudNode } from \"./nodes/inhoud.node\";\r\nimport { OzonContentInlineTekstAfbeeldingNode } from \"./nodes/inline-tekst-afbeelding.node\";\r\nimport { OzonContentInlineNodes } from \"./nodes/inline.nodes\";\r\nimport { OzonContentIntIoRefNode } from \"./nodes/int-io-ref.node\";\r\nimport { OzonContentIntRefNode } from \"./nodes/int-ref.node\";\r\nimport { OzonContentLijstNode } from \"./nodes/lijst.node\";\r\nimport { OzonContentNieuweTekstNode } from \"./nodes/nieuwe-tekst.node\";\r\nimport { OzonContentNootNode } from \"./nodes/noot.node\";\r\nimport { OzonContentOpschriftNode } from \"./nodes/opschrift.node\";\r\nimport { OzonContentTableNode } from \"./nodes/table.node\";\r\nimport { OzonContentTextNode } from \"./nodes/text.node\";\r\nimport { OzonContentVerwijderdeTekstNode } from \"./nodes/verwijderde-tekst.node\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentNode } from \"./ozon-content-node.interface\";\r\n\r\nexport class Mapper {\r\n  private cache: { xml: string; document: Document } | undefined;\r\n\r\n  private mappers: OzonContentNode[] = [\r\n    new OzonContentTextNode(),\r\n    new OzonContentDocumentNode(),\r\n    new OzonContentInhoudNode(),\r\n    new OzonContentOpschriftNode(),\r\n    new OzonContentIntRefNode(),\r\n    new OzonContentExtRefNode(),\r\n    new OzonContentAlNode(),\r\n    new OzonContentInlineNodes(),\r\n    new OzonContentInlineTekstAfbeeldingNode(),\r\n    new OzonContentNootNode(),\r\n    new OzonContentTableNode(),\r\n    new OzonContentIntIoRefNode(),\r\n    new OzonContentFiguurNode(),\r\n    new OzonContentLijstNode(),\r\n    new OzonContentBronNode(),\r\n    new OzonContentNieuweTekstNode(),\r\n    new OzonContentVerwijderdeTekstNode(),\r\n  ];\r\n\r\n  private skip = this.mappers.reduce<string[]>((t, m) => {\r\n    if (m.handles) {\r\n      t.push(...m.handles);\r\n    }\r\n\r\n    return t;\r\n  }, []);\r\n\r\n  private fallbackNode = new OzonContentFallbackNode();\r\n\r\n  private domParser = new DOMParser();\r\n\r\n  private findMapper(name: string): OzonContentNode | undefined {\r\n    if (this.skip.includes(name)) {\r\n      return undefined;\r\n    }\r\n\r\n    return (\r\n      this.mappers.find((m) => {\r\n        if (Array.isArray(m.name)) {\r\n          return m.name.includes(name);\r\n        }\r\n\r\n        return m.name === name;\r\n      }) ?? this.fallbackNode\r\n    );\r\n  }\r\n\r\n  mapNodeToJsx(node: Node | Node[] | NodeList, context: OzonContentContext, path: Node[]): JSX.Element {\r\n    if (node instanceof NodeList) {\r\n      return <Fragment>{Array.from(node).map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n    }\r\n\r\n    if (Array.isArray(node)) {\r\n      return <Fragment>{node.map((n) => this.mapNodeToJsx(n, context, path))}</Fragment>;\r\n    }\r\n\r\n    const nodeName = getNodeName(node);\r\n    const mapper = this.findMapper(nodeName);\r\n    if (!mapper) {\r\n      return <Fragment />;\r\n    }\r\n\r\n    const identity = mapper.identify?.(node);\r\n\r\n    const state = identity ? context.state[identity] : undefined;\r\n    const setState = identity ? (s: unknown) => context.setState({ ...context.state, [identity]: s }) : undefined;\r\n\r\n    return mapper.render(node, {\r\n      mapNodeToJsx: (n) => this.mapNodeToJsx(n, context, [...path, node]),\r\n      emitAnchorClick: context.emitAnchorClick,\r\n      setState,\r\n      state,\r\n      path,\r\n    });\r\n  }\r\n\r\n  transform(xml: string, context: OzonContentContext): JSX.Element {\r\n    if (!this.cache || this.cache.xml !== xml) {\r\n      this.cache = { xml, document: this.domParser.parseFromString(xml, \"text/xml\") };\r\n    }\r\n\r\n    const xmlDocument = this.cache.document;\r\n\r\n    return this.mapNodeToJsx(xmlDocument.getRootNode(), context, []);\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/components/anchor\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert/insert\";\r\n\r\n:host(:not([inline])) {\r\n  display: block;\r\n}\r\n\r\n:host([inline]) {\r\n  display: inline;\r\n}\r\n\r\n:host([deleted]) {\r\n  * {\r\n    text-decoration: line-through !important;\r\n  }\r\n}\r\n\r\n:host([interactive]) {\r\n  @include anchor.root($is-html-a-element: false);\r\n\r\n  color: colors.$bosgroen;\r\n  font-weight: 600;\r\n  text-decoration: none;\r\n}\r\n\r\n:host([interactive=\"sub\"]) {\r\n  color: colors.$grijs-90;\r\n}\r\n\r\n.deleted-start,\r\n.deleted-end {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton.toggle-note {\r\n  @include button.tertiary($modifiers: false);\r\n}\r\n\r\nspan[role=\"section\"],\r\nspan[role=\"paragraph\"] {\r\n  display: block;\r\n}\r\n\r\n.fallback {\r\n  display: block;\r\n}\r\n\r\n// Styling below copied from DSO Viewer 20211011\r\n\r\n.od-Term {\r\n  font-weight: 700;\r\n}\r\n\r\n.od-Definitie,\r\n.od-Tussenkop {\r\n  font-style: italic;\r\n}\r\n\r\n.od-Inhoud,\r\n.od-Inhoud > .od-Lijst,\r\n.od-IntIoRef,\r\n.od-Lidnr,\r\n.od-LiNr,\r\n.od-Opschrift,\r\n.od-Tussenkop {\r\n  display: inline;\r\n}\r\n\r\n.od-Al {\r\n  margin-bottom: 0.75em;\r\n}\r\n\r\n.od-IntIoRef {\r\n  border-bottom: 1px dotted;\r\n}\r\n\r\n.dso-ozon-bron {\r\n  font-style: italic;\r\n  font-size: 0.75rem;\r\n}\r\n\r\n.dso-ozon-figuur {\r\n  margin-bottom: units.$u2;\r\n\r\n  .figuur-bijschrift {\r\n    display: block;\r\n    font-size: 0.75rem;\r\n    font-style: italic;\r\n  }\r\n\r\n  &.bijschrift-boven {\r\n    .figuur-bijschrift {\r\n      padding-bottom: 0.25rem;\r\n    }\r\n  }\r\n\r\n  &.bijschrift-onder {\r\n    .figuur-bijschrift {\r\n      padding-top: 0.25rem;\r\n    }\r\n  }\r\n\r\n  .figuur-titel {\r\n    color: colors.$mauve;\r\n    display: block;\r\n    font-weight: 500;\r\n    padding-bottom: 0.5rem;\r\n  }\r\n}\r\n\r\n.dso-ozon-lijst {\r\n  span.od-Lijstaanhef,\r\n  span.od-Lijstsluiting {\r\n    margin-bottom: units.$ru2;\r\n  }\r\n\r\n  ul {\r\n    &.expliciet {\r\n      list-style: none;\r\n\r\n      > .od-Li {\r\n        position: relative;\r\n\r\n        > span.od-LiNummer {\r\n          position: absolute;\r\n          left: units.$u6 * -1 + 4;\r\n          text-align: right;\r\n          width: units.$u5;\r\n        }\r\n      }\r\n    }\r\n  }\r\n}\r\n\r\n.od-Tabel thead {\r\n  font-weight: 600;\r\n}\r\n\r\n.od-Kadertekst {\r\n  border: 1px solid #e5e5e5;\r\n  margin-bottom: 1rem;\r\n  padding: 1rem;\r\n}\r\n\r\n.dso-del {\r\n  background-color: colors.$danger-bg-color;\r\n  color: colors.$zwart;\r\n  text-decoration: line-through;\r\n\r\n  a {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n\r\n.dso-ins {\r\n  background-color: colors.$success-bg-color;\r\n  box-shadow: insert.$insert-box-shadow;\r\n  color: colors.$zwart;\r\n\r\n  a {\r\n    color: colors.$zwart;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State, Host, JSX } from \"@stencil/core\";\r\nimport { isTabbable } from \"tabbable\";\r\n\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { OzonContentAnchorClick, OzonContentClick } from \"./ozon-content.interfaces\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  scoped: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content: string | undefined;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * Marks content as deleted using visual and accessible clues.\r\n   */\r\n  @Prop({ reflect: true })\r\n  deleted = false;\r\n\r\n  /**\r\n   * Visualize the component as interactive. This means that the component will emit `dsoClick` events when the user clicks non-interactive elements.\r\n   *\r\n   * **Do not** use this without an accessible companion element! `interactive` is only\r\n   * meant to ease the use of the companion element for mouse/touch users.\r\n   *\r\n   * * `true`: Interactive anchor-look-alike\r\n   * * `\"sub\"`: Interactive anchor-look-alike for sub navigation\r\n   * * `false | undefined`: Disabled\r\n   */\r\n  @Prop({ reflect: true })\r\n  interactive: \"sub\" | \"\" | boolean = false;\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  /**\r\n   * Emitted when `<a>` is clicked.\r\n   */\r\n  @Event()\r\n  dsoAnchorClick!: EventEmitter<OzonContentAnchorClick>;\r\n\r\n  /**\r\n   * These events are only emitted when the component is `interactive`.\r\n   */\r\n  @Event()\r\n  dsoClick!: EventEmitter<OzonContentClick>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoOzonContentElement;\r\n\r\n  private mapper = new Mapper();\r\n\r\n  private handleHostOnClick(e: UIEvent) {\r\n    // '' is `true`: <dso-ozon-content interactive>\r\n    if (this.interactive !== \"\" && !this.interactive) {\r\n      return;\r\n    }\r\n\r\n    const doIt =\r\n      e\r\n        .composedPath()\r\n        .find(\r\n          (eventTarget) => eventTarget === this.host || (eventTarget instanceof HTMLElement && isTabbable(eventTarget))\r\n        ) === this.host;\r\n\r\n    if (doIt) {\r\n      this.dsoClick.emit({ originalEvent: e });\r\n    }\r\n  }\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      setState: (state) => (this.state = state),\r\n      emitAnchorClick: this.dsoAnchorClick.emit,\r\n    };\r\n\r\n    const transformed = this.mapper.transform(this.content ?? \"\", context);\r\n\r\n    if (this.deleted) {\r\n      return (\r\n        <section>\r\n          <slot name=\"prefix\" />\r\n          <span class=\"deleted-start\">Begin verwijderd element</span>\r\n          {transformed}\r\n          <span class=\"deleted-end\">Einde verwijderd element</span>\r\n          <slot name=\"suffix\" />\r\n        </section>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={(e: UIEvent) => this.handleHostOnClick(e)}>\r\n        <slot name=\"prefix\" />\r\n        {transformed}\r\n        <slot name=\"suffix\" />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-pagination.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index = require('./index-efc2222e.js');
 const isModifiedEvent = require('./is-modified-event-dcab03a0.js');
 
 const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;width:2rem}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:50%}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
@@ -139,3 +139,5 @@ const Pagination = class {
 Pagination.style = paginationCss;
 
 exports.dso_pagination = Pagination;
+
+//# sourceMappingURL=dso-pagination.cjs.entry.js.map

package/dist/cjs/dso-pagination.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-pagination.entry.cjs.js","mappings":"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","names":["isModifiedEvent","h"],"sources":["./src/components/pagination/pagination.scss?tag=dso-pagination&encapsulation=shadow","./src/components/pagination/pagination.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/pagination\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.pagination {\r\n  @include pagination.root();\r\n}\r\n\r\n.dso-page-hidden {\r\n  visibility: hidden;\r\n}\r\n","import {\r\n  h,\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\n\r\nimport { ResponsiveElementSize } from \"../responsive-element/responsive-element.interfaces\";\r\nimport { PaginationSelectPageEvent } from \"./pagination.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-pagination\",\r\n  styleUrl: \"pagination.scss\",\r\n  shadow: true,\r\n})\r\nexport class Pagination implements ComponentInterface {\r\n  private sizePositionsMap: Record<ResponsiveElementSize, number> = {\r\n    small: 7,\r\n    medium: 9,\r\n    large: 11,\r\n  };\r\n\r\n  private responsiveElement?: HTMLDsoResponsiveElementElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoPaginationElement;\r\n\r\n  @State()\r\n  availablePositions?: number;\r\n  /**\r\n   * Total pages\r\n   */\r\n  @Prop()\r\n  totalPages?: number;\r\n\r\n  /**\r\n   * Current page\r\n   */\r\n  @Prop()\r\n  currentPage?: number;\r\n\r\n  /**\r\n   * This function is called to format the href\r\n   */\r\n  @Prop()\r\n  formatHref: (page: number) => string = (page) => \"#\" + page;\r\n\r\n  /**\r\n   * Emitted on page select\r\n   */\r\n  @Event()\r\n  dsoSelectPage!: EventEmitter<PaginationSelectPageEvent>;\r\n\r\n  /**\r\n   * Listens to the dsoSizeChange event on Responsive Element\r\n   */\r\n  @Listen(\"dsoSizeChange\")\r\n  sizeChangeHandler(event: CustomEvent<ResponsiveElementSize>) {\r\n    this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[event.detail]);\r\n  }\r\n\r\n  private clickHandler(e: MouseEvent, page: number) {\r\n    this.dsoSelectPage.emit({\r\n      originalEvent: e,\r\n      page,\r\n      isModifiedEvent: isModifiedEvent(e),\r\n    });\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.responsiveElement\r\n      ?.getSize()\r\n      .then(\r\n        (size: ResponsiveElementSize) =>\r\n          (this.availablePositions = this.getAvailablePositions(this.sizePositionsMap[size]))\r\n      );\r\n  }\r\n\r\n  render() {\r\n    if (!this.totalPages) {\r\n      return null;\r\n    }\r\n\r\n    if (this.availablePositions === undefined) {\r\n      return <dso-responsive-element ref={(element) => (this.responsiveElement = element)}></dso-responsive-element>;\r\n    }\r\n\r\n    const availablePositions = this.availablePositions;\r\n\r\n    const currentPage = this.currentPage ?? 0;\r\n\r\n    const pages: number[] = this.getPages(currentPage, this.availablePositions, this.totalPages);\r\n\r\n    return (\r\n      <dso-responsive-element ref={(element) => (this.responsiveElement = element)}>\r\n        <ul class=\"pagination\">\r\n          <li class={currentPage <= 1 || currentPage > this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n              aria-label=\"Vorige\"\r\n              onClick={(e) => currentPage && this.clickHandler(e, pages[pages.indexOf(currentPage) - 1] ?? 1)}\r\n            >\r\n              <dso-icon icon=\"chevron-left\"></dso-icon>\r\n            </a>\r\n          </li>\r\n          {pages.map((page) => (\r\n            <>\r\n              {this.showEllipsisBeforeLast(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n\r\n              <li key={page} class={currentPage === page ? \"active\" : undefined}>\r\n                {currentPage === page ? (\r\n                  <span aria-current=\"page\">{page}</span>\r\n                ) : (\r\n                  <a href={this.formatHref(page)} onClick={(e) => this.clickHandler(e, page)}>\r\n                    {page}\r\n                  </a>\r\n                )}\r\n              </li>\r\n\r\n              {this.showEllipsisAfterFirst(pages, page, availablePositions) && (\r\n                <li>\r\n                  <span>...</span>\r\n                </li>\r\n              )}\r\n            </>\r\n          ))}\r\n          <li class={currentPage < 1 || currentPage >= this.totalPages ? \"dso-page-hidden\" : undefined}>\r\n            <a\r\n              href={this.formatHref(pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)}\r\n              aria-label=\"Volgende\"\r\n              onClick={(e) =>\r\n                currentPage &&\r\n                this.totalPages &&\r\n                this.clickHandler(e, pages[pages.indexOf(currentPage) + 1] ?? this.totalPages)\r\n              }\r\n            >\r\n              <dso-icon icon=\"chevron-right\"></dso-icon>\r\n            </a>\r\n          </li>\r\n        </ul>\r\n      </dso-responsive-element>\r\n    );\r\n  }\r\n\r\n  private getAvailablePositions(sizePositions: number) {\r\n    if (sizePositions % 2 === 0) {\r\n      // Even aantal posities zorgt voor een scheve pagination\r\n      return sizePositions - 1;\r\n    }\r\n    if (sizePositions <= 3) {\r\n      // Voor het kunnen tonen van de vorige knop, volgende knop en 1 pagina zijn minimaal 3 posities nodig.\r\n      return 3;\r\n    }\r\n\r\n    return sizePositions;\r\n  }\r\n\r\n  private getPages(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    if (totalPages + 2 <= availablePositions) {\r\n      // + 2 voor de vorige en volgende knop\r\n      return Array.from({ length: totalPages }, (_value, i) => i + 1);\r\n    }\r\n\r\n    if (availablePositions === 3) {\r\n      return [currentPage];\r\n    }\r\n\r\n    if (availablePositions === 5) {\r\n      return [1, currentPage, totalPages];\r\n    }\r\n\r\n    return [1, ...this.getPageRange(currentPage, availablePositions, totalPages), totalPages];\r\n  }\r\n\r\n  private getPageRange(currentPage: number, availablePositions: number, totalPages: number): number[] {\r\n    const range: number[] = [];\r\n\r\n    const positionRange = Math.floor(availablePositions / 2);\r\n\r\n    if (currentPage <= positionRange) {\r\n      for (let i = 2; i <= availablePositions - 4; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    if (currentPage >= positionRange && currentPage <= totalPages - positionRange) {\r\n      if (positionRange === 1) {\r\n        if (currentPage > totalPages - 2) {\r\n          range.push(totalPages - 2);\r\n        }\r\n\r\n        range.push(currentPage);\r\n\r\n        if (currentPage < 3) {\r\n          range.push(3);\r\n        }\r\n      }\r\n\r\n      if (positionRange > 1) {\r\n        const pagesBeforeOrAfter = positionRange - 3;\r\n\r\n        for (\r\n          let i = Math.min(currentPage - pagesBeforeOrAfter, totalPages - positionRange);\r\n          i <= Math.max(currentPage + pagesBeforeOrAfter, positionRange);\r\n          i++\r\n        ) {\r\n          if (i > 2 && i < totalPages - 1) {\r\n            range.push(i);\r\n          }\r\n        }\r\n      }\r\n    }\r\n\r\n    if (currentPage > totalPages - positionRange) {\r\n      for (let i = totalPages - (availablePositions - 5); i <= totalPages - 1; i++) {\r\n        range.push(i);\r\n      }\r\n    }\r\n\r\n    return range.filter((v, i, a) => a.indexOf(v) === i);\r\n  }\r\n\r\n  private showEllipsisAfterFirst(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === 0 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === 2) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n\r\n  private showEllipsisBeforeLast(pages: number[], page: number, availablePositions: number): boolean {\r\n    const totalPages = pages[pages.length - 1];\r\n    if (!totalPages) {\r\n      throw new Error(\"No totalPages\");\r\n    }\r\n\r\n    return (\r\n      pages.indexOf(page) === pages.length - 1 &&\r\n      totalPages > availablePositions - 2 &&\r\n      !pages.some((p) => p === totalPages - 1) &&\r\n      availablePositions >= 7\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-progress-bar.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index = require('./index-efc2222e.js');
 
 const progressBarCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.progress{margin-bottom:8px}.progress .progress-bar{background-color:#fff;border:1px solid #39870c;display:block;height:16px}.progress .progress-bar>span{background-color:#39870c;float:left;height:100%;width:0%}.progress .progress-bar+span{font-size:14px;margin-top:8px}";
 
@@ -22,3 +22,5 @@ const ProgressBar = class {
 ProgressBar.style = progressBarCss;
 
 exports.dso_progress_bar = ProgressBar;
+
+//# sourceMappingURL=dso-progress-bar.cjs.entry.js.map

package/dist/cjs/dso-progress-bar.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-progress-bar.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,cAAc,GAAG,ocAAoc;;MCO9c,WAAW;;;;eAWhB,CAAC;eAMD,GAAG;;EAET,MAAM;IACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;IAEhD,QACEA,iBAAK,KAAK,EAAC,UAAU,IACnBA,kBACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG,IAEvBA,kBAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD,EACPA,kBAAM,EAAE,EAAC,oBAAoB,IAC3BA,qBAAa,CACR,CACH,EACN;GACH;;;;;;","names":["h"],"sources":["./src/components/progress-bar/progress-bar.scss?tag=dso-progress-bar&encapsulation=shadow","./src/components/progress-bar/progress-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-bar\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.progress {\r\n  @include progress-bar.root();\r\n}\r\n","import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-bar\",\r\n  styleUrl: \"progress-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProgressBar {\r\n  /**\r\n   * The current progress. Should be between `min` and `max`.\r\n   */\r\n  @Prop()\r\n  progress!: number;\r\n\r\n  /**\r\n   * From where progress is made.\r\n   */\r\n  @Prop()\r\n  min = 0;\r\n\r\n  /**\r\n   * When the operation completes.\r\n   */\r\n  @Prop()\r\n  max = 100;\r\n\r\n  render() {\r\n    const progressNumber = Math.round(this.progress);\r\n    const progressPercentage = `${progressNumber}%`;\r\n\r\n    return (\r\n      <div class=\"progress\">\r\n        <span\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-labelledby=\"progress-bar-label\"\r\n          aria-valuenow={progressNumber}\r\n          aria-valuemin={this.min}\r\n          aria-valuemax={this.max}\r\n        >\r\n          <span style={{ width: `${progressPercentage}` }}></span>\r\n        </span>\r\n        <span id=\"progress-bar-label\">\r\n          <slot></slot>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-progress-indicator.cjs.entry.js

@@ -2,28 +2,28 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index = require('./index-efc2222e.js');
 
 const progressIndicatorCss = "*,*::after,*::before{box-sizing:border-box}.dso-progress-indicator-spinner{display:inline-block;margin:0;position:relative;vertical-align:middle}span.dso-progress-indicator-label{margin-left:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner{height:24px;width:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding:12px 16px}:host([size=medium]) .dso-progress-indicator-spinner{height:32px;width:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner{height:48px;width:48px}:host([size=large]):host([block]){padding:24px 16px}";
 
 const Progressindicator = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
-    this.label = undefined;
+    this.label = "Resultaten laden: een moment geduld alstublieft.";
     this.size = undefined;
     this.block = undefined;
   }
   render() {
-    var _a;
-    const label = (_a = this.label) !== null && _a !== void 0 ? _a : "Resultaten laden: een moment geduld alstublieft.";
     return (index.h(index.Host, null, index.h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, index.h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, index.h("style", null, `
                 .spinner { animation: rotator 8s linear infinite; transform-origin: center; }
                 @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
                 .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
                 @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }
-              `), index.h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))), index.h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, label)));
+              `), index.h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))), index.h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
   }
 };
 Progressindicator.style = progressIndicatorCss;
 
 exports.dso_progress_indicator = Progressindicator;
+
+//# sourceMappingURL=dso-progress-indicator.cjs.entry.js.map

package/dist/cjs/dso-progress-indicator.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-progress-indicator.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,oyBAAoyB;;MCOpzB,iBAAiB;;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,QACEA,QAACC,UAAI,QACHD,kBAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IAExGA,iBAAK,KAAK,EAAC,SAAS,EAAC,OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B,IAC3EA,uBACG;;;;;eAKA,CACK,EACRA,oBAAQ,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,kBAAc,IAAI,oBAAgB,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CACrG,CACD,EACPA,kBAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,EACP;GACH;;;;;;","names":["h","Host"],"sources":["./src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","./src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n  @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include progress-indicator.small();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.small-block();\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include progress-indicator.medium();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.medium-block();\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include progress-indicator.large();\r\n\r\n  &:host([block]) {\r\n    @include progress-indicator.large-block();\r\n  }\r\n}\r\n","import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-indicator\",\r\n  styleUrl: \"progress-indicator.scss\",\r\n  shadow: true,\r\n})\r\nexport class Progressindicator {\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n  /**\r\n   * The size (width) of the Progress Indicator.\r\n   *\r\n   * If no size is set, falls back to `small`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  size?: \"small\" | \"medium\" | \"large\";\r\n\r\n  /**\r\n   * Set for bloatier Progress Indicator.\r\n   */\r\n  @Prop()\r\n  block?: boolean;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n          {/* Keep in sync with /packages/css/src/components/progress-indicator/progress-indicator.scss */}\r\n          <svg class=\"spinner\" viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n            <style>\r\n              {`\r\n                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }\r\n                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n                .path { stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n              `}\r\n            </style>\r\n            <circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n          </svg>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-responsive-element.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index = require('./index-efc2222e.js');
 
 const responsiveElementCss = ":host{display:block}";
 
@@ -36,6 +36,9 @@ const ResponsiveElement = class {
     this.sizeAlias = elementSizes[0].alias;
     this.sizeWidth = 0;
   }
+  /**
+   * The current size
+   */
   async getSize() {
     return this.sizeAlias;
   }
@@ -53,3 +56,5 @@ const ResponsiveElement = class {
 ResponsiveElement.style = responsiveElementCss;
 
 exports.dso_responsive_element = ResponsiveElement;
+
+//# sourceMappingURL=dso-responsive-element.cjs.entry.js.map

package/dist/cjs/dso-responsive-element.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-responsive-element.entry.cjs.js","mappings":";;;;;;AAAA,MAAM,oBAAoB,GAAG,sBAAsB;;ACInD,MAAM,YAAY,GAA4C;EAC5D;IACE,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,OAAO;GACf;EACD;IACE,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,QAAQ;GAChB;EACD;IACE,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,OAAO;GACf;CACF,CAAC;MAOW,iBAAiB;;;;IAqBpB,aAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC;;MAC5C,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;OACnC;MAED,MAAM,IAAI,GAAG,MAAA,MAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;MAE1G,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAC/B,CAAC,CAAC;qBA5BgC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;qBAG5C,CAAC;;;;;EAYb,MAAM,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC;GACvB;EAgBD,iBAAiB;IACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpC;EAED,MAAM;IACJ,QACEA,QAACC,UAAI,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,IAC7GD,qBAAQ,CACH,EACP;GACH;;;;;;;","names":["h","Host"],"sources":["./src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","./src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, State } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-scrollable.cjs.entry.js

@@ -2,11 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index$1 = require('./index-ecec64a0.js');
+const index$1 = require('./index-efc2222e.js');
 const clsx_m = require('./clsx.m-b81c6b86.js');
 const index = require('./index-794ad37a.js');
 
-const scrollableCss = ":host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
+const scrollableCss = ":host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;max-height:inherit;min-height:inherit;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;max-height:inherit;min-height:inherit;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%;pointer-events:none}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
 
 const resizeObserver = new ResizeObserver(index.debounce_1((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
 function getScrollableComponentFromResizeObserverEntry({ target, }) {
@@ -19,7 +19,7 @@ function getScrollableComponentFromResizeObserverEntry({ target, }) {
   return undefined;
 }
 function isDsoScrollableComponent(element) {
-  return element.tagName === "DSO-SCROLLABLE" && "_setScrollState" in element;
+  return element.tagName === "DSO-SCROLLABLE";
 }
 const Scrollable = class {
   constructor(hostRef) {
@@ -37,7 +37,7 @@ const Scrollable = class {
     this.scrollPosition = "noScroll";
   }
   /**
-   * Internal method. Do not use.
+   * @internal
    */
   async _setScrollState() {
     const scrollPosition = this.getScrollPosition();
@@ -77,20 +77,20 @@ const Scrollable = class {
       childList: false,
       subtree: true,
     });
-    if (this.scrollContainerDiv instanceof HTMLDivElement) {
-      resizeObserver.observe(this.scrollContainerDiv);
+    if (this.shadowContainerDiv instanceof HTMLDivElement) {
+      resizeObserver.observe(this.shadowContainerDiv);
     }
     this.slottedElements.forEach((element) => resizeObserver.observe(element));
   }
   disconnectedCallback() {
-    if (this.scrollContainerDiv instanceof HTMLDivElement) {
-      resizeObserver.unobserve(this.scrollContainerDiv);
+    if (this.shadowContainerDiv instanceof HTMLDivElement) {
+      resizeObserver.unobserve(this.shadowContainerDiv);
     }
     this.mutationObserver.disconnect();
     this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
   }
   render() {
-    return (index$1.h("div", { class: "dso-shadow-container" }, index$1.h("div", { ref: (el) => (this.scrollContainerDiv = el), class: clsx_m.clsx("dso-scroll-container", {
+    return (index$1.h("div", { ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, index$1.h("div", { ref: (el) => (this.scrollContainerDiv = el), class: clsx_m.clsx("dso-scroll-container", {
         [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
       }), onScroll: () => this._setScrollState() }, index$1.h("slot", null))));
   }
@@ -99,3 +99,5 @@ const Scrollable = class {
 Scrollable.style = scrollableCss;
 
 exports.dso_scrollable = Scrollable;
+
+//# sourceMappingURL=dso-scrollable.cjs.entry.js.map

package/dist/cjs/dso-scrollable.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-scrollable.entry.cjs.js","mappings":";;;;;;;;AAAA,MAAM,aAAa,GAAG,msCAAmsC;;ACMztC,MAAM,cAAc,GAAG,IAAI,cAAc,CACvCA,gBAAQ,CACN,CAAC,OAAO,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,eAAK,OAAA,MAAA,6CAA6C,CAAC,KAAK,CAAC,0CAAE,eAAe,EAAE,CAAA,EAAA,CAAC,EAChH,EAAE,CACH,CACF,CAAC;AAEF,SAAS,6CAA6C,CAAC,EACrD,MAAM,GACc;EACpB,IAAI,MAAM,CAAC,UAAU,YAAY,UAAU,IAAI,wBAAwB,CAAC,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC,EAAE;IAC/F,OAAO,MAAM,CAAC,UAAU,CAAC,IAAI,CAAC;GAC/B;EAED,IAAI,MAAM,CAAC,aAAa,IAAI,wBAAwB,CAAC,MAAM,CAAC,aAAa,CAAC,EAAE;IAC1E,OAAO,MAAM,CAAC,aAAa,CAAC;GAC7B;EAED,OAAO,SAAS,CAAC;AACnB,CAAC;AAED,SAAS,wBAAwB,CAAC,OAAgB;EAChD,OAAO,OAAO,CAAC,OAAO,KAAK,gBAAgB,CAAC;AAC9C,CAAC;MAOY,UAAU;;;;;IAEb,qBAAgB,GAAG,IAAI,gBAAgB,CAAC,CAAC,OAAO,KACtD,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,MAAM,EAAE;;MACzB,MAAM,OAAO,GAAG,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAAC,gBAAgB,CAAC,CAAC;MAChE,IAAI,OAAO,KAAK,IAAI,CAAC,IAAI,EAAE;QACzB,OAAO;OACR;MAED,IAAI,CAAC,eAAe,EAAE,CAAC;KACxB,CAAC,CACH,CAAC;0BAgB+B,UAAU;;;;;EAM3C,MAAM,eAAe;IACnB,MAAM,cAAc,GAAG,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAChD,IAAI,IAAI,CAAC,cAAc,KAAK,cAAc,EAAE;MAC1C,IAAI,CAAC,cAAc,GAAG,cAAc,CAAC;MAErC,IAAI,IAAI,CAAC,cAAc,KAAK,KAAK,IAAI,IAAI,CAAC,cAAc,KAAK,QAAQ,EAAE;QACrE,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,CAAC,CAAC;OAC5D;KACF;GACF;EAED,IAAY,eAAe;IACzB,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;GACvC;EAEO,iBAAiB;IACvB,IAAI,CAAC,IAAI,CAAC,kBAAkB,EAAE;MAC5B,OAAO,UAAU,CAAC;KACnB;IAED,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,kBAAkB,CAAC;IAE1E,IAAI,YAAY,IAAI,YAAY,EAAE;MAChC,OAAO,UAAU,CAAC;KACnB;IAED,IAAI,SAAS,KAAK,CAAC,EAAE;MACnB,OAAO,KAAK,CAAC;KACd;IAED,IAAI,YAAY,GAAG,SAAS,GAAG,YAAY,GAAG,CAAC,EAAE;MAC/C,OAAO,QAAQ,CAAC;KACjB;IAED,IAAI,SAAS,GAAG,CAAC,EAAE;MACjB,OAAO,QAAQ,CAAC;KACjB;IAED,OAAO,UAAU,CAAC;GACnB;EAED,gBAAgB;IACd,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;MACvC,aAAa,EAAE,IAAI;MACnB,UAAU,EAAE,KAAK;MACjB,SAAS,EAAE,KAAK;MAChB,OAAO,EAAE,IAAI;KACd,CAAC,CAAC;IAEH,IAAI,IAAI,CAAC,kBAAkB,YAAY,cAAc,EAAE;MACrD,cAAc,CAAC,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACjD;IAED,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,cAAc,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;GAC5E;EAED,oBAAoB;IAClB,IAAI,IAAI,CAAC,kBAAkB,YAAY,cAAc,EAAE;MACrD,cAAc,CAAC,SAAS,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;KACnD;IAED,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,CAAC;IAEnC,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,CAAC,OAAO,KAAK,cAAc,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC;GAC9E;EAED,MAAM;IACJ,QACEC,mBAAK,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAAE,KAAK,EAAC,sBAAsB,IAC5EA,mBACE,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,kBAAkB,GAAG,EAAE,CAAC,EAC3C,KAAK,EAAEC,WAAI,CAAC,sBAAsB,EAAE;QAClC,CAAC,cAAc,IAAI,CAAC,cAAc,EAAE,GAAG,IAAI,CAAC,cAAc,KAAK,UAAU;OAC1E,CAAC,EACF,QAAQ,EAAE,MAAM,IAAI,CAAC,eAAe,EAAE,IAEtCD,uBAAa,CACT,CACF,EACN;GACH;;;;;;;","names":["debounce","h","clsx"],"sources":["./src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","./src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  height: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  height: 100%;\r\n  max-height: inherit;\r\n  min-height: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    height: 100%;\r\n    max-height: inherit;\r\n    min-height: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      height: units.$u3;\r\n      left: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      width: 100%;\r\n      pointer-events: none;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      top: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      bottom: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries) => entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50\r\n  )\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    })\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/cjs/dso-slide-toggle.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-ecec64a0.js');
+const index = require('./index-efc2222e.js');
 const v4 = require('./v4-abb5dc0c.js');
 
 const slideToggleCss = "button.dso-slider{border:0;padding:0}button.dso-slider:focus-visible{outline:2px solid #323232;outline-offset:1px}button.dso-slider svg rect{fill:#999;transition:fill 0.25s}button.dso-slider svg circle{transition:transform 260ms cubic-bezier(0.4, 0, 0.2, 1);transform:translateX(10px);fill:#fff}button.dso-slider[aria-checked=true] svg rect{fill:#275937}button.dso-slider[aria-checked=true] svg circle{transform:translateX(30px);fill:#fff}button.dso-slider[disabled] svg rect{fill:#ccc}button.dso-slider[disabled] svg circle{fill:#e5e5e5}button.dso-slider[disabled][aria-checked=true] svg rect{fill:#a8bcaf}button.dso-slider[disabled][aria-checked=true] svg circle{fill:#e5e5e5}.dso-slider{border-radius:24px;display:inline-flex}.dso-slider:hover{cursor:pointer}";
@@ -35,3 +35,5 @@ const SlideToggle = class {
 SlideToggle.style = slideToggleCss;
 
 exports.dso_slide_toggle = SlideToggle;
+
+//# sourceMappingURL=dso-slide-toggle.cjs.entry.js.map

package/dist/cjs/dso-slide-toggle.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"dso-slide-toggle.entry.cjs.js","mappings":";;;;;;;AAAA,MAAM,cAAc,GAAG,4vBAA4vB;;MCStwB,WAAW;;;;mBAQZ,KAAK;oBAMJ,KAAK;;;;sBAqBHA,KAAE,EAAE;;EAQT,YAAY,CAAC,CAAQ;IAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,aAAa,EAAE,CAAC;MAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;KACvB,CAAC,CAAC;GACJ;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;GAC9D;EAED,MAAM;IACJ,QACEC,8BACEA,kCACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,KAC/B,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,IAEtEA,iBAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,IAChFA,eAAG,IAAI,EAAC,MAAM,eAAW,SAAS,IAChCA,kBAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG,EAC3DA,oBAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnBA,mBAAO,OAAO,EAAE,IAAI,CAAC,UAAU,IAC7BA,qBAAQ,CACF,CACT,CACA,EACH;GACH;;;;;;;","names":["v4","h"],"sources":["./src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle","./src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"],"version":3}