@dso-toolkit/core 83.0.0 → 84.0.0

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

@@ -1 +0,0 @@
-{"file":"p-CXFRGieQ.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,o3CAAo3C;;MCW93C,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AANxB,IAAA,WAAA,GAAA;;;;AAUE;;AAEG;AAEH,QAAA,IAAO,CAAA,OAAA,GAAG,KAAK;AAEf;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAG,KAAK;AAiBhB;;AAEG;AAEH,QAAA,IAAU,CAAA,UAAA,GAAG,EAAE,EAAE;AA+ClB;AAvCS,IAAA,YAAY,CAAC,CAAQ,EAAA;AAC3B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;AACxB,YAAA,aAAa,EAAE,CAAC;AAChB,YAAA,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;AACvB,SAAA,CAAC;;IAGJ,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI;;IAG9D,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAA,CAAA,QAAA,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,GAAA,EAAA,0CAAA,EACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,EACJ,cAAA,EAAA,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAChC,GAAC,IAAI,CAAC,eAAe,GAAG,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,EAAE,IAClE,IAAI,CAAC,YAAY,GAAG,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,GAAG,EAAE,EAAC,EAEvE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW,EAAA,EAChF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,IAAI,EAAC,MAAM,EAAA,WAAA,EAAW,SAAS,EAAA,EAChC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,EAAG,CAAA,EAC3D,CAAA,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,EAAG,CAAA,CAC1C,CACA,CACC,EACR,IAAI,CAAC,eAAe,KACnB,8DAAO,OAAO,EAAE,IAAI,CAAC,UAAU,EAAA,EAC7B,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACF,CACT,CACQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/slide-toggle/slide-toggle.scss?tag=dso-slide-toggle&encapsulation=scoped","src/components/slide-toggle/slide-toggle.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/typography\";\r\n\r\n$slide-toggle-height: 20px;\r\n\r\n:host {\r\n  display: inline-block;\r\n  padding-block-start: (typography.$line-height-base * typography.$font-size-base - $slide-toggle-height) * 0.5;\r\n}\r\n\r\nbutton.dso-slider {\r\n  border: 0;\r\n  padding: 0;\r\n\r\n  &:focus-visible {\r\n    outline: 2px solid colors.$grijs-80;\r\n    outline-offset: 1px;\r\n  }\r\n\r\n  svg {\r\n    rect {\r\n      fill: colors.$grijs-40;\r\n      transition: fill 0.25s;\r\n    }\r\n\r\n    circle {\r\n      @include utilities.transition(transform);\r\n\r\n      transform: translateX(10px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen;\r\n    }\r\n\r\n    circle {\r\n      transform: translateX(30px);\r\n      fill: colors.$wit;\r\n    }\r\n  }\r\n\r\n  &[disabled] svg {\r\n    rect {\r\n      fill: colors.$grijs-20;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n\r\n  &[disabled][aria-checked=\"true\"] svg {\r\n    rect {\r\n      fill: colors.$bosgroen-40;\r\n    }\r\n\r\n    circle {\r\n      fill: colors.$grijs-10;\r\n    }\r\n  }\r\n}\r\n\r\n.dso-slider {\r\n  border-radius: units.$u3;\r\n  display: inline-flex;\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n  }\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Fragment, Prop, State, h } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\n\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  scoped: true,\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event({ composed: false })\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CXctuPtC.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/icon/icon.scss?tag=dso-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/icon\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  block-size: icon.$size;\r\n  vertical-align: icon.$vertical-align;\r\n  inline-size: icon.$size;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.icon-container {\r\n  display: block;\r\n  line-height: 0;\r\n}\r\n","import { Component, Prop, h } from \"@stencil/core\";\r\nimport air from \"dso-toolkit/src/icons/air.svg\";\r\nimport angleDown from \"dso-toolkit/src/icons/angle-down.svg\";\r\nimport angleLeft from \"dso-toolkit/src/icons/angle-left.svg\";\r\nimport angleRight from \"dso-toolkit/src/icons/angle-right.svg\";\r\nimport angleUp from \"dso-toolkit/src/icons/angle-up.svg\";\r\nimport asterisk from \"dso-toolkit/src/icons/asterisk.svg\";\r\nimport balloon from \"dso-toolkit/src/icons/balloon.svg\";\r\nimport bars from \"dso-toolkit/src/icons/bars.svg\";\r\nimport bell from \"dso-toolkit/src/icons/bell.svg\";\r\nimport buildings from \"dso-toolkit/src/icons/buildings.svg\";\r\nimport calendar from \"dso-toolkit/src/icons/calendar.svg\";\r\nimport call from \"dso-toolkit/src/icons/call.svg\";\r\nimport caretDown from \"dso-toolkit/src/icons/caret-down.svg\";\r\nimport checkCircle from \"dso-toolkit/src/icons/check-circle.svg\";\r\nimport check from \"dso-toolkit/src/icons/check.svg\";\r\nimport chevronDown from \"dso-toolkit/src/icons/chevron-down.svg\";\r\nimport chevronLeft from \"dso-toolkit/src/icons/chevron-left.svg\";\r\nimport chevronRight from \"dso-toolkit/src/icons/chevron-right.svg\";\r\nimport chevronUp from \"dso-toolkit/src/icons/chevron-up.svg\";\r\nimport circleNotch from \"dso-toolkit/src/icons/circle-notch.svg\";\r\nimport clock from \"dso-toolkit/src/icons/clock.svg\";\r\nimport copy from \"dso-toolkit/src/icons/copy.svg\";\r\nimport crown from \"dso-toolkit/src/icons/crown.svg\";\r\nimport cultural from \"dso-toolkit/src/icons/cultural.svg\";\r\nimport document from \"dso-toolkit/src/icons/document.svg\";\r\nimport download from \"dso-toolkit/src/icons/download.svg\";\r\nimport email from \"dso-toolkit/src/icons/email.svg\";\r\nimport energy from \"dso-toolkit/src/icons/energy.svg\";\r\nimport environment from \"dso-toolkit/src/icons/environment.svg\";\r\nimport exclamation from \"dso-toolkit/src/icons/exclamation.svg\";\r\nimport externalLink from \"dso-toolkit/src/icons/external-link.svg\";\r\nimport eyeSlash from \"dso-toolkit/src/icons/eye-slash.svg\";\r\nimport eye from \"dso-toolkit/src/icons/eye.svg\";\r\nimport filter from \"dso-toolkit/src/icons/filter.svg\";\r\nimport forbidden from \"dso-toolkit/src/icons/forbidden.svg\";\r\nimport hammer from \"dso-toolkit/src/icons/hammer.svg\";\r\nimport health from \"dso-toolkit/src/icons/health.svg\";\r\nimport helpActive from \"dso-toolkit/src/icons/help-active.svg\";\r\nimport help from \"dso-toolkit/src/icons/help.svg\";\r\nimport house from \"dso-toolkit/src/icons/house.svg\";\r\nimport infoActive from \"dso-toolkit/src/icons/info-active.svg\";\r\nimport infoI from \"dso-toolkit/src/icons/info-i.svg\";\r\nimport info from \"dso-toolkit/src/icons/info.svg\";\r\nimport infrastructure from \"dso-toolkit/src/icons/infrastructure.svg\";\r\nimport label from \"dso-toolkit/src/icons/label.svg\";\r\nimport land from \"dso-toolkit/src/icons/land.svg\";\r\nimport landscape from \"dso-toolkit/src/icons/landscape.svg\";\r\nimport layers from \"dso-toolkit/src/icons/layers.svg\";\r\nimport lightBulb from \"dso-toolkit/src/icons/light-bulb.svg\";\r\nimport locationOutline from \"dso-toolkit/src/icons/location-outline.svg\";\r\nimport locationSearch from \"dso-toolkit/src/icons/location-search.svg\";\r\nimport location from \"dso-toolkit/src/icons/location.svg\";\r\nimport lock from \"dso-toolkit/src/icons/lock.svg\";\r\nimport magnet from \"dso-toolkit/src/icons/magnet.svg\";\r\nimport mail from \"dso-toolkit/src/icons/mail.svg\";\r\nimport mapLayers from \"dso-toolkit/src/icons/map-layers.svg\";\r\nimport mapLocation from \"dso-toolkit/src/icons/map-location.svg\";\r\nimport marker from \"dso-toolkit/src/icons/marker.svg\";\r\nimport measurement from \"dso-toolkit/src/icons/measurement.svg\";\r\nimport minusCircle from \"dso-toolkit/src/icons/minus-circle.svg\";\r\nimport minusSquare from \"dso-toolkit/src/icons/minus-square.svg\";\r\nimport minus from \"dso-toolkit/src/icons/minus.svg\";\r\nimport more from \"dso-toolkit/src/icons/more.svg\";\r\nimport municipality from \"dso-toolkit/src/icons/municipality.svg\";\r\nimport nature from \"dso-toolkit/src/icons/nature.svg\";\r\nimport newWindow from \"dso-toolkit/src/icons/new-window.svg\";\r\nimport paperclip from \"dso-toolkit/src/icons/paperclip.svg\";\r\nimport parking from \"dso-toolkit/src/icons/parking.svg\";\r\nimport pencil from \"dso-toolkit/src/icons/pencil.svg\";\r\nimport pinOutline from \"dso-toolkit/src/icons/pin-outline.svg\";\r\nimport pin from \"dso-toolkit/src/icons/pin.svg\";\r\nimport plusCircle from \"dso-toolkit/src/icons/plus-circle.svg\";\r\nimport plusSquare from \"dso-toolkit/src/icons/plus-square.svg\";\r\nimport plus from \"dso-toolkit/src/icons/plus.svg\";\r\nimport print from \"dso-toolkit/src/icons/print.svg\";\r\nimport procedures from \"dso-toolkit/src/icons/procedures.svg\";\r\nimport redo from \"dso-toolkit/src/icons/redo.svg\";\r\nimport safety from \"dso-toolkit/src/icons/safety.svg\";\r\nimport scale from \"dso-toolkit/src/icons/scale.svg\";\r\nimport search from \"dso-toolkit/src/icons/search.svg\";\r\nimport sitemap from \"dso-toolkit/src/icons/sitemap.svg\";\r\nimport soil from \"dso-toolkit/src/icons/soil.svg\";\r\nimport sortAscending from \"dso-toolkit/src/icons/sort-ascending.svg\";\r\nimport sortDescending from \"dso-toolkit/src/icons/sort-descending.svg\";\r\nimport sort from \"dso-toolkit/src/icons/sort.svg\";\r\nimport sound from \"dso-toolkit/src/icons/sound.svg\";\r\nimport spinner from \"dso-toolkit/src/icons/spinner.svg\";\r\nimport statusDanger from \"dso-toolkit/src/icons/status-danger.svg\";\r\nimport statusError from \"dso-toolkit/src/icons/status-error.svg\";\r\nimport statusInfo from \"dso-toolkit/src/icons/status-info.svg\";\r\nimport statusSuccess from \"dso-toolkit/src/icons/status-success.svg\";\r\nimport statusWarningInlineNegative from \"dso-toolkit/src/icons/status-warning-inline-negative.svg\";\r\nimport statusWarningInline from \"dso-toolkit/src/icons/status-warning-inline.svg\";\r\nimport statusWarning from \"dso-toolkit/src/icons/status-warning.svg\";\r\nimport table from \"dso-toolkit/src/icons/table.svg\";\r\nimport times from \"dso-toolkit/src/icons/times.svg\";\r\nimport toDoList from \"dso-toolkit/src/icons/to-do-list.svg\";\r\nimport trash from \"dso-toolkit/src/icons/trash.svg\";\r\nimport undo from \"dso-toolkit/src/icons/undo.svg\";\r\nimport userLine from \"dso-toolkit/src/icons/user-line.svg\";\r\nimport user from \"dso-toolkit/src/icons/user.svg\";\r\nimport users from \"dso-toolkit/src/icons/users.svg\";\r\nimport water from \"dso-toolkit/src/icons/water.svg\";\r\nimport wipWip from \"dso-toolkit/src/icons/wip-wip.svg\";\r\n\r\nconst icons = [\r\n  { alias: \"air\", svg: air },\r\n  { alias: \"angle-down\", svg: angleDown },\r\n  { alias: \"angle-left\", svg: angleLeft },\r\n  { alias: \"angle-right\", svg: angleRight },\r\n  { alias: \"angle-up\", svg: angleUp },\r\n  { alias: \"asterisk\", svg: asterisk },\r\n  { alias: \"balloon\", svg: balloon },\r\n  { alias: \"bars\", svg: bars },\r\n  { alias: \"bell\", svg: bell },\r\n  { alias: \"buildings\", svg: buildings },\r\n  { alias: \"calendar\", svg: calendar },\r\n  { alias: \"call\", svg: call },\r\n  { alias: \"caret-down\", svg: caretDown },\r\n  { alias: \"check\", svg: check },\r\n  { alias: \"check-circle\", svg: checkCircle },\r\n  { alias: \"chevron-down\", svg: chevronDown },\r\n  { alias: \"chevron-left\", svg: chevronLeft },\r\n  { alias: \"chevron-right\", svg: chevronRight },\r\n  { alias: \"chevron-up\", svg: chevronUp },\r\n  { alias: \"circle-notch\", svg: circleNotch },\r\n  { alias: \"clock\", svg: clock },\r\n  { alias: \"copy\", svg: copy },\r\n  { alias: \"crown\", svg: crown },\r\n  { alias: \"cultural\", svg: cultural },\r\n  { alias: \"document\", svg: document },\r\n  { alias: \"download\", svg: download },\r\n  { alias: \"email\", svg: email },\r\n  { alias: \"energy\", svg: energy },\r\n  { alias: \"environment\", svg: environment },\r\n  { alias: \"exclamation\", svg: exclamation },\r\n  { alias: \"external-link\", svg: externalLink },\r\n  { alias: \"eye-slash\", svg: eyeSlash },\r\n  { alias: \"eye\", svg: eye },\r\n  { alias: \"filter\", svg: filter },\r\n  { alias: \"forbidden\", svg: forbidden },\r\n  { alias: \"hammer\", svg: hammer },\r\n  { alias: \"health\", svg: health },\r\n  { alias: \"help-active\", svg: helpActive },\r\n  { alias: \"help\", svg: help },\r\n  { alias: \"house\", svg: house },\r\n  { alias: \"info-active\", svg: infoActive },\r\n  { alias: \"info-i\", svg: infoI },\r\n  { alias: \"info\", svg: info },\r\n  { alias: \"infrastructure\", svg: infrastructure },\r\n  { alias: \"label\", svg: label },\r\n  { alias: \"land\", svg: land },\r\n  { alias: \"landscape\", svg: landscape },\r\n  { alias: \"layers\", svg: layers },\r\n  { alias: \"light-bulb\", svg: lightBulb },\r\n  { alias: \"location\", svg: location },\r\n  { alias: \"location-outline\", svg: locationOutline },\r\n  { alias: \"location-search\", svg: locationSearch },\r\n  { alias: \"lock\", svg: lock },\r\n  { alias: \"magnet\", svg: magnet },\r\n  { alias: \"mail\", svg: mail },\r\n  { alias: \"map-layers\", svg: mapLayers },\r\n  { alias: \"map-location\", svg: mapLocation },\r\n  { alias: \"marker\", svg: marker },\r\n  { alias: \"measurement\", svg: measurement },\r\n  { alias: \"minus-circle\", svg: minusCircle },\r\n  { alias: \"minus-square\", svg: minusSquare },\r\n  { alias: \"minus\", svg: minus },\r\n  { alias: \"more\", svg: more },\r\n  { alias: \"municipality\", svg: municipality },\r\n  { alias: \"nature\", svg: nature },\r\n  { alias: \"new-window\", svg: newWindow },\r\n  { alias: \"paperclip\", svg: paperclip },\r\n  { alias: \"parking\", svg: parking },\r\n  { alias: \"pencil\", svg: pencil },\r\n  { alias: \"pin\", svg: pin },\r\n  { alias: \"pin-outline\", svg: pinOutline },\r\n  { alias: \"plus-circle\", svg: plusCircle },\r\n  { alias: \"plus-square\", svg: plusSquare },\r\n  { alias: \"plus\", svg: plus },\r\n  { alias: \"print\", svg: print },\r\n  { alias: \"procedures\", svg: procedures },\r\n  { alias: \"spinner\", svg: spinner },\r\n  { alias: \"redo\", svg: redo },\r\n  { alias: \"safety\", svg: safety },\r\n  { alias: \"scale\", svg: scale },\r\n  { alias: \"search\", svg: search },\r\n  { alias: \"sitemap\", svg: sitemap },\r\n  { alias: \"soil\", svg: soil },\r\n  { alias: \"sort-ascending\", svg: sortAscending },\r\n  { alias: \"sort-descending\", svg: sortDescending },\r\n  { alias: \"sort\", svg: sort },\r\n  { alias: \"sound\", svg: sound },\r\n  { alias: \"status-danger\", svg: statusDanger },\r\n  { alias: \"status-error\", svg: statusError },\r\n  { alias: \"status-info\", svg: statusInfo },\r\n  { alias: \"status-success\", svg: statusSuccess },\r\n  { alias: \"status-warning\", svg: statusWarning },\r\n  { alias: \"status-warning-inline\", svg: statusWarningInline },\r\n  { alias: \"status-warning-inline-negative\", svg: statusWarningInlineNegative },\r\n  { alias: \"table\", svg: table },\r\n  { alias: \"times\", svg: times },\r\n  { alias: \"to-do-list\", svg: toDoList },\r\n  { alias: \"trash\", svg: trash },\r\n  { alias: \"undo\", svg: undo },\r\n  { alias: \"user-line\", svg: userLine },\r\n  { alias: \"user\", svg: user },\r\n  { alias: \"users\", svg: users },\r\n  { alias: \"water\", svg: water },\r\n  { alias: \"wip-wip\", svg: wipWip },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-icon\",\r\n  styleUrl: \"./icon.scss\",\r\n  shadow: true,\r\n})\r\nexport class Icon {\r\n  /**\r\n   * The alias of the icon.\r\n   */\r\n  @Prop()\r\n  icon?: string;\r\n\r\n  render() {\r\n    if (this.icon) {\r\n      const icon = icons.find((i) => i.alias === this.icon);\r\n      if (!icon) {\r\n        throw new TypeError(`Unknown svg: ${this.icon}`);\r\n      }\r\n\r\n      return <span class=\"icon-container\" innerHTML={icon.svg} />;\r\n    }\r\n  }\r\n}\r\n"],"version":3}

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

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

package/dist/bundle/p-CkFupSQb.js

@@ -1,70 +0,0 @@
-import { p as proxyCustomElement, H, e as createEvent, h } from './p-Dm38fPV4.js';
-import { c as clsx } from './p-ChV9xqsO.js';
-import { i as i18n } from './p-C0ZvZbHD.js';
-import { d as defineCustomElement$2 } from './p-CXctuPtC.js';
-import { d as defineCustomElement$1 } from './p-CWK4j8Tr.js';
-
-const translations = {
-    en: {
-        "dso-panel": {
-            close: "Close",
-        },
-    },
-    nl: {
-        "dso-panel": {
-            close: "Sluiten",
-        },
-    },
-};
-
-const panelCss = ":host{display:block;border:1px solid #b2b2b2;border-radius:4px;overflow:hidden}*,*::after,*::before{box-sizing:border-box}.panel-heading{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;padding-block:8px;padding-inline-start:var(--panel-heading-padding-inline-start, 16px);padding-inline-end:8px;border-block-end:1px solid #b2b2b2;border-start-start-radius:4px;border-start-end-radius:4px;border-color:#b2b2b2}.panel-heading{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}.panel-heading a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}.panel-heading a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}.panel-heading a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}.panel-heading a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}.panel-heading{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e5e5e5;color:#191919}.panel-heading .sr-only{position:absolute;inline-size:1px;block-size:1px;padding:0;margin:-1px;border:0;overflow:hidden;clip-path:inset(0)}.emphasized .panel-heading{background-color:#dcd400}::slotted([slot=heading]){margin:0 !important;font-size:1rem !important;font-weight:600 !important;line-height:1.5 !important;color:#000 !important}.panel-body{padding-block:16px;padding-inline:var(--panel-body-padding-inline, 16px);background-color:var(--_dso-panel-body-background-color, transparent)}";
-
-const Panel = /*@__PURE__*/ proxyCustomElement(class Panel extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.dsoCloseClick = createEvent(this, "dsoCloseClick", 7);
-        /**
-         * To display the panel as an emphasized panel.
-         */
-        this.emphasized = false;
-        this.text = i18n(() => this.host, translations);
-    }
-    render() {
-        return (h("div", { key: '1c896d21bf884e7d580be80d577f4273745dee39', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '6b16de300d0da5b257112cf7071bad9a7dd30e89', class: "panel-heading" }, h("slot", { key: '1386b2b78eac05573fc91d0608225db0cd15c8b0', name: "heading" }), h("dso-icon-button", { key: '0cdce357bed4e243526c7203fe1c11433f5095cb', icon: "times", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '757b039207ee5716e5df32dc03c05b21c497767b', class: "panel-body" }, h("slot", { key: 'ba8371640e60c311bc590096aa3ce470791423f5' }))));
-    }
-    get host() { return this; }
-    static get style() { return panelCss; }
-}, [257, "dso-panel", {
-        "closeButtonLabel": [1, "close-button-label"],
-        "emphasized": [4]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-panel", "dso-icon", "dso-icon-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-panel":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, Panel);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { Panel as P, defineCustomElement as d };
-//# sourceMappingURL=p-CkFupSQb.js.map
-
-//# sourceMappingURL=p-CkFupSQb.js.map

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

@@ -1 +0,0 @@
-{"file":"p-CkFupSQb.js","mappings":";;;;;;AAEO,MAAM,YAAY,GAAa;AACpC,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,OAAO;AACf,SAAA;AACF,KAAA;AACD,IAAA,EAAE,EAAE;AACF,QAAA,WAAW,EAAE;AACX,YAAA,KAAK,EAAE,SAAS;AACjB,SAAA;AACF,KAAA;CACF;;ACbD,MAAM,QAAQ,GAAG,kvEAAkvE;;MCoBtvE,KAAK,iBAAAA,kBAAA,CAAA,MAAA,KAAA,SAAAC,CAAA,CAAA;AALlB,IAAA,WAAA,GAAA;;;;;AAeE;;AAEG;AAEH,QAAA,IAAU,CAAA,UAAA,GAAG,KAAK;AAQV,QAAA,IAAA,CAAA,IAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC;AAoBnD;IAlBC,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC,EAAA,EAC9D,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAG,CAAA,EACvB,CACE,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,EACrF,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,EAAA,CAClD,CACE,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,YAAY,EAAA,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACT,CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/panel/panel.i18n.ts","src/components/panel/panel.scss?tag=dso-panel&encapsulation=shadow","src/components/panel/panel.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n  en: {\r\n    \"dso-panel\": {\r\n      close: \"Close\",\r\n    },\r\n  },\r\n  nl: {\r\n    \"dso-panel\": {\r\n      close: \"Sluiten\",\r\n    },\r\n  },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/global/mixins/set-colors.mixin\" as set-colors;\r\n@use \"~dso-toolkit/src/di\";\r\n\r\n@use \"panel.variables\" as panel-variables;\r\n\r\n:host {\r\n  display: block;\r\n\r\n  border: 1px solid colors.$grijs-30;\r\n  border-radius: units.$u1 * 0.5;\r\n\r\n  overflow: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.panel-heading {\r\n  display: flex;\r\n  gap: units.$u2;\r\n  justify-content: space-between;\r\n  align-items: flex-start;\r\n\r\n  padding-block: units.$u1;\r\n  padding-inline-start: var(--panel-heading-padding-inline-start, panel-variables.$panel-heading-padding-inline-start);\r\n  padding-inline-end: units.$u1;\r\n\r\n  border-block-end: 1px solid colors.$grijs-30;\r\n\r\n  border-start-start-radius: units.$u1 * 0.5;\r\n  border-start-end-radius: units.$u1 * 0.5;\r\n  border-color: colors.$grijs-30;\r\n\r\n  @include set-colors.apply(colors.$grijs-10, \"panel\");\r\n\r\n  .sr-only {\r\n    @include utilities.sr-only();\r\n  }\r\n}\r\n\r\n.emphasized .panel-heading {\r\n  background-color: panel-variables.$background-color-emphasized;\r\n}\r\n\r\n::slotted([slot=\"heading\"]) {\r\n  margin: 0 !important;\r\n  font-size: 1rem !important;\r\n  font-weight: 600 !important;\r\n  line-height: 1.5 !important;\r\n  color: colors.$zwart !important;\r\n}\r\n\r\n.panel-body {\r\n  padding-block: units.$u2;\r\n  padding-inline: var(--panel-body-padding-inline, panel-variables.$panel-body-padding-inline);\r\n\r\n  background-color: var(--_dso-panel-body-background-color, transparent);\r\n}\r\n","import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./panel.i18n\";\r\n\r\nexport interface PanelCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n/**\r\n * @slot - The contents to be highlighted within the panel\r\n * @slot heading - The heading (h2 - h6) with the title of the panel\r\n */\r\n@Component({\r\n  tag: \"dso-panel\",\r\n  styleUrl: \"panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class Panel implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPanelElement;\r\n\r\n  /**\r\n   * The accessible name for the close button.\r\n   */\r\n  @Prop()\r\n  closeButtonLabel?: string;\r\n\r\n  /**\r\n   * To display the panel as an emphasized panel.\r\n   */\r\n  @Prop()\r\n  emphasized = false;\r\n\r\n  /**\r\n   * Emitted when the user click the close button.\r\n   */\r\n  @Event()\r\n  dsoCloseClick!: EventEmitter<PanelCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    return (\r\n      <div class={clsx([\"dso-panel\", { emphasized: this.emphasized }])}>\r\n        <div class=\"panel-heading\">\r\n          <slot name=\"heading\" />\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            onDsoClick={(e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent })}\r\n            label={this.closeButtonLabel || this.text(\"close\")}\r\n          />\r\n        </div>\r\n        <div class=\"panel-body\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/p-CmVgHB0k.js

@@ -1,58 +0,0 @@
-import { p as proxyCustomElement, H, f as forceUpdate, h } from './p-Dm38fPV4.js';
-import { c as clsx } from './p-ChV9xqsO.js';
-
-const buttonGroupCss = "*,*::after,*::before{box-sizing:border-box}:host{display:inline-block}.container{display:inline-flex;border-radius:4px}.container.has-map-buttons{box-shadow:0 1px 4px 0 rgba(0, 0, 0, 0.5);background-color:#ccc;gap:1px}::slotted(*){margin:0 !important}:host([direction=row]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-end-start-radius:0 !important}:host([direction=row]) ::slotted(:not(:last-child)){border-start-end-radius:0 !important;border-end-end-radius:0 !important}:host([direction=row]) ::slotted(.dso-secondary){margin-inline-start:-1px !important}:host([direction=column]) .container{flex-direction:column}:host([direction=column]) ::slotted(*){text-align:center !important}:host([direction=column]) ::slotted(:not(:first-child)){border-start-start-radius:0 !important;border-start-end-radius:0 !important}:host([direction=column]) ::slotted(:not(:last-child)){border-end-start-radius:0 !important;border-end-end-radius:0 !important}:host([direction=column]) ::slotted(.dso-secondary){margin-block-start:-1px !important}::slotted(:focus-visible){z-index:1 !important}::slotted(.dso-map){box-shadow:none !important}";
-
-const ButtonGroup = /*@__PURE__*/ proxyCustomElement(class ButtonGroup extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        /**
-         * The direction in which the buttons are displayed.
-         *
-         * Defaults to `row`.
-         */
-        this.direction = "row";
-    }
-    connectedCallback() {
-        this.mutationObserver = new MutationObserver(() => {
-            forceUpdate(this);
-        });
-        this.mutationObserver.observe(this.host, {
-            childList: true,
-        });
-    }
-    disconnectedCallback() {
-        var _a;
-        (_a = this.mutationObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-    }
-    get hasMapButtons() {
-        return !!this.host.querySelector(":scope > .dso-map");
-    }
-    render() {
-        return (h("div", { key: '19bca6e1fa5b009b83c5ba09d190393b73408438', class: clsx("container", { "has-map-buttons": this.hasMapButtons }), role: "group" }, h("slot", { key: '3aa3142304986e0b3fcf2c204ea7e51ac963926b' })));
-    }
-    get host() { return this; }
-    static get style() { return buttonGroupCss; }
-}, [257, "dso-button-group", {
-        "direction": [513]
-    }]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-button-group"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-button-group":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ButtonGroup);
-            }
-            break;
-    } });
-}
-
-export { ButtonGroup as B, defineCustomElement as d };
-//# sourceMappingURL=p-CmVgHB0k.js.map
-
-//# sourceMappingURL=p-CmVgHB0k.js.map

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

@@ -1 +0,0 @@
-{"file":"p-CmVgHB0k.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,soCAAsoC;;MCUhpC,WAAW,iBAAAA,kBAAA,CAAA,MAAA,WAAA,SAAAC,CAAA,CAAA;AALxB,IAAA,WAAA,GAAA;;;;AAME;;;;AAIG;AAEH,QAAA,IAAS,CAAA,SAAA,GAAyB,KAAK;AAgCxC;IAzBC,iBAAiB,GAAA;AACf,QAAA,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAK;YAChD,WAAW,CAAC,IAAI,CAAC;AACnB,SAAC,CAAC;QAEF,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;AACvC,YAAA,SAAS,EAAE,IAAI;AAChB,SAAA,CAAC;;IAGJ,oBAAoB,GAAA;;QAClB,CAAA,EAAA,GAAA,IAAI,CAAC,gBAAgB,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,UAAU,EAAE;;AAGrC,IAAA,IAAI,aAAa,GAAA;QACf,OAAO,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,mBAAmB,CAAC;;IAGvD,MAAM,GAAA;AACJ,QAAA,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,IAAI,CAAC,WAAW,EAAE,EAAE,iBAAiB,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,EAAE,IAAI,EAAC,OAAO,EAAA,EACpF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/button-group/button-group.scss?tag=dso-button-group&encapsulation=shadow","src/components/button-group/button-group.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n}\r\n\r\n.container {\r\n  display: inline-flex;\r\n  border-radius: button.$border-radius;\r\n\r\n  &.has-map-buttons {\r\n    @include button.map-box-shadow();\r\n\r\n    background-color: colors.$grijs-20;\r\n    gap: 1px;\r\n  }\r\n}\r\n\r\n::slotted(*) {\r\n  margin: 0 !important;\r\n}\r\n\r\n:host([direction=\"row\"]) {\r\n  ::slotted(:not(:first-child)) {\r\n    border-start-start-radius: 0 !important;\r\n    border-end-start-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(:not(:last-child)) {\r\n    border-start-end-radius: 0 !important;\r\n    border-end-end-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(.dso-secondary) {\r\n    margin-inline-start: -1px !important;\r\n  }\r\n}\r\n\r\n:host([direction=\"column\"]) {\r\n  .container {\r\n    flex-direction: column;\r\n  }\r\n\r\n  ::slotted(*) {\r\n    text-align: center !important;\r\n  }\r\n\r\n  ::slotted(:not(:first-child)) {\r\n    border-start-start-radius: 0 !important;\r\n    border-start-end-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(:not(:last-child)) {\r\n    border-end-start-radius: 0 !important;\r\n    border-end-end-radius: 0 !important;\r\n  }\r\n\r\n  ::slotted(.dso-secondary) {\r\n    margin-block-start: -1px !important;\r\n  }\r\n}\r\n\r\n::slotted(:focus-visible) {\r\n  z-index: 1 !important;\r\n}\r\n\r\n::slotted(.dso-map) {\r\n  box-shadow: none !important;\r\n}\r\n","import { Component, ComponentInterface, Element, Prop, forceUpdate, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { ButtonGroupDirection } from \"./button-group.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-button-group\",\r\n  styleUrl: \"button-group.scss\",\r\n  shadow: true,\r\n})\r\nexport class ButtonGroup implements ComponentInterface {\r\n  /**\r\n   * The direction in which the buttons are displayed.\r\n   *\r\n   * Defaults to `row`.\r\n   */\r\n  @Prop({ reflect: true })\r\n  direction: ButtonGroupDirection = \"row\";\r\n\r\n  @Element()\r\n  private host!: HTMLDsoButtonGroupElement;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  connectedCallback(): void {\r\n    this.mutationObserver = new MutationObserver(() => {\r\n      forceUpdate(this);\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  get hasMapButtons(): boolean {\r\n    return !!this.host.querySelector(\":scope > .dso-map\");\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div class={clsx(\"container\", { \"has-map-buttons\": this.hasMapButtons })} role=\"group\">\r\n        <slot />\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/bundle/p-CoDNmQUl.js

@@ -1,154 +0,0 @@
-import { p as proxyCustomElement, H, f as forceUpdate, h, d as Host } from './p-Dm38fPV4.js';
-import { d as debounce } from './p-baWVwd8J.js';
-import { c as createFocusTrap } from './p-pf-8Sy0Y.js';
-import { d as defineCustomElement$2 } from './p-CXctuPtC.js';
-import { d as defineCustomElement$1 } from './p-CWK4j8Tr.js';
-
-const imageOverlayCss = ":host{display:inline-block;position:relative}:host(:hover) .open,.open:focus{opacity:1}.open{opacity:0;position:absolute;inset-inline-end:16px;inset-block-start:16px}.dimmer{position:fixed;inset:0;z-index:19;display:flex;padding:32px;background-color:rgba(255, 255, 255, 0.8);justify-content:center}.wrapper{align-self:center;box-shadow:0 8px 24px 0 rgba(25, 25, 25, 0.4);line-height:0;outline:4px solid #fff;position:relative;z-index:20}.wrapper .title{background-color:#fff;font-weight:700;line-height:initial;padding:8px;position:absolute}.wrapper img{inline-size:auto;block-size:auto;max-inline-size:100%;max-block-size:calc(100vh - 64px)}.wrapper .figuur-bijschrift:not([hidden]){display:block;font-size:0.75rem;font-style:italic;padding-block-end:12px;padding-block-start:16px}.close{position:absolute;inset-block-start:16px;inset-inline-end:16px}ins.editaction-add{display:inline-block;margin-block-end:8px;padding:8px;text-decoration:none}ins.editaction-add{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins.editaction-add a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins.editaction-add{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}ins.editaction-add{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}ins.editaction-add .wrapper{outline:none;padding:8px}ins.editaction-add .wrapper{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}ins.editaction-add .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}ins.editaction-add .wrapper{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#e4f1d4;color:#191919}ins.editaction-add .wrapper{box-shadow:0 1px 3px 1px rgba(0, 0, 0, 0.5);--_dso-ozon-content-toggletip-color:colors.$zwart}ins.editaction-add .wrapper .editaction-label{line-height:1.5}ins.editaction-add .wrapper .close{inset-block-start:48px}ins.editaction-add .open{inset-block-start:48px}del.editaction-remove{display:inline-block;margin-block-end:8px;padding:8px}del.editaction-remove{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del.editaction-remove a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del.editaction-remove{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}del.editaction-remove{--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove{font-family:sans-serif}}del.editaction-remove .wrapper{outline:none;padding:8px}del.editaction-remove .wrapper{--_dso-alert-success-border-color:#39870c;--_dso-alert-error-border-color:#ce3f51;--_dso-alert-info-border-color:#6ca4d9;--_dso-alert-warning-border-color:#dcd400;--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.download,.download:hover,.download:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#download-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is(.extern,.extern:hover,.extern:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#external-link-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#call-zwart\"))}del.editaction-remove .wrapper a:not(.dso-primary,.dso-secondary,.dso-tertiary):is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:var(--_dso-di-background-image, url(\"./di.svg#email-zwart\"))}del.editaction-remove .wrapper{--_dso-icon-button-tertiary-color:#191919;--_dso-icon-button-tertiary-hover-color:#4c4c4c;--_dso-icon-button-tertiary-active-color:#173521;--_dso-icon-button-tertiary-disabled-color:#999;background-color:#f5d8dc;color:#191919}del.editaction-remove .wrapper{--_dso-ozon-content-toggletip-color:colors.$zwart;text-decoration:line-through;--_dso-ozon-content-toggletip-text-decoration:underline line-through}@media screen and (min--moz-device-pixel-ratio: 0){del.editaction-remove .wrapper{font-family:sans-serif}}del.editaction-remove .wrapper .title{text-decoration:line-through}del.editaction-remove .wrapper .editaction-label{line-height:1.5}del.editaction-remove .wrapper .close{inset-block-start:48px}del.editaction-remove .open{inset-block-start:48px}.editaction-label{font-style:italic;margin-block-end:8px}";
-
-const wijzigactieLabels = {
-    verwijder: "Verwijderd",
-    voegtoe: "Toegevoegd",
-};
-const Dimmer = ({ active, src, alt, ref, click }, children) => active &&
-    src && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: ref }, children[2], children[0], h("img", { src: src, alt: alt }), h("dso-icon-button", { icon: "times", variant: "map", class: "close", label: "Sluiten", onDsoClick: click }), children[1])));
-const ImageOverlay = /*@__PURE__*/ proxyCustomElement(class ImageOverlay extends H {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.active = false;
-        this.zoomable = false;
-        this.titelSlot = null;
-        this.bijschriftSlot = null;
-    }
-    loadListener(event) {
-        if (event.target instanceof HTMLImageElement) {
-            this.setZoomable(event.target);
-        }
-    }
-    connectedCallback() {
-        this.titelSlot = this.host.querySelector("div[slot='titel']");
-        this.bijschriftSlot = this.host.querySelector("div[slot='bijschrift']");
-    }
-    componentDidLoad() {
-        this.resizeObserver = new ResizeObserver(debounce(() => {
-            const imgElement = this.host.querySelector("img");
-            if (imgElement instanceof HTMLImageElement) {
-                this.setZoomable(imgElement);
-            }
-        }, 200));
-        this.mutationObserver = new MutationObserver((e) => {
-            var _a, _b;
-            forceUpdate(this.host);
-            if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === "childList") {
-                (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-                // <img> is gone or a new element.
-                this.initZoomableImage();
-            }
-        });
-        this.mutationObserver.observe(this.host, {
-            attributes: true,
-            subtree: true,
-            attributeFilter: ["src", "alt"],
-            childList: true,
-        });
-        this.initZoomableImage();
-    }
-    disconnectedCallback() {
-        var _a, _b, _c;
-        (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
-        (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
-        (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
-    }
-    initZoomableImage() {
-        var _a;
-        const imgElement = this.host.querySelector("img");
-        if (!(imgElement instanceof HTMLImageElement)) {
-            return;
-        }
-        // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
-        if (imgElement.complete) {
-            this.setZoomable(imgElement);
-        }
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
-    }
-    setZoomable(imageElement) {
-        const { width, naturalWidth, height, naturalHeight } = imageElement;
-        this.zoomable = width < naturalWidth || height < naturalHeight;
-    }
-    isWijzigactie(wijzigactie) {
-        return wijzigactie === "voegtoe" || wijzigactie === "verwijder";
-    }
-    render() {
-        var _a;
-        const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
-        const editActionLabel = (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;
-        const button = this.zoomable && (h("dso-icon-button", { icon: "external-link", class: "open", variant: "map", label: "Afbeelding vergroot weergeven", ref: (element) => (this.iconButtonElement = element), onDsoClick: () => (this.active = true) }));
-        if (this.wijzigactie === "verwijder") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("del", { class: "editaction-remove" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
-        }
-        if (this.wijzigactie === "voegtoe") {
-            return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h("ins", { class: "editaction-add" }, h("div", { class: "editaction-label" }, editActionLabel, ":"), h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" })), h("div", { class: "editaction-label" }, editActionLabel, ":")), h("slot", null), button)));
-        }
-        return (h(Host, { onClick: () => { var _a; return (_a = this.iconButtonElement) === null || _a === void 0 ? void 0 : _a.setFocus(); } }, h(Dimmer, { active: this.active, src: src, alt: alt, ref: (element) => (this.wrapperElement = element), click: () => (this.active = false) }, this.titelSlot && (h("div", { class: "title" }, h("slot", { name: "titel" }))), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))), h("slot", null), button));
-    }
-    componentDidRender() {
-        var _a, _b;
-        if (this.active && this.wrapperElement && !this.trap) {
-            this.trap = createFocusTrap(this.wrapperElement, {
-                escapeDeactivates: true,
-                clickOutsideDeactivates: (e) => {
-                    if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {
-                        this.active = false;
-                        return false;
-                    }
-                    return true;
-                },
-                setReturnFocus: (_a = this.iconButtonElement) !== null && _a !== void 0 ? _a : false,
-                onDeactivate: () => (this.active = false),
-                tabbableOptions: {
-                    getShadowRoot: (node) => { var _a; return (_a = node.shadowRoot) !== null && _a !== void 0 ? _a : undefined; },
-                },
-            }).activate();
-        }
-        else if (!this.active && this.trap) {
-            (_b = this.trap) === null || _b === void 0 ? void 0 : _b.deactivate();
-            delete this.trap;
-        }
-    }
-    get host() { return this; }
-    static get style() { return imageOverlayCss; }
-}, [257, "dso-image-overlay", {
-        "wijzigactie": [1],
-        "active": [32],
-        "zoomable": [32]
-    }, [[2, "load", "loadListener"]]]);
-function defineCustomElement() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["dso-image-overlay", "dso-icon", "dso-icon-button"];
-    components.forEach(tagName => { switch (tagName) {
-        case "dso-image-overlay":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, ImageOverlay);
-            }
-            break;
-        case "dso-icon":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$2();
-            }
-            break;
-        case "dso-icon-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$1();
-            }
-            break;
-    } });
-}
-
-export { ImageOverlay as I, defineCustomElement as d };
-//# sourceMappingURL=p-CoDNmQUl.js.map
-
-//# sourceMappingURL=p-CoDNmQUl.js.map

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

@@ -1 +0,0 @@
-{"file":"p-CoDNmQUl.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/image-overlay/image-overlay.scss?tag=dso-image-overlay&encapsulation=shadow","src/components/image-overlay/image-overlay.tsx"],"sourcesContent":["@use \"sass:color\";\r\n\r\n@use \"~dso-toolkit/src/utilities\";\r\n\r\n@use \"~dso-toolkit/src/variables/colors\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/insert\";\r\n@use \"~dso-toolkit/src/components/delete\";\r\n\r\n:host {\r\n  display: inline-block;\r\n  position: relative;\r\n}\r\n\r\n:host(:hover) .open,\r\n.open:focus {\r\n  opacity: 1;\r\n}\r\n\r\n.open {\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    opacity: 0;\r\n    position: absolute;\r\n    inset-inline-end: units.$u2;\r\n    inset-block-start: units.$u2;\r\n  }\r\n}\r\n\r\n.dimmer {\r\n  position: fixed;\r\n  inset: 0;\r\n  z-index: zindex.$image-overlay - 1;\r\n  display: flex;\r\n  padding: units.$u4;\r\n  background-color: color.scale(colors.$wit, $alpha: -20%);\r\n  justify-content: center;\r\n}\r\n\r\n.wrapper {\r\n  align-self: center;\r\n  box-shadow: 0 units.$u1 units.$u3 0 rgba(25, 25, 25, 0.4);\r\n  line-height: 0;\r\n  outline: 4px solid colors.$wit;\r\n  position: relative;\r\n  z-index: zindex.$image-overlay;\r\n\r\n  .title {\r\n    background-color: colors.$wit;\r\n    font-weight: 700;\r\n    line-height: initial;\r\n    padding: units.$u1;\r\n    position: absolute;\r\n  }\r\n\r\n  img {\r\n    inline-size: auto;\r\n    block-size: auto;\r\n    max-inline-size: 100%;\r\n    max-block-size: calc(100vh - #{units.$u8});\r\n  }\r\n\r\n  .figuur-bijschrift:not([hidden]) {\r\n    display: block;\r\n    font-size: 0.75rem;\r\n    font-style: italic;\r\n    padding-block-end: units.$u1 * 1.5;\r\n    padding-block-start: units.$u2;\r\n  }\r\n}\r\n\r\n.close {\r\n  // stylelint-disable-next-line no-duplicate-selectors -- needed to fix sass deprecation warnings: #2724\r\n  & {\r\n    position: absolute;\r\n    inset-block-start: units.$u2;\r\n    inset-inline-end: units.$u2;\r\n  }\r\n}\r\n\r\nins.editaction-add {\r\n  display: inline-block;\r\n  margin-block-end: units.$u1;\r\n  padding: units.$u1;\r\n  @include insert.element();\r\n  @include insert.root();\r\n\r\n  .wrapper {\r\n    outline: none;\r\n    padding: units.$u1;\r\n    @include insert.root();\r\n\r\n    .editaction-label {\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .close {\r\n      inset-block-start: units.$u6;\r\n    }\r\n  }\r\n\r\n  .open {\r\n    inset-block-start: units.$u6;\r\n  }\r\n}\r\n\r\ndel.editaction-remove {\r\n  display: inline-block;\r\n  margin-block-end: units.$u1;\r\n  padding: units.$u1;\r\n  @include delete.root();\r\n\r\n  .wrapper {\r\n    outline: none;\r\n    padding: units.$u1;\r\n    @include delete.root();\r\n\r\n    .title {\r\n      text-decoration: line-through;\r\n    }\r\n\r\n    .editaction-label {\r\n      line-height: 1.5;\r\n    }\r\n\r\n    .close {\r\n      inset-block-start: units.$u6;\r\n    }\r\n  }\r\n\r\n  .open {\r\n    inset-block-start: units.$u6;\r\n  }\r\n}\r\n\r\n.editaction-label {\r\n  font-style: italic;\r\n  margin-block-end: units.$u1;\r\n}\r\n","import {\r\n  Component,\r\n  ComponentInterface,\r\n  Element,\r\n  FunctionalComponent,\r\n  Host,\r\n  Listen,\r\n  Prop,\r\n  State,\r\n  forceUpdate,\r\n  h,\r\n} from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\n\r\ntype ImageOverlayWijzigactie = \"voegtoe\" | \"verwijder\";\r\n\r\nconst wijzigactieLabels: { [wijzigactie in ImageOverlayWijzigactie]: string } = {\r\n  verwijder: \"Verwijderd\",\r\n  voegtoe: \"Toegevoegd\",\r\n};\r\n\r\nconst Dimmer: FunctionalComponent<{\r\n  active: boolean;\r\n  src: string | undefined;\r\n  alt: string | undefined;\r\n  ref: (element: HTMLHeadingElement | undefined) => void;\r\n  click: () => void;\r\n}> = ({ active, src, alt, ref, click }, children) =>\r\n  active &&\r\n  src && (\r\n    <div class=\"dimmer\">\r\n      <div class=\"wrapper\" ref={ref}>\r\n        {children[2]}\r\n        {children[0]}\r\n        <img src={src} alt={alt} />\r\n        <dso-icon-button icon=\"times\" variant=\"map\" class=\"close\" label=\"Sluiten\" onDsoClick={click} />\r\n        {children[1]}\r\n      </div>\r\n    </div>\r\n  );\r\n\r\n@Component({\r\n  tag: \"dso-image-overlay\",\r\n  styleUrl: \"./image-overlay.scss\",\r\n  shadow: true,\r\n})\r\nexport class ImageOverlay implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoImageOverlayElement;\r\n\r\n  /**\r\n   * The wijzigactie.\r\n   */\r\n  @Prop()\r\n  wijzigactie?: string;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  @State()\r\n  zoomable = false;\r\n\r\n  private iconButtonElement: HTMLDsoIconButtonElement | undefined;\r\n\r\n  private wrapperElement: HTMLDivElement | undefined;\r\n\r\n  private trap: FocusTrap | undefined;\r\n\r\n  private titelSlot: HTMLElement | null = null;\r\n\r\n  private bijschriftSlot: HTMLElement | null = null;\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  @Listen(\"load\", { capture: true })\r\n  loadListener(event: Event) {\r\n    if (event.target instanceof HTMLImageElement) {\r\n      this.setZoomable(event.target);\r\n    }\r\n  }\r\n\r\n  connectedCallback() {\r\n    this.titelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='titel']\");\r\n\r\n    this.bijschriftSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='bijschrift']\");\r\n  }\r\n\r\n  componentDidLoad() {\r\n    this.resizeObserver = new ResizeObserver(\r\n      debounce(() => {\r\n        const imgElement = this.host.querySelector(\"img\");\r\n\r\n        if (imgElement instanceof HTMLImageElement) {\r\n          this.setZoomable(imgElement);\r\n        }\r\n      }, 200),\r\n    );\r\n\r\n    this.mutationObserver = new MutationObserver((e) => {\r\n      forceUpdate(this.host);\r\n\r\n      if (e[0]?.type === \"childList\") {\r\n        this.resizeObserver?.disconnect();\r\n        // <img> is gone or a new element.\r\n        this.initZoomableImage();\r\n      }\r\n    });\r\n\r\n    this.mutationObserver.observe(this.host, {\r\n      attributes: true,\r\n      subtree: true,\r\n      attributeFilter: [\"src\", \"alt\"],\r\n      childList: true,\r\n    });\r\n\r\n    this.initZoomableImage();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.trap?.deactivate();\r\n    this.mutationObserver?.disconnect();\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  private initZoomableImage(): void {\r\n    const imgElement = this.host.querySelector(\"img\");\r\n\r\n    if (!(imgElement instanceof HTMLImageElement)) {\r\n      return;\r\n    }\r\n\r\n    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.\r\n    if (imgElement.complete) {\r\n      this.setZoomable(imgElement);\r\n    }\r\n\r\n    this.resizeObserver?.observe(imgElement);\r\n  }\r\n\r\n  private setZoomable(imageElement: HTMLImageElement): void {\r\n    const { width, naturalWidth, height, naturalHeight } = imageElement;\r\n\r\n    this.zoomable = width < naturalWidth || height < naturalHeight;\r\n  }\r\n\r\n  private isWijzigactie(wijzigactie: string): wijzigactie is ImageOverlayWijzigactie {\r\n    return wijzigactie === \"voegtoe\" || wijzigactie === \"verwijder\";\r\n  }\r\n\r\n  render() {\r\n    const { src, alt } = this.host.querySelector(\"img\") ?? {};\r\n\r\n    const editActionLabel: string | undefined =\r\n      (this.wijzigactie && this.isWijzigactie(this.wijzigactie) && wijzigactieLabels[this.wijzigactie]) || undefined;\r\n\r\n    const button = this.zoomable && (\r\n      <dso-icon-button\r\n        icon=\"external-link\"\r\n        class=\"open\"\r\n        variant=\"map\"\r\n        label=\"Afbeelding vergroot weergeven\"\r\n        ref={(element) => (this.iconButtonElement = element)}\r\n        onDsoClick={() => (this.active = true)}\r\n      />\r\n    );\r\n\r\n    if (this.wijzigactie === \"verwijder\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <del class=\"editaction-remove\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              click={() => (this.active = false)}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </del>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    if (this.wijzigactie === \"voegtoe\") {\r\n      return (\r\n        <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n          <ins class=\"editaction-add\">\r\n            <div class=\"editaction-label\">{editActionLabel}:</div>\r\n            <Dimmer\r\n              active={this.active}\r\n              src={src}\r\n              alt={alt}\r\n              ref={(element) => (this.wrapperElement = element)}\r\n              click={() => (this.active = false)}\r\n            >\r\n              {this.titelSlot && (\r\n                <div class=\"title\">\r\n                  <slot name=\"titel\" />\r\n                </div>\r\n              )}\r\n              <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n                <slot name=\"bijschrift\" />\r\n              </div>\r\n              {<div class=\"editaction-label\">{editActionLabel}:</div>}\r\n            </Dimmer>\r\n            <slot />\r\n            {button}\r\n          </ins>\r\n        </Host>\r\n      );\r\n    }\r\n\r\n    return (\r\n      <Host onClick={() => this.iconButtonElement?.setFocus()}>\r\n        <Dimmer\r\n          active={this.active}\r\n          src={src}\r\n          alt={alt}\r\n          ref={(element) => (this.wrapperElement = element)}\r\n          click={() => (this.active = false)}\r\n        >\r\n          {this.titelSlot && (\r\n            <div class=\"title\">\r\n              <slot name=\"titel\" />\r\n            </div>\r\n          )}\r\n          <div class=\"figuur-bijschrift\" hidden={!this.bijschriftSlot}>\r\n            <slot name=\"bijschrift\" />\r\n          </div>\r\n        </Dimmer>\r\n        <slot />\r\n        {button}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidRender() {\r\n    if (this.active && this.wrapperElement && !this.trap) {\r\n      this.trap = createFocusTrap(this.wrapperElement, {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.wrapperElement) {\r\n            this.active = false;\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.iconButtonElement ?? false,\r\n        onDeactivate: () => (this.active = false),\r\n        tabbableOptions: {\r\n          getShadowRoot: (node) => node.shadowRoot ?? undefined,\r\n        },\r\n      }).activate();\r\n    } else if (!this.active && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CqQwHORn.js","mappings":"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","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  block-size: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  block-size: 100%;\r\n  max-block-size: inherit;\r\n  min-block-size: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    block-size: 100%;\r\n    max-block-size: inherit;\r\n    min-block-size: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      block-size: units.$u3;\r\n      inset-inline-start: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      inline-size: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-start: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      inset-block-end: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, Method, State, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    if (!this.host.isConnected) {\r\n      return;\r\n    }\r\n\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}

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

@@ -1 +0,0 @@
-{"file":"p-CsqbRus4.js","mappings":";;;;;;AAAA,MAAM,YAAY,GAAG,sOAAsO;;MCQ9O,SAAS,iBAAAA,kBAAA,CAAA,MAAA,SAAA,SAAAC,CAAA,CAAA;AALtB,IAAA,WAAA,GAAA;;;;AAUE,QAAA,IAAM,CAAA,MAAA,GAAG,KAAK;AAEd;;AAEG;AAEH,QAAA,IAAK,CAAA,KAAA,GAAG,aAAa;AAErB;;AAEG;AAEH,QAAA,IAAQ,CAAA,QAAA,GAAc,OAAO;AAgBrB,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;AACnB,YAAA,IAAI,IAAI,CAAC,MAAM,EAAE;gBACf,IAAI,CAAC,KAAK,EAAE;;iBACP;gBACL,IAAI,CAAC,IAAI,EAAE;;AAEf,SAAC;AAEO,QAAA,IAAI,CAAA,IAAA,GAAG,MAAK;AAClB,YAAA,IAAI,CAAC,MAAM,GAAG,IAAI;YAClB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;YAC3D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;AAC/D,SAAC;AAEO,QAAA,IAAK,CAAA,KAAA,GAAG,MAAK;YACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC;YAChE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC;AAC9D,YAAA,IAAI,CAAC,MAAM,GAAG,KAAK;AACrB,SAAC;AAEO,QAAA,IAAA,CAAA,gBAAgB,GAAG,CAAC,KAAiB,KAAI;AAC/C,YAAA,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;gBACpD,IAAI,CAAC,KAAK,EAAE;;AAEhB,SAAC;AAEO,QAAA,IAAA,CAAA,eAAe,GAAG,CAAC,KAAoB,KAAI;;YACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;gBACrD,IAAI,CAAC,KAAK,EAAE;gBACZ,CAAA,EAAA,GAAA,IAAI,CAAC,UAAU,MAAE,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAA,QAAQ,EAAE;gBAC3B,KAAK,CAAC,cAAc,EAAE;;YAGxB;AACF,SAAC;AA2BF;IAzBC,MAAM,GAAA;QACJ,QACE,EAAC,QAAQ,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACP,CAAA,CAAA,iBAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,kBAAA,EACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,MAAM,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,EAC7C,CAAA,EACF,CAAA,CAAA,aAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,SAAS,EAAA,IAAA,EACT,WAAW,EAAA,IAAA,EACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK,EAAA,EAEjB,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACI,CACL;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/toggletip/toggletip.scss?tag=dso-toggletip&encapsulation=shadow","src/components/toggletip/toggletip.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/variables/zindex\";\r\n\r\n@include utilities.box-sizing();\r\n\r\n:host {\r\n  display: inline-block;\r\n\r\n  // tooltip arrow placement exceptions\r\n  --tooltip-margin-block-start: 0;\r\n  --tooltip-margin-inline-start: 3px;\r\n  --tooltip-margin-inline-end: units.$u1 * -1 !important;\r\n}\r\n\r\n:host(:focus) {\r\n  outline: none;\r\n  z-index: zindex.$tooltip;\r\n}\r\n","import { Placement } from \"@popperjs/core\";\r\nimport { Component, Element, Fragment, Prop, State, h } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-toggletip\",\r\n  styleUrl: \"toggletip.scss\",\r\n  shadow: true,\r\n})\r\nexport class Toggletip {\r\n  @Element()\r\n  host!: HTMLDsoToggletipElement;\r\n\r\n  @State()\r\n  active = false;\r\n\r\n  /**\r\n   * Toggletip label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting\";\r\n\r\n  /**\r\n   * Toggletip position.\r\n   */\r\n  @Prop()\r\n  position: Placement = \"right\";\r\n\r\n  /**\r\n   * Set to true for small Toggletip.\r\n   */\r\n  @Prop()\r\n  small?: boolean;\r\n\r\n  /**\r\n   * Set to true for secondary Toggletip.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n  private click = () => {\r\n    if (this.active) {\r\n      this.close();\r\n    } else {\r\n      this.open();\r\n    }\r\n  };\r\n\r\n  private open = () => {\r\n    this.active = true;\r\n    this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n    this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n  };\r\n\r\n  private close = () => {\r\n    this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n    this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n    this.active = false;\r\n  };\r\n\r\n  private focusOutListener = (event: FocusEvent) => {\r\n    if (!this.host.contains(event.relatedTarget as Node)) {\r\n      this.close();\r\n    }\r\n  };\r\n\r\n  private keyDownListener = (event: KeyboardEvent) => {\r\n    if (!event.defaultPrevented && event.key === \"Escape\") {\r\n      this.close();\r\n      this.infoButton?.setFocus();\r\n      event.preventDefault();\r\n    }\r\n\r\n    return;\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <dso-info-button\r\n          aria-describedby=\"toggle\"\r\n          onClick={this.click}\r\n          label={this.label}\r\n          active={this.active}\r\n          secondary={this.secondary}\r\n          ref={(element) => (this.infoButton = element)}\r\n        />\r\n        <dso-tooltip\r\n          stateless\r\n          descriptive\r\n          id=\"toggle\"\r\n          strategy=\"absolute\"\r\n          active={this.active}\r\n          position={this.position}\r\n          small={this.small}\r\n        >\r\n          <slot />\r\n        </dso-tooltip>\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"],"version":3}