@dso-toolkit/core 66.3.0 → 67.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (127) hide show
  1. package/dist/cjs/dso-advanced-select.cjs.entry.js +1 -1
  2. package/dist/cjs/dso-alert_6.cjs.entry.js +2 -2
  3. package/dist/cjs/dso-autosuggest.cjs.entry.js +1 -1
  4. package/dist/cjs/dso-header.cjs.entry.js +1 -1
  5. package/dist/cjs/dso-helpcenter-panel.cjs.entry.js +1 -1
  6. package/dist/cjs/dso-info_2.cjs.entry.js +2 -2
  7. package/dist/cjs/dso-info_2.cjs.entry.js.map +1 -1
  8. package/dist/cjs/dso-label_2.cjs.entry.js +3 -3
  9. package/dist/cjs/dso-label_2.cjs.entry.js.map +1 -1
  10. package/dist/cjs/dso-list-button.cjs.entry.js +2 -2
  11. package/dist/cjs/dso-list-button.cjs.entry.js.map +1 -1
  12. package/dist/cjs/dso-map-base-layers.cjs.entry.js +1 -1
  13. package/dist/cjs/dso-map-controls.cjs.entry.js +1 -1
  14. package/dist/cjs/dso-map-overlays.cjs.entry.js +1 -1
  15. package/dist/cjs/dso-modal.cjs.entry.js +4 -4
  16. package/dist/cjs/dso-modal.cjs.entry.js.map +1 -1
  17. package/dist/cjs/dso-progress-indicator.cjs.entry.js +2 -2
  18. package/dist/cjs/dso-progress-indicator.cjs.entry.js.map +1 -1
  19. package/dist/cjs/dso-toolkit.cjs.js +1 -1
  20. package/dist/cjs/{focus-trap.esm-dd03396f.js → focus-trap.esm-2a6637e5.js} +73 -26
  21. package/dist/cjs/focus-trap.esm-2a6637e5.js.map +1 -0
  22. package/dist/cjs/{i18n-012dfc26.js → i18n-f7bc1cee.js} +34 -20
  23. package/dist/cjs/i18n-f7bc1cee.js.map +1 -0
  24. package/dist/cjs/loader.cjs.js +1 -1
  25. package/dist/cjs/v4-6fbeaa38.js.map +1 -1
  26. package/dist/collection/components/info/info.css +20 -0
  27. package/dist/collection/components/label/label.js +4 -4
  28. package/dist/collection/components/label/label.js.map +1 -1
  29. package/dist/collection/components/list-button/list-button.css +29 -45
  30. package/dist/collection/components/modal/modal.js +5 -5
  31. package/dist/collection/components/modal/modal.js.map +1 -1
  32. package/dist/collection/components/progress-indicator/progress-indicator.js +2 -2
  33. package/dist/collection/components/progress-indicator/progress-indicator.js.map +1 -1
  34. package/dist/collection/components/selectable/selectable.css +14 -0
  35. package/dist/components/dso-list-button.js +1 -1
  36. package/dist/components/dso-list-button.js.map +1 -1
  37. package/dist/components/dso-modal.js +4 -4
  38. package/dist/components/dso-modal.js.map +1 -1
  39. package/dist/components/focus-trap.esm.js +72 -25
  40. package/dist/components/focus-trap.esm.js.map +1 -1
  41. package/dist/components/i18n.js +33 -19
  42. package/dist/components/i18n.js.map +1 -1
  43. package/dist/components/info.js +1 -1
  44. package/dist/components/info.js.map +1 -1
  45. package/dist/components/label.js +4 -4
  46. package/dist/components/label.js.map +1 -1
  47. package/dist/components/progress-indicator.js +2 -2
  48. package/dist/components/progress-indicator.js.map +1 -1
  49. package/dist/components/selectable.js +1 -1
  50. package/dist/components/selectable.js.map +1 -1
  51. package/dist/components/v4.js.map +1 -1
  52. package/dist/dso-toolkit/dso-toolkit.esm.js +1 -1
  53. package/dist/dso-toolkit/dso-toolkit.esm.js.map +1 -1
  54. package/dist/dso-toolkit/{p-9424e171.entry.js → p-1d7b22a2.entry.js} +2 -2
  55. package/dist/dso-toolkit/{p-636a2ad2.entry.js → p-21f133e4.entry.js} +2 -2
  56. package/dist/dso-toolkit/p-4831099c.entry.js +2 -0
  57. package/dist/dso-toolkit/p-4831099c.entry.js.map +1 -0
  58. package/dist/dso-toolkit/p-5f4e8468.js +6 -0
  59. package/dist/dso-toolkit/p-5f4e8468.js.map +1 -0
  60. package/dist/dso-toolkit/p-672b0b80.js +2 -0
  61. package/dist/dso-toolkit/p-672b0b80.js.map +1 -0
  62. package/dist/dso-toolkit/{p-86cdbaf9.entry.js → p-6789163b.entry.js} +2 -2
  63. package/dist/dso-toolkit/{p-eb579735.entry.js → p-7b3f08da.entry.js} +2 -2
  64. package/dist/dso-toolkit/{p-278837c5.entry.js → p-7d47fedb.entry.js} +2 -2
  65. package/dist/dso-toolkit/p-7d47fedb.entry.js.map +1 -0
  66. package/dist/dso-toolkit/{p-5a832300.entry.js → p-826609e4.entry.js} +2 -2
  67. package/dist/dso-toolkit/{p-5a832300.entry.js.map → p-826609e4.entry.js.map} +1 -1
  68. package/dist/dso-toolkit/p-a2db4965.entry.js +2 -0
  69. package/dist/dso-toolkit/p-a2db4965.entry.js.map +1 -0
  70. package/dist/dso-toolkit/{p-00838920.entry.js → p-c2f086f2.entry.js} +2 -2
  71. package/dist/dso-toolkit/{p-26fe4ae2.entry.js → p-d3857319.entry.js} +2 -2
  72. package/dist/dso-toolkit/p-d88ebb12.entry.js +2 -0
  73. package/dist/dso-toolkit/p-d88ebb12.entry.js.map +1 -0
  74. package/dist/dso-toolkit/{p-92a7d8b0.entry.js → p-e05b8f92.entry.js} +2 -2
  75. package/dist/dso-toolkit/{p-3f21e21c.entry.js → p-fbfe9a96.entry.js} +2 -2
  76. package/dist/dso-toolkit/p-ffb34aa5.js.map +1 -1
  77. package/dist/esm/dso-advanced-select.entry.js +1 -1
  78. package/dist/esm/dso-alert_6.entry.js +2 -2
  79. package/dist/esm/dso-autosuggest.entry.js +1 -1
  80. package/dist/esm/dso-header.entry.js +1 -1
  81. package/dist/esm/dso-helpcenter-panel.entry.js +1 -1
  82. package/dist/esm/dso-info_2.entry.js +2 -2
  83. package/dist/esm/dso-info_2.entry.js.map +1 -1
  84. package/dist/esm/dso-label_2.entry.js +3 -3
  85. package/dist/esm/dso-label_2.entry.js.map +1 -1
  86. package/dist/esm/dso-list-button.entry.js +2 -2
  87. package/dist/esm/dso-list-button.entry.js.map +1 -1
  88. package/dist/esm/dso-map-base-layers.entry.js +1 -1
  89. package/dist/esm/dso-map-controls.entry.js +1 -1
  90. package/dist/esm/dso-map-overlays.entry.js +1 -1
  91. package/dist/esm/dso-modal.entry.js +4 -4
  92. package/dist/esm/dso-modal.entry.js.map +1 -1
  93. package/dist/esm/dso-progress-indicator.entry.js +2 -2
  94. package/dist/esm/dso-progress-indicator.entry.js.map +1 -1
  95. package/dist/esm/dso-toolkit.js +1 -1
  96. package/dist/esm/{focus-trap.esm-24223ea1.js → focus-trap.esm-c9e1f389.js} +73 -26
  97. package/dist/esm/focus-trap.esm-c9e1f389.js.map +1 -0
  98. package/dist/esm/{i18n-c3546551.js → i18n-f2d58c82.js} +34 -20
  99. package/dist/esm/i18n-f2d58c82.js.map +1 -0
  100. package/dist/esm/loader.js +1 -1
  101. package/dist/esm/v4-692dad5f.js.map +1 -1
  102. package/dist/types/components/modal/modal.d.ts +1 -1
  103. package/dist/types/components.d.ts +8 -8
  104. package/package.json +6 -6
  105. package/dist/cjs/focus-trap.esm-dd03396f.js.map +0 -1
  106. package/dist/cjs/i18n-012dfc26.js.map +0 -1
  107. package/dist/dso-toolkit/p-036ff12b.js +0 -2
  108. package/dist/dso-toolkit/p-036ff12b.js.map +0 -1
  109. package/dist/dso-toolkit/p-221c5d0b.entry.js +0 -2
  110. package/dist/dso-toolkit/p-221c5d0b.entry.js.map +0 -1
  111. package/dist/dso-toolkit/p-278837c5.entry.js.map +0 -1
  112. package/dist/dso-toolkit/p-74e0e63e.entry.js +0 -2
  113. package/dist/dso-toolkit/p-74e0e63e.entry.js.map +0 -1
  114. package/dist/dso-toolkit/p-b0a3dfcb.entry.js +0 -2
  115. package/dist/dso-toolkit/p-b0a3dfcb.entry.js.map +0 -1
  116. package/dist/dso-toolkit/p-f0538f4a.js +0 -6
  117. package/dist/dso-toolkit/p-f0538f4a.js.map +0 -1
  118. package/dist/esm/focus-trap.esm-24223ea1.js.map +0 -1
  119. package/dist/esm/i18n-c3546551.js.map +0 -1
  120. /package/dist/dso-toolkit/{p-9424e171.entry.js.map → p-1d7b22a2.entry.js.map} +0 -0
  121. /package/dist/dso-toolkit/{p-636a2ad2.entry.js.map → p-21f133e4.entry.js.map} +0 -0
  122. /package/dist/dso-toolkit/{p-86cdbaf9.entry.js.map → p-6789163b.entry.js.map} +0 -0
  123. /package/dist/dso-toolkit/{p-eb579735.entry.js.map → p-7b3f08da.entry.js.map} +0 -0
  124. /package/dist/dso-toolkit/{p-00838920.entry.js.map → p-c2f086f2.entry.js.map} +0 -0
  125. /package/dist/dso-toolkit/{p-26fe4ae2.entry.js.map → p-d3857319.entry.js.map} +0 -0
  126. /package/dist/dso-toolkit/{p-92a7d8b0.entry.js.map → p-e05b8f92.entry.js.map} +0 -0
  127. /package/dist/dso-toolkit/{p-3f21e21c.entry.js.map → p-fbfe9a96.entry.js.map} +0 -0
@@ -1,7 +1,7 @@
1
1
  import { proxyCustomElement, HTMLElement, createEvent, h, Fragment } from '@stencil/core/internal/client';
2
2
  import { d as defineCustomElement$1 } from './icon.js';
3
3
 
4
- const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}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}*,*::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}";
4
+ const infoCss = ":host{display:block;padding-block:16px;padding-inline:16px 32px;position:relative}:host{--link-color:currentColor;--link-hover-color:currentColor;--link-visited-color:currentColor;background-color:#f2f2f2;border-color:#f2f2f2;color:#191919}:host a:is(.download,.download:hover,.download:focus-visible){background-image:url(\"./dso-icons.svg#img-download-zwart\")}:host a:is(.extern,.extern:hover,.extern:focus-visible){background-image:url(\"./dso-icons.svg#img-external-link-zwart\")}:host a:is([href^=\"tel:\"],[href^=\"tel:\"]:hover,[href^=\"tel:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-call-zwart\")}:host a:is([href^=\"mailto:\"],[href^=\"mailto:\"]:hover,[href^=\"mailto:\"]:focus-visible){background-image:url(\"./dso-icons.svg#img-email-zwart\")}:host>button{background-color:transparent;border-style:none;padding:0;position:absolute;inset-inline-end:8px;inset-block-start:8px}:host(:not([active],[fixed])),:host([active=false]:not([fixed])),:host([active=false][fixed=false]){display:none}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}*,*::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}";
5
5
  const DsoInfoStyle0 = infoCss;
6
6
 
7
7
  const Info = /*@__PURE__*/ proxyCustomElement(class Info extends HTMLElement {
@@ -1 +1 @@
1
- {"file":"info.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,ivBAAivB,CAAC;AAClwB,sBAAe,OAAO;;MCMT,IAAI;;;;;;;;;IAmBf,MAAM;QACJ,QACE,EAAC,QAAQ,uDACP,8DAAa,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACzD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\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","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /**\r\n * Whether the Info is active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"info.js","mappings":";;;AAAA,MAAM,OAAO,GAAG,s6CAAs6C,CAAC;AACv7C,sBAAe,OAAO;;MCMT,IAAI;;;;;;;;;IAmBf,MAAM;QACJ,QACE,EAAC,QAAQ,uDACP,8DAAa,EACZ,CAAC,IAAI,CAAC,KAAK,KACV,+DAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,KAAK,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC,IACzD,iEAAU,IAAI,EAAC,OAAO,GAAY,EAClC,6DAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,EACX;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/info/info.scss?tag=dso-info&encapsulation=shadow","src/components/info/info.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/button\";\r\n@use \"~dso-toolkit/src/components/info\";\r\n\r\n:host {\r\n display: block;\r\n\r\n @include info.root();\r\n}\r\n\r\n:host(:not([active], [fixed])),\r\n:host([active=\"false\"]:not([fixed])),\r\n:host([active=\"false\"][fixed=\"false\"]) {\r\n display: none;\r\n}\r\n\r\nbutton {\r\n @include button.element();\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","import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-info\",\r\n styleUrl: \"./info.scss\",\r\n shadow: true,\r\n})\r\nexport class Info {\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop({ reflect: true })\r\n fixed?: boolean;\r\n\r\n /**\r\n * Whether the Info is active.\r\n */\r\n @Prop({ reflect: true })\r\n active?: boolean;\r\n\r\n /**\r\n * Emitted when the user activates the close button.\r\n */\r\n @Event()\r\n dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <slot></slot>\r\n {!this.fixed && (\r\n <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">Sluiten</span>\r\n </button>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -112,13 +112,13 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
112
112
  this.isTruncated = false;
113
113
  }
114
114
  render() {
115
- return (h(Fragment, { key: '07723299883f0fe1b61f09feed46a39f37205481' }, h("span", { key: '0ef33ed0541bbb451d3c9bec9493ff563eadd8b0', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
115
+ return (h(Fragment, { key: '1ea5da78bab4c0deec1e14b08c71a6d08b5c0041' }, h("span", { key: '9f1c40eb645f7d610bcb749256046371a469b30c', "aria-describedby": "toggle-anchor", class: clsx("dso-label", {
116
116
  [`dso-label-${this.status}`]: this.status,
117
117
  "dso-compact": this.compact && !this.removable,
118
118
  "dso-hover": this.removeHover || this.removeFocus,
119
- }) }, h("slot", { key: '287637d9cff61b3f9a049f3bf923085397d06a9f', name: "symbol" }), h("span", { key: '745b33815b6387571b4febfd435ab4bf6102b4f7', class: clsx("dso-label-content", {
119
+ }) }, h("slot", { key: '44f0e70bc77d9ddd749a7bd2bc204d5d99e2769a', name: "symbol" }), h("span", { key: '6c4c1540325cc57fdc442ae44307b132cc0c77cc', class: clsx("dso-label-content", {
120
120
  "dso-truncate": !!this.truncate,
121
- }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: '3bd278fe59bd427423fd0b0ea12aea49e73800ac' })), this.removable && (h("button", { key: '975eaa6513ffba48d5ee17fe15af43deb8ae6aa3', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '44b03c47c0e9e261070da1ec55875f279104a509', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'b980445c597c236d23cf7b002b9c0155d8324ee4', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '74c2da63edc210b7caac69bc5ac1413da8b18592', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
121
+ }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.isTruncated ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", { key: 'bf178d4f785f01233ec95902488c142d5fdbdf22' })), this.removable && (h("button", { key: '71bfdfdbe170942f90eab94b37bf3b076c4057cd', type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { key: '849bc8138812af02f54bfb4446d8cf0d93af73d1', class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { key: 'f968019fa61736b7ec6c676bf71a78efa70efd8a', icon: "times" })))), this.isTruncated && (h("dso-tooltip", { key: '6eb60908fec4165362550d29cbac3b5a07b31ce1', stateless: true, id: "toggle-anchor", active: this.textHover || this.textFocus, position: "top", strategy: "absolute" }, this.labelText))));
122
122
  }
123
123
  get host() { return this; }
124
124
  static get watchers() { return {
@@ -128,7 +128,7 @@ const Label = /*@__PURE__*/ proxyCustomElement(class Label extends HTMLElement {
128
128
  static get style() { return DsoLabelStyle0; }
129
129
  }, [1, "dso-label", {
130
130
  "compact": [4],
131
- "removable": [4],
131
+ "removable": [516],
132
132
  "status": [1],
133
133
  "truncate": [4],
134
134
  "removeHover": [32],
@@ -1 +1 @@
1
- {"file":"label.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement | undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /**\r\n * For compact Label\r\n */\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /**\r\n * Shows a button that can be used to remove the Label.\r\n */\r\n @Prop()\r\n removable?: boolean;\r\n\r\n /**\r\n * The status of this Label.\r\n */\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /**\r\n * Emitted when the user activates the remove button.\r\n */\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /**\r\n * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n */\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force || !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover || this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover || this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"label.js","mappings":"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","names":[],"sources":["src/components/label/label.scss?tag=dso-label&encapsulation=shadow","src/components/label/label.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n@use \"~dso-toolkit/src/components/label\";\r\n\r\n:host {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n// Todo: Replace .sr-only selector with web component specific selector, no need for .sr-only if we can generate the SCSS\r\n.sr-only {\r\n @include utilities.sr-only();\r\n}\r\n\r\n.dso-label {\r\n @include label.root();\r\n\r\n &.dso-hover {\r\n .dso-label-content {\r\n text-decoration: line-through;\r\n }\r\n }\r\n}\r\n\r\n.dso-truncate.dso-label-content {\r\n display: inline-block;\r\n max-inline-size: 100%;\r\n overflow: hidden;\r\n text-overflow: ellipsis; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n vertical-align: bottom;\r\n white-space: nowrap; // stylelint-disable-line declaration-property-value-disallowed-list -- full text can be viewed via tooltip.\r\n}\r\n\r\n:host([removable]) {\r\n .dso-truncate.dso-label-content {\r\n max-inline-size: calc(100% - (units.$u3 + 4px));\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n ComponentInterface,\r\n Element,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Method,\r\n Prop,\r\n State,\r\n Watch,\r\n Listen,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\nimport { LabelStatus } from \"./label.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n debounce((entries: ResizeObserverEntry[]) => {\r\n entries.forEach(({ target }) => {\r\n if (isDsoLabelComponent(target)) {\r\n target._truncateLabel();\r\n }\r\n });\r\n }, 150),\r\n);\r\n\r\nfunction isDsoLabelComponent(element: Element): element is HTMLDsoLabelElement {\r\n return element.tagName === \"DSO-LABEL\";\r\n}\r\n\r\nfunction hasEllipses(el: HTMLElement): boolean {\r\n return el.scrollWidth > el.clientWidth;\r\n}\r\n\r\n@Component({\r\n tag: \"dso-label\",\r\n styleUrl: \"label.scss\",\r\n shadow: true,\r\n})\r\nexport class Label implements ComponentInterface {\r\n private labelContent: HTMLSpanElement | undefined;\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n @Element()\r\n private host!: HTMLDsoLabelElement;\r\n\r\n /**\r\n * For compact Label\r\n */\r\n @Prop()\r\n compact?: boolean;\r\n\r\n /**\r\n * Shows a button that can be used to remove the Label.\r\n */\r\n @Prop({ reflect: true })\r\n removable?: boolean;\r\n\r\n /**\r\n * The status of this Label.\r\n */\r\n @Prop()\r\n status?: LabelStatus;\r\n\r\n /**\r\n * Emitted when the user activates the remove button.\r\n */\r\n @Event()\r\n dsoRemoveClick!: EventEmitter<MouseEvent>;\r\n\r\n @State()\r\n removeHover?: boolean;\r\n\r\n @State()\r\n removeFocus?: boolean;\r\n\r\n /**\r\n * Whether the Label is allowed to truncate the contents if it does not fit the container element.\r\n */\r\n @Prop()\r\n truncate?: boolean;\r\n\r\n @State()\r\n textHover?: boolean;\r\n\r\n @State()\r\n textFocus?: boolean;\r\n\r\n @State()\r\n isTruncated = false;\r\n\r\n @State()\r\n labelText = \"\";\r\n\r\n @Watch(\"removable\")\r\n watchRemovable(removable: boolean) {\r\n if (removable) {\r\n this.startMutationObserver();\r\n } else {\r\n this.stopMutationObserver();\r\n }\r\n }\r\n\r\n @Watch(\"truncate\")\r\n watchTruncate(truncate: boolean) {\r\n if (truncate) {\r\n this.startTruncate();\r\n } else {\r\n this.stopTruncate();\r\n }\r\n }\r\n\r\n @Listen(\"keydown\", { target: \"document\" })\r\n keyDownListener(event: KeyboardEvent) {\r\n if (event.key === \"Escape\") {\r\n this.textHover = false;\r\n this.textFocus = false;\r\n }\r\n }\r\n\r\n /**\r\n * @internal\r\n */\r\n @Method()\r\n async _truncateLabel() {\r\n setTimeout(() => {\r\n this.isTruncated = !!this.labelContent && hasEllipses(this.labelContent);\r\n });\r\n }\r\n\r\n private syncLabelText() {\r\n this.labelText = this.host.textContent?.trim() ?? \"\";\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.truncate) {\r\n this.startTruncate();\r\n }\r\n\r\n if (this.removable) {\r\n this.startMutationObserver();\r\n }\r\n }\r\n\r\n disconnectedCallback() {\r\n this.stopTruncate();\r\n\r\n this.stopMutationObserver(true);\r\n }\r\n\r\n /** The mutationObserver fetches the text placed inside the label, this is then used for the remove button and tooltip. */\r\n private startMutationObserver(): void {\r\n this.mutationObserver = new MutationObserver(() => this.syncLabelText());\r\n\r\n this.mutationObserver.observe(this.host, {\r\n characterData: true,\r\n childList: true,\r\n subtree: true,\r\n attributes: true,\r\n });\r\n\r\n this.syncLabelText();\r\n }\r\n\r\n private stopMutationObserver(force = false): void {\r\n if (force || !(this.truncate && this.removable)) {\r\n this.mutationObserver?.disconnect();\r\n\r\n delete this.mutationObserver;\r\n }\r\n }\r\n\r\n private startTruncate(): void {\r\n resizeObserver.observe(this.host);\r\n this.startMutationObserver();\r\n this._truncateLabel();\r\n }\r\n\r\n private stopTruncate(): void {\r\n resizeObserver.unobserve(this.host);\r\n this.stopMutationObserver();\r\n this.isTruncated = false;\r\n }\r\n\r\n render() {\r\n return (\r\n <Fragment>\r\n <span\r\n aria-describedby=\"toggle-anchor\"\r\n class={clsx(\"dso-label\", {\r\n [`dso-label-${this.status}`]: this.status,\r\n \"dso-compact\": this.compact && !this.removable,\r\n \"dso-hover\": this.removeHover || this.removeFocus,\r\n })}\r\n >\r\n <slot name=\"symbol\"></slot>\r\n <span\r\n class={clsx(\"dso-label-content\", {\r\n \"dso-truncate\": !!this.truncate,\r\n })}\r\n ref={(element) => (this.labelContent = element)}\r\n tabindex={this.truncate && this.isTruncated ? 0 : undefined}\r\n onMouseEnter={() => (this.textHover = true)}\r\n onMouseLeave={() => (this.textHover = false)}\r\n onFocus={() => (this.textFocus = true)}\r\n onBlur={() => (this.textFocus = false)}\r\n >\r\n <slot></slot>\r\n </span>\r\n {this.removable && (\r\n <button\r\n type=\"button\"\r\n onClick={(e) => this.dsoRemoveClick.emit(e)}\r\n onMouseEnter={() => (this.removeHover = true)}\r\n onMouseLeave={() => (this.removeHover = false)}\r\n onFocus={() => (this.removeFocus = true)}\r\n onBlur={() => (this.removeFocus = false)}\r\n >\r\n <span class=\"sr-only\">Verwijder: {this.labelText}</span>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n </button>\r\n )}\r\n </span>\r\n {this.isTruncated && (\r\n <dso-tooltip\r\n stateless\r\n id=\"toggle-anchor\"\r\n active={this.textHover || this.textFocus}\r\n position=\"top\"\r\n strategy=\"absolute\"\r\n >\r\n {this.labelText}\r\n </dso-tooltip>\r\n )}\r\n </Fragment>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -29,14 +29,14 @@ const Progressindicator = /*@__PURE__*/ proxyCustomElement(class Progressindicat
29
29
  this.block = undefined;
30
30
  }
31
31
  render() {
32
- return (h(Host, { key: '75ddf7c5f5d586c3576016b9c975d54c01d7f9b1' }, h("span", { key: '831ba2d4732b96a49d83e9183f6f55d9f3351d46', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '5161aa447c3e04ece65a209b7182db3171b31e4a', icon: "spinner" })), h("span", { key: '253cd708ad62cdd73aa57e3959f773a557df2c5a', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
32
+ return (h(Host, { key: 'b6703c229225d1fe41c64a548683b273bb407e4b' }, h("span", { key: '1f7354a33c6e225f98da4ec1a46786e56c28ff38', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '8390d994ff9087aa1528d585c484009c36a554b7', icon: "spinner" })), h("span", { key: 'af5a3464ff7074d3519623df2d8aee534d5adeca', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
33
33
  }
34
34
  get host() { return this; }
35
35
  static get style() { return DsoProgressIndicatorStyle0; }
36
36
  }, [1, "dso-progress-indicator", {
37
37
  "label": [1],
38
38
  "size": [513],
39
- "block": [4]
39
+ "block": [516]
40
40
  }]);
41
41
  function defineCustomElement() {
42
42
  if (typeof customElements === "undefined") {
@@ -1 +1 @@
1
- {"file":"progress-indicator.js","mappings":";;;;AAEO,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,iCAAiC;SACzC;KACF;IACD,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,kDAAkD;SAC1D;KACF;CACF;;ACbD,MAAM,oBAAoB,GAAG,kgCAAkgC,CAAC;AAChiC,mCAAe,oBAAoB;;MCStB,iBAAiB;;;;;QAwBpB,SAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;;;;;IAEnD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B,EACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-progress-indicator\": {\r\n label: \"Loading results. Please wait...\",\r\n },\r\n },\r\n nl: {\r\n \"dso-progress-indicator\": {\r\n label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n @include progress-indicator.small();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.small-block();\r\n }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n @include progress-indicator.medium();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.medium-block();\r\n }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n @include progress-indicator.large();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.large-block();\r\n }\r\n}\r\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /**\r\n * The label of the Progress Indicator.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The size (width) of the Progress Indicator.\r\n *\r\n * If no size is set, falls back to `small`.\r\n */\r\n @Prop({ reflect: true })\r\n size?: \"small\" | \"medium\" | \"large\";\r\n\r\n /**\r\n * Set for bloatier Progress Indicator.\r\n */\r\n @Prop()\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label || this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"progress-indicator.js","mappings":";;;;AAEO,MAAM,YAAY,GAAa;IACpC,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,iCAAiC;SACzC;KACF;IACD,EAAE,EAAE;QACF,wBAAwB,EAAE;YACxB,KAAK,EAAE,kDAAkD;SAC1D;KACF;CACF;;ACbD,MAAM,oBAAoB,GAAG,kgCAAkgC,CAAC;AAChiC,mCAAe,oBAAoB;;MCStB,iBAAiB;;;;;QAwBpB,SAAI,GAAG,IAAI,CAAC,MAAM,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;;;;;IAEnD,MAAM;QACJ,QACE,EAAC,IAAI,uDACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B,IACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B,EACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAC5B,CACF,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/progress-indicator/progress-indicator.i18n.ts","src/components/progress-indicator/progress-indicator.scss?tag=dso-progress-indicator&encapsulation=shadow","src/components/progress-indicator/progress-indicator.tsx"],"sourcesContent":["import { Resource } from \"../../utils/i18n\";\r\n\r\nexport const translations: Resource = {\r\n en: {\r\n \"dso-progress-indicator\": {\r\n label: \"Loading results. Please wait...\",\r\n },\r\n },\r\n nl: {\r\n \"dso-progress-indicator\": {\r\n label: \"Resultaten laden: een moment geduld alstublieft.\",\r\n },\r\n },\r\n};\r\n","@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/progress-indicator\";\r\n\r\n@include utilities.box-sizing();\r\n@include progress-indicator.root();\r\n\r\n:host([block]) {\r\n @include progress-indicator.block();\r\n}\r\n\r\n:host([size=\"small\"]),\r\n:host(:not([size=\"medium\"]):not([size=\"large\"])) {\r\n @include progress-indicator.small();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.small-block();\r\n }\r\n}\r\n\r\n:host([size=\"medium\"]) {\r\n @include progress-indicator.medium();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.medium-block();\r\n }\r\n}\r\n\r\n:host([size=\"large\"]) {\r\n @include progress-indicator.large();\r\n\r\n &:host([block]) {\r\n @include progress-indicator.large-block();\r\n }\r\n}\r\n","import { Component, Element, h, Host, Prop } from \"@stencil/core\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\nimport { translations } from \"./progress-indicator.i18n\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n @Element()\r\n host!: HTMLDsoProgressIndicatorElement;\r\n\r\n /**\r\n * The label of the Progress Indicator.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The size (width) of the Progress Indicator.\r\n *\r\n * If no size is set, falls back to `small`.\r\n */\r\n @Prop({ reflect: true })\r\n size?: \"small\" | \"medium\" | \"large\";\r\n\r\n /**\r\n * Set for bloatier Progress Indicator.\r\n */\r\n @Prop({ reflect: true })\r\n block?: boolean;\r\n\r\n private text = i18n(() => this.host, translations);\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label || this.text(\"label\")}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"],"version":3}
@@ -5,7 +5,7 @@ import { d as defineCustomElement$3 } from './icon.js';
5
5
  import { d as defineCustomElement$2 } from './info.js';
6
6
  import { d as defineCustomElement$1 } from './info-button.js';
7
7
 
8
- const selectableCss = ".sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block);padding-inline-start:32px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}";
8
+ const selectableCss = ".sc-dso-selectable-h{position:relative;display:var(--dso-selectable-display, block);padding-inline-start:32px}.sc-dso-selectable-h label.sc-dso-selectable{font-weight:400;line-height:24px;margin:0}.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio][disabled].sc-dso-selectable:focus+label.sc-dso-selectable::before{background-color:#fff;box-shadow:0 0 0 2px #e5e5e5}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{block-size:24px;inset-inline-start:0;margin:0;opacity:0;position:absolute;inset-block-start:0;inline-size:24px;z-index:100;zoom:1}@media (prefers-contrast: more){.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable{opacity:1}}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:not([disabled]),.sc-dso-selectable-h input[type=radio].sc-dso-selectable:not([disabled]){cursor:pointer}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable{display:inline;font-style:normal;padding-inline-start:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{background:#fff;border:0;box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);content:\"\";block-size:20px;inset-inline-start:2px;position:absolute;inset-block-start:2px;inline-size:20px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus{outline:0}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 3px var(--dso-selectable-color, #275937);block-size:18px;inset-inline-start:3px;inset-block-start:3px;inline-size:18px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=checkbox].active.sc-dso-selectable+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].sc-dso-selectable:active+label.sc-dso-selectable::before,.sc-dso-selectable-h input[type=radio].active.sc-dso-selectable+label.sc-dso-selectable::before{background-color:#ebf3e6;box-shadow:0 0 0 1px #275937;block-size:22px;inset-inline-start:1px;inset-block-start:1px;inline-size:22px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:4px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable+label.sc-dso-selectable::after{background:transparent;content:\"\";inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;zoom:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after,.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{opacity:1}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:checked+label.sc-dso-selectable::after{border:solid;border-color:var(--dso-selectable-color, #39870c);border-block-start-color:transparent;border-width:0 0 3px 3px;block-size:8px;transform:rotate(-45deg);inline-size:13px}.sc-dso-selectable-h input[type=checkbox].sc-dso-selectable:indeterminate+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);block-size:12px;inline-size:12px}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::before{border-radius:50%}.sc-dso-selectable-h input[type=radio].sc-dso-selectable+label.sc-dso-selectable::after{background-color:transparent;border-radius:50%;content:\"\";block-size:12px;inset-inline-start:6px;opacity:0;position:absolute;inset-block-start:6px;inline-size:12px;zoom:1}.sc-dso-selectable-h input[type=radio].sc-dso-selectable:checked+label.sc-dso-selectable::after{background-color:var(--dso-selectable-color, #39870c);opacity:1}[invalid].sc-dso-selectable-h:not([invalid=false]){--dso-selectable-color:#ce3f51}.sc-dso-selectable-h>dso-info.sc-dso-selectable{float:none;margin-block:8px 0;margin-inline:0 16px;inline-size:100%}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable{list-style:none;margin-block-start:8px;padding-inline-start:0}.sc-dso-selectable-h .dso-selectable-options.sc-dso-selectable li.sc-dso-selectable+li.sc-dso-selectable{margin-block-start:8px}.sc-dso-selectable-h:not(:last-child){margin-block-end:8px}*.sc-dso-selectable,*.sc-dso-selectable::after,*.sc-dso-selectable::before{box-sizing:border-box}.dso-selectable-container.sc-dso-selectable{display:inline-block}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable{display:inline-block;min-block-size:24px}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable:focus-within.dso-keyboard-focus{position:relative;inset-inline-start:-32px;padding-inline-start:32px;margin-inline-end:-32px;border-radius:2px;outline-offset:3px;outline:3px solid #008ccc}.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=radio].sc-dso-selectable:focus+label.sc-dso-selectable::before,.dso-selectable-container.sc-dso-selectable .dso-selectable-input-wrapper.sc-dso-selectable input[type=checkbox].sc-dso-selectable:focus+label.sc-dso-selectable::before{box-shadow:0 0 0 2px var(--dso-selectable-color, #275937);block-size:20px;inset-inline-start:2px;inset-block-start:2px;inline-size:20px}";
9
9
  const DsoSelectableStyle0 = selectableCss;
10
10
 
11
11
  const Selectable = /*@__PURE__*/ proxyCustomElement(class Selectable extends HTMLElement {
@@ -1 +1 @@
1
- {"file":"selectable.js","mappings":";;;;;;;AAAA,MAAM,aAAa,GAAG,ynLAAynL,CAAC;AAChpL,4BAAe,aAAa;;MC2Bf,UAAU;;;;;QA0Gb,uBAAkB,GAAG,gBAAgB,CAAC,eAAe,CAAC,CAAC;QAIvD,mBAAc,GAAG,CAAC,CAAQ;YAChC,MAAM,EAAE,MAAM,EAAE,GAAG,CAAC,CAAC;YAErB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;gBAClB,aAAa,EAAE,CAAC;gBAChB,OAAO,EAAE,MAAM,YAAY,gBAAgB,IAAI,MAAM,CAAC,OAAO;aAC9D,CAAC,CAAC;YAEH,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;SACxB,CAAC;;;;;;;;;;;;;0BA/BW,KAAK;6BAGF,KAAK;;;;;;;;IASrB,MAAM,UAAU,CAAC,MAAgB;QAC/B,IAAI,CAAC,UAAU,GAAG,MAAM,aAAN,MAAM,cAAN,MAAM,GAAI,CAAC,IAAI,CAAC,UAAU,CAAC;KAC9C;IAmBD,gBAAgB;;QACd,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;QAEpC,IAAI,CAAC,gBAAgB,GAAG,IAAI,gBAAgB,CAAC,MAAM,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC;QAC3E,IAAI,CAAC,gBAAgB,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,EAAE;YACvC,SAAS,EAAE,IAAI;SAChB,CAAC,CAAC;QAEH,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;IAED,oBAAoB;;QAClB,MAAA,IAAI,CAAC,gBAAgB,0CAAE,UAAU,EAAE,CAAC;KACrC;IAGD,gBAAgB;QACd,IAAI,EAAE,IAAI,CAAC,KAAK,YAAY,gBAAgB,CAAC,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE;YACzE,OAAO;SACR;QAED,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC;KACjD;IAED,MAAM;;QACJ,MAAM,OAAO,GAAG,CAAC,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,eAAe,CAAC,CAAC;QAE3D,QACE,EAAC,QAAQ,uDACP,4DAAK,KAAK,EAAC,0BAA0B,IACnC,4DAAK,KAAK,EAAE,IAAI,CAAC,8BAA8B,EAAE,EAAE,oBAAoB,EAAE,IAAI,CAAC,aAAa,EAAE,CAAC,IAC5F,8DACE,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,EAAE,EAAE,IAAI,CAAC,aAAa,EAAE,EACxB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,IAAI,EAAE,IAAI,CAAC,IAAI,kBACD,MAAA,IAAI,CAAC,OAAO,0CAAE,QAAQ,EAAE,sBACpB,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,qBAC3D,IAAI,CAAC,YAAY,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,OAAO,EACrB,QAAQ,EAAE,IAAI,CAAC,cAAc,EAC7B,MAAM,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC,EAC1C,OAAO,EAAE,OAAO,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,EAC1C,GAAG,EAAE,CAAC,EAAE,MAAM,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC,GAC9B,EACD,CAAC,IAAI,CAAC,YAAY,IACjB,aAAO,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,IAClC,eAAQ,CACF,KAER,iBACE,eAAQ,CACF,CACT,CACG,EACL,OAAO,IAAI,CAAC,IAAI,CAAC,SAAS,KACzB,wEACE,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,WAAW,EAAE,CAAC,CAAC,MAAM,IAAI,CAAC,UAAU,GAAG,CAAC,CAAC,MAAM,CAAC,MAAM,CAAC,GACtC,CACpB,CACG,EACL,OAAO,KACN,iEACE,EAAE,EAAE,OAAO,IAAI,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,aAAa,GAAG,SAAS,EAC9D,KAAK,EAAE,IAAI,CAAC,SAAS,EACrB,MAAM,EAAE,IAAI,CAAC,UAAU,EACvB,UAAU,EAAE,OAAO,IAAI,CAAC,UAAU,GAAG,KAAK,CAAC,IAE3C,8DACE,6DAAM,IAAI,EAAC,MAAM,GAAQ,CACrB,CACG,CACZ,EACD,6DAAM,IAAI,EAAC,SAAS,GAAG,CACd,EACX;KACH;IAED,kBAAkB;QAChB,IAAI,IAAI,CAAC,KAAK,IAAI,OAAO,IAAI,CAAC,OAAO,KAAK,SAAS,IAAI,IAAI,CAAC,KAAK,CAAC,OAAO,KAAK,IAAI,CAAC,OAAO,EAAE;YAC1F,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC;SACnC;KACF;IAEO,aAAa;;QACnB,OAAO,MAAA,IAAI,CAAC,UAAU,mCAAI,IAAI,CAAC,kBAAkB,CAAC;KACnD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n @include selectable.root(false);\r\n\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n @include selectable.invalid();\r\n }\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n\r\n &:focus-within.dso-keyboard-focus {\r\n position: relative;\r\n inset-inline-start: -(selectable.$symbol-indent);\r\n\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n margin-inline-end: -(selectable.$symbol-indent);\r\n\r\n @include utilities.focus-outline();\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n @include selectable.selectableBoxShadow(\r\n selectable.$border-width,\r\n var(--dso-selectable-color, selectable.$valid-color)\r\n );\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n ComponentInterface,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /**\r\n * Type of Selectable.\r\n *\r\n * `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n */\r\n @Prop()\r\n type!: \"checkbox\" | \"radio\";\r\n\r\n /**\r\n * To set `<input id>` attribute for external references.\r\n */\r\n @Prop()\r\n identifier?: string;\r\n\r\n /**\r\n * Name of the Selectable. Can be used to group Selectables.\r\n */\r\n @Prop()\r\n name?: string;\r\n\r\n /**\r\n * The value of the Selectable.\r\n */\r\n @Prop()\r\n value!: string;\r\n\r\n /**\r\n * Set to true of the current value is not valid.\r\n */\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /**\r\n * To link this control to an element that describes it.\r\n */\r\n @Prop()\r\n describedById?: string;\r\n\r\n /**\r\n * To link this control to an element that labels it.\r\n */\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /**\r\n * To disable the Selectable.\r\n */\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /**\r\n * To mark the Selectable as required.\r\n */\r\n @Prop()\r\n required?: boolean;\r\n\r\n /**\r\n * Mark the Selectable as checked\r\n */\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /**\r\n * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n *\r\n * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n */\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /**\r\n * Emitted when the user checks or unchecks the Selectable.\r\n */\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /**\r\n * Method to toggle the Info. Is set to `active` when passed.\r\n *\r\n * If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement | undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}
1
+ {"file":"selectable.js","mappings":"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","names":[],"sources":["src/components/selectable/selectable.scss?tag=dso-selectable&encapsulation=scoped","src/components/selectable/selectable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/components/selectable\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n @include selectable.root(false);\r\n\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n &[invalid]:not([invalid=\"false\"]) {\r\n @include selectable.invalid();\r\n }\r\n\r\n @include selectable.children(\"dso-info\");\r\n}\r\n\r\n:host(:not(:last-child)) {\r\n @include selectable.notLastChild();\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-selectable-container {\r\n display: inline-block;\r\n\r\n .dso-selectable-input-wrapper {\r\n display: inline-block;\r\n min-block-size: units.$u3;\r\n\r\n &:focus-within.dso-keyboard-focus {\r\n position: relative;\r\n inset-inline-start: -(selectable.$symbol-indent);\r\n\r\n padding-inline-start: selectable.$symbol-indent;\r\n\r\n margin-inline-end: -(selectable.$symbol-indent);\r\n\r\n @include utilities.focus-outline();\r\n }\r\n\r\n input[type=\"radio\"],\r\n input[type=\"checkbox\"] {\r\n &:focus + label::before {\r\n @include selectable.selectableBoxShadow(\r\n selectable.$border-width,\r\n var(--dso-selectable-color, selectable.$valid-color)\r\n );\r\n }\r\n }\r\n }\r\n}\r\n","import {\r\n h,\r\n Component,\r\n Prop,\r\n Event,\r\n EventEmitter,\r\n Fragment,\r\n Element,\r\n State,\r\n forceUpdate,\r\n Watch,\r\n Method,\r\n ComponentInterface,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n/**\r\n * @slot - The label for this control\r\n * @slot info - Rich Content to be slotted in Info.\r\n * @slot options - for further nested selectable options: `<ul class=\"dso-selectable-options\" slot=\"options\">` and wrap each Selectable in a `<li>`.\r\n */\r\n@Component({\r\n tag: \"dso-selectable\",\r\n styleUrl: \"selectable.scss\",\r\n scoped: true,\r\n})\r\nexport class Selectable implements ComponentInterface {\r\n /**\r\n * Type of Selectable.\r\n *\r\n * `checkbox`: Multiple options\r\n * `radio`: Single option.\r\n */\r\n @Prop()\r\n type!: \"checkbox\" | \"radio\";\r\n\r\n /**\r\n * To set `<input id>` attribute for external references.\r\n */\r\n @Prop()\r\n identifier?: string;\r\n\r\n /**\r\n * Name of the Selectable. Can be used to group Selectables.\r\n */\r\n @Prop()\r\n name?: string;\r\n\r\n /**\r\n * The value of the Selectable.\r\n */\r\n @Prop()\r\n value!: string;\r\n\r\n /**\r\n * Set to true of the current value is not valid.\r\n */\r\n @Prop()\r\n invalid?: boolean;\r\n\r\n /**\r\n * To link this control to an element that describes it.\r\n */\r\n @Prop()\r\n describedById?: string;\r\n\r\n /**\r\n * To link this control to an element that labels it.\r\n */\r\n @Prop()\r\n labelledById?: string;\r\n\r\n /**\r\n * To disable the Selectable.\r\n */\r\n @Prop()\r\n disabled?: boolean;\r\n\r\n /**\r\n * To mark the Selectable as required.\r\n */\r\n @Prop()\r\n required?: boolean;\r\n\r\n /**\r\n * Mark the Selectable as checked\r\n */\r\n @Prop({ reflect: true })\r\n checked?: boolean;\r\n\r\n /**\r\n * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n *\r\n * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n */\r\n @Prop()\r\n indeterminate?: boolean;\r\n\r\n /**\r\n * Set to true if the Info should not be toggled and always visible.\r\n */\r\n @Prop()\r\n infoFixed?: boolean;\r\n\r\n /**\r\n * Emitted when the user checks or unchecks the Selectable.\r\n */\r\n @Event()\r\n dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoSelectableElement;\r\n\r\n @State()\r\n infoActive = false;\r\n\r\n @State()\r\n keyboardFocus = false;\r\n\r\n /**\r\n * Method to toggle the Info. Is set to `active` when passed.\r\n *\r\n * If `active` is not passed, Info is toggled to opposite value.\r\n * @param active\r\n */\r\n @Method()\r\n async toggleInfo(active?: boolean) {\r\n this.infoActive = active ?? !this.infoActive;\r\n }\r\n\r\n private mutationObserver?: MutationObserver;\r\n\r\n private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n private input: HTMLInputElement | undefined;\r\n\r\n private handleOnChange = (e: Event) => {\r\n const { target } = e;\r\n\r\n this.dsoChange.emit({\r\n originalEvent: e,\r\n checked: target instanceof HTMLInputElement && target.checked,\r\n });\r\n\r\n forceUpdate(this.host);\r\n };\r\n\r\n componentDidLoad() {\r\n this.mutationObserver?.disconnect();\r\n\r\n this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n this.mutationObserver.observe(this.host, {\r\n childList: true,\r\n });\r\n\r\n this.setIndeterminate();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.mutationObserver?.disconnect();\r\n }\r\n\r\n @Watch(\"indeterminate\")\r\n setIndeterminate() {\r\n if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n return;\r\n }\r\n\r\n this.input.indeterminate = !!this.indeterminate;\r\n }\r\n\r\n render() {\r\n const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n return (\r\n <Fragment>\r\n <div class=\"dso-selectable-container\">\r\n <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n <input\r\n type={this.type}\r\n id={this.getIdentifier()}\r\n value={this.value}\r\n name={this.name}\r\n aria-invalid={this.invalid?.toString()}\r\n aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n aria-labelledBy={this.labelledById}\r\n disabled={this.disabled}\r\n required={this.required}\r\n checked={this.checked}\r\n onChange={this.handleOnChange}\r\n onBlur={() => (this.keyboardFocus = false)}\r\n onKeyUp={() => (this.keyboardFocus = true)}\r\n ref={(el) => (this.input = el)}\r\n />\r\n {!this.labelledById ? (\r\n <label htmlFor={this.getIdentifier()}>\r\n <slot />\r\n </label>\r\n ) : (\r\n <label>\r\n <slot />\r\n </label>\r\n )}\r\n </div>\r\n {hasInfo && !this.infoFixed && (\r\n <dso-info-button\r\n active={this.infoActive}\r\n onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n ></dso-info-button>\r\n )}\r\n </div>\r\n {hasInfo && (\r\n <dso-info\r\n id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n fixed={this.infoFixed}\r\n active={this.infoActive}\r\n onDsoClose={() => (this.infoActive = false)}\r\n >\r\n <div>\r\n <slot name=\"info\"></slot>\r\n </div>\r\n </dso-info>\r\n )}\r\n <slot name=\"options\" />\r\n </Fragment>\r\n );\r\n }\r\n\r\n componentDidRender(): void {\r\n if (this.input && typeof this.checked === \"boolean\" && this.input.checked !== this.checked) {\r\n this.input.checked = this.checked;\r\n }\r\n }\r\n\r\n private getIdentifier(): string {\r\n return this.identifier ?? this.fallbackIdentifier;\r\n }\r\n}\r\n"],"version":3}
@@ -1 +1 @@
1
- {"file":"v4.js","mappings":"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","names":[],"sources":["../../node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/uuid/dist/esm-browser/native.js","../../node_modules/uuid/dist/esm-browser/v4.js"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n return (byteToHex[arr[offset + 0]] +\n byteToHex[arr[offset + 1]] +\n byteToHex[arr[offset + 2]] +\n byteToHex[arr[offset + 3]] +\n '-' +\n byteToHex[arr[offset + 4]] +\n byteToHex[arr[offset + 5]] +\n '-' +\n byteToHex[arr[offset + 6]] +\n byteToHex[arr[offset + 7]] +\n '-' +\n byteToHex[arr[offset + 8]] +\n byteToHex[arr[offset + 9]] +\n '-' +\n byteToHex[arr[offset + 10]] +\n byteToHex[arr[offset + 11]] +\n byteToHex[arr[offset + 12]] +\n byteToHex[arr[offset + 13]] +\n byteToHex[arr[offset + 14]] +\n byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n const uuid = unsafeStringify(arr, offset);\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n return uuid;\n}\nexport default stringify;\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3RyaW5naWZ5LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vc3JjL3N0cmluZ2lmeS50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLFFBQVEsTUFBTSxlQUFlLENBQUM7QUFNckMsTUFBTSxTQUFTLEdBQWEsRUFBRSxDQUFDO0FBRS9CLEtBQUssSUFBSSxDQUFDLEdBQUcsQ0FBQyxFQUFFLENBQUMsR0FBRyxHQUFHLEVBQUUsRUFBRSxDQUFDLEVBQUUsQ0FBQztJQUM3QixTQUFTLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLEtBQUssQ0FBQyxDQUFDLFFBQVEsQ0FBQyxFQUFFLENBQUMsQ0FBQyxLQUFLLENBQUMsQ0FBQyxDQUFDLENBQUMsQ0FBQztBQUNwRCxDQUFDO0FBRUQsTUFBTSxVQUFVLGVBQWUsQ0FBQyxHQUFlLEVBQUUsTUFBTSxHQUFHLENBQUM7SUFNekQsT0FBTyxDQUNMLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLEdBQUc7UUFDSCxTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUMxQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsQ0FBQztRQUMxQixHQUFHO1FBQ0gsU0FBUyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDMUIsU0FBUyxDQUFDLEdBQUcsQ0FBQyxNQUFNLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDMUIsR0FBRztRQUNILFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLFNBQVMsQ0FBQyxHQUFHLENBQUMsTUFBTSxHQUFHLENBQUMsQ0FBQyxDQUFDO1FBQzFCLEdBQUc7UUFDSCxTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQztRQUMzQixTQUFTLENBQUMsR0FBRyxDQUFDLE1BQU0sR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUM1QixDQUFDLFdBQVcsRUFBRSxDQUFDO0FBQ2xCLENBQUM7QUFFRCxTQUFTLFNBQVMsQ0FBQyxHQUFlLEVBQUUsTUFBTSxHQUFHLENBQUM7SUFDNUMsTUFBTSxJQUFJLEdBQUcsZUFBZSxDQUFDLEdBQUcsRUFBRSxNQUFNLENBQUMsQ0FBQztJQU8xQyxJQUFJLENBQUMsUUFBUSxDQUFDLElBQUksQ0FBQyxFQUFFLENBQUM7UUFDcEIsTUFBTSxTQUFTLENBQUMsNkJBQTZCLENBQUMsQ0FBQztJQUNqRCxDQUFDO0lBRUQsT0FBTyxJQUFJLENBQUM7QUFDZCxDQUFDO0FBRUQsZUFBZSxTQUFTLENBQUMifQ==","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n if (!getRandomValues) {\n if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n getRandomValues = crypto.getRandomValues.bind(crypto);\n }\n return getRandomValues(rnds8);\n}\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicm5nLWJyb3dzZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvcm5nLWJyb3dzZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBSUEsSUFBSSxlQUEwRCxDQUFDO0FBRS9ELE1BQU0sS0FBSyxHQUFHLElBQUksVUFBVSxDQUFDLEVBQUUsQ0FBQyxDQUFDO0FBRWpDLE1BQU0sQ0FBQyxPQUFPLFVBQVUsR0FBRztJQUV6QixJQUFJLENBQUMsZUFBZSxFQUFFLENBQUM7UUFDckIsSUFBSSxPQUFPLE1BQU0sS0FBSyxXQUFXLElBQUksQ0FBQyxNQUFNLENBQUMsZUFBZSxFQUFFLENBQUM7WUFDN0QsTUFBTSxJQUFJLEtBQUssQ0FDYiwwR0FBMEcsQ0FDM0csQ0FBQztRQUNKLENBQUM7UUFFRCxlQUFlLEdBQUcsTUFBTSxDQUFDLGVBQWUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7SUFDeEQsQ0FBQztJQUVELE9BQU8sZUFBZSxDQUFDLEtBQUssQ0FBQyxDQUFDO0FBQ2hDLENBQUMifQ==","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibmF0aXZlLWJyb3dzZXIuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvbmF0aXZlLWJyb3dzZXIudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsTUFBTSxVQUFVLEdBQ2QsT0FBTyxNQUFNLEtBQUssV0FBVyxJQUFJLE1BQU0sQ0FBQyxVQUFVLElBQUksTUFBTSxDQUFDLFVBQVUsQ0FBQyxJQUFJLENBQUMsTUFBTSxDQUFDLENBQUM7QUFFdkYsZUFBZSxFQUFFLFVBQVUsRUFBRSxDQUFDIn0=","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n options = options || {};\n const rnds = options.random || (options.rng || rng)();\n rnds[6] = (rnds[6] & 0x0f) | 0x40;\n rnds[8] = (rnds[8] & 0x3f) | 0x80;\n if (buf) {\n offset = offset || 0;\n for (let i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n return buf;\n }\n return unsafeStringify(rnds);\n}\nexport default v4;\n//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidjQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvdjQudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQ0EsT0FBTyxNQUFNLE1BQU0sYUFBYSxDQUFDO0FBQ2pDLE9BQU8sR0FBRyxNQUFNLFVBQVUsQ0FBQztBQUMzQixPQUFPLEVBQUUsZUFBZSxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFJakQsU0FBUyxFQUFFLENBQUMsT0FBeUIsRUFBRSxHQUFnQixFQUFFLE1BQWU7SUFDdEUsSUFBSSxNQUFNLENBQUMsVUFBVSxJQUFJLENBQUMsR0FBRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDMUMsT0FBTyxNQUFNLENBQUMsVUFBVSxFQUFFLENBQUM7SUFDN0IsQ0FBQztJQUVELE9BQU8sR0FBRyxPQUFPLElBQUksRUFBRSxDQUFDO0lBRXhCLE1BQU0sSUFBSSxHQUFHLE9BQU8sQ0FBQyxNQUFNLElBQUksQ0FBQyxPQUFPLENBQUMsR0FBRyxJQUFJLEdBQUcsQ0FBQyxFQUFFLENBQUM7SUFHdEQsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBQyxHQUFHLElBQUksQ0FBQyxHQUFHLElBQUksQ0FBQztJQUNsQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsQ0FBQyxJQUFJLENBQUMsQ0FBQyxDQUFDLEdBQUcsSUFBSSxDQUFDLEdBQUcsSUFBSSxDQUFDO0lBR2xDLElBQUksR0FBRyxFQUFFLENBQUM7UUFDUixNQUFNLEdBQUcsTUFBTSxJQUFJLENBQUMsQ0FBQztRQUVyQixLQUFLLElBQUksQ0FBQyxHQUFHLENBQUMsRUFBRSxDQUFDLEdBQUcsRUFBRSxFQUFFLEVBQUUsQ0FBQyxFQUFFLENBQUM7WUFDNUIsR0FBRyxDQUFDLE1BQU0sR0FBRyxDQUFDLENBQUMsR0FBRyxJQUFJLENBQUMsQ0FBQyxDQUFDLENBQUM7UUFDNUIsQ0FBQztRQUVELE9BQU8sR0FBRyxDQUFDO0lBQ2IsQ0FBQztJQUVELE9BQU8sZUFBZSxDQUFDLElBQUksQ0FBQyxDQUFDO0FBQy9CLENBQUM7QUFFRCxlQUFlLEVBQUUsQ0FBQyJ9"],"version":3}
1
+ {"file":"v4.js","mappings":"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","names":[],"sources":["../../node_modules/uuid/dist/esm-browser/stringify.js","../../node_modules/uuid/dist/esm-browser/rng.js","../../node_modules/uuid/dist/esm-browser/native.js","../../node_modules/uuid/dist/esm-browser/v4.js"],"sourcesContent":["import validate from './validate.js';\nconst byteToHex = [];\nfor (let i = 0; i < 256; ++i) {\n byteToHex.push((i + 0x100).toString(16).slice(1));\n}\nexport function unsafeStringify(arr, offset = 0) {\n return (byteToHex[arr[offset + 0]] +\n byteToHex[arr[offset + 1]] +\n byteToHex[arr[offset + 2]] +\n byteToHex[arr[offset + 3]] +\n '-' +\n byteToHex[arr[offset + 4]] +\n byteToHex[arr[offset + 5]] +\n '-' +\n byteToHex[arr[offset + 6]] +\n byteToHex[arr[offset + 7]] +\n '-' +\n byteToHex[arr[offset + 8]] +\n byteToHex[arr[offset + 9]] +\n '-' +\n byteToHex[arr[offset + 10]] +\n byteToHex[arr[offset + 11]] +\n byteToHex[arr[offset + 12]] +\n byteToHex[arr[offset + 13]] +\n byteToHex[arr[offset + 14]] +\n byteToHex[arr[offset + 15]]).toLowerCase();\n}\nfunction stringify(arr, offset = 0) {\n const uuid = unsafeStringify(arr, offset);\n if (!validate(uuid)) {\n throw TypeError('Stringified UUID is invalid');\n }\n return uuid;\n}\nexport default stringify;\n","let getRandomValues;\nconst rnds8 = new Uint8Array(16);\nexport default function rng() {\n if (!getRandomValues) {\n if (typeof crypto === 'undefined' || !crypto.getRandomValues) {\n throw new Error('crypto.getRandomValues() not supported. See https://github.com/uuidjs/uuid#getrandomvalues-not-supported');\n }\n getRandomValues = crypto.getRandomValues.bind(crypto);\n }\n return getRandomValues(rnds8);\n}\n","const randomUUID = typeof crypto !== 'undefined' && crypto.randomUUID && crypto.randomUUID.bind(crypto);\nexport default { randomUUID };\n","import native from './native.js';\nimport rng from './rng.js';\nimport { unsafeStringify } from './stringify.js';\nfunction v4(options, buf, offset) {\n if (native.randomUUID && !buf && !options) {\n return native.randomUUID();\n }\n options = options || {};\n const rnds = options.random || (options.rng || rng)();\n rnds[6] = (rnds[6] & 0x0f) | 0x40;\n rnds[8] = (rnds[8] & 0x3f) | 0x80;\n if (buf) {\n offset = offset || 0;\n for (let i = 0; i < 16; ++i) {\n buf[offset + i] = rnds[i];\n }\n return buf;\n }\n return unsafeStringify(rnds);\n}\nexport default v4;\n"],"version":3}
@@ -1,2 +1,2 @@
1
- import{p as e,b as o}from"./p-7fc1e494.js";export{s as setNonce}from"./p-7fc1e494.js";import{g as a}from"./p-e1255160.js";var t=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};t().then((async e=>{await a();return o(JSON.parse('[["p-38cc23e1",[[1,"dso-icon",{"icon":[1]}]]],["p-bc0a6bac",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-76dfbee3",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"label":[1],"labelStatus":[1,"label-status"],"hover":[32],"focusHandle":[64]}]]],["p-4cb8ef54",[[1,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-a3c7e119",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-52a2c0b3",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-636a2ad2",[[1,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-08121fee",[[1,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"removable":[4],"showBody":[32]}]]],["p-00838920",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-86cdbaf9",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-ea87d930",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-26fe4ae2",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32],"listItemBlockSize":[32],"listboxContainerMaxBlockSize":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-8bc5ab4d",[[1,"dso-project-item",{"label":[1]}]]],["p-3f21e21c",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]},null,{"useDropDownMenu":["setShowDropDown"]}]]],["p-eb579735",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-221c5d0b",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"role":[1],"returnFocus":[4,"return-focus"],"showCloseButton":[4,"show-close-button"],"ariaId":[32]}]]],["p-ef087d87",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-7dfc15c1",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-cdbb39ad",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-226833eb",[[1,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-c3e38404",[[2,"dso-date-picker-legacy",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["p-e665556c",[[1,"dso-document-card",{"href":[513],"active":[516]}]]],["p-9424e171",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["p-74e0e63e",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]},null,{"manual":["watchManualCallback"]}]]],["p-e42e0cb4",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-d4317bc8",[[1,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-3e9068cd",[[1,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-5c047dfd",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]},null,{"variant":["updateVariant"],"reverseAlign":["updateReverseAlign"]}]]],["p-f3717d91",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-99995b02",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["p-75c65097",[[1,"dso-card-container",{"mode":[513]}]]],["p-a64e9cd5",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["p-5e6704bb",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-b032496d",[[1,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-b2f92815",[[1,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-921fe0b7",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["p-c05d8f55",[[1,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-cb0a7103",[[1,"dso-tabs"]]],["p-9df0ed5f",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterpanelOpen":["filterpanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["p-47ae7799",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["p-9d8395bc",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-de63f553",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},[[8,"click","onClick"],[8,"keydown","keyDownListener"]],{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["p-83f89965",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-b0a3dfcb",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["p-278837c5",[[1,"dso-label",{"compact":[4],"removable":[4],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["p-92a7d8b0",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[1,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516]}],[1,"dso-panel"],[1,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}],[1,"dso-badge",{"status":[1]}]]],["p-abe7047e",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[516,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513],"mark":[16],"recursiveToggle":[8,"recursive-toggle"]}],[1,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-40810e10",[[1,"dso-attachments-counter",{"count":[2]}],[1,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-5a832300",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[4]}]]],["p-fb5e4dc9",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-2d2eae19",[[1,"dso-renvooi",{"value":[1]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]]'),e)}));
1
+ import{p as e,b as o}from"./p-7fc1e494.js";export{s as setNonce}from"./p-7fc1e494.js";import{g as a}from"./p-e1255160.js";var t=()=>{const o=import.meta.url;const a={};if(o!==""){a.resourcesUrl=new URL(".",o).href}return e(a)};t().then((async e=>{await a();return o(JSON.parse('[["p-38cc23e1",[[1,"dso-icon",{"icon":[1]}]]],["p-bc0a6bac",[[2,"dsot-document-component-demo",{"showCanvas":[516,"show-canvas"],"jsonFile":[1,"json-file"],"openDefault":[4,"open-default"],"response":[32],"document":[32],"openOrClosed":[32],"openedAnnotation":[32],"filtered":[32],"notApplicable":[32],"activeAnnotationSelectables":[32]},null,{"jsonFile":["jsonFileWatcher"],"openDefault":["openDefaultWatcher"]}]]],["p-76dfbee3",[[1,"dso-accordion-section",{"handleTitle":[1,"handle-title"],"heading":[1],"handleUrl":[1,"handle-url"],"status":[1],"attachmentCount":[2,"attachment-count"],"icon":[1],"statusDescription":[1,"status-description"],"open":[516],"hasNestedAccordion":[516,"has-nested-accordion"],"label":[1],"labelStatus":[1,"label-status"],"hover":[32],"focusHandle":[64]}]]],["p-4cb8ef54",[[1,"dso-annotation-activiteit",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"regelKwalificatie":[1,"regel-kwalificatie"],"locatieNoemers":[16],"regelKwalificatieVoorzetsel":[1,"regel-kwalificatie-voorzetsel"]}]]],["p-a3c7e119",[[1,"dso-annotation-gebiedsaanwijzing",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1]}]]],["p-52a2c0b3",[[1,"dso-annotation-omgevingsnormwaarde",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"naam":[1],"toelichting":[1],"waardes":[16],"eenheid":[1]}]]],["p-21f133e4",[[1,"dso-advanced-select",{"options":[16],"active":[16],"activeHint":[1,"active-hint"],"open":[32]},[[8,"keydown","keyDownListener"]]]]],["p-08121fee",[[1,"dso-legend-item",{"disabled":[516],"disabledMessage":[1,"disabled-message"],"removable":[4],"showBody":[32]}]]],["p-c2f086f2",[[1,"dso-map-base-layers",{"group":[1],"baseLayers":[16]}]]],["p-6789163b",[[1,"dso-map-overlays",{"group":[1],"overlays":[16]}]]],["p-ea87d930",[[1,"dso-annotation-kaart",{"wijzigactie":[513],"naam":[1],"href":[513]}]]],["p-d3857319",[[6,"dso-autosuggest",{"suggestions":[16],"loading":[4],"loadingLabel":[1,"loading-label"],"loadingDelayed":[2,"loading-delayed"],"notFoundLabel":[1,"not-found-label"],"suggestOnFocus":[4,"suggest-on-focus"],"mark":[16],"showSuggestions":[32],"selectedSuggestion":[32],"notFound":[32],"showLoading":[32],"listItemBlockSize":[32],"listboxContainerMaxBlockSize":[32]},[[4,"click","onDocumentClick"]],{"suggestions":["suggestionsWatcher"]}]]],["p-8bc5ab4d",[[1,"dso-project-item",{"label":[1]}]]],["p-fbfe9a96",[[6,"dso-header",{"mainMenu":[16],"useDropDownMenu":[1,"use-drop-down-menu"],"authStatus":[1,"auth-status"],"loginUrl":[1,"login-url"],"logoutUrl":[1,"logout-url"],"showHelp":[4,"show-help"],"helpUrl":[1,"help-url"],"userProfileName":[1,"user-profile-name"],"userProfileUrl":[1,"user-profile-url"],"userHomeUrl":[1,"user-home-url"],"userHomeActive":[4,"user-home-active"],"showDropDown":[32],"overflowMenuItems":[32],"dropdownOptionsOffset":[32]},null,{"useDropDownMenu":["setShowDropDown"]}]]],["p-7b3f08da",[[1,"dso-map-controls",{"open":[1540],"disableZoom":[1,"disable-zoom"],"hideContent":[32],"toggleVisibility":[64]},null,{"open":["watchOpen"]}]]],["p-a2db4965",[[1,"dso-modal",{"fullscreen":[516],"modalTitle":[1,"modal-title"],"dialogRole":[1,"dialog-role"],"returnFocus":[4,"return-focus"],"showCloseButton":[4,"show-close-button"],"ariaId":[32]}]]],["p-ef087d87",[[1,"dso-pagination",{"totalPages":[2,"total-pages"],"currentPage":[2,"current-page"],"formatHref":[16],"availablePositions":[32]},[[0,"dsoSizeChange","sizeChangeHandler"]]]]],["p-7dfc15c1",[[1,"dso-tree-view",{"collection":[16],"focusItem":[64]}]]],["p-cdbb39ad",[[1,"dso-action-list-item",{"step":[2],"itemTitle":[1,"item-title"],"flowLine":[4,"flow-line"],"warning":[4],"divider":[4]}]]],["p-226833eb",[[1,"dso-card",{"href":[513],"mode":[513],"active":[516]}]]],["p-c3e38404",[[2,"dso-date-picker-legacy",{"name":[1],"identifier":[1],"disabled":[516],"role":[1],"direction":[1],"required":[4],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[1537],"min":[1],"max":[1],"activeFocus":[32],"focusedDay":[32],"open":[32],"visible":[32],"setFocus":[64],"show":[64],"hide":[64]},[[6,"click","handleDocumentClick"]]]]],["p-e665556c",[[1,"dso-document-card",{"href":[513],"active":[516]}]]],["p-1d7b22a2",[[1,"dso-helpcenter-panel",{"label":[1],"url":[1],"visibility":[32],"isOpen":[32],"slideState":[32],"loadIframe":[32]},[[8,"keydown","keyDownListener"]],{"url":["watchUrl"],"isOpen":["watchIsOpen"]}]]],["p-4831099c",[[1,"dso-list-button",{"label":[1],"sublabel":[1],"count":[2],"min":[8],"max":[8],"checked":[516],"disabled":[516],"subcontentPrefix":[1,"subcontent-prefix"],"manual":[4],"manualInputWrapperElement":[32],"manualCount":[32]},null,{"manual":["watchManualCallback"]}]]],["p-e42e0cb4",[[1,"dso-mark-bar",{"value":[1],"label":[1],"current":[2],"totalCount":[2,"total-count"],"dsoFocus":[64]}]]],["p-d4317bc8",[[1,"dso-plekinfo-card",{"wijzigactie":[513],"href":[513],"targetBlank":[4,"target-blank"],"active":[516]}]]],["p-3e9068cd",[[1,"dso-skiplink",{"to":[513],"label":[513]}]]],["p-5c047dfd",[[1,"dso-accordion",{"variant":[513],"reverseAlign":[516,"reverse-align"],"_getState":[64]},null,{"variant":["updateVariant"],"reverseAlign":["updateReverseAlign"]}]]],["p-f3717d91",[[1,"dso-action-list",{"listTitle":[1,"list-title"]}]]],["p-99995b02",[[1,"dso-banner",{"status":[513],"compact":[4],"noIcon":[4,"no-icon"]}]]],["p-75c65097",[[1,"dso-card-container",{"mode":[513]}]]],["p-a64e9cd5",[[2,"dso-date-picker",{"name":[1],"identifier":[1],"disabled":[516],"required":[516],"invalid":[516],"describedBy":[1,"described-by"],"dsoAutofocus":[4,"dso-autofocus"],"value":[513],"min":[1],"max":[1]}]]],["p-5e6704bb",[[1,"dso-highlight-box",{"yellow":[516],"border":[516],"white":[516],"dropShadow":[516,"drop-shadow"],"step":[514]}]]],["p-b032496d",[[1,"dso-input-range",{"min":[2],"max":[2],"value":[2],"step":[2],"label":[1],"unit":[1],"description":[1]}]]],["p-b2f92815",[[1,"dso-logo",{"name":[513],"logoUrl":[513,"logo-url"],"label":[513],"labelUrl":[513,"label-url"],"ribbon":[513]}]]],["p-921fe0b7",[[1,"dso-progress-bar",{"progress":[2],"min":[2],"max":[2]}]]],["p-c05d8f55",[[1,"dso-tab",{"active":[516],"disabled":[516],"href":[1],"_dsoFocus":[64]}]]],["p-cb0a7103",[[1,"dso-tabs"]]],["p-9df0ed5f",[[1,"dso-viewer-grid",{"mode":[513],"filterpanelOpen":[516,"filterpanel-open"],"overlayOpen":[516,"overlay-open"],"documentPanelOpen":[516,"document-panel-open"],"mainSize":[513,"main-size"],"activeTab":[1,"active-tab"],"documentPanelSize":[513,"document-panel-size"],"mainPanelExpanded":[4,"main-panel-expanded"],"mainPanelHidden":[4,"main-panel-hidden"],"tabView":[32],"_checkMainPanelVisibility":[64]},null,{"documentPanelOpen":["documentPanelOpenWatcher"],"filterpanelOpen":["filterpanelOpenWatcher"],"overlayOpen":["overlayOpenWatcher"]}]]],["p-47ae7799",[[1,"dso-info-button",{"active":[1540],"secondary":[4],"label":[1],"hover":[32],"setFocus":[64]}]]],["p-9d8395bc",[[1,"dso-toggletip",{"label":[1],"position":[1],"small":[4],"secondary":[4],"active":[32]}]]],["p-de63f553",[[1,"dso-dropdown-menu",{"open":[1540],"dropdownAlign":[1,"dropdown-align"],"dropdownOptionsOffset":[2,"dropdown-options-offset"],"checkable":[4],"boundary":[1],"placement":[1],"strategy":[1]},[[8,"click","onClick"],[8,"keydown","keyDownListener"]],{"placement":["watchPosition"],"dropdownAlign":["watchPosition"],"dropdownOptionsOffset":["watchOptionsOffset"],"strategy":["watchStrategy"]}]]],["p-83f89965",[[1,"dso-scrollable",{"scrollPosition":[32],"_setScrollState":[64]}]]],["p-d88ebb12",[[6,"dso-selectable",{"type":[1],"identifier":[1],"name":[1],"value":[1],"invalid":[4],"describedById":[1,"described-by-id"],"labelledById":[1,"labelled-by-id"],"disabled":[4],"required":[4],"checked":[516],"indeterminate":[4],"infoFixed":[4,"info-fixed"],"infoActive":[32],"keyboardFocus":[32],"toggleInfo":[64]},null,{"indeterminate":["setIndeterminate"]}],[1,"dso-info",{"fixed":[516],"active":[516]}]]],["p-7d47fedb",[[1,"dso-label",{"compact":[4],"removable":[516],"status":[1],"truncate":[4],"removeHover":[32],"removeFocus":[32],"textHover":[32],"textFocus":[32],"isTruncated":[32],"labelText":[32],"_truncateLabel":[64]},[[4,"keydown","keyDownListener"]],{"removable":["watchRemovable"],"truncate":["watchTruncate"]}],[1,"dso-tooltip",{"descriptive":[516],"position":[1],"strategy":[1],"noArrow":[4,"no-arrow"],"stateless":[4],"small":[4],"active":[1540],"hidden":[32],"activate":[64],"deactivate":[64]},null,{"position":["watchPosition"],"strategy":["watchStrategy"],"active":["watchActive"]}]]],["p-e05b8f92",[[1,"dso-ozon-content",{"content":[1],"inline":[516],"mark":[16],"state":[32]},null,{"content":["contentWatcher"]}],[1,"dso-alert",{"status":[513],"roleAlert":[4,"role-alert"],"compact":[516]}],[1,"dso-panel"],[1,"dso-image-overlay",{"wijzigactie":[1],"active":[32],"zoomable":[32]},[[2,"load","loadListener"]]],[1,"dso-table",{"noModal":[516,"no-modal"],"isResponsive":[516,"is-responsive"],"modalActive":[32],"placeholderHeight":[32]}],[1,"dso-badge",{"status":[1]}]]],["p-abe7047e",[[1,"dso-document-component",{"heading":[1],"label":[1],"nummer":[1],"opschrift":[1],"inhoud":[1],"open":[516],"filtered":[516],"notApplicable":[516,"not-applicable"],"genesteOntwerpInformatie":[516,"geneste-ontwerp-informatie"],"bevatOntwerpInformatie":[516,"bevat-ontwerp-informatie"],"annotated":[516],"gereserveerd":[4],"vervallen":[4],"openAnnotation":[516,"open-annotation"],"alternativeTitle":[1,"alternative-title"],"type":[513],"wijzigactie":[513],"mark":[16],"recursiveToggle":[8,"recursive-toggle"]}],[1,"dso-annotation-locatie",{"wijzigactie":[513],"active":[516],"gewijzigdeLocatie":[516,"gewijzigde-locatie"],"locatieNoemer":[1,"locatie-noemer"]}]]],["p-40810e10",[[1,"dso-attachments-counter",{"count":[2]}],[1,"dso-expandable",{"open":[516],"enableAnimation":[516,"enable-animation"],"minimumHeight":[2,"minimum-height"],"isClosed":[32]},[[0,"transitionstart","transitionstartHandler"],[0,"transitionend","transitionendHandler"]],{"open":["toggleOpen"]}]]],["p-826609e4",[[1,"dso-progress-indicator",{"label":[1],"size":[513],"block":[516]}]]],["p-fb5e4dc9",[[1,"dso-responsive-element",{"sizeAlias":[32],"sizeWidth":[32],"getSize":[64]}]]],["p-2d2eae19",[[1,"dso-renvooi",{"value":[1]}],[4,"dso-slide-toggle",{"checked":[4],"disabled":[4],"accessibleLabel":[1,"accessible-label"],"labelledbyId":[1,"labelledby-id"],"identifier":[1],"hasVisibleLabel":[32]}]]]]'),e)}));
2
2
  //# sourceMappingURL=dso-toolkit.esm.js.map
@@ -1 +1 @@
1
- {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,2rUAAuCJ,EAAA","ignoreList":[]}
1
+ {"version":3,"names":["patchBrowser","importMeta","url","opts","resourcesUrl","URL","href","promiseResolve","then","async","options","globalScripts","bootstrapLazy","JSON","parse"],"sources":["../../node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.22.2 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, doc, H, promiseResolve } from \"@stencil/core\";\nvar patchBrowser = () => {\n if (BUILD.isDev && !BUILD.isTesting) {\n consoleDevInfo(\"Running in development mode.\");\n }\n if (BUILD.cloneNodeFix) {\n patchCloneNodeFix(H.prototype);\n }\n const scriptElm = BUILD.scriptDataOpts ? Array.from(doc.querySelectorAll(\"script\")).find(\n (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n ) : null;\n const importMeta = import.meta.url;\n const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n if (importMeta !== \"\") {\n opts.resourcesUrl = new URL(\".\", importMeta).href;\n }\n return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n HTMLElementPrototype.cloneNode = function(deep) {\n if (this.nodeName === \"TEMPLATE\") {\n return nativeCloneNodeFn.call(this, deep);\n }\n const clonedNode = nativeCloneNodeFn.call(this, false);\n const srcChildNodes = this.childNodes;\n if (deep) {\n for (let i = 0; i < srcChildNodes.length; i++) {\n if (srcChildNodes[i].nodeType !== 2) {\n clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n }\n }\n }\n return clonedNode;\n };\n};\nexport {\n patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n await globalScripts();\n return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"mappings":"0HAOA,IAAIA,EAAe,KAUjB,MAAMC,cAAyBC,IAC/B,MAAMC,EAAqE,GAC3E,GAAIF,IAAe,GAAI,CACrBE,EAAKC,aAAe,IAAIC,IAAI,IAAKJ,GAAYK,IACjD,CACE,OAAOC,EAAeJ,EAAK,EClB7BH,IAAeQ,MAAKC,MAAOC,UACnBC,IACN,OAAOC,EAAcC,KAAAC,MAAA,mtUAAuCJ,EAAA","ignoreList":[]}
@@ -1,2 +1,2 @@
1
- import{r as n,h as e,F as o}from"./p-7fc1e494.js";import{c as t}from"./p-f0538f4a.js";import"./p-1dbcaeef.js";const i=":host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.wrapper {\n block-size: 100%;\n inset-inline-start: 0;\n position: fixed;\n inset-block-start: 0;\n visibility: hidden;\n inline-size: 100%;\n}\n.wrapper.visible {\n visibility: visible;\n}\n\n.dimscreen {\n background-color: #000;\n block-size: 100%;\n opacity: 0.4;\n inline-size: 100%;\n}\n\n.open-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}\n.open-button:focus, .open-button:focus-visible {\n outline-offset: 2px;\n}\n.open-button:active {\n outline: 0;\n}\n.open-button {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open-button {\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}\n.open-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open-button:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.open-button.dso-small {\n line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open-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: %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.open-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: %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.open-button {\n border: 0;\n inset-block-end: 16px;\n font-family: Asap, sans-serif;\n position: fixed;\n inset-inline-end: 16px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:hover {\n cursor: pointer;\n}\n.open-button.open {\n display: none;\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}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close-button {\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}\n.close-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.close-button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close-button.dso-small {\n line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\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: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.close-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.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\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: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.close-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.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.close-button {\n border-inline-end: 0;\n border-block-start: 0;\n border-radius: 0 0 0 8px;\n block-size: 40px;\n min-inline-size: 40px;\n padding: 0;\n position: fixed;\n inset-inline-end: 0;\n inline-size: 40px;\n inset-block-start: 0;\n}\n.close-button dso-icon {\n margin-inline-start: 0;\n margin-inline-end: 0;\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n cursor: pointer;\n}\n.close-button.close {\n display: none;\n}\n\n.iframe-container {\n background-color: #fff;\n border: 0;\n border-inline-start: 1px solid #ccc;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n block-size: 100%;\n position: absolute;\n inset-block-start: 0;\n transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n .iframe-container {\n inset-inline-end: -320px;\n inline-size: 320px;\n }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n .iframe-container {\n inset-inline-end: -480px;\n inline-size: 480px;\n }\n}\n@media screen and (min-width: 768px) {\n .iframe-container {\n inset-inline-end: -640px;\n inline-size: 640px;\n }\n}\n.iframe-container.open {\n inset-inline-end: 0;\n}\n\niframe {\n border: 0;\n block-size: 100%;\n inline-size: 100%;\n}";const s=i;const r=500;const a=class{constructor(e){n(this,e);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),r)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),r)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const e=document.querySelector("body");if(n==="open"){e===null||e===void 0?void 0:e.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{e===null||e===void 0?void 0:e.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,e;if(!this.panelWrapperElement){return}this.trap=t(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(e=this.closeButtonElement)!==null&&e!==void 0?e:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return e(o,null,e("button",{key:"e1d37d4e3ebaf06b7a9c2d0aaed9298502d9754e",type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},e("dso-icon",{key:"ba6afadc90c7f5f141416ce5d9930705e11e1e6d",icon:"help"}),e("span",{key:"a7ac2634e19c2399d930cf65d71b922de37764b9"},this.label)),e("div",{key:"752eef938f8b873229c972aa7cf2c384abb44527",id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},e("div",{key:"303a49bd479cf7df430fcbb109bcd71bacbb4997",class:"dimscreen",onClick:this.closeClick}),e("div",{key:"888e1c17800a263743d485ceae498019cb48e5d6",class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?e("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):e("div",null)),e("button",{key:"845463ff6598b4465b5dfd70f2df1c58a2fcf9bf",type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},e("dso-icon",{key:"4275abd1d65644a8ec6e8dff7d8d8a7faaa708e5",icon:"times"}),e("span",{key:"2b3d764a46b5a4a02862b9f1523bd9b055879581",class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};a.style=s;export{a as dso_helpcenter_panel};
2
- //# sourceMappingURL=p-9424e171.entry.js.map
1
+ import{r as n,h as e,F as o}from"./p-7fc1e494.js";import{c as t}from"./p-5f4e8468.js";import"./p-1dbcaeef.js";const i=":host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.wrapper {\n block-size: 100%;\n inset-inline-start: 0;\n position: fixed;\n inset-block-start: 0;\n visibility: hidden;\n inline-size: 100%;\n}\n.wrapper.visible {\n visibility: visible;\n}\n\n.dimscreen {\n background-color: #000;\n block-size: 100%;\n opacity: 0.4;\n inline-size: 100%;\n}\n\n.open-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}\n.open-button:focus, .open-button:focus-visible {\n outline-offset: 2px;\n}\n.open-button:active {\n outline: 0;\n}\n.open-button {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open-button {\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}\n.open-button:hover {\n background-color: #275937;\n border-color: #275937;\n color: #fff;\n}\n.open-button:active {\n background-color: #173521;\n border-color: #173521;\n color: #fff;\n}\n.open-button[disabled], .open-button[disabled]:hover {\n background-color: #afcf9d;\n border-color: #afcf9d;\n color: #fff;\n}\n.open-button.dso-small {\n line-height: 1rem;\n}\n.open-button.dso-small dso-icon,\n.open-button.dso-small svg.di, .open-button.dso-small.extern::after, .open-button.dso-small.download::after, .open-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.open-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.open-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.open-button dso-icon,\n.open-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.open-button span + dso-icon,\n.open-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.open-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: %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.open-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: %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.open-button {\n border: 0;\n inset-block-end: 16px;\n font-family: Asap, sans-serif;\n position: fixed;\n inset-inline-end: 16px;\n box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);\n}\n.open-button:hover {\n cursor: pointer;\n}\n.open-button.open {\n display: none;\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}\n.close-button:focus, .close-button:focus-visible {\n outline-offset: 2px;\n}\n.close-button:active {\n outline: 0;\n}\n.close-button {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\n}\n.close-button {\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}\n.close-button:hover {\n background-color: #d7e7ce;\n border-color: #39870c;\n color: #39870c;\n}\n.close-button:active {\n background-color: #39870c;\n border-color: #39870c;\n color: #fff;\n}\n.close-button[disabled], .close-button[disabled]:hover {\n background-color: #fff;\n border-color: #afcf9d;\n color: #afcf9d;\n}\n.close-button.dso-small {\n line-height: 1rem;\n}\n.close-button.dso-small dso-icon,\n.close-button.dso-small svg.di, .close-button.dso-small.extern::after, .close-button.dso-small.download::after, .close-button.dso-small.dso-spinner::before {\n margin-block-end: -4px;\n margin-block-start: -4px;\n}\n.close-button.dso-small.dso-spinner-left::before {\n block-size: 16px;\n inline-size: 16px;\n}\n.close-button.dso-small.dso-spinner-right::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.close-button dso-icon,\n.close-button svg.di {\n margin-inline-start: -8px;\n margin-inline-end: 8px;\n}\n.close-button span + dso-icon,\n.close-button span + svg.di {\n margin-inline-start: 8px;\n margin-inline-end: -8px;\n}\n.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {\n background-color: #fff;\n border-color: #39870c;\n color: #39870c;\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: top;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.close-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.close-button.dso-spinner-left:not([disabled]).dso-small:hover::before {\n block-size: 16px;\n inline-size: 16px;\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: top;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.close-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.close-button.dso-spinner-right:not([disabled]).dso-small:hover::after {\n block-size: 16px;\n inline-size: 16px;\n}\n.close-button {\n border-inline-end: 0;\n border-block-start: 0;\n border-radius: 0 0 0 8px;\n block-size: 40px;\n min-inline-size: 40px;\n padding: 0;\n position: fixed;\n inset-inline-end: 0;\n inline-size: 40px;\n inset-block-start: 0;\n}\n.close-button dso-icon {\n margin-inline-start: 0;\n margin-inline-end: 0;\n position: absolute;\n inset-inline-start: 50%;\n inset-block-start: 50%;\n transform: translate(-50%, -50%);\n}\n.close-button:hover, .close-button:active, .close-button:focus {\n cursor: pointer;\n}\n.close-button.close {\n display: none;\n}\n\n.iframe-container {\n background-color: #fff;\n border: 0;\n border-inline-start: 1px solid #ccc;\n box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4);\n block-size: 100%;\n position: absolute;\n inset-block-start: 0;\n transition: inset-inline-end 0.5s;\n}\n@media screen and (max-width: 480px) {\n .iframe-container {\n inset-inline-end: -320px;\n inline-size: 320px;\n }\n}\n@media screen and (min-width: 481px) and (max-width: 767px) {\n .iframe-container {\n inset-inline-end: -480px;\n inline-size: 480px;\n }\n}\n@media screen and (min-width: 768px) {\n .iframe-container {\n inset-inline-end: -640px;\n inline-size: 640px;\n }\n}\n.iframe-container.open {\n inset-inline-end: 0;\n}\n\niframe {\n border: 0;\n block-size: 100%;\n inline-size: 100%;\n}";const s=i;const r=500;const a=class{constructor(e){n(this,e);this.iframeLoaded=false;this.openClick=()=>{this.visibility="visible";this.slideState="open";setTimeout((()=>{this.isOpen="open"}));if(!this.loadIframe){setTimeout((()=>{this.loadIframe=true}),r)}};this.closeClick=()=>{this.isOpen="close";this.slideState="close";setTimeout((()=>{this.visibility="hidden"}),r)};this.label="Hulp nodig";this.url=undefined;this.visibility="hidden";this.isOpen="close";this.slideState="close";this.loadIframe=false}watchUrl(n){if(this.isOpen==="open"&&this.iframeUrl!==n){this.iframeUrl=n}}watchIsOpen(n){const e=document.querySelector("body");if(n==="open"){e===null||e===void 0?void 0:e.style.setProperty("overflow","hidden");if(this.iframeUrl!==this.url){this.iframeUrl=this.url}}else{e===null||e===void 0?void 0:e.style.removeProperty("overflow")}}keyDownListener(n){if(n.key==="Escape"&&this.isOpen==="open"){this.closeClick()}}createTrap(){var n,e;if(!this.panelWrapperElement){return}this.trap=t(this.panelWrapperElement,{allowOutsideClick:true,tabbableOptions:{getShadowRoot:true},setReturnFocus:(n=this.openButtonElement)!==null&&n!==void 0?n:false,initialFocus:(e=this.closeButtonElement)!==null&&e!==void 0?e:false}).activate()}componentDidRender(){var n;if(this.isOpen==="open"&&this.iframeLoaded&&!this.trap){this.createTrap()}else if(this.isOpen==="close"&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}}render(){return e(o,null,e("button",{key:"e1d37d4e3ebaf06b7a9c2d0aaed9298502d9754e",type:"button",onClick:this.openClick,class:`open-button ${this.isOpen}`,"aria-expanded":this.isOpen==="open"?"true":"false","aria-haspopup":"dialog","aria-controls":"dso-panel-wrapper",ref:n=>this.openButtonElement=n},e("dso-icon",{key:"ba6afadc90c7f5f141416ce5d9930705e11e1e6d",icon:"help"}),e("span",{key:"a7ac2634e19c2399d930cf65d71b922de37764b9"},this.label)),e("div",{key:"752eef938f8b873229c972aa7cf2c384abb44527",id:"dso-panel-wrapper",class:`wrapper ${this.visibility}`,"aria-label":"helpcentrum",role:"dialog",ref:n=>this.panelWrapperElement=n},e("div",{key:"303a49bd479cf7df430fcbb109bcd71bacbb4997",class:"dimscreen",onClick:this.closeClick}),e("div",{key:"888e1c17800a263743d485ceae498019cb48e5d6",class:`iframe-container ${this.slideState}`,"aria-live":"polite"},this.loadIframe?e("iframe",{src:this.iframeUrl,tabindex:"0",onLoad:()=>{this.createTrap();this.iframeLoaded=true}}):e("div",null)),e("button",{key:"845463ff6598b4465b5dfd70f2df1c58a2fcf9bf",type:"button",class:`close-button ${this.isOpen}`,onClick:this.closeClick,"aria-expanded":this.isOpen==="open"?"true":"false","aria-controls":"dso-panel-wrapper",ref:n=>this.closeButtonElement=n},e("dso-icon",{key:"4275abd1d65644a8ec6e8dff7d8d8a7faaa708e5",icon:"times"}),e("span",{key:"2b3d764a46b5a4a02862b9f1523bd9b055879581",class:"sr-only"},"sluiten"))))}static get watchers(){return{url:["watchUrl"],isOpen:["watchIsOpen"]}}};a.style=s;export{a as dso_helpcenter_panel};
2
+ //# sourceMappingURL=p-1d7b22a2.entry.js.map
@@ -1,2 +1,2 @@
1
- import{r as o,c as i,h as e,F as t,a as n}from"./p-7fc1e494.js";import{c as r}from"./p-8a1a6e56.js";import{c as a}from"./p-f0538f4a.js";import{t as s}from"./p-1dbcaeef.js";import{i as l}from"./p-2d694112.js";const c=':host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:"";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%}.group .option-label::before{background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-danger .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}';const d=c;const p=class{constructor(e){o(this,e);this.dsoChange=i(this,"dsoChange",3);this.dsoRedirect=i(this,"dsoRedirect",3);this.toggleOpen=()=>{this.open=!this.open};this.handleOptionClick=(o,i)=>{this.dsoChange.emit({originalEvent:o,option:i});this.open=false};this.handleRedirectClick=(o,i)=>{this.dsoRedirect.emit({originalEvent:o,isModifiedEvent:l(o),redirect:i});this.open=false};this.options=[];this.active=undefined;this.activeHint=undefined;this.open=false}keyDownListener(o){if(this.open&&o.key==="ArrowUp"){o.preventDefault();this.handleTab(-1)}else if(this.open&&o.key==="ArrowDown"){o.preventDefault();this.handleTab(1)}}componentDidRender(){if(this.open&&!this.trap){this.createTrap()}else if(!this.open&&this.trap){this.removeTrap()}}createTrap(){this.trap=a(this.host,{clickOutsideDeactivates:true,escapeDeactivates:true,setReturnFocus:this.toggleButtonElementRef,tabbableOptions:{getShadowRoot:true},onDeactivate:()=>{this.open=false}}).activate()}removeTrap(){var o;(o=this.trap)===null||o===void 0?void 0:o.deactivate();delete this.trap}handleTab(o){var i;const e=this.host.isConnected?s(this.host,{getShadowRoot:true}):[];const t=e.findIndex((o=>{var i;return o===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)}));let n=t+o;if(n>=e.length){n=0}else if(n<0){n=e.length-1}(i=e[n])===null||i===void 0?void 0:i.focus()}render(){var o,i;return e(t,null,e("button",{key:"443309104a25a8fabd949377c74383027450f404","aria-expanded":this.open.toString(),class:r(["active-option",{open:this.open}]),type:"button",onClick:this.toggleOpen,ref:o=>this.toggleButtonElementRef=o},e(u,{key:"e0f34941cabe1232ecf224d35f951f2fcb7affc7",active:this.active,options:this.options}),e("span",{key:"b1d4dfadfb02c8beaa6e8553be863abf6fa50c4f",class:"active-option-label"},(i=(o=this.active)===null||o===void 0?void 0:o.label)!==null&&i!==void 0?i:"Selecteer een optie"),e("span",{key:"29dc80cc20ebc9393119bd2e0251420099d8ac88",class:"active-option-aside"},this.options.some((o=>"summaryCounter"in o&&(o===null||o===void 0?void 0:o.summaryCounter)))&&e("span",{key:"08a59c09ec06900c761e44ce223c317414e401bf",class:"badges"},this.options.filter((o=>"options"in o&&"summaryCounter"in o&&!!(o===null||o===void 0?void 0:o.summaryCounter))).map((o=>{var i;return e("dso-badge",{status:(i=o.variant)!==null&&i!==void 0?i:"outline"},o.options.length)}))),e("dso-icon",{key:"06549ae93243ab2a9b0a36e397ef0808e90973f5",icon:"caret-down"}))),this.open&&e("div",{key:"9f7e0cb989feb1167d8b0bce0f2c3a9c371811b8",class:"groups-container"},e("ul",{key:"bd98ccdbe135d9145f8d1c41c3bf362030e37e26",class:"groups"},this.options.map((o=>"options"in o&&e("li",{class:r(["group",{[`group-${o.variant}`]:!!o.variant}])},e("p",{class:"group-label"},o.label),e("ul",{class:"options"},o.options.map((o=>e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick}))))),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||"placeholder"in o&&e("li",{class:"group"},e("p",{class:"group-label"},o.label),e("p",{class:"placeholder"},o.placeholder),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick})))))))}get host(){return n(this)}};const b=({option:o,active:i,activeHint:t,callback:n})=>e("button",{class:r(["option",{"option-active":i===o}]),type:"button",onClick:i=>n(i,o)},e("span",{class:"option-label"},o.label),!!t&&i===o&&e("span",{class:"option-hint"},"(",t,")"));const f=({redirect:o,callback:i})=>e("a",{class:"group-link",href:o.href,onClick:e=>i(e,o)},o.label,e("dso-icon",{icon:"chevron-right"}));const u=({active:o,options:i})=>{const t=i.find((i=>"options"in i&&!!i.options.find((i=>i===o))&&!!i.activeLabel));return t?e("dso-label",{compact:true,status:t.variant},t.activeLabel):undefined};p.style=d;export{p as dso_advanced_select};
2
- //# sourceMappingURL=p-636a2ad2.entry.js.map
1
+ import{r as o,c as i,h as e,F as t,a as n}from"./p-7fc1e494.js";import{c as r}from"./p-8a1a6e56.js";import{c as a}from"./p-5f4e8468.js";import{t as s}from"./p-1dbcaeef.js";import{i as l}from"./p-2d694112.js";const c=':host{display:block}*,*::after,*::before{box-sizing:border-box}.active-option{display:flex;inline-size:100%;justify-content:flex-start;align-items:center;padding:0;border:1px solid #275937;border-radius:4px;cursor:pointer;background-color:#fff;line-height:inherit;font-family:inherit;font-size:inherit}.active-option.open{border-radius:4px 4px 0 0}.active-option dso-icon{color:#275937}.active-option dso-label{margin-inline-start:8px}.active-option-label{padding-block:4px;padding-inline:16px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.active-option-aside{display:flex;align-items:center;gap:8px;padding-block:0;padding-inline:8px;margin-inline-start:auto}.badges{display:flex;justify-content:space-between;align-items:center;gap:4px}.groups-container{position:relative}.groups{position:absolute;inset-block-start:-1px;inset-inline-start:0;inline-size:100%;max-block-size:500px;margin:0;padding:0;overflow-y:auto;background-color:#fff;border:1px solid #275937;border-radius:0 0 4px 4px}.groups li::marker{display:none}.group{border-block-end:1px solid #ccc}.group:last-child{border-block-end:none}.group .option{padding-inline-start:37px}.group .option-label::before{content:"";position:absolute;display:block;block-size:10px;inline-size:10px;inset-block:4px auto;inset-inline:-20px auto;border-radius:50%}.group .option-label::before{background-color:#ccc;border-color:#ccc;color:#191919}.group-label{margin:0;padding-block:4px;padding-inline:16px;color:#666;font-size:14px;font-weight:500;border-block-end:1px solid #ccc}.group-link{display:block;padding-block:8px;padding-inline:4px;text-align:end;color:#000;text-decoration:none}.group-link:hover{text-decoration:underline}.group-link dso-icon{color:#39870c}.group-info .option-label::before{background-color:#6ca4d9;border-color:#6ca4d9;color:#191919}.group-primary .option-label::before{background-color:#275937;border-color:#275937;color:#fff}.group-success .option-label::before{background-color:#39870c;border-color:#39870c;color:#fff}.group-warning .option-label::before{background-color:#dcd400;border-color:#dcd400;color:#191919}.group-danger .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-error .option-label::before{background-color:#ce3f51;border-color:#ce3f51;color:#fff}.group-attention .option-label::before{background-color:#8b4a6a;border-color:#8b4a6a;color:#fff}.options{margin:0;padding:0}.option{display:block;inline-size:100%;padding-block:8px;padding-inline:16px;cursor:pointer;line-height:inherit;font-family:inherit;font-size:inherit;border:none;text-align:start;background-color:#fff}.option:hover{background-color:#ebf3e6}.option:hover .option-label{color:#39870c;font-weight:bold}.option.option-active .option-label{color:#39870c;font-weight:bold;text-decoration:underline}.option-label{position:relative;color:#000;font-size:Asap, sans-serif;font-weight:400}.option-hint{padding-inline-start:5px;color:#39870c;font-size:Asap, sans-serif;font-weight:bold}.placeholder{margin:0;padding-block:8px;padding-inline:16px;color:#666}';const d=c;const p=class{constructor(e){o(this,e);this.dsoChange=i(this,"dsoChange",3);this.dsoRedirect=i(this,"dsoRedirect",3);this.toggleOpen=()=>{this.open=!this.open};this.handleOptionClick=(o,i)=>{this.dsoChange.emit({originalEvent:o,option:i});this.open=false};this.handleRedirectClick=(o,i)=>{this.dsoRedirect.emit({originalEvent:o,isModifiedEvent:l(o),redirect:i});this.open=false};this.options=[];this.active=undefined;this.activeHint=undefined;this.open=false}keyDownListener(o){if(this.open&&o.key==="ArrowUp"){o.preventDefault();this.handleTab(-1)}else if(this.open&&o.key==="ArrowDown"){o.preventDefault();this.handleTab(1)}}componentDidRender(){if(this.open&&!this.trap){this.createTrap()}else if(!this.open&&this.trap){this.removeTrap()}}createTrap(){this.trap=a(this.host,{clickOutsideDeactivates:true,escapeDeactivates:true,setReturnFocus:this.toggleButtonElementRef,tabbableOptions:{getShadowRoot:true},onDeactivate:()=>{this.open=false}}).activate()}removeTrap(){var o;(o=this.trap)===null||o===void 0?void 0:o.deactivate();delete this.trap}handleTab(o){var i;const e=this.host.isConnected?s(this.host,{getShadowRoot:true}):[];const t=e.findIndex((o=>{var i;return o===((i=this.host.shadowRoot)===null||i===void 0?void 0:i.activeElement)}));let n=t+o;if(n>=e.length){n=0}else if(n<0){n=e.length-1}(i=e[n])===null||i===void 0?void 0:i.focus()}render(){var o,i;return e(t,null,e("button",{key:"443309104a25a8fabd949377c74383027450f404","aria-expanded":this.open.toString(),class:r(["active-option",{open:this.open}]),type:"button",onClick:this.toggleOpen,ref:o=>this.toggleButtonElementRef=o},e(u,{key:"e0f34941cabe1232ecf224d35f951f2fcb7affc7",active:this.active,options:this.options}),e("span",{key:"b1d4dfadfb02c8beaa6e8553be863abf6fa50c4f",class:"active-option-label"},(i=(o=this.active)===null||o===void 0?void 0:o.label)!==null&&i!==void 0?i:"Selecteer een optie"),e("span",{key:"29dc80cc20ebc9393119bd2e0251420099d8ac88",class:"active-option-aside"},this.options.some((o=>"summaryCounter"in o&&(o===null||o===void 0?void 0:o.summaryCounter)))&&e("span",{key:"08a59c09ec06900c761e44ce223c317414e401bf",class:"badges"},this.options.filter((o=>"options"in o&&"summaryCounter"in o&&!!(o===null||o===void 0?void 0:o.summaryCounter))).map((o=>{var i;return e("dso-badge",{status:(i=o.variant)!==null&&i!==void 0?i:"outline"},o.options.length)}))),e("dso-icon",{key:"06549ae93243ab2a9b0a36e397ef0808e90973f5",icon:"caret-down"}))),this.open&&e("div",{key:"9f7e0cb989feb1167d8b0bce0f2c3a9c371811b8",class:"groups-container"},e("ul",{key:"bd98ccdbe135d9145f8d1c41c3bf362030e37e26",class:"groups"},this.options.map((o=>"options"in o&&e("li",{class:r(["group",{[`group-${o.variant}`]:!!o.variant}])},e("p",{class:"group-label"},o.label),e("ul",{class:"options"},o.options.map((o=>e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick}))))),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||"placeholder"in o&&e("li",{class:"group"},e("p",{class:"group-label"},o.label),e("p",{class:"placeholder"},o.placeholder),o.redirect&&e(f,{redirect:o.redirect,callback:this.handleRedirectClick}))||e("li",null,e(b,{option:o,active:this.active,activeHint:this.activeHint,callback:this.handleOptionClick})))))))}get host(){return n(this)}};const b=({option:o,active:i,activeHint:t,callback:n})=>e("button",{class:r(["option",{"option-active":i===o}]),type:"button",onClick:i=>n(i,o)},e("span",{class:"option-label"},o.label),!!t&&i===o&&e("span",{class:"option-hint"},"(",t,")"));const f=({redirect:o,callback:i})=>e("a",{class:"group-link",href:o.href,onClick:e=>i(e,o)},o.label,e("dso-icon",{icon:"chevron-right"}));const u=({active:o,options:i})=>{const t=i.find((i=>"options"in i&&!!i.options.find((i=>i===o))&&!!i.activeLabel));return t?e("dso-label",{compact:true,status:t.variant},t.activeLabel):undefined};p.style=d;export{p as dso_advanced_select};
2
+ //# sourceMappingURL=p-21f133e4.entry.js.map
@@ -0,0 +1,2 @@
1
+ import{r as n,c as e,f as t,h as o,a as s}from"./p-7fc1e494.js";import{c as i}from"./p-5f4e8468.js";import{c as r}from"./p-8a1a6e56.js";import"./p-1dbcaeef.js";const a="*,\n*::after,\n*::before {\n box-sizing: border-box;\n}\n\n:host {\n display: block;\n}\n\n.sr-only {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0, 0, 0, 0);\n border: 0;\n}\n\n.dso-manual-input-button {\n cursor: text;\n}\n\n.dso-tertiary {\n display: inline-block;\n font-size: 1em;\n font-weight: 500;\n margin-block-end: 0;\n text-decoration: none;\n touch-action: manipulation;\n text-align: start;\n user-select: none;\n vertical-align: middle;\n}\n.dso-tertiary:focus, .dso-tertiary:focus-visible {\n outline-offset: 2px;\n}\n.dso-tertiary:active {\n outline: 0;\n}\n.dso-tertiary {\n border: 0;\n color: #39870c;\n line-height: 1;\n padding: 0;\n background-color: transparent;\n}\n.dso-tertiary[disabled] {\n color: #afcf9d;\n}\n.dso-tertiary[disabled].dso-spinner-left, .dso-tertiary[disabled].dso-spinner-right {\n color: #39870c;\n}\n.dso-tertiary:not([disabled]):hover {\n color: #275937;\n text-decoration: underline;\n text-underline-position: under;\n}\n.dso-tertiary:not([disabled]):active {\n color: #173521;\n}\n.dso-tertiary.dso-align {\n line-height: calc(1.5em - 1px);\n padding-block: 11px;\n padding-inline: 0;\n position: relative;\n}\n.dso-tertiary.dso-truncate {\n max-inline-size: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.dso-tertiary.dso-spinner-left::before {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-end: 8px;\n}\n.dso-tertiary.dso-spinner-right::after {\n background-image: url(\"data:image/svg+xml,%3Csvg class='spinner' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg' %3E%3Cstyle%3E .spinner %7B animation: rotator 8s linear infinite; transform-origin: center; %7D @keyframes rotator %7B 0%25 %7B transform: rotate(0deg); %7D 100%25 %7B transform: rotate(360deg); %7D %7D .path %7B stroke-dasharray: 265; stroke-dashoffset: 0; transform-origin: center; stroke: %2339870c; animation: dash 2s ease-in-out infinite; %7D @keyframes dash %7B 0%25 %7B stroke-dashoffset: 265; %7D 50%25 %7B stroke-dashoffset: 65; transform:rotate(90deg); %7D 100%25 %7B stroke-dashoffset: 265; transform:rotate(360deg); %7D %3C/style%3E%3Ccircle class='path' fill='none' stroke-width='10' stroke-linecap='butt' cx='50' cy='50' r='45'%3E%3C/circle%3E%3C/svg%3E\");\n background-repeat: no-repeat;\n content: \"\";\n display: inline-block;\n block-size: 24px;\n vertical-align: middle;\n inline-size: 24px;\n margin-inline-start: 8px;\n}\n.dso-tertiary dso-icon + span:not(.sr-only),\n.dso-tertiary svg.di + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + dso-icon,\n.dso-tertiary span:not(.sr-only) + svg.di {\n margin-inline-start: 8px;\n}\n.dso-tertiary svg.di.di-chevron-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-chevron-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-chevron-up {\n margin-inline-start: 4px;\n}\n.dso-tertiary dso-icon[icon=chevron-left] + span:not(.sr-only),\n.dso-tertiary dso-icon[icon=chevron-right] + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-down + span:not(.sr-only),\n.dso-tertiary svg.di.di-angle-up + span:not(.sr-only),\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-down,\n.dso-tertiary span:not(.sr-only) + svg.di.di-angle-up,\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-left],\n.dso-tertiary span:not(.sr-only) + dso-icon[icon=chevron-right] {\n margin-inline-start: 0;\n}\n.dso-tertiary dso-icon,\n.dso-tertiary svg.di,\n.dso-tertiary span {\n vertical-align: middle;\n}\n.dso-tertiary {\n cursor: pointer;\n}\n\n.dso-input-number {\n align-items: center;\n display: flex;\n}\n.dso-input-number .dso-input-step-counter {\n align-self: center;\n background-color: transparent;\n border: 0;\n display: inline-block;\n block-size: 1.5rem;\n text-align: center;\n inline-size: 1.5rem;\n}\n.dso-input-number .dso-input-step-counter:focus, .dso-input-number .dso-input-step-counter:active {\n outline: 0;\n}\n.dso-input-number .dso-input-step-counter::-webkit-outer-spin-button, .dso-input-number .dso-input-step-counter::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n}\n.dso-input-number .dso-input-step-counter[type=number] {\n -moz-appearance: textfield;\n}\n\n.dso-button-group {\n display: flex;\n flex-direction: row;\n}\n.dso-button-group.dso-disabled > * {\n background-color: #fff;\n border-color: #e5e5e5;\n color: #666;\n}\n.dso-button-group.dso-disabled > * {\n pointer-events: none;\n}\n.dso-button-group > * {\n border-radius: 0;\n}\n.dso-button-group > *:first-child {\n border-radius: 4px 0 0 4px;\n}\n.dso-button-group > *:not(:first-child) {\n border-inline-start-style: none !important;\n}\n.dso-button-group > *:last-child {\n border-radius: 0 4px 4px 0;\n}\n.dso-button-group > *:only-child {\n border-radius: 4px;\n}\n.dso-button-group > .dso-input-number {\n border-style: solid;\n border-width: 1px;\n flex-wrap: nowrap;\n padding-block: 0;\n padding-inline: 16px;\n}\n.dso-button-group > .dso-input-number {\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n}\n@media screen and (max-width: 767px) {\n .dso-button-group > .dso-input-number {\n justify-content: center;\n }\n}\n.dso-button-group > *:hover + .dso-input-number,\n.dso-button-group > *:focus + .dso-input-number {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n box-shadow: inset 0 -1px 0 0 #39870c, inset 0 1px 0 0 #39870c, inset -1px 0 0 0 #39870c;\n}\n.dso-button-group > *.dso-selected + .dso-input-number {\n background-color: #fff;\n border-color: #39870c;\n color: #191919;\n}\n.dso-button-group > *:active + .dso-input-number, .dso-button-group > *:active + .dso-input-number:hover,\n.dso-button-group > *.active + .dso-input-number,\n.dso-button-group > *.active + .dso-input-number:hover {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n opacity: 1;\n}\n.dso-button-group > *.disabled + .dso-input-number, .dso-button-group > *.disabled + .dso-input-number:hover,\n.dso-button-group > *[disabled] + .dso-input-number,\n.dso-button-group > *[disabled] + .dso-input-number:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n}\n.dso-button-group .dso-list-button {\n padding-inline-end: 15px;\n}\n\n.dso-selectable {\n position: relative;\n display: var(--dso-selectable-display, block);\n padding-block: 0;\n padding-inline: 32px 0;\n}\n.dso-selectable label {\n font-weight: 400;\n line-height: 24px;\n margin: 0;\n}\n.dso-selectable input[type=checkbox][disabled] + label::before, .dso-selectable input[type=checkbox][disabled]:active + label::before, .dso-selectable input[type=checkbox][disabled]:focus + label::before,\n.dso-selectable input[type=radio][disabled] + label::before,\n.dso-selectable input[type=radio][disabled]:active + label::before,\n.dso-selectable input[type=radio][disabled]:focus + label::before {\n background-color: #fff;\n box-shadow: 0 0 0 2px #e5e5e5;\n}\n.dso-selectable input[type=checkbox],\n.dso-selectable input[type=radio] {\n block-size: 24px;\n inset-inline-start: 0;\n margin: 0;\n opacity: 0;\n position: absolute;\n inset-block-start: 0;\n inline-size: 24px;\n z-index: 100;\n zoom: 1;\n}\n@media (prefers-contrast: more) {\n .dso-selectable input[type=checkbox],\n .dso-selectable input[type=radio] {\n opacity: 1;\n }\n}\n.dso-selectable input[type=checkbox]:not([disabled]),\n.dso-selectable input[type=radio]:not([disabled]) {\n cursor: pointer;\n}\n.dso-selectable input[type=checkbox] + label,\n.dso-selectable input[type=radio] + label {\n display: inline;\n font-style: normal;\n padding-inline-start: 0;\n}\n.dso-selectable input[type=checkbox] + label::before,\n.dso-selectable input[type=radio] + label::before {\n background: #fff;\n border: 0;\n box-shadow: 0 0 0 2px var(--dso-selectable-color, #275937);\n content: \"\";\n block-size: 20px;\n inset-inline-start: 2px;\n position: absolute;\n inset-block-start: 2px;\n inline-size: 20px;\n}\n.dso-selectable input[type=checkbox]:focus,\n.dso-selectable input[type=radio]:focus {\n outline: 0;\n}\n.dso-selectable input[type=checkbox]:focus + label::before,\n.dso-selectable input[type=radio]:focus + label::before {\n box-shadow: 0 0 0 3px var(--dso-selectable-color, #275937);\n block-size: 18px;\n inset-inline-start: 3px;\n inset-block-start: 3px;\n inline-size: 18px;\n}\n.dso-selectable input[type=checkbox]:active + label::before, .dso-selectable input[type=checkbox].active + label::before,\n.dso-selectable input[type=radio]:active + label::before,\n.dso-selectable input[type=radio].active + label::before {\n background-color: #ebf3e6;\n box-shadow: 0 0 0 1px #275937;\n block-size: 22px;\n inset-inline-start: 1px;\n inset-block-start: 1px;\n inline-size: 22px;\n}\n.dso-selectable input[type=checkbox] + label::before {\n border-radius: 4px;\n}\n.dso-selectable input[type=checkbox] + label::after {\n background: transparent;\n content: \"\";\n inset-inline-start: 6px;\n opacity: 0;\n position: absolute;\n inset-block-start: 6px;\n zoom: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after, .dso-selectable input[type=checkbox]:indeterminate + label::after {\n opacity: 1;\n}\n.dso-selectable input[type=checkbox]:checked + label::after {\n border: solid;\n border-color: var(--dso-selectable-color, #39870c);\n border-block-start-color: transparent;\n border-width: 0 0 3px 3px;\n block-size: 8px;\n transform: rotate(-45deg);\n inline-size: 13px;\n}\n.dso-selectable input[type=checkbox]:indeterminate + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n block-size: 12px;\n inline-size: 12px;\n}\n.dso-selectable input[type=radio] + label::before {\n border-radius: 50%;\n}\n.dso-selectable input[type=radio] + label::after {\n background-color: transparent;\n border-radius: 50%;\n content: \"\";\n block-size: 12px;\n inset-inline-start: 6px;\n opacity: 0;\n position: absolute;\n inset-block-start: 6px;\n inline-size: 12px;\n zoom: 1;\n}\n.dso-selectable input[type=radio]:checked + label::after {\n background-color: var(--dso-selectable-color, #39870c);\n opacity: 1;\n}\n.dso-selectable label {\n font-weight: 700;\n}\n\n.dso-list-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-radius: 4px;\n border-width: 1px;\n border-style: solid;\n font-weight: 600;\n padding-block: 15px;\n padding-inline: 15px 47px;\n position: relative;\n text-align: start;\n white-space: normal;\n inline-size: 100%;\n cursor: pointer;\n}\n.dso-list-button:focus, .dso-list-button:focus-visible {\n outline-offset: 2px;\n}\n.dso-list-button:active {\n outline: 0;\n}\n.dso-list-button {\n background-color: #fff;\n border-color: #ccc;\n color: #191919;\n}\n.dso-list-button:hover, .dso-list-button:focus {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-list-button:active, .dso-list-button:active:hover, .dso-list-button.active, .dso-list-button.active:hover {\n background-color: #fff;\n border-color: #d7e7ce;\n color: #191919;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n background-color: #fff;\n border-color: #ccc;\n color: #666;\n}\n.dso-list-button.disabled, .dso-list-button.disabled:hover, .dso-list-button[disabled], .dso-list-button[disabled]:hover {\n opacity: 1;\n}\n.dso-list-button.dso-selected {\n border-color: #39870c;\n border-width: 1px;\n box-shadow: inset 0px 0px 0px 1px #39870c, inset -1px 0px 0px 0px #39870c;\n}\n@media screen and (min-width: 768px) {\n .dso-list-button.dso-selected.dso-single-count {\n border-inline-end: 0;\n box-shadow: #39870c 0px 1px 0px 0px inset, #39870c 1px 0px 0px 0px inset, #39870c 0px -1px 0px 0px inset;\n }\n}\n.dso-list-button label {\n cursor: inherit;\n}\n.dso-list-button > span {\n display: block;\n}\n.dso-list-button .dso-sublabel {\n font-weight: 400;\n inline-size: 100%;\n padding-inline-start: 32px;\n}\n.dso-list-button dso-icon {\n block-size: 24px;\n color: #39870c;\n inset-block-start: 15px;\n inset-inline-end: 15px;\n inline-size: 24px;\n page-break-before: always;\n position: absolute;\n}\n@media screen and (max-width: 767px) {\n .dso-list-button.dso-selected.dso-single-count::after {\n inline-size: 0;\n }\n}\n\n.dso-list-button + .dso-list-button,\n.dso-list-button + .dso-button-group,\n.dso-button-group + .dso-list-button,\n.dso-button-group + .dso-button-group {\n margin-block-start: 4px;\n}\n\n.dso-input-wrapper {\n position: relative;\n}\n.dso-input-wrapper .form-control {\n inline-size: 9ch;\n}\n\n.form-control {\n display: block;\n inline-size: 100%;\n block-size: 40px;\n padding-block: 6px;\n padding-inline: 14px;\n font-size: 1rem;\n line-height: 1.5;\n color: #191919;\n background-color: #fff;\n background-image: none;\n border: 1px solid #275937;\n border-radius: 4px;\n transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;\n}\n.form-control::-moz-placeholder {\n color: #666;\n opacity: 1;\n}\n.form-control:-ms-input-placeholder {\n color: #666;\n}\n.form-control::-webkit-input-placeholder {\n color: #666;\n}\n.form-control::-ms-expand {\n background-color: transparent;\n border: 0;\n}\n.form-control:focus {\n border-color: #275937;\n outline: 0;\n box-shadow: inset 0 0 0 1px #275937;\n}\n.form-control[disabled], .form-control[readonly], fieldset[disabled] .form-control {\n background-color: #fff;\n opacity: 1;\n}\n.form-control[disabled], fieldset[disabled] .form-control {\n cursor: default;\n}\n.form-control[disabled] {\n border-color: #e5e5e5;\n color: #999;\n}\n.form-control[readonly] {\n border-width: 1px;\n}\n.form-control[type=text] {\n line-height: 40px;\n}\n.form-control[size] {\n inline-size: auto;\n}\n\n.dso-manual-input-button[type=button] {\n background-color: transparent;\n border: 0;\n position: absolute;\n inset: 0;\n}\n\n.hidden {\n display: none !important;\n}";const d=a;const l=class{constructor(t){n(this,t);this.dsoCountChange=e(this,"dsoCountChange",7);this.dsoSelectedChange=e(this,"dsoSelectedChange",7);this.manualInputWrapperElement=undefined;this.manualCount=undefined;this.label=undefined;this.sublabel=undefined;this.count=undefined;this.min=undefined;this.max=undefined;this.checked=false;this.disabled=false;this.subcontentPrefix=undefined;this.manual=true}get subcontentSlot(){return this.host.querySelector("[slot='subcontent']")}watchManualCallback(){if(!this.manual&&this.manualCount){this.stopManualCountInput()}}connectedCallback(){this.mutationObserver=new MutationObserver((()=>t(this.host)));this.mutationObserver.observe(this.host,{characterData:true,childList:true,subtree:true,attributes:true})}componentDidRender(){var n,e;if(this.manualCount!==undefined&&this.manualInputWrapperElement&&!this.trap){this.trap=i(this.manualInputWrapperElement,{escapeDeactivates:true,setReturnFocus:false,clickOutsideDeactivates:n=>{this.setCount(n);return true},onDeactivate:()=>this.stopManualCountInput(),onPostDeactivate:()=>{var n;return(n=this.manualInputButtonElement)===null||n===void 0?void 0:n.focus()}}).activate()}else if(this.manualCount===undefined&&this.trap){(n=this.trap)===null||n===void 0?void 0:n.deactivate();delete this.trap}(e=this.subcontentSlot)===null||e===void 0?void 0:e.setAttribute("aria-hidden","true")}disconnectedCallback(){var n,e;(n=this.trap)===null||n===void 0?void 0:n.deactivate();(e=this.mutationObserver)===null||e===void 0?void 0:e.disconnect();delete this.mutationObserver}handleOnChange({target:n}){if(n instanceof HTMLInputElement){this.manualCount=n.valueAsNumber}}stepValue(n,e){if(typeof this.count==="number"){const t=e==="increment"?this.count+1:this.count-1;if(!this.isNewCountValid(t)){return}this.dsoCountChange.emit({originalEvent:n,count:t})}}setCount(n){n.preventDefault();if(typeof this.manualCount==="number"&&this.isNewCountValid(this.manualCount)){this.dsoCountChange.emit({originalEvent:n,count:this.manualCount});this.stopManualCountInput()}}handleSelectClick(n){n.preventDefault();if(this.count!==undefined){this.dsoCountChange.emit({originalEvent:n,count:this.count>0?0:1});return}this.dsoSelectedChange.emit({originalEvent:n,checked:!this.checked})}startManualCountInput(){this.manualCount=this.count}stopManualCountInput(){this.manualCount=undefined}isNewCountValid(n){return!(this.min!==undefined&&this.max!==undefined&&(n<Number(this.min)||n>Number(this.max)))}render(){const n=this.manualCount===undefined;const e=this.checked||this.count!==undefined&&this.count>0;return o("div",{key:"e7bf049a644612d767b69bd7b8f9a7a2a3415aee",class:r(["dso-button-group",{"dso-disabled":this.disabled}])},o("div",{key:"ea3f55d4606d1b5d918e87f85dd41fb88359129b",class:r(["dso-list-button",{"dso-selected":e,"dso-single-count":this.count===1}]),onClick:n=>this.handleSelectClick(n)},o("div",{key:"b380324080a4b14237d0ba9c577cb94ac86e3537",class:"dso-selectable"},o("input",{key:"28a63c6a3f6c2db3ff0ec6a496ecb3d47fe259da",id:"dso-list-button-checkbox",type:"checkbox",value:"list-button",name:"naam","aria-describedby":[this.sublabel&&"sublabel",this.subcontentSlot&&"description"].filter((n=>!!n)).join(" ")||null,checked:e,disabled:this.disabled}),o("label",{key:"9d504627106c1a20a8e163366ba5d2609acb0d34",htmlFor:"dso-list-button-checkbox"},this.label),this.subcontentSlot&&o("div",{key:"ed2ba786c38106c3ff4b3d6087627fe22a318ff6",class:"sr-only",id:"description"},this.subcontentPrefix&&this.subcontentPrefix+":",o("div",{key:"6e7c6a7846ab52e6af57844def31d11de17c5883",innerHTML:this.subcontentSlot.innerHTML}))),this.sublabel&&o("span",{key:"791c2945ae74a09a4dcce87e8e5a50bb8ae5370c",class:"dso-sublabel",id:"sublabel"},this.sublabel),o("slot",{key:"73ab87343afd7b01762c9207f9f9871606a8e7a5",name:"subcontent"})),this.count!==undefined&&this.count>0&&o("div",{key:"44b882307beab09c69b324374af82c03d4dc3ceb",class:"dso-input-number"},this.manualCount===undefined&&this.count>1&&o("button",{key:"403a0f1f8897191e9a32c6567ae4e094a89418ca",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.min)||this.disabled,onClick:n=>this.stepValue(n,"decrement")},o("dso-icon",{key:"f7e054b48d58184d8403a30839d6b5042ef95076",icon:"minus-circle"}),o("span",{key:"dbc39db429a1a134d4bd6b092034bc26bba2b008",class:"sr-only"},"Aantal verlagen")),o("div",{key:"b68d42b10d5066d00ccd30bc1710fca145801c29",class:"dso-input-wrapper"},this.manualCount===undefined&&this.count>1&&o("input",{key:"f26110be0cd8171ec879108ce8c0630cd18e797d",class:"dso-input-step-counter",type:"number",tabIndex:-1,"aria-label":"Aantal",value:this.count,readOnly:true}),o("form",{key:"db761f994cc9e8f681e85e618fce6cfab5087083",onSubmit:n=>this.setCount(n)},o("div",{key:"724b28bf6a1ddc86e44c6d1f1ae0bb7ede612937",ref:n=>this.manualInputWrapperElement=n},o("input",{key:"0bd8409e0ecb7fce7c65ac479145bfdf61601e59",class:r("form-control",{hidden:n}),type:"number","aria-label":"Aantal",value:this.manualCount,min:this.min,max:this.max,onInput:n=>this.handleOnChange(n)})),this.manual&&o("button",{key:"1c72996a4eb4a280c0dfc46748c4ce075a11453b",class:r("dso-manual-input-button",{"sr-only":!n}),type:!n?"submit":"button",disabled:this.disabled,onClick:()=>n&&this.startManualCountInput()},n?o("span",{class:"sr-only"},"Handmatig aantal invullen"):o("span",{class:"sr-only"},"Zet waarde")))),n&&o("button",{key:"69cdc0b55ca1c4bbd87d9869374d00777bb39916",type:"button",class:"dso-tertiary",disabled:this.count===Number(this.max)||this.disabled,onClick:n=>this.stepValue(n,"increment")},o("dso-icon",{key:"968533a4f8a8a0a322309f98f49814faf4df98be",icon:"plus-circle"}),o("span",{key:"b2bf82b374c5244b0574a44215f06a2b4f988ab2",class:"sr-only"},"Aantal verhogen"))))}get host(){return s(this)}static get watchers(){return{manual:["watchManualCallback"]}}};l.style=d;export{l as dso_list_button};
2
+ //# sourceMappingURL=p-4831099c.entry.js.map