@dso-toolkit/core 74.0.0 → 75.0.0

package/dist/bundle/{p-PMqbDJmA.js.map → p-CyBDICEz.js.map}

@@ -1 +1 @@
-{"file":"p-PMqbDJmA.js","mappings":";;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,gwCAAgwC;;MCapwC,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA0BnD;IAxBC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,EAC9F,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-alert\": {\r\n      close: \"Close\",\r\n      success: \"Success\",\r\n      info: \"Notice\",\r\n      warning: \"Warning\",\r\n      error: \"Error\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-alert\": {\r\n      close: \"Sluiten\",\r\n      success: \"Gelukt\",\r\n      info: \"Opmerking\",\r\n      warning: \"Waarschuwing\",\r\n      error: \"Fout\",\r\n    },\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/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-block-start: units.$u3;\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.alert {\r\n  @include alert.root();\r\n\r\n  &.dso-compact {\r\n    min-block-size: alert.$inline-padding;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\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\">{this.text(\"close\")}</span>\r\n          </button>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-CyBDICEz.js","mappings":";;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,IAAI,EAAE,QAAQ;AACd,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AAChB,YAAA,OAAO,EAAE,QAAQ;AACjB,YAAA,IAAI,EAAE,WAAW;AACjB,YAAA,OAAO,EAAE,cAAc;AACvB,YAAA,KAAK,EAAE,MAAM;AACd,SAAA;AACF,KAAA;CACF;;ACrBD,MAAM,QAAQ,GAAG,mxCAAmxC;;MCavxC,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA0BnD;IAxBC,MAAM,GAAA;QACJ,MAAM,MAAM,GAAG,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC;QACrC,IAAI,CAAC,MAAM,EAAE;YACX,MAAM,IAAI,KAAK,CAAC,CAAA,eAAA,EAAkB,IAAI,CAAC,MAAM,CAAE,CAAA,CAAC;;AAGlD,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE,IAAI,CAAC,OAAO,EAAE,CAAS,MAAA,EAAA,IAAI,CAAC,MAAM,CAAA,CAAE,EAAE,EAAE,aAAa,EAAE,IAAI,CAAC,OAAO,EAAE,CAAC,EAC7E,IAAI,EAAE,IAAI,CAAC,SAAS,GAAG,OAAO,GAAG,SAAS,EAAA,EAEzC,CAAC,IAAI,CAAC,OAAO,IAAI,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,KAAK,EAAC,aAAa,EAAC,IAAI,EAAE,SAAS,GAAG,IAAI,CAAC,MAAM,EAAI,CAAA,EACjF,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EAAE,MAAM,EAAS,GAAA,CAAA,EACtC,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,KACZ,CAAQ,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,EAC9F,CAAU,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAY,CAAA,EAClC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAQ,CAC1C,CACV,CACG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/alert/alert.i18n.ts","src/components/alert/alert.scss?tag=dso-alert&encapsulation=shadow","src/components/alert/alert.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-alert\": {\r\n      close: \"Close\",\r\n      success: \"Success\",\r\n      info: \"Notice\",\r\n      warning: \"Warning\",\r\n      error: \"Error\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-alert\": {\r\n      close: \"Sluiten\",\r\n      success: \"Gelukt\",\r\n      info: \"Opmerking\",\r\n      warning: \"Waarschuwing\",\r\n      error: \"Fout\",\r\n    },\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/components/alert\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n:host(:not(:first-child)) {\r\n  margin-block-start: units.$u3;\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.alert {\r\n  @include alert.root();\r\n\r\n  &.dso-compact {\r\n    min-block-size: alert.$inline-padding;\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./alert.i18n\";\r\nimport { AlertCloseEvent } from \"./alert.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-alert\",\r\n  styleUrl: \"alert.scss\",\r\n  shadow: true,\r\n})\r\nexport class Alert {\r\n  @Element()\r\n  host!: HTMLDsoAlertElement;\r\n\r\n  /**\r\n   * Set status of alert\r\n   */\r\n  @Prop({ reflect: true })\r\n  status!: \"success\" | \"info\" | \"warning\" | \"error\";\r\n\r\n  /**\r\n   * Whether or not to show the role attribute with value \"alert\". To control the tooltip add the `role-alert` attribute.\r\n   */\r\n  @Prop()\r\n  roleAlert?: boolean;\r\n\r\n  /**\r\n   * Show alert as compact variant (without icon)\r\n   */\r\n  @Prop({ reflect: true })\r\n  compact?: boolean;\r\n\r\n  /**\r\n   * When `false` the close button in the alert will not be rendered.\r\n   */\r\n  @Prop()\r\n  closable = false;\r\n\r\n  /**\r\n   * Emitted when the user closes the Alert.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<AlertCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    const status = this.text(this.status);\r\n    if (!status) {\r\n      throw new Error(`Invalid status ${this.status}`);\r\n    }\r\n\r\n    return (\r\n      <div\r\n        class={clsx(\"alert\", `alert-${this.status}`, { \"dso-compact\": this.compact })}\r\n        role={this.roleAlert ? \"alert\" : undefined}\r\n      >\r\n        {!this.compact && <dso-icon class=\"icon-status\" icon={\"status-\" + this.status} />}\r\n        <span class=\"sr-only\">{status}:</span>\r\n        <slot></slot>\r\n\r\n        {this.closable && (\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\">{this.text(\"close\")}</span>\r\n          </button>\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/p-D8CNpm3v.js

@@ -0,0 +1,80 @@
+import { p as proxyCustomElement, H, e as createEvent, h, F as Fragment } from './p-DHO_Za64.js';
+import { A as AnnotationBody } from './p-DPH021KD.js';
+import { w as watcher, A as AnnotationGewijzigdeLocatie, a as AnnotationSymbolSlot } from './p-BacS1uCc.js';
+import { d as defineCustomElement$5 } from './p-DTtP46RI.js';
+import { d as defineCustomElement$4 } from './p-9Ncrliah.js';
+import { d as defineCustomElement$3 } from './p-Dxegur3q.js';
+import { d as defineCustomElement$2 } from './p-BzRDrr-_.js';
+import { d as defineCustomElement$1 } from './p-BN2fD3ZU.js';
+
+const annotationCss = "@charset \"UTF-8\";a{background-color:transparent;color:var(--link-color);text-decoration:underline;text-underline-offset:15%}a:hover,a:focus-visible{color:var(--link-hover-color);text-decoration:underline}a:active{text-decoration:none}a :is(dso-icon,svg.di)+span,a span+:is(dso-icon,svg.di){margin-inline-start:8px}a:visited{color:var(--link-visited-color)}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download{background-image:var(--_dso-di-background-image, url(\"./di.svg#download\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).download:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#download-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-end:var(--_dso-link-icon-padding-inline-end, 1.5em);background-position:bottom 0 right 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary)).extern:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"tel:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#call-scampi\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-repeat:no-repeat;background-size:1.25em 1.25em;padding-inline-start:var(--_dso-link-icon-padding-inline-start, 1.5em);background-position:bottom 0 left 0}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-grasgroen\"))}a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:hover,a:where(:not(.dso-primary,.dso-secondary,.dso-tertiary))[href^=\"mailto:\"]:focus-visible{background-image:var(--_dso-di-background-image, url(\"./di.svg#email-scampi\"))}:host{display:block;padding:2px}:host([wijzigactie=voegtoe]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#e4f1d4;border-color:#e4f1d4;color:#191919}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=voegtoe]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=voegtoe]){box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.25)}:host([wijzigactie=verwijder]){--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f5d8dc;border-color:#f5d8dc;color:#191919}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}:host([wijzigactie=verwijder]) a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}:host([wijzigactie=verwijder]){text-decoration:line-through}@media screen and (min--moz-device-pixel-ratio: 0){:host([wijzigactie=verwijder]){font-family:sans-serif}}*,*::after,*::before{box-sizing:border-box}.annotation-body{display:flex;gap:8px}.annotation-info{flex-grow:1}.annotation-symbol,.annotation-control{flex-shrink:0}.annotation-title{font-weight:500;overflow-wrap:anywhere}.annotation-title,.annotation-data{margin-block:0}.annotation-title .content:has(+dso-label),.annotation-data .content:has(+dso-label){margin-inline-end:4px}.annotation-data{font-size:0.875rem}";
+
+const AnnotationLocatie = /*@__PURE__*/ proxyCustomElement(class AnnotationLocatie extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoActiveChange = createEvent(this, "dsoActiveChange", 7);
+        this.watcher = watcher(this.host);
+    }
+    connectedCallback() {
+        this.watcher.watch();
+    }
+    disconnectedCallback() {
+        this.watcher.unwatch();
+    }
+    render() {
+        const hasSymbool = this.watcher.hasSymbool();
+        return (h(AnnotationBody, { key: 'fc08e2a53be97c74718fb33d5acd371186f3dcf7', symbol: hasSymbool ? h(AnnotationSymbolSlot, null) : undefined, active: this.active, dsoActiveChange: this.dsoActiveChange, title: h(Fragment, null, h("span", { class: "content" }, h("dso-renvooi", { value: this.locatieNoemer })), this.gewijzigdeLocatie && h(AnnotationGewijzigdeLocatie, null)) }));
+    }
+    get host() { return this; }
+    static get style() { return annotationCss; }
+}, [1, "dso-annotation-locatie", {
+        "wijzigactie": [513],
+        "active": [516],
+        "gewijzigdeLocatie": [516, "gewijzigde-locatie"],
+        "locatieNoemer": [1, "locatie-noemer"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-annotation-locatie", "dso-icon", "dso-label", "dso-renvooi", "dso-slide-toggle", "dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-annotation-locatie":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, AnnotationLocatie);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-label":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-renvooi":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-slide-toggle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "dso-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AnnotationLocatie as A, defineCustomElement as d };
+//# sourceMappingURL=p-D8CNpm3v.js.map
+
+//# sourceMappingURL=p-D8CNpm3v.js.map

package/dist/bundle/{p-CkBk3gL8.js.map → p-D8CNpm3v.js.map}

@@ -1 +1 @@
-{"file":"p-CkBk3gL8.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,klLAAklL;;MCiB3lL,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-D8CNpm3v.js","mappings":";;;;;;;;;AAAA,MAAM,aAAa,GAAG,qmLAAqmL;;MCiB9mL,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;;QAuCU,IAAA,CAAA,OAAO,GAAG,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;AA6BrC;IA3BC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,OAAO,CAAC,KAAK,EAAE;;IAGtB,oBAAoB,GAAA;AAClB,QAAA,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE;;IAGxB,MAAM,GAAA;QACJ,MAAM,UAAU,GAAG,IAAI,CAAC,OAAO,CAAC,UAAU,EAAE;AAE5C,QAAA,QACE,CAAA,CAAC,cAAc,EAAA,EAAA,GAAA,EAAA,0CAAA,EACb,MAAM,EAAE,UAAU,GAAG,CAAC,CAAA,oBAAoB,OAAG,GAAG,SAAS,EACzD,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,eAAe,EAAE,IAAI,CAAC,eAAe,EACrC,KAAK,EACH,CAAA,CAAA,QAAA,EAAA,IAAA,EACE,CAAM,CAAA,MAAA,EAAA,EAAA,KAAK,EAAC,SAAS,EAAA,EACnB,CAAA,CAAA,aAAA,EAAA,EAAa,KAAK,EAAE,IAAI,CAAC,aAAa,GAAI,CACrC,EACN,IAAI,CAAC,iBAAiB,IAAI,CAAA,CAAC,2BAA2B,EAAG,IAAA,CAAA,CACzD,EAEL,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/annotation/annotation.scss?tag=dso-annotation-locatie&encapsulation=shadow","src/components/annotation/annotation-locatie/annotation-locatie.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n@use \"~dso-toolkit/src/components/link/link\";\r\n\r\n:host {\r\n  display: block;\r\n  padding: 2px;\r\n}\r\n\r\n:host([wijzigactie=\"voegtoe\"]) {\r\n  @include insert.root();\r\n}\r\n\r\n:host([wijzigactie=\"verwijder\"]) {\r\n  @include delete.root();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.annotation-body {\r\n  display: flex;\r\n  gap: units.$u1;\r\n}\r\n\r\n.annotation-info {\r\n  flex-grow: 1;\r\n}\r\n\r\n.annotation-symbol,\r\n.annotation-control {\r\n  flex-shrink: 0;\r\n}\r\n\r\n.annotation-title {\r\n  font-weight: 500;\r\n  overflow-wrap: anywhere;\r\n}\r\n\r\n.annotation-title,\r\n.annotation-data {\r\n  margin-block: 0;\r\n\r\n  .content:has(+ dso-label) {\r\n    margin-inline-end: units.$u1 * 0.5;\r\n  }\r\n}\r\n\r\n.annotation-data {\r\n  font-size: 0.875rem;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, h } from \"@stencil/core\";\r\n\r\nimport { RenvooiValue } from \"../../renvooi/renvooi.interfaces\";\r\nimport { AnnotationBody } from \"../annotation-body\";\r\nimport { AnnotationGewijzigdeLocatie } from \"../annotation-gewijzigde-locatie\";\r\nimport { AnnotationSymbolSlot } from \"../annotation-symbol-slot\";\r\nimport { watcher } from \"../annotation-watcher\";\r\nimport { AnnotationActiveChangeEvent, AnnotationWijzigactie } from \"../annotation.interfaces\";\r\n\r\n/**\r\n * @slot symbool - Een optionele afbeelding die de annotatie symboliseert.\r\n */\r\n@Component({\r\n  tag: \"dso-annotation-locatie\",\r\n  styleUrl: \"../annotation.scss\",\r\n  shadow: true,\r\n})\r\nexport class AnnotationLocatie implements ComponentInterface {\r\n  /**\r\n   * Een optionele wijzigactie die aangeeft of de annotatie toegevoegd of verwijderd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  wijzigactie?: AnnotationWijzigactie;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de annotatie actief is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Een optionele boolean die aangeeft of de locatie van de annotatie gewijzigd is.\r\n   */\r\n  @Prop({ reflect: true })\r\n  gewijzigdeLocatie?: boolean;\r\n\r\n  /**\r\n   * Een optionele event listener voor wijzigingen aan de status van de annotatie.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<AnnotationActiveChangeEvent>;\r\n\r\n  /**\r\n   * De noemer van de locatie.\r\n   */\r\n  @Prop()\r\n  locatieNoemer?: RenvooiValue | string;\r\n\r\n  @Element()\r\n  private host!: HTMLDsoAnnotationLocatieElement;\r\n\r\n  private watcher = watcher(this.host);\r\n\r\n  connectedCallback(): void {\r\n    this.watcher.watch();\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.watcher.unwatch();\r\n  }\r\n\r\n  render() {\r\n    const hasSymbool = this.watcher.hasSymbool();\r\n\r\n    return (\r\n      <AnnotationBody\r\n        symbol={hasSymbool ? <AnnotationSymbolSlot /> : undefined}\r\n        active={this.active}\r\n        dsoActiveChange={this.dsoActiveChange}\r\n        title={\r\n          <>\r\n            <span class=\"content\">\r\n              <dso-renvooi value={this.locatieNoemer} />\r\n            </span>\r\n            {this.gewijzigdeLocatie && <AnnotationGewijzigdeLocatie />}\r\n          </>\r\n        }\r\n      />\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-0JGmXD8O.js → p-D9Bg2rxG.js}

@@ -1,6 +1,6 @@
 import { p as proxyCustomElement, H, h, d as Host } from './p-DHO_Za64.js';
 import { i as i18n } from './p-B_kXuEcW.js';
-import { d as defineCustomElement$1 } from './p-D2nuXSd0.js';
+import { d as defineCustomElement$1 } from './p-DTtP46RI.js';
 
 const translations = {
     en: {
@@ -15,7 +15,7 @@ const translations = {
     },
 };
 
-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-inline-start:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host([size=small]) dso-icon,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) dso-icon{block-size:24px;inline-size:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding-block:12px;padding-inline:16px}:host([size=medium]) .dso-progress-indicator-spinner,:host([size=medium]) dso-icon{block-size:32px;inline-size:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner,:host([size=large]) dso-icon{block-size:48px;inline-size:48px}:host([size=large]):host([block]){padding-block:24px;padding-inline:16px}";
+const progressIndicatorCss = "@charset \"UTF-8\";*,*::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-inline-start:16px;vertical-align:middle}:host([block]){align-items:center;display:flex;justify-content:center}:host([size=small]) .dso-progress-indicator-spinner,:host([size=small]) dso-icon,:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,:host(:not([size=medium]):not([size=large])) dso-icon{block-size:24px;inline-size:24px}:host([size=small]):host([block]),:host(:not([size=medium]):not([size=large])):host([block]){padding-block:12px;padding-inline:16px}:host([size=medium]) .dso-progress-indicator-spinner,:host([size=medium]) dso-icon{block-size:32px;inline-size:32px}:host([size=medium]):host([block]){padding:16px}:host([size=large]) .dso-progress-indicator-spinner,:host([size=large]) dso-icon{block-size:48px;inline-size:48px}:host([size=large]):host([block]){padding-block:24px;padding-inline:16px}";
 
 const Progressindicator = /*@__PURE__*/ proxyCustomElement(class Progressindicator extends H {
     constructor() {
@@ -25,7 +25,7 @@ const Progressindicator = /*@__PURE__*/ proxyCustomElement(class Progressindicat
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: 'be4b6fe82d8729af7fba625ffa8afe8376963ef8' }, h("span", { key: 'ce9f64e1e7dbc9bba2b14046fd83c955d99ed676', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '35b4c8d102780df3f498626205859df215c0f237', icon: "spinner" })), h("span", { key: '512b7e65541c4540c93cc134f1283c7464b8e4db', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '1cae1ecc0189ba8e3f398be733261208bff72507' }, h("span", { key: '18c9e94d07e685e9e628ea962e3e5a92d4942a8e', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'c3621e2064b6dcd7100a5bab325938b5f4979467', icon: "spinner" })), h("span", { key: '5540253b6a6a40d130b2b8e5f8341981ed708396', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     get host() { return this; }
     static get style() { return progressIndicatorCss; }
@@ -54,6 +54,6 @@ function defineCustomElement() {
 }
 
 export { Progressindicator as P, defineCustomElement as d };
-//# sourceMappingURL=p-0JGmXD8O.js.map
+//# sourceMappingURL=p-D9Bg2rxG.js.map
 
-//# sourceMappingURL=p-0JGmXD8O.js.map
+//# sourceMappingURL=p-D9Bg2rxG.js.map

package/dist/bundle/{p-0JGmXD8O.js.map → p-D9Bg2rxG.js.map}

@@ -1 +1 @@
-{"file":"p-0JGmXD8O.js","mappings":";;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,kDAAkD;AAC1D,SAAA;AACF,KAAA;CACF;;ACbD,MAAM,oBAAoB,GAAG,kgCAAkgC;;MCWlhC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AA6BU,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAcnD;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,EAAA,EACxG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,EAAA,CAAY,CAC/B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Loading results. Please wait...\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n    },\r\n  },\r\n};\r\n","@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, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./progress-indicator.i18n\";\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  @Element()\r\n  host!: HTMLDsoProgressIndicatorElement;\r\n\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label?: string;\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({ reflect: true })\r\n  block?: boolean;\r\n\r\n  private text = i18n(() => this.host, translations);\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          <dso-icon icon=\"spinner\"></dso-icon>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label || this.text(\"label\")}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-D9Bg2rxG.js","mappings":";;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,iCAAiC;AACzC,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,wBAAwB,EAAE;AACxB,YAAA,KAAK,EAAE,kDAAkD;AAC1D,SAAA;AACF,KAAA;CACF;;ACbD,MAAM,oBAAoB,GAAG,qhCAAqhC;;MCWriC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,GAAA;;;;AA6BU,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAcnD;IAZC,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,EAAA,EACxG,CAAA,CAAA,UAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAU,IAAI,EAAC,SAAS,EAAA,CAAY,CAC/B,EACP,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Loading results. Please wait...\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-progress-indicator\": {\r\n      label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n    },\r\n  },\r\n};\r\n","@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, Element, Host, Prop, h } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./progress-indicator.i18n\";\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  @Element()\r\n  host!: HTMLDsoProgressIndicatorElement;\r\n\r\n  /**\r\n   * The label of the Progress Indicator.\r\n   */\r\n  @Prop()\r\n  label?: string;\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({ reflect: true })\r\n  block?: boolean;\r\n\r\n  private text = i18n(() => this.host, translations);\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          <dso-icon icon=\"spinner\"></dso-icon>\r\n        </span>\r\n        <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n          {this.label || this.text(\"label\")}\r\n        </span>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/p-DIok-wvi.js

@@ -0,0 +1,115 @@
+import { p as proxyCustomElement, H, h, d as Host } from './p-DHO_Za64.js';
+import { d as debounce } from './p-BxvZeNWe.js';
+import { c as createFocusTrap } from './p-BocpUT46.js';
+import { d as defineCustomElement$1 } from './p-DTtP46RI.js';
+import { v as v4 } from './p-BF0_OXTe.js';
+
+const tableCss = "@charset \"UTF-8\";\n/* Genereert een `transition` met vaste easing en optionele duur en delay per property.\n**\n** @param {ArgList} $transitions...\n**   - \"property\": gebruikt standaard duur (260ms) en delay (0ms)\n**   - (\"property\", duur): eigen duur, geen delay\n**   - (\"property\", duur, delay): eigen duur én delay\n**\n** @example\n**   @include transition(opacity, (\"transform\", 300ms), (\"color\", 500ms, 200ms));\n**\n** @output\n**   transition: [property] [duration] cubic-bezier(0.4, 0, 0.2, 1) [delay];\n**\n*/\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-primary:focus, a.dso-primary:focus-visible,\nbutton.dso-primary:focus,\nbutton.dso-primary:focus-visible,\nlabel.dso-primary:focus,\nlabel.dso-primary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  outline: 0;\n}\na.dso-primary.extern::after, a.dso-primary.download::after,\nbutton.dso-primary.extern::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.extern::after,\nlabel.dso-primary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  background-color: var(--_dso-button-primary-background-color, #39870c);\n  border-color: var(--_dso-button-primary-border-color, #39870c);\n  color: var(--_dso-button-primary-color, #fff);\n}\na.dso-primary,\nbutton.dso-primary,\nlabel.dso-primary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-primary:hover,\nbutton.dso-primary:hover,\nlabel.dso-primary:hover {\n  background-color: var(--_dso-button-primary-hover-background-color, #275937);\n  border-color: var(--_dso-button-primary-hover-border-color, #275937);\n  color: var(--_dso-button-primary-hover-color, #fff);\n}\na.dso-primary:active,\nbutton.dso-primary:active,\nlabel.dso-primary:active {\n  background-color: var(--_dso-button-primary-active-background-color, #173521);\n  border-color: var(--_dso-button-primary-active-border-color, #173521);\n  color: var(--_dso-button-primary-active-color, #fff);\n}\na.dso-primary[disabled], a.dso-primary[disabled]:hover,\nbutton.dso-primary[disabled],\nbutton.dso-primary[disabled]:hover,\nlabel.dso-primary[disabled],\nlabel.dso-primary[disabled]:hover {\n  background-color: var(--_dso-button-primary-disabled-background-color, #afcf9d);\n  border-color: var(--_dso-button-primary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-primary-disabled-color, #fff);\n}\na.dso-primary.dso-small,\nbutton.dso-primary.dso-small,\nlabel.dso-primary.dso-small {\n  line-height: 1rem;\n}\na.dso-primary.dso-small dso-icon,\na.dso-primary.dso-small svg.di, a.dso-primary.dso-small.extern::after, a.dso-primary.dso-small.download::after, a.dso-primary.dso-small.dso-spinner::before,\nbutton.dso-primary.dso-small dso-icon,\nbutton.dso-primary.dso-small svg.di,\nbutton.dso-primary.dso-small.extern::after,\nbutton.dso-primary.dso-small.download::after,\nbutton.dso-primary.dso-small.dso-spinner::before,\nlabel.dso-primary.dso-small dso-icon,\nlabel.dso-primary.dso-small svg.di,\nlabel.dso-primary.dso-small.extern::after,\nlabel.dso-primary.dso-small.download::after,\nlabel.dso-primary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-primary.dso-small.dso-spinner-left::before,\nbutton.dso-primary.dso-small.dso-spinner-left::before,\nlabel.dso-primary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary.dso-small.dso-spinner-right::after,\nbutton.dso-primary.dso-small.dso-spinner-right::after,\nlabel.dso-primary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-primary dso-icon:has(+ span:not(.sr-only)),\na.dso-primary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-primary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-primary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-primary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-primary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-primary span:not(.sr-only) + dso-icon,\na.dso-primary span:not(.sr-only) + svg.di,\nbutton.dso-primary span:not(.sr-only) + dso-icon,\nbutton.dso-primary span:not(.sr-only) + svg.di,\nlabel.dso-primary span:not(.sr-only) + dso-icon,\nlabel.dso-primary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-primary dso-icon + span:not(.sr-only),\na.dso-primary svg.di + span:not(.sr-only),\nbutton.dso-primary dso-icon + span:not(.sr-only),\nbutton.dso-primary svg.di + span:not(.sr-only),\nlabel.dso-primary dso-icon + span:not(.sr-only),\nlabel.dso-primary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-primary.dso-spinner-left[disabled], a.dso-primary.dso-spinner-right[disabled],\nbutton.dso-primary.dso-spinner-left[disabled],\nbutton.dso-primary.dso-spinner-right[disabled],\nlabel.dso-primary.dso-spinner-left[disabled],\nlabel.dso-primary.dso-spinner-right[disabled] {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\na.dso-primary.dso-spinner-left::before,\nbutton.dso-primary.dso-spinner-left::before,\nlabel.dso-primary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-primary.dso-spinner-right::after,\nbutton.dso-primary.dso-spinner-right::after,\nlabel.dso-primary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-primary.download::after,\nbutton.dso-primary.download::after,\nlabel.dso-primary.download::after {\n  background: url(\"./di.svg#download-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-primary.extern::after,\nbutton.dso-primary.extern::after,\nlabel.dso-primary.extern::after {\n  background: url(\"./di.svg#external-link-wit\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-secondary:focus, a.dso-secondary:focus-visible,\nbutton.dso-secondary:focus,\nbutton.dso-secondary:focus-visible,\nlabel.dso-secondary:focus,\nlabel.dso-secondary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  outline: 0;\n}\na.dso-secondary.extern::after, a.dso-secondary.download::after,\nbutton.dso-secondary.extern::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.extern::after,\nlabel.dso-secondary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  background-color: var(--_dso-button-secondary-background-color, #fff);\n  border-color: var(--_dso-button-secondary-border-color, #39870c);\n  color: var(--_dso-button-secondary-color, #39870c);\n}\na.dso-secondary,\nbutton.dso-secondary,\nlabel.dso-secondary {\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n}\na.dso-secondary:hover,\nbutton.dso-secondary:hover,\nlabel.dso-secondary:hover {\n  background-color: var(--_dso-button-secondary-hover-background-color, #d7e7ce);\n  border-color: var(--_dso-button-secondary-hover-border-color, #39870c);\n  color: var(--_dso-button-secondary-hover-color, #39870c);\n}\na.dso-secondary:active,\nbutton.dso-secondary:active,\nlabel.dso-secondary:active {\n  background-color: var(--_dso-button-secondary-active-background-color, #39870c);\n  border-color: var(--_dso-button-secondary-active-border-color, #39870c);\n  color: var(--_dso-button-secondary-active-color, #fff);\n}\na.dso-secondary[disabled], a.dso-secondary[disabled]:hover,\nbutton.dso-secondary[disabled],\nbutton.dso-secondary[disabled]:hover,\nlabel.dso-secondary[disabled],\nlabel.dso-secondary[disabled]:hover {\n  background-color: var(--_dso-button-secondary-disabled-background-color, #fff);\n  border-color: var(--_dso-button-secondary-disabled-border-color, #afcf9d);\n  color: var(--_dso-button-secondary-disabled-color, #afcf9d);\n}\na.dso-secondary.dso-small,\nbutton.dso-secondary.dso-small,\nlabel.dso-secondary.dso-small {\n  line-height: 1rem;\n}\na.dso-secondary.dso-small dso-icon,\na.dso-secondary.dso-small svg.di, a.dso-secondary.dso-small.extern::after, a.dso-secondary.dso-small.download::after, a.dso-secondary.dso-small.dso-spinner::before,\nbutton.dso-secondary.dso-small dso-icon,\nbutton.dso-secondary.dso-small svg.di,\nbutton.dso-secondary.dso-small.extern::after,\nbutton.dso-secondary.dso-small.download::after,\nbutton.dso-secondary.dso-small.dso-spinner::before,\nlabel.dso-secondary.dso-small dso-icon,\nlabel.dso-secondary.dso-small svg.di,\nlabel.dso-secondary.dso-small.extern::after,\nlabel.dso-secondary.dso-small.download::after,\nlabel.dso-secondary.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\na.dso-secondary.dso-small.dso-spinner-left::before,\nbutton.dso-secondary.dso-small.dso-spinner-left::before,\nlabel.dso-secondary.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-small.dso-spinner-right::after,\nbutton.dso-secondary.dso-small.dso-spinner-right::after,\nlabel.dso-secondary.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary dso-icon:has(+ span:not(.sr-only)),\na.dso-secondary svg.di:has(+ span:not(.sr-only)),\nbutton.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nbutton.dso-secondary svg.di:has(+ span:not(.sr-only)),\nlabel.dso-secondary dso-icon:has(+ span:not(.sr-only)),\nlabel.dso-secondary svg.di:has(+ span:not(.sr-only)) {\n  margin-inline-start: -8px;\n}\na.dso-secondary span:not(.sr-only) + dso-icon,\na.dso-secondary span:not(.sr-only) + svg.di,\nbutton.dso-secondary span:not(.sr-only) + dso-icon,\nbutton.dso-secondary span:not(.sr-only) + svg.di,\nlabel.dso-secondary span:not(.sr-only) + dso-icon,\nlabel.dso-secondary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\na.dso-secondary dso-icon + span:not(.sr-only),\na.dso-secondary svg.di + span:not(.sr-only),\nbutton.dso-secondary dso-icon + span:not(.sr-only),\nbutton.dso-secondary svg.di + span:not(.sr-only),\nlabel.dso-secondary dso-icon + span:not(.sr-only),\nlabel.dso-secondary svg.di + span:not(.sr-only) {\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-left[disabled], a.dso-secondary.dso-spinner-right[disabled],\nbutton.dso-secondary.dso-spinner-left[disabled],\nbutton.dso-secondary.dso-spinner-right[disabled],\nlabel.dso-secondary.dso-spinner-left[disabled],\nlabel.dso-secondary.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\na.dso-secondary.dso-spinner-left::before,\nbutton.dso-secondary.dso-spinner-left::before,\nlabel.dso-secondary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]):hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nbutton.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before,\nlabel.dso-secondary.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.dso-spinner-right::after,\nbutton.dso-secondary.dso-spinner-right::after,\nlabel.dso-secondary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]):hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nbutton.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after,\nlabel.dso-secondary.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\na.dso-secondary.download::after,\nbutton.dso-secondary.download::after,\nlabel.dso-secondary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.download:hover::after,\nbutton.dso-secondary.download:hover::after,\nlabel.dso-secondary.download:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-wit\"));\n}\na.dso-secondary.download[disabled]::after,\nbutton.dso-secondary.download[disabled]::after,\nlabel.dso-secondary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-secondary.extern::after,\nbutton.dso-secondary.extern::after,\nlabel.dso-secondary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-secondary.extern:hover::after,\nbutton.dso-secondary.extern:hover::after,\nlabel.dso-secondary.extern:hover::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-wit\"));\n}\na.dso-secondary.extern[disabled]::after,\nbutton.dso-secondary.extern[disabled]::after,\nlabel.dso-secondary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n}\na.dso-tertiary:focus, a.dso-tertiary:focus-visible,\nbutton.dso-tertiary:focus,\nbutton.dso-tertiary:focus-visible,\nlabel.dso-tertiary:focus,\nlabel.dso-tertiary:focus-visible {\n  outline-offset: 2px;\n}\na.dso-tertiary:active,\nbutton.dso-tertiary:active,\nlabel.dso-tertiary:active {\n  outline: 0;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  content: \"\";\n  display: inline-block;\n  margin-inline-start: 8px;\n}\na.dso-tertiary,\nbutton.dso-tertiary,\nlabel.dso-tertiary {\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n}\na.dso-tertiary[disabled],\nbutton.dso-tertiary[disabled],\nlabel.dso-tertiary[disabled] {\n  color: #afcf9d;\n}\na.dso-tertiary[disabled].dso-spinner-left, a.dso-tertiary[disabled].dso-spinner-right,\nbutton.dso-tertiary[disabled].dso-spinner-left,\nbutton.dso-tertiary[disabled].dso-spinner-right,\nlabel.dso-tertiary[disabled].dso-spinner-left,\nlabel.dso-tertiary[disabled].dso-spinner-right {\n  color: #39870c;\n}\na.dso-tertiary:not([disabled]):hover,\nbutton.dso-tertiary:not([disabled]):hover,\nlabel.dso-tertiary:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\na.dso-tertiary:not([disabled]):active,\nbutton.dso-tertiary:not([disabled]):active,\nlabel.dso-tertiary:not([disabled]):active {\n  color: #173521;\n}\na.dso-tertiary.dso-align,\nbutton.dso-tertiary.dso-align,\nlabel.dso-tertiary.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding-block: 11px;\n  padding-inline: 0;\n  position: relative;\n}\na.dso-tertiary.dso-truncate,\nbutton.dso-tertiary.dso-truncate,\nlabel.dso-tertiary.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\na.dso-tertiary.dso-spinner-left::before,\nbutton.dso-tertiary.dso-spinner-left::before,\nlabel.dso-tertiary.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\na.dso-tertiary.dso-spinner-right::after,\nbutton.dso-tertiary.dso-spinner-right::after,\nlabel.dso-tertiary.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\na.dso-tertiary dso-icon + span:not(.sr-only),\na.dso-tertiary svg.di + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + dso-icon,\na.dso-tertiary span:not(.sr-only) + svg.di,\nbutton.dso-tertiary dso-icon + span:not(.sr-only),\nbutton.dso-tertiary svg.di + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + dso-icon,\nbutton.dso-tertiary span:not(.sr-only) + svg.di,\nlabel.dso-tertiary dso-icon + span:not(.sr-only),\nlabel.dso-tertiary svg.di + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + dso-icon,\nlabel.dso-tertiary span:not(.sr-only) + svg.di {\n  margin-inline-start: 8px;\n}\na.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nbutton.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up,\nlabel.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n  margin-inline-start: 4px;\n}\na.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\na.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\na.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\na.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\na.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nbutton.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nbutton.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nbutton.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nbutton.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nbutton.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right],\nlabel.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\nlabel.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\nlabel.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\nlabel.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\nlabel.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n  margin-inline-start: 0;\n}\na.dso-tertiary dso-icon,\na.dso-tertiary svg.di,\na.dso-tertiary span,\nbutton.dso-tertiary dso-icon,\nbutton.dso-tertiary svg.di,\nbutton.dso-tertiary span,\nlabel.dso-tertiary dso-icon,\nlabel.dso-tertiary svg.di,\nlabel.dso-tertiary span {\n  vertical-align: middle;\n}\na.dso-tertiary.extern::after, a.dso-tertiary.download::after,\nbutton.dso-tertiary.extern::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.extern::after,\nlabel.dso-tertiary.download::after {\n  position: relative;\n  inset-block-start: -2px;\n}\na.dso-tertiary.download::after,\nbutton.dso-tertiary.download::after,\nlabel.dso-tertiary.download::after {\n  background: url(\"./di.svg#download\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.download[disabled]::after,\nbutton.dso-tertiary.download[disabled]::after,\nlabel.dso-tertiary.download[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-grasgroen-40\"));\n}\na.dso-tertiary.download:not([disabled]):hover::after, a.dso-tertiary.download:not([disabled]):active::after,\nbutton.dso-tertiary.download:not([disabled]):hover::after,\nbutton.dso-tertiary.download:not([disabled]):active::after,\nlabel.dso-tertiary.download:not([disabled]):hover::after,\nlabel.dso-tertiary.download:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#download-bosgroen\"));\n}\na.dso-tertiary.extern::after,\nbutton.dso-tertiary.extern::after,\nlabel.dso-tertiary.extern::after {\n  background: url(\"./di.svg#external-link\") no-repeat center;\n  background-size: cover;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n}\na.dso-tertiary.extern[disabled]::after,\nbutton.dso-tertiary.extern[disabled]::after,\nlabel.dso-tertiary.extern[disabled]::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-grasgroen-40\"));\n}\na.dso-tertiary.extern:not([disabled]):hover::after, a.dso-tertiary.extern:not([disabled]):active::after,\nbutton.dso-tertiary.extern:not([disabled]):hover::after,\nbutton.dso-tertiary.extern:not([disabled]):active::after,\nlabel.dso-tertiary.extern:not([disabled]):hover::after,\nlabel.dso-tertiary.extern:not([disabled]):active::after {\n  background-image: var(--_dso-di-background-image, url(\"./di.svg#external-link-bosgroen\"));\n}\n\na.dso-primary {\n  text-decoration: none;\n}\na.dso-primary, a.dso-primary:visited {\n  color: #fff;\n}\na.dso-secondary {\n  text-decoration: none;\n}\na.dso-secondary, a.dso-secondary:visited {\n  color: #39870c;\n}\na.dso-secondary:hover, a.dso-secondary:visited:hover {\n  color: #39870c;\n}\na.dso-tertiary {\n  text-decoration: none;\n}\na.dso-tertiary, a.dso-tertiary:visited {\n  color: #39870c;\n}\n\n.dso-primary + .dso-primary,\n.dso-primary + .dso-secondary,\n.dso-primary + .dso-tertiary,\n.dso-secondary + .dso-primary,\n.dso-secondary + .dso-secondary,\n.dso-secondary + .dso-tertiary,\n.dso-tertiary + .dso-primary,\n.dso-tertiary + .dso-secondary,\n.dso-tertiary + .dso-tertiary {\n  margin-inline-start: 16px;\n}\n\n@keyframes ModalFadeIn {\n  0% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 1;\n  }\n}\n:host {\n  display: block;\n  margin-block-end: 24px;\n}\n\n.dso-header {\n  min-block-size: 32px;\n}\n.dso-header h2 {\n  color: #275937;\n  font-size: 1.5rem;\n  font-weight: 700;\n}\n.dso-header .dso-close {\n  color: #275937;\n}\n\n:host .dso-modal {\n  inset: 0px;\n  block-size: 100%;\n  position: fixed;\n  z-index: 530;\n  overflow: visible;\n  padding: 0;\n  border: 0;\n}\n:host .dso-modal::backdrop {\n  background-color: rgba(255, 255, 255, 0.8);\n}\n:host .dso-modal .dso-dialog {\n  inline-size: 640px;\n  background-color: #fff;\n  opacity: 1;\n  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);\n  animation: 200ms ease-out 0s 1 ModalFadeIn;\n}\n:host .dso-modal .dso-header {\n  position: relative;\n  padding: 16px;\n  border-block-end: 1px solid #ccc;\n}\n:host .dso-modal .dso-header h2 {\n  max-inline-size: calc(100% - 24px);\n  margin: 0;\n  color: #275937;\n}\n:host .dso-modal .dso-header .dso-close {\n  position: absolute;\n  inset-block-start: 16px;\n  inset-inline-end: 13px;\n  block-size: 32px;\n  inline-size: 32px;\n  padding: 0;\n  background-color: transparent;\n  border: 0;\n  text-align: center;\n}\n:host .dso-modal > .dso-dialog > .dso-body p {\n  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul,\n:host .dso-modal > .dso-dialog > .dso-body ol {\n  margin-block-end: 16px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body ul ul,\n:host .dso-modal > .dso-dialog > .dso-body ul ol,\n:host .dso-modal > .dso-dialog > .dso-body ol ul,\n:host .dso-modal > .dso-dialog > .dso-body ol ol {\n  margin-block-end: 0;\n}\n:host .dso-modal > .dso-dialog > .dso-body pre {\n  margin-block: 0 16px;\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > .dso-body blockquote {\n  padding-block: 16px;\n  padding-inline: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {\n  margin-block-end: 24px;\n}\n:host .dso-modal > .dso-dialog > .dso-body img {\n  block-size: auto;\n  max-inline-size: 100%;\n}\n:host .dso-modal > .dso-dialog > .dso-body {\n  block-size: calc(100% - 96px - 1.5rem);\n  max-block-size: calc(70vh - 144px - 1.5em);\n  min-block-size: 1.5rem;\n  overflow-x: auto;\n  padding: 32px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable {\n  block-size: calc(100% - 96px - 1.5rem);\n  max-block-size: calc(70vh - 144px - 1.5em);\n  min-block-size: 6.5rem;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {\n  margin-block: 0 var(--_dt-rich-content-margin-block, 16px);\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {\n  margin-block-end: 16px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {\n  padding-inline-start: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul ol,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol ul,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol ol {\n  margin-block-end: 0;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {\n  margin-block: 0 16px;\n  margin-inline: 0;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {\n  padding-block: 16px;\n  padding-inline: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {\n  margin-block-end: 24px;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {\n  block-size: auto;\n  max-inline-size: 100%;\n}\n:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {\n  padding: 32px;\n}\n:host .dso-modal .dso-body:focus-visible {\n  outline: none;\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-inline-start: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    inline-size: 100%;\n    text-align: center;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-block-start: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span {\n    float: none;\n  }\n}\n:host .dso-modal .dso-footer {\n  min-block-size: 80px;\n  padding-block: 16px;\n  padding-inline: 32px;\n  text-align: end;\n}\n@media screen and (min-width: 768px) {\n  :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {\n    margin-inline-start: 16px;\n  }\n  :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-inline-start: 0;\n  }\n}\n@media screen and (max-width: 767px) {\n  :host .dso-modal .dso-dialog {\n    max-inline-size: 100%;\n    margin-block-start: 0;\n  }\n  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {\n    margin-inline-start: 0;\n  }\n  :host .dso-modal .dso-footer button {\n    inline-size: 100%;\n    text-align: center;\n  }\n  :host .dso-modal .dso-footer button + button {\n    margin-block-start: 8px;\n  }\n  :host .dso-modal .dso-footer button.dso-tertiary,\n  :host .dso-modal .dso-footer button.dso-tertiary span {\n    float: none;\n  }\n}\n@media screen and (max-height: 380px) {\n  :host .dso-modal .dso-dialog {\n    min-block-size: 216px;\n    margin-block-start: 8px;\n    margin-block-end: 8px;\n  }\n  :host .dso-modal .dso-header {\n    padding-block: 8px;\n    padding-inline: 16px;\n  }\n  :host .dso-modal .dso-header .dso-close {\n    inset-block-start: 8px;\n  }\n  :host .dso-modal .dso-body {\n    padding-block: 16px;\n    padding-inline: 24px;\n  }\n  :host .dso-modal .dso-footer {\n    min-block-size: auto;\n    overflow: auto;\n    padding-block: 8px;\n    padding-inline: 32px;\n  }\n}\n\n.dso-modal .dso-dialog.dso-table-dialog {\n  margin-block-start: 1rem;\n  max-inline-size: calc(100% - 2rem);\n  margin-inline-start: auto;\n  margin-inline-end: auto;\n  inline-size: auto;\n}\n.dso-modal .dso-dialog.dso-table-dialog .dso-body {\n  max-block-size: calc(100vh - 112px - 1.5em - 2rem);\n}\n@media screen and (max-width: 767px) {\n  .dso-modal .dso-dialog.dso-table-dialog {\n    max-inline-size: 100%;\n  }\n}\n\n:host([is-responsive=true]) .dso-table-body {\n  border: 1px solid #ccc;\n  margin-block-end: 0;\n  overflow-y: auto;\n  inline-size: 100%;\n}\n:host([is-responsive=true]) .dso-table-body.dso-body {\n  inline-size: calc(100% - 64px);\n}\n\n.dso-table-utilities {\n  align-items: center;\n  display: flex;\n  justify-content: space-between;\n  margin-block-end: 8px;\n}\n.dso-table-utilities .dso-responsive-message {\n  margin-block-end: 0;\n}\n.dso-table-utilities .dso-responsive-message:only-child {\n  inline-size: 100%;\n}\n.dso-table-utilities .open-modal-button:only-child {\n  margin-inline-start: auto;\n}\n\n.dso-responsive-message {\n  font-size: 0.8em;\n  margin-block-end: 8px;\n  position: relative;\n  text-align: center;\n}\n\n.sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\n.dso-modal-overlay {\n  background-color: rgba(255, 255, 255, 0.8);\n  display: block;\n  position: fixed;\n  inset: 0;\n  z-index: 529;\n}\n\n.dso-table-placeholder {\n  box-shadow: inset 0 0 0 1px #ccc;\n  display: grid;\n  place-content: center;\n}";
+
+const Table = /*@__PURE__*/ proxyCustomElement(class Table extends H {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.labelledbyId = v4();
+        /**
+         * Prevents the table being opened in a modal.
+         */
+        this.noModal = false;
+        this.modalActive = false;
+    }
+    startResponsiveBehavior() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(this.host);
+    }
+    componentWillLoad() {
+        this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));
+    }
+    componentDidLoad() {
+        this.startResponsiveBehavior();
+    }
+    componentDidRender() {
+        this.setFocusTrap();
+    }
+    disconnectedCallback() {
+        var _a;
+        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
+    }
+    render() {
+        var _a, _b, _c;
+        const caption = (_b = (_a = this.host.querySelector(":scope > table > caption")) === null || _a === void 0 ? void 0 : _a.textContent) === null || _b === void 0 ? void 0 : _b.trim();
+        return (h(Host, { key: 'b20bb8cd5254e8e6d022b4c397222f7614688651', "is-responsive": (_c = this.isResponsive) === null || _c === void 0 ? void 0 : _c.toString() }, this.modalActive && this.placeholderHeight && (h("div", { key: '4f3bc04a4928f843a3cf8cf85c367e9a823ad733', class: "dso-table-placeholder", style: { height: `${this.placeholderHeight}px` } })), this.modalActive && h("div", { key: 'ab44696db6e67a7bf639b1889346e6a0f9b93f50', class: "dso-modal-overlay" }), h("div", { key: 'fb0b187652f98637797e2f566b6ed27c56e16ef6', class: { "dso-modal": this.modalActive } }, h("div", Object.assign({ key: '68a076be53936c4cdc03dc6900be22df0baf5f2e', class: { "dso-dialog": this.modalActive, "dso-table-dialog": true }, ref: (element) => (this.focusTrapElement = element) }, (this.modalActive ? { ["aria-labelledby"]: this.labelledbyId, role: "dialog" } : {})), (this.isResponsive || !this.noModal) && (h("div", { key: '018eb3c73125f59ad112556bb12714b1d4f16835', class: "dso-table-utilities", style: this.modalActive ? { display: "none" } : undefined }, this.isResponsive && (h("div", { key: 'f00bb764feee55c153ccdf18ede5b83001d9aa43', class: "dso-responsive-message" }, h("span", { key: '92f7ec692ad605724b83a610b0608497a9bf5dae' }, "beweeg de tabel van links naar rechts"))), !this.noModal && (h("button", { key: '0342eac9aa6193a07ba1868a7299518ee2f3c750', type: "button", class: "dso-tertiary open-modal-button", ref: (element) => (this.buttonElement = element), onClick: () => this.openModal() }, h("span", { key: 'c9ebbc3d2a4fabf85225b54f505c700dab61d40d', class: "sr-only" }, "tabel ", caption !== null && caption !== void 0 ? caption : "", " "), h("span", { key: 'ae5c0bfc7e8bbbf38bb1e570ccede1cd22fa912e' }, "vergroten"), h("dso-icon", { key: 'a0122dd44e958612fd03b2c93f829897decee9fb', icon: "external-link" }))))), this.modalActive && (h("div", { key: '282ec9dc6d345af64c07a37d46a7713fdf9614ab', class: "dso-header" }, h("h2", { key: 'e3d28e9221a5c7eb095c41fa793806825bf4c284', id: this.labelledbyId, class: { "sr-only": !caption } }, caption || "Uitvergrote tabel dialoog"), h("button", { key: '7a7eb3d0c8402630de9d78ce522a068ad5cbec8b', type: "button", class: "dso-close", onClick: () => this.closeModal() }, h("dso-icon", { key: '89c2be788e056f4ea03aedc4cb961130983c7e8e', icon: "times" }), h("span", { key: 'c2364e58a8c5f8d6979800ed426f5ab2941deab2', class: "sr-only" }, "Sluiten")))), h("div", { key: 'f60f63ef817d24361a2115e5ba37646dcebfd541', class: { "dso-body": this.modalActive, "dso-table-body": true } }, h("slot", { key: 'a66e801444bf25160e87b03d6fbb1ae31c58851f' }))))));
+    }
+    openModal() {
+        this.placeholderHeight = this.host.clientHeight;
+        this.modalActive = true;
+    }
+    closeModal() {
+        this.placeholderHeight = undefined;
+        this.modalActive = false;
+    }
+    setFocusTrap() {
+        var _a, _b;
+        if (this.modalActive && this.focusTrapElement && !this.trap) {
+            this.trap = createFocusTrap([this.host, this.focusTrapElement], {
+                escapeDeactivates: true,
+                clickOutsideDeactivates: (e) => {
+                    if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {
+                        this.closeModal();
+                        return false;
+                    }
+                    return true;
+                },
+                setReturnFocus: (_a = this.buttonElement) !== null && _a !== void 0 ? _a : false,
+                onDeactivate: () => this.closeModal(),
+                tabbableOptions: {
+                    getShadowRoot: true,
+                },
+            }).activate();
+        }
+        else if (!this.modalActive && this.trap) {
+            (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
+            delete this.trap;
+        }
+    }
+    setResponsiveTable([dsoTable]) {
+        if (!dsoTable) {
+            throw new Error("No dsoTable found");
+        }
+        const tableElement = dsoTable.target.querySelector("table");
+        if (dsoTable && tableElement instanceof HTMLTableElement) {
+            this.isResponsive =
+                Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);
+        }
+    }
+    get host() { return this; }
+    static get style() { return tableCss; }
+}, [1, "dso-table", {
+        "noModal": [516, "no-modal"],
+        "isResponsive": [32],
+        "modalActive": [32],
+        "placeholderHeight": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-table", "dso-icon"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-table":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Table);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { Table as T, defineCustomElement as d };
+//# sourceMappingURL=p-DIok-wvi.js.map
+
+//# sourceMappingURL=p-DIok-wvi.js.map

package/dist/bundle/{p-BtcZ9oZ6.js.map → p-DIok-wvi.js.map}

@@ -1 +1 @@
-{"file":"p-BtcZ9oZ6.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table/table.scss?tag=dso-table&encapsulation=shadow","src/components/table/table.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n@use \"~dso-toolkit/src/components/modal/modal.variables\" as modal-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n  display: block;\r\n  margin-block-end: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n  min-block-size: units.$u4;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-size: units.$font-size-h2;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .dso-close {\r\n    color: colors.$bosgroen;\r\n  }\r\n}\r\n\r\n:host .dso-modal {\r\n  inset: 0px;\r\n  block-size: 100%;\r\n  position: fixed;\r\n  z-index: zindex.$modal;\r\n\r\n  @include modal.root();\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n  margin-block-start: 1rem;\r\n  max-inline-size: calc(100% - 2rem);\r\n  margin-inline-start: auto;\r\n  margin-inline-end: auto;\r\n  inline-size: auto;\r\n\r\n  .dso-body {\r\n    $dso-body-unavailable-height: (\r\n      (2 * modal.$header-padding) + (modal.$footer-button-block-size + modal.$footer-padding)\r\n    );\r\n    max-block-size: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    max-inline-size: 100%;\r\n  }\r\n}\r\n\r\n:host([is-responsive=\"true\"]) {\r\n  .dso-table-body {\r\n    border: 1px solid table.$border-color;\r\n    margin-block-end: 0;\r\n    overflow-y: auto;\r\n    inline-size: 100%;\r\n\r\n    &.dso-body {\r\n      inline-size: calc(100% - modal.$body-padding * 2);\r\n    }\r\n  }\r\n}\r\n\r\n.dso-table-utilities {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block-end: units.$u1;\r\n\r\n  .dso-responsive-message {\r\n    margin-block-end: 0;\r\n\r\n    &:only-child {\r\n      inline-size: 100%;\r\n    }\r\n  }\r\n\r\n  .open-modal-button {\r\n    &:only-child {\r\n      margin-inline-start: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-responsive-message {\r\n  font-size: 0.8em;\r\n  margin-block-end: units.$u1;\r\n  position: relative;\r\n  text-align: center;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n  background-color: color.scale(modal-variables.$backdrop-bg, $alpha: modal-variables.$backdrop-opacity);\r\n  display: block;\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: zindex.$modal-background-overlay;\r\n}\r\n\r\n.dso-table-placeholder {\r\n  box-shadow: inset 0 0 0 1px table.$border-color;\r\n  display: grid;\r\n  place-content: center;\r\n}\r\n","import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  @State()\r\n  isResponsive?: boolean;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host is-responsive={this.isResponsive?.toString()}>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-DIok-wvi.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/table/table.scss?tag=dso-table&encapsulation=shadow","src/components/table/table.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/components/grid/grid.variables\" as grid-variables;\r\n@use \"~dso-toolkit/src/components/modal/modal.variables\" as modal-variables;\r\n\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/components/button/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/components/rich-content\";\r\n@use \"~dso-toolkit/src/components/table\";\r\n\r\n:host {\r\n  display: block;\r\n  margin-block-end: units.$u3;\r\n}\r\n\r\n.dso-header {\r\n  min-block-size: units.$u4;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-size: units.$font-size-h2;\r\n    font-weight: 700;\r\n  }\r\n\r\n  .dso-close {\r\n    color: colors.$bosgroen;\r\n  }\r\n}\r\n\r\n:host .dso-modal {\r\n  inset: 0px;\r\n  block-size: 100%;\r\n  position: fixed;\r\n  z-index: zindex.$modal;\r\n\r\n  @include modal.root();\r\n}\r\n\r\n.dso-modal .dso-dialog.dso-table-dialog {\r\n  margin-block-start: 1rem;\r\n  max-inline-size: calc(100% - 2rem);\r\n  margin-inline-start: auto;\r\n  margin-inline-end: auto;\r\n  inline-size: auto;\r\n\r\n  .dso-body {\r\n    $dso-body-unavailable-height: (\r\n      (2 * modal.$header-padding) + (modal.$footer-button-block-size + modal.$footer-padding)\r\n    );\r\n    max-block-size: calc(100vh - #{$dso-body-unavailable-height} - 1.5em - 2rem); // margin\r\n  }\r\n\r\n  @media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n    max-inline-size: 100%;\r\n  }\r\n}\r\n\r\n:host([is-responsive=\"true\"]) {\r\n  .dso-table-body {\r\n    border: 1px solid table.$border-color;\r\n    margin-block-end: 0;\r\n    overflow-y: auto;\r\n    inline-size: 100%;\r\n\r\n    &.dso-body {\r\n      inline-size: calc(100% - modal.$body-padding * 2);\r\n    }\r\n  }\r\n}\r\n\r\n.dso-table-utilities {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  margin-block-end: units.$u1;\r\n\r\n  .dso-responsive-message {\r\n    margin-block-end: 0;\r\n\r\n    &:only-child {\r\n      inline-size: 100%;\r\n    }\r\n  }\r\n\r\n  .open-modal-button {\r\n    &:only-child {\r\n      margin-inline-start: auto;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-responsive-message {\r\n  font-size: 0.8em;\r\n  margin-block-end: units.$u1;\r\n  position: relative;\r\n  text-align: center;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n.dso-modal-overlay {\r\n  background-color: color.scale(modal-variables.$backdrop-bg, $alpha: modal-variables.$backdrop-opacity);\r\n  display: block;\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: zindex.$modal-background-overlay;\r\n}\r\n\r\n.dso-table-placeholder {\r\n  box-shadow: inset 0 0 0 1px table.$border-color;\r\n  display: grid;\r\n  place-content: center;\r\n}\r\n","import { Component, ComponentInterface, Element, Host, Prop, State, h } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  @State()\r\n  isResponsive?: boolean;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host is-responsive={this.isResponsive?.toString()}>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-D2nuXSd0.js → p-DTtP46RI.js}

@@ -577,7 +577,7 @@ var wipWip = `<svg id="wip-wip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0
 </svg>
 `;
 
-const iconCss = ":host{display:inline-block;block-size:24px;vertical-align:top;inline-size:24px}*,*::after,*::before{box-sizing:border-box}.icon-container{display:block;line-height:0}";
+const iconCss = "@charset \"UTF-8\";:host{display:inline-block;block-size:24px;vertical-align:top;inline-size:24px}*,*::after,*::before{box-sizing:border-box}.icon-container{display:block;line-height:0}";
 
 const icons = [
     { alias: "air", svg: air },
@@ -718,6 +718,6 @@ function defineCustomElement() {
 }
 
 export { Icon as I, defineCustomElement as d };
-//# sourceMappingURL=p-D2nuXSd0.js.map
+//# sourceMappingURL=p-DTtP46RI.js.map
 
-//# sourceMappingURL=p-D2nuXSd0.js.map
+//# sourceMappingURL=p-DTtP46RI.js.map