npm - @dso-toolkit/core - Versions diffs - 62.13.0 → 62.15.0 - Mend

@dso-toolkit/core 62.13.0 → 62.15.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 (155) hide show

package/dist/collection/components/input-range/input-range.css ADDED Viewed

@@ -0,0 +1,74 @@
+:host {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.5rem;
+  inline-size: 100%;
+}
+*,
+*::after,
+*::before {
+  box-sizing: border-box;
+}
+.counter {
+  flex-shrink: 0;
+  min-inline-size: 5ch;
+}
+.counter.min {
+  text-align: end;
+}
+.counter.max {
+  text-align: start;
+}
+.input {
+  flex-grow: 1;
+  appearance: none;
+  background-color: transparent;
+  cursor: pointer;
+}
+.input::-webkit-slider-runnable-track {
+  block-size: 0.5rem;
+  background-color: #e5e5e5;
+  border: 1px solid #666;
+  border-radius: 0.5rem;
+}
+.input::-webkit-slider-runnable-track:hover {
+  background-color: #ccc;
+}
+.input::-webkit-slider-thumb {
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  appearance: none;
+  margin-block-start: -0.55rem;
+  background-color: #39870c;
+  border-radius: 50%;
+}
+.input::-webkit-slider-thumb:hover {
+  background-color: #275937;
+}
+.input::-moz-range-track {
+  box-sizing: border-box;
+  block-size: 0.5rem;
+  background-color: #e5e5e5;
+  border: 1px solid #666;
+  border-radius: 0.5rem;
+}
+.input::-moz-range-track:hover {
+  background-color: #ccc;
+}
+.input::-moz-range-thumb {
+  box-sizing: border-box;
+  block-size: 1.5rem;
+  inline-size: 1.5rem;
+  appearance: none;
+  margin-block-start: -0.5rem;
+  background-color: #39870c;
+  border-color: transparent;
+  border-radius: 50%;
+}
+.input::-moz-range-thumb:hover {
+  background-color: #275937;
+}

package/dist/collection/components/input-range/input-range.interfaces.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ export {};
2	+ //# sourceMappingURL=input-range.interfaces.js.map

package/dist/collection/components/input-range/input-range.interfaces.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"input-range.interfaces.js","sourceRoot":"","sources":["../../../../src/components/input-range/input-range.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface InputRangeChangeEvent {\r\n originalEvent: Event;\r\n value: number \| undefined;\r\n min: number;\r\n max: number;\r\n step: number;\r\n}\r\n"]}

package/dist/collection/components/input-range/input-range.js ADDED Viewed

@@ -0,0 +1,186 @@
+import { h, Fragment } from "@stencil/core";
+export class InputRange {
+  constructor() {
+    this.min = undefined;
+    this.max = undefined;
+    this.value = undefined;
+    this.step = undefined;
+    this.label = undefined;
+    this.unit = "";
+    this.description = undefined;
+  }
+  render() {
+    const min = this.min || 0;
+    const max = this.max || 100;
+    const step = this.step || 1;
+    return (h(Fragment, null, this.description && (h("span", { id: "description", hidden: true }, this.description)), h("span", { class: "counter min", "aria-hidden": "true" }, min, this.unit), h("input", { type: "range", min: this.min, max: this.max, value: this.value, class: "input", "aria-label": this.label, "aria-describedby": this.description ? "description" : undefined, onChange: (event) => this.dsoChange.emit({
+        originalEvent: event,
+        value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,
+        max,
+        min,
+        step,
+      }) }), h("span", { class: "counter max", "aria-hidden": "true" }, max, this.unit)));
+  }
+  static get is() { return "dso-input-range"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["input-range.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["input-range.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "min": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The minimum value of the range."
+        },
+        "attribute": "min",
+        "reflect": false
+      },
+      "max": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The maximum value of the range."
+        },
+        "attribute": "max",
+        "reflect": false
+      },
+      "value": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The value of the range."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "step": {
+        "type": "number",
+        "mutable": false,
+        "complexType": {
+          "original": "number",
+          "resolved": "number | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The step to increment the value by."
+        },
+        "attribute": "step",
+        "reflect": false
+      },
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The label of the range."
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "unit": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The unit of the range."
+        },
+        "attribute": "unit",
+        "reflect": false,
+        "defaultValue": "\"\""
+      },
+      "description": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string | undefined",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The description of the range."
+        },
+        "attribute": "description",
+        "reflect": false
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "dsoChange",
+        "name": "dsoChange",
+        "bubbles": false,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the value has changed."
+        },
+        "complexType": {
+          "original": "InputRangeChangeEvent",
+          "resolved": "InputRangeChangeEvent",
+          "references": {
+            "InputRangeChangeEvent": {
+              "location": "import",
+              "path": "./input-range.interfaces",
+              "id": "src/components/input-range/input-range.interfaces.ts::InputRangeChangeEvent"
+            }
+          }
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}
+//# sourceMappingURL=input-range.js.map

package/dist/collection/components/input-range/input-range.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"input-range.js","sourceRoot":"","sources":["../../../../src/components/input-range/input-range.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAQ/G,MAAM,OAAO,UAAU;;;;;;;gBAmCN,EAAE;;;EAiBjB,MAAM;IACJ,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,CAAC,CAAC;IAC1B,MAAM,GAAG,GAAG,IAAI,CAAC,GAAG,IAAI,GAAG,CAAC;IAC5B,MAAM,IAAI,GAAG,IAAI,CAAC,IAAI,IAAI,CAAC,CAAC;IAE5B,OAAO,CACL;MACG,IAAI,CAAC,WAAW,IAAI,CACnB,YAAM,EAAE,EAAC,aAAa,EAAC,MAAM,UAC1B,IAAI,CAAC,WAAW,CACZ,CACR;MACD,YAAM,KAAK,EAAC,aAAa,iBAAa,MAAM;QACzC,GAAG;QACH,IAAI,CAAC,IAAI,CACL;MACP,aACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,GAAG,EAAE,IAAI,CAAC,GAAG,EACb,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,KAAK,EAAC,OAAO,gBACD,IAAI,CAAC,KAAK,sBACJ,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,EAC9D,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE,CAClB,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC;UAClB,aAAa,EAAE,KAAK;UACpB,KAAK,EAAE,KAAK,CAAC,MAAM,YAAY,gBAAgB,CAAC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,SAAS;UAC9F,GAAG;UACH,GAAG;UACH,IAAI;SACL,CAAC,GAEJ;MACF,YAAM,KAAK,EAAC,aAAa,iBAAa,MAAM;QACzC,GAAG;QACH,IAAI,CAAC,IAAI,CACL,CACN,CACJ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, h, Prop, Element, Fragment, Event, EventEmitter } from \"@stencil/core\";\r\nimport { InputRangeChangeEvent } from \"./input-range.interfaces\";\r\n\r\n@Component({\r\n tag: \"dso-input-range\",\r\n styleUrl: \"input-range.scss\",\r\n shadow: true,\r\n})\r\nexport class InputRange implements ComponentInterface {\r\n /**\r\n * The minimum value of the range.\r\n */\r\n @Prop()\r\n min?: number;\r\n\r\n /**\r\n * The maximum value of the range.\r\n */\r\n @Prop()\r\n max?: number;\r\n\r\n /**\r\n * The value of the range.\r\n */\r\n @Prop()\r\n value?: number;\r\n\r\n /**\r\n * The step to increment the value by.\r\n */\r\n @Prop()\r\n step?: number;\r\n\r\n /**\r\n * The label of the range.\r\n */\r\n @Prop()\r\n label?: string;\r\n\r\n /**\r\n * The unit of the range.\r\n */\r\n @Prop()\r\n unit: string = \"\";\r\n\r\n /**\r\n * The description of the range.\r\n */\r\n @Prop()\r\n description?: string;\r\n\r\n /**\r\n * Emitted when the value has changed.\r\n */\r\n @Event({ bubbles: false })\r\n dsoChange!: EventEmitter<InputRangeChangeEvent>;\r\n\r\n @Element()\r\n host!: HTMLDsoInputRangeElement;\r\n\r\n render() {\r\n const min = this.min || 0;\r\n const max = this.max || 100;\r\n const step = this.step || 1;\r\n\r\n return (\r\n <>\r\n {this.description && (\r\n \r\n {this.description}\r\n \r\n )}\r\n \r\n {min}\r\n {this.unit}\r\n \r\n <input\r\n type=\"range\"\r\n min={this.min}\r\n max={this.max}\r\n value={this.value}\r\n class=\"input\"\r\n aria-label={this.label}\r\n aria-describedby={this.description ? \"description\" : undefined}\r\n onChange={(event) =>\r\n this.dsoChange.emit({\r\n originalEvent: event,\r\n value: event.target instanceof HTMLInputElement ? parseInt(event.target.value, 10) : undefined,\r\n max,\r\n min,\r\n step,\r\n })\r\n }\r\n />\r\n \r\n {max}\r\n {this.unit}\r\n \r\n </>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -27,7 +27,8 @@
   height: 2rem;
   justify-content: center;
   position: relative;
-  width: 2rem;
+  min-inline-size: 2rem;
+  padding: 2px;
 }
 .pagination > li > a:active,
 .pagination > li > span:active {
@@ -35,7 +36,7 @@
 }
 .pagination > li > span {
   border: 2px solid transparent;
-  border-radius: 50%;
+  border-radius: 1rem;
 }
 .pagination > li a {
   line-height: 2rem;

package/dist/collection/components/progress-indicator/progress-indicator.css CHANGED Viewed

@@ -23,7 +23,9 @@ span.dso-progress-indicator-label {
 }
 :host([size=small]) .dso-progress-indicator-spinner,
-:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner {
+:host([size=small]) dso-icon,
+:host(:not([size=medium]):not([size=large])) .dso-progress-indicator-spinner,
+:host(:not([size=medium]):not([size=large])) dso-icon {
   height: 24px;
   width: 24px;
 }
@@ -32,7 +34,8 @@ span.dso-progress-indicator-label {
   padding: 12px 16px;
 }
-:host([size=medium]) .dso-progress-indicator-spinner {
+:host([size=medium]) .dso-progress-indicator-spinner,
+:host([size=medium]) dso-icon {
   height: 32px;
   width: 32px;
 }
@@ -40,7 +43,8 @@ span.dso-progress-indicator-label {
   padding: 16px;
 }
-:host([size=large]) .dso-progress-indicator-spinner {
+:host([size=large]) .dso-progress-indicator-spinner,
+:host([size=large]) dso-icon {
   height: 48px;
   width: 48px;
 }

package/dist/collection/components/progress-indicator/progress-indicator.js CHANGED Viewed

@@ -6,12 +6,7 @@ export class Progressindicator {
     this.block = undefined;
   }
   render() {
-    return (h(Host, null, h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("svg", { class: "spinner", viewBox: "0 0 100 100", xmlns: "http://www.w3.org/2000/svg" }, h("style", null, `
-                .spinner { animation: rotator 8s linear infinite; transform-origin: center; }
-                @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
-                .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }
-                @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }
-              `), h("circle", { class: "path", fill: "none", "stroke-width": "10", "stroke-linecap": "butt", cx: "50", cy: "50", r: "45" }))), h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+    return (h(Host, null, h("span", { class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { icon: "spinner" })), h("span", { id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
   }
   static get is() { return "dso-progress-indicator"; }
   static get encapsulation() { return "shadow"; }

package/dist/collection/components/progress-indicator/progress-indicator.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;~~QAExG~~,~~WAAK~~,~~KAAK~~,EAAC,SAAS,~~EAAC~~,~~OAAO,EAAC,aAAa,EAAC,KAAK,EAAC,4BAA4B~~;~~UAC3E,iBACG;;;;;eAKA,CACK;UACR,cAAQ,KAAK,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM,kBAAc,IAAI,oBAAgB,MAAM,EAAC,EAAE,EAAC,IAAI,EAAC,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,IAAI,GAAU,CACrG,CACD;~~MACP,YAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n /*\r\n The label of the Progress Indicator.\r\n /\r\n @Prop()\r\n label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n /\r\n The size (width) of the Progress Indicator.\r\n \r\n If no size is set, falls back to `small`.\r\n /\r\n @Prop({ reflect: true })\r\n size?: \"small\" \| \"medium\" \| \"large\";\r\n\r\n /\r\n Set for bloatier Progress Indicator.\r\n /\r\n @Prop()\r\n block?: boolean;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n ~~{/ Keep in sync with /packages/css/src/components/progress~~-~~indicator/progress-indicator.scss~~ */}\r\n <svg class=\"spinner\" ~~viewBox=\"0 0 100 100\" xmlns=\"http://www.w3.org/2000/svg\">\r\n <style>\r\n {`\r\n .spinner { animation: rotator 8s linear infinite; transform~~-origin: center; }\r\n @keyframes rotator { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }\r\n .path { stroke-dasharray: var(--_progress-indicator-spinner-stroke-dasharray, 265); stroke-dashoffset: 0; transform-origin: center; stroke: #39870c; animation: dash 2s ease-in-out infinite; }\r\n @keyframes dash { 0% { stroke-dashoffset: 265; } 50% { stroke-dashoffset: 65; transform:rotate(90deg); } 100% { stroke-dashoffset: 265; transform:rotate(360deg); }\r\n `}\r\n </style>\r\n ~~<circle class=\"path\" fill=\"none\" stroke-width=\"10\" stroke-linecap=\"butt\" cx=\"50\" cy=\"50\" r=\"45\"></circle>\r\n </svg>\r\n~~ </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"progress-indicator.js","sourceRoot":"","sources":["../../../../src/components/progress-indicator/progress-indicator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,iBAAiB;;iBAKpB,kDAAkD;;;;EAgB1D,MAAM;IACJ,OAAO,CACL,EAAC,IAAI;MACH,YAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;QACxG,gBAAU,IAAI,EAAC,SAAS,GAAY,CAC/B;MACP,YAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Host, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-progress-indicator\",\r\n styleUrl: \"progress-indicator.scss\",\r\n shadow: true,\r\n})\r\nexport class Progressindicator {\r\n /*\r\n The label of the Progress Indicator.\r\n /\r\n @Prop()\r\n label = \"Resultaten laden: een moment geduld alstublieft.\";\r\n\r\n /\r\n The size (width) of the Progress Indicator.\r\n \r\n If no size is set, falls back to `small`.\r\n /\r\n @Prop({ reflect: true })\r\n size?: \"small\" \| \"medium\" \| \"large\";\r\n\r\n /\r\n Set for bloatier Progress Indicator.\r\n */\r\n @Prop()\r\n block?: boolean;\r\n\r\n render() {\r\n return (\r\n <Host>\r\n <span class=\"dso-progress-indicator-spinner\" role=\"progressbar\" aria-labelledby=\"progress-indicator-label\">\r\n <dso-icon icon=\"spinner\"></dso-icon>\r\n </span>\r\n <span id=\"progress-indicator-label\" class=\"dso-progress-indicator-label\">\r\n {this.label}\r\n </span>\r\n </Host>\r\n );\r\n }\r\n}\r\n"]}

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

@@ -35,6 +35,7 @@
   transition: opacity 150ms ease-in-out;
   width: 100%;
   pointer-events: none;
+  z-index: 1;
 }
 .dso-shadow-container .dso-scroll-container::before {
   background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));

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

@@ -889,7 +889,7 @@ a.dso-tertiary, a.dso-tertiary:visited {
 :host([is-responsive]) .dso-table-body {
   border: 1px solid #ccc;
   margin-bottom: 0;
-  overflow-y: hidden;
+  overflow-y: auto;
   width: 100%;
 }
 :host([is-responsive]) .dso-table-body.dso-body {

package/dist/collection/components/toggletip/toggletip.js CHANGED Viewed

@@ -73,9 +73,15 @@ export class Toggletip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"top\" | \"right\" | \"bottom\" | \"left\"",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {}
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@popperjs/core",
+              "id": "../../node_modules/@popperjs/core/index.d.ts::Placement"
+            }
+          }
         },
         "required": false,
         "optional": false,

package/dist/collection/components/toggletip/toggletip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"toggletip.js","sourceRoot":"","sources":["../../../../src/components/toggletip/toggletip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;~~AAO7E~~,MAAM,OAAO,SAAS;;IAiCZ,UAAK,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3C,CAAC,CAAC;IAEM,SAAI,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChE,CAAC,CAAC;IAEM,UAAK,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;MACjE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAC/D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;QACpD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;;MACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;QACrD,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ,EAAE,CAAC;QAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;MAED,OAAO;IACT,CAAC,CAAC;kBA1DO,KAAK;iBAMN,aAAa;~~oBAM2B~~,OAAO;;;;~~EAgDvD~~,MAAM;IACJ,OAAO,CACL;MACE,2CACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,GAC7C;MACF,mBACE,SAAS,QACT,WAAW,QACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QAEjB,eAAQ,CACI,CACb,CACJ,CAAC;EACJ,CAAC~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~CACF","sourcesContent":["import { h, Component, Fragment, Element, Prop, State } from \"@stencil/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /*\r\n Toggletip label.\r\n /\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /\r\n Toggletip position.\r\n /\r\n @Prop()\r\n position: ~~\"top\"~~ ~~\| \"right\" \| \"bottom\" \| \"left\"~~ = \"right\";\r\n\r\n /\r\n Set to true for small Toggletip.\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\r\n this.active ? this.close() : this.open();\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n"]}
1	+ {"version":3,"file":"toggletip.js","sourceRoot":"","sources":["../../../../src/components/toggletip/toggletip.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAQ7E,MAAM,OAAO,SAAS;;IAiCZ,UAAK,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC,CAAC,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC;IAC3C,CAAC,CAAC;IAEM,SAAI,GAAG,GAAG,EAAE;MAClB,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAC5D,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;IAChE,CAAC,CAAC;IAEM,UAAK,GAAG,GAAG,EAAE;MACnB,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,UAAU,EAAE,IAAI,CAAC,gBAAgB,CAAC,CAAC;MACjE,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAC/D,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IACtB,CAAC,CAAC;IAEM,qBAAgB,GAAG,CAAC,KAAiB,EAAE,EAAE;MAC/C,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,aAAqB,CAAC,EAAE;QACpD,IAAI,CAAC,KAAK,EAAE,CAAC;OACd;IACH,CAAC,CAAC;IAEM,oBAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;;MACjD,IAAI,CAAC,KAAK,CAAC,gBAAgB,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;QACrD,IAAI,CAAC,KAAK,EAAE,CAAC;QACb,MAAA,IAAI,CAAC,UAAU,0CAAE,QAAQ,EAAE,CAAC;QAC5B,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;MAED,OAAO;IACT,CAAC,CAAC;kBA1DO,KAAK;iBAMN,aAAa;oBAMC,OAAO;;;;EAgD7B,MAAM;IACJ,OAAO,CACL;MACE,2CACmB,QAAQ,EACzB,OAAO,EAAE,IAAI,CAAC,KAAK,EACnB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,SAAS,EAAE,IAAI,CAAC,SAAS,EACzB,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,UAAU,GAAG,OAAO,CAAC,GAC7C;MACF,mBACE,SAAS,QACT,WAAW,QACX,EAAE,EAAC,QAAQ,EACX,QAAQ,EAAC,UAAU,EACnB,MAAM,EAAE,IAAI,CAAC,MAAM,EACnB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,KAAK,EAAE,IAAI,CAAC,KAAK;QAEjB,eAAQ,CACI,CACb,CACJ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Fragment, Element, Prop, State } from \"@stencil/core\";\r\nimport { Placement } from \"@popperjs/core\";\r\n\r\n@Component({\r\n tag: \"dso-toggletip\",\r\n styleUrl: \"toggletip.scss\",\r\n shadow: true,\r\n})\r\nexport class Toggletip {\r\n @Element()\r\n host!: HTMLDsoToggletipElement;\r\n\r\n @State()\r\n active = false;\r\n\r\n /*\r\n Toggletip label.\r\n /\r\n @Prop()\r\n label = \"Toelichting\";\r\n\r\n /\r\n Toggletip position.\r\n /\r\n @Prop()\r\n position: Placement = \"right\";\r\n\r\n /\r\n Set to true for small Toggletip.\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Set to true for secondary Toggletip.\r\n */\r\n @Prop()\r\n secondary?: boolean;\r\n\r\n private infoButton?: HTMLDsoInfoButtonElement;\r\n\r\n private click = () => {\r\n this.active ? this.close() : this.open();\r\n };\r\n\r\n private open = () => {\r\n this.active = true;\r\n this.host.addEventListener(\"keydown\", this.keyDownListener);\r\n this.host.addEventListener(\"focusout\", this.focusOutListener);\r\n };\r\n\r\n private close = () => {\r\n this.host.removeEventListener(\"focusout\", this.focusOutListener);\r\n this.host.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.active = false;\r\n };\r\n\r\n private focusOutListener = (event: FocusEvent) => {\r\n if (!this.host.contains(event.relatedTarget as Node)) {\r\n this.close();\r\n }\r\n };\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (!event.defaultPrevented && event.key === \"Escape\") {\r\n this.close();\r\n this.infoButton?.setFocus();\r\n event.preventDefault();\r\n }\r\n\r\n return;\r\n };\r\n\r\n render() {\r\n return (\r\n <>\r\n <dso-info-button\r\n aria-describedby=\"toggle\"\r\n onClick={this.click}\r\n label={this.label}\r\n active={this.active}\r\n secondary={this.secondary}\r\n ref={(element) => (this.infoButton = element)}\r\n />\r\n <dso-tooltip\r\n stateless\r\n descriptive\r\n id=\"toggle\"\r\n strategy=\"absolute\"\r\n active={this.active}\r\n position={this.position}\r\n small={this.small}\r\n >\r\n <slot />\r\n </dso-tooltip>\r\n </>\r\n );\r\n }\r\n}\r\n"]}

package/dist/collection/components/tooltip/tooltip.js CHANGED Viewed

@@ -247,9 +247,15 @@ export class Tooltip {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "\"top\" | \"right\" | \"bottom\" | \"left\"",
-          "resolved": "\"bottom\" | \"left\" | \"right\" | \"top\"",
-          "references": {}
+          "original": "Placement",
+          "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+          "references": {
+            "Placement": {
+              "location": "import",
+              "path": "@popperjs/core",
+              "id": "../../node_modules/@popperjs/core/index.d.ts::Placement"
+            }
+          }
         },
         "required": false,
         "optional": false,

package/dist/collection/components/tooltip/tooltip.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import { beforeWrite, createPopper, Instance as PopperInstance, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip {\r\n /*\r\n Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n /\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /\r\n Set position of tooltip relative to target\r\n /\r\n @Prop()\r\n position: \"top\" \| \"right\" \| \"bottom\" \| \"left\" = \"top\";\r\n\r\n /\r\n Set position strategy of tooltip\r\n /\r\n @Prop()\r\n strategy: \"auto\" \| \"absolute\" \| \"fixed\" = \"auto\";\r\n\r\n /\r\n Set attribute `no-arrow` to hide the arrow\r\n /\r\n @Prop()\r\n noArrow = false;\r\n\r\n /\r\n Deactivates mouseover behaviour\r\n /\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /\r\n Defines if the tooltip has a smaller max-width\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /\r\n Activate the tooltip (Sets the `active` attribute)\r\n /\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /\r\n Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" \|\| this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element \| null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance \| undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => (this.active = false),\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive \|\| undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement \| undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement \| undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement \| undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"]}
1	+ {"version":3,"file":"tooltip.js","sourceRoot":"","sources":["../../../../src/components/tooltip/tooltip.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,EAAE,WAAW,EAAE,YAAY,EAA+D,MAAM,gBAAgB,CAAC;AACxH,OAAO,OAAO,MAAM,0BAA0B,CAAC;AAC/C,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACxF,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,QAAQ,MAAM,UAAU,CAAC;AAEhC,+HAA+H;AAC/H,MAAM,kBAAkB,GAAG,GAAG,CAAC;AAE/B,MAAM,YAAY,GAAG;EACnB,IAAI,EAAE,cAAc;EACpB,OAAO,EAAE,IAAI;EACb,KAAK,EAAE,WAAW;EAClB,QAAQ,EAAE,CAAC,SAAS,CAAC;EACrB,EAAE,CAAC,EAAE,KAAK,EAA0B;IAClC,IAAI,EAAE,KAAK,EAAE,GAAG,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC;IAC5C,IAAI,KAAK,GAAG,GAAG,EAAE;MACf,KAAK,GAAG,GAAG,CAAC;KACb;IAED,KAAK,CAAC,MAAM,CAAC,MAAM,mCACd,KAAK,CAAC,MAAM,CAAC,MAAM,KACtB,QAAQ,EAAE,GAAG,KAAK,IAAI,GACvB,CAAC;EACJ,CAAC;CACF,CAAC;AAOF,MAAM,OAAO,OAAO;;IAmIV,cAAS,GAAqB;MACpC,QAAQ,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACpC,UAAU,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;KACxC,CAAC;IAEM,iBAAY,GAAG,GAAG,EAAE;;MAC1B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAA,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,CAAC,QAAQ,CAAC,CAAA,EAAE;QACtE,IAAI,CAAC,SAAS,CAAC,UAAU,EAAE,CAAC;OAC7B;IACH,CAAC,CAAC;IA0CM,oBAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;MACjD,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE;QAC1B,IAAI,CAAC,UAAU,EAAE,CAAC;OACnB;IACH,CAAC,CAAC;IAeM,qBAAgB,GAAG,QAAQ,CAAC,GAAG,EAAE;;MACvC,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;MACnB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAE,CAAC;MACvB,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;IAC1B,CAAC,EAAE,kBAAkB,CAAC,CAAC;IA6BvB,kCAAsB;uBAnOR,KAAK;oBAMG,KAAK;oBAMe,MAAM;mBAMtC,KAAK;;;kBAkBN,KAAK;kBAoGG,IAAI;;EAlGrB;;KAEG;EAEH,KAAK,CAAC,QAAQ;IACZ,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC;EACrB,CAAC;EAED;;KAEG;EAEH,KAAK,CAAC,UAAU;IACd,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;EACtB,CAAC;EAGD,aAAa;IACX,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,OAAO;KACR;IAED,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;MACrB,SAAS,EAAE,IAAI,CAAC,QAAQ;KACzB,CAAC,CAAC;EACL,CAAC;EAGD,aAAa;IACX,IAAI,CAAC,WAAW,EAAE,CAAC;EACrB,CAAC;EAEO,WAAW;IACjB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE;MAChB,OAAO;KACR;IAED,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,IAAI,IAAI,CAAC,QAAQ,KAAK,OAAO,EAAE;MAC7D,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;QACrB,QAAQ,EAAE,IAAI,CAAC,QAAQ;OACxB,CAAC,CAAC;MAEH,OAAO;KACR;IAED,IAAI,OAAO,GAAmB,IAAI,CAAC,OAAO,CAAC;IAC3C,OAAO,OAAO,IAAI,OAAO,CAAC,UAAU,KAAK,QAAQ,EAAE;MACjD,OAAO,GAAG,OAAO,CAAC,UAAU,YAAY,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,aAAa,CAAC;MACrG,IAAI,OAAO,KAAK,IAAI,IAAI,WAAW,CAAC,OAAO,CAAC,EAAE;QAC5C,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;UACrB,QAAQ,EAAE,OAAO;SAClB,CAAC,CAAC;QAEH,OAAO;OACR;KACF;IAED,IAAI,CAAC,MAAM,CAAC,UAAU,CAAC;MACrB,QAAQ,EAAE,UAAU;KACrB,CAAC,CAAC;EACL,CAAC;EAGD,WAAW;IACT,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,cAAc,EAAE,CAAC;MAEtB,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE;QACnB,UAAU,CAAC,GAAG,EAAE;;UACd,MAAA,IAAI,CAAC,MAAM,0CAAE,UAAU,CAAC;YACtB,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;WACvD,CAAC,CAAC;UACH,QAAQ,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;QAC7D,CAAC,CAAC,CAAC;OACJ;KACF;SAAM;MACL,QAAQ,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC;MAC9D,IAAI,CAAC,gBAAgB,EAAE,CAAC;KACzB;EACH,CAAC;EAqBO,WAAW,CAAC,CAAa;IAC/B,CAAC,CAAC,eAAe,EAAE,CAAC;EACtB,CAAC;EAED,gBAAgB;;IACd,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IACnE,IAAI,CAAC,CAAC,OAAO,YAAY,WAAW,CAAC,EAAE;MACrC,MAAM,IAAI,KAAK,CAAC,+CAA+C,CAAC,CAAC;KAClE;IAED,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;MAClC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;MACpE,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,gBAAgB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;MAC5G,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;MAC/D,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;KACjE;EACH,CAAC;EAED,oBAAoB;;IAClB,MAAA,IAAI,CAAC,MAAM,0CAAE,OAAO,EAAE,CAAC;IAEvB,IAAI,CAAC,IAAI,CAAC,SAAS,IAAI,IAAI,CAAC,MAAM,EAAE;MAClC,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;MACvE,CAAC,IAAI,CAAC,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,CAAC,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,CAAC,mBAAmB,CAAC,YAAY,EAAE,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC;MAC/G,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;MAClE,IAAI,CAAC,MAAM,CAAC,mBAAmB,CAAC,MAAM,EAAE,IAAI,CAAC,SAAS,CAAC,UAAU,CAAC,CAAC;KACpE;IAED,IAAI,CAAC,MAAM,GAAG,SAAS,CAAC;EAC1B,CAAC;EAED,kBAAkB;;IAChB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,MAAA,IAAI,CAAC,MAAM,0CAAE,MAAM,EAAE,CAAC;KACvB;EACH,CAAC;EAQD,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAC,SAAS,EAAC,OAAO,EAAE,IAAI,CAAC,WAAW;MAC5E,WAAK,KAAK,EAAE,IAAI,CAAC,SAAS,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC;QAC7C,CAAC,IAAI,CAAC,OAAO,IAAI,sCAAuB,KAAK,EAAC,eAAe,GAAO;QACrE,0BAAkB,CAAC,IAAI,CAAC,WAAW,IAAI,SAAS,EAAE,KAAK,EAAE,IAAI,CAAC,eAAe,EAAE,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,EAAE,CAAC;UACzG,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;EAQO,cAAc;;IACpB,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC;IAEpB,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,OAAO;KACR;IAED,MAAM,OAAO,GAAG,MAAA,IAAI,CAAC,OAAO,CAAC,UAAU,0CAAE,aAAa,CAAC,UAAU,CAAC,CAAC;IAEnE,IAAI,IAAI,CAAC,MAAM,IAAI,OAAO,YAAY,WAAW,EAAE;MACjD,IAAI,CAAC,MAAM,GAAG,YAAY,CAAC,IAAI,CAAC,MAAM,EAAE,OAAO,EAAE;QAC/C,SAAS,EAAE,IAAI,CAAC,QAAQ;QACxB,SAAS,EAAE,CAAC,OAAO,EAAE,YAAY,EAAE,EAAE,IAAI,EAAE,gBAAgB,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC;OAC/E,CAAC,CAAC;MAEH,IAAI,CAAC,WAAW,EAAE,CAAC;KACpB;EACH,CAAC;EAED,IAAY,MAAM;;IAChB,OAAO,MAAA,uBAAA,IAAI,uBAAQ,mCAAI,IAAI,CAAC,gBAAgB,EAAE,CAAC;EACjD,CAAC;EAED,IAAY,MAAM,CAAC,OAAgC;IACjD,uBAAA,IAAI,mBAAW,OAAO,MAAA,CAAC;EACzB,CAAC;EAIO,gBAAgB;IACtB,MAAM,EAAE,GAAG,IAAI,CAAC,OAAO,CAAC,EAAE,CAAC;IAE3B,IAAI,CAAC,EAAE,EAAE;MACP,OAAO,CAAC,IAAI,CAAC,yDAAyD,CAAC,CAAC;MAExE,OAAO;KACR;IAED,MAAM,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,WAAW,EAAE,CAAC;IAC5C,IAAI,CAAC,CAAC,QAAQ,YAAY,QAAQ,IAAI,QAAQ,YAAY,UAAU,CAAC,EAAE;MACrE,OAAO,CAAC,IAAI,CAAC,oDAAoD,CAAC,CAAC;MAEnE,OAAO;KACR;IAED,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAc,sBAAsB,EAAE,EAAE,CAAC,CAAC;IAClF,IAAI,CAAC,SAAS,EAAE;MACd,OAAO,CAAC,IAAI,CAAC,kDAAkD,EAAE,EAAE,CAAC,CAAC;MAErE,OAAO;KACR;IAED,uBAAA,IAAI,mBAAW,SAAS,MAAA,CAAC;IACzB,OAAO,SAAS,CAAC;EACnB,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { beforeWrite, createPopper, Instance as PopperInstance, Placement, State as PopperState } from \"@popperjs/core\";\r\nimport maxSize from \"popper-max-size-modifier\";\r\nimport { h, Component, Element, Host, Method, Prop, State, Watch } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { hasOverflow } from \"../../utils/has-overflow\";\r\nimport debounce from \"debounce\";\r\n\r\n// Keep const in sync with $tooltip-transition-duration in dso-toolkit/src/components/tooltip/tooltip.scss tooltip_root() mixin\r\nconst transitionDuration = 150;\r\n\r\nconst applyMaxSize = {\r\n name: \"applyMaxSize\",\r\n enabled: true,\r\n phase: beforeWrite,\r\n requires: [\"maxSize\"],\r\n fn({ state }: { state: PopperState }) {\r\n let { width } = state.modifiersData.maxSize;\r\n if (width < 160) {\r\n width = 160;\r\n }\r\n\r\n state.styles.popper = {\r\n ...state.styles.popper,\r\n maxWidth: `${width}px`,\r\n };\r\n },\r\n};\r\n\r\n@Component({\r\n tag: \"dso-tooltip\",\r\n styleUrl: \"tooltip.scss\",\r\n shadow: true,\r\n})\r\nexport class Tooltip {\r\n /*\r\n Defines if the tooltip is descriptive. A descriptive tooltip contains a meaningful message. Tooltips that are not descriptive are hidden from screenreaders using `aria-hidden`.\r\n /\r\n @Prop({\r\n reflect: true,\r\n })\r\n descriptive = false;\r\n\r\n /\r\n Set position of tooltip relative to target\r\n /\r\n @Prop()\r\n position: Placement = \"top\";\r\n\r\n /\r\n Set position strategy of tooltip\r\n /\r\n @Prop()\r\n strategy: \"auto\" \| \"absolute\" \| \"fixed\" = \"auto\";\r\n\r\n /\r\n Set attribute `no-arrow` to hide the arrow\r\n /\r\n @Prop()\r\n noArrow = false;\r\n\r\n /\r\n Deactivates mouseover behaviour\r\n /\r\n @Prop()\r\n stateless?: boolean;\r\n\r\n /\r\n Defines if the tooltip has a smaller max-width\r\n /\r\n @Prop()\r\n small?: boolean;\r\n\r\n /\r\n Whether or not to show the tooltip. To control the tooltip add the `active` attribute or use the `activate()` and `deactivate()` instance methods.\r\n /\r\n @Prop({ reflect: true, mutable: true })\r\n active = false;\r\n\r\n /\r\n Activate the tooltip (Sets the `active` attribute)\r\n /\r\n @Method()\r\n async activate(): Promise<void> {\r\n this.active = true;\r\n }\r\n\r\n /\r\n Deactivate the tooltip (Removes the `active` attribute)\r\n */\r\n @Method()\r\n async deactivate(): Promise<void> {\r\n this.active = false;\r\n }\r\n\r\n @Watch(\"position\")\r\n watchPosition() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n this.popper.setOptions({\r\n placement: this.position,\r\n });\r\n }\r\n\r\n @Watch(\"strategy\")\r\n watchStrategy() {\r\n this.setStrategy();\r\n }\r\n\r\n private setStrategy() {\r\n if (!this.popper) {\r\n return;\r\n }\r\n\r\n if (this.strategy === \"absolute\" \|\| this.strategy === \"fixed\") {\r\n this.popper.setOptions({\r\n strategy: this.strategy,\r\n });\r\n\r\n return;\r\n }\r\n\r\n let element: Element \| null = this.element;\r\n while (element && element.parentNode !== document) {\r\n element = element.parentNode instanceof ShadowRoot ? element.parentNode.host : element.parentElement;\r\n if (element !== null && hasOverflow(element)) {\r\n this.popper.setOptions({\r\n strategy: \"fixed\",\r\n });\r\n\r\n return;\r\n }\r\n }\r\n\r\n this.popper.setOptions({\r\n strategy: \"absolute\",\r\n });\r\n }\r\n\r\n @Watch(\"active\")\r\n watchActive() {\r\n if (this.active) {\r\n this.activatePopper();\r\n\r\n if (!this.stateless) {\r\n setTimeout(() => {\r\n this.popper?.setOptions({\r\n modifiers: [{ name: \"eventListeners\", enabled: true }],\r\n });\r\n document.addEventListener(\"keydown\", this.keyDownListener);\r\n });\r\n }\r\n } else {\r\n document.removeEventListener(\"keydown\", this.keyDownListener);\r\n this.deactivatePopper();\r\n }\r\n }\r\n\r\n @Element()\r\n private element!: HTMLDsoTooltipElement;\r\n\r\n private popper: PopperInstance \| undefined;\r\n\r\n private callbacks: TooltipCallbacks = {\r\n activate: () => (this.active = true),\r\n deactivate: () => (this.active = false),\r\n };\r\n\r\n private onMouseLeave = () => {\r\n if (!this.element.matches(\":hover\") && !this.target?.matches(\":hover\")) {\r\n this.callbacks.deactivate();\r\n }\r\n };\r\n\r\n @State()\r\n private hidden = true;\r\n\r\n private listenClick(e: MouseEvent) {\r\n e.stopPropagation();\r\n }\r\n\r\n componentDidLoad(): void {\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n if (!(tooltip instanceof HTMLElement)) {\r\n throw new Error(\"tooltip element is not instanceof HTMLElement\");\r\n }\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.addEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.addEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.addEventListener(\"focus\", this.callbacks.activate);\r\n this.target.addEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n }\r\n\r\n disconnectedCallback(): void {\r\n this.popper?.destroy();\r\n\r\n if (!this.stateless && this.target) {\r\n this.target.removeEventListener(\"mouseenter\", this.callbacks.activate);\r\n [this.element, this.target].forEach((element) => element.removeEventListener(\"mouseleave\", this.onMouseLeave));\r\n this.target.removeEventListener(\"focus\", this.callbacks.activate);\r\n this.target.removeEventListener(\"blur\", this.callbacks.deactivate);\r\n }\r\n\r\n this.target = undefined;\r\n }\r\n\r\n componentDidRender() {\r\n if (this.active) {\r\n this.popper?.update();\r\n }\r\n }\r\n\r\n private keyDownListener = (event: KeyboardEvent) => {\r\n if (event.key === \"Escape\") {\r\n this.deactivate();\r\n }\r\n };\r\n\r\n render() {\r\n return (\r\n <Host class={{ hidden: this.hidden }} role=\"tooltip\" onClick={this.listenClick}>\r\n <div class={clsx(\"tooltip\", { in: this.active })}>\r\n {!this.noArrow && <div data-popper-arrow class=\"tooltip-arrow\"></div>}\r\n <div aria-hidden={!this.descriptive \|\| undefined} class={clsx(\"tooltip-inner\", { \"dso-small\": this.small })}>\r\n <slot></slot>\r\n </div>\r\n </div>\r\n </Host>\r\n );\r\n }\r\n\r\n private deactivatePopper = debounce(() => {\r\n this.hidden = true;\r\n this.popper?.destroy();\r\n this.popper = undefined;\r\n }, transitionDuration);\r\n\r\n private activatePopper(): void {\r\n this.hidden = false;\r\n\r\n if (this.popper) {\r\n return;\r\n }\r\n\r\n const tooltip = this.element.shadowRoot?.querySelector(\".tooltip\");\r\n\r\n if (this.target && tooltip instanceof HTMLElement) {\r\n this.popper = createPopper(this.target, tooltip, {\r\n placement: this.position,\r\n modifiers: [maxSize, applyMaxSize, { name: \"eventListeners\", enabled: false }],\r\n });\r\n\r\n this.setStrategy();\r\n }\r\n }\r\n\r\n private get target(): HTMLElement \| undefined {\r\n return this.#target ?? this.initializeTarget();\r\n }\r\n\r\n private set target(element: HTMLElement \| undefined) {\r\n this.#target = element;\r\n }\r\n\r\n #target?: HTMLElement;\r\n\r\n private initializeTarget(): HTMLElement \| undefined {\r\n const id = this.element.id;\r\n\r\n if (!id) {\r\n console.warn(\"Unable to find reference tooltip has no [id] attribute.\");\r\n\r\n return;\r\n }\r\n\r\n const rootNode = this.element.getRootNode();\r\n if (!(rootNode instanceof Document \|\| rootNode instanceof ShadowRoot)) {\r\n console.warn(`rootNode is not instance of Document or ShadowRoot`);\r\n\r\n return;\r\n }\r\n\r\n const reference = rootNode.querySelector<HTMLElement>(`[aria-describedBy=\"${id}`);\r\n if (!reference) {\r\n console.warn(`Unable to find reference with aria-describedby ${id}`);\r\n\r\n return;\r\n }\r\n\r\n this.#target = reference;\r\n return reference;\r\n }\r\n}\r\n\r\ninterface TooltipCallbacks {\r\n activate: () => void;\r\n deactivate: () => void;\r\n}\r\n"]}