@dso-toolkit/core 43.1.0 → 45.0.0

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

@@ -4,6 +4,11 @@ import { ViewerGridFilterpanelButtons } from './viewer-grid-filterpanel-buttons'
 const TRANSITION_TIME = 200; // Keep in sync with dso-viewer-grid.variables.scss:$dso-viewer-grid-transition-time;
 export class ViewerGrid {
   constructor() {
+    this.sizeLabelMap = {
+      small: 'smal',
+      medium: 'middel',
+      large: 'breed',
+    };
     this.filterpanelOpen = false;
     this.overlayOpen = false;
     /**
@@ -14,26 +19,26 @@ export class ViewerGrid {
     this.filterpanelSlot = null;
     this.overlaySlot = null;
     this.shrinkMain = () => {
-      this.mainSize = this.mainSize == "large" ? "medium" : "small";
+      this.mainSize = this.mainSize === 'large' ? 'medium' : 'small';
     };
     this.expandMain = () => {
-      this.mainSize = this.mainSize == "small" ? "medium" : "large";
+      this.mainSize = this.mainSize === 'small' ? 'medium' : 'large';
     };
     this.keyDownListener = (event) => {
       if (event.key != "Escape") {
         return;
       }
-      this.closeOverlay.emit(event);
+      this.dsoCloseOverlay.emit(event);
     };
   }
   mainSizeWatcher(currentSize, previousSize) {
-    this.mainSizeChange.emit({
+    this.dsoMainSizeChange.emit({
       stage: 'start',
       previousSize,
       currentSize
     });
     setTimeout(() => {
-      this.mainSizeChange.emit({
+      this.dsoMainSizeChange.emit({
         stage: 'end',
         previousSize,
         currentSize
@@ -95,15 +100,18 @@ export class ViewerGrid {
     this.host.removeEventListener("keydown", this.keyDownListener);
   }
   handleFilterpanelApply(mouseEvent) {
-    this.filterpanelApply.emit({ originalEvent: mouseEvent });
+    this.dsoFilterpanelApply.emit({ originalEvent: mouseEvent });
   }
   handleFilterpanelCancel(mouseEvent) {
-    this.filterpanelCancel.emit({ originalEvent: mouseEvent });
+    this.dsoFilterpanelCancel.emit({ originalEvent: mouseEvent });
   }
   render() {
     return (h(Host, Object.assign({}, { [this.mainSize]: true }),
       h("div", { class: "dso-map-panel" },
         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("dso-icon", { icon: "chevron-left" })),
           h("button", { type: "button", class: "expand", disabled: this.mainSize == "large", onClick: this.expandMain },
@@ -118,7 +126,7 @@ export class ViewerGrid {
       h("div", { class: "map" },
         h("slot", { name: "map" })),
       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.closeOverlay.emit(e) },
+        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" }))));
@@ -195,8 +203,8 @@ export class ViewerGrid {
     "mainSize": {}
   }; }
   static get events() { return [{
-      "method": "closeOverlay",
-      "name": "closeOverlay",
+      "method": "dsoCloseOverlay",
+      "name": "dsoCloseOverlay",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -217,8 +225,8 @@ export class ViewerGrid {
         }
       }
     }, {
-      "method": "filterpanelCancel",
-      "name": "filterpanelCancel",
+      "method": "dsoFilterpanelCancel",
+      "name": "dsoFilterpanelCancel",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -236,8 +244,8 @@ export class ViewerGrid {
         }
       }
     }, {
-      "method": "filterpanelApply",
-      "name": "filterpanelApply",
+      "method": "dsoFilterpanelApply",
+      "name": "dsoFilterpanelApply",
       "bubbles": true,
       "cancelable": true,
       "composed": true,
@@ -255,8 +263,8 @@ export class ViewerGrid {
         }
       }
     }, {
-      "method": "mainSizeChange",
-      "name": "mainSizeChange",
+      "method": "dsoMainSizeChange",
+      "name": "dsoMainSizeChange",
       "bubbles": true,
       "cancelable": true,
       "composed": true,

package/dist/collection/components/viewer-grid/{templates/viewer-grid.template.js → viewer-grid.template.js}

@@ -1,14 +1,14 @@
 import { html, nothing } from "lit-html";
 import { ifDefined } from 'lit-html/directives/if-defined.js';
-export function viewerGridTemplate({ filterpanel, main, map, overlay, filterpanelOpen, overlayOpen, initialMainSize, mainSizeChange, filterpanelApply, filterpanelCancel, closeOverlay, }) {
+export function viewerGridTemplate({ filterpanel, main, map, overlay, filterpanelOpen, overlayOpen, initialMainSize, dsoMainSizeChange, dsoFilterpanelApply, dsoFilterpanelCancel, dsoCloseOverlay, }) {
   return html `
     <dso-viewer-grid
       ?filterpanel-open=${filterpanelOpen}
       ?overlay-open=${overlayOpen}
-      @mainSizeChange=${mainSizeChange}
-      @closeOverlay=${closeOverlay}
-      @filterpanelApply=${filterpanelApply}
-      @filterpanelCancel=${filterpanelCancel}
+      @dsoMainSizeChange=${dsoMainSizeChange}
+      @dsoCloseOverlay=${dsoCloseOverlay}
+      @dsoFilterpanelApply=${dsoFilterpanelApply}
+      @dspFilterpanelCancel=${dsoFilterpanelCancel}
       initial-main-size=${ifDefined(initialMainSize)}
     >
       ${filterpanel ? html `<div slot="filterpanel">${filterpanel}</div>` : nothing}