npm - @dso-toolkit/core - Versions diffs - 56.0.0 → 57.0.0 - Mend

@dso-toolkit/core 56.0.0 → 57.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (152) hide show

package/dist/collection/components/map-controls/map-controls.css CHANGED Viewed

@@ -98,19 +98,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.toggle-visibility-button.btn-sm {
+.toggle-visibility-button.dso-small {
   line-height: 1rem;
 }
-.toggle-visibility-button.btn-sm dso-icon,
-.toggle-visibility-button.btn-sm svg.di, .toggle-visibility-button.btn-sm.extern::after, .toggle-visibility-button.btn-sm.download::after, .toggle-visibility-button.btn-sm.dso-spinner::before {
+.toggle-visibility-button.dso-small dso-icon,
+.toggle-visibility-button.dso-small svg.di, .toggle-visibility-button.dso-small.extern::after, .toggle-visibility-button.dso-small.download::after, .toggle-visibility-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.toggle-visibility-button.btn-sm.dso-spinner-left::before {
+.toggle-visibility-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.toggle-visibility-button.btn-sm.dso-spinner-right::after {
+.toggle-visibility-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -149,7 +149,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.toggle-visibility-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.toggle-visibility-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -173,7 +173,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.toggle-visibility-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.toggle-visibility-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -244,19 +244,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.zoom-buttons button.btn-sm {
+.zoom-buttons button.dso-small {
   line-height: 1rem;
 }
-.zoom-buttons button.btn-sm dso-icon,
-.zoom-buttons button.btn-sm svg.di, .zoom-buttons button.btn-sm.extern::after, .zoom-buttons button.btn-sm.download::after, .zoom-buttons button.btn-sm.dso-spinner::before {
+.zoom-buttons button.dso-small dso-icon,
+.zoom-buttons button.dso-small svg.di, .zoom-buttons button.dso-small.extern::after, .zoom-buttons button.dso-small.download::after, .zoom-buttons button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.zoom-buttons button.btn-sm.dso-spinner-left::before {
+.zoom-buttons button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.zoom-buttons button.btn-sm.dso-spinner-right::after {
+.zoom-buttons button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -295,7 +295,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.zoom-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.zoom-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -319,7 +319,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.zoom-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.zoom-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -376,11 +376,17 @@ button::-moz-focus-inner {
 .close-button:not([disabled]):active {
   color: #173521;
 }
-.close-button.btn-align {
+.close-button.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+.close-button.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .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;

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

@@ -154,7 +154,7 @@ button::-moz-focus-inner {
   text-align: right;
 }
 @media screen and (max-width: 767px) {
-  .dso-modal .dso-footer .btn + .btn, .dso-modal .dso-footer .btn + .dso-primary, .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn, .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .btn, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .btn, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+  .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-left: 0;
   }
   .dso-modal .dso-footer button {
@@ -165,16 +165,15 @@ button::-moz-focus-inner {
     margin-top: 8px;
   }
   .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span, .dso-modal .dso-footer button.btn-link,
-  .dso-modal .dso-footer button.btn-link span {
+  .dso-modal .dso-footer button.dso-tertiary span {
     float: none;
   }
 }
 @media screen and (min-width: 768px) {
-  .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .btn-default, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .btn-default, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .btn-default, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .btn-default {
+  .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
     margin-left: 16px;
   }
-  .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .btn + .btn-link, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn-link, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .btn-link, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .btn-link {
+  .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-left: 0;
   }
 }
@@ -183,7 +182,7 @@ button::-moz-focus-inner {
     max-width: 100%;
     margin-top: 0;
   }
-  .dso-modal .dso-footer .btn + .btn, .dso-modal .dso-footer .btn + .dso-primary, .dso-modal .dso-footer .btn + .dso-secondary, .dso-modal .dso-footer .btn + .dso-tertiary, .dso-modal .dso-footer .dso-primary + .btn, .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .btn, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .btn, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+  .dso-modal .dso-footer .dso-primary + .dso-primary, .dso-modal .dso-footer .dso-primary + .dso-secondary, .dso-modal .dso-footer .dso-primary + .dso-tertiary, .dso-modal .dso-footer .dso-secondary + .dso-primary, .dso-modal .dso-footer .dso-secondary + .dso-secondary, .dso-modal .dso-footer .dso-secondary + .dso-tertiary, .dso-modal .dso-footer .dso-tertiary + .dso-primary, .dso-modal .dso-footer .dso-tertiary + .dso-secondary, .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-left: 0;
   }
   .dso-modal .dso-footer button {
@@ -194,8 +193,7 @@ button::-moz-focus-inner {
     margin-top: 8px;
   }
   .dso-modal .dso-footer button.dso-tertiary,
-  .dso-modal .dso-footer button.dso-tertiary span, .dso-modal .dso-footer button.btn-link,
-  .dso-modal .dso-footer button.btn-link span {
+  .dso-modal .dso-footer button.dso-tertiary span {
     float: none;
   }
 }

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

@@ -92,11 +92,17 @@ button.toggle-note:not([disabled]):hover {
 button.toggle-note:not([disabled]):active {
   color: #173521;
 }
-button.toggle-note.btn-align {
+button.toggle-note.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+button.toggle-note.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 button.toggle-note.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;

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

@@ -138,7 +138,7 @@
   text-align: right;
 }
 @media screen and (max-width: 767px) {
-  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-left: 0;
   }
   :host .dso-modal .dso-footer button {
@@ -149,16 +149,15 @@
     margin-top: 8px;
   }
   :host .dso-modal .dso-footer button.dso-tertiary,
-  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
-  :host .dso-modal .dso-footer button.btn-link span {
+  :host .dso-modal .dso-footer button.dso-tertiary span {
     float: none;
   }
 }
 @media screen and (min-width: 768px) {
-  :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .btn-default, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .btn-default, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .btn-default, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .btn-default {
+  :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary {
     margin-left: 16px;
   }
-  :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .btn + .btn-link, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn-link, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn-link, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn-link {
+  :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-left: 0;
   }
 }
@@ -167,7 +166,7 @@
     max-width: 100%;
     margin-top: 0;
   }
-  :host .dso-modal .dso-footer .btn + .btn, :host .dso-modal .dso-footer .btn + .dso-primary, :host .dso-modal .dso-footer .btn + .dso-secondary, :host .dso-modal .dso-footer .btn + .dso-tertiary, :host .dso-modal .dso-footer .dso-primary + .btn, :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .btn, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .btn, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
+  :host .dso-modal .dso-footer .dso-primary + .dso-primary, :host .dso-modal .dso-footer .dso-primary + .dso-secondary, :host .dso-modal .dso-footer .dso-primary + .dso-tertiary, :host .dso-modal .dso-footer .dso-secondary + .dso-primary, :host .dso-modal .dso-footer .dso-secondary + .dso-secondary, :host .dso-modal .dso-footer .dso-secondary + .dso-tertiary, :host .dso-modal .dso-footer .dso-tertiary + .dso-primary, :host .dso-modal .dso-footer .dso-tertiary + .dso-secondary, :host .dso-modal .dso-footer .dso-tertiary + .dso-tertiary {
     margin-left: 0;
   }
   :host .dso-modal .dso-footer button {
@@ -178,8 +177,7 @@
     margin-top: 8px;
   }
   :host .dso-modal .dso-footer button.dso-tertiary,
-  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
-  :host .dso-modal .dso-footer button.btn-link span {
+  :host .dso-modal .dso-footer button.dso-tertiary span {
     float: none;
   }
 }
@@ -288,11 +286,17 @@
 .dso-tertiary:not([disabled]):active {
   color: #173521;
 }
-.dso-tertiary.btn-align {
+.dso-tertiary.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+.dso-tertiary.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .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;

package/dist/collection/components/viewer-grid/viewer-grid.css CHANGED Viewed

@@ -138,13 +138,21 @@ button::-moz-focus-inner {
 .overlay-close-button:not([disabled]):active {
   color: #173521;
 }
-.shrink.btn-align,
-.expand.btn-align,
-.overlay-close-button.btn-align {
+.shrink.dso-align,
+.expand.dso-align,
+.overlay-close-button.dso-align {
   line-height: calc(1.5em - 1px);
   padding: 11px 0;
   position: relative;
 }
+.shrink.dso-truncate,
+.expand.dso-truncate,
+.overlay-close-button.dso-truncate {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
 .shrink.dso-spinner-left::before,
 .expand.dso-spinner-left::before,
 .overlay-close-button.dso-spinner-left::before {
@@ -332,19 +340,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.sizing-buttons button.btn-sm {
+.sizing-buttons button.dso-small {
   line-height: 1rem;
 }
-.sizing-buttons button.btn-sm dso-icon,
-.sizing-buttons button.btn-sm svg.di, .sizing-buttons button.btn-sm.extern::after, .sizing-buttons button.btn-sm.download::after, .sizing-buttons button.btn-sm.dso-spinner::before {
+.sizing-buttons button.dso-small dso-icon,
+.sizing-buttons button.dso-small svg.di, .sizing-buttons button.dso-small.extern::after, .sizing-buttons button.dso-small.download::after, .sizing-buttons button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.sizing-buttons button.btn-sm.dso-spinner-left::before {
+.sizing-buttons button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.sizing-buttons button.btn-sm.dso-spinner-right::after {
+.sizing-buttons button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -383,7 +391,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.sizing-buttons button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.sizing-buttons button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -407,7 +415,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.sizing-buttons button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.sizing-buttons button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -542,19 +550,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #afcf9d;
 }
-.filterpanel-buttons .cancel-button.btn-sm {
+.filterpanel-buttons .cancel-button.dso-small {
   line-height: 1rem;
 }
-.filterpanel-buttons .cancel-button.btn-sm dso-icon,
-.filterpanel-buttons .cancel-button.btn-sm svg.di, .filterpanel-buttons .cancel-button.btn-sm.extern::after, .filterpanel-buttons .cancel-button.btn-sm.download::after, .filterpanel-buttons .cancel-button.btn-sm.dso-spinner::before {
+.filterpanel-buttons .cancel-button.dso-small dso-icon,
+.filterpanel-buttons .cancel-button.dso-small svg.di, .filterpanel-buttons .cancel-button.dso-small.extern::after, .filterpanel-buttons .cancel-button.dso-small.download::after, .filterpanel-buttons .cancel-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-left::before {
+.filterpanel-buttons .cancel-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.filterpanel-buttons .cancel-button.btn-sm.dso-spinner-right::after {
+.filterpanel-buttons .cancel-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }
@@ -593,7 +601,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-right: 8px;
 }
-.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).btn-sm:hover::before {
+.filterpanel-buttons .cancel-button.dso-spinner-left:not([disabled]).dso-small:hover::before {
   height: 16px;
   width: 16px;
 }
@@ -617,7 +625,7 @@ button::-moz-focus-inner {
   width: 24px;
   margin-left: 8px;
 }
-.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).btn-sm:hover::after {
+.filterpanel-buttons .cancel-button.dso-spinner-right:not([disabled]).dso-small:hover::after {
   height: 16px;
   width: 16px;
 }
@@ -676,19 +684,19 @@ button::-moz-focus-inner {
   border-color: #afcf9d;
   color: #fff;
 }
-.filterpanel-buttons .apply-button.btn-sm {
+.filterpanel-buttons .apply-button.dso-small {
   line-height: 1rem;
 }
-.filterpanel-buttons .apply-button.btn-sm dso-icon,
-.filterpanel-buttons .apply-button.btn-sm svg.di, .filterpanel-buttons .apply-button.btn-sm.extern::after, .filterpanel-buttons .apply-button.btn-sm.download::after, .filterpanel-buttons .apply-button.btn-sm.dso-spinner::before {
+.filterpanel-buttons .apply-button.dso-small dso-icon,
+.filterpanel-buttons .apply-button.dso-small svg.di, .filterpanel-buttons .apply-button.dso-small.extern::after, .filterpanel-buttons .apply-button.dso-small.download::after, .filterpanel-buttons .apply-button.dso-small.dso-spinner::before {
   margin-bottom: -4px;
   margin-top: -4px;
 }
-.filterpanel-buttons .apply-button.btn-sm.dso-spinner-left::before {
+.filterpanel-buttons .apply-button.dso-small.dso-spinner-left::before {
   height: 16px;
   width: 16px;
 }
-.filterpanel-buttons .apply-button.btn-sm.dso-spinner-right::after {
+.filterpanel-buttons .apply-button.dso-small.dso-spinner-right::after {
   height: 16px;
   width: 16px;
 }

package/dist/collection/components/viewer-grid/viewer-grid.js CHANGED Viewed

@@ -116,7 +116,7 @@ export class ViewerGrid {
     this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
   }
   render() {
-    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, h("span", { class: "sr-only" }, "Kaartpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, h("span", { class: "sr-only" }, "Kaartpaneel breder maken"), h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }), h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
+    return (h(Host, Object.assign({}, { [this.mainSize]: true }), h("div", { class: "dso-map-panel", ref: (element) => (this.mapPanel = element) }, h("div", { class: "sizing-buttons" }, h("span", { class: "sr-only", "aria-live": "polite", "aria-atomic": "true" }, "Breedte tekstpaneel: ", this.sizeLabelMap[this.mainSize]), h("button", { type: "button", class: "shrink", disabled: this.mainSize === "small", onClick: this.shrinkMain }, h("span", { class: "sr-only" }, "Tekstpaneel smaller maken"), h("dso-icon", { icon: "chevron-left" })), h("button", { type: "button", class: "expand", disabled: this.mainSize === "large", onClick: this.expandMain }, h("span", { class: "sr-only" }, "Tekstpaneel breder maken"), h("dso-icon", { icon: "chevron-right" }))), h("div", { class: "main" }, h("slot", { name: "main" }))), h("div", { id: "filterpanel", class: "filterpanel", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h1", null, "Uw keuzes"), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) }), h("slot", { name: "filterpanel" }), h(ViewerGridFilterpanelButtons, { onApply: (e) => this.handleFilterpanelApply(e), onCancel: (e) => this.handleFilterpanelCancel(e) })), h("div", { class: "map" }, h("slot", { name: "map" })), h("div", { hidden: !this.overlayOpen || !this.overlaySlot, class: "dimscreen" }), h("div", { class: "overlay", hidden: !this.overlayOpen || !this.overlaySlot, ref: (element) => (this.overlay = element) }, h("button", { type: "button", class: "overlay-close-button", onClick: (e) => this.dsoCloseOverlay.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")), h("slot", { name: "overlay" }), h("button", { "aria-hidden": "true", type: "button", class: "overlay-close-button", style: { zIndex: "-100" } }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "sluiten")))));
   }
   static get is() { return "dso-viewer-grid"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/viewer-grid/viewer-grid.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"viewer-grid.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private sizeLabelMap: LabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n };\r\n\r\n private mapPanel?: HTMLDivElement;\r\n\r\n /*\r\n Set to true when filterpanel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterpanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop()\r\n initialMainSize?: MainSize;\r\n\r\n @State()\r\n mainSize: MainSize = \"large\";\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<MouseEvent \| KeyboardEvent>;\r\n\r\n /\r\n Emitted when user cancels filterpanel.\r\n /\r\n @Event()\r\n dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n /\r\n Emitted when user applies filterpanel options.\r\n /\r\n @Event()\r\n dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n /\r\n Emitted before and after main size animation. Inspect `detail` property for more information.\r\n /\r\n @Event()\r\n dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n private filterpanel: HTMLElement \| undefined;\r\n\r\n private filterpanelSlot: HTMLElement \| null = null;\r\n\r\n private filterpanelFocustrap: FocusTrap \| undefined;\r\n\r\n private overlay: HTMLDivElement \| undefined;\r\n\r\n private overlaySlot: HTMLDivElement \| null = null;\r\n\r\n private overlayFocustrap: FocusTrap \| undefined;\r\n\r\n @Watch(\"mainSize\")\r\n mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"start\",\r\n previousSize,\r\n currentSize,\r\n });\r\n\r\n this.mapPanel?.addEventListener(\r\n \"transitionend\",\r\n (e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"end\",\r\n previousSize,\r\n currentSize,\r\n });\r\n }\r\n },\r\n { once: true }\r\n );\r\n }\r\n\r\n private shrinkMain = () => {\r\n this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n };\r\n\r\n private expandMain = () => {\r\n this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n };\r\n\r\n private updateFocusTrap() {\r\n if (this.filterpanelOpen && this.overlayOpen) {\r\n return;\r\n }\r\n\r\n if (this.filterpanelFocustrap) {\r\n if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n this.filterpanelFocustrap.activate();\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n } else {\r\n this.filterpanelFocustrap.deactivate();\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n }\r\n\r\n if (this.overlayFocustrap) {\r\n if (this.overlayOpen && !this.overlay?.hidden) {\r\n this.overlayFocustrap.activate();\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n } else {\r\n this.overlayFocustrap.deactivate();\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key !== \"Escape\") {\r\n return;\r\n }\r\n\r\n this.dsoCloseOverlay.emit(event);\r\n };\r\n\r\n connectedCallback() {\r\n this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterpanel && this.filterpanelSlot) {\r\n this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n escapeDeactivates: false,\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n });\r\n }\r\n\r\n if (this.overlay && this.overlaySlot) {\r\n this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n escapeDeactivates: false,\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n });\r\n }\r\n\r\n this.updateFocusTrap();\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.initialMainSize) {\r\n this.mainSize = this.initialMainSize;\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n this.updateFocusTrap();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.overlayFocustrap?.deactivate();\r\n this.filterpanelFocustrap?.deactivate();\r\n\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n }\r\n\r\n private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host {...{ [this.mainSize]: true }}>\r\n <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n </span>\r\n <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n <span class=\"sr-only\">Kaartpaneel smaller maken</span>\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </button>\r\n <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n <span class=\"sr-only\">Kaartpaneel breder maken</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n </div>\r\n <div class=\"main\">\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n <div\r\n id=\"filterpanel\"\r\n class=\"filterpanel\"\r\n hidden={!this.filterpanelOpen \|\| !this.filterpanelSlot}\r\n ref={(element) => (this.filterpanel = element)}\r\n >\r\n <h1>Uw keuzes</h1>\r\n <ViewerGridFilterpanelButtons\r\n onApply={(e) => this.handleFilterpanelApply(e)}\r\n onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n />\r\n <slot name=\"filterpanel\" />\r\n <ViewerGridFilterpanelButtons\r\n onApply={(e) => this.handleFilterpanelApply(e)}\r\n onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n />\r\n </div>\r\n <div class=\"map\">\r\n <slot name=\"map\" />\r\n </div>\r\n <div hidden={!this.overlayOpen \|\| !this.overlaySlot} class=\"dimscreen\"></div>\r\n <div\r\n class=\"overlay\"\r\n hidden={!this.overlayOpen \|\| !this.overlaySlot}\r\n ref={(element) => (this.overlay = element)}\r\n >\r\n <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n <slot name=\"overlay\" />\r\n {/ This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"viewer-grid.js","sourceRoot":"","sources":["../../../src/components/viewer-grid/viewer-grid.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, Prop, State, Host, Element, Event, EventEmitter, Watch } from \"@stencil/core\";\r\nimport { FocusTrap, createFocusTrap } from \"focus-trap\";\r\nimport { ViewerGridFilterpanelButtons } from \"./viewer-grid-filterpanel-buttons\";\r\nimport { FilterpanelEvent, LabelSizeMap, MainSize, ViewerGridChangeSizeEvent } from \"./viewer-grid.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-viewer-grid\",\r\n styleUrl: \"viewer-grid.scss\",\r\n shadow: true,\r\n})\r\nexport class ViewerGrid {\r\n private sizeLabelMap: LabelSizeMap = {\r\n small: \"smal\",\r\n medium: \"middel\",\r\n large: \"breed\",\r\n };\r\n\r\n private mapPanel?: HTMLDivElement;\r\n\r\n /*\r\n Set to true when filterpanel should show.\r\n /\r\n @Prop({ reflect: true })\r\n filterpanelOpen = false;\r\n\r\n /\r\n Set to true when overlay should show.\r\n /\r\n @Prop({ reflect: true })\r\n overlayOpen = false;\r\n\r\n /\r\n Size of the main content panel when component loads. Changing this attribute afterwards has no effect.\r\n \r\n Default size is `large`.\r\n /\r\n @Prop()\r\n initialMainSize?: MainSize;\r\n\r\n @State()\r\n mainSize: MainSize = \"large\";\r\n\r\n /\r\n Emitted when user wants to close the overlay.\r\n /\r\n @Event()\r\n dsoCloseOverlay!: EventEmitter<MouseEvent \| KeyboardEvent>;\r\n\r\n /\r\n Emitted when user cancels filterpanel.\r\n /\r\n @Event()\r\n dsoFilterpanelCancel!: EventEmitter<FilterpanelEvent>;\r\n\r\n /\r\n Emitted when user applies filterpanel options.\r\n /\r\n @Event()\r\n dsoFilterpanelApply!: EventEmitter<FilterpanelEvent>;\r\n\r\n /\r\n Emitted before and after main size animation. Inspect `detail` property for more information.\r\n /\r\n @Event()\r\n dsoMainSizeChange!: EventEmitter<ViewerGridChangeSizeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoViewerGridElement;\r\n\r\n private filterpanel: HTMLElement \| undefined;\r\n\r\n private filterpanelSlot: HTMLElement \| null = null;\r\n\r\n private filterpanelFocustrap: FocusTrap \| undefined;\r\n\r\n private overlay: HTMLDivElement \| undefined;\r\n\r\n private overlaySlot: HTMLDivElement \| null = null;\r\n\r\n private overlayFocustrap: FocusTrap \| undefined;\r\n\r\n @Watch(\"mainSize\")\r\n mainSizeWatcher(currentSize: MainSize, previousSize: MainSize) {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"start\",\r\n previousSize,\r\n currentSize,\r\n });\r\n\r\n this.mapPanel?.addEventListener(\r\n \"transitionend\",\r\n (e) => {\r\n if (e.propertyName === \"flex-basis\") {\r\n this.dsoMainSizeChange.emit({\r\n stage: \"end\",\r\n previousSize,\r\n currentSize,\r\n });\r\n }\r\n },\r\n { once: true }\r\n );\r\n }\r\n\r\n private shrinkMain = () => {\r\n this.mainSize = this.mainSize === \"large\" ? \"medium\" : \"small\";\r\n };\r\n\r\n private expandMain = () => {\r\n this.mainSize = this.mainSize === \"small\" ? \"medium\" : \"large\";\r\n };\r\n\r\n private updateFocusTrap() {\r\n if (this.filterpanelOpen && this.overlayOpen) {\r\n return;\r\n }\r\n\r\n if (this.filterpanelFocustrap) {\r\n if (this.filterpanelOpen && !this.filterpanel?.hidden) {\r\n this.filterpanelFocustrap.activate();\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n } else {\r\n this.filterpanelFocustrap.deactivate();\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n }\r\n\r\n if (this.overlayFocustrap) {\r\n if (this.overlayOpen && !this.overlay?.hidden) {\r\n this.overlayFocustrap.activate();\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n } else {\r\n this.overlayFocustrap.deactivate();\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key !== \"Escape\") {\r\n return;\r\n }\r\n\r\n this.dsoCloseOverlay.emit(event);\r\n };\r\n\r\n connectedCallback() {\r\n this.filterpanelSlot = this.host.querySelector<HTMLDivElement>(\"div[slot='filterpanel']\");\r\n\r\n this.overlaySlot = this.host.querySelector<HTMLDivElement>(\"div[slot='overlay']\");\r\n }\r\n\r\n componentDidLoad() {\r\n if (this.filterpanel && this.filterpanelSlot) {\r\n this.filterpanelFocustrap = createFocusTrap([this.filterpanel, this.filterpanelSlot], {\r\n escapeDeactivates: false,\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n });\r\n }\r\n\r\n if (this.overlay && this.overlaySlot) {\r\n this.overlayFocustrap = createFocusTrap([this.overlay, this.overlaySlot], {\r\n escapeDeactivates: false,\r\n allowOutsideClick: true,\r\n tabbableOptions: {\r\n getShadowRoot: true,\r\n },\r\n });\r\n }\r\n\r\n this.updateFocusTrap();\r\n }\r\n\r\n componentWillLoad() {\r\n if (this.initialMainSize) {\r\n this.mainSize = this.initialMainSize;\r\n }\r\n }\r\n\r\n componentDidUpdate() {\r\n this.updateFocusTrap();\r\n }\r\n\r\n disconnectedCallback() {\r\n this.overlayFocustrap?.deactivate();\r\n this.filterpanelFocustrap?.deactivate();\r\n\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n }\r\n\r\n private handleFilterpanelApply(mouseEvent: MouseEvent) {\r\n this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });\r\n }\r\n\r\n private handleFilterpanelCancel(mouseEvent: MouseEvent) {\r\n this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });\r\n }\r\n\r\n render() {\r\n return (\r\n <Host {...{ [this.mainSize]: true }}>\r\n <div class=\"dso-map-panel\" ref={(element) => (this.mapPanel = element)}>\r\n <div class=\"sizing-buttons\">\r\n <span class=\"sr-only\" aria-live=\"polite\" aria-atomic=\"true\">\r\n Breedte tekstpaneel: {this.sizeLabelMap[this.mainSize]}\r\n </span>\r\n <button type=\"button\" class=\"shrink\" disabled={this.mainSize === \"small\"} onClick={this.shrinkMain}>\r\n <span class=\"sr-only\">Tekstpaneel smaller maken</span>\r\n <dso-icon icon=\"chevron-left\"></dso-icon>\r\n </button>\r\n <button type=\"button\" class=\"expand\" disabled={this.mainSize === \"large\"} onClick={this.expandMain}>\r\n <span class=\"sr-only\">Tekstpaneel breder maken</span>\r\n <dso-icon icon=\"chevron-right\"></dso-icon>\r\n </button>\r\n </div>\r\n <div class=\"main\">\r\n <slot name=\"main\" />\r\n </div>\r\n </div>\r\n <div\r\n id=\"filterpanel\"\r\n class=\"filterpanel\"\r\n hidden={!this.filterpanelOpen \|\| !this.filterpanelSlot}\r\n ref={(element) => (this.filterpanel = element)}\r\n >\r\n <h1>Uw keuzes</h1>\r\n <ViewerGridFilterpanelButtons\r\n onApply={(e) => this.handleFilterpanelApply(e)}\r\n onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n />\r\n <slot name=\"filterpanel\" />\r\n <ViewerGridFilterpanelButtons\r\n onApply={(e) => this.handleFilterpanelApply(e)}\r\n onCancel={(e) => this.handleFilterpanelCancel(e)}\r\n />\r\n </div>\r\n <div class=\"map\">\r\n <slot name=\"map\" />\r\n </div>\r\n <div hidden={!this.overlayOpen \|\| !this.overlaySlot} class=\"dimscreen\"></div>\r\n <div\r\n class=\"overlay\"\r\n hidden={!this.overlayOpen \|\| !this.overlaySlot}\r\n ref={(element) => (this.overlay = element)}\r\n >\r\n <button type=\"button\" class=\"overlay-close-button\" onClick={(e) => this.dsoCloseOverlay.emit(e)}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n <slot name=\"overlay\" />\r\n {/ This button is needed for the `focus-trap` library to function correctly. It is never focused. */}\r\n <button aria-hidden=\"true\" type=\"button\" class=\"overlay-close-button\" style={{ zIndex: \"-100\" }}>\r\n <dso-icon icon=\"times\"></dso-icon>\r\n <span class=\"sr-only\">sluiten</span>\r\n </button>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}