@dso-toolkit/core 51.2.1 → 51.4.0

package/dist/collection/components/expandable-heading/expandable-heading.css

@@ -0,0 +1,145 @@
+h1,
+.h1,
+h2,
+.h2,
+h3,
+.h3 {
+  margin-bottom: 16px;
+  margin-top: 24px;
+}
+
+h1,
+.h1 {
+  line-height: 1.25;
+}
+
+h1 {
+  color: #275937;
+  font-size: 2rem;
+  font-weight: 700;
+}
+
+h2,
+.h2 {
+  line-height: 1.33;
+}
+
+h2 {
+  color: #275937;
+  font-size: 1.5rem;
+  font-weight: 700;
+}
+
+h3,
+.h3 {
+  line-height: 1.2;
+}
+
+h3 {
+  color: #275937;
+  font-size: 1.25rem;
+  font-weight: 600;
+}
+
+h4,
+.h4,
+h5,
+.h5,
+h6,
+.h6 {
+  margin-bottom: 16px;
+  margin-top: 12px;
+}
+
+h4,
+.h4 {
+  line-height: 1.5;
+}
+
+h4 {
+  color: #275937;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+h5,
+.h5 {
+  line-height: 1.5;
+}
+
+h5 {
+  color: #191919;
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+h6,
+.h6 {
+  line-height: 1.5;
+}
+
+:host {
+  display: block;
+}
+
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+}
+
+.expandable-heading {
+  align-items: center;
+  display: flex;
+  margin-bottom: 8px;
+  margin-top: 8px;
+}
+.expandable-heading h2,
+.expandable-heading h3,
+.expandable-heading h4,
+.expandable-heading h5,
+.expandable-heading h6 {
+  font-size: 1rem;
+  margin-bottom: 0;
+  margin-right: 8px;
+  margin-top: 0;
+}
+.expandable-heading button {
+  align-items: flex-start;
+  cursor: pointer;
+  background-color: transparent;
+  border: 0;
+  color: inherit;
+  display: flex;
+  line-height: 24px;
+  font-size: inherit;
+  font-weight: inherit;
+  padding: 0;
+  text-align: left;
+}
+.expandable-heading button > dso-icon {
+  flex-shrink: 0;
+}
+.expandable-heading.dso-expandable-heading-black button {
+  color: #000;
+}
+
+dso-expandable {
+  padding-left: 24px;
+}
+
+.addons-end {
+  display: inline-block;
+  margin-left: auto;
+}

package/dist/collection/components/expandable-heading/expandable-heading.interfaces.js

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

package/dist/collection/components/expandable-heading/expandable-heading.js

@@ -0,0 +1,117 @@
+import { Fragment, h } from "@stencil/core";
+import clsx from "clsx";
+import { v4 as uuidv4 } from "uuid";
+import { Heading } from "./heading";
+export class ExpandableHeading {
+  constructor() {
+    this.identifier = uuidv4();
+    this.open = undefined;
+    this.heading = "h2";
+    this.color = "default";
+  }
+  toggle(e) {
+    this.open = !this.open;
+    this.dsoToggle.emit({ originalEvent: e, open: this.open });
+  }
+  render() {
+    const expandableProperties = this.open ? { open: true } : {};
+    return (h(Fragment, null, h("div", { class: clsx("expandable-heading", this.color === "black" ? "dso-expandable-heading-black" : "") }, h(Heading, { heading: this.heading }, h("button", { type: "button", "aria-expanded": this.open ? "true" : "false", "aria-controls": this.identifier, onClick: (e) => this.toggle(e) }, h("dso-icon", { icon: this.open ? "chevron-down" : "chevron-right" }), h("slot", { name: "title" }))), h("slot", { name: "addons-start" }), h("div", { class: "addons-end" }, h("slot", { name: "addons-end" }))), h("dso-expandable", Object.assign({ id: this.identifier }, expandableProperties), h("slot", null))));
+  }
+  static get is() { return "dso-expandable-heading"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["expandable-heading.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["expandable-heading.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "open": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "open",
+        "reflect": false
+      },
+      "heading": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "HeadingTags",
+          "resolved": "\"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
+          "references": {
+            "HeadingTags": {
+              "location": "import",
+              "path": "./expandable-heading.interfaces"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "heading",
+        "reflect": false,
+        "defaultValue": "\"h2\""
+      },
+      "color": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "\"default\" | \"black\"",
+          "resolved": "\"black\" | \"default\"",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "color",
+        "reflect": false,
+        "defaultValue": "\"default\""
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoToggle",
+        "name": "dsoToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "complexType": {
+          "original": "ExpandableHeadingToggleEvent",
+          "resolved": "ExpandableHeadingToggleEvent",
+          "references": {
+            "ExpandableHeadingToggleEvent": {
+              "location": "import",
+              "path": "./expandable-heading.interfaces"
+            }
+          }
+        }
+      }];
+  }
+}

package/dist/collection/components/expandable-heading/heading.js

@@ -0,0 +1,16 @@
+import { h } from "@stencil/core";
+export const Heading = ({ heading, ref, className }, children) => {
+  switch (heading) {
+    default:
+    case "h2":
+      return (h("h2", { ref: ref, class: className }, children));
+    case "h3":
+      return (h("h3", { ref: ref, class: className }, children));
+    case "h4":
+      return (h("h4", { ref: ref, class: className }, children));
+    case "h5":
+      return (h("h5", { ref: ref, class: className }, children));
+    case "h6":
+      return (h("h6", { ref: ref, class: className }, children));
+  }
+};

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

@@ -195,8 +195,8 @@ dso-dropdown-menu .dso-dropdown-options ul li + li {
   text-decoration: underline;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu .dso-dropdown-options {
-  left: -1rem;
-  top: calc(100% + 3px);
+  left: -1rem !important;
+  top: 3px !important;
 }
 .dso-nav.dso-nav-main dso-dropdown-menu button {
   font-size: 1.25em;

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

@@ -24,6 +24,7 @@
 
 .dso-highlight-box {
   background-color: #f2f2f2;
+  color: #000;
   margin-top: 16px;
   padding: 16px;
   margin-bottom: 24px;

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

@@ -6,7 +6,6 @@ export class ImageOverlay {
     this.titelSlot = null;
     this.bijschriftSlot = null;
     this.active = false;
-    this.focused = false;
     this.zoomable = false;
   }
   loadListener(event) {
@@ -67,7 +66,7 @@ export class ImageOverlay {
   render() {
     var _a;
     const { src, alt } = (_a = this.host.querySelector("img")) !== null && _a !== void 0 ? _a : {};
-    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" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), 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")))));
+    return (h(Host, { onClick: () => { var _a; return (_a = this.buttonElement) === null || _a === void 0 ? void 0 : _a.focus(); } }, this.active && src && alt && (h("div", { class: "dimmer" }, h("div", { class: "wrapper", ref: (element) => (this.wrapperElement = element) }, h("div", { class: "titel", hidden: !this.titelSlot }, h("slot", { name: "titel" })), h("img", { src: src, alt: alt }), h("button", { type: "button", class: "close", onClick: () => (this.active = false) }, h("dso-icon", { icon: "times" }), h("span", null, "Sluiten")), h("div", { class: "figuur-bijschrift", hidden: !this.bijschriftSlot }, h("slot", { name: "bijschrift" }))))), h("slot", null), this.zoomable && (h("button", { type: "button", class: "open", ref: (element) => (this.buttonElement = element), onClick: () => (this.active = true) }, h("dso-icon", { icon: "external-link" }), h("span", null, "Afbeelding vergroot weergeven")))));
   }
   componentDidRender() {
     var _a, _b;
@@ -105,7 +104,6 @@ export class ImageOverlay {
   static get states() {
     return {
       "active": {},
-      "focused": {},
       "zoomable": {}
     };
   }

package/dist/collection/components/info/info.css

@@ -1,6 +1,7 @@
 :host {
   display: block;
   background-color: #f2f2f2;
+  color: #000;
   padding: 16px 32px 16px 16px;
   position: relative;
 }

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

@@ -27,8 +27,6 @@
   display: inline-block;
   line-height: 1.5;
   max-width: 100%;
-}
-.dso-label:not(.dso-label-bright) {
   padding: 4px 8px;
 }
 .dso-label:focus-within, .dso-label.dso-hover {
@@ -54,13 +52,9 @@
 .dso-label button > svg.di {
   display: block;
 }
-.dso-label.dso-compact {
-  border: 0;
-  padding: 0 8px;
-}
 .dso-label.dso-label-info {
   background-color: #6ca4d9;
-  color: #191919;
+  color: #000;
 }
 .dso-label.dso-label-primary {
   background-color: #275937;
@@ -72,7 +66,7 @@
 }
 .dso-label.dso-label-warning {
   background-color: #dcd400;
-  color: #191919;
+  color: #000;
 }
 .dso-label.dso-label-danger {
   background-color: #ce3f51;
@@ -85,8 +79,15 @@
 .dso-label.dso-label-bright {
   background-color: #fff;
   color: #191919;
-  border: 1px solid #ccc;
-  padding: 3px 7px;
+  outline: 1px solid #ccc;
+  outline-offset: -1px;
+}
+.dso-label.dso-label-attention {
+  background-color: #8b4a6a;
+  color: #fff;
+}
+.dso-label.dso-compact {
+  padding: 0 8px;
 }
 .dso-label.dso-hover .dso-label-content {
   text-decoration: line-through;

package/dist/collection/components/label/label.js

@@ -90,7 +90,7 @@ export class Label {
         "dso-hover": this.removeHover || this.removeFocus,
       }) }, h("slot", { name: "symbol" }), status && h("span", { class: "sr-only" }, status, ": "), h("span", { class: clsx("dso-label-content", {
         "dso-truncate": !!this.truncate,
-      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : -1, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
+      }), ref: (element) => (this.labelContent = element), tabindex: this.truncate && this.truncatedContent ? 0 : undefined, onMouseEnter: () => (this.textHover = true), onMouseLeave: () => (this.textHover = false), onFocus: () => (this.textFocus = true), onBlur: () => (this.textFocus = false) }, h("slot", null)), this.removable && (h("button", { type: "button", onClick: (e) => this.dsoRemoveClick.emit(e), onMouseEnter: () => (this.removeHover = true), onMouseLeave: () => (this.removeHover = false), onFocus: () => (this.removeFocus = true), onBlur: () => (this.removeFocus = false) }, h("span", { class: "sr-only" }, "Verwijder: ", this.labelText), h("dso-icon", { icon: "times" })))), h("dso-tooltip", { stateless: true, id: "toggle-anchor", active: !!this.truncatedContent && (this.textHover || this.textFocus), position: "top", strategy: "absolute" }, this.truncatedContent)));
   }
   static get is() { return "dso-label"; }
   static get encapsulation() { return "shadow"; }
@@ -144,8 +144,8 @@ export class Label {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\"",
-          "resolved": "\"bright\" | \"danger\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
+          "original": "\"primary\" | \"info\" | \"success\" | \"warning\" | \"danger\" | \"error\" | \"bright\" | \"attention\"",
+          "resolved": "\"attention\" | \"bright\" | \"danger\" | \"error\" | \"info\" | \"primary\" | \"success\" | \"warning\" | undefined",
           "references": {}
         },
         "required": false,

package/dist/collection/components/map-controls/map-controls.interfaces.js

@@ -0,0 +1 @@
+export const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss

package/dist/collection/components/map-controls/map-controls.js

@@ -16,7 +16,7 @@ var __classPrivateFieldSet = (this && this.__classPrivateFieldSet) || function (
 };
 var _MapControls_closeButtonElement, _MapControls_toggleButtonElement;
 import { h, Host } from "@stencil/core";
-const transitionDuration = 300; // Sync with $transition-duration in ./map-controls.scss
+import { transitionDuration } from "./map-controls.interfaces";
 export class MapControls {
   constructor() {
     this.panelTitle = "Kaartlagen";
@@ -39,8 +39,15 @@ export class MapControls {
       }, transitionDuration);
     }
   }
+  async toggleVisibility(e) {
+    this.open = !this.open;
+    this.dsoToggle.emit({
+      originalEvent: e,
+      open: this.open,
+    });
+  }
   render() {
-    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: () => (this.open = !this.open), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { class: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", class: "close-button", onClick: () => (this.open = false), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
+    return (h(Host, null, h("button", { type: "button", id: "toggle-visibility-button", class: "toggle-visibility-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_toggleButtonElement, element, "f")) }, h("dso-icon", { icon: "layers" }), h("span", null, "Kaartlagen")), h("div", { class: "zoom-buttons" }, h("button", { type: "button", onClick: (e) => this.dsoZoomIn.emit(e), disabled: this.disableZoom === "in" || this.disableZoom === "both" }, h("span", null, "Zoom in"), h("dso-icon", { icon: "plus" })), h("button", { type: "button", onClick: (e) => this.dsoZoomOut.emit(e), disabled: this.disableZoom === "out" || this.disableZoom === "both" }, h("span", null, "Zoom uit"), h("dso-icon", { icon: "minus" }))), h("section", { hidden: this.hideContent }, h("header", null, h("h2", null, this.panelTitle), h("button", { type: "button", class: "close-button", onClick: (e) => this.toggleVisibility(e), ref: (element) => (__classPrivateFieldSet(this, _MapControls_closeButtonElement, element, "f")) }, h("span", null, "Verberg paneel ", this.panelTitle), h("dso-icon", { icon: "times" }))), h("div", { class: "content" }, h("slot", null)))));
   }
   static get is() { return "dso-map-controls"; }
   static get encapsulation() { return "shadow"; }
@@ -137,8 +144,57 @@ export class MapControls {
             }
           }
         }
+      }, {
+        "method": "dsoToggle",
+        "name": "dsoToggle",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "emits when the panel opens or closes.\r\n\r\n- `event.detail.originalEvent` contains the original `MouseEvent / KeyboardEvent` when the panel is toggled by clicking the visibility button or the close button.\r\n- `event.detail.open` is true when the panel opens and false when the panel closes."
+        },
+        "complexType": {
+          "original": "MapControlsToggleEvent",
+          "resolved": "MapControlsToggleEvent",
+          "references": {
+            "MapControlsToggleEvent": {
+              "location": "import",
+              "path": "./map-controls.interfaces"
+            }
+          }
+        }
       }];
   }
+  static get methods() {
+    return {
+      "toggleVisibility": {
+        "complexType": {
+          "signature": "(e: MouseEvent | KeyboardEvent) => Promise<void>",
+          "parameters": [{
+              "tags": [],
+              "text": ""
+            }],
+          "references": {
+            "Promise": {
+              "location": "global"
+            },
+            "MouseEvent": {
+              "location": "global"
+            },
+            "KeyboardEvent": {
+              "location": "global"
+            }
+          },
+          "return": "Promise<void>"
+        },
+        "docs": {
+          "text": "",
+          "tags": []
+        }
+      }
+    };
+  }
   static get watchers() {
     return [{
         "propName": "open",

package/dist/collection/components/selectable/selectable.css

@@ -150,6 +150,7 @@
 
 .dso-selectable-input-wrapper {
   display: inline-block;
+  min-height: 24px;
   padding-left: 32px;
 }
 .dso-selectable-input-wrapper:focus-within {

package/dist/collection/components/selectable/selectable.js

@@ -9,6 +9,7 @@ export class Selectable {
     this.value = undefined;
     this.invalid = undefined;
     this.describedById = undefined;
+    this.labelledById = undefined;
     this.disabled = undefined;
     this.required = undefined;
     this.checked = undefined;
@@ -41,7 +42,7 @@ export class Selectable {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), h("label", { htmlFor: this.getIdentifier() }, h("slot", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
+    return (h(Fragment, null, h("div", { class: "dso-selectable-input-wrapper" }, h("input", { type: this.type, id: this.getIdentifier(), value: this.value, name: this.name, "aria-invalid": (_a = this.invalid) === null || _a === void 0 ? void 0 : _a.toString(), "aria-describedby": hasInfo && this.infoFixed ? this.describedById : undefined, "aria-labelledBy": this.labelledById, disabled: this.disabled, required: this.required, checked: this.checked, onChange: (e) => this.dsoChange.emit(e), ref: (el) => (this.input = el) }), !this.labelledById ? (h("label", { htmlFor: this.getIdentifier() }, h("slot", null))) : (h("label", null))), hasInfo && (h(Fragment, null, !this.infoFixed && (h("dso-info-button", { active: this.infoActive, onDsoToggle: (e) => (this.infoActive = e.detail.active) })), h("dso-info", { id: hasInfo && this.infoFixed ? this.describedById : undefined, fixed: this.infoFixed, active: this.infoActive, onDsoClose: () => (this.infoActive = false) }, h("div", null, h("slot", { name: "info" })))))));
   }
   getIdentifier() {
     var _a;
@@ -163,6 +164,23 @@ export class Selectable {
         "attribute": "described-by-id",
         "reflect": false
       },
+      "labelledById": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": ""
+        },
+        "attribute": "labelled-by-id",
+        "reflect": false
+      },
       "disabled": {
         "type": "boolean",
         "mutable": false,

package/dist/collection/index.js

@@ -1,11 +1,14 @@
 export * from "./components/accordion/accordion.interfaces";
+export * from "./components/annotation-output/annotation-output.interfaces";
 export * from "./components/autosuggest/autosuggest.interfaces";
 export * from "./components/card/card.interfaces";
 export * from "./components/date-picker/date-picker.interfaces";
+export * from "./components/expandable-heading/expandable-heading.interfaces";
 export * from "./components/header/header.interfaces";
 export * from "./components/info-button/info-button.interfaces";
 export * from "./components/list-button/list-button.interfaces";
 export * from "./components/map-base-layers/map-base-layers.interfaces";
+export * from "./components/map-controls/map-controls.interfaces";
 export * from "./components/map-overlays/map-overlays.interfaces";
 export * from "./components/modal/modal.interfaces";
 export * from "./components/ozon-content/ozon-content.interfaces";

package/dist/collection/services/annotation.service.js

@@ -0,0 +1,16 @@
+import { createStore } from "@stencil/store";
+export class AnnotationService {
+  static get state() {
+    if (!this._state) {
+      AnnotationService.initializeStore();
+    }
+    return this._state;
+  }
+  static toggle(id) {
+    this._state[id] = !this._state[id];
+  }
+  static initializeStore() {
+    const { state } = createStore({});
+    AnnotationService._state = state;
+  }
+}

package/dist/components/annotation.service.js

@@ -0,0 +1,19 @@
+import { c as createStore } from './index2.js';
+
+class AnnotationService {
+  static get state() {
+    if (!this._state) {
+      AnnotationService.initializeStore();
+    }
+    return this._state;
+  }
+  static toggle(id) {
+    this._state[id] = !this._state[id];
+  }
+  static initializeStore() {
+    const { state } = createStore({});
+    AnnotationService._state = state;
+  }
+}
+
+export { AnnotationService as A };