@dso-toolkit/core 41.0.0 → 43.0.0

package/dist/collection/components/alert/alert.css

@@ -10,10 +10,10 @@
 }
 :host {
   display: block;
-  --di-status-success: url("data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' style='fill: %2339870c'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z' style='fill: white'/%3e %3c/svg%3e");
-  --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e");
-  --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
-  --di-status-info: url("data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' style='fill: %232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z' style='fill: white'/%3e %3c/svg%3e");
+  --di-status-success: url("data:image/svg+xml,%3csvg id='status-success' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%2339870c'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M10.11%2c18%2c5.29%2c13.31A.92.92%2c0%2c0%2c1%2c5.3%2c12a1%2c1%2c0%2c0%2c1%2c1.41%2c0l3.4%2c3.3%2c7.18-7a1%2c1%2c0%2c0%2c1%2c1.41%2c0%2c.92.92%2c0%2c0%2c1%2c0%2c1.35Z' fill='white'/%3e %3c/svg%3e");
+  --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e");
+  --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
+  --di-status-info: url("data:image/svg+xml,%3csvg id='status-info' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3ccircle cx='12' cy='12' r='11' fill='%232b5780'/%3e %3cpath d='M12%2c1A11%2c11%2c0%2c1%2c1%2c1%2c12%2c11%2c11%2c0%2c0%2c1%2c12%2c1m0-1A12%2c12%2c0%2c1%2c0%2c24%2c12%2c12%2c12%2c0%2c0%2c0%2c12%2c0Z' fill='white'/%3e %3c/g%3e %3cpath d='M11%2c8a1%2c1%2c0%2c1%2c1%2c1%2c1A1%2c1%2c0%2c0%2c1%2c11%2c8Zm2%2c8.79V11.21A1.12%2c1.12%2c0%2c0%2c0%2c12%2c10a1.12%2c1.12%2c0%2c0%2c0-1%2c1.21v5.58A1.12%2c1.12%2c0%2c0%2c0%2c12%2c18%2c1.12%2c1.12%2c0%2c0%2c0%2c13%2c16.79Z' fill='white'/%3e %3c/svg%3e");
   --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");
   --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
 }

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

@@ -25,14 +25,17 @@ export class Autosuggest {
      */
     this.suggestOnFocus = false;
     this.showSuggestions = false;
+    this.notFound = false;
     this.listboxId = v4();
     this.inputId = v4();
     this.labelId = v4();
     this.debouncedEmitValue = debounce((value) => this.changeEmitter.emit(value), 200);
+    this.inputValue = '';
     this.onInput = (event) => {
       if (!(event.target instanceof HTMLInputElement)) {
         throw new Error("event.target is not instanceof HTMLInputElement");
       }
+      this.inputValue = event.target.value;
       this.debouncedEmitValue(event.target.value.match(/(\S+)/g) ? event.target.value : '');
     };
     this.onFocusIn = () => {
@@ -78,15 +81,15 @@ export class Autosuggest {
   }
   suggestionsWatcher() {
     this.resetSelectedSuggestion();
-    if (!this.showSuggestions && this.suggestions.length > 0) {
+    if ((!this.showSuggestions || !this.notFound) && this.inputValue) {
       this.openSuggestions();
     }
-    else if (this.showSuggestions && this.suggestions.length === 0) {
+    else if ((this.showSuggestions || this.notFound) && !this.inputValue) {
       this.closeSuggestions();
     }
   }
   onDocumentClick(event) {
-    if (this.showSuggestions &&
+    if ((this.showSuggestions || this.notFound) &&
       this.listbox &&
       event.target instanceof Node &&
       !this.listbox.contains(event.target) &&
@@ -188,16 +191,18 @@ export class Autosuggest {
   }
   openSuggestions(selectSuggestion) {
     this.showSuggestions = this.suggestions.length > 0;
-    this.input.setAttribute("aria-expanded", this.showSuggestions.toString());
-    if (selectSuggestion === 'first') {
+    this.notFound = this.suggestions.length === 0;
+    this.input.setAttribute("aria-expanded", (this.showSuggestions || this.notFound).toString());
+    if (this.showSuggestions && selectSuggestion === 'first') {
       this.selectFirstSuggestion();
     }
-    else if (selectSuggestion === 'last') {
+    else if (this.showSuggestions && selectSuggestion === 'last') {
       this.selectLastSuggestion();
     }
   }
   closeSuggestions() {
     this.showSuggestions = false;
+    this.notFound = false;
     this.input.setAttribute("aria-expanded", "false");
     this.selectFirstSuggestion();
   }
@@ -220,13 +225,18 @@ export class Autosuggest {
       this.loading
         ? h("div", { class: "autosuggest-progress-box" },
           h("dso-progress-indicator", { label: this.loadingLabel }))
-        : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions }, this.showSuggestions
+        : h("ul", { role: "listbox", id: this.listboxId, "aria-labelledby": this.labelId, ref: element => this.listbox = element, hidden: !this.showSuggestions && !this.notFound }, this.showSuggestions
           ? this.suggestions.map((suggestion) => (h("li", { role: "option", id: this.listboxItemId(suggestion), key: suggestion.value, onMouseEnter: () => this.selectSuggestion(suggestion), onMouseLeave: () => this.resetSelectedSuggestion(), onClick: () => this.pickSelectedValue(), "aria-selected": (suggestion === this.selectedSuggestion).toString(), "aria-label": suggestion.value },
             h("span", { class: "value" }, this.markTerms(suggestion.value, terms)),
             suggestion.type
               ? (h("span", { class: "type" }, suggestion.type))
               : undefined)))
-          : undefined)));
+          : this.notFound
+            ? h("li", null,
+              h("span", { class: "value" }, !this.notFoundLabel
+                ? this.markTerms(`${this.inputValue} is niet gevonden.`, terms)
+                : h("span", null, this.notFoundLabel)))
+            : undefined)));
   }
   static get is() { return "dso-autosuggest"; }
   static get encapsulation() { return "scoped"; }
@@ -293,6 +303,23 @@ export class Autosuggest {
       "reflect": false,
       "defaultValue": "\"Een moment geduld.\""
     },
+    "notFoundLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string | undefined",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "To show text when no results are found."
+      },
+      "attribute": "not-found-label",
+      "reflect": false
+    },
     "suggestOnFocus": {
       "type": "boolean",
       "mutable": false,
@@ -314,7 +341,8 @@ export class Autosuggest {
   }; }
   static get states() { return {
     "showSuggestions": {},
-    "selectedSuggestion": {}
+    "selectedSuggestion": {},
+    "notFound": {}
   }; }
   static get events() { return [{
       "method": "selectEmitter",

package/dist/collection/components/autosuggest/autosuggest.template.js

@@ -1,6 +1,6 @@
 import { html } from 'lit-html';
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel }, children) {
+export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch, suggestOnFocus, loading, loadingLabel, notFoundLabel }, children) {
   return html `
     <dso-autosuggest
       .suggestions=${suggestions}
@@ -10,6 +10,7 @@ export function autosuggestTemplate({ suggestions, onSelect, onChange, onSearch,
       ?suggest-on-focus=${suggestOnFocus}
       ?loading=${loading}
       loading-label=${ifDefined(loadingLabel)}
+      not-found-label=${ifDefined(notFoundLabel)}
     >
       ${children}
     </dso-autosuggest>

package/dist/collection/components/badge/badge.css

@@ -25,8 +25,10 @@
   color: #fff;
   display: inline-block;
   font-size: 0.875em;
-  line-height: 1em;
+  line-height: 1;
+  min-width: calc(1 + 8px);
   padding: 4px 8px;
+  text-align: center;
 }
 .dso-badge.badge-info {
   background-color: #6ca4d9;
@@ -52,4 +54,5 @@
   background-color: #fff;
   color: #191919;
   outline: 1px solid #191919;
+  outline-offset: -1px;
 }

package/dist/collection/components/banner/banner.css

@@ -1,7 +1,7 @@
 :host {
   display: block;
-  --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' style='fill: white'/%3e %3c/svg%3e");
-  --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' style='fill: %23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' style='fill: white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
+  --di-status-danger: url("data:image/svg+xml,%3csvg id='status-danger-line' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23ce3f51'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M12%2c16a1%2c1%2c0%2c0%2c1-1-.91V8.91a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c12%2c16Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c12%2c17Z' fill='white'/%3e %3c/svg%3e");
+  --di-status-warning: url("data:image/svg+xml,%3csvg id='status-warning' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cg%3e %3cpath d='M22.6%2c18.51c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4a1.7%2c1.7%2c0%2c0%2c1%2c3.12%2c0Z' fill='%23dcd400'/%3e %3cpath d='M12%2c3a1.9%2c1.9%2c0%2c0%2c1%2c1.56%2c1l9%2c14.48c.86%2c1.37.29%2c2.49-1.25%2c2.49H2.65C1.11%2c21%2c.54%2c19.88%2c1.4%2c18.51L10.44%2c4A1.9%2c1.9%2c0%2c0%2c1%2c12%2c3m0-1A2.89%2c2.89%2c0%2c0%2c0%2c9.6%2c3.5L.55%2c18a2.75%2c2.75%2c0%2c0%2c0-.28%2c2.81A2.59%2c2.59%2c0%2c0%2c0%2c2.65%2c22h18.7a2.59%2c2.59%2c0%2c0%2c0%2c2.38-1.21A2.75%2c2.75%2c0%2c0%2c0%2c23.45%2c18L14.4%2c3.5A2.89%2c2.89%2c0%2c0%2c0%2c12%2c2Z' fill='white'/%3e %3c/g%3e %3cpath d='M11.73%2c15.85a1%2c1%2c0%2c0%2c1-1-.91V8.76a1%2c1%2c0%2c0%2c1%2c2%2c0v6.18A1%2c1%2c0%2c0%2c1%2c11.73%2c15.85Zm0%2c1a1%2c1%2c0%2c1%2c0%2c1%2c1A1%2c1%2c0%2c0%2c0%2c11.73%2c16.85Z'/%3e %3c/svg%3e");
   --di-download-grijs90: url("data:image/svg+xml,%3csvg id='download' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M18.72%2c10.44%2c12%2c17l-6.7-6.52C4.8%2c10%2c5%2c9.63%2c5.63%2c9.63H8.5V1.82A.8.8%2c0%2c0%2c1%2c9.28%2c1h5.44a.8.8%2c0%2c0%2c1%2c.78.82V9.61h2.87C19%2c9.6%2c19.2%2c10%2c18.72%2c10.44ZM1%2c17v6H23V17Zm16%2c3a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c17%2c20Zm5%2c0a2%2c2%2c0%2c1%2c1-2-2A2%2c2%2c0%2c0%2c1%2c22%2c20Z'/%3e %3c/svg%3e");
   --di-external-link-grijs90: url("data:image/svg+xml,%3csvg id='external-link' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' style='color: %23191919%3b'%3e %3cpath fill='currentColor' d='M19%2c6V9.69c0%2c.33-.2.41-.43.17L17.06%2c8.35l-3.35%2c3.36a1%2c1%2c0%2c0%2c1-1.42%2c0%2c1%2c1%2c0%2c0%2c1%2c0-1.42l3.36-3.35L14.14%2c5.43C13.9%2c5.19%2c14%2c5%2c14.31%2c5H19V6ZM18%2c17V13a1%2c1%2c0%2c0%2c0-2%2c0v4a1%2c1%2c0%2c0%2c1-1%2c1H7a1%2c1%2c0%2c0%2c1-1-1V9A1%2c1%2c0%2c0%2c1%2c7%2c8h4a1%2c1%2c0%2c0%2c0%2c0-2H7A3%2c3%2c0%2c0%2c0%2c4%2c9v8a3%2c3%2c0%2c0%2c0%2c3%2c3h8A3%2c3%2c0%2c0%2c0%2c18%2c17Z'/%3e %3c/svg%3e");
 }

package/dist/collection/components/header/header.css

@@ -52,6 +52,152 @@
 .logout {
   margin-right: 16px;
 }
+.login .dso-tertiary,
+.logout .dso-tertiary {
+  display: inline-block;
+  font-size: 1em;
+  font-weight: 500;
+  margin-bottom: 0;
+  text-decoration: none;
+  touch-action: manipulation;
+  text-align: left;
+  user-select: none;
+  vertical-align: middle;
+  border: 0;
+  color: #39870c;
+  line-height: 1;
+  padding: 0;
+  background-color: transparent;
+  cursor: pointer;
+  font-family: Asap, sans-serif;
+  font-weight: 600;
+  vertical-align: text-bottom;
+}
+.login .dso-tertiary:focus, .login .dso-tertiary:focus-visible,
+.logout .dso-tertiary:focus,
+.logout .dso-tertiary:focus-visible {
+  outline-offset: 2px;
+}
+.login .dso-tertiary:active,
+.logout .dso-tertiary:active {
+  outline: 0;
+}
+.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,
+.logout .dso-tertiary.extern::after,
+.logout .dso-tertiary.download::after {
+  content: "";
+  display: inline-block;
+  height: 1.5em;
+  margin-left: 8px;
+  vertical-align: top;
+  width: 1.5em;
+}
+.login .dso-tertiary[disabled],
+.logout .dso-tertiary[disabled] {
+  color: #afcf9d;
+}
+.login .dso-tertiary[disabled].dso-spinner-left, .login .dso-tertiary[disabled].dso-spinner-right,
+.logout .dso-tertiary[disabled].dso-spinner-left,
+.logout .dso-tertiary[disabled].dso-spinner-right {
+  color: #39870c;
+}
+.login .dso-tertiary:not([disabled]):hover,
+.logout .dso-tertiary:not([disabled]):hover {
+  color: #676cb0;
+  text-decoration: underline;
+}
+.login .dso-tertiary:not([disabled]):active,
+.logout .dso-tertiary:not([disabled]):active {
+  color: #676cb0;
+}
+.login .dso-tertiary.btn-align,
+.logout .dso-tertiary.btn-align {
+  line-height: calc(1.5em - 1px);
+  padding: 11px 0;
+  position: relative;
+}
+.login .dso-tertiary.extern::after, .login .dso-tertiary.download::after,
+.logout .dso-tertiary.extern::after,
+.logout .dso-tertiary.download::after {
+  position: relative;
+  top: -2px;
+}
+.login .dso-tertiary.download::after,
+.logout .dso-tertiary.download::after {
+  background: var(--dso-icon, var(--di-download)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+.login .dso-tertiary.download[disabled]::after,
+.logout .dso-tertiary.download[disabled]::after {
+  --dso-icon: var(--di-download-grasgroen-40);
+}
+.login .dso-tertiary.download:not([disabled]):hover::after, .login .dso-tertiary.download:not([disabled]):active::after,
+.logout .dso-tertiary.download:not([disabled]):hover::after,
+.logout .dso-tertiary.download:not([disabled]):active::after {
+  --dso-icon: var(--di-download-scampi);
+}
+.login .dso-tertiary.extern::after,
+.logout .dso-tertiary.extern::after {
+  background: var(--dso-icon, var(--di-external-link)) no-repeat;
+  background-position: center;
+  background-size: cover;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+}
+.login .dso-tertiary.extern[disabled]::after,
+.logout .dso-tertiary.extern[disabled]::after {
+  --dso-icon: var(--di-external-link-grasgroen-40);
+}
+.login .dso-tertiary.extern:not([disabled]):hover::after, .login .dso-tertiary.extern:not([disabled]):active::after,
+.logout .dso-tertiary.extern:not([disabled]):hover::after,
+.logout .dso-tertiary.extern:not([disabled]):active::after {
+  --dso-icon: var(--di-external-link-scampi);
+}
+.login .dso-tertiary.dso-spinner-left::before,
+.logout .dso-tertiary.dso-spinner-left::before {
+  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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-right: 8px;
+}
+.login .dso-tertiary.dso-spinner-right::after,
+.logout .dso-tertiary.dso-spinner-right::after {
+  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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: middle;
+  width: 24px;
+  margin-left: 8px;
+}
+.login .dso-tertiary dso-icon + span:not(.sr-only),
+.login .dso-tertiary svg.di + span:not(.sr-only),
+.login .dso-tertiary span:not(.sr-only) + dso-icon,
+.login .dso-tertiary span:not(.sr-only) + svg.di,
+.logout .dso-tertiary dso-icon + span:not(.sr-only),
+.logout .dso-tertiary svg.di + span:not(.sr-only),
+.logout .dso-tertiary span:not(.sr-only) + dso-icon,
+.logout .dso-tertiary span:not(.sr-only) + svg.di {
+  margin-left: 8px;
+}
+.login .dso-tertiary dso-icon,
+.login .dso-tertiary svg.di,
+.login .dso-tertiary span,
+.logout .dso-tertiary dso-icon,
+.logout .dso-tertiary svg.di,
+.logout .dso-tertiary span {
+  vertical-align: middle;
+}
 
 .profile a,
 .logout a,

package/dist/collection/components/header/header.interfaces.js

@@ -0,0 +1 @@
+export {};