@dso-toolkit/core 41.0.1 → 43.1.0

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

@@ -113,13 +113,21 @@
   color: #fff;
 }
 .open-button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .open-button.btn-sm dso-icon,
-.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after {
+.open-button.btn-sm svg.di, .open-button.btn-sm.extern::after, .open-button.btn-sm.download::after, .open-button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.open-button.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.open-button.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .open-button.download::after {
   background: var(--dso-icon, var(--di-download-wit)) no-repeat;
   background-position: center;
@@ -146,6 +154,31 @@
   margin-left: 8px;
   margin-right: -8px;
 }
+.open-button.dso-spinner-left[disabled], .open-button.dso-spinner-right[disabled] {
+  background-color: #39870c;
+  border-color: #39870c;
+  color: #fff;
+}
+.open-button.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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-right: 8px;
+}
+.open-button.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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-left: 8px;
+}
 .open-button:hover {
   cursor: pointer;
 }
@@ -213,13 +246,21 @@
   color: #afcf9d;
 }
 .close-button.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .close-button.btn-sm dso-icon,
-.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after {
+.close-button.btn-sm svg.di, .close-button.btn-sm.extern::after, .close-button.btn-sm.download::after, .close-button.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.close-button.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.close-button.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .close-button.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -258,6 +299,59 @@
   margin-left: 8px;
   margin-right: -8px;
 }
+.close-button.dso-spinner-left[disabled], .close-button.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.close-button.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: top;
+  width: 24px;
+  margin-right: 8px;
+}
+.close-button.dso-spinner-left:not([disabled]):hover::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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-right: 8px;
+}
+.close-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+.close-button.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: top;
+  width: 24px;
+  margin-left: 8px;
+}
+.close-button.dso-spinner-right:not([disabled]):hover::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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-left: 8px;
+}
+.close-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
+}
 .close-button::before {
   background: var(--dso-icon, var(--di-times)) no-repeat;
   background-position: center;

package/dist/collection/components/highlight-box/highlight-box.css

@@ -48,7 +48,7 @@
   margin-top: 48px;
 }
 .dso-highlight-box.dso-has-counter {
-  padding-top: 40px;
+  padding-top: 2.5rem;
   position: relative;
 }
 .dso-highlight-box .dso-step-counter {
@@ -57,15 +57,20 @@
   border-radius: 50%;
   box-sizing: content-box;
   color: #fff;
-  font-size: 1.25em;
+  font-size: 1.25rem;
   font-weight: 500;
-  height: 32px;
+  height: 2rem;
   left: 16px;
-  line-height: 32px;
+  line-height: 2rem;
   position: absolute;
   text-align: center;
-  top: -24px;
-  width: 32px;
+  top: -1.5rem;
+  width: 2rem;
+}
+.dso-highlight-box .dso-step-counter svg.di {
+  height: 1.5rem;
+  margin-top: 0.25rem;
+  width: 1.5rem;
 }
 .dso-highlight-box dso-icon {
   vertical-align: text-top;

package/dist/collection/components/icon/icon.js

@@ -77,7 +77,6 @@ import sortAscending from '@dso-toolkit/sources/src/icons/sort-ascending.svg';
 import sortDescending from '@dso-toolkit/sources/src/icons/sort-descending.svg';
 import sort from '@dso-toolkit/sources/src/icons/sort.svg';
 import sound from '@dso-toolkit/sources/src/icons/sound.svg';
-import statusForbidden from '@dso-toolkit/sources/src/icons/status-forbidden.svg';
 import statusDanger from '@dso-toolkit/sources/src/icons/status-danger.svg';
 import statusInfo from '@dso-toolkit/sources/src/icons/status-info.svg';
 import statusSuccess from '@dso-toolkit/sources/src/icons/status-success.svg';
@@ -171,7 +170,6 @@ const icons = [
   { alias: 'sort', svg: sort },
   { alias: 'sound', svg: sound },
   { alias: 'status-danger', svg: statusDanger },
-  { alias: 'status-forbidden', svg: statusForbidden },
   { alias: 'status-info', svg: statusInfo },
   { alias: 'status-success', svg: statusSuccess },
   { alias: 'status-warning', svg: statusWarning },

package/dist/collection/components/image-overlay/image-overlay.css

@@ -86,13 +86,21 @@ button::-moz-focus-inner {
   color: #afcf9d;
 }
 .open.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .open.btn-sm dso-icon,
-.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after {
+.open.btn-sm svg.di, .open.btn-sm.extern::after, .open.btn-sm.download::after, .open.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.open.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.open.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .open.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -131,6 +139,59 @@ button::-moz-focus-inner {
   clip: rect(0, 0, 0, 0);
   border: 0;
 }
+.open.dso-spinner-left[disabled], .open.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.open.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: top;
+  width: 24px;
+  margin-right: 8px;
+}
+.open.dso-spinner-left:not([disabled]):hover::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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-right: 8px;
+}
+.open.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+.open.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: top;
+  width: 24px;
+  margin-left: 8px;
+}
+.open.dso-spinner-right:not([disabled]):hover::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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-left: 8px;
+}
+.open.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
+}
 
 .dimmer {
   position: fixed;
@@ -216,13 +277,21 @@ button::-moz-focus-inner {
   color: #afcf9d;
 }
 .close.btn-sm {
-  line-height: 16px;
+  line-height: 1rem;
 }
 .close.btn-sm dso-icon,
-.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after {
+.close.btn-sm svg.di, .close.btn-sm.extern::after, .close.btn-sm.download::after, .close.btn-sm.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
+.close.btn-sm.dso-spinner-left::before {
+  height: 16px;
+  width: 16px;
+}
+.close.btn-sm.dso-spinner-right::after {
+  height: 16px;
+  width: 16px;
+}
 .close.download::after {
   background: var(--dso-icon, var(--di-download)) no-repeat;
   background-position: center;
@@ -260,4 +329,57 @@ button::-moz-focus-inner {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   border: 0;
+}
+.close.dso-spinner-left[disabled], .close.dso-spinner-right[disabled] {
+  background-color: #fff;
+  border-color: #39870c;
+  color: #39870c;
+}
+.close.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: top;
+  width: 24px;
+  margin-right: 8px;
+}
+.close.dso-spinner-left:not([disabled]):hover::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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-right: 8px;
+}
+.close.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+  height: 16px;
+  width: 16px;
+}
+.close.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: top;
+  width: 24px;
+  margin-left: 8px;
+}
+.close.dso-spinner-right:not([disabled]):hover::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: %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");
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 24px;
+  vertical-align: top;
+  width: 24px;
+  margin-left: 8px;
+}
+.close.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+  height: 16px;
+  width: 16px;
 }

package/dist/collection/components/image-overlay/image-overlay.js

@@ -1,29 +1,67 @@
-import { Component, Element, forceUpdate, h, Host, State } from "@stencil/core";
+import { Component, Element, forceUpdate, h, Host, Listen, State } from "@stencil/core";
+import debounce from 'debounce';
 import { createFocusTrap } from 'focus-trap';
 export class ImageOverlay {
   constructor() {
     this.active = false;
     this.focused = false;
+    this.zoomable = false;
+  }
+  loadListener(event) {
+    if (event.target instanceof HTMLImageElement) {
+      this.setZoomable(event.target);
+    }
   }
   componentDidLoad() {
-    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));
+    this.resizeObserver = new ResizeObserver(debounce(() => {
+      const imgElement = this.host.querySelector('img');
+      if (imgElement instanceof HTMLImageElement) {
+        this.setZoomable(imgElement);
+      }
+    }, 200));
+    this.mutationObserver = new MutationObserver((e) => {
+      var _a, _b;
+      forceUpdate(this.host);
+      if (((_a = e[0]) === null || _a === void 0 ? void 0 : _a.type) === 'childList') {
+        (_b = this.resizeObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+        // <img> is gone or a new element.
+        this.initZoomableImage();
+      }
+    });
     this.mutationObserver.observe(this.host, {
       attributes: true,
-      subtree: true
+      subtree: true,
+      attributeFilter: ['src', 'alt'],
+      childList: true,
     });
+    this.initZoomableImage();
   }
   disconnectedCallback() {
-    var _a, _b;
+    var _a, _b, _c;
     (_a = this.trap) === null || _a === void 0 ? void 0 : _a.deactivate();
     (_b = this.mutationObserver) === null || _b === void 0 ? void 0 : _b.disconnect();
+    (_c = this.resizeObserver) === null || _c === void 0 ? void 0 : _c.disconnect();
+  }
+  initZoomableImage() {
+    var _a;
+    const imgElement = this.host.querySelector('img');
+    if (!(imgElement instanceof HTMLImageElement)) {
+      return;
+    }
+    // Due to timing issues where the image is loaded before we listen to load events we double check if the image is already complete.
+    if (imgElement.complete) {
+      this.setZoomable(imgElement);
+    }
+    (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.observe(imgElement);
+  }
+  setZoomable(imageElement) {
+    const { width, naturalWidth, height, naturalHeight } = imageElement;
+    this.zoomable = width < naturalWidth || height < naturalHeight;
   }
   render() {
     var _a;
     const { src, alt } = (_a = this.host.querySelector('img')) !== null && _a !== void 0 ? _a : {};
-    return (h(Host, { tabindex: this.focused ? -1 : 0, onFocus: () => {
-        var _a;
-        (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus();
-      } },
+    return (h(Host, { tabindex: this.focused || !this.zoomable ? -1 : 0, onFocus: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } },
       this.active && src && alt && (h("div", { class: "dimmer", ref: element => this.wrapperElement = element },
         h("div", { class: "wrapper" },
           h("img", { src: src, alt: alt }),
@@ -31,9 +69,9 @@ export class ImageOverlay {
             h("dso-icon", { icon: "times" }),
             h("span", null, "Sluiten"))))),
       h("slot", null),
-      h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
+      this.zoomable && (h("button", { type: "button", class: "open", ref: element => this.buttonElement = element, onClick: () => this.active = true, onFocus: () => this.focused = true, onBlur: () => this.focused = false },
         h("dso-icon", { icon: "external-link" }),
-        h("span", null, "Afbeelding vergroot weergeven"))));
+        h("span", null, "Afbeelding vergroot weergeven")))));
   }
   componentDidRender() {
     var _a, _b;
@@ -66,7 +104,15 @@ export class ImageOverlay {
   }; }
   static get states() { return {
     "active": {},
-    "focused": {}
+    "focused": {},
+    "zoomable": {}
   }; }
   static get elementRef() { return "host"; }
+  static get listeners() { return [{
+      "name": "load",
+      "method": "loadListener",
+      "target": undefined,
+      "capture": true,
+      "passive": false
+    }]; }
 }

package/dist/collection/components/info-button/info-button.js

@@ -1,15 +1,19 @@
-import { h, Component, Event, Prop } from '@stencil/core';
+import { h, Component, Event, Prop, Method } from '@stencil/core';
 import clsx from 'clsx';
 export class InfoButton {
   constructor() {
     this.label = 'Toelichting bij optie';
   }
+  async setFocus() {
+    var _a;
+    (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
+  }
   handleToggle(e) {
     this.active = !this.active;
     this.toggle.emit({ originalEvent: e, active: this.active });
   }
   render() {
-    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e) },
+    return (h("button", { type: "button", class: clsx('btn', { 'dso-open': !!this.active, 'dso-info-secondary': !!this.secondary }), "aria-expanded": typeof this.active === 'boolean' ? this.active.toString() : undefined, onClick: e => this.handleToggle(e), ref: element => (this.button = element) },
       h("span", { class: "sr-only" }, this.label)));
   }
   static get is() { return "dso-info-button"; }
@@ -94,4 +98,22 @@ export class InfoButton {
         }
       }
     }]; }
+  static get methods() { return {
+    "setFocus": {
+      "complexType": {
+        "signature": "() => Promise<void>",
+        "parameters": [],
+        "references": {
+          "Promise": {
+            "location": "global"
+          }
+        },
+        "return": "Promise<void>"
+      },
+      "docs": {
+        "text": "",
+        "tags": []
+      }
+    }
+  }; }
 }

package/dist/collection/components/label/label.css

@@ -1,5 +1,6 @@
 :host {
   display: inline-block;
+  max-width: 100%;
 }
 
 *,
@@ -38,7 +39,7 @@
   border-radius: 0 4px 4px 0;
   color: inherit;
   float: right;
-  font-size: 16px;
+  font-size: 1rem;
   margin-bottom: -4px;
   margin-left: 8px;
   margin-right: -4px;
@@ -81,4 +82,16 @@
   color: #191919;
   border: 1px solid #ccc;
   padding: 3px 7px;
+}
+.dso-label.dso-hover .dso-label-content {
+  text-decoration: line-through;
+}
+
+.dso-truncate.dso-label-content {
+  display: inline-block;
+  max-width: 184px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: bottom;
+  white-space: nowrap;
 }