@dso-toolkit/core 54.2.1 → 55.0.0

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

@@ -17,7 +17,14 @@ export class Selectable {
     this.indeterminate = undefined;
     this.infoFixed = undefined;
     this.infoActive = false;
+    this.keyboardFocus = false;
   }
+  /**
+   * Method to toggle the Info. Is set to `active` when passed.
+   *
+   * If `active` is not passed, Info is toggled to opposite value.
+   * @param active
+   */
   async toggleInfo(active) {
     this.infoActive = active !== null && active !== void 0 ? active : !this.infoActive;
   }
@@ -43,7 +50,7 @@ export class Selectable {
   render() {
     var _a;
     const hasInfo = !!this.host.querySelector('[slot="info"]');
-    return (h(Fragment, null, h("div", { class: clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, 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) }))))), hasInfo && (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: clsx("dso-selectable-container", { "has-info-button": hasInfo }) }, h("div", { class: clsx("dso-selectable-input-wrapper", { "dso-keyboard-focus": this.keyboardFocus }) }, 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), onBlur: () => (this.keyboardFocus = false), onKeyUp: () => (this.keyboardFocus = true), 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) }))))), hasInfo && (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;
@@ -75,7 +82,7 @@ export class Selectable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Type of Selectable.\r\n\r\n`checkbox`: Multiple options\r\n`radio`: Single option."
         },
         "attribute": "type",
         "reflect": false
@@ -92,7 +99,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "To set `<input id>` attribute for external references."
         },
         "attribute": "identifier",
         "reflect": false
@@ -109,7 +116,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Name of the Selectable. Can be used to group Selectables."
         },
         "attribute": "name",
         "reflect": false
@@ -126,7 +133,7 @@ export class Selectable {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "The value of the Selectable."
         },
         "attribute": "value",
         "reflect": false
@@ -143,7 +150,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true of the current value is not valid."
         },
         "attribute": "invalid",
         "reflect": false
@@ -160,7 +167,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "To link this control to an element that describes it."
         },
         "attribute": "described-by-id",
         "reflect": false
@@ -177,7 +184,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "To link this control to an element that labels it."
         },
         "attribute": "labelled-by-id",
         "reflect": false
@@ -194,7 +201,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "To disable the Selectable."
         },
         "attribute": "disabled",
         "reflect": false
@@ -211,7 +218,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "To mark the Selectable as required."
         },
         "attribute": "required",
         "reflect": false
@@ -228,7 +235,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Mark the Selectable as checked"
         },
         "attribute": "checked",
         "reflect": false
@@ -245,7 +252,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n\r\nCan be used to indicate child Selectables that are a mix of checked and unchecked."
         },
         "attribute": "indeterminate",
         "reflect": false
@@ -262,7 +269,7 @@ export class Selectable {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true if the Info should not be toggled and always visible."
         },
         "attribute": "info-fixed",
         "reflect": false
@@ -271,7 +278,8 @@ export class Selectable {
   }
   static get states() {
     return {
-      "infoActive": {}
+      "infoActive": {},
+      "keyboardFocus": {}
     };
   }
   static get events() {
@@ -283,7 +291,7 @@ export class Selectable {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when the user checks or unchecks the Selectable."
         },
         "complexType": {
           "original": "SelectableChangeEvent",
@@ -303,7 +311,10 @@ export class Selectable {
         "complexType": {
           "signature": "(active?: boolean) => Promise<void>",
           "parameters": [{
-              "tags": [],
+              "tags": [{
+                  "name": "param",
+                  "text": "active"
+                }],
               "text": ""
             }],
           "references": {
@@ -314,8 +325,11 @@ export class Selectable {
           "return": "Promise<void>"
         },
         "docs": {
-          "text": "",
-          "tags": []
+          "text": "Method to toggle the Info. Is set to `active` when passed.\r\n\r\nIf `active` is not passed, Info is toggled to opposite value.",
+          "tags": [{
+              "name": "param",
+              "text": "active"
+            }]
         }
       }
     };
@@ -328,3 +342,4 @@ export class Selectable {
       }];
   }
 }
+//# sourceMappingURL=selectable.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"selectable.js","sourceRoot":"","sources":["../../../src/components/selectable/selectable.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\r\n  h,\r\n  Component,\r\n  Prop,\r\n  Event,\r\n  EventEmitter,\r\n  Fragment,\r\n  Element,\r\n  State,\r\n  forceUpdate,\r\n  Watch,\r\n  Method,\r\n} from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { createIdentifier } from \"../../utils/create-identifier\";\r\nimport { SelectableChangeEvent } from \"./selectable.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-selectable\",\r\n  styleUrl: \"selectable.scss\",\r\n  scoped: true,\r\n})\r\nexport class Selectable {\r\n  /**\r\n   * Type of Selectable.\r\n   *\r\n   * `checkbox`: Multiple options\r\n   * `radio`: Single option.\r\n   */\r\n  @Prop()\r\n  type!: \"checkbox\" | \"radio\";\r\n\r\n  /**\r\n   * To set `<input id>` attribute for external references.\r\n   */\r\n  @Prop()\r\n  identifier?: string;\r\n\r\n  /**\r\n   * Name of the Selectable. Can be used to group Selectables.\r\n   */\r\n  @Prop()\r\n  name?: string;\r\n\r\n  /**\r\n   * The value of the Selectable.\r\n   */\r\n  @Prop()\r\n  value!: string;\r\n\r\n  /**\r\n   * Set to true of the current value is not valid.\r\n   */\r\n  @Prop()\r\n  invalid?: boolean;\r\n\r\n  /**\r\n   * To link this control to an element that describes it.\r\n   */\r\n  @Prop()\r\n  describedById?: string;\r\n\r\n  /**\r\n   * To link this control to an element that labels it.\r\n   */\r\n  @Prop()\r\n  labelledById?: string;\r\n\r\n  /**\r\n   * To disable the Selectable.\r\n   */\r\n  @Prop()\r\n  disabled?: boolean;\r\n\r\n  /**\r\n   * To mark the Selectable as required.\r\n   */\r\n  @Prop()\r\n  required?: boolean;\r\n\r\n  /**\r\n   * Mark the Selectable as checked\r\n   */\r\n  @Prop()\r\n  checked?: boolean;\r\n\r\n  /**\r\n   * An indeterminate state is neither true or false. It means the answer is somewhere in between.\r\n   *\r\n   * Can be used to indicate child Selectables that are a mix of checked and unchecked.\r\n   */\r\n  @Prop()\r\n  indeterminate?: boolean;\r\n\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop()\r\n  infoFixed?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user checks or unchecks the Selectable.\r\n   */\r\n  @Event()\r\n  dsoChange!: EventEmitter<SelectableChangeEvent>;\r\n\r\n  @Element()\r\n  host!: HTMLDsoSelectableElement;\r\n\r\n  @State()\r\n  infoActive = false;\r\n\r\n  @State()\r\n  keyboardFocus = false;\r\n\r\n  /**\r\n   * Method to toggle the Info. Is set to `active` when passed.\r\n   *\r\n   * If `active` is not passed, Info is toggled to opposite value.\r\n   * @param active\r\n   */\r\n  @Method()\r\n  async toggleInfo(active?: boolean) {\r\n    this.infoActive = active ?? !this.infoActive;\r\n  }\r\n\r\n  private mutationObserver?: MutationObserver;\r\n\r\n  private fallbackIdentifier = createIdentifier(\"DsoSelectable\");\r\n\r\n  private input: HTMLInputElement | undefined;\r\n\r\n  componentDidLoad() {\r\n    this.mutationObserver?.disconnect();\r\n\r\n    this.mutationObserver = new MutationObserver(() => forceUpdate(this.host));\r\n    this.mutationObserver.observe(this.host, {\r\n      childList: true,\r\n    });\r\n\r\n    this.setIndeterminate();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.mutationObserver?.disconnect();\r\n  }\r\n\r\n  @Watch(\"indeterminate\")\r\n  setIndeterminate() {\r\n    if (!(this.input instanceof HTMLInputElement) || this.type !== \"checkbox\") {\r\n      return;\r\n    }\r\n\r\n    this.input.indeterminate = !!this.indeterminate;\r\n  }\r\n\r\n  render() {\r\n    const hasInfo = !!this.host.querySelector('[slot=\"info\"]');\r\n\r\n    return (\r\n      <Fragment>\r\n        <div class={clsx(\"dso-selectable-container\", { \"has-info-button\": hasInfo })}>\r\n          <div class={clsx(\"dso-selectable-input-wrapper\", { \"dso-keyboard-focus\": this.keyboardFocus })}>\r\n            <input\r\n              type={this.type}\r\n              id={this.getIdentifier()}\r\n              value={this.value}\r\n              name={this.name}\r\n              aria-invalid={this.invalid?.toString()}\r\n              aria-describedby={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n              aria-labelledBy={this.labelledById}\r\n              disabled={this.disabled}\r\n              required={this.required}\r\n              checked={this.checked}\r\n              onChange={(e) => this.dsoChange.emit(e)}\r\n              onBlur={() => (this.keyboardFocus = false)}\r\n              onKeyUp={() => (this.keyboardFocus = true)}\r\n              ref={(el) => (this.input = el)}\r\n            />\r\n            {!this.labelledById ? (\r\n              <label htmlFor={this.getIdentifier()}>\r\n                <slot></slot>\r\n              </label>\r\n            ) : (\r\n              <label></label>\r\n            )}\r\n          </div>\r\n          {hasInfo && (\r\n            <Fragment>\r\n              {!this.infoFixed && (\r\n                <dso-info-button\r\n                  active={this.infoActive}\r\n                  onDsoToggle={(e) => (this.infoActive = e.detail.active)}\r\n                ></dso-info-button>\r\n              )}\r\n            </Fragment>\r\n          )}\r\n        </div>\r\n        {hasInfo && (\r\n          <dso-info\r\n            id={hasInfo && this.infoFixed ? this.describedById : undefined}\r\n            fixed={this.infoFixed}\r\n            active={this.infoActive}\r\n            onDsoClose={() => (this.infoActive = false)}\r\n          >\r\n            <div>\r\n              <slot name=\"info\"></slot>\r\n            </div>\r\n          </dso-info>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n\r\n  private getIdentifier(): string {\r\n    return this.identifier ?? this.fallbackIdentifier;\r\n  }\r\n}\r\n"]}

package/dist/collection/components/slide-toggle/slide-toggle.interfaces.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=slide-toggle.interfaces.js.map

package/dist/collection/components/slide-toggle/slide-toggle.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-toggle.interfaces.js","sourceRoot":"","sources":["../../../src/components/slide-toggle/slide-toggle.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface SlideToggleActiveEvent {\r\n  originalEvent?: Event;\r\n  /** The value that was set */\r\n  checked: boolean;\r\n}\r\n"]}

package/dist/collection/components/slide-toggle/slide-toggle.js

@@ -46,7 +46,7 @@ export class SlideToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true if Slide Toggle is checked."
         },
         "attribute": "checked",
         "reflect": false,
@@ -64,7 +64,7 @@ export class SlideToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events."
         },
         "attribute": "disabled",
         "reflect": false,
@@ -82,7 +82,7 @@ export class SlideToggle {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component"
+          "text": "When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component."
         },
         "attribute": "accessible-label",
         "reflect": false
@@ -99,7 +99,7 @@ export class SlideToggle {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": "Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button"
+          "text": "Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button."
         },
         "attribute": "labelledby-id",
         "reflect": false
@@ -116,7 +116,7 @@ export class SlideToggle {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`"
+          "text": "Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`."
         },
         "attribute": "identifier",
         "reflect": false,
@@ -138,7 +138,7 @@ export class SlideToggle {
         "composed": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Emitted when user checks or unchecks the Slide Toggle."
         },
         "complexType": {
           "original": "SlideToggleActiveEvent",
@@ -154,3 +154,4 @@ export class SlideToggle {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=slide-toggle.js.map

package/dist/collection/components/slide-toggle/slide-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"slide-toggle.js","sourceRoot":"","sources":["../../../src/components/slide-toggle/slide-toggle.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAsB,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAgB,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtH,OAAO,EAAE,EAAE,EAAE,MAAM,MAAM,CAAC;AAQ1B,MAAM,OAAO,WAAW;;mBAQZ,KAAK;oBAMJ,KAAK;;;;sBAqBH,EAAE,EAAE;;EAQT,YAAY,CAAC,CAAQ;IAC3B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;MACxB,aAAa,EAAE,CAAC;MAChB,OAAO,EAAE,CAAC,IAAI,CAAC,OAAO;KACvB,CAAC,CAAC;EACL,CAAC;EAED,iBAAiB;IACf,IAAI,CAAC,eAAe,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,KAAK,IAAI,CAAC;EAC/D,CAAC;EAED,MAAM;IACJ,OAAO,CACL;MACE,4BACE,EAAE,EAAE,IAAI,CAAC,UAAU,EACnB,IAAI,EAAC,QAAQ,EACb,KAAK,EAAC,YAAY,kBACJ,EAAE,GAAG,IAAI,CAAC,OAAO,EAC/B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAChC,CAAC,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,YAAY,EAAE,IAAI,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC,EACpE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,iBAAiB,EAAE,IAAI,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,EAAE,CAAC;QAEvE,WAAK,KAAK,EAAC,4BAA4B,EAAC,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,OAAO,EAAC,WAAW;UAChF,SAAG,IAAI,EAAC,MAAM,eAAW,SAAS;YAChC,YAAM,KAAK,EAAC,IAAI,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,cAAc,EAAC,EAAE,EAAC,IAAI,GAAG;YAC3D,cAAQ,EAAE,EAAC,IAAI,EAAC,CAAC,EAAC,GAAG,EAAC,IAAI,EAAC,cAAc,GAAG,CAC1C,CACA,CACC;MACR,IAAI,CAAC,eAAe,IAAI,CACvB,aAAO,OAAO,EAAE,IAAI,CAAC,UAAU;QAC7B,eAAQ,CACF,CACT,CACA,CACJ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, ComponentInterface, Event, Fragment, Prop, EventEmitter, Element, State } from \"@stencil/core\";\r\nimport { v4 } from \"uuid\";\r\nimport { SlideToggleActiveEvent } from \"./slide-toggle.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-slide-toggle\",\r\n  styleUrl: \"slide-toggle.scss\",\r\n  shadow: false,\r\n})\r\nexport class SlideToggle implements ComponentInterface {\r\n  @Element()\r\n  private host!: HTMLDsoSlideToggleElement;\r\n\r\n  /**\r\n   * Set to true if Slide Toggle is checked.\r\n   */\r\n  @Prop()\r\n  checked = false;\r\n\r\n  /**\r\n   * Disables the Slide Toggle, preventing it from checking/unchecking and therefor not emitting any events.\r\n   */\r\n  @Prop()\r\n  disabled = false;\r\n\r\n  /**\r\n   * When provided the `<button>` will be labelled with `aria-label`. For a visible label provide a `<span>` inside the component.\r\n   */\r\n  @Prop()\r\n  accessibleLabel?: string;\r\n\r\n  /**\r\n   * Provide the `id` of the element that labels this element. this property sets the `aria-labelledby` on the switch button.\r\n   */\r\n  @Prop()\r\n  labelledbyId?: string;\r\n\r\n  @State()\r\n  hasVisibleLabel?: boolean;\r\n\r\n  /**\r\n   * Provide an `id` for the `<button>`. Useful for placing your to place your own `<label for=\"id\">`.\r\n   */\r\n  @Prop()\r\n  identifier = v4();\r\n\r\n  /**\r\n   * Emitted when user checks or unchecks the Slide Toggle.\r\n   */\r\n  @Event()\r\n  dsoActiveChange!: EventEmitter<SlideToggleActiveEvent>;\r\n\r\n  private handleSwitch(e: Event): void {\r\n    this.dsoActiveChange.emit({\r\n      originalEvent: e,\r\n      checked: !this.checked,\r\n    });\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.hasVisibleLabel = this.host.querySelector(\"*\") !== null;\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <>\r\n        <button\r\n          id={this.identifier}\r\n          role=\"switch\"\r\n          class=\"dso-slider\"\r\n          aria-checked={\"\" + this.checked}\r\n          disabled={this.disabled}\r\n          onClick={(e) => this.handleSwitch(e)}\r\n          {...(this.accessibleLabel ? { \"aria-label\": this.accessibleLabel } : {})}\r\n          {...(this.labelledbyId ? { \"aria-labelledby\": this.labelledbyId } : {})}\r\n        >\r\n          <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"40\" height=\"20\" viewBox=\"0 0 40 20\">\r\n            <g fill=\"none\" fill-rule=\"evenodd\">\r\n              <rect width=\"40\" height=\"20\" fill=\"currentColor\" rx=\"10\" />\r\n              <circle cy=\"10\" r=\"8\" fill=\"currentColor\" />\r\n            </g>\r\n          </svg>\r\n        </button>\r\n        {this.hasVisibleLabel && (\r\n          <label htmlFor={this.identifier}>\r\n            <slot />\r\n          </label>\r\n        )}\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -38,13 +38,13 @@
 }
 :host .dso-modal .dso-dialog {
   animation: 1s ease-out 0s 1 slideInFromTop;
-  margin-top: 15vh;
+  background-color: #fff;
+  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
   margin-left: auto;
   margin-right: auto;
+  margin-top: clamp(40px, 15vh, 15vh);
   max-width: 640px;
   opacity: 1;
-  background-color: #fff;
-  box-shadow: 0 8px 24px 0 rgba(25, 25, 25, 0.4);
 }
 :host .dso-modal .dso-header {
   border-bottom: 1px solid #ccc;
@@ -67,41 +67,74 @@
   top: 16px;
   width: 32px;
 }
-:host .dso-modal .dso-body {
+:host .dso-modal > .dso-dialog > .dso-body {
   height: calc(100% - 96px - 1.5rem);
   max-height: calc(70vh - 144px - 1.5em);
   min-height: 1.5rem;
   overflow-x: auto;
   padding: 32px;
 }
-:host .dso-modal .dso-body p {
+:host .dso-modal > .dso-dialog > .dso-body p {
+  margin: 0 0 16px;
+}
+:host .dso-modal > .dso-dialog > .dso-body ul,
+:host .dso-modal > .dso-dialog > .dso-body ol {
+  margin-bottom: 16px;
+}
+:host .dso-modal > .dso-dialog > .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+:host .dso-modal > .dso-dialog > .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+  padding-inline-start: 24px;
+}
+:host .dso-modal > .dso-dialog > .dso-body pre {
+  margin: 0 0 16px;
+}
+:host .dso-modal > .dso-dialog > .dso-body blockquote {
+  padding: 16px 24px;
+}
+:host .dso-modal > .dso-dialog > .dso-body dso-highlight-box,
+:host .dso-modal > .dso-dialog > .dso-body .dso-highlight-box {
+  margin-bottom: 24px;
+}
+:host .dso-modal > .dso-dialog > .dso-body img {
+  height: auto;
+  max-width: 100%;
+}
+:host .dso-modal > .dso-dialog > dso-scrollable {
+  height: calc(100% - 96px - 1.5rem);
+  max-height: calc(70vh - 144px - 1.5em);
+  min-height: 6.5rem;
+}
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body {
+  padding: 32px;
+}
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body p {
   margin: 0 0 16px;
 }
-:host .dso-modal .dso-body ul,
-:host .dso-modal .dso-body ol {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul,
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol {
   margin-bottom: 16px;
 }
-:host .dso-modal .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
-:host .dso-modal .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ul:not(.list-group):not(.dso-link-list):not(.dso-columns-list),
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body ol:not(.list-group):not(.dso-link-list):not(.dso-columns-list) {
   padding-inline-start: 24px;
 }
-:host .dso-modal .dso-body pre {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body pre {
   margin: 0 0 16px;
 }
-:host .dso-modal .dso-body blockquote {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body blockquote {
   padding: 16px 24px;
 }
-:host .dso-modal .dso-body dso-highlight-box,
-:host .dso-modal .dso-body .dso-highlight-box {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body dso-highlight-box,
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body .dso-highlight-box {
   margin-bottom: 24px;
 }
-:host .dso-modal .dso-body img {
+:host .dso-modal > .dso-dialog > dso-scrollable .dso-body img {
   height: auto;
   max-width: 100%;
 }
 :host .dso-modal .dso-footer {
   min-height: 80px;
-  padding: 0 32px 32px;
+  padding: 16px 32px;
   text-align: right;
 }
 @media screen and (max-width: 767px) {
@@ -116,8 +149,8 @@
     margin-top: 8px;
   }
   :host .dso-modal .dso-footer button.dso-tertiary,
-:host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
-:host .dso-modal .dso-footer button.btn-link span {
+  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
+  :host .dso-modal .dso-footer button.btn-link span {
     float: none;
   }
 }
@@ -145,11 +178,32 @@
     margin-top: 8px;
   }
   :host .dso-modal .dso-footer button.dso-tertiary,
-:host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
-:host .dso-modal .dso-footer button.btn-link span {
+  :host .dso-modal .dso-footer button.dso-tertiary span, :host .dso-modal .dso-footer button.btn-link,
+  :host .dso-modal .dso-footer button.btn-link span {
     float: none;
   }
 }
+@media screen and (max-height: 380px) {
+  :host .dso-modal .dso-dialog {
+    margin-bottom: 8px;
+    margin-top: 8px;
+    min-height: 216px;
+  }
+  :host .dso-modal .dso-header {
+    padding: 8px 16px;
+  }
+  :host .dso-modal .dso-header .dso-close {
+    top: 8px;
+  }
+  :host .dso-modal .dso-body {
+    padding: 16px 24px;
+  }
+  :host .dso-modal .dso-footer {
+    min-height: auto;
+    overflow: auto;
+    padding: 8px 32px;
+  }
+}
 
 .dso-modal .dso-dialog.dso-table-dialog {
   margin-top: 1rem;

package/dist/collection/components/table/table.js

@@ -118,7 +118,7 @@ export class Table {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": "Indicates whether the table is currently horizontally scrollable"
+          "text": "Indicates whether the table is currently horizontally scrollable."
         },
         "attribute": "is-responsive",
         "reflect": true,
@@ -134,3 +134,4 @@ export class Table {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=table.js.map

package/dist/collection/components/table/table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"table.js","sourceRoot":"","sources":["../../../src/components/table/table.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, Component, ComponentInterface, Element, Host, Prop, State } from \"@stencil/core\";\r\nimport debounce from \"debounce\";\r\nimport { createFocusTrap, FocusTrap } from \"focus-trap\";\r\nimport { v4 } from \"uuid\";\r\n\r\n@Component({\r\n  tag: \"dso-table\",\r\n  styleUrl: \"table.scss\",\r\n  shadow: true,\r\n})\r\nexport class Table implements ComponentInterface {\r\n  private resizeObserver?: ResizeObserver;\r\n\r\n  private focusTrapElement?: HTMLDivElement;\r\n\r\n  private buttonElement?: HTMLButtonElement;\r\n\r\n  private trap?: FocusTrap;\r\n\r\n  private labelledbyId = v4();\r\n\r\n  @Element()\r\n  host!: HTMLDsoTableElement;\r\n\r\n  /**\r\n   * Prevents the table being opened in a modal.\r\n   */\r\n  @Prop({ reflect: true })\r\n  noModal = false;\r\n\r\n  /**\r\n   * Indicates whether the table is currently horizontally scrollable.\r\n   */\r\n  @Prop({ reflect: true })\r\n  isResponsive = false;\r\n\r\n  @State()\r\n  modalActive = false;\r\n\r\n  @State()\r\n  placeholderHeight?: number;\r\n\r\n  private startResponsiveBehavior(): void {\r\n    this.resizeObserver?.observe(this.host);\r\n  }\r\n\r\n  componentWillLoad(): void {\r\n    this.resizeObserver = new ResizeObserver(debounce((entries) => this.setResponsiveTable(entries), 200));\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.startResponsiveBehavior();\r\n  }\r\n\r\n  componentDidRender() {\r\n    this.setFocusTrap();\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.resizeObserver?.disconnect();\r\n  }\r\n\r\n  render() {\r\n    const caption = this.host.querySelector(\":scope > table > caption\")?.textContent?.trim();\r\n\r\n    return (\r\n      <Host>\r\n        {this.modalActive && this.placeholderHeight && (\r\n          <div class=\"dso-table-placeholder\" style={{ height: `${this.placeholderHeight}px` }} />\r\n        )}\r\n\r\n        {this.modalActive && <div class=\"dso-modal-overlay\"></div>}\r\n\r\n        <div class={{ \"dso-modal\": this.modalActive }}>\r\n          <div\r\n            class={{ \"dso-dialog\": this.modalActive, \"dso-table-dialog\": true }}\r\n            ref={(element) => (this.focusTrapElement = element)}\r\n            {...(this.modalActive ? { [\"aria-labelledby\"]: this.labelledbyId, role: \"dialog\" } : {})}\r\n          >\r\n            {(this.isResponsive || !this.noModal) && (\r\n              <div class=\"dso-table-utilities\" style={this.modalActive ? { display: \"none\" } : undefined}>\r\n                {this.isResponsive && (\r\n                  <div class=\"dso-responsive-message\">\r\n                    <span>beweeg de tabel van links naar rechts</span>\r\n                  </div>\r\n                )}\r\n\r\n                {!this.noModal && (\r\n                  <button\r\n                    type=\"button\"\r\n                    class=\"dso-tertiary open-modal-button\"\r\n                    ref={(element) => (this.buttonElement = element)}\r\n                    onClick={() => this.openModal()}\r\n                  >\r\n                    <span class=\"sr-only\">tabel {caption ?? \"\"} </span>\r\n                    <span>vergroten</span>\r\n                    <dso-icon icon=\"external-link\"></dso-icon>\r\n                  </button>\r\n                )}\r\n              </div>\r\n            )}\r\n\r\n            {this.modalActive && (\r\n              <div class=\"dso-header\">\r\n                <h2 id={this.labelledbyId} class={{ \"sr-only\": !caption }}>\r\n                  {caption || \"Uitvergrote tabel dialoog\"}\r\n                </h2>\r\n                <button type=\"button\" class=\"dso-close\" onClick={() => this.closeModal()}>\r\n                  <dso-icon icon=\"times\"></dso-icon>\r\n                  <span class=\"sr-only\">Sluiten</span>\r\n                </button>\r\n              </div>\r\n            )}\r\n\r\n            <div class={{ \"dso-body\": this.modalActive, \"dso-table-body\": true }}>\r\n              <slot></slot>\r\n            </div>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  private openModal() {\r\n    this.placeholderHeight = this.host.clientHeight;\r\n    this.modalActive = true;\r\n  }\r\n\r\n  private closeModal() {\r\n    this.placeholderHeight = undefined;\r\n    this.modalActive = false;\r\n  }\r\n\r\n  private setFocusTrap() {\r\n    if (this.modalActive && this.focusTrapElement && !this.trap) {\r\n      this.trap = createFocusTrap([this.host, this.focusTrapElement], {\r\n        escapeDeactivates: true,\r\n        clickOutsideDeactivates: (e) => {\r\n          if (e instanceof MouseEvent && e.composedPath()[0] === this.focusTrapElement) {\r\n            this.closeModal();\r\n\r\n            return false;\r\n          }\r\n\r\n          return true;\r\n        },\r\n        setReturnFocus: this.buttonElement ?? false,\r\n        onDeactivate: () => this.closeModal(),\r\n        tabbableOptions: {\r\n          getShadowRoot: true,\r\n        },\r\n      }).activate();\r\n    } else if (!this.modalActive && this.trap) {\r\n      this.trap?.deactivate();\r\n\r\n      delete this.trap;\r\n    }\r\n  }\r\n\r\n  private setResponsiveTable([dsoTable]: ResizeObserverEntry[]): void {\r\n    if (!dsoTable) {\r\n      throw new Error(\"No dsoTable found\");\r\n    }\r\n\r\n    const tableElement = dsoTable.target.querySelector(\"table\");\r\n\r\n    if (dsoTable && tableElement instanceof HTMLTableElement) {\r\n      this.isResponsive =\r\n        Math.floor(tableElement.getBoundingClientRect().width) > Math.floor(dsoTable.contentRect.width);\r\n    }\r\n  }\r\n}\r\n"]}

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

@@ -63,7 +63,7 @@ export class Toggletip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Toggletip label."
         },
         "attribute": "label",
         "reflect": false,
@@ -81,7 +81,7 @@ export class Toggletip {
         "optional": false,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Toggletip position."
         },
         "attribute": "position",
         "reflect": false,
@@ -99,7 +99,7 @@ export class Toggletip {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true for small Toggletip."
         },
         "attribute": "small",
         "reflect": false
@@ -116,7 +116,7 @@ export class Toggletip {
         "optional": true,
         "docs": {
           "tags": [],
-          "text": ""
+          "text": "Set to true for secondary Toggletip."
         },
         "attribute": "secondary",
         "reflect": false
@@ -130,3 +130,4 @@ export class Toggletip {
   }
   static get elementRef() { return "host"; }
 }
+//# sourceMappingURL=toggletip.js.map

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

@@ -0,0 +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,mBAAa,SAAS,QAAC,WAAW,QAAC,EAAE,EAAC,QAAQ,EAAC,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK;QAC5G,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 stateless descriptive id=\"toggle\" active={this.active} position={this.position} small={this.small}>\r\n          <slot />\r\n        </dso-tooltip>\r\n      </>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -168,7 +168,7 @@ export class Tooltip {
     }
   }
   render() {
-    return (h(Host, { class: { hidden: this.hidden }, role: "tooltip" }, h("div", { class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", null)))));
+    return (h(Host, { class: { hidden: this.hidden }, role: "tooltip", onClick: this.listenClick }, h("div", { class: clsx("tooltip", { in: this.active }) }, !this.noArrow && h("div", { "data-popper-arrow": true, class: "tooltip-arrow" }), h("div", { "aria-hidden": !this.descriptive || undefined, class: clsx("tooltip-inner", { "dso-small": this.small }) }, h("slot", null)))));
   }
   activatePopper() {
     var _a;
@@ -405,14 +405,6 @@ export class Tooltip {
         "methodName": "watchActive"
       }];
   }
-  static get listeners() {
-    return [{
-        "name": "click",
-        "method": "listenClick",
-        "target": undefined,
-        "capture": false,
-        "passive": false
-      }];
-  }
 }
 _Tooltip_target = new WeakMap();
+//# sourceMappingURL=tooltip.js.map

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

@@ -0,0 +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"]}

package/dist/collection/components/tree-view/tree-item.js

@@ -3,5 +3,6 @@ import clsx from "clsx";
 export const DsoTreeItem = ({ owner, ancestors, item, index, level, setSize, }) => {
   var _a, _b, _c, _d;
   return (h("li", { key: item.id, class: clsx("tree-item", { "has-child": item.hasItems, "is-expanded": !!item.open && !!((_a = item.items) === null || _a === void 0 ? void 0 : _a.length) }), role: "none" }, h("div", { class: "tree-branch-control" }, item.hasItems ? (h("div", { onClick: (e) => owner.itemClick(e, ancestors, item) }, h("dso-icon", { icon: item.open ? "minus-square" : "plus-square" }))) : (h("dso-icon", null))), h("p", { class: clsx("tree-content", { active: item.active }, { selected: item.selected }), tabindex: level === 1 && index === 0 ? 0 : -1, role: "treeitem", "aria-expanded": item.hasItems ? "" + (!!item.open && !!((_b = item.items) === null || _b === void 0 ? void 0 : _b.length)) : undefined, "aria-current": item.active ? "true" : undefined, "aria-level": level, "aria-setsize": setSize, "aria-posinset": index + 1, "aria-busy": item.loading ? "true" : undefined, "data-item-id": item.id, onClick: (e) => owner.itemClick(e, ancestors, item) }, item.selected && h("span", { class: "sr-only" }, "Resultaat: "), item.href ? (h("a", { href: item.href, tabindex: "-1" }, item.label)) : (h("span", null, item.label)), (_c = item.icons) === null || _c === void 0 ? void 0 :
-    _c.map((icon) => (h("dso-icon", { icon: icon.icon, title: icon.label })))), item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, index, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: index, level: level + 1, setSize: org.length })))))))));
+    _c.map((icon) => (h("dso-icon", { icon: icon.icon, title: icon.label })))), item.open && (h(Fragment, null, item.hasItems && !item.items && item.loading ? (h("dso-progress-indicator", { size: "small", label: "Resultaten laden: een moment geduld alstublieft." })) : (h("ul", { role: "group" }, (_d = item.items) === null || _d === void 0 ? void 0 : _d.map((childItem, childIndex, org) => (h(DsoTreeItem, { owner: owner, ancestors: [...ancestors, item], item: childItem, index: childIndex, level: level + 1, setSize: org.length })))))))));
 };
+//# sourceMappingURL=tree-item.js.map

package/dist/collection/components/tree-view/tree-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-item.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h, FunctionalComponent, Fragment } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport { TreeViewItem, TreeViewItemIcon } from \"./tree-view.interfaces\";\r\n\r\nimport { TreeView } from \"./tree-view\";\r\n\r\ninterface TreeViewItemProps {\r\n  owner: TreeView;\r\n  ancestors: TreeViewItem[];\r\n  item: TreeViewItem;\r\n  index: number;\r\n  level: number;\r\n  setSize: number;\r\n}\r\n\r\nexport const DsoTreeItem: FunctionalComponent<TreeViewItemProps> = ({\r\n  owner,\r\n  ancestors,\r\n  item,\r\n  index,\r\n  level,\r\n  setSize,\r\n}) => (\r\n  <li\r\n    key={item.id}\r\n    class={clsx(\"tree-item\", { \"has-child\": item.hasItems, \"is-expanded\": !!item.open && !!item.items?.length })}\r\n    role=\"none\"\r\n  >\r\n    <div class=\"tree-branch-control\">\r\n      {item.hasItems ? (\r\n        <div onClick={(e) => owner.itemClick(e, ancestors, item)}>\r\n          <dso-icon icon={item.open ? \"minus-square\" : \"plus-square\"}></dso-icon>\r\n        </div>\r\n      ) : (\r\n        <dso-icon></dso-icon>\r\n      )}\r\n    </div>\r\n    <p\r\n      class={clsx(\"tree-content\", { active: item.active }, { selected: item.selected })}\r\n      tabindex={level === 1 && index === 0 ? 0 : -1}\r\n      role=\"treeitem\"\r\n      aria-expanded={item.hasItems ? \"\" + (!!item.open && !!item.items?.length) : undefined}\r\n      aria-current={item.active ? \"true\" : undefined}\r\n      aria-level={level}\r\n      aria-setsize={setSize}\r\n      aria-posinset={index + 1}\r\n      aria-busy={item.loading ? \"true\" : undefined}\r\n      data-item-id={item.id}\r\n      onClick={(e) => owner.itemClick(e, ancestors, item)}\r\n    >\r\n      {item.selected && <span class=\"sr-only\">Resultaat: </span>}\r\n      {item.href ? (\r\n        <a href={item.href} tabindex=\"-1\">\r\n          {item.label}\r\n        </a>\r\n      ) : (\r\n        <span>{item.label}</span>\r\n      )}\r\n      {item.icons?.map((icon: TreeViewItemIcon) => (\r\n        <dso-icon icon={icon.icon} title={icon.label}></dso-icon>\r\n      ))}\r\n    </p>\r\n    {item.open && (\r\n      <>\r\n        {item.hasItems && !item.items && item.loading ? (\r\n          <dso-progress-indicator size=\"small\" label=\"Resultaten laden: een moment geduld alstublieft.\" />\r\n        ) : (\r\n          <ul role=\"group\">\r\n            {item.items?.map((childItem: TreeViewItem, childIndex: number, org: TreeViewItem[]) => (\r\n              <DsoTreeItem\r\n                owner={owner}\r\n                ancestors={[...ancestors, item]}\r\n                item={childItem}\r\n                index={childIndex}\r\n                level={level + 1}\r\n                setSize={org.length}\r\n              ></DsoTreeItem>\r\n            ))}\r\n          </ul>\r\n        )}\r\n      </>\r\n    )}\r\n  </li>\r\n);\r\n"]}

package/dist/collection/components/tree-view/tree-view.interfaces.js

@@ -1 +1,2 @@
 export {};
+//# sourceMappingURL=tree-view.interfaces.js.map

package/dist/collection/components/tree-view/tree-view.interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.interfaces.js","sourceRoot":"","sources":["../../../src/components/tree-view/tree-view.interfaces.ts"],"names":[],"mappings":"","sourcesContent":["export interface TreeViewItem {\r\n  /** The id of the item */\r\n  id: string;\r\n  /** The label of the item */\r\n  label: string;\r\n  /** The optional href of the item (creates a link) */\r\n  href?: string;\r\n  /** Indicates whether the item has children */\r\n  hasItems: boolean;\r\n  /** The array of child items */\r\n  items?: TreeViewItem[];\r\n  /** Indicates whether the node is open and child items are shown */\r\n  open?: boolean;\r\n  /** Indicates the node is loading child items */\r\n  loading?: boolean;\r\n  /** Indicates the node is active, only one item should be active */\r\n  active?: boolean;\r\n  /** Indicates the node is selected, multiple items can be selected */\r\n  selected?: boolean;\r\n  /** An optional array of icons */\r\n  icons?: TreeViewItemIcon[];\r\n}\r\n\r\nexport interface TreeViewItemIcon {\r\n  /** The icon type */\r\n  icon: string;\r\n  /** The label for the icon */\r\n  label: string;\r\n}\r\n\r\nexport interface TreeViewPointerEvent {\r\n  /** The path to the clicked item */\r\n  path: TreeViewItem[];\r\n  /** The original pointer event */\r\n  originalEvent: MouseEvent;\r\n}\r\n"]}