npm - @dso-toolkit/core - Versions diffs - 98.0.0 → 99.1.0 - Mend

@dso-toolkit/core 98.0.0 → 99.1.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 (529) hide show

package/dist/collection/components/annotation/annotation.css CHANGED Viewed

@@ -1,12 +1,12 @@
 a {
   overflow-wrap: anywhere;
   background-color: transparent;
-  color: var(--link-color);
+  color: var(--_dso-link-color);
   text-decoration: underline;
   text-underline-offset: 15%;
 }
 a:hover, a:focus-visible {
-  color: var(--link-hover-color);
+  color: var(--_dso-link-hover-color);
   text-decoration: underline;
 }
 a:active {
@@ -16,47 +16,47 @@ a .sr-only + dso-icon {
   margin-inline-start: 0;
 }
 a:visited {
-  color: var(--link-visited-color);
+  color: var(--_dso-link-visited-color);
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom -3px right 0;
-  background-image: var(--_dso-di-background-image, url("./di.svg#download"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-grasgroen)));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).download:focus-visible {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-scampi"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-download-icon, var(--_dso-di-download-scampi)));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-end: var(--_dso-link-icon-padding-inline-end, 1.5em);
   background-position: bottom -3px right 0;
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-grasgroen)));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary)).extern:focus-visible {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-scampi"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-extern-icon, var(--_dso-di-external-link-scampi)));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"] {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
   background-position: bottom -3px left 0;
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-grasgroen"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-call-grasgroen)));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="tel:"]:focus-visible {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-scampi"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-phone-icon, var(--_dso-di-call-scampi)));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"] {
   background-repeat: no-repeat;
   background-size: 1.5em 1.5em;
   padding-inline-start: var(--_dso-link-icon-padding-inline-start, 1.5em);
   background-position: bottom -3px left 0;
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-grasgroen"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-mail-outline-grasgroen)));
 }
 a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hover, a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:focus-visible {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-scampi"));
+  background-image: var(--_dso-link-icon-visibility, var(--_dso-link-mail-icon, var(--_dso-di-mail-outline-scampi)));
 }
 :host {
@@ -69,23 +69,14 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=voegtoe]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=voegtoe]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -97,6 +88,8 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;
@@ -112,23 +105,14 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-alert-error-border-color: #ce3f51;
   --_dso-alert-info-border-color: #6ca4d9;
   --_dso-alert-warning-border-color: #dcd400;
-  --link-color: currentColor;
-  --link-hover-color: currentColor;
-  --link-visited-color: currentColor;
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.download, .download:hover, .download:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#download-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is(.extern, .extern:hover, .extern:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#external-link-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="tel:"], [href^="tel:"]:hover, [href^="tel:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#call-zwart"));
-}
-:host([wijzigactie=verwijder]) a:not(.dso-primary, .dso-secondary, .dso-tertiary):is([href^="mailto:"], [href^="mailto:"]:hover, [href^="mailto:"]:focus-visible) {
-  background-image: var(--_dso-di-background-image, url("./di.svg#mail-outline-zwart"));
-}
-:host([wijzigactie=verwijder]) {
+  --_dso-link-color: currentColor;
+  --_dso-link-hover-color: currentColor;
+  --_dso-link-visited-color: currentColor;
+  --_dso-link-download-icon: var(--_dso-di-download-zwart);
+  --_dso-link-extern-icon: var(--_dso-di-external-link-zwart);
+  --_dso-link-phone-icon: var(--_dso-di-call-zwart);
+  --_dso-link-mail-icon: var(--_dso-di-mail-outline-zwart);
+  --_dso-link-list-chevron-icon: var(--_dso-di-chevron-right-zwart);
   --_dso-icon-button-secondary-active-color: #fff;
   --_dso-icon-button-secondary-active-background-color: #1f472c;
   --_dso-icon-button-secondary-toggled-color: #fff;
@@ -140,6 +124,8 @@ a:where(:not(.dso-primary, .dso-secondary, .dso-tertiary))[href^="mailto:"]:hove
   --_dso-icon-button-tertiary-toggled-color: #275937;
   --_dso-icon-button-tertiary-toggled-hover-color: #1b3e27;
   --_dso-icon-button-tertiary-disabled-color: #999;
+  --_dso-button-tertiary-download-icon: var(--_dso-di-download-zwart);
+  --_dso-button-tertiary-external-link-icon: var(--_dso-di-external-link-zwart);
   --_dso-button-tertiary-color: #191919;
   --_dso-button-tertiary-hover-color: #4c4c4c;
   --_dso-button-tertiary-active-color: #173521;

package/dist/collection/components/attachments-counter/attachments-counter.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { h } from "@stencil/core";
 export class AttachmentsCounter {
     render() {
-        return (h("span", { key: '30257ac6d9437a8c759542b3291a094d2bb288a9', class: "dso-attachments" }, this.count, " ", h("span", { key: '557c0c023d7710a257c35e0e71ffe511f55102d1', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: '93e982abaf1c007f21fea275b05df346ed819078', icon: "paperclip" })));
+        return (h("span", { key: '7079d231283b1ad6c35abd047634f1fa8e09db67', class: "dso-attachments" }, this.count, " ", h("span", { key: 'a314a30c727b39d9e78e1fe4a8c2c4e4074f1e0c', class: "sr-only" }, "bijlage", this.count !== 1 ? "n" : ""), h("dso-icon", { key: 'e7c9a185a6c5fb8e6bc013231d8638c9ca884071', icon: "paperclip" })));
     }
     static get is() { return "dso-attachments-counter"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/autosuggest/autosuggest.css CHANGED Viewed

@@ -83,8 +83,8 @@ mark {
 }
 .extra {
-  font-size: 14px;
-  line-height: 21px;
+  font-size: 0.875rem;
+  line-height: 1.3125rem;
 }
 .extra:not(:first-child) {
   text-align: end;

package/dist/collection/components/autosuggest/autosuggest.js CHANGED Viewed

@@ -385,7 +385,17 @@ export class Autosuggest {
                 : this.listboxItemId(this.selectedSuggestion);
             this.input?.setAttribute("aria-activedescendant", id);
             if (scroll) {
-                document.getElementById(id)?.scrollIntoView({ block: "nearest" });
+                const rootNode = this.host.getRootNode();
+                if (!(rootNode instanceof Document || rootNode instanceof ShadowRoot)) {
+                    console.warn("Autosuggest: rootNode is not instance of Document or ShadowRoot");
+                    return;
+                }
+                if (rootNode.querySelector(`#${id}`)) {
+                    rootNode.querySelector(`#${id}`)?.scrollIntoView({ block: "nearest" });
+                }
+                else {
+                    console.warn(`Autosuggest: Element with id ${id} is not found in the DOM.`);
+                }
             }
         }
     }
@@ -476,7 +486,7 @@ export class Autosuggest {
         else if (this.input) {
             this.input.removeAttribute("aria-controls");
         }
-        return (h(Fragment, null, h("slot", { key: '136616e1785a97334a969ae77e9740b18cf247bd' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
+        return (h(Fragment, null, h("slot", { key: '319f44b80807f98e51decd2a275375216c28363d' }), this.loading && this.showLoading ? (h("div", { class: "autosuggest-progress-box" }, h("dso-progress-indicator", { label: this.loadingLabel }))) : (showListbox && (h(Fragment, null, h("dso-scrollable", { class: "listbox-container", ref: (element) => (this.listboxContainer = element) }, h("div", { class: "listbox", role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: (element) => (this.listbox = element), tabindex: "0" }, (flat &&
             this.showSuggestions &&
             this.suggestions &&
             this.suggestions.map((suggestion) => (h(Option, { id: this.listboxItemId(suggestion), mouseEnter: () => this.selectSuggestion(suggestion), mouseLeave: () => this.resetSelectedSuggestion(), click: this.onOptionClick, selected: (suggestion === this.selectedSuggestion).toString(), suggestion: suggestion, ref: (element) => element && this.listboxItems.push(element), markedSuggestion: this.getMarkedSuggestions(suggestion) })))) ||