@dso-toolkit/core 82.0.0 → 83.1.0

package/dist/collection/components/ozon-content/ozon-content.css

@@ -1532,6 +1532,10 @@ span[role=paragraph] {
   display: block;
 }
 
+span[role=paragraph] + span[role=paragraph] {
+  margin-block: 16px 0;
+}
+
 :host(:not([inline])) .fallback {
   display: block;
 }
@@ -1668,12 +1672,6 @@ table.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 p.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
 span[role=paragraph].editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
@@ -1707,6 +1705,18 @@ p.editaction-add,
 span[role=paragraph].editaction-add,
 .dso-ozon-lijst.editaction-add,
 .dso-ozon-lijst > ul > li.editaction-add,
+table.editaction-add {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
+p.editaction-add,
+span[role=paragraph].editaction-add,
+.dso-ozon-lijst.editaction-add,
+.dso-ozon-lijst > ul > li.editaction-add,
 table.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -1723,12 +1733,6 @@ table.editaction-remove {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 p.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
 span[role=paragraph].editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible),
@@ -1762,6 +1766,18 @@ p.editaction-remove,
 span[role=paragraph].editaction-remove,
 .dso-ozon-lijst.editaction-remove,
 .dso-ozon-lijst > ul > li.editaction-remove,
+table.editaction-remove {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
+p.editaction-remove,
+span[role=paragraph].editaction-remove,
+.dso-ozon-lijst.editaction-remove,
+.dso-ozon-lijst > ul > li.editaction-remove,
 table.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -1788,12 +1804,6 @@ ins.new-text {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 ins.new-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -1807,6 +1817,14 @@ ins.new-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"
 ins.new-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+ins.new-text {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 ins.new-text {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -1824,12 +1842,6 @@ ins.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -1843,6 +1855,14 @@ ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^=
 ins.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+ins.editaction-add {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 ins.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -1859,12 +1879,6 @@ del.removed-text {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 del.removed-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -1878,6 +1892,14 @@ del.removed-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="t
 del.removed-text a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+del.removed-text {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 del.removed-text {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -1901,12 +1923,6 @@ del.editaction-remove {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -1920,6 +1936,14 @@ del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([hre
 del.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+del.editaction-remove {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 del.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -2001,12 +2025,6 @@ del.editaction-remove p:last-child {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 .subtitel:has(del:not(.removed-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2020,6 +2038,14 @@ del.editaction-remove p:last-child {
 .subtitel:has(del:not(.removed-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.subtitel:has(del:not(.removed-text)) {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 .subtitel:has(del:not(.removed-text)) {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -2041,12 +2067,6 @@ del.editaction-remove p:last-child {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 .subtitel:has(ins:not(.new-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2060,6 +2080,14 @@ del.editaction-remove p:last-child {
 .subtitel:has(ins:not(.new-text)) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.subtitel:has(ins:not(.new-text)) {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 .subtitel:has(ins:not(.new-text)) {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -2077,12 +2105,6 @@ td.editaction-remove {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 td.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2096,6 +2118,14 @@ td.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href
 td.editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+td.editaction-remove {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 td.editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -2114,12 +2144,6 @@ td.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 td.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2133,6 +2157,14 @@ td.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="
 td.editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+td.editaction-add {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 td.editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -2146,12 +2178,6 @@ td.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 .begrippenlijst .editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2165,6 +2191,14 @@ td.editaction-add {
 .begrippenlijst .editaction-add a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.begrippenlijst .editaction-add {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 .begrippenlijst .editaction-add {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -2177,12 +2211,6 @@ td.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 .begrippenlijst .editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2196,6 +2224,14 @@ td.editaction-add {
 .begrippenlijst .editaction-remove a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.begrippenlijst .editaction-remove {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 .begrippenlijst .editaction-remove {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -2232,12 +2268,6 @@ td.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 .kop ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2251,6 +2281,14 @@ td.editaction-add {
 .kop ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.kop ins {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 .kop ins {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -2263,12 +2301,6 @@ td.editaction-add {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 .kop del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -2282,6 +2314,14 @@ td.editaction-add {
 .kop del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.kop del {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 .kop del {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;

package/dist/collection/components/ozon-content/ozon-content.interfaces.js.map

@@ -1 +1 @@
-{"version":3,"file":"ozon-content.interfaces.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["interface OzonContentClickBaseEvent<T extends string> {\r\n  type: T;\r\n  node: Element;\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\nexport type OzonContentClickKopEvent = OzonContentClickBaseEvent<\"Kop\">;\r\nexport type OzonContentClickIntIoRefEvent = OzonContentClickBaseEvent<\"IntIoRef\">;\r\nexport type OzonContentClickIntRefEvent = OzonContentClickBaseEvent<\"IntRef\"> & { isModifiedEvent: boolean };\r\n\r\nexport type OzonContentClickEvent =\r\n  | OzonContentClickKopEvent\r\n  | OzonContentClickIntRefEvent\r\n  | OzonContentClickIntIoRefEvent;\r\n\r\nexport type OzonContentInputType = XMLDocument | string;\r\n\r\nexport interface OzonContentMarkItemHighlightEvent {\r\n  text: string;\r\n  elementRef: HTMLElement;\r\n}\r\n\r\nexport type OzonContentWijzigActie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport interface OzonContentUrlResolver {\r\n  (name: \"Illustratie\" | \"InlineTekstAfbeelding\", attribute: \"naam\", value: string | null, element: Element): string;\r\n  (\r\n    name: \"ExtIoRef\" | \"ExtRef\" | \"IntIoRef\" | \"IntRef\",\r\n    attribute: \"ref\",\r\n    value: string | null,\r\n    element: Element,\r\n  ): string;\r\n}\r\n\r\nexport interface OzonContentBegripResolver {\r\n  (ref: string | null, element: Element): XMLDocument | string | undefined;\r\n}\r\n"]}
+{"version":3,"file":"ozon-content.interfaces.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["interface OzonContentClickBaseEvent<T extends string> {\r\n  type: T;\r\n  node: Element;\r\n  originalEvent: MouseEvent;\r\n}\r\n\r\nexport type OzonContentClickKopEvent = OzonContentClickBaseEvent<\"Kop\">;\r\nexport type OzonContentClickIntIoRefEvent = OzonContentClickBaseEvent<\"IntIoRef\">;\r\nexport type OzonContentClickIntRefEvent = OzonContentClickBaseEvent<\"IntRef\"> & { isModifiedEvent: boolean };\r\n\r\nexport type OzonContentClickEvent =\r\n  | OzonContentClickKopEvent\r\n  | OzonContentClickIntRefEvent\r\n  | OzonContentClickIntIoRefEvent;\r\n\r\nexport type OzonContentInputType = XMLDocument | string;\r\n\r\nexport interface OzonContentMarkItemHighlightEvent {\r\n  text: string;\r\n  elementRef: HTMLElement;\r\n}\r\n\r\nexport type OzonContentWijzigActie = \"voegtoe\" | \"verwijder\";\r\n\r\nexport interface OzonContentUrlResolver {\r\n  (name: \"Illustratie\" | \"InlineTekstAfbeelding\", attribute: \"naam\", value: string, element: Element): string;\r\n  (name: \"ExtIoRef\" | \"ExtRef\" | \"IntIoRef\" | \"IntRef\", attribute: \"ref\", value: string, element: Element): string;\r\n}\r\n\r\nexport interface OzonContentBegripResolver {\r\n  (ref: string, element: Element): XMLDocument | string | undefined;\r\n}\r\n"]}

package/dist/collection/components/ozon-content/ozon-content.js

@@ -27,7 +27,7 @@ export class OzonContent {
             begripResolver: this.begripResolver,
         };
         const transformed = mapper.transform(this.content, context);
-        return h(Fragment, { key: 'b3bccfe4c31aceff6ac766098f466834ad920220' }, transformed);
+        return h(Fragment, { key: '20418d8792856b75347760021d62ab949dbda816' }, transformed);
     }
     static get is() { return "dso-ozon-content"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +155,7 @@ export class OzonContent {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "A BegripResolver that will be called for STOP element \"IntRef\" with scope=\"Begrip\"."
+                    "text": "A BegripResolver that will be called for STOP element \"IntRef\". If the ref-attribute of IntRef points to a Begrip it\r\nshould return the `<Definitie>` of that Begrip otherwise it should return undefined."
                 },
                 "getter": false,
                 "setter": false

package/dist/collection/components/ozon-content/ozon-content.js.map

@@ -1 +1 @@
-{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,QAAQ,EAER,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAU/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAYE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAsCf,UAAK,GAAyB,EAAE,CAAC;QAEzB,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;KAkBH;IA3BC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,cAAc,EAAE,IAAI,CAAC,cAAc;SACpC,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL,EAAC,QAAQ;QACP,mBAAY;QACZ,4BAAqB;QACrB,qCAA8B;QAC9B,sBAAe;QACf,oBAAa,CACJ,CACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  JSX,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { MarkTextMarkFunction } from \"../../functional-components/mark-text/mark-text.interfaces\";\r\n\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\nimport {\r\n  OzonContentBegripResolver,\r\n  OzonContentClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkItemHighlightEvent,\r\n  OzonContentUrlResolver,\r\n} from \"./ozon-content.interfaces\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: MarkTextMarkFunction;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  urlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * A BegripResolver that will be called for STOP element \"IntRef\" with scope=\"Begrip\".\r\n   */\r\n  @Prop()\r\n  begripResolver?: OzonContentBegripResolver;\r\n\r\n  /**\r\n   * Emitted when an interactive element is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<OzonContentClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitClick: this.dsoClick.emit,\r\n      urlResolver: this.urlResolver,\r\n      begripResolver: this.begripResolver,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <Fragment>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-ozon-content-toggletip />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </Fragment>\r\n  );\r\n};\r\n"]}
+{"version":3,"file":"ozon-content.js","sourceRoot":"","sources":["../../../../src/components/ozon-content/ozon-content.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,SAAS,EAET,KAAK,EAEL,QAAQ,EAER,IAAI,EACJ,KAAK,EACL,KAAK,EACL,CAAC,GACF,MAAM,eAAe,CAAC;AAKvB,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAU/C,MAAM,MAAM,GAAG,IAAI,MAAM,EAAE,CAAC;AAO5B,MAAM,OAAO,WAAW;IALxB;QAYE;;WAEG;QAEH,WAAM,GAAG,KAAK,CAAC;QAuCf,UAAK,GAAyB,EAAE,CAAC;QAEzB,4BAAuB,GAAG,CAAC,IAAY,EAAE,UAAuB,EAAE,EAAE;YAC1E,IAAI,CAAC,+BAA+B,CAAC,IAAI,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,CAAC;QAClE,CAAC,CAAC;KAkBH;IA3BC,cAAc;QACZ,IAAI,CAAC,KAAK,GAAG,EAAE,CAAC;IAClB,CAAC;IASD,MAAM;QACJ,MAAM,OAAO,GAAuB;YAClC,KAAK,EAAE,IAAI,CAAC,KAAK;YACjB,MAAM,EAAE,IAAI,CAAC,MAAM;YACnB,IAAI,EAAE,IAAI,CAAC,IAAI;YACf,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACzC,qBAAqB,EAAE,IAAI,CAAC,uBAAuB;YACnD,SAAS,EAAE,IAAI,CAAC,QAAQ,CAAC,IAAI;YAC7B,WAAW,EAAE,IAAI,CAAC,WAAW;YAC7B,cAAc,EAAE,IAAI,CAAC,cAAc;SACpC,CAAC;QAEF,MAAM,WAAW,GAAG,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAE5D,OAAO,EAAC,QAAQ,uDAAE,WAAW,CAAY,CAAC;IAC5C,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF;AAED,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,YAAY,EAAE,CAAC;IAEf,OAAO,CACL,EAAC,QAAQ;QACP,mBAAY;QACZ,4BAAqB;QACrB,qCAA8B;QAC9B,sBAAe;QACf,oBAAa,CACJ,CACZ,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import {\r\n  Component,\r\n  ComponentInterface,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  JSX,\r\n  Prop,\r\n  State,\r\n  Watch,\r\n  h,\r\n} from \"@stencil/core\";\r\n\r\nimport { MarkTextMarkFunction } from \"../../functional-components/mark-text/mark-text.interfaces\";\r\n\r\nimport { OzonContentContext } from \"./ozon-content-context.interface\";\r\nimport { Mapper } from \"./ozon-content-mapper\";\r\nimport { OzonContentNodeState } from \"./ozon-content-node-state.interface\";\r\nimport {\r\n  OzonContentBegripResolver,\r\n  OzonContentClickEvent,\r\n  OzonContentInputType,\r\n  OzonContentMarkItemHighlightEvent,\r\n  OzonContentUrlResolver,\r\n} from \"./ozon-content.interfaces\";\r\n\r\nconst mapper = new Mapper();\r\n\r\n@Component({\r\n  tag: \"dso-ozon-content\",\r\n  styleUrl: \"ozon-content.scss\",\r\n  shadow: true,\r\n})\r\nexport class OzonContent implements ComponentInterface {\r\n  /**\r\n   * The XML to be rendered.\r\n   */\r\n  @Prop()\r\n  content?: OzonContentInputType;\r\n\r\n  /**\r\n   * Setting this property creates dso-ozon-content as inline element instead of a block element.\r\n   */\r\n  @Prop({ reflect: true })\r\n  inline = false;\r\n\r\n  /**\r\n   * To mark text.\r\n   */\r\n  @Prop()\r\n  mark?: MarkTextMarkFunction;\r\n\r\n  /**\r\n   * A UrlResolver that will be called for all STOP elements that render to HTML5 elements with external references.\r\n   */\r\n  @Prop()\r\n  urlResolver?: OzonContentUrlResolver;\r\n\r\n  /**\r\n   * A BegripResolver that will be called for STOP element \"IntRef\". If the ref-attribute of IntRef points to a Begrip it\r\n   * should return the `<Definitie>` of that Begrip otherwise it should return undefined.\r\n   */\r\n  @Prop()\r\n  begripResolver?: OzonContentBegripResolver;\r\n\r\n  /**\r\n   * Emitted when an interactive element is clicked.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoClick!: EventEmitter<OzonContentClickEvent>;\r\n\r\n  /**\r\n   * Emitted when a marked item is highlighted.\r\n   */\r\n  @Event({ bubbles: false })\r\n  dsoOzonContentMarkItemHighlight!: EventEmitter<OzonContentMarkItemHighlightEvent>;\r\n\r\n  @Watch(\"content\")\r\n  contentWatcher() {\r\n    this.state = {};\r\n  }\r\n\r\n  @State()\r\n  state: OzonContentNodeState = {};\r\n\r\n  private handleMarkItemHighlight = (text: string, elementRef: HTMLElement) => {\r\n    this.dsoOzonContentMarkItemHighlight.emit({ text, elementRef });\r\n  };\r\n\r\n  render(): JSX.Element {\r\n    const context: OzonContentContext = {\r\n      state: this.state,\r\n      inline: this.inline,\r\n      mark: this.mark,\r\n      setState: (state) => (this.state = state),\r\n      emitMarkItemHighlight: this.handleMarkItemHighlight,\r\n      emitClick: this.dsoClick.emit,\r\n      urlResolver: this.urlResolver,\r\n      begripResolver: this.begripResolver,\r\n    };\r\n\r\n    const transformed = mapper.transform(this.content, context);\r\n\r\n    return <Fragment>{transformed}</Fragment>;\r\n  }\r\n}\r\n\r\nconst dependencies = () => {\r\n  dependencies();\r\n\r\n  return (\r\n    <Fragment>\r\n      <dso-icon />\r\n      <dso-image-overlay />\r\n      <dso-ozon-content-toggletip />\r\n      <dso-tooltip />\r\n      <dso-table />\r\n    </Fragment>\r\n  );\r\n};\r\n"]}

package/dist/collection/components/pagination/pagination.css

@@ -76,7 +76,7 @@
   block-size: 1px;
   padding: 0;
   margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   border: 0;
+  overflow: hidden;
+  clip-path: inset(0);
 }

package/dist/collection/components/panel/panel.css

@@ -32,12 +32,6 @@
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e5e5e5;
-  color: #191919;
 }
 .panel-heading a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -51,15 +45,23 @@
 .panel-heading a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+.panel-heading {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e5e5e5;
+  color: #191919;
+}
 .panel-heading .sr-only {
   position: absolute;
   inline-size: 1px;
   block-size: 1px;
   padding: 0;
   margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   border: 0;
+  overflow: hidden;
+  clip-path: inset(0);
 }
 
 .emphasized .panel-heading {

package/dist/collection/components/panel/panel.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import clsx from "clsx";
+import { clsx } from "clsx";
 import { i18n } from "../../utils/i18n";
 import { translations } from "./panel.i18n";
 /**
@@ -15,7 +15,7 @@ export class Panel {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h("div", { key: '60a90b6384157d1d1c67e3f92fad2f37cf4a3650', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: 'b967472c7e208f6eca67da2fb4f666ba8a2120b2', class: "panel-heading" }, h("slot", { key: '26fc5406f5870c1c6254ba5b2d652cf13e48449b', name: "heading" }), h("dso-icon-button", { key: 'c074696bf8e60ff5e193da32ff7f49a8940c71b1', icon: "times", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '5f2fb594941c5e5d5fab3c2999ef62832ae55520', class: "panel-body" }, h("slot", { key: 'f8f67b297282127f800b506b87c16b9187f6ddbe' }))));
+        return (h("div", { key: '1c896d21bf884e7d580be80d577f4273745dee39', class: clsx(["dso-panel", { emphasized: this.emphasized }]) }, h("div", { key: '6b16de300d0da5b257112cf7071bad9a7dd30e89', class: "panel-heading" }, h("slot", { key: '1386b2b78eac05573fc91d0608225db0cd15c8b0', name: "heading" }), h("dso-icon-button", { key: '0cdce357bed4e243526c7203fe1c11433f5095cb', icon: "times", variant: "tertiary", onDsoClick: (e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent }), label: this.closeButtonLabel || this.text("close") })), h("div", { key: '757b039207ee5716e5df32dc03c05b21c497767b', class: "panel-body" }, h("slot", { key: 'ba8371640e60c311bc590096aa3ce470791423f5' }))));
     }
     static get is() { return "dso-panel"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/panel/panel.js.map

@@ -1 +1 @@
-{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../../src/components/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM5C;;;GAGG;AAMH,MAAM,OAAO,KAAK;IALlB;QAeE;;WAEG;QAEH,eAAU,GAAG,KAAK,CAAC;QAQX,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAoBpD;IAlBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;YAC9D,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,SAAS,GAAG;gBACvB,wEACE,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,EACrF,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAClD,CACE;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./panel.i18n\";\r\n\r\nexport interface PanelCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n/**\r\n * @slot - The contents to be highlighted within the panel\r\n * @slot heading - The heading (h2 - h6) with the title of the panel\r\n */\r\n@Component({\r\n  tag: \"dso-panel\",\r\n  styleUrl: \"panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class Panel implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPanelElement;\r\n\r\n  /**\r\n   * The accessible name for the close button.\r\n   */\r\n  @Prop()\r\n  closeButtonLabel?: string;\r\n\r\n  /**\r\n   * To display the panel as an emphasized panel.\r\n   */\r\n  @Prop()\r\n  emphasized = false;\r\n\r\n  /**\r\n   * Emitted when the user click the close button.\r\n   */\r\n  @Event()\r\n  dsoCloseClick!: EventEmitter<PanelCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    return (\r\n      <div class={clsx([\"dso-panel\", { emphasized: this.emphasized }])}>\r\n        <div class=\"panel-heading\">\r\n          <slot name=\"heading\" />\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            onDsoClick={(e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent })}\r\n            label={this.closeButtonLabel || this.text(\"close\")}\r\n          />\r\n        </div>\r\n        <div class=\"panel-body\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"panel.js","sourceRoot":"","sources":["../../../../src/components/panel/panel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,IAAI,EAAE,MAAM,MAAM,CAAC;AAE5B,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,OAAO,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAM5C;;;GAGG;AAMH,MAAM,OAAO,KAAK;IALlB;QAeE;;WAEG;QAEH,eAAU,GAAG,KAAK,CAAC;QAQX,SAAI,GAAG,IAAI,CAAC,GAAG,EAAE,CAAC,IAAI,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC;KAoBpD;IAlBC,MAAM;QACJ,OAAO,CACL,4DAAK,KAAK,EAAE,IAAI,CAAC,CAAC,WAAW,EAAE,EAAE,UAAU,EAAE,IAAI,CAAC,UAAU,EAAE,CAAC,CAAC;YAC9D,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,SAAS,GAAG;gBACvB,wEACE,IAAI,EAAC,OAAO,EACZ,OAAO,EAAC,UAAU,EAClB,UAAU,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,CAAC,MAAM,CAAC,aAAa,EAAE,CAAC,EACrF,KAAK,EAAE,IAAI,CAAC,gBAAgB,IAAI,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,GAClD,CACE;YACN,4DAAK,KAAK,EAAC,YAAY;gBACrB,8DAAa,CACT,CACF,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, h } from \"@stencil/core\";\r\nimport { clsx } from \"clsx\";\r\n\r\nimport { i18n } from \"../../utils/i18n\";\r\n\r\nimport { translations } from \"./panel.i18n\";\r\n\r\nexport interface PanelCloseEvent {\r\n  originalEvent: Event;\r\n}\r\n\r\n/**\r\n * @slot - The contents to be highlighted within the panel\r\n * @slot heading - The heading (h2 - h6) with the title of the panel\r\n */\r\n@Component({\r\n  tag: \"dso-panel\",\r\n  styleUrl: \"panel.scss\",\r\n  shadow: true,\r\n})\r\nexport class Panel implements ComponentInterface {\r\n  @Element()\r\n  host!: HTMLDsoPanelElement;\r\n\r\n  /**\r\n   * The accessible name for the close button.\r\n   */\r\n  @Prop()\r\n  closeButtonLabel?: string;\r\n\r\n  /**\r\n   * To display the panel as an emphasized panel.\r\n   */\r\n  @Prop()\r\n  emphasized = false;\r\n\r\n  /**\r\n   * Emitted when the user click the close button.\r\n   */\r\n  @Event()\r\n  dsoCloseClick!: EventEmitter<PanelCloseEvent>;\r\n\r\n  private text = i18n(() => this.host, translations);\r\n\r\n  render() {\r\n    return (\r\n      <div class={clsx([\"dso-panel\", { emphasized: this.emphasized }])}>\r\n        <div class=\"panel-heading\">\r\n          <slot name=\"heading\" />\r\n          <dso-icon-button\r\n            icon=\"times\"\r\n            variant=\"tertiary\"\r\n            onDsoClick={(e) => this.dsoCloseClick.emit({ originalEvent: e.detail.originalEvent })}\r\n            label={this.closeButtonLabel || this.text(\"close\")}\r\n          />\r\n        </div>\r\n        <div class=\"panel-body\">\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/plekinfo-card/plekinfo-card.css

@@ -9,12 +9,6 @@ ins {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #e4f1d4;
-  color: #191919;
 }
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -28,6 +22,14 @@ ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
 ins a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+ins {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #e4f1d4;
+  color: #191919;
+}
 ins {
   box-shadow: 0 1px 3px 1px rgba(0, 0, 0, 0.5);
   --_dso-ozon-content-toggletip-color: colors.$zwart;
@@ -41,12 +43,6 @@ del {
   --link-color: currentColor;
   --link-hover-color: currentColor;
   --link-visited-color: currentColor;
-  --_dso-icon-button-tertiary-color: #191919;
-  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
-  --_dso-icon-button-tertiary-active-color: #173521;
-  --_dso-icon-button-tertiary-disabled-color: #999;
-  background-color: #f5d8dc;
-  color: #191919;
 }
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
@@ -60,6 +56,14 @@ del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^
 del a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
   background-image: var(--_dso-di-background-image, url("./di.svg#email-zwart"));
 }
+del {
+  --_dso-icon-button-tertiary-color: #191919;
+  --_dso-icon-button-tertiary-hover-color: #4c4c4c;
+  --_dso-icon-button-tertiary-active-color: #173521;
+  --_dso-icon-button-tertiary-disabled-color: #999;
+  background-color: #f5d8dc;
+  color: #191919;
+}
 del {
   --_dso-ozon-content-toggletip-color: colors.$zwart;
   text-decoration: line-through;
@@ -192,9 +196,9 @@ del.dso-plekinfo-card-container:has(.dso-plekinfo-card-heading a:is(:hover, :foc
   block-size: 1px;
   padding: 0;
   margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
   border: 0;
+  overflow: hidden;
+  clip-path: inset(0);
 }
 .heading-anchor .icon-container {
   position: relative;

package/dist/collection/components/plekinfo-card/plekinfo-card.js

@@ -50,7 +50,7 @@ export class PlekinfoCard {
     }
     render() {
         const hasSymbol = this.symbolSlottedElement !== null;
-        return (h(Host, { key: '3c8a89daed9531a1cf75d593b8a1a6bfe85efda7', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '65ce7fbcbfb3297d847699e16e9cb0f82fec3680', wijzigactie: this.wijzigactie }, h("div", { key: 'c6fafda0b729b1d1d1d8e45bddfc9cd6bd8474f1', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: '1d2c1dde49cd3d75fc86c04897ccb89f850e1b66', name: "symbol" })), h("div", { key: '958ad0463d78d1f1b6b62ba4873d3c4cf6d30471', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: '193bca87b4b7e14e1b3e46ddbcd7bd6b0533525a', name: "meta" }), this.interaction !== null && h("slot", { key: 'b324bec370266742e78f2c605ae477776ec6f72d', name: "interaction" })), h("div", { key: '8f986a233e115291526897ba056439e9967026e2', class: "dso-plekinfo-card-content" }, h("slot", { key: 'c5d1bb35230271ee8426580c78d68609d7bbfcd9', name: "content" })))));
+        return (h(Host, { key: '5ef7f04fc52d56058cfb83f2cf7f38ee2aaa514d', "has-symbol": hasSymbol }, h(WrapWijzigactie, { key: '86a0e087b6e22898e7e0ba95c5a87066dce35840', wijzigactie: this.wijzigactie }, h("div", { key: '499a0c1c2664447f632377363d1979cc096d912f', class: "dso-plekinfo-card-symbol", hidden: !hasSymbol }, h("slot", { key: 'b7fa148ff184f4d27daf08be8836e57cdb9c89b5', name: "symbol" })), h("div", { key: 'bd54a1896341a6daf78e419d1e22945ba585be22', class: "dso-plekinfo-card-heading" }, this.href ? (h("a", { href: this.href, target: this.targetBlank ? "_blank" : undefined, rel: this.targetBlank ? "noopener noreferrer" : undefined, class: "heading-anchor", onClick: (e) => this.clickEventHandler(e) }, h("span", { class: "icon-container" }, this.targetBlank ? (h(Fragment, null, h("dso-icon", { icon: "external-link" }), h("span", { class: "sr-only" }, "(Opent andere website in nieuw tabblad)"))) : (h("dso-icon", { icon: "chevron-right" })), h("slot", { name: "heading" })))) : (h("slot", { name: "heading" })), this.metaSlottedElement !== null && h("slot", { key: 'c944131256aee248600ae0c4cb3c3fe28e8c8de4', name: "meta" }), this.interaction !== null && h("slot", { key: 'a7a47b50626fa6082043f2b7e4b084cd94717732', name: "interaction" })), h("div", { key: 'd8ec5b6c520ef1b921360764407301c2b21f6065', class: "dso-plekinfo-card-content" }, h("slot", { key: '8937b99ba8bf6238cfc28abb12fc94ef704bbe7d', name: "content" })))));
     }
     static get is() { return "dso-plekinfo-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js

@@ -6,7 +6,7 @@ export class Progressindicator {
         this.text = i18n(() => this.host, translations);
     }
     render() {
-        return (h(Host, { key: '5dbf53bb970990f65190e278340c3bced752ffe3' }, h("span", { key: 'af6383415121902d46ae23710804f01ef9676350', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'fb5c3262a3d9b98ed5e7ddea82ec00945e82fa37', icon: "spinner" })), h("span", { key: 'c8abd5b693ed453dc29537e47a474792d3b34a95', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
+        return (h(Host, { key: 'fe3ed32cb40c637e15a60fe52108652e6210c6e1' }, h("span", { key: 'e0882cbbb4eb0a6c6a753c058cfcb3dd6d9b474c', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: '1414aab51a8ba1658526aa1c1c9f314bbe499dc6', icon: "spinner" })), h("span", { key: 'b36ce3620fe5035d55c111af9d511affab06cc9e', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label || this.text("label"))));
     }
     static get is() { return "dso-progress-indicator"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/project-item/project-item.js

@@ -1,7 +1,7 @@
 import { Fragment, h } from "@stencil/core";
 export class ProjectItem {
     render() {
-        return (h(Fragment, { key: '2197cd3b5deb8eac8de777b567cc67dc5bf66a14' }, h("div", { key: '1bc1a8653bcf55a574b157ce238fb142da1eb0fa', class: "project-item-header" }, h("div", { key: 'ac0e0553045850a5a17a7cdf818462e7403ee054', class: "project-item-title" }, h("slot", { key: 'f716602a869131e4bdf64c0aa14519b0e9bcb3f8', name: "title" }), this.label && (h("dso-label", { key: '56164b6571282ded8eb101fa9311c1f7084a1928', status: "error", compact: true }, this.label))), h("div", { key: 'd5d2bd13e6a3944850d5b6cee1e5a130db95357f', class: "project-item-actions" }, h("slot", { key: '3200e0e7eea0400a1ce1e877a9371612d4730af3', name: "actions" }))), h("div", { key: 'b49f0871a8fade8f919bac74a35f100cbcd092e8', class: "project-item-info" }, h("div", { key: '5864b4d2256c2815eaa8a2cd56b6e1b67c26eef5', class: "project-item-progress" }, h("slot", { key: '0f1c9703d4b5576699f6c9bc8d6066faba52196a', name: "progress" })), h("div", { key: '911743b8487ba3f9af2cab6fdec7e1be9559e644', class: "project-item-status" }, h("slot", { key: '36cacf904a4aee79510098a33d6aad7503e41df7', name: "status" })))));
+        return (h(Fragment, { key: '8228a048a78405da3a40fd877144f71ee6b3a792' }, h("div", { key: '3a293d639e56021f92b0b9afcb7f4fac2af148fc', class: "project-item-header" }, h("div", { key: 'c3f722c3d10810fc4b1bf533aab80fcf7a762131', class: "project-item-title" }, h("slot", { key: 'e96a0219db04ffe53499a80d83b668953418bbb8', name: "title" }), this.label && (h("dso-label", { key: '9264283168d6b878426dd3d5ddd143bba4c3c82b', status: "error", compact: true }, this.label))), h("div", { key: '9043376e7bac186caf20529887901e150163ff40', class: "project-item-actions" }, h("slot", { key: '2aa279b874905b79bbc8dc1608e5c09fa8cd4ce7', name: "actions" }))), h("div", { key: '2bfecdfd0023cd8f9abe64d62fbc802ad72f35c1', class: "project-item-info" }, h("div", { key: '717e7993e6f0dfbb77961870ed28d7782e94393b', class: "project-item-progress" }, h("slot", { key: 'ac2830d161e2f8f516737f6099946aafa242ce31', name: "progress" })), h("div", { key: 'fa354ecee575ad7095f57519eeb2a284c1a37d9f', class: "project-item-status" }, h("slot", { key: '0db06b8abb6b43253bea3348a438a1c492cd09c4', name: "status" })))));
     }
     static get is() { return "dso-project-item"; }
     static get encapsulation() { return "shadow"; }