@dso-toolkit/core 62.25.0 → 62.26.0

package/dist/esm/dso-logo.entry.js.map

@@ -1 +1 @@
-{"file":"dso-logo.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,4+FAA4+F,CAAC;AAC7/F,sBAAe,OAAO;;ACatB,MAAM,OAAO,GAAwB,OACnC,kBACE,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG,EACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG,EACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB,EACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,CACL,CACJ,CAAC;MAOW,IAAI;;;;;QAuCP,oBAAe,GAAG,CAAC,CAAa;YACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACvG,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACzG,CAAC;;;;;;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC7G,IAAI,CAAC,OAAO,IACX,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACnE,EAAC,OAAO,OAAG,CACT,KAEJ,EAAC,OAAO,OAAG,CACZ,EAEA,IAAI,CAAC,KAAK;aACR,CAAC,IAAI,CAAC,QAAQ,IACb,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,KAE5C,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAC3E,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC,EACH,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,EACP;KACH;;;;;;","names":[],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include anchor.reverse();\r\n\r\n    &,\r\n    &:hover,\r\n    &:focus,\r\n    &:visited {\r\n      color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n\r\n:host([logo-url][ribbon]) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url {\r\n    grid-area: targetwordmark;\r\n    + .logo-ribbon {\r\n      grid-area: targetwordmark;\r\n    }\r\n  }\r\n\r\n  .logo-label-url + .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding: 0 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent = () => (\r\n  <>\r\n    <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n      <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n      <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n      <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n    </svg>\r\n    <div class=\"logo-wordmark\">\r\n      <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n      <span class=\"logo-wordmark-loket\">loket</span>\r\n    </div>\r\n  </>\r\n);\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   *  The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-logo.entry.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,sgGAAsgG,CAAC;AACvhG,sBAAe,OAAO;;ACatB,MAAM,OAAO,GAAwB,OACnC,kBACE,WAAK,IAAI,EAAC,MAAM,EAAC,OAAO,EAAC,WAAW,EAAC,MAAM,EAAC,MAAM,EAAC,KAAK,EAAC,aAAa,IACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,4CAA4C,GAAG,EACrE,YAAM,KAAK,EAAC,QAAQ,EAAC,CAAC,EAAC,0CAA0C,GAAG,EACpE,YAAM,KAAK,EAAC,OAAO,EAAC,CAAC,EAAC,uCAAuC,GAAG,CAC5D,EACN,WAAK,KAAK,EAAC,eAAe,IACxB,YAAM,KAAK,EAAC,yBAAyB,gBAAiB,EACtD,YAAM,KAAK,EAAC,qBAAqB,YAAa,CAC1C,CACL,CACJ,CAAC;MAOW,IAAI;;;;;QAuCP,oBAAe,GAAG,CAAC,CAAa;YACtC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,OAAQ,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACvG,CAAC;QAEM,qBAAgB,GAAG,CAAC,CAAa;YACvC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,CAAC,QAAS,EAAE,eAAe,EAAE,eAAe,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC;SACzG,CAAC;;;;;;IAEF,MAAM;QACJ,QACE,EAAC,IAAI,mEAAa,CAAC,gBAAgB,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC7G,IAAI,CAAC,OAAO,IACX,SAAG,KAAK,EAAC,UAAU,EAAC,IAAI,EAAE,IAAI,CAAC,OAAO,EAAE,OAAO,EAAE,IAAI,CAAC,eAAe,IACnE,EAAC,OAAO,OAAG,CACT,KAEJ,EAAC,OAAO,OAAG,CACZ,EAEA,IAAI,CAAC,KAAK;aACR,CAAC,IAAI,CAAC,QAAQ,IACb,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,KAE5C,SAAG,KAAK,EAAC,gBAAgB,EAAC,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,OAAO,EAAE,IAAI,CAAC,gBAAgB,IAC3E,YAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CAC1C,CACL,CAAC,EACH,IAAI,CAAC,MAAM,IAAI,4DAAK,KAAK,EAAC,aAAa,IAAE,IAAI,CAAC,MAAM,CAAO,CACvD,EACP;KACH;;;;;;","names":[],"sources":["src/components/logo/logo.scss?tag=dso-logo&encapsulation=shadow","src/components/logo/logo.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/anchor\";\r\n\r\n:host {\r\n  max-block-size: units.$ru6;\r\n  block-size: units.$ru6;\r\n  display: grid;\r\n  grid-template-areas: \"target wordmark label\";\r\n  grid-template-columns: repeat(3, max-content);\r\n  grid-template-rows: 100%;\r\n  gap: units.$u2;\r\n  font-size: 1.5625rem;\r\n  font-weight: 500;\r\n  align-items: center;\r\n  container-type: size;\r\n  container-name: logo;\r\n\r\n  .logo-url,\r\n  .logo-label-url {\r\n    display: flex;\r\n    align-items: center;\r\n    gap: units.$u2;\r\n\r\n    @include anchor.reverse();\r\n\r\n    &,\r\n    &:hover,\r\n    &:focus,\r\n    &:visited {\r\n      color: colors.$bosgroen;\r\n    }\r\n  }\r\n}\r\n\r\n:host([logo-url][ribbon]) {\r\n  grid-template-areas: \"targetwordmark label\";\r\n\r\n  .logo-url {\r\n    grid-area: targetwordmark;\r\n    + .logo-ribbon {\r\n      grid-area: targetwordmark;\r\n    }\r\n  }\r\n\r\n  .logo-label-url + .logo-ribbon {\r\n    grid-area: targetwordmark;\r\n  }\r\n}\r\n\r\n.logo-label-url {\r\n  grid-area: label;\r\n}\r\n\r\n.logo-target {\r\n  grid-area: target;\r\n  max-block-size: units.$u6;\r\n  max-inline-size: units.$u6;\r\n  inline-size: 100%;\r\n  display: block;\r\n  aspect-ratio: 1 / 1;\r\n}\r\n\r\n.logo-wordmark {\r\n  grid-area: wordmark;\r\n  font-size: 1.5625rem;\r\n}\r\n\r\n@container logo (max-height: 47px) {\r\n  .logo-wordmark,\r\n  .logo-label {\r\n    font-size: 50cqb;\r\n    line-height: 1;\r\n  }\r\n}\r\n\r\n.logo-wordmark-omgevings {\r\n  color: colors.$grasgroen;\r\n}\r\n\r\n.logo-wordmark-loket {\r\n  color: colors.$bosgroen;\r\n}\r\n\r\n.logo-label {\r\n  grid-area: label;\r\n  color: colors.$bosgroen;\r\n  margin-inline-start: units.$ru2;\r\n}\r\n\r\n.logo-ribbon {\r\n  grid-area: wordmark;\r\n  place-self: start end;\r\n  display: flex;\r\n  place-items: center;\r\n\r\n  background-color: colors.$mauve;\r\n  border-radius: 3px;\r\n  transform: rotate(3deg);\r\n  padding-block: 0;\r\n  padding-inline: 8px;\r\n\r\n  font-size: 0.75rem;\r\n  font-weight: normal;\r\n  text-transform: uppercase;\r\n  color: colors.$wit;\r\n\r\n  @container logo (max-height: 47px) {\r\n    & {\r\n      block-size: 28cqb;\r\n      font-size: 25cqb;\r\n    }\r\n  }\r\n}\r\n\r\n.inner {\r\n  fill: colors.$oranje;\r\n}\r\n\r\n.middle {\r\n  fill: colors.$bosgroen;\r\n}\r\n\r\n.outer {\r\n  fill: #80bc00;\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .logo-wordmark {\r\n    font-size: initial;\r\n  }\r\n\r\n  // if the logo has a label, hide the wordmark on smaller screens and replace it with the label\r\n  :host([label]) {\r\n    grid-template-areas: \"target label\";\r\n    grid-template-columns: max-content minmax(130px, max-content);\r\n\r\n    .logo-wordmark {\r\n      display: none;\r\n    }\r\n\r\n    .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n\r\n    .logo-label {\r\n      margin-inline-start: 0;\r\n      font-size: initial;\r\n      text-wrap: balance;\r\n      overflow-wrap: normal;\r\n    }\r\n  }\r\n\r\n  :host([logo-url][ribbon]) {\r\n    .logo-label-url + .logo-ribbon {\r\n      grid-area: label;\r\n    }\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  .logo-ribbon {\r\n    transform: rotate(3deg) translateY(-7px);\r\n  }\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Fragment,\r\n  Host,\r\n  Prop,\r\n  h,\r\n  Event,\r\n  EventEmitter,\r\n  FunctionalComponent,\r\n} from \"@stencil/core\";\r\nimport { isModifiedEvent } from \"../../utils/is-modified-event\";\r\nimport { LogoClickEvent, LogoLabelClickEvent } from \"./logo.interfaces\";\r\n\r\nconst DsoLogo: FunctionalComponent = () => (\r\n  <>\r\n    <svg fill=\"none\" viewBox=\"0 0 48 48\" height=\"100%\" class=\"logo-target\">\r\n      <path class=\"outer\" d=\"M26 0a24 24 0 1 0 0 47.9A24 24 0 0 0 24 0Z\" />\r\n      <path class=\"middle\" d=\"M24 8A16 16 0 0 0 8 24 16 16 0 1 0 24 8Z\" />\r\n      <path class=\"inner\" d=\"M24 32a8 8 0 0 0 0-16 8 8 0 0 0 0 16Z\" />\r\n    </svg>\r\n    <div class=\"logo-wordmark\">\r\n      <span class=\"logo-wordmark-omgevings\">Omgevings</span>\r\n      <span class=\"logo-wordmark-loket\">loket</span>\r\n    </div>\r\n  </>\r\n);\r\n\r\n@Component({\r\n  tag: \"dso-logo\",\r\n  styleUrl: \"logo.scss\",\r\n  shadow: true,\r\n})\r\nexport class Logo implements ComponentInterface {\r\n  /**\r\n   *  The url the logo is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  logoUrl?: string;\r\n\r\n  /**\r\n   * The label clarifies the service within the Omgevingsloket, shown\r\n   * as a subtitle (and on smaller screens as the main wordmark itself).\r\n   */\r\n  @Prop({ reflect: true })\r\n  label?: string;\r\n\r\n  /**\r\n   *  The url the label is pointing to.\r\n   */\r\n  @Prop({ reflect: true })\r\n  labelUrl?: string;\r\n\r\n  /**\r\n   * The ribbon contains the text for a possible 'sticker' on top of the logo.\r\n   * Used to clarify the (non-production) server environment (\"int\", \"kta\", \"pfm\", \"pre\", or \"dmo\")\r\n   */\r\n  @Prop({ reflect: true })\r\n  ribbon?: string;\r\n\r\n  /**\r\n   * Emitted when the logo is clicked (only when logoUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLogoClick!: EventEmitter<LogoClickEvent>;\r\n\r\n  /**\r\n   * Emitted when the label in the logo is clicked (only when labelUrl is set).\r\n   */\r\n  @Event()\r\n  dsoLabelClick!: EventEmitter<LogoLabelClickEvent>;\r\n\r\n  private handleLogoClick = (e: MouseEvent) => {\r\n    this.dsoLogoClick.emit({ originalEvent: e, url: this.logoUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  private handleLabelClick = (e: MouseEvent) => {\r\n    this.dsoLabelClick.emit({ originalEvent: e, url: this.labelUrl!, isModifiedEvent: isModifiedEvent(e) });\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host aria-label={[\"Omgevingsloket\", this.label, this.ribbon && `(${this.ribbon})`].filter((s) => !!s).join(\" \")}>\r\n        {this.logoUrl ? (\r\n          <a class=\"logo-url\" href={this.logoUrl} onClick={this.handleLogoClick}>\r\n            <DsoLogo />\r\n          </a>\r\n        ) : (\r\n          <DsoLogo />\r\n        )}\r\n\r\n        {this.label &&\r\n          (!this.labelUrl ? (\r\n            <span class=\"logo-label\">{this.label}</span>\r\n          ) : (\r\n            <a class=\"logo-label-url\" href={this.labelUrl} onClick={this.handleLabelClick}>\r\n              <span class=\"logo-label\">{this.label}</span>\r\n            </a>\r\n          ))}\r\n        {this.ribbon && <div class=\"logo-ribbon\">{this.ribbon}</div>}\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-map-base-layers.entry.js

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h } from './index-c92edd88.js';
+import { r as registerInstance, c as createEvent, h } from './index-93de4a35.js';
 import { v as v4 } from './v4-23648a96.js';
 
-const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
+const mapBaseLayersCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";
 const DsoMapBaseLayersStyle0 = mapBaseLayersCss;
 
 const MapBaseLayers = class {
@@ -28,7 +28,7 @@ const MapBaseLayers = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'ce4733538fc133e4d016ebe43df3b13a58797446', class: "form-group dso-radios" }, h("legend", { key: 'b1f4ceb4f0c8d9fefce0ca9646e02097e95afbd4', class: "sr-only" }, "Achtergrond"), h("div", { key: '702d557a61547834151275a488d207d3b78d3407', class: "dso-label-container" }, h("span", { key: 'e44d8e0a6d88ab41a8c36989229bc4d577f9c61f', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '0b97e49d0288373b77f8edcc15efa1f77c440c8c', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
+        return (h("fieldset", { key: 'c2421f83ea87da2807861bcb3507829c4f7df412', class: "form-group dso-radios" }, h("legend", { key: '89a8b5d0a4e68b07b057b5c14911877ddec46104', class: "sr-only" }, "Achtergrond"), h("div", { key: '71820b7deb8ac233990cc66b23f78f794b04d91c', class: "dso-label-container" }, h("span", { key: 'c752c9d8d0db2ff11afe3a1d47a902c73003114c', class: "control-label", "aria-hidden": "true" }, "Achtergrond")), h("div", { key: '3c1e7690ec3a5c7ac5967b8b69f5af46af4d1f6b', class: "dso-field-container" }, this.baseLayers.map((baseLayer) => (h("dso-selectable", { key: baseLayer.id, type: "radio", value: baseLayer.name, checked: baseLayer.checked, disabled: baseLayer.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[baseLayer.id] = ref), onDsoChange: () => this.baseLayerChangeHandler(baseLayer) }, baseLayer.name, baseLayer.info ? h("p", { slot: "info" }, baseLayer.info) : null))))));
     }
 };
 MapBaseLayers.style = DsoMapBaseLayersStyle0;

package/dist/esm/dso-map-base-layers.entry.js.map

@@ -1 +1 @@
-{"file":"dso-map-base-layers.entry.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,4WAA4W,CAAC;AACtY,+BAAe,gBAAgB;;MCSlB,aAAa;;;;QAEhB,mBAAc,GAA+C,EAAE,CAAC;qBAYhEA,EAAM,EAAE;;;IAQR,sBAAsB,CAAC,SAAoB;QACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;KAC9D;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU;aACZ,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aACpG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;KAC3C;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,uBAAuB,IACrC,+DAAQ,KAAK,EAAC,SAAS,kBAAqB,EAC5C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,kBAEvC,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,MAC7B,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,MAAM,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,IAExD,SAAS,CAAC,IAAI,EACd,SAAS,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,GAAG,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;","names":["uuidv4"],"sources":["src/components/map-base-layers/map-base-layers.scss?tag=dso-map-base-layers&encapsulation=shadow","src/components/map-base-layers/map-base-layers.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Achtergrond\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-base-layers.entry.js","mappings":";;;AAAA,MAAM,gBAAgB,GAAG,sYAAsY,CAAC;AACha,+BAAe,gBAAgB;;MCSlB,aAAa;;;;QAEhB,mBAAc,GAA+C,EAAE,CAAC;qBAYhEA,EAAM,EAAE;;;IAQR,sBAAsB,CAAC,SAAoB;QACjD,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,EAAE,eAAe,EAAE,SAAS,EAAE,CAAC,CAAC;KAC9D;IAED,kBAAkB;QAChB,IAAI,CAAC,UAAU;aACZ,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,kBAAkB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aACpG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,kBAAkB,GAAG,IAAI,CAAC,UAAU,CAAC;KAC3C;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,uBAAuB,IACrC,+DAAQ,KAAK,EAAC,SAAS,kBAAqB,EAC5C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,kBAEvC,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,SAAS,MAC7B,sBACE,GAAG,EAAE,SAAS,CAAC,EAAE,EACjB,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,SAAS,CAAC,IAAI,EACrB,OAAO,EAAE,SAAS,CAAC,OAAO,EAC1B,QAAQ,EAAE,SAAS,CAAC,QAAQ,EAC5B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC9D,WAAW,EAAE,MAAM,IAAI,CAAC,sBAAsB,CAAC,SAAS,CAAC,IAExD,SAAS,CAAC,IAAI,EACd,SAAS,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,SAAS,CAAC,IAAI,CAAK,GAAG,IAAI,CAC7C,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;","names":["uuidv4"],"sources":["src/components/map-base-layers/map-base-layers.scss?tag=dso-map-base-layers&encapsulation=shadow","src/components/map-base-layers/map-base-layers.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-inline-size: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-block-end: units.$u1;\r\n    max-inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, h, Prop, Event, EventEmitter, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { BaseLayer, BaseLayerChangeEvent } from \"./map-base-layers.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-base-layers\",\r\n  styleUrl: \"./map-base-layers.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapBaseLayers implements ComponentInterface {\r\n  private previousBaselayers: BaseLayer[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks a base layer.\r\n   */\r\n  @Event()\r\n  dsoBaseLayerChange!: EventEmitter<BaseLayerChangeEvent>;\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The base layers.\r\n   */\r\n  @Prop()\r\n  baseLayers!: BaseLayer[];\r\n\r\n  private baseLayerChangeHandler(baseLayer: BaseLayer): void {\r\n    this.dsoBaseLayerChange.emit({ activeBaseLayer: baseLayer });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.baseLayers\r\n      .filter((l) => !l.disabled && this.previousBaselayers?.find((p) => p.id === l.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousBaselayers = this.baseLayers;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-radios\">\r\n        <legend class=\"sr-only\">Achtergrond</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Achtergrond\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.baseLayers.map((baseLayer) => (\r\n            <dso-selectable\r\n              key={baseLayer.id}\r\n              type=\"radio\"\r\n              value={baseLayer.name}\r\n              checked={baseLayer.checked}\r\n              disabled={baseLayer.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[baseLayer.id] = ref)}\r\n              onDsoChange={() => this.baseLayerChangeHandler(baseLayer)}\r\n            >\r\n              {baseLayer.name}\r\n              {baseLayer.info ? <p slot=\"info\">{baseLayer.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-map-controls.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h, H as Host } from './index-c92edd88.js';
+import { r as registerInstance, c as createEvent, h, H as Host } from './index-93de4a35.js';
 
-const mapControlsCss = ":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  bottom: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  top: 0;\n  left: 100%;\n  transition: transform 300ms ease;\n  width: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  top: 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-right: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  right: calc(100% + 56px);\n  top: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n  line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-left: -8px;\n  margin-right: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-left: 8px;\n  margin-right: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  right: calc(100% + 16px);\n  top: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-width: 56px;\n  padding: 11px 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-top-left-radius: 4px;\n  border-top-right-radius: 4px;\n  flex: 0 0 100%;\n  height: 40px;\n  min-width: auto;\n  width: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n  line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n  margin-bottom: -4px;\n  margin-top: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-right: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: top;\n  width: 24px;\n  margin-left: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  height: 16px;\n  width: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-bottom-left-radius: 4px;\n  border-bottom-right-radius: 4px;\n  border-top: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-bottom: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: left;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  right: 16px;\n  top: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-truncate {\n  max-width: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-right: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  height: 24px;\n  vertical-align: middle;\n  width: 24px;\n  margin-left: 8px;\n}\n.close-button > span {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  height: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-bottom: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    height: 40px;\n    margin-right: 0;\n    min-width: auto;\n    right: calc(100% + 16px);\n    width: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-right: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    top: 72px;\n  }\n}";
+const mapControlsCss = ":host {\n  background-color: #fff;\n  border: 1px solid #ccc;\n  inset-block-end: 0;\n  display: block;\n  font-family: Asap, sans-serif;\n  position: absolute;\n  inset-block-start: 0;\n  inset-inline-start: 100%;\n  transition: transform 300ms ease;\n  inline-size: 300px;\n}\n\n*,\n*::after,\n*::before {\n  box-sizing: border-box;\n}\n\n:host([open]) {\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\n  transform: translateX(-100%);\n}\n:host([open]) .toggle-visibility-button {\n  display: none;\n}\n:host([open]) .zoom-buttons {\n  inset-block-start: 16px;\n}\n\nbutton {\n  -webkit-appearance: button;\n  color: inherit;\n  cursor: pointer;\n  font: inherit;\n  font-family: inherit;\n  font-size: inherit;\n  line-height: inherit;\n  margin: 0;\n  overflow: visible;\n  text-transform: none;\n}\nbutton[disabled] {\n  cursor: default;\n}\nbutton::-moz-focus-inner {\n  border: 0;\n  padding: 0;\n}\n\n.toggle-visibility-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border: 0;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  font-weight: 600;\n  margin-inline-end: 16px;\n  padding: 8px 16px;\n  white-space: nowrap;\n  position: absolute;\n  inset-inline-end: calc(\n    100% + 56px\n  );\n  inset-block-start: 16px;\n}\n.toggle-visibility-button:focus, .toggle-visibility-button:focus-visible {\n  outline-offset: 2px;\n}\n.toggle-visibility-button:active {\n  outline: 0;\n}\n.toggle-visibility-button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.toggle-visibility-button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.toggle-visibility-button[disabled], .toggle-visibility-button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.toggle-visibility-button.dso-small {\n  line-height: 1rem;\n}\n.toggle-visibility-button.dso-small dso-icon,\n.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button dso-icon,\n.toggle-visibility-button svg.di {\n  margin-inline-start: -8px;\n  margin-inline-end: 8px;\n}\n.toggle-visibility-button span + dso-icon,\n.toggle-visibility-button span + svg.di {\n  margin-inline-start: 8px;\n  margin-inline-end: -8px;\n}\n.toggle-visibility-button.dso-spinner-left[disabled], .toggle-visibility-button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.toggle-visibility-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.toggle-visibility-button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n\n.zoom-buttons {\n  border-radius: 4px;\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\n  display: flex;\n  flex-wrap: wrap;\n  flex: 0 0;\n  position: absolute;\n  inset-inline-end: calc(100% + 16px);\n  inset-block-start: 16px;\n}\n.zoom-buttons button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n  border-width: 1px;\n  border-style: solid;\n  border-radius: 4px;\n  line-height: 1.5;\n  min-inline-size: 56px;\n  padding-block: 11px;\n  padding-inline: 15px;\n  border: 0;\n  padding: 8px;\n  border-radius: 0;\n  border-start-start-radius: 4px;\n  border-start-end-radius: 4px;\n  flex: 0 0 100%;\n  block-size: 40px;\n  min-inline-size: auto;\n  inline-size: 40px;\n}\n.zoom-buttons button:focus, .zoom-buttons button:focus-visible {\n  outline-offset: 2px;\n}\n.zoom-buttons button:active {\n  outline: 0;\n}\n.zoom-buttons button:hover {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n}\n.zoom-buttons button:active {\n  background-color: #275937;\n  border-color: #275937;\n  color: #fff;\n}\n.zoom-buttons button[disabled], .zoom-buttons button[disabled]:hover {\n  background-color: #fff;\n  border-color: #afcf9d;\n  color: #afcf9d;\n}\n.zoom-buttons button.dso-small {\n  line-height: 1rem;\n}\n.zoom-buttons button.dso-small dso-icon,\n.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {\n  margin-block-end: -4px;\n  margin-block-start: -4px;\n}\n.zoom-buttons button.dso-small.dso-spinner-left::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button.dso-small.dso-spinner-right::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n.zoom-buttons button.dso-spinner-left[disabled], .zoom-buttons button.dso-spinner-right[disabled] {\n  background-color: #fff;\n  border-color: #39870c;\n  color: #39870c;\n}\n.zoom-buttons button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]):hover::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]):hover::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %23fff; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: top;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n  block-size: 16px;\n  inline-size: 16px;\n}\n.zoom-buttons button:focus-visible {\n  background-color: #39870c;\n  border-color: #39870c;\n  color: #fff;\n  outline: none;\n}\n.zoom-buttons button + button {\n  border-radius: 0;\n  border-end-start-radius: 4px;\n  border-end-end-radius: 4px;\n  border-block-start: 1px solid #ccc;\n}\n\n.close-button {\n  display: inline-block;\n  font-size: 1em;\n  font-weight: 500;\n  margin-block-end: 0;\n  text-decoration: none;\n  touch-action: manipulation;\n  text-align: start;\n  user-select: none;\n  vertical-align: middle;\n  border: 0;\n  color: #39870c;\n  line-height: 1;\n  padding: 0;\n  background-color: transparent;\n  padding: 0;\n  position: absolute;\n  inset-inline-end: 16px;\n  inset-block-start: 16px;\n}\n.close-button:focus, .close-button:focus-visible {\n  outline-offset: 2px;\n}\n.close-button:active {\n  outline: 0;\n}\n.close-button[disabled] {\n  color: #afcf9d;\n}\n.close-button[disabled].dso-spinner-left, .close-button[disabled].dso-spinner-right {\n  color: #39870c;\n}\n.close-button:not([disabled]):hover {\n  color: #275937;\n  text-decoration: underline;\n  text-underline-position: under;\n}\n.close-button:not([disabled]):active {\n  color: #173521;\n}\n.close-button.dso-align {\n  line-height: calc(1.5em - 1px);\n  padding: 11px 0;\n  position: relative;\n}\n.close-button.dso-truncate {\n  max-inline-size: 100%;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.close-button.dso-spinner-left::before {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-end: 8px;\n}\n.close-button.dso-spinner-right::after {\n  background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n  background-repeat: no-repeat;\n  content: \"\";\n  display: inline-block;\n  block-size: 24px;\n  vertical-align: middle;\n  inline-size: 24px;\n  margin-inline-start: 8px;\n}\n.close-button > span {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  border: 0;\n}\n\nsection:not([hidden]) {\n  display: flex;\n  flex-direction: column;\n  block-size: 100%;\n}\n\nheader,\n.content {\n  padding: 16px;\n}\n\nheader {\n  border-block-end: 1px solid #ccc;\n  flex-grow: 0;\n  position: relative;\n}\nheader h2 {\n  color: #275937;\n  font-family: \"Asap\", sans-serif;\n  line-height: 1;\n  margin: 0;\n}\n\n@media screen and (max-width: 767px) {\n  .toggle-visibility-button {\n    block-size: 40px;\n    margin-inline-end: 0;\n    min-inline-size: auto;\n    inset-inline-end: calc(100% + 16px);\n    inline-size: 40px;\n  }\n  .toggle-visibility-button dso-icon {\n    margin-inline-end: 0;\n  }\n  .toggle-visibility-button span {\n    visibility: hidden;\n  }\n  .zoom-buttons {\n    inset-block-start: 72px;\n  }\n}";
 const DsoMapControlsStyle0 = mapControlsCss;
 
 var __classPrivateFieldGet = (undefined && undefined.__classPrivateFieldGet) || function (receiver, state, kind, f) {
@@ -62,7 +62,7 @@ const MapControls = class {
         });
     }
     render() {
-        return (h(Host, { key: '811ed45e16756a18deea944ab3a830de0337515c' }, h("button", { key: '5eb63aafc7e83f90fbb93a8ffef51189f86dabfd', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: '10c61d07bdabde651a1b054bdfcffff96b09ffa6', icon: "layers" }), h("span", { key: '495d5f0f496812b699b0d73384ff7a3cf44cdf83' }, "Kaartlagen")), h("div", { key: 'f7cc57743bd35805fe1290884c42be7b9f28deec', class: "zoom-buttons" }, h("button", { key: 'dc849568c9f89a3a97e089a748e4f9cab1bb244a', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: 'e2f3dc349c28b85641c31b31fb562ac3d978ad8f' }, "Zoom in"), h("dso-icon", { key: '685d9951a3f210d41c127445221fbc4202f81f8b', icon: "plus" })), h("button", { key: 'c207b3d18695514f2450e0541bd96a9959e79c41', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '5ae124eec302ed0eb4311a863724319efe11ac07' }, "Zoom uit"), h("dso-icon", { key: '0d42226e456acc25c35a27e8b2f218b22c6f4108', icon: "minus" }))), h("section", { key: 'f1c8eeaae2dc0b107abe12068ab0c1dc55a083ab', hidden: this.hideContent }, h("header", { key: '30fbc77b30f39fb09f1aaca1ccbcf9d159aec5c1' }, h("h2", { key: '4ef3fd5e1af61d3c6e904ab3185db652fdfa6bca' }, this.panelTitle), h("button", { key: 'ec6d354424c9e918ed8b548944be847697f8ff39', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'ff58412ce86c3d0831acb22e82b3ff70707417c4' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: '4dd038854693f096c3436f2a4c2a94748a9787e1', icon: "times" }))), h("dso-scrollable", { key: '645eb72dc729951ff79034339b905e36e91e4e7b' }, h("div", { key: '6df947228a9dc9bf2ed52ab9b3ce0874ed2618cb', class: "content" }, h("slot", { key: '810c62ea5de995e1423f664e11411213df18bfec' }))))));
+        return (h(Host, { key: '836e222e7b41de1b9d8a921f92fa2323db516f2d' }, h("button", { key: '72e2bb5a65c0571583f952d5ff5683adb24cc013', type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { key: 'efe272631cf6f21fb0644ffbecf4ecf4edd4aea6', icon: "layers" }), h("span", { key: '7e64693ba4a7f0ced1b75ec7380d7d0478bd5308' }, "Kaartlagen")), h("div", { key: '0c160bc7b5fff0e8c3a424e51f9c7377fe3dc9b1', class: "zoom-buttons" }, h("button", { key: 'c2544b74e1ac3262f2df9f0785b119e6ae0820e1', type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", { key: '8294bc7dad7e57f172fe7b8bed2c4a0fe4398051' }, "Zoom in"), h("dso-icon", { key: '62620323d7f6d548ef7ee325f5625d9fa767c847', icon: "plus" })), h("button", { key: '6636635508be6177978132cbe631bd7d148701b8', type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", { key: '6f428212b214543f85b69163db40cc23d9cafe18' }, "Zoom uit"), h("dso-icon", { key: '9eac9fe2b03deeb7d9bda24b23d5007e6a13a9fd', icon: "minus" }))), h("section", { key: 'cf197be64c429699554be6dbdb6219b927f4489f', hidden: this.hideContent }, h("header", { key: 'ddfefb5092d921c012230fda213ba2b6a1bebb5a' }, h("h2", { key: 'f1eedb07c84ffe7ac33efc1f568c3a79ec7662e2' }, this.panelTitle), h("button", { key: 'aeb77b9fbdda05bcf6c31f90f98f226ac46c7be9', type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", { key: 'faec16365842e7ba006093b7ffcf869b5c2a9eaf' }, "Verberg paneel ", this.panelTitle), h("dso-icon", { key: 'de430d6e80d63a62aed08716f603a5865712e34d', icon: "times" }))), h("dso-scrollable", { key: '773b3749ae1ccdbadb7088c65bb6396b39b453cf' }, h("div", { key: 'c28101fe2efe0d5147e8042a22398d7ab09d7046', class: "content" }, h("slot", { key: '64247ff8bc30490e3ae904be24e672b20eb83c5e' }))))));
     }
     static get watchers() { return {
         "open": ["watchOpen"]

package/dist/esm/dso-map-controls.entry.js.map

@@ -1 +1 @@
-{"file":"dso-map-controls.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,s5jBAAs5jB,CAAC;AAC96jB,6BAAe,cAAc;;;;;;;;;;;;;;;;;;;ACE7B;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;QACd,eAAU,GAAG,YAAY,CAAC;QAyElC,kDAAmD;QACnD,mDAAoD;oBApE7C,KAAK;;2BAkCE,CAAC,IAAI,CAAC,IAAI;;IAGxB,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;SACzE;aAAM;YACL,UAAU,CAAC;;gBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;aACpC,EAAE,kBAAkB,CAAC,CAAC;SACxB;KACF;;;;;;;IASD,MAAM,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAKD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,4EAAuB,CAChB,EACT,4DAAK,KAAK,EAAC,cAAc,IACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,yEAAoB,EACpB,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,0EAAqB,EACrB,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,iEACE,6DAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,kFAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,yEACE,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACS,CACT,CACL,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  bottom: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  top: 0;\r\n  left: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  width: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    top: units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n  @include button.map();\r\n\r\n  position: absolute;\r\n  right: calc(100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size});\r\n  top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n  border-radius: 4px;\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 0 0;\r\n  position: absolute;\r\n  right: calc(100% + core-map-controls-variables.$controls-margin);\r\n  top: core-map-controls-variables.$controls-margin;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-top-left-radius: 4px;\r\n    border-top-right-radius: 4px;\r\n    flex: 0 0 100%;\r\n    height: core-map-controls-variables.$zoom-button-size;\r\n    min-width: auto;\r\n    width: core-map-controls-variables.$zoom-button-size;\r\n\r\n    + button {\r\n      border-radius: 0;\r\n      border-bottom-left-radius: 4px;\r\n      border-bottom-right-radius: 4px;\r\n      border-top: 1px solid colors.$grijs-20;\r\n    }\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n  padding: 0;\r\n  position: absolute;\r\n  right: core-map-controls-variables.$controls-margin;\r\n  top: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  height: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-bottom: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .toggle-visibility-button {\r\n    height: units.$u5;\r\n    margin-right: 0;\r\n    min-width: auto;\r\n    right: calc(100% + core-map-controls-variables.$controls-margin);\r\n    width: units.$u5;\r\n\r\n    dso-icon {\r\n      margin-right: 0;\r\n    }\r\n\r\n    span {\r\n      visibility: hidden;\r\n    }\r\n  }\r\n\r\n  .zoom-buttons {\r\n    top: units.$u9;\r\n  }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  private panelTitle = \"Kaartlagen\";\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>Kaartlagen</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom in</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom uit</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.panelTitle}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>Verberg paneel {this.panelTitle}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-controls.entry.js","mappings":";;AAAA,MAAM,cAAc,GAAG,kglBAAkglB,CAAC;AAC1hlB,6BAAe,cAAc;;;;;;;;;;;;;;;;;;;ACE7B;AACA,MAAM,kBAAkB,GAAG,GAAG,CAAC;MAOlB,WAAW;;;;;;QACd,eAAU,GAAG,YAAY,CAAC;QAyElC,kDAAmD;QACnD,mDAAoD;oBApE7C,KAAK;;2BAkCE,CAAC,IAAI,CAAC,IAAI;;IAGxB,SAAS,CAAC,IAAa;QACrB,IAAI,IAAI,EAAE;YACR,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;YAEzB,UAAU,CAAC,gBAAM,OAAA,MAAA,uBAAA,IAAI,uCAAoB,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,kBAAkB,CAAC,CAAC;SACzE;aAAM;YACL,UAAU,CAAC;;gBACT,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBAExB,MAAA,uBAAA,IAAI,wCAAqB,0CAAE,KAAK,EAAE,CAAC;aACpC,EAAE,kBAAkB,CAAC,CAAC;SACxB;KACF;;;;;;;IASD,MAAM,gBAAgB,CAAC,CAA6B;QAClD,IAAI,CAAC,IAAI,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC;QAEvB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;YAClB,aAAa,EAAE,CAAC;YAChB,IAAI,EAAE,IAAI,CAAC,IAAI;SAChB,CAAC,CAAC;KACJ;IAKD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,+DACE,IAAI,EAAC,QAAQ,EACb,EAAE,EAAC,0BAA0B,EAC7B,KAAK,EAAC,0BAA0B,EAChC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,oCAAwB,OAAO,MAAA,CAAC,IAEvD,iEAAU,IAAI,EAAC,QAAQ,GAAY,EACnC,4EAAuB,CAChB,EACT,4DAAK,KAAK,EAAC,cAAc,IACvB,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC,CAAC,EACtC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,IAAI,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAElE,yEAAoB,EACpB,iEAAU,IAAI,EAAC,MAAM,GAAY,CAC1B,EACT,+DACE,IAAI,EAAC,QAAQ,EACb,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,EACvC,QAAQ,EAAE,IAAI,CAAC,WAAW,KAAK,KAAK,IAAI,IAAI,CAAC,WAAW,KAAK,MAAM,IAEnE,0EAAqB,EACrB,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACL,EACN,gEAAS,MAAM,EAAE,IAAI,CAAC,WAAW,IAC/B,iEACE,6DAAK,IAAI,CAAC,UAAU,CAAM,EAC1B,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,cAAc,EACpB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,gBAAgB,CAAC,CAAC,CAAC,EACxC,GAAG,EAAE,CAAC,OAAO,MAAM,uBAAA,IAAI,mCAAuB,OAAO,MAAA,CAAC,IAEtD,kFAAsB,IAAI,CAAC,UAAU,CAAQ,EAC7C,iEAAU,IAAI,EAAC,OAAO,GAAY,CAC3B,CACF,EACT,yEACE,4DAAK,KAAK,EAAC,SAAS,IAClB,8DAAa,CACT,CACS,CACT,CACL,EACP;KACH;;;;;;;;;;","names":[],"sources":["src/components/map-controls/map-controls.scss?tag=dso-map-controls&encapsulation=shadow","src/components/map-controls/map-controls.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n\r\n@use \"map-controls.variables\" as core-map-controls-variables;\r\n\r\n:host {\r\n  background-color: colors.$wit;\r\n  border: 1px solid colors.$grijs-20;\r\n  inset-block-end: 0;\r\n  display: block;\r\n  font-family: typography.$font-family-base;\r\n  position: absolute;\r\n  inset-block-start: 0;\r\n  inset-inline-start: 100%;\r\n  transition: transform core-map-controls-variables.$transition-duration ease;\r\n  inline-size: 300px;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host([open]) {\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.3);\r\n  transform: translateX(-100%);\r\n\r\n  .toggle-visibility-button {\r\n    display: none;\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u2;\r\n  }\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.toggle-visibility-button {\r\n  @include button.map();\r\n\r\n  position: absolute;\r\n  inset-inline-end: calc(\r\n    100% + #{core-map-controls-variables.$controls-margin + core-map-controls-variables.$zoom-button-size}\r\n  );\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\n.zoom-buttons {\r\n  border-radius: 4px;\r\n  box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.5);\r\n  display: flex;\r\n  flex-wrap: wrap;\r\n  flex: 0 0;\r\n  position: absolute;\r\n  inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n\r\n  button {\r\n    @include button.secondary($modifiers: false, $icon-only: true);\r\n    @include button.map-focus();\r\n\r\n    border: 0;\r\n    padding: 8px;\r\n    border-radius: 0;\r\n    border-start-start-radius: 4px;\r\n    border-start-end-radius: 4px;\r\n    flex: 0 0 100%;\r\n    block-size: core-map-controls-variables.$zoom-button-size;\r\n    min-inline-size: auto;\r\n    inline-size: core-map-controls-variables.$zoom-button-size;\r\n\r\n    + button {\r\n      border-radius: 0;\r\n      border-end-start-radius: 4px;\r\n      border-end-end-radius: 4px;\r\n      border-block-start: 1px solid colors.$grijs-20;\r\n    }\r\n  }\r\n}\r\n\r\n.close-button {\r\n  @include button.tertiary($modifiers: false, $icon-only: true);\r\n\r\n  padding: 0;\r\n  position: absolute;\r\n  inset-inline-end: core-map-controls-variables.$controls-margin;\r\n  inset-block-start: core-map-controls-variables.$controls-margin;\r\n}\r\n\r\nsection:not([hidden]) {\r\n  display: flex;\r\n  flex-direction: column;\r\n  block-size: 100%;\r\n}\r\n\r\nheader,\r\n.content {\r\n  padding: units.$u2;\r\n}\r\n\r\nheader {\r\n  border-block-end: 1px solid colors.$grijs-20;\r\n  flex-grow: 0;\r\n  position: relative;\r\n\r\n  h2 {\r\n    color: colors.$bosgroen;\r\n    font-family: typography.$headings-font-family;\r\n    line-height: 1;\r\n    margin: 0;\r\n  }\r\n}\r\n\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-max) {\r\n  .toggle-visibility-button {\r\n    block-size: units.$u5;\r\n    margin-inline-end: 0;\r\n    min-inline-size: auto;\r\n    inset-inline-end: calc(100% + core-map-controls-variables.$controls-margin);\r\n    inline-size: units.$u5;\r\n\r\n    dso-icon {\r\n      margin-inline-end: 0;\r\n    }\r\n\r\n    span {\r\n      visibility: hidden;\r\n    }\r\n  }\r\n\r\n  .zoom-buttons {\r\n    inset-block-start: units.$u9;\r\n  }\r\n}\r\n","import { Component, h, Host, Prop, Event, EventEmitter, State, Watch, Method } from \"@stencil/core\";\r\nimport { MapControlsToggleEvent } from \"./map-controls.interfaces\";\r\n\r\n// Sync with $transition-duration in ./map-controls.scss\r\nconst transitionDuration = 300;\r\n\r\n@Component({\r\n  tag: \"dso-map-controls\",\r\n  styleUrl: \"./map-controls.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapControls {\r\n  private panelTitle = \"Kaartlagen\";\r\n\r\n  /**\r\n   * To show and hide the Map Controls.\r\n   */\r\n  @Prop({ reflect: true, mutable: true })\r\n  open = false;\r\n\r\n  /**\r\n   * To disable the zoom controls:\r\n   *\r\n   * * `in`: Disable zoom in button.\r\n   * * `out`: Disable zoom out button.\r\n   * * `both`: Disable zoom in and zoom out.\r\n   */\r\n  @Prop()\r\n  disableZoom?: \"in\" | \"out\" | \"both\";\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom in button.\r\n   */\r\n  @Event()\r\n  dsoZoomIn!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * Emitted when the user activates the zoom out button.\r\n   */\r\n  @Event()\r\n  dsoZoomOut!: EventEmitter<MouseEvent>;\r\n\r\n  /**\r\n   * emits when the panel opens or closes.\r\n   *\r\n   * - `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n   * - `event.detail.open` is true when the panel opens and false when the panel closes.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<MapControlsToggleEvent>;\r\n\r\n  @State()\r\n  hideContent = !this.open;\r\n\r\n  @Watch(\"open\")\r\n  watchOpen(open: boolean) {\r\n    if (open) {\r\n      this.hideContent = false;\r\n\r\n      setTimeout(() => this.#closeButtonElement?.focus(), transitionDuration);\r\n    } else {\r\n      setTimeout(() => {\r\n        this.hideContent = true;\r\n\r\n        this.#toggleButtonElement?.focus();\r\n      }, transitionDuration);\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted when the visibility is toggled.\r\n   *\r\n   * Can be used to recalculate map widths or reposition center when the Map Controls opens or closes.\r\n   * @param e\r\n   */\r\n  @Method()\r\n  async toggleVisibility(e: MouseEvent | KeyboardEvent) {\r\n    this.open = !this.open;\r\n\r\n    this.dsoToggle.emit({\r\n      originalEvent: e,\r\n      open: this.open,\r\n    });\r\n  }\r\n\r\n  #closeButtonElement: HTMLButtonElement | undefined;\r\n  #toggleButtonElement: HTMLButtonElement | undefined;\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          type=\"button\"\r\n          id=\"toggle-visibility-button\"\r\n          class=\"toggle-visibility-button\"\r\n          onClick={(e) => this.toggleVisibility(e)}\r\n          ref={(element) => (this.#toggleButtonElement = element)}\r\n        >\r\n          <dso-icon icon=\"layers\"></dso-icon>\r\n          <span>Kaartlagen</span>\r\n        </button>\r\n        <div class=\"zoom-buttons\">\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomIn.emit(e)}\r\n            disabled={this.disableZoom === \"in\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom in</span>\r\n            <dso-icon icon=\"plus\"></dso-icon>\r\n          </button>\r\n          <button\r\n            type=\"button\"\r\n            onClick={(e) => this.dsoZoomOut.emit(e)}\r\n            disabled={this.disableZoom === \"out\" || this.disableZoom === \"both\"}\r\n          >\r\n            <span>Zoom uit</span>\r\n            <dso-icon icon=\"minus\"></dso-icon>\r\n          </button>\r\n        </div>\r\n        <section hidden={this.hideContent}>\r\n          <header>\r\n            <h2>{this.panelTitle}</h2>\r\n            <button\r\n              type=\"button\"\r\n              class=\"close-button\"\r\n              onClick={(e) => this.toggleVisibility(e)}\r\n              ref={(element) => (this.#closeButtonElement = element)}\r\n            >\r\n              <span>Verberg paneel {this.panelTitle}</span>\r\n              <dso-icon icon=\"times\"></dso-icon>\r\n            </button>\r\n          </header>\r\n          <dso-scrollable>\r\n            <div class=\"content\">\r\n              <slot></slot>\r\n            </div>\r\n          </dso-scrollable>\r\n        </section>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h } from './index-c92edd88.js';
+import { r as registerInstance, c as createEvent, h } from './index-93de4a35.js';
 import { v as v4 } from './v4-23648a96.js';
 
-const mapOverlaysCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-width:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-bottom:8px;max-width:100%;text-align:left}p[slot=info]{margin:0}";
+const mapOverlaysCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}fieldset{border:0;margin:0;min-inline-size:0;padding:0}fieldset .control-label{display:inline-block;font-weight:bold;margin-block-end:8px;max-inline-size:100%;text-align:start}p[slot=info]{margin:0}";
 const DsoMapOverlaysStyle0 = mapOverlaysCss;
 
 const MapOverlays = class {
@@ -29,7 +29,7 @@ const MapOverlays = class {
         for (const ref in this.selectableRefs) {
             delete this.selectableRefs[ref];
         }
-        return (h("fieldset", { key: 'e064b6e3c8270a7ae1a88a75310e643184b0c871', class: "form-group dso-checkboxes" }, h("legend", { key: 'be69f5fb324f9699693c8a59e02488d1ef299f80', class: "sr-only" }, "Kaartlagen"), h("div", { key: '31c5b7a451d53c2bb88078741a6bf003a5f38171', class: "dso-label-container" }, h("span", { key: 'f923ee4a9eab8445103642d68478e76f1393fa31', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'a3f52d6e7f87ecfdb6dd5ec354e728ec78ff392a', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
+        return (h("fieldset", { key: 'd4daba00ddfa6e9719a4978cdf414f8a2b4673b6', class: "form-group dso-checkboxes" }, h("legend", { key: '3d449225c4ff575a32b2b7734bbfd73ed3d3e717', class: "sr-only" }, "Kaartlagen"), h("div", { key: '5b58246094c74db536e1ffa96bfb6ad474ec6e61', class: "dso-label-container" }, h("span", { key: '738e98bf5695df4cf36b9f8877997865b5de4994', class: "control-label", "aria-hidden": "true" }, "Kaartlagen")), h("div", { key: 'd4f9547a84474f6c1aeba14fb552a55754085f18', class: "dso-field-container" }, this.overlays.map((overlay) => (h("dso-selectable", { key: overlay.id, type: "checkbox", value: overlay.name, checked: overlay.checked, disabled: overlay.disabled, name: this.group, ref: (ref) => ref && (this.selectableRefs[overlay.id] = ref), onDsoChange: (e) => this.overlayChangeHandler(overlay, e) }, overlay.name, overlay.info ? h("p", { slot: "info" }, overlay.info) : null))))));
     }
 };
 MapOverlays.style = DsoMapOverlaysStyle0;

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

@@ -1 +1 @@
-{"file":"dso-map-overlays.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,4WAA4W,CAAC;AACpY,6BAAe,cAAc;;MCWhB,WAAW;;;;QAEd,mBAAc,GAA+C,EAAE,CAAC;qBAMhEA,EAAM,EAAE;;;IAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;QAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;KAClD;IAED,kBAAkB;QAChB,IAAI,CAAC,QAAQ;aACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aAClG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;KACvC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,2BAA2B,IACzC,+DAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;","names":["uuidv4"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-width: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-bottom: units.$u1;\r\n    max-width: 100%;\r\n    text-align: left;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-map-overlays.entry.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,sYAAsY,CAAC;AAC9Z,6BAAe,cAAc;;MCWhB,WAAW;;;;QAEd,mBAAc,GAA+C,EAAE,CAAC;qBAMhEA,EAAM,EAAE;;;IAcR,oBAAoB,CAAC,OAAgB,EAAE,CAAqC;QAClF,MAAM,EAAE,OAAO,EAAE,GAAG,CAAC,CAAC,MAAM,CAAC;QAE7B,IAAI,CAAC,gBAAgB,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,CAAC;KAClD;IAED,kBAAkB;QAChB,IAAI,CAAC,QAAQ;aACV,MAAM,CAAC,CAAC,CAAC,mBAAK,OAAA,CAAC,CAAC,CAAC,QAAQ,IAAI,CAAA,MAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,EAAE,KAAK,CAAC,CAAC,EAAE,CAAC,0CAAE,QAAQ,MAAK,IAAI,CAAA,EAAA,CAAC;aAClG,OAAO,CAAC,CAAC,CAAC;;YACT,MAAA,IAAI,CAAC,cAAc,CAAC,CAAC,CAAC,EAAE,CAAC,0CAAE,UAAU,CAAC,KAAK,CAAC,CAAC;SAC9C,CAAC,CAAC;QAEL,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,QAAQ,CAAC;KACvC;IAED,MAAM;QACJ,KAAK,MAAM,GAAG,IAAI,IAAI,CAAC,cAAc,EAAE;YACrC,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC;SACjC;QAED,QACE,iEAAU,KAAK,EAAC,2BAA2B,IACzC,+DAAQ,KAAK,EAAC,SAAS,iBAAoB,EAC3C,4DAAK,KAAK,EAAC,qBAAqB,IAC9B,6DAAM,KAAK,EAAC,eAAe,iBAAa,MAAM,iBAEvC,CACH,EACN,4DAAK,KAAK,EAAC,qBAAqB,IAC7B,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,MACzB,sBACE,GAAG,EAAE,OAAO,CAAC,EAAE,EACf,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,OAAO,CAAC,IAAI,EACnB,OAAO,EAAE,OAAO,CAAC,OAAO,EACxB,QAAQ,EAAE,OAAO,CAAC,QAAQ,EAC1B,IAAI,EAAE,IAAI,CAAC,KAAK,EAChB,GAAG,EAAE,CAAC,GAAG,KAAK,GAAG,KAAK,IAAI,CAAC,cAAc,CAAC,OAAO,CAAC,EAAE,CAAC,GAAG,GAAG,CAAC,EAC5D,WAAW,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,oBAAoB,CAAC,OAAO,EAAE,CAAC,CAAC,IAExD,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,IAAI,GAAG,SAAG,IAAI,EAAC,MAAM,IAAE,OAAO,CAAC,IAAI,CAAK,GAAG,IAAI,CACzC,CAClB,CAAC,CACE,CACG,EACX;KACH;;;;;;","names":["uuidv4"],"sources":["src/components/map-overlays/map-overlays.scss?tag=dso-map-overlays&encapsulation=shadow","src/components/map-overlays/map-overlays.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n// Todo #1194\r\nfieldset {\r\n  border: 0;\r\n  margin: 0;\r\n  min-inline-size: 0;\r\n  padding: 0;\r\n\r\n  .control-label {\r\n    display: inline-block;\r\n    font-weight: bold;\r\n    margin-block-end: units.$u1;\r\n    max-inline-size: 100%;\r\n    text-align: start;\r\n  }\r\n}\r\n\r\np[slot=\"info\"] {\r\n  margin: 0;\r\n}\r\n","import { Component, Event, EventEmitter, Prop, h, ComponentInterface } from \"@stencil/core\";\r\nimport { v4 as uuidv4 } from \"uuid\";\r\n\r\nimport { Overlay, OverlayChangeEvent } from \"./map-overlays.interfaces\";\r\n\r\nimport { SelectableChangeEvent } from \"../selectable/selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-map-overlays\",\r\n  styleUrl: \"./map-overlays.scss\",\r\n  shadow: true,\r\n})\r\nexport class MapOverlays implements ComponentInterface {\r\n  private previousOverlays: Overlay[] | undefined;\r\n  private selectableRefs: { [id: number]: HTMLDsoSelectableElement } = {};\r\n\r\n  /**\r\n   * To group the overlays together. Generally the default value suffices.\r\n   */\r\n  @Prop()\r\n  group = uuidv4();\r\n\r\n  /**\r\n   * The overlays.\r\n   */\r\n  @Prop()\r\n  overlays!: Overlay[];\r\n\r\n  /**\r\n   * Emitted when the user selects a different overlay.\r\n   */\r\n  @Event()\r\n  dsoToggleOverlay!: EventEmitter<OverlayChangeEvent>;\r\n\r\n  private overlayChangeHandler(overlay: Overlay, e: CustomEvent<SelectableChangeEvent>) {\r\n    const { checked } = e.detail;\r\n\r\n    this.dsoToggleOverlay.emit({ overlay, checked });\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.overlays\r\n      .filter((o) => !o.disabled && this.previousOverlays?.find((p) => p.id === o.id)?.disabled === true)\r\n      .forEach((o) => {\r\n        this.selectableRefs[o.id]?.toggleInfo(false);\r\n      });\r\n\r\n    this.previousOverlays = this.overlays;\r\n  }\r\n\r\n  render() {\r\n    for (const ref in this.selectableRefs) {\r\n      delete this.selectableRefs[ref];\r\n    }\r\n\r\n    return (\r\n      <fieldset class=\"form-group dso-checkboxes\">\r\n        <legend class=\"sr-only\">Kaartlagen</legend>\r\n        <div class=\"dso-label-container\">\r\n          <span class=\"control-label\" aria-hidden=\"true\">\r\n            Kaartlagen\r\n          </span>\r\n        </div>\r\n        <div class=\"dso-field-container\">\r\n          {this.overlays.map((overlay) => (\r\n            <dso-selectable\r\n              key={overlay.id}\r\n              type=\"checkbox\"\r\n              value={overlay.name}\r\n              checked={overlay.checked}\r\n              disabled={overlay.disabled}\r\n              name={this.group}\r\n              ref={(ref) => ref && (this.selectableRefs[overlay.id] = ref)}\r\n              onDsoChange={(e) => this.overlayChangeHandler(overlay, e)}\r\n            >\r\n              {overlay.name}\r\n              {overlay.info ? <p slot=\"info\">{overlay.info}</p> : null}\r\n            </dso-selectable>\r\n          ))}\r\n        </div>\r\n      </fieldset>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/esm/dso-mark-bar.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, c as createEvent, h } from './index-c92edd88.js';
+import { r as registerInstance, c as createEvent, h } from './index-93de4a35.js';
 
-const markBarCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;width:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;height:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;width:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{width:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{bottom:8px;height:2.5rem;left:0;right:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;top:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;width:2.5rem;height:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-left:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;height:2.5rem;padding:8px;position:absolute;right:0;text-align:center;top:0;width:2.5rem}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
+const markBarCss = "*,*::after,*::before{box-sizing:border-box}:host{display:block;background-color:#fff}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar{display:flex;flex-grow:1}.dso-mark-bar .dso-mark-bar-input{display:flex;position:relative;inline-size:100%}.dso-mark-bar .dso-mark-bar-input input{background-color:transparent;background-image:none;border:1px solid #275937;border-radius:4px;border-width:1px;box-shadow:none;display:block;font-size:1rem;block-size:2.5rem;line-height:2.5rem;padding-inline:2.5rem;padding-block:6px;transition:border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;inline-size:100%;border-start-end-radius:0;border-end-end-radius:0;border-inline-end:0}.dso-mark-bar .dso-mark-bar-input input:focus{border-color:#275937;box-shadow:inset 0 0 0 1px #275937;outline:0}.dso-mark-bar .dso-mark-bar-input input::-ms-clear{display:none}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label{inline-size:2.5rem;padding-inline-end:8px}.dso-mark-bar .dso-mark-bar-input input:not(:placeholder-shown)+label .label-text{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}.dso-mark-bar .dso-mark-bar-input label{inset-block-end:8px;block-size:2.5rem;inset-inline-start:0;inset-inline-end:40px;padding-block:8px;padding-inline-start:8px;cursor:text;position:absolute;inset-block-start:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;}.dso-mark-bar .dso-mark-bar-input label dso-icon{color:#39870c;cursor:default;margin:-8px;padding:8px;inline-size:2.5rem;block-size:2.5rem}.dso-mark-bar .dso-mark-bar-input label .label-text{margin-inline-start:8px;color:#666}.dso-mark-bar .dso-mark-bar-input button{background-color:transparent;border:0;box-shadow:none;color:#39870c;font-size:0;block-size:2.5rem;padding:8px;position:absolute;inset-inline-end:0;text-align:center;inset-block-start:0;inline-size:2.5rem}.dso-button-container{position:relative;display:flex;align-items:center;gap:8px;flex-shrink:0;padding-inline:8px;border:1px solid #275937;border-inline-start:0;border-start-end-radius:4px;border-end-end-radius:4px}.dso-button-container button{appearance:none;padding:0;border:0;background-color:transparent;color:#39870c}.dso-button-container button:disabled{color:#ccc}.dso-button-container .divider{position:absolute;inset-inline-start:0;inset-block-start:8px;inset-block-end:8px;inline-size:1px;background-color:#ccc}";
 const DsoMarkBarStyle0 = markBarCss;
 
 const MarkBar = class {
@@ -51,7 +51,7 @@ const MarkBar = class {
     render() {
         const current = this.current || 0;
         const totalCount = this.totalCount || 0;
-        return (h("div", { key: '86eb7b642e9767352fbc75a1daba29afcf55ce03', class: "dso-mark-bar" }, h("div", { key: '09ae8802d957d6b211c29bf63862a31c1aa73226', class: "dso-mark-bar-input" }, h("input", { key: 'aad7ce3b0fc2885f83a09763be64d83adbaf565a', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: 'a734d54fdde110aeb8c8cc4f01c1a0cf01c414ac', htmlFor: "search-input" }, h("dso-icon", { key: '3b608e3b58be2c1523481711906ccd6930ec3fb7', class: "dso-search-icon", icon: "search" }), h("span", { key: 'e2f2ef89c4444c90688947010f01c551a4604b2c', class: "label-text" }, this.label)), h("button", { key: '6d5ecdef20b596f3ce1c7a7a0240c11bc4f474c7', type: "button", onClick: this.handleClear }, h("dso-icon", { key: 'e28f8ff586da9c44be6dce7ebe60f0c2ab06068e', icon: "times" }), h("span", { key: 'b84ebcfa78721dfed4f195d4a684c66e2e1aca48', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: 'ee0f15d11fc4997a51771eb13cbd75da919530ef', class: "dso-button-container" }, h("span", { key: 'c8bd69aa13ce337b8845d60bf38dee4c04cce547', class: "divider" }), h("button", { key: 'f235b21d3d068fbcef70b4d92d636ac2ffa0da39', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '587848082507cd57cd90e4c0f81be53d8e4df0b6', icon: "chevron-up", class: "hydrated" }), h("span", { key: '3f8e9c78ddc70fedc638528bfb0000b9ce4f91c9', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: '88e285a9a36594ddfc782539fd66f566496526ed' }, current, "/", totalCount), h("button", { key: '732c37e44fb2eb9989754d606776c15d95b328c4', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '72032a6914db0c1cdf967e02e470649f61056219', icon: "chevron-down", class: "hydrated" }), h("span", { key: '13cf1a7f9931e5bff22dbec53cfbf9464d8a5c72', class: "sr-only" }, "Volgend zoekresultaat")))));
+        return (h("div", { key: '82ef9a84a6953576bfebac49e0f4c7c676ec8e5e', class: "dso-mark-bar" }, h("div", { key: '7d0f787a6817767ed9ff8001eab1ef26d9a46656', class: "dso-mark-bar-input" }, h("input", { key: 'af06bc6f6003fdd707a9442f9846d2d94045a670', type: "text", id: "search-input", value: this.value, onInput: this.handleInput, onKeyDown: this.handleKeyDown, placeholder: " ", ref: (element) => (this.inputElement = element) }), h("label", { key: '061c17078705fd38c537e66a29b1b5af5bc9f0b8', htmlFor: "search-input" }, h("dso-icon", { key: '246ba69b0230946be0e4c1e3479acee36aca0872', class: "dso-search-icon", icon: "search" }), h("span", { key: '9f673502ec096039f4a24a0a37f7ce513ac08c6b', class: "label-text" }, this.label)), h("button", { key: '4df19c63c32f1b785364e75865a2eb06c0456440', type: "button", onClick: this.handleClear }, h("dso-icon", { key: '306b9291d5b803d215915368f625422092949b8c', icon: "times" }), h("span", { key: 'e0a4c7efc36bde841f25240fd613759aca5504d8', class: "sr-only" }, "Zoekopdracht legen"))), h("div", { key: '1549e84d397fe3c627d4d6920610b8071de36fb5', class: "dso-button-container" }, h("span", { key: '19cee7a0161cc9b7433390d45284cf53b634370f', class: "divider" }), h("button", { key: '57dc2293455a12ed0085ef7b69e6e49a6c10ad53', type: "button", onClick: this.handlePrevious, disabled: current <= 1 }, h("dso-icon", { key: '9926d9bfc9bd5540379dafcb2088f4f8956c988d', icon: "chevron-up", class: "hydrated" }), h("span", { key: '5439ef32cbfcce57b175840f6ad2ef414f22d638', class: "sr-only" }, "Vorig zoekresultaat")), h("span", { key: 'eff38a856dd1ad510a002c751bee2f64c8531fea' }, current, "/", totalCount), h("button", { key: '5400da71fe4feed73f533023a689ed0610ac2f70', type: "button", onClick: this.handleNext, disabled: current >= totalCount }, h("dso-icon", { key: '42123769427ee96c0259278532abe3e397e674f2', icon: "chevron-down", class: "hydrated" }), h("span", { key: '8c2d19ab4cce1faddaa70d2812ea11ea6a49a6af', class: "sr-only" }, "Volgend zoekresultaat")))));
     }
 };
 MarkBar.style = DsoMarkBarStyle0;

package/dist/esm/dso-mark-bar.entry.js.map

@@ -1 +1 @@
-{"file":"dso-mark-bar.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,o0EAAo0E,CAAC;AACx1E,yBAAe,UAAU;;MCYZ,OAAO;;;;;;;QA+DV,gBAAW,GAAG,CAAC,CAAQ;YAC7B,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC,EAAE;gBAC3C,OAAO;aACR;YAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,aAAa,EAAE,CAAC;gBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;aACtB,CAAC,CAAC;SACJ,CAAC;QAEM,eAAU,GAAG,CAAC,CAA6B;YACjD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SACzC,CAAC;QAEM,mBAAc,GAAG,CAAC,CAAa;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SAC7C,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAa;YAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SAC1C,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB;YACvC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACpB;SACF,CAAC;;qBA/EM,oBAAoB;;;;;;;IAkB5B,MAAM,QAAQ,CAAC,UAA+B,EAAE;;QAC9C,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;QAE3B,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EAAE,CAAC;SAC7B;KACF;IAyDD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;QAExC,QACE,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,8DACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAC,GAAG,EACf,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAC/C,EACF,8DAAO,OAAO,EAAC,cAAc,IAC3B,iEAAU,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAY,EAC3D,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CACtC,EACR,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7C,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,yBAA0B,CACxC,CACL,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,6DAAM,KAAK,EAAC,SAAS,GAAG,EACxB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,OAAO,IAAI,CAAC,IACxE,iEAAU,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,GAAY,EACxD,6DAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,EACT,+DACG,OAAO,OAAG,UAAU,CAChB,EACP,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,IAAI,UAAU,IAC7E,iEAAU,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,UAAU,GAAY,EAC1D,6DAAM,KAAK,EAAC,SAAS,4BAA6B,CAC3C,CACL,CACF,EACN;KACH;;;;;;","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n$height: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n  display: flex;\r\n  flex-grow: 1;\r\n\r\n  .dso-mark-bar-input {\r\n    display: flex;\r\n    position: relative;\r\n    width: 100%;\r\n\r\n    input {\r\n      background-color: transparent;\r\n      background-image: none;\r\n      border: 1px solid form-control.$focus-border-color;\r\n      border-radius: 4px;\r\n      border-width: 1px;\r\n      box-shadow: none;\r\n      display: block;\r\n      font-size: typography.$root-font-size-base;\r\n      height: $height;\r\n      line-height: $height;\r\n      padding-inline: $height;\r\n      padding-block: 6px;\r\n      transition:\r\n        border-color ease-in-out 0.15s,\r\n        box-shadow ease-in-out 0.15s;\r\n      width: 100%;\r\n      border-start-end-radius: 0;\r\n      border-end-end-radius: 0;\r\n      border-inline-end: 0;\r\n\r\n      &:focus {\r\n        border-color: form-control.$focus-border-color;\r\n        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n        outline: 0;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &:not(:placeholder-shown) + label {\r\n        width: $height;\r\n        padding-inline-end: units.$u1;\r\n\r\n        .label-text {\r\n          @include utilities.sr-only();\r\n        }\r\n      }\r\n    }\r\n\r\n    label {\r\n      bottom: units.$u1;\r\n      height: $height;\r\n      left: 0;\r\n      right: units.$u5;\r\n      padding-block: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n      cursor: text;\r\n      position: absolute;\r\n      top: 0;\r\n      overflow: hidden;\r\n      /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */\r\n      white-space: nowrap;\r\n      text-overflow: ellipsis;\r\n      /* stylelint-enable-next-line declaration-property-value-disallowed-list */\r\n\r\n      dso-icon {\r\n        color: colors.$grasgroen;\r\n        cursor: default;\r\n        margin: -8px;\r\n        padding: 8px;\r\n        width: $height;\r\n        height: $height;\r\n      }\r\n\r\n      .label-text {\r\n        margin-left: units.$u1;\r\n        color: colors.$grijs-60;\r\n      }\r\n    }\r\n\r\n    button {\r\n      background-color: transparent;\r\n      border: 0;\r\n      box-shadow: none;\r\n      color: colors.$grasgroen;\r\n      font-size: 0;\r\n      height: $height;\r\n      padding: units.$u1;\r\n      position: absolute;\r\n      right: 0;\r\n      text-align: center;\r\n      top: 0;\r\n      width: $height;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-button-container {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: units.$u1;\r\n  flex-shrink: 0;\r\n\r\n  padding-inline: units.$u1;\r\n\r\n  border: 1px solid colors.$bosgroen;\r\n  border-inline-start: 0;\r\n  border-start-end-radius: scaffolding.$border-radius-base;\r\n  border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n  button {\r\n    appearance: none;\r\n    padding: 0;\r\n    border: 0;\r\n    background-color: transparent;\r\n    color: colors.$grasgroen;\r\n\r\n    &:disabled {\r\n      color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  .divider {\r\n    position: absolute;\r\n    inset-inline-start: 0;\r\n    inset-block-start: units.$u1;\r\n    inset-block-end: units.$u1;\r\n\r\n    inline-size: 1px;\r\n\r\n    background-color: colors.$grijs-20;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n  MarkBarInputEvent,\r\n  MarkBarClearEvent,\r\n  MarkBarPaginationEvent,\r\n  MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-mark-bar.entry.js","mappings":";;AAAA,MAAM,UAAU,GAAG,u9EAAu9E,CAAC;AAC3+E,yBAAe,UAAU;;MCYZ,OAAO;;;;;;;QA+DV,gBAAW,GAAG,CAAC,CAAQ;YAC7B,IAAI,EAAE,CAAC,CAAC,MAAM,YAAY,gBAAgB,CAAC,EAAE;gBAC3C,OAAO;aACR;YAED,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC;gBACjB,aAAa,EAAE,CAAC;gBAChB,KAAK,EAAE,CAAC,CAAC,MAAM,CAAC,KAAK;aACtB,CAAC,CAAC;SACJ,CAAC;QAEM,eAAU,GAAG,CAAC,CAA6B;YACjD,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SACzC,CAAC;QAEM,mBAAc,GAAG,CAAC,CAAa;YACrC,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SAC7C,CAAC;QAEM,gBAAW,GAAG,CAAC,CAAa;YAClC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;SAC1C,CAAC;QAEM,kBAAa,GAAG,CAAC,CAAgB;YACvC,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE;gBACrB,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;aACpB;SACF,CAAC;;qBA/EM,oBAAoB;;;;;;;IAkB5B,MAAM,QAAQ,CAAC,UAA+B,EAAE;;QAC9C,MAAA,IAAI,CAAC,YAAY,0CAAE,KAAK,EAAE,CAAC;QAE3B,IAAI,OAAO,CAAC,MAAM,EAAE;YAClB,MAAA,IAAI,CAAC,YAAY,0CAAE,MAAM,EAAE,CAAC;SAC7B;KACF;IAyDD,MAAM;QACJ,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,CAAC,CAAC;QAClC,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,IAAI,CAAC,CAAC;QAExC,QACE,4DAAK,KAAK,EAAC,cAAc,IACvB,4DAAK,KAAK,EAAC,oBAAoB,IAC7B,8DACE,IAAI,EAAC,MAAM,EACX,EAAE,EAAC,cAAc,EACjB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa,EAC7B,WAAW,EAAC,GAAG,EACf,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,YAAY,GAAG,OAAO,CAAC,GAC/C,EACF,8DAAO,OAAO,EAAC,cAAc,IAC3B,iEAAU,KAAK,EAAC,iBAAiB,EAAC,IAAI,EAAC,QAAQ,GAAY,EAC3D,6DAAM,KAAK,EAAC,YAAY,IAAE,IAAI,CAAC,KAAK,CAAQ,CACtC,EACR,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW,IAC7C,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,yBAA0B,CACxC,CACL,EACN,4DAAK,KAAK,EAAC,sBAAsB,IAC/B,6DAAM,KAAK,EAAC,SAAS,GAAG,EACxB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,cAAc,EAAE,QAAQ,EAAE,OAAO,IAAI,CAAC,IACxE,iEAAU,IAAI,EAAC,YAAY,EAAC,KAAK,EAAC,UAAU,GAAY,EACxD,6DAAM,KAAK,EAAC,SAAS,0BAA2B,CACzC,EACT,+DACG,OAAO,OAAG,UAAU,CAChB,EACP,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,QAAQ,EAAE,OAAO,IAAI,UAAU,IAC7E,iEAAU,IAAI,EAAC,cAAc,EAAC,KAAK,EAAC,UAAU,GAAY,EAC1D,6DAAM,KAAK,EAAC,SAAS,4BAA6B,CAC3C,CACL,CACF,EACN;KACH;;;;;;","names":[],"sources":["src/components/mark-bar/mark-bar.scss?tag=dso-mark-bar&encapsulation=shadow","src/components/mark-bar/mark-bar.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/scaffolding\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n@use \"~dso-toolkit/src/components/form-control\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n  background-color: colors.$wit;\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\n$block-size: units.$ru5;\r\n$focus-border-width: 1px;\r\n\r\n.dso-mark-bar {\r\n  display: flex;\r\n  flex-grow: 1;\r\n\r\n  .dso-mark-bar-input {\r\n    display: flex;\r\n    position: relative;\r\n    inline-size: 100%;\r\n\r\n    input {\r\n      background-color: transparent;\r\n      background-image: none;\r\n      border: 1px solid form-control.$focus-border-color;\r\n      border-radius: 4px;\r\n      border-width: 1px;\r\n      box-shadow: none;\r\n      display: block;\r\n      font-size: typography.$root-font-size-base;\r\n      block-size: $block-size;\r\n      line-height: $block-size;\r\n      padding-inline: $block-size;\r\n      padding-block: 6px;\r\n      transition:\r\n        border-color ease-in-out 0.15s,\r\n        box-shadow ease-in-out 0.15s;\r\n      inline-size: 100%;\r\n      border-start-end-radius: 0;\r\n      border-end-end-radius: 0;\r\n      border-inline-end: 0;\r\n\r\n      &:focus {\r\n        border-color: form-control.$focus-border-color;\r\n        box-shadow: inset 0 0 0 form-control.$focus-border-width form-control.$focus-border-color;\r\n        outline: 0;\r\n      }\r\n\r\n      &::-ms-clear {\r\n        display: none;\r\n      }\r\n\r\n      &:not(:placeholder-shown) + label {\r\n        inline-size: $block-size;\r\n        padding-inline-end: units.$u1;\r\n\r\n        .label-text {\r\n          @include utilities.sr-only();\r\n        }\r\n      }\r\n    }\r\n\r\n    label {\r\n      inset-block-end: units.$u1;\r\n      block-size: $block-size;\r\n      inset-inline-start: 0;\r\n      inset-inline-end: units.$u5;\r\n      padding-block: units.$u1;\r\n      padding-inline-start: units.$u1;\r\n      cursor: text;\r\n      position: absolute;\r\n      inset-block-start: 0;\r\n      overflow: hidden;\r\n      /* stylelint-disable declaration-property-value-disallowed-list -- The following properties are needed to emulate the browser native placeholder attribute behavior */\r\n      white-space: nowrap;\r\n      text-overflow: ellipsis;\r\n      /* stylelint-enable-next-line declaration-property-value-disallowed-list */\r\n\r\n      dso-icon {\r\n        color: colors.$grasgroen;\r\n        cursor: default;\r\n        margin: -8px;\r\n        padding: 8px;\r\n        inline-size: $block-size;\r\n        block-size: $block-size;\r\n      }\r\n\r\n      .label-text {\r\n        margin-inline-start: units.$u1;\r\n        color: colors.$grijs-60;\r\n      }\r\n    }\r\n\r\n    button {\r\n      background-color: transparent;\r\n      border: 0;\r\n      box-shadow: none;\r\n      color: colors.$grasgroen;\r\n      font-size: 0;\r\n      block-size: $block-size;\r\n      padding: units.$u1;\r\n      position: absolute;\r\n      inset-inline-end: 0;\r\n      text-align: center;\r\n      inset-block-start: 0;\r\n      inline-size: $block-size;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-button-container {\r\n  position: relative;\r\n\r\n  display: flex;\r\n  align-items: center;\r\n  gap: units.$u1;\r\n  flex-shrink: 0;\r\n\r\n  padding-inline: units.$u1;\r\n\r\n  border: 1px solid colors.$bosgroen;\r\n  border-inline-start: 0;\r\n  border-start-end-radius: scaffolding.$border-radius-base;\r\n  border-end-end-radius: scaffolding.$border-radius-base;\r\n\r\n  button {\r\n    appearance: none;\r\n    padding: 0;\r\n    border: 0;\r\n    background-color: transparent;\r\n    color: colors.$grasgroen;\r\n\r\n    &:disabled {\r\n      color: colors.$grijs-20;\r\n    }\r\n  }\r\n\r\n  .divider {\r\n    position: absolute;\r\n    inset-inline-start: 0;\r\n    inset-block-start: units.$u1;\r\n    inset-block-end: units.$u1;\r\n\r\n    inline-size: 1px;\r\n\r\n    background-color: colors.$grijs-20;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Prop, Event, EventEmitter, Method } from \"@stencil/core\";\r\nimport {\r\n  MarkBarInputEvent,\r\n  MarkBarClearEvent,\r\n  MarkBarPaginationEvent,\r\n  MarkBarFocusOptions,\r\n} from \"./mark-bar.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-mark-bar\",\r\n  styleUrl: \"./mark-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class MarkBar implements ComponentInterface {\r\n  /**\r\n   * The current search value.\r\n   */\r\n  @Prop()\r\n  value?: string;\r\n\r\n  /**\r\n   * The label for the input field.\r\n   */\r\n  @Prop()\r\n  label = \"Zoeken in document\";\r\n\r\n  /**\r\n   * The current (one-based) highlighted search item.\r\n   */\r\n  @Prop()\r\n  current?: number;\r\n\r\n  /**\r\n   * Total number of search results.\r\n   */\r\n  @Prop()\r\n  totalCount?: number;\r\n\r\n  /**\r\n   * Focuses the input field.\r\n   */\r\n  @Method()\r\n  async dsoFocus(options: MarkBarFocusOptions = {}) {\r\n    this.inputElement?.focus();\r\n\r\n    if (options.select) {\r\n      this.inputElement?.select();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Emitted each time the user types in the search field.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoInput!: EventEmitter<MarkBarInputEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"next search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoNext!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"previous search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoPrevious!: EventEmitter<MarkBarPaginationEvent>;\r\n\r\n  /**\r\n   * Emitted when user activates \"clear search result\" button.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClear!: EventEmitter<MarkBarClearEvent>;\r\n\r\n  private inputElement?: HTMLInputElement;\r\n\r\n  private handleInput = (e: Event) => {\r\n    if (!(e.target instanceof HTMLInputElement)) {\r\n      return;\r\n    }\r\n\r\n    this.dsoInput.emit({\r\n      originalEvent: e,\r\n      value: e.target.value,\r\n    });\r\n  };\r\n\r\n  private handleNext = (e: MouseEvent | KeyboardEvent) => {\r\n    this.dsoNext.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handlePrevious = (e: MouseEvent) => {\r\n    this.dsoPrevious.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleClear = (e: MouseEvent) => {\r\n    this.dsoClear.emit({ originalEvent: e });\r\n  };\r\n\r\n  private handleKeyDown = (e: KeyboardEvent) => {\r\n    if (e.key === \"Enter\") {\r\n      this.handleNext(e);\r\n    }\r\n  };\r\n\r\n  render() {\r\n    const current = this.current || 0;\r\n    const totalCount = this.totalCount || 0;\r\n\r\n    return (\r\n      <div class=\"dso-mark-bar\">\r\n        <div class=\"dso-mark-bar-input\">\r\n          <input\r\n            type=\"text\"\r\n            id=\"search-input\"\r\n            value={this.value}\r\n            onInput={this.handleInput}\r\n            onKeyDown={this.handleKeyDown}\r\n            placeholder=\" \"\r\n            ref={(element) => (this.inputElement = element)}\r\n          />\r\n          <label htmlFor=\"search-input\">\r\n            <dso-icon class=\"dso-search-icon\" icon=\"search\"></dso-icon>\r\n            <span class=\"label-text\">{this.label}</span>\r\n          </label>\r\n          <button type=\"button\" onClick={this.handleClear}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Zoekopdracht legen</span>\r\n          </button>\r\n        </div>\r\n        <div class=\"dso-button-container\">\r\n          <span class=\"divider\" />\r\n          <button type=\"button\" onClick={this.handlePrevious} disabled={current <= 1}>\r\n            <dso-icon icon=\"chevron-up\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Vorig zoekresultaat</span>\r\n          </button>\r\n          <span>\r\n            {current}/{totalCount}\r\n          </span>\r\n          <button type=\"button\" onClick={this.handleNext} disabled={current >= totalCount}>\r\n            <dso-icon icon=\"chevron-down\" class=\"hydrated\"></dso-icon>\r\n            <span class=\"sr-only\">Volgend zoekresultaat</span>\r\n          </button>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,8 +1,8 @@
-import { r as registerInstance, c as createEvent, h, a as getElement } from './index-c92edd88.js';
+import { r as registerInstance, c as createEvent, h, a as getElement } from './index-93de4a35.js';
 import { g as getActiveElement } from './get-active-element-37680994.js';
 import { v as v4 } from './v4-23648a96.js';
 
-const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>.dso-body img{height:auto;max-width:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-bottom:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-bottom:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{height:auto;max-width:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";
+const modalCss = "@keyframes ModalFadeIn{0%{opacity:0}100%{opacity:1}}*,*::after,*::before{box-sizing:border-box}:host{display:block}:host([fullscreen]) dialog{inline-size:100dvi;block-size:100dvb}:host([fullscreen]) dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host([fullscreen]) dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host([fullscreen]) dialog .dso-footer{flex-shrink:0}@media screen and (max-width: 480px){:host dialog{inline-size:100dvi;block-size:100dvb}:host dialog .dso-dialog{display:flex;flex-direction:column;inline-size:100%;block-size:100%}:host dialog .dso-dialog>dso-scrollable{flex-grow:1;max-block-size:unset}:host dialog .dso-footer{flex-shrink:0}}.sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);border:0}button{-webkit-appearance:button;color:inherit;cursor:pointer;font:inherit;font-family:inherit;font-size:inherit;line-height:inherit;margin:0;overflow:visible;text-transform:none}button[disabled]{cursor:default}button::-moz-focus-inner{border:0;padding:0}.dso-modal{overflow:visible;padding:0;border:0}.dso-modal::backdrop{background-color:rgba(255, 255, 255, 0.8)}.dso-modal .dso-dialog{inline-size:640px;background-color:#fff;opacity:1;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);animation:200ms ease-out 0s 1 ModalFadeIn}.dso-modal .dso-header{position:relative;padding:16px;border-block-end:1px solid #ccc}.dso-modal .dso-header h2{max-inline-size:calc(100% - 24px);margin:0;color:#275937}.dso-modal .dso-header .dso-close{position:absolute;inset-block-start:16px;inset-inline-end:13px;block-size:32px;inline-size:32px;padding:0;background-color:transparent;border:0;text-align:center}.dso-modal>.dso-dialog>.dso-body{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:1.5rem;overflow-x:auto;padding:32px}.dso-modal>.dso-dialog>.dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body ul,.dso-modal>.dso-dialog>.dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>.dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>.dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>.dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>.dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>.dso-body dso-highlight-box,.dso-modal>.dso-dialog>.dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>.dso-body img{block-size:auto;max-inline-size:100%}.dso-modal>.dso-dialog>dso-scrollable{block-size:calc(100% - 96px - 1.5rem);max-block-size:calc(70vh - 144px - 1.5em);min-block-size:6.5rem}.dso-modal>.dso-dialog>dso-scrollable .dso-body{padding:32px}.dso-modal>.dso-dialog>dso-scrollable .dso-body p{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul,.dso-modal>.dso-dialog>dso-scrollable .dso-body ol{margin-block-end:16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),.dso-modal>.dso-dialog>dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list){padding-inline-start:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body pre{margin:0 0 16px}.dso-modal>.dso-dialog>dso-scrollable .dso-body blockquote{padding:16px 24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body dso-highlight-box,.dso-modal>.dso-dialog>dso-scrollable .dso-body .dso-highlight-box{margin-block-end:24px}.dso-modal>.dso-dialog>dso-scrollable .dso-body img{block-size:auto;max-inline-size:100%}.dso-modal .dso-body:focus-visible{outline:none}.dso-modal .dso-footer{min-block-size:80px;padding:16px 32px;text-align:end}@media screen and (max-width: 767px){.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (min-width: 768px){.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary{margin-inline-start:16px}.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}}@media screen and (max-width: 767px){.dso-modal .dso-dialog{max-inline-size:100%;margin-block-start:0}.dso-modal .dso-footer .dso-primary+.dso-primary,.dso-modal .dso-footer .dso-primary+.dso-secondary,.dso-modal .dso-footer .dso-primary+.dso-tertiary,.dso-modal .dso-footer .dso-secondary+.dso-primary,.dso-modal .dso-footer .dso-secondary+.dso-secondary,.dso-modal .dso-footer .dso-secondary+.dso-tertiary,.dso-modal .dso-footer .dso-tertiary+.dso-primary,.dso-modal .dso-footer .dso-tertiary+.dso-secondary,.dso-modal .dso-footer .dso-tertiary+.dso-tertiary{margin-inline-start:0}.dso-modal .dso-footer button{inline-size:100%;text-align:center}.dso-modal .dso-footer button+button{margin-block-start:8px}.dso-modal .dso-footer button.dso-tertiary,.dso-modal .dso-footer button.dso-tertiary span{float:none}}@media screen and (max-height: 380px){.dso-modal .dso-dialog{min-block-size:216px;margin-block-start:8px;margin-block-end:8px}.dso-modal .dso-header{padding:8px 16px}.dso-modal .dso-header .dso-close{inset-block-start:8px}.dso-modal .dso-body{padding:16px 24px}.dso-modal .dso-footer{min-block-size:auto;overflow:auto;padding:8px 32px}}.dso-close dso-icon{color:#39870c}";
 const DsoModalStyle0 = modalCss;
 
 const Modal = class {
@@ -39,10 +39,10 @@ const Modal = class {
     }
     render() {
         var _a;
-        return (h("dialog", { key: '105a90e070e128bc42e652e71e2d65d7075c3b22', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
+        return (h("dialog", { key: '9d9172de470f4cd41bcc9120284796f61eb2e108', class: "dso-modal", role: (_a = this.role) !== null && _a !== void 0 ? _a : undefined, "aria-modal": "true", "aria-labelledby": this.ariaId, ref: (element) => (this.htmlDialogElement = element), onCancel: (e) => {
                 e.preventDefault();
                 this.dsoClose.emit({ originalEvent: e });
-            } }, h("div", { key: '62928005e012b28a4bb3292577d338a19564d900', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: 'a3b8ca827f4f810111748c8afce16376a2855ea2' }, h("div", { key: 'e1b8da8b7f989fb9218225717b42a442ccdbba68', class: "dso-body", tabIndex: 0 }, h("slot", { key: '75d7237cd6361428ee1a8fde43297105c13a5a70', name: "body" }))), this.hasFooter && (h("div", { key: 'ccba551213f760dc116181a15c5d14ccc4e69b55', class: "dso-footer" }, h("slot", { key: '723581c8230a74655480866e0cb319c0e3f40215', name: "footer" }))))));
+            } }, h("div", { key: '8b55f0d93087079ae9553ed923f8a91d6263f106', class: "dso-dialog", role: "document" }, this.modalTitle ? (h("div", { class: "dso-header" }, h("h2", { id: this.ariaId }, this.modalTitle), this.showCloseButton && (h("button", { type: "button", class: "dso-close", onClick: (e) => this.dsoClose.emit({ originalEvent: e }) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten"))))) : (h("span", { class: "sr-only", id: this.ariaId }, "Dialoog")), h("dso-scrollable", { key: '67237cd6b47ad31bb1c3b9ef0ff7ed857a2dab3e' }, h("div", { key: '9fab8506d664740d1e8201339064d12cae1513bf', class: "dso-body", tabIndex: 0 }, h("slot", { key: '36f25fee6e2ef67c5263c5b71d14207a566e835c', name: "body" }))), this.hasFooter && (h("div", { key: '279afafbbd24f6c285f7d85b755a4ec41ecd43d1', class: "dso-footer" }, h("slot", { key: '0a894d9bb649768c53f99bd4569df9dc0db0aef3', name: "footer" }))))));
     }
     get host() { return getElement(this); }
 };

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

@@ -1 +1 @@
-{"file":"dso-modal.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,23LAA23L,CAAC;AAC74L,uBAAe,QAAQ;;MCUV,KAAK;;;;sBAOP,EAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACE,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,yEACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"dso-modal.entry.js","mappings":";;;;AAAA,MAAM,QAAQ,GAAG,q6LAAq6L,CAAC;AACv7L,uBAAe,QAAQ;;MCUV,KAAK;;;;sBAOP,EAAE,EAAE;;;oBAmBS,QAAQ;2BAUiB,SAAS;+BAQtC,IAAI;;IAUtB,IAAI,SAAS;QACX,OAAO,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;KAC5D;IAED,gBAAgB;;QACd,IAAI,MAAA,IAAI,CAAC,iBAAiB,0CAAE,WAAW,EAAE;YACvC,MAAM,aAAa,GAAG,gBAAgB,EAAE,CAAC;YACzC,IAAI,aAAa,YAAY,WAAW,EAAE;gBACxC,IAAI,CAAC,kBAAkB,GAAG,aAAa,CAAC;aACzC;YAED,IAAI,CAAC,iBAAiB,CAAC,SAAS,EAAE,CAAC;SACpC;KACF;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,iBAAiB,0CAAE,KAAK,EAAE,CAAC;QAEhC,IAAI,IAAI,CAAC,WAAW,KAAK,KAAK,EAAE;YAC9B,OAAO;SACR;QAED,OAAC,MAAA,IAAI,CAAC,WAAW,mCAAI,IAAI,CAAC,kBAAkB,CAAC,0CAAE,KAAK,EAAE,CAAC;KACxD;IAED,MAAM;;QACJ,QACE,+DACE,KAAK,EAAC,WAAW,EACjB,IAAI,EAAE,MAAA,IAAI,CAAC,IAAI,mCAAI,SAAS,gBACjB,MAAM,qBACA,IAAI,CAAC,MAAM,EAC5B,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,iBAAiB,GAAG,OAAO,CAAC,EACpD,QAAQ,EAAE,CAAC,CAAC;gBACV,CAAC,CAAC,cAAc,EAAE,CAAC;gBAEnB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,CAAC;aAC1C,IAED,4DAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,UAAU,IACpC,IAAI,CAAC,UAAU,IACd,WAAK,KAAK,EAAC,YAAY,IACrB,UAAI,EAAE,EAAE,IAAI,CAAC,MAAM,IAAG,IAAI,CAAC,UAAU,CAAM,EAC1C,IAAI,CAAC,eAAe,KACnB,cAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,WAAW,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,IAC9F,gBAAU,IAAI,EAAC,OAAO,GAAY,EAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACG,KAEN,YAAM,KAAK,EAAC,SAAS,EAAC,EAAE,EAAE,IAAI,CAAC,MAAM,cAE9B,CACR,EAED,yEACE,4DAAK,KAAK,EAAC,UAAU,EAAC,QAAQ,EAAE,CAAC,IAC/B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB,CACS,EAEhB,IAAI,CAAC,SAAS,KACb,4DAAK,KAAK,EAAC,YAAY,IACrB,6DAAM,IAAI,EAAC,QAAQ,GAAG,CAClB,CACP,CACG,CACC,EACT;KACH;;;;;;;","names":[],"sources":["src/components/modal/modal.scss?tag=dso-modal&encapsulation=shadow","src/components/modal/modal.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/modal\";\r\n@use \"~dso-toolkit/src/variables/media-query-breakpoints\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: block;\r\n}\r\n\r\n// fullscreen option\r\n:host([fullscreen]) dialog {\r\n  @include modal.fullscreen();\r\n}\r\n\r\n// Go to fullscreen on =< 480px viewport\r\n@media screen and (max-width: media-query-breakpoints.$screen-xs-min) {\r\n  :host dialog {\r\n    @include modal.fullscreen();\r\n  }\r\n}\r\n\r\n.sr-only {\r\n  @include utilities.sr-only();\r\n}\r\n\r\nbutton {\r\n  @include button.element();\r\n}\r\n\r\n.dso-modal {\r\n  @include modal.root();\r\n}\r\n\r\n.dso-close {\r\n  dso-icon {\r\n    color: modal.$close-icon-color;\r\n  }\r\n}\r\n","import { h, Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { ModalCloseEvent } from \"./modal.interfaces\";\r\nimport { getActiveElement } from \"../../utils/get-active-element\";\r\n\r\n@Component({\r\n  tag: \"dso-modal\",\r\n  styleUrl: \"modal.scss\",\r\n  shadow: true,\r\n})\r\nexport class Modal implements ComponentInterface {\r\n  private htmlDialogElement?: HTMLDialogElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoModalElement;\r\n\r\n  @State()\r\n  ariaId = v4();\r\n\r\n  /**\r\n   * when set the modal will be shown in fullscreen.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fullscreen?: boolean;\r\n\r\n  /**\r\n   * The title of the Modal.\r\n   */\r\n  @Prop()\r\n  modalTitle?: string;\r\n\r\n  /**\r\n   * the role for the modal `dialog` | `alert` | `alertdialog`.\r\n   */\r\n  @Prop()\r\n  // eslint-disable-next-line @stencil-community/reserved-member-names\r\n  role: string | null = \"dialog\";\r\n\r\n  /**\r\n   * The element to return focus to after the modal is closed.\r\n   *\r\n   * * `undefined` will return focus to the previously focused element (default).\r\n   * * `false` will not return focus to any element.\r\n   * * or, provide your own `HTMLElement` that will receive focus upon closing.\r\n   */\r\n  @Prop()\r\n  returnFocus: false | HTMLElement | undefined = undefined;\r\n\r\n  /**\r\n   * when `false` the close button in the header will not be rendered. Defaults to `true`.\r\n   *\r\n   * Needs `modalTitle` to be set.\r\n   */\r\n  @Prop()\r\n  showCloseButton = true;\r\n\r\n  private returnFocusElement: HTMLElement | undefined;\r\n\r\n  /**\r\n   * Emitted when the user wants to close the Modal.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<ModalCloseEvent>;\r\n\r\n  get hasFooter() {\r\n    return this.host.querySelector(\"[slot='footer']\") !== null;\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    if (this.htmlDialogElement?.isConnected) {\r\n      const activeElement = getActiveElement();\r\n      if (activeElement instanceof HTMLElement) {\r\n        this.returnFocusElement = activeElement;\r\n      }\r\n\r\n      this.htmlDialogElement.showModal();\r\n    }\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.htmlDialogElement?.close();\r\n\r\n    if (this.returnFocus === false) {\r\n      return;\r\n    }\r\n\r\n    (this.returnFocus ?? this.returnFocusElement)?.focus();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <dialog\r\n        class=\"dso-modal\"\r\n        role={this.role ?? undefined}\r\n        aria-modal=\"true\"\r\n        aria-labelledby={this.ariaId}\r\n        ref={(element) => (this.htmlDialogElement = element)}\r\n        onCancel={(e) => {\r\n          e.preventDefault();\r\n\r\n          this.dsoClose.emit({ originalEvent: e });\r\n        }}\r\n      >\r\n        <div class=\"dso-dialog\" role=\"document\">\r\n          {this.modalTitle ? (\r\n            <div class=\"dso-header\">\r\n              <h2 id={this.ariaId}>{this.modalTitle}</h2>\r\n              {this.showCloseButton && (\r\n                <button type=\"button\" class=\"dso-close\" onClick={(e) => this.dsoClose.emit({ originalEvent: e })}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              )}\r\n            </div>\r\n          ) : (\r\n            <span class=\"sr-only\" id={this.ariaId}>\r\n              Dialoog\r\n            </span>\r\n          )}\r\n\r\n          <dso-scrollable>\r\n            <div class=\"dso-body\" tabIndex={0}>\r\n              <slot name=\"body\" />\r\n            </div>\r\n          </dso-scrollable>\r\n\r\n          {this.hasFooter && (\r\n            <div class=\"dso-footer\">\r\n              <slot name=\"footer\" />\r\n            </div>\r\n          )}\r\n        </div>\r\n      </dialog>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1,7 +1,7 @@
-import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-c92edd88.js';
+import { r as registerInstance, c as createEvent, h, F as Fragment, a as getElement } from './index-93de4a35.js';
 import { i as isModifiedEvent } from './is-modified-event-70db5fa8.js';
 
-const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;height:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-bottom-color:#39870c}.pagination>li a::after{border-bottom:3px solid transparent;bottom:0;content:\"\";display:inline-block;left:0;position:absolute;width:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-left:8px}.dso-page-hidden{visibility:hidden}";
+const paginationCss = ":host{display:block}*,*::after,*::before{box-sizing:border-box}.pagination{padding-inline-start:initial;text-align:center}.pagination>li{display:inline-block;font-weight:bold;line-height:calc(2rem - 4px);text-align:center;vertical-align:middle}.pagination>li>a,.pagination>li>span{align-items:center;color:#39870c;display:flex;block-size:2rem;justify-content:center;position:relative;min-inline-size:2rem;padding:2px}.pagination>li>a:active,.pagination>li>span:active{background-color:#ebf3e6}.pagination>li>span{border:2px solid transparent;border-radius:1rem}.pagination>li a{line-height:2rem;text-decoration:none}.pagination>li a:hover,.pagination>li a:focus{text-decoration:none}.pagination>li a:hover::after,.pagination>li a:focus::after{border-block-end-color:#39870c}.pagination>li a::after{border-block-end:3px solid transparent;inset-block-end:0;content:\"\";display:inline-block;inset-inline-start:0;position:absolute;inline-size:100%}.pagination>li.active span{background-color:#39870c;color:#fff}.pagination>li+li{margin-inline-start:8px}.dso-page-hidden{visibility:hidden}";
 const DsoPaginationStyle0 = paginationCss;
 
 const Pagination = class {