@dso-toolkit/core 84.1.0 → 85.0.0

package/dist/bundle/{p-DQrlJzt1.js → p-B39ewelJ.js}

@@ -1,8 +1,8 @@
-import { p as proxyCustomElement, H, e as createEvent, h, t as transformTag } from './p-BeWimuZg.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBWrx_3r.js';
 import { c as clsx } from './p-ChV9xqsO.js';
-import { i as i18n } from './p-C0ZvZbHD.js';
-import { d as defineCustomElement$2 } from './p-DMYengW8.js';
-import { d as defineCustomElement$1 } from './p-DzcyUrLK.js';
+import { i as i18n } from './p-pxiVAmq4.js';
+import { d as defineCustomElement$2 } from './p-DAPEW-cK.js';
+import { d as defineCustomElement$1 } from './p-BheZWHUU.js';
 
 const translations = {
     en: {
@@ -25,7 +25,7 @@ const translations = {
     },
 };
 
-const alertCss = () => `:host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.alert{line-height:1.5;margin-block-end:var(--_dso-alert-margin-block-end, 24px);min-block-size:56px;position:relative;border:1px solid transparent}@media screen and (min-width: 481px){.alert{padding-block:15px;padding-inline:54px 39px}.alert.dso-compact{padding-block:7px;padding-inline:15px 39px}}@media screen and (max-width: 480px){.alert{padding-block:54px 15px;padding-inline:15px}.alert.dso-compact{padding-block:7px;padding-inline:15px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:15px;inset-inline-start:15px;position:absolute}.alert.dso-compact{border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}.alert.dso-compact::before{content:"";position:absolute;inset-block-start:-1px;inset-block-end:-1px;inset-inline-start:-9px;border-start-start-radius:8px;border-end-start-radius:8px;inline-size:8px}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-success 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"))}.alert.alert-success 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"))}.alert.alert-success 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"))}.alert.alert-success 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"))}.alert.alert-success{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}.alert.alert-success{border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-error 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"))}.alert.alert-error 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"))}.alert.alert-error 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"))}.alert.alert-error 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"))}.alert.alert-error{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}.alert.alert-error{border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-warning 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"))}.alert.alert-warning 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"))}.alert.alert-warning 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"))}.alert.alert-warning 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"))}.alert.alert-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919}.alert.alert-warning{border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-info 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"))}.alert.alert-info 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"))}.alert.alert-info 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"))}.alert.alert-info 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"))}.alert.alert-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919}.alert.alert-info{border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}`;
+const alertCss = () => `:host{display:block}:host(:not(:first-child)){margin-block-start:24px}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}.alert{line-height:1.5;margin-block-end:var(--_dso-alert-margin-block-end, 24px);min-block-size:56px;position:relative;border:1px solid transparent}@media screen and (min-width: 481px){.alert{padding-block:15px;padding-inline:54px 39px}.alert.dso-compact{padding-block:7px;padding-inline:15px 39px}}@media screen and (max-width: 480px){.alert{padding-block:54px 15px;padding-inline:15px}.alert.dso-compact{padding-block:7px;padding-inline:15px}}.alert:not(:first-child){margin-block-start:24px}.alert .icon-status{inset-block-start:15px;inset-inline-start:15px;position:absolute}.alert.dso-compact{border-end-end-radius:8px;border-start-end-radius:8px;margin-inline-start:8px}.alert.dso-compact::before{content:"";position:absolute;inset-block-start:-1px;inset-block-end:-1px;inset-inline-start:-9px;border-start-start-radius:8px;border-end-start-radius:8px;inline-size:8px}.alert.dso-compact{min-block-size:16px}.alert.alert-success{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-success 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"))}.alert.alert-success 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"))}.alert.alert-success 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"))}.alert.alert-success 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"))}.alert.alert-success{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;border-color:var(--_dso-alert-success-border-color, #e4f1d4)}.alert.alert-success.dso-compact::before{background-color:#39870c}.alert.alert-error{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-error 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"))}.alert.alert-error 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"))}.alert.alert-error 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"))}.alert.alert-error 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"))}.alert.alert-error{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;border-color:var(--_dso-alert-error-border-color, #f5d8dc)}.alert.alert-error.dso-compact::before{background-color:#ce3f51}.alert.alert-warning{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-warning 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"))}.alert.alert-warning 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"))}.alert.alert-warning 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"))}.alert.alert-warning 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"))}.alert.alert-warning{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f8f6cc;color:#191919;border-color:var(--_dso-alert-warning-border-color, #f8f6cc)}.alert.alert-warning.dso-compact::before{background-color:#dcd400}.alert.alert-info{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.alert.alert-info 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"))}.alert.alert-info 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"))}.alert.alert-info 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"))}.alert.alert-info 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"))}.alert.alert-info{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e1ecf7;color:#191919;border-color:var(--_dso-alert-info-border-color, #e1ecf7)}.alert.alert-info.dso-compact::before{background-color:#6ca4d9}.alert dso-icon-button{position:absolute;inset-block-start:7px;inset-inline-end:7px}.alert.dso-compact{min-block-size:16px}`;
 
 const Alert = /*@__PURE__*/ proxyCustomElement(class Alert extends H {
     constructor(registerHost) {
@@ -81,6 +81,6 @@ function defineCustomElement() {
 }
 
 export { Alert as A, defineCustomElement as d };
-//# sourceMappingURL=p-DQrlJzt1.js.map
+//# sourceMappingURL=p-B39ewelJ.js.map
 
-//# sourceMappingURL=p-DQrlJzt1.js.map
+//# sourceMappingURL=p-B39ewelJ.js.map

package/dist/bundle/{p-DQrlJzt1.js.map → p-B39ewelJ.js.map}

@@ -1 +1 @@
-{"file":"p-DQrlJzt1.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,MAAM,CAAC,6gNAA6gN,CAAC;;MCazhN,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA4BnD;IA1BC,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,EAAE,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,wEACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,CACH,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-icon-button {\r\n    position: absolute;\r\n    inset-block-start: units.$u1 - alert.$border-size;\r\n    inset-inline-end: units.$u1 - alert.$border-size;\r\n  }\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          <dso-icon-button\r\n            label={this.text(\"close\")}\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-B39ewelJ.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,MAAM,CAAC,87MAA87M,CAAC;;MCa18M,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AA2BE;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAQR,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AA4BnD;IA1BC,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,EAAE,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,wEACE,KAAK,EAAE,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EACzB,OAAO,EAAC,UAAU,EAClB,IAAI,EAAC,OAAO,EACZ,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAC3D,CAAA,CACH,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-icon-button {\r\n    position: absolute;\r\n    inset-block-start: units.$u1 - alert.$border-size;\r\n    inset-inline-end: units.$u1 - alert.$border-size;\r\n  }\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          <dso-icon-button\r\n            label={this.text(\"close\")}\r\n            variant=\"tertiary\"\r\n            icon=\"times\"\r\n            onDsoClick={(e) => this.dsoClose.emit({ originalEvent: e })}\r\n          />\r\n        )}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-DKYkKOQE.js → p-B4kCTpCL.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host, t as transformTag } from './p-BeWimuZg.js';
-import { d as defineCustomElement$2 } from './p-DMYengW8.js';
-import { d as defineCustomElement$1 } from './p-DzcyUrLK.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
+import { d as defineCustomElement$2 } from './p-DAPEW-cK.js';
+import { d as defineCustomElement$1 } from './p-BheZWHUU.js';
 
 const infoButtonCss = () => `:host{display:inline-block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:rect(0 0 0 0)}button{background-color:transparent;color:#39870c;border:0;margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);padding:0}button.dso-info-secondary{color:#666}button{vertical-align:top;line-height:1}dso-icon-button{margin-inline-start:var(--_dt-info-button-margin-inline-start, 8px);vertical-align:top}`;
 
@@ -68,6 +68,6 @@ function defineCustomElement() {
 }
 
 export { InfoButton as I, defineCustomElement as d };
-//# sourceMappingURL=p-DKYkKOQE.js.map
+//# sourceMappingURL=p-B4kCTpCL.js.map
 
-//# sourceMappingURL=p-DKYkKOQE.js.map
+//# sourceMappingURL=p-B4kCTpCL.js.map

package/dist/bundle/{p-DKYkKOQE.js.map → p-B4kCTpCL.js.map}

@@ -1 +1 @@
-{"file":"p-DKYkKOQE.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ogBAAogB,CAAC;;MCSrhB,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAgBE,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAQb;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,uBAAuB;AAiDhC;AAzCC;;AAEG;AAEH,IAAA,MAAM,QAAQ,GAAA;;QACZ,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;QACvB,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGvB,IAAA,YAAY,CAAC,aAAyB,EAAA;AAC5C,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;IAG7D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EAAA,EACpF,CAAC,IAAI,CAAC,SAAS,IACd,CACE,CAAA,iBAAA,EAAA,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAC5D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,EACxD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,EACzC,CAAA;;QAGF,CACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,oBAAoB,EAAA,eAAA,EACX,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,EAAA,EAElD,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,EAAa,CAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\nbutton {\r\n  @include info-button.root();\r\n\r\n  vertical-align: top;\r\n  line-height: 1;\r\n}\r\n\r\ndso-icon-button {\r\n  margin-inline-start: var(--_dt-info-button-margin-inline-start, units.$u1);\r\n  vertical-align: top;\r\n}\r\n","import { Component, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLDsoIconButtonElement;\r\n  private buttonSecondary?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.setFocus();\r\n    this.buttonSecondary?.focus();\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        {!this.secondary ? (\r\n          <dso-icon-button\r\n            variant=\"tertiary\"\r\n            label={this.label}\r\n            onDsoClick={(e) => this.handleToggle(e.detail.originalEvent)}\r\n            icon={this.active || this.hover ? \"info-active\" : \"info\"}\r\n            ref={(element) => (this.button = element)}\r\n          />\r\n        ) : (\r\n          // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-info-secondary\"\r\n            aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n            onClick={(e) => this.handleToggle(e)}\r\n            ref={(element) => (this.buttonSecondary = element)}\r\n          >\r\n            <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-B4kCTpCL.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ogBAAogB,CAAC;;MCSrhB,UAAU,iBAAAA,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;AAgBE,QAAA,IAAK,CAAA,KAAA,GAAG,KAAK;AAQb;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,uBAAuB;AAiDhC;AAzCC;;AAEG;AAEH,IAAA,MAAM,QAAQ,GAAA;;QACZ,CAAA,EAAA,GAAA,IAAI,CAAC,MAAM,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;QACvB,CAAA,EAAA,GAAA,IAAI,CAAC,eAAe,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,EAAE;;AAGvB,IAAA,YAAY,CAAC,aAAyB,EAAA;AAC5C,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;AAC1B,QAAA,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;;IAG7D,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,OAAO,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC,EAAA,EACpF,CAAC,IAAI,CAAC,SAAS,IACd,CACE,CAAA,iBAAA,EAAA,EAAA,OAAO,EAAC,UAAU,EAClB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,MAAM,CAAC,aAAa,CAAC,EAC5D,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,EACxD,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC,EACzC,CAAA;;QAGF,CACE,CAAA,QAAA,EAAA,EAAA,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,oBAAoB,EAAA,eAAA,EACX,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,GAAG,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,eAAe,GAAG,OAAO,CAAC,EAAA,EAElD,CAAA,CAAA,UAAA,EAAA,EAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,GAAG,aAAa,GAAG,MAAM,EAAa,CAAA,EAC/E,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,SAAS,EAAA,EAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACV,CACI;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/info-button/info-button.scss?tag=dso-info-button&encapsulation=shadow","src/components/info-button/info-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/info-button\";\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\nbutton {\r\n  @include info-button.root();\r\n\r\n  vertical-align: top;\r\n  line-height: 1;\r\n}\r\n\r\ndso-icon-button {\r\n  margin-inline-start: var(--_dt-info-button-margin-inline-start, units.$u1);\r\n  vertical-align: top;\r\n}\r\n","import { Component, Event, EventEmitter, Host, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLDsoIconButtonElement;\r\n  private buttonSecondary?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.setFocus();\r\n    this.buttonSecondary?.focus();\r\n  }\r\n\r\n  private handleToggle(originalEvent: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        {!this.secondary ? (\r\n          <dso-icon-button\r\n            variant=\"tertiary\"\r\n            label={this.label}\r\n            onDsoClick={(e) => this.handleToggle(e.detail.originalEvent)}\r\n            icon={this.active || this.hover ? \"info-active\" : \"info\"}\r\n            ref={(element) => (this.button = element)}\r\n          />\r\n        ) : (\r\n          // ToDo: remove this part in https://github.com/dso-toolkit/dso-toolkit/issues/3350. Tertiary on color already working\r\n          <button\r\n            type=\"button\"\r\n            class=\"dso-info-secondary\"\r\n            aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n            onClick={(e) => this.handleToggle(e)}\r\n            ref={(element) => (this.buttonSecondary = element)}\r\n          >\r\n            <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n            <span class=\"sr-only\">{this.label}</span>\r\n          </button>\r\n        )}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-DLxGu5_c.js → p-BCQXZLJD.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host, t as transformTag } from './p-BeWimuZg.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 
 const responsiveElementCss = () => `:host{display:block}`;
 
@@ -49,7 +49,7 @@ const ResponsiveElement = /*@__PURE__*/ proxyCustomElement(class ResponsiveEleme
         this.observer.unobserve(this.host);
     }
     render() {
-        return (h(Host, { key: '5718aa211beb1acabca634055f92410c5df334e8', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'de6078715bde5780643275f38e0e3d74bd5efb99' })));
+        return (h(Host, { key: '7d0611bd77c632293da4474e8dbd1c3eecacbd55', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '37f5f78e2bb3978015e9db494164ff532195d55f' })));
     }
     get host() { return this; }
     static get style() { return responsiveElementCss(); }
@@ -73,6 +73,6 @@ function defineCustomElement() {
 }
 
 export { ResponsiveElement as R, defineCustomElement as d };
-//# sourceMappingURL=p-DLxGu5_c.js.map
+//# sourceMappingURL=p-BCQXZLJD.js.map
 
-//# sourceMappingURL=p-DLxGu5_c.js.map
+//# sourceMappingURL=p-BCQXZLJD.js.map

package/dist/bundle/{p-DLxGu5_c.js.map → p-BCQXZLJD.js.map}

@@ -1 +1 @@
-{"file":"p-DLxGu5_c.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,oBAAoB,CAAC;;ACIzD,MAAM,YAAY,GAA4C;AAC5D,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;CACF;MAOY,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAOE,IAAA,CAAA,SAAS,GAA0B,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAGxD,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;QAgBL,IAAQ,CAAA,QAAA,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;;YAChD,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC;;AAGnC,YAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAEzG,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,SAAC,CAAC;AAoBH;AArCC;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,IAAI,CAAC,SAAS;;IAiBvB,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,oBAAoB,GAAA;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGpC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAA,EAC7G,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, State, h } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-BCQXZLJD.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,MAAM,CAAC,oBAAoB,CAAC;;ACIzD,MAAM,YAAY,GAA4C;AAC5D,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,GAAG;AACV,QAAA,KAAK,EAAE,QAAQ;AAChB,KAAA;AACD,IAAA;AACE,QAAA,KAAK,EAAE,CAAC;AACR,QAAA,KAAK,EAAE,OAAO;AACf,KAAA;CACF;MAOY,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;QAOE,IAAA,CAAA,SAAS,GAA0B,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAGxD,QAAA,IAAS,CAAA,SAAA,GAAG,CAAC;QAgBL,IAAQ,CAAA,QAAA,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,KAAI;;YAChD,IAAI,CAAC,KAAK,EAAE;AACV,gBAAA,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC;;AAGnC,YAAA,MAAM,IAAI,GAAG,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,KAAK,MAAI,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAA,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;AAEzG,YAAA,IAAI,CAAC,SAAS,GAAG,IAAI;AACrB,YAAA,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC;AAC/B,SAAC,CAAC;AAoBH;AArCC;;AAEG;AAEH,IAAA,MAAM,OAAO,GAAA;QACX,OAAO,IAAI,CAAC,SAAS;;IAiBvB,iBAAiB,GAAA;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGlC,oBAAoB,GAAA;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC;;IAGpC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAA,EAC7G,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Host, Method, State, h } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/p-BbhVKEjM.js

@@ -0,0 +1,88 @@
+import { p as proxyCustomElement, H, d as createEvent, h, F as Fragment, t as transformTag } from './p-DBWrx_3r.js';
+import { A as AnnotationBody } from './p-Bl7SFp3l.js';
+import { w as watcher, A as AnnotationGewijzigdeLocatie, a as AnnotationSymbolSlot } from './p-DGOjLHXF.js';
+import { d as defineCustomElement$6 } from './p-DAPEW-cK.js';
+import { d as defineCustomElement$5 } from './p-BheZWHUU.js';
+import { d as defineCustomElement$4 } from './p-Dz-kOE9B.js';
+import { d as defineCustomElement$3 } from './p-xauW4yDb.js';
+import { d as defineCustomElement$2 } from './p-CVAPkfaq.js';
+import { d as defineCustomElement$1 } from './p-DiVQLv2Z.js';
+
+const annotationCss = () => `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 dso-icon+span,a span+dso-icon{margin-inline-start:8px}a .sr-only+dso-icon{margin-inline-start:0}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;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;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;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;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]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}: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]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919;box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}:host([wijzigactie=verwijder]){--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}: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]){--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919;--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline 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(registerHost) {
+        super();
+        if (registerHost !== false) {
+            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: '662684126533447bdee1394221937203261601be', 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(); }
+}, [257, "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-icon-button", "dso-label", "dso-renvooi", "dso-slide-toggle", "dso-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-annotation-locatie":
+            if (!customElements.get(transformTag(tagName))) {
+                customElements.define(transformTag(tagName), AnnotationLocatie);
+            }
+            break;
+        case "dso-icon":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$6();
+            }
+            break;
+        case "dso-icon-button":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$5();
+            }
+            break;
+        case "dso-label":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$4();
+            }
+            break;
+        case "dso-renvooi":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$3();
+            }
+            break;
+        case "dso-slide-toggle":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$2();
+            }
+            break;
+        case "dso-tooltip":
+            if (!customElements.get(transformTag(tagName))) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { AnnotationLocatie as A, defineCustomElement as d };
+//# sourceMappingURL=p-BbhVKEjM.js.map
+
+//# sourceMappingURL=p-BbhVKEjM.js.map

package/dist/bundle/{p-BvyQic2U.js.map → p-BbhVKEjM.js.map}

@@ -1 +1 @@
-{"file":"p-BvyQic2U.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,g5MAAg5M,CAAC;;MCiBj6M,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;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-BbhVKEjM.js","mappings":";;;;;;;;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,ikMAAikM,CAAC;;MCiBllM,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;;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-ByyagXOJ.js → p-BgsDpCHt.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-BeWimuZg.js';
-import { i as i18n } from './p-C0ZvZbHD.js';
-import { d as defineCustomElement$1 } from './p-DMYengW8.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
+import { i as i18n } from './p-pxiVAmq4.js';
+import { d as defineCustomElement$1 } from './p-DAPEW-cK.js';
 
 const translations = {
     en: {
@@ -27,7 +27,7 @@ const Progressindicator = /*@__PURE__*/ proxyCustomElement(class Progressindicat
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: 'cd6737c28d3a68a15a1ef6da4e0f5b50ac6ef7e2' }, h("span", { key: '2ef9ebc64dac7b768da7d38293016586b560cd8c', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '57bac10449cb3640c69bd266065e413b6162840f', icon: "spinner" })), h("span", { key: 'bf4e4016ad21bee5c3264a22288d46c005bb86d7', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: '95e6584eaa29acecfe451a336745944a2980fb4d' }, h("span", { key: 'bab370d7eccad339e382eebfbc973542fa96a409', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '2591f8e4aff92237d15c758edf43c0dd38b6cb58', icon: "spinner" })), h("span", { key: '259378a3ecf6246b99d72992777e8e92bca12eb9', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     get host() { return this; }
     static get style() { return progressIndicatorCss(); }
@@ -56,6 +56,6 @@ function defineCustomElement() {
 }
 
 export { Progressindicator as P, defineCustomElement as d };
-//# sourceMappingURL=p-ByyagXOJ.js.map
+//# sourceMappingURL=p-BgsDpCHt.js.map
 
-//# sourceMappingURL=p-ByyagXOJ.js.map
+//# sourceMappingURL=p-BgsDpCHt.js.map

package/dist/bundle/{p-ByyagXOJ.js.map → p-BgsDpCHt.js.map}

@@ -1 +1 @@
-{"file":"p-ByyagXOJ.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,MAAM,CAAC,ggCAAggC,CAAC;;MCWxhC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;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/variables/units\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _looping-size($progress-indicator-size) {\r\n  .dso-progress-indicator-spinner,\r\n  dso-icon {\r\n    block-size: $progress-indicator-size;\r\n    inline-size: $progress-indicator-size;\r\n  }\r\n}\r\n\r\n.dso-progress-indicator-spinner {\r\n  display: inline-block;\r\n  margin: 0;\r\n  position: relative;\r\n  vertical-align: middle;\r\n}\r\n\r\nspan.dso-progress-indicator-label {\r\n  margin-inline-start: units.$u2;\r\n  vertical-align: middle;\r\n}\r\n\r\n:host([block]) {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include _looping-size(24px);\r\n\r\n  &:host([block]) {\r\n    padding-block: units.$u1 * 1.5;\r\n    padding-inline: units.$u2;\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include _looping-size(32px);\r\n\r\n  &:host([block]) {\r\n    padding: units.$u2;\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include _looping-size(48px);\r\n\r\n  &:host([block]) {\r\n    padding-block: units.$u3;\r\n    padding-inline: units.$u2;\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-BgsDpCHt.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,MAAM,CAAC,ggCAAggC,CAAC;;MCWxhC,iBAAiB,iBAAAA,kBAAA,CAAA,MAAA,iBAAA,SAAAC,CAAA,CAAA;AAL9B,IAAA,WAAA,CAAA,YAAA,EAAA;;;;;;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/variables/units\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n@mixin _looping-size($progress-indicator-size) {\r\n  .dso-progress-indicator-spinner,\r\n  dso-icon {\r\n    block-size: $progress-indicator-size;\r\n    inline-size: $progress-indicator-size;\r\n  }\r\n}\r\n\r\n.dso-progress-indicator-spinner {\r\n  display: inline-block;\r\n  margin: 0;\r\n  position: relative;\r\n  vertical-align: middle;\r\n}\r\n\r\nspan.dso-progress-indicator-label {\r\n  margin-inline-start: units.$u2;\r\n  vertical-align: middle;\r\n}\r\n\r\n:host([block]) {\r\n  align-items: center;\r\n  display: flex;\r\n  justify-content: center;\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n  @include _looping-size(24px);\r\n\r\n  &:host([block]) {\r\n    padding-block: units.$u1 * 1.5;\r\n    padding-inline: units.$u2;\r\n  }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n  @include _looping-size(32px);\r\n\r\n  &:host([block]) {\r\n    padding: units.$u2;\r\n  }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n  @include _looping-size(48px);\r\n\r\n  &:host([block]) {\r\n    padding-block: units.$u3;\r\n    padding-inline: units.$u2;\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-DzcyUrLK.js → p-BheZWHUU.js}

@@ -1,6 +1,6 @@
-import { p as proxyCustomElement, H, e as createEvent, h, t as transformTag } from './p-BeWimuZg.js';
-import { p as positionTooltip, T as Tooltip } from './p-DopSenBv.js';
-import { d as defineCustomElement$1 } from './p-DMYengW8.js';
+import { p as proxyCustomElement, H, d as createEvent, h, t as transformTag } from './p-DBWrx_3r.js';
+import { p as positionTooltip, T as Tooltip } from './p-kKdt-6mr.js';
+import { d as defineCustomElement$1 } from './p-DAPEW-cK.js';
 
 const iconButtonCss = () => `.dso-tooltip {
   --_dso-alert-success-border-color: #39870c;
@@ -27,8 +27,6 @@ const iconButtonCss = () => `.dso-tooltip {
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   color: #fff;
-}
-.dso-tooltip {
   border-radius: 4px;
   overflow: unset;
   margin: 0;
@@ -68,8 +66,6 @@ const iconButtonCss = () => `.dso-tooltip {
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   color: #fff;
-}
-.dso-tooltip .tooltip-inner {
   font-family: Asap, sans-serif;
   font-size: 1rem;
   font-weight: normal;
@@ -104,8 +100,6 @@ const iconButtonCss = () => `.dso-tooltip {
   --_dso-icon-button-tertiary-color: #fff;
   background-color: #666;
   color: #fff;
-}
-.dso-tooltip .tooltip-arrow {
   position: absolute;
   border-start-start-radius: 4px;
   block-size: 8px;
@@ -151,8 +145,6 @@ const iconButtonCss = () => `.dso-tooltip {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-}
-.dso-secondary {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -337,8 +329,6 @@ const iconButtonCss = () => `.dso-tooltip {
   background-color: var(--_dso-button-secondary-background-color, #fff);
   border-color: var(--_dso-button-secondary-border-color, #39870c);
   color: var(--_dso-button-secondary-color, #39870c);
-}
-.dso-map {
   border-width: 1px;
   border-style: solid;
   border-radius: 4px;
@@ -612,6 +602,6 @@ function defineCustomElement() {
 }
 
 export { IconButton as I, defineCustomElement as d };
-//# sourceMappingURL=p-DzcyUrLK.js.map
+//# sourceMappingURL=p-BheZWHUU.js.map
 
-//# sourceMappingURL=p-DzcyUrLK.js.map
+//# sourceMappingURL=p-BheZWHUU.js.map

package/dist/bundle/p-BheZWHUU.js.map

@@ -0,0 +1 @@
+{"file":"p-BheZWHUU.js","mappings":";;;;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC;AAC7B;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon-button/icon-button.scss?tag=dso-icon-button&encapsulation=shadow","src/components/icon-button/icon-button.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"../../functional-components/tooltip\";\r\n\r\n@include tooltip.include(colors.$grijs-60, 4px, units.$u1, 0, units.$u1);\r\n\r\n:host {\r\n  display: inline-block;\r\n  line-height: 1;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-secondary {\r\n  @include button.secondary();\r\n\r\n  padding-inline: calc(#{units.$u1} - 1px);\r\n  padding-block: calc(#{units.$u1} - 1px);\r\n}\r\n\r\n.dso-tertiary {\r\n  @include button.base();\r\n\r\n  padding-inline: 0;\r\n  padding-block: 0;\r\n\r\n  color: var(--_dso-icon-button-tertiary-color, button.$tertiary-color);\r\n  background-color: transparent;\r\n  border: 0;\r\n\r\n  &:not([disabled]) {\r\n    &:hover {\r\n      color: var(\r\n        --_dso-icon-button-tertiary-hover-color,\r\n        var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n      );\r\n    }\r\n\r\n    &:active {\r\n      color: var(\r\n        --_dso-icon-button-tertiary-active-color,\r\n        var(--_dso-icon-button-tertiary-color, button.$tertiary-hover-color)\r\n      );\r\n    }\r\n  }\r\n\r\n  &[disabled] {\r\n    color: var(\r\n      --_dso-icon-button-tertiary-disabled-color,\r\n      var(--_dso-icon-button-tertiary-color, button.$tertiary-disabled-color)\r\n    );\r\n  }\r\n}\r\n\r\n.dso-map {\r\n  @include button.map();\r\n\r\n  padding-inline: units.$u1;\r\n  padding-block: units.$u1;\r\n  border: 0;\r\n  margin-inline-end: 0;\r\n  box-shadow: var(--_dso-icon-button-map-box-shadow, 0 0 8px 0 rgba(0, 0, 0, 0.3));\r\n  border-radius: var(--_dso-icon-button-map-border-radius, button.$border-radius);\r\n}\r\n\r\n.icon-button {\r\n  min-inline-size: auto;\r\n  cursor: pointer;\r\n\r\n  &[disabled] {\r\n    cursor: default;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Event, EventEmitter, Method, Prop, State, h } from \"@stencil/core\";\r\n\r\nimport { positionTooltip } from \"../../functional-components/tooltip/position-tooltip.function\";\r\nimport { Tooltip } from \"../../functional-components/tooltip/tooltip.functional-component\";\r\nimport { TooltipClean, TooltipPlacement } from \"../../functional-components/tooltip/tooltip.interfaces\";\r\n\r\nimport { IconButtonClickEvent, IconButtonVariant } from \"./icon-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-icon-button\",\r\n  styleUrl: \"icon-button.scss\",\r\n  shadow: true,\r\n})\r\nexport class IconButton implements ComponentInterface {\r\n  /**\r\n   * The alias of the icon in the button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  icon!: string | undefined;\r\n\r\n  /**\r\n   * The label of the Icon Button which is shown on hover in a tooltip.\r\n   */\r\n  @Prop({ reflect: true })\r\n  label!: string | undefined;\r\n\r\n  /**\r\n   * The variant of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  variant?: IconButtonVariant = \"secondary\";\r\n\r\n  /**\r\n   * The placement of the tooltip on hover and focus of the Icon Button.\r\n   */\r\n  @Prop({ reflect: true })\r\n  tooltipPlacement: TooltipPlacement = \"top\";\r\n\r\n  /**\r\n   * To disable the Icon Button\r\n   */\r\n  @Prop({ reflect: true })\r\n  disabled = false;\r\n\r\n  /**\r\n   * Emitted when the user clicks the Icon Button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<IconButtonClickEvent>;\r\n\r\n  @State()\r\n  showTooltip = false;\r\n\r\n  /**\r\n   * Focuses the button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.buttonElRef?.focus();\r\n  }\r\n\r\n  private buttonElRef?: HTMLButtonElement;\r\n  private tooltipElRef?: HTMLDivElement;\r\n  private tipArrowElRef?: HTMLSpanElement;\r\n  private tooltipTimeout?: number;\r\n  private cleanUp: TooltipClean | undefined;\r\n  private lastClickTime = 0;\r\n  private tooltipShowDelay = 500;\r\n\r\n  private handleShowTooltip = () => {\r\n    if (this.disabled) {\r\n      return;\r\n    }\r\n\r\n    // Don't show the tooltip if the button is clicked within 500ms of the last click\r\n    if (Date.now() - this.lastClickTime < this.tooltipShowDelay) {\r\n      return;\r\n    }\r\n\r\n    this.clearToolTipTimeout();\r\n\r\n    this.tooltipTimeout = window.setTimeout(() => {\r\n      if (!this.tooltipElRef?.isConnected) {\r\n        return;\r\n      }\r\n\r\n      this.showTooltip = true;\r\n      this.tooltipElRef?.showPopover();\r\n\r\n      if (!this.cleanUp && this.buttonElRef && this.tooltipElRef && this.tipArrowElRef) {\r\n        this.cleanUp = positionTooltip({\r\n          referenceElement: this.buttonElRef,\r\n          tipRef: this.tooltipElRef,\r\n          tipArrowRef: this.tipArrowElRef,\r\n          placementTip: this.tooltipPlacement,\r\n          topPositionSmallViewPort: false,\r\n          halfMainAxisOffset: false,\r\n          forceVisible: true,\r\n        });\r\n      }\r\n    }, this.tooltipShowDelay);\r\n  };\r\n\r\n  disconnectedCallback() {\r\n    this.clearToolTipTimeout();\r\n\r\n    this.cleanUp?.();\r\n    this.cleanUp = undefined;\r\n  }\r\n\r\n  private clearToolTipTimeout = () => {\r\n    if (this.tooltipTimeout) {\r\n      clearTimeout(this.tooltipTimeout);\r\n    }\r\n  };\r\n\r\n  private handleHideTooltip = () => {\r\n    this.clearToolTipTimeout();\r\n\r\n    this.showTooltip = false;\r\n    this.tooltipElRef?.hidePopover();\r\n\r\n    if (!this.showTooltip && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  };\r\n\r\n  private handleClick = (e: MouseEvent) => {\r\n    this.lastClickTime = Date.now();\r\n    this.handleHideTooltip();\r\n    this.dsoClick.emit({ originalEvent: e });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        ref={(el) => (this.buttonElRef = el)}\r\n        type=\"button\"\r\n        disabled={this.disabled}\r\n        aria-label={this.label}\r\n        class={`icon-button dso-${this.variant}`}\r\n        onMouseEnter={this.handleShowTooltip}\r\n        onMouseLeave={this.handleHideTooltip}\r\n        onFocus={this.handleShowTooltip}\r\n        onBlur={this.handleHideTooltip}\r\n        onClick={this.handleClick}\r\n      >\r\n        <dso-icon icon={this.icon} />\r\n        <Tooltip\r\n          visible={this.showTooltip}\r\n          onAfterHidden={this.handleHideTooltip}\r\n          tipElementRef={(element) => (this.tooltipElRef = element)}\r\n          tipArrowElementRef={(element) => (this.tipArrowElRef = element)}\r\n        >\r\n          {this.label}\r\n        </Tooltip>\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-B15-R4R0.js → p-Bl7SFp3l.js}

@@ -1,8 +1,8 @@
-import { h } from './p-BeWimuZg.js';
+import { h } from './p-DBWrx_3r.js';
 
 const AnnotationBody = ({ symbol, title, data, active, dsoActiveChange, }) => (h("div", { class: "annotation-body" }, symbol && h("div", { class: "annotation-symbol" }, symbol), h("div", { class: "annotation-info" }, h("p", { class: "annotation-title" }, title), data && h("p", { class: "annotation-data" }, data)), dsoActiveChange && (h("div", { class: "annotation-control" }, h("dso-slide-toggle", { accessibleLabel: "Toon op kaart", checked: active, onDsoActiveChange: (e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e }) })))));
 
 export { AnnotationBody as A };
-//# sourceMappingURL=p-B15-R4R0.js.map
+//# sourceMappingURL=p-Bl7SFp3l.js.map
 
-//# sourceMappingURL=p-B15-R4R0.js.map
+//# sourceMappingURL=p-Bl7SFp3l.js.map

package/dist/bundle/{p-B15-R4R0.js.map → p-Bl7SFp3l.js.map}

@@ -1 +1 @@
-{"file":"p-B15-R4R0.js","mappings":";;AAYO,MAAM,cAAc,GAA6C,CAAC,EACvE,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,eAAe,GAChB,MACC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,MAAM,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAAE,MAAM,CAAO,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,kBAAkB,EAAA,EAAE,KAAK,CAAK,EACtC,IAAI,IAAI,SAAG,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAK,CAC1C,EACL,eAAe,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,CAC7G,CACE,CACP,CACG;;;;","names":[],"sources":["src/components/annotation/annotation-body.tsx"],"sourcesContent":["import { EventEmitter, FunctionalComponent, JSX, h } from \"@stencil/core\";\r\n\r\nimport { AnnotationActiveChangeEvent } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationBodyProps {\r\n  title: JSX.Element;\r\n  data?: JSX.Element;\r\n  active?: boolean;\r\n  dsoActiveChange?: EventEmitter<AnnotationActiveChangeEvent>;\r\n  symbol?: JSX.Element;\r\n}\r\n\r\nexport const AnnotationBody: FunctionalComponent<AnnotationBodyProps> = ({\r\n  symbol,\r\n  title,\r\n  data,\r\n  active,\r\n  dsoActiveChange,\r\n}) => (\r\n  <div class=\"annotation-body\">\r\n    {symbol && <div class=\"annotation-symbol\">{symbol}</div>}\r\n    <div class=\"annotation-info\">\r\n      <p class=\"annotation-title\">{title}</p>\r\n      {data && <p class=\"annotation-data\">{data}</p>}\r\n    </div>\r\n    {dsoActiveChange && (\r\n      <div class=\"annotation-control\">\r\n        <dso-slide-toggle\r\n          accessibleLabel=\"Toon op kaart\"\r\n          checked={active}\r\n          onDsoActiveChange={(e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e })}\r\n        />\r\n      </div>\r\n    )}\r\n  </div>\r\n);\r\n"],"version":3}
+{"file":"p-Bl7SFp3l.js","mappings":";;AAYO,MAAM,cAAc,GAA6C,CAAC,EACvE,MAAM,EACN,KAAK,EACL,IAAI,EACJ,MAAM,EACN,eAAe,GAChB,MACC,CAAA,CAAA,KAAA,EAAA,EAAK,KAAK,EAAC,iBAAiB,EAAA,EACzB,MAAM,IAAI,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,mBAAmB,EAAA,EAAE,MAAM,CAAO,EACxD,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAA,CAAA,GAAA,EAAA,EAAG,KAAK,EAAC,kBAAkB,EAAA,EAAE,KAAK,CAAK,EACtC,IAAI,IAAI,SAAG,KAAK,EAAC,iBAAiB,EAAE,EAAA,IAAI,CAAK,CAC1C,EACL,eAAe,KACd,CAAK,CAAA,KAAA,EAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAA,CAAA,kBAAA,EAAA,EACE,eAAe,EAAC,eAAe,EAC/B,OAAO,EAAE,MAAM,EACf,iBAAiB,EAAE,CAAC,CAAC,KAAK,eAAe,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,MAAM,CAAC,EAAE,IAAI,EAAE,CAAC,MAAM,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAA,CAC7G,CACE,CACP,CACG;;;;","names":[],"sources":["src/components/annotation/annotation-body.tsx"],"sourcesContent":["import { EventEmitter, FunctionalComponent, JSX, h } from \"@stencil/core\";\r\n\r\nimport { AnnotationActiveChangeEvent } from \"./annotation.interfaces\";\r\n\r\ninterface AnnotationBodyProps {\r\n  title: JSX.Element;\r\n  data?: JSX.Element;\r\n  active?: boolean;\r\n  dsoActiveChange?: EventEmitter<AnnotationActiveChangeEvent>;\r\n  symbol?: JSX.Element;\r\n}\r\n\r\nexport const AnnotationBody: FunctionalComponent<AnnotationBodyProps> = ({\r\n  symbol,\r\n  title,\r\n  data,\r\n  active,\r\n  dsoActiveChange,\r\n}) => (\r\n  <div class=\"annotation-body\">\r\n    {symbol && <div class=\"annotation-symbol\">{symbol}</div>}\r\n    <div class=\"annotation-info\">\r\n      <p class=\"annotation-title\">{title}</p>\r\n      {data && <p class=\"annotation-data\">{data}</p>}\r\n    </div>\r\n    {dsoActiveChange && (\r\n      <div class=\"annotation-control\">\r\n        <dso-slide-toggle\r\n          accessibleLabel=\"Toon op kaart\"\r\n          checked={active}\r\n          onDsoActiveChange={(e) => dsoActiveChange.emit({ current: Boolean(active), next: !active, originalEvent: e })}\r\n        />\r\n      </div>\r\n    )}\r\n  </div>\r\n);\r\n"],"version":3}

package/dist/bundle/{p-Bla3D_SS.js → p-C2D3bMur.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, h, d as Host, t as transformTag } from './p-BeWimuZg.js';
+import { p as proxyCustomElement, H, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { a as autoUpdate, c as computePosition, o as offset, f as flip } from './p-_RZbmuMU.js';
 import { t as tabbable } from './p-DDSMs62-.js';
 import { g as getActiveElement } from './p-CodDyi2J.js';
@@ -205,6 +205,6 @@ function defineCustomElement() {
 }
 
 export { DropdownMenu as D, defineCustomElement as d };
-//# sourceMappingURL=p-Bla3D_SS.js.map
+//# sourceMappingURL=p-C2D3bMur.js.map
 
-//# sourceMappingURL=p-Bla3D_SS.js.map
+//# sourceMappingURL=p-C2D3bMur.js.map

package/dist/bundle/{p-Bla3D_SS.js.map → p-C2D3bMur.js.map}

@@ -1 +1 @@
-{"file":"p-Bla3D_SS.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n  inline-size: max-content;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private popoverElement: HTMLDivElement | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n    dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n    if (this.popoverElement && !this.cleanUp) {\r\n      const element = this.popoverElement;\r\n\r\n      this.cleanUp = autoUpdate(this.button, element, () => {\r\n        computePosition(this.button, element, {\r\n          strategy: \"fixed\",\r\n          middleware: [\r\n            offset(this.dropdownOptionsOffset),\r\n            flip({\r\n              padding: this.dropdownOptionsOffset,\r\n            }),\r\n          ],\r\n          placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n        }).then(({ x, y }) => {\r\n          Object.assign(element.style, {\r\n            left: `${x}px`,\r\n            top: `${y}px`,\r\n          });\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.toggleOptions();\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.toggleOptions(false);\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  private toggleOptions(force?: boolean) {\r\n    this.open = force ?? !this.open;\r\n    if (this.popoverElement?.isConnected) {\r\n      this.popoverElement?.togglePopover(this.open);\r\n    }\r\n\r\n    if (!this.open && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n    this.toggleOptions(false);\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.toggleOptions(false);\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.toggleOptions(false);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"p-C2D3bMur.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement","uuidv4"],"sources":["src/components/dropdown-menu/dropdown-menu.scss?tag=dso-dropdown-menu&encapsulation=shadow","src/components/dropdown-menu/dropdown-menu.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/components/dropdown-menu\";\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n}\r\n\r\n:host {\r\n  @include dropdown-menu.root();\r\n}\r\n\r\ndiv[popover] {\r\n  margin: 0 !important;\r\n  border: 0;\r\n  padding: 0;\r\n  background-color: transparent;\r\n  overflow: unset;\r\n  inline-size: max-content;\r\n}\r\n","import { autoUpdate, computePosition, flip, offset } from \"@floating-ui/dom\";\r\nimport { Component, Element, Host, Listen, Prop, h } from \"@stencil/core\";\r\nimport { FocusableElement, tabbable } from \"tabbable\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-dropdown-menu\",\r\n  styleUrl: \"dropdown-menu.scss\",\r\n  shadow: true,\r\n})\r\nexport class DropdownMenu {\r\n  /**\r\n   * Whether the menu is open or closed.\r\n   * This attribute is reflected and mutable.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * Alignment of the dropdown\r\n   */\r\n  @Prop()\r\n  dropdownAlign: \"left\" | \"right\" = \"left\";\r\n\r\n  /**\r\n   * Space between button and dropdown options\r\n   */\r\n  @Prop()\r\n  dropdownOptionsOffset = 2;\r\n\r\n  /**\r\n   * Whether the menu is checkable.\r\n   */\r\n  @Prop()\r\n  checkable = false;\r\n\r\n  @Element()\r\n  host!: HTMLDsoDropdownMenuElement;\r\n\r\n  private cleanUp: ReturnType<typeof autoUpdate> | undefined;\r\n\r\n  private popoverElement: HTMLDivElement | undefined;\r\n\r\n  get button(): HTMLButtonElement {\r\n    const button = this.host.querySelector('button[slot=\"toggle\"]');\r\n\r\n    if (!(button instanceof HTMLButtonElement)) {\r\n      throw new ReferenceError(\"Mandatory toggle button not found\");\r\n    }\r\n\r\n    return button;\r\n  }\r\n\r\n  private tabbables(withButton: boolean): FocusableElement[] {\r\n    const tabbables = this.host.isConnected ? tabbable(this.host) : [];\r\n\r\n    return withButton ? tabbables : tabbables.filter((element) => element !== this.button);\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.button.setAttribute(\"aria-haspopup\", \"menu\");\r\n    this.button.setAttribute(\"aria-expanded\", \"false\");\r\n    if (!this.button.id) {\r\n      this.button.id = uuidv4();\r\n    }\r\n\r\n    const dropdownOptionsElement = this.host.querySelector(\".dso-dropdown-options\");\r\n\r\n    if (!(dropdownOptionsElement instanceof HTMLElement)) {\r\n      throw new Error(\"dropdown options element is not instanceof HTMLElement\");\r\n    }\r\n\r\n    dropdownOptionsElement.setAttribute(\"role\", \"menu\");\r\n    dropdownOptionsElement.setAttribute(\"aria-labelledby\", this.button.id);\r\n\r\n    for (const ul of Array.from(this.host.getElementsByTagName(\"ul\"))) {\r\n      ul.setAttribute(\"role\", \"group\");\r\n      for (const li of Array.from(ul.getElementsByTagName(\"li\"))) {\r\n        li.setAttribute(\"role\", \"none\");\r\n      }\r\n    }\r\n  }\r\n\r\n  componentDidRender() {\r\n    for (const li of Array.from(this.host.getElementsByTagName(\"li\"))) {\r\n      for (const tab of this.host.isConnected ? tabbable(li) : []) {\r\n        tab.setAttribute(\"role\", this.checkable ? \"menuitemradio\" : \"menuitem\");\r\n\r\n        if (this.checkable) {\r\n          tab.setAttribute(\"aria-checked\", li.classList.contains(\"dso-checked\").toString());\r\n        }\r\n      }\r\n    }\r\n\r\n    this.button.setAttribute(\"aria-expanded\", this.open ? \"true\" : \"false\");\r\n\r\n    if (this.popoverElement && !this.cleanUp) {\r\n      const element = this.popoverElement;\r\n\r\n      this.cleanUp = autoUpdate(this.button, element, () => {\r\n        computePosition(this.button, element, {\r\n          strategy: \"fixed\",\r\n          middleware: [\r\n            offset(this.dropdownOptionsOffset),\r\n            flip({\r\n              padding: this.dropdownOptionsOffset,\r\n            }),\r\n          ],\r\n          placement: this.dropdownAlign === \"right\" ? \"bottom-end\" : \"bottom-start\",\r\n        }).then(({ x, y }) => {\r\n          Object.assign(element.style, {\r\n            left: `${x}px`,\r\n            top: `${y}px`,\r\n          });\r\n        });\r\n      });\r\n    }\r\n  }\r\n\r\n  @Listen(\"click\", { target: \"window\" })\r\n  onClick(event: MouseEvent) {\r\n    const composedPath = event.composedPath();\r\n\r\n    if (this.isToggleButtonEvent(composedPath)) {\r\n      this.toggleOptions();\r\n    } else if (this.open && this.isMenuItemEvent(composedPath)) {\r\n      this.toggleOptions(false);\r\n    }\r\n  }\r\n\r\n  private isToggleButtonEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.button);\r\n  }\r\n\r\n  private isMenuItemEvent(composedPath: EventTarget[]) {\r\n    return composedPath.includes(this.host) && !this.isToggleButtonEvent(composedPath);\r\n  }\r\n\r\n  private toggleOptions(force?: boolean) {\r\n    this.open = force ?? !this.open;\r\n    if (this.popoverElement?.isConnected) {\r\n      this.popoverElement?.togglePopover(this.open);\r\n    }\r\n\r\n    if (!this.open && this.cleanUp) {\r\n      this.cleanUp();\r\n      this.cleanUp = undefined;\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n\r\n    this.toggleOptions(false);\r\n  }\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (\r\n      this.open &&\r\n      (!(event.relatedTarget instanceof HTMLElement) || !this.tabbables(true).includes(event.relatedTarget))\r\n    ) {\r\n      this.toggleOptions(false);\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (event.defaultPrevented || !this.open) {\r\n      return;\r\n    }\r\n\r\n    switch (event.key) {\r\n      case \"Tab\":\r\n        if (event.shiftKey) {\r\n          this.tabInPopup(this.tabbables(true), -1);\r\n        } else {\r\n          this.tabInPopup(this.tabbables(true), 1);\r\n        }\r\n\r\n        break;\r\n      case \"ArrowDown\":\r\n        this.tabInPopup(this.tabbables(false), 1);\r\n        break;\r\n\r\n      case \"ArrowUp\":\r\n        this.tabInPopup(this.tabbables(false), -1);\r\n        break;\r\n\r\n      case \"Escape\":\r\n        this.escape();\r\n        break;\r\n\r\n      case \" \":\r\n        if (event.target instanceof HTMLElement) {\r\n          event.target.click();\r\n        }\r\n\r\n        break;\r\n\r\n      default:\r\n        return;\r\n    }\r\n\r\n    event.preventDefault();\r\n  };\r\n\r\n  private tabInPopup(tabbables: FocusableElement[], direction: number) {\r\n    const currentIndex = tabbables.findIndex((e) => e === getActiveElement());\r\n\r\n    let nextIndex = currentIndex + direction;\r\n    if (nextIndex >= tabbables.length) {\r\n      nextIndex = 0;\r\n    } else if (nextIndex < 0) {\r\n      nextIndex = tabbables.length - 1;\r\n    }\r\n\r\n    tabbables[nextIndex]?.focus();\r\n  }\r\n\r\n  private escape = () => {\r\n    this.button.focus();\r\n    this.toggleOptions(false);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host onFocusout={this.focusOutListener}>\r\n        <slot name=\"toggle\" />\r\n        <div popover=\"manual\" ref={(element) => (this.popoverElement = element)}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/{p-B1fJHBoE.js → p-CEAGN3Bt.js}

@@ -1,4 +1,4 @@
-import { p as proxyCustomElement, H, e as createEvent, h, d as Host, t as transformTag } from './p-BeWimuZg.js';
+import { p as proxyCustomElement, H, d as createEvent, h, c as Host, t as transformTag } from './p-DBWrx_3r.js';
 import { c as clsx } from './p-ChV9xqsO.js';
 
 const expandableCss = () => `:host([enable-animation]){display:grid;grid-template-rows:0fr;overflow:hidden;opacity:0;transition:grid-template-rows 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms, opacity 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host([enable-animation]:not([open=true])) .slot-container{min-block-size:0;visibility:hidden;transition:visibility 260ms cubic-bezier(0.4, 0, 0.2, 1) 0ms}:host(:not([enable-animation])),:host([enable-animation=false]){display:none}:host([open][enable-animation]:not([open=false])){grid-template-rows:1fr;opacity:1}:host([open][enable-animation]:not([open=false])) .slot-container{visibility:visible}:host([open]:not([enable-animation]):not([open=false])),:host([open][enable-animation=false]:not([open=false])){display:block}*,*::after,*::before{box-sizing:border-box}`;
@@ -79,6 +79,6 @@ function defineCustomElement() {
 }
 
 export { Expandable as E, defineCustomElement as d };
-//# sourceMappingURL=p-B1fJHBoE.js.map
+//# sourceMappingURL=p-CEAGN3Bt.js.map
 
-//# sourceMappingURL=p-B1fJHBoE.js.map
+//# sourceMappingURL=p-CEAGN3Bt.js.map