@dso-toolkit/core 45.1.0 → 46.0.0

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

@@ -1,49 +1,48 @@
-import { h, Component, Prop, State, Host, Element, Event, Watch, } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { createFocusTrap } from "focus-trap";
-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;
+import { ViewerGridFilterpanelButtons } from "./viewer-grid-filterpanel-buttons";
 export class ViewerGrid {
   constructor() {
     this.sizeLabelMap = {
-      small: 'smal',
-      medium: 'middel',
-      large: 'breed',
+      small: "smal",
+      medium: "middel",
+      large: "breed",
     };
-    this.filterpanelOpen = false;
-    this.overlayOpen = false;
-    /**
-     * Size of the main content panel when component loads. Changing this attribute afterwards has no effect.
-     */
-    this.initialMainSize = "large";
-    this.mainSize = this.initialMainSize;
     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") {
+      if (event.key !== "Escape") {
         return;
       }
       this.dsoCloseOverlay.emit(event);
     };
+    this.filterpanelOpen = false;
+    this.overlayOpen = false;
+    this.initialMainSize = "large";
+    this.mainSize = this.initialMainSize;
   }
   mainSizeWatcher(currentSize, previousSize) {
+    var _a;
     this.dsoMainSizeChange.emit({
-      stage: 'start',
+      stage: "start",
       previousSize,
-      currentSize
+      currentSize,
     });
-    setTimeout(() => {
-      this.dsoMainSizeChange.emit({
-        stage: 'end',
-        previousSize,
-        currentSize
-      });
-    }, TRANSITION_TIME);
+    (_a = this.mapPanel) === null || _a === void 0 ? void 0 : _a.addEventListener("transitionend", (e) => {
+      if (e.propertyName === "flex-basis") {
+        this.dsoMainSizeChange.emit({
+          stage: "end",
+          previousSize,
+          currentSize,
+        });
+      }
+    }, { once: true });
   }
   updateFocusTrap() {
     var _a, _b;
@@ -82,7 +81,7 @@ export class ViewerGrid {
         allowOutsideClick: true,
         tabbableOptions: {
           getShadowRoot: true,
-        }
+        },
       });
     }
     if (this.overlay && this.overlaySlot) {
@@ -91,7 +90,7 @@ export class ViewerGrid {
         allowOutsideClick: true,
         tabbableOptions: {
           getShadowRoot: true,
-        }
+        },
       });
     }
     this.updateFocusTrap();
@@ -112,190 +111,174 @@ export class ViewerGrid {
     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("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", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => this.filterpanel = element },
-        h("h2", 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", { 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" }, "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", hidden: !this.filterpanelOpen || !this.filterpanelSlot, ref: (element) => (this.filterpanel = element) }, h("h2", 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"; }
-  static get originalStyleUrls() { return {
-    "$": ["viewer-grid.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["viewer-grid.css"]
-  }; }
-  static get properties() { return {
-    "filterpanelOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "filterpanel-open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "overlayOpen": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+  static get originalStyleUrls() {
+    return {
+      "$": ["viewer-grid.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["viewer-grid.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "filterpanelOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "filterpanel-open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
+      "overlayOpen": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "overlay-open",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "attribute": "overlay-open",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "initialMainSize": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "MainSize",
-        "resolved": "\"large\" | \"medium\" | \"small\"",
-        "references": {
-          "MainSize": {
-            "location": "local"
+      "initialMainSize": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "MainSize",
+          "resolved": "\"large\" | \"medium\" | \"small\"",
+          "references": {
+            "MainSize": {
+              "location": "local"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Size of the main content panel when component loads. Changing this attribute afterwards has no effect."
-      },
-      "attribute": "initial-main-size",
-      "reflect": false,
-      "defaultValue": "\"large\""
-    }
-  }; }
-  static get states() { return {
-    "mainSize": {}
-  }; }
-  static get events() { return [{
-      "method": "dsoCloseOverlay",
-      "name": "dsoCloseOverlay",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "MouseEvent | KeyboardEvent",
-        "resolved": "KeyboardEvent | MouseEvent",
-        "references": {
-          "MouseEvent": {
-            "location": "global"
-          },
-          "KeyboardEvent": {
-            "location": "global"
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Size of the main content panel when component loads. Changing this attribute afterwards has no effect."
+        },
+        "attribute": "initial-main-size",
+        "reflect": false,
+        "defaultValue": "\"large\""
+      }
+    };
+  }
+  static get states() {
+    return {
+      "mainSize": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoCloseOverlay",
+        "name": "dsoCloseOverlay",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "MouseEvent | KeyboardEvent",
+          "resolved": "KeyboardEvent | MouseEvent",
+          "references": {
+            "MouseEvent": {
+              "location": "global"
+            },
+            "KeyboardEvent": {
+              "location": "global"
+            }
           }
         }
-      }
-    }, {
-      "method": "dsoFilterpanelCancel",
-      "name": "dsoFilterpanelCancel",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "FilterpanelEvent",
-        "resolved": "FilterpanelEvent",
-        "references": {
-          "FilterpanelEvent": {
-            "location": "local"
+      }, {
+        "method": "dsoFilterpanelCancel",
+        "name": "dsoFilterpanelCancel",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FilterpanelEvent",
+          "resolved": "FilterpanelEvent",
+          "references": {
+            "FilterpanelEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "dsoFilterpanelApply",
-      "name": "dsoFilterpanelApply",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "FilterpanelEvent",
-        "resolved": "FilterpanelEvent",
-        "references": {
-          "FilterpanelEvent": {
-            "location": "local"
+      }, {
+        "method": "dsoFilterpanelApply",
+        "name": "dsoFilterpanelApply",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "FilterpanelEvent",
+          "resolved": "FilterpanelEvent",
+          "references": {
+            "FilterpanelEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }, {
-      "method": "dsoMainSizeChange",
-      "name": "dsoMainSizeChange",
-      "bubbles": true,
-      "cancelable": true,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "complexType": {
-        "original": "ViewerGridChangeSizeEvent",
-        "resolved": "ViewerGridChangeSizeEvent",
-        "references": {
-          "ViewerGridChangeSizeEvent": {
-            "location": "local"
+      }, {
+        "method": "dsoMainSizeChange",
+        "name": "dsoMainSizeChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ViewerGridChangeSizeEvent",
+          "resolved": "ViewerGridChangeSizeEvent",
+          "references": {
+            "ViewerGridChangeSizeEvent": {
+              "location": "local"
+            }
           }
         }
-      }
-    }]; }
+      }];
+  }
   static get elementRef() { return "host"; }
-  static get watchers() { return [{
-      "propName": "mainSize",
-      "methodName": "mainSizeWatcher"
-    }]; }
+  static get watchers() {
+    return [{
+        "propName": "mainSize",
+        "methodName": "mainSizeWatcher"
+      }];
+  }
 }

package/dist/collection/index.js

@@ -1,2 +1,2 @@
-export * from './components/map-base-layers/map-base-layers.interfaces';
-export * from './components/map-overlays/map-overlays.interfaces';
+export * from "./components/map-base-layers/map-base-layers.interfaces";
+export * from "./components/map-overlays/map-overlays.interfaces";

package/dist/collection/utils/create-identifier.js

@@ -2,9 +2,7 @@
  * Form random hash
  */
 export function chr4() {
-  return Math.random()
-    .toString(16)
-    .slice(-4);
+  return Math.random().toString(16).slice(-4);
 }
 /**
  * Create random identifier with a prefix

package/dist/custom-elements/index.d.ts

@@ -122,6 +122,12 @@ export const DsoMapOverlays: {
   new (): DsoMapOverlays;
 };
 
+interface DsoModal extends Components.DsoModal, HTMLElement {}
+export const DsoModal: {
+  prototype: DsoModal;
+  new (): DsoModal;
+};
+
 interface DsoOzonContent extends Components.DsoOzonContent, HTMLElement {}
 export const DsoOzonContent: {
   prototype: DsoOzonContent;
@@ -158,6 +164,12 @@ export const DsoSelectable: {
   new (): DsoSelectable;
 };
 
+interface DsoTable extends Components.DsoTable, HTMLElement {}
+export const DsoTable: {
+  prototype: DsoTable;
+  new (): DsoTable;
+};
+
 interface DsoToggletip extends Components.DsoToggletip, HTMLElement {}
 export const DsoToggletip: {
   prototype: DsoToggletip;