@dso-toolkit/core 62.18.0 → 62.19.0

package/dist/collection/components/info/info.js

@@ -1,84 +1,84 @@
 import { h, Fragment } from "@stencil/core";
 export class Info {
-  constructor() {
-    this.fixed = undefined;
-    this.active = undefined;
-  }
-  render() {
-    return (h(Fragment, null, h("slot", null), !this.fixed && (h("button", { type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))));
-  }
-  static get is() { return "dso-info"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./info.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["info.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "fixed": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Set to true if the Info should not be toggled and always visible."
-        },
-        "attribute": "fixed",
-        "reflect": true
-      },
-      "active": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the Info is active."
-        },
-        "attribute": "active",
-        "reflect": true
-      }
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoClose",
-        "name": "dsoClose",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the user activates the close button."
-        },
-        "complexType": {
-          "original": "MouseEvent",
-          "resolved": "MouseEvent",
-          "references": {
-            "MouseEvent": {
-              "location": "global",
-              "id": "global::MouseEvent"
+    constructor() {
+        this.fixed = undefined;
+        this.active = undefined;
+    }
+    render() {
+        return (h(Fragment, { key: '50435ba6a2bb5850001f7b0f7d3637c8668cc3b3' }, h("slot", { key: 'a33c2bd6ce1c5b83ec908eed99147274fe4ea434' }), !this.fixed && (h("button", { type: "button", onClick: (e) => this.dsoClose.emit(e) }, h("dso-icon", { icon: "times" }), h("span", { class: "sr-only" }, "Sluiten")))));
+    }
+    static get is() { return "dso-info"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./info.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["info.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "fixed": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set to true if the Info should not be toggled and always visible."
+                },
+                "attribute": "fixed",
+                "reflect": true
+            },
+            "active": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the Info is active."
+                },
+                "attribute": "active",
+                "reflect": true
             }
-          }
-        }
-      }];
-  }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoClose",
+                "name": "dsoClose",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates the close button."
+                },
+                "complexType": {
+                    "original": "MouseEvent",
+                    "resolved": "MouseEvent",
+                    "references": {
+                        "MouseEvent": {
+                            "location": "global",
+                            "id": "global::MouseEvent"
+                        }
+                    }
+                }
+            }];
+    }
 }
 //# sourceMappingURL=info.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"info.js","sourceRoot":"","sources":["../../../../src/components/info/info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAgB,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOlF,MAAM,OAAO,IAAI;;;;;EAmBf,MAAM;IACJ,OAAO,CACL,EAAC,QAAQ;MACP,eAAa;MACZ,CAAC,IAAI,CAAC,KAAK,IAAI,CACd,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;QACzD,gBAAU,IAAI,EAAC,OAAO,GAAY;QAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,CACZ,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"info.js","sourceRoot":"","sources":["../../../../src/components/info/info.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAgB,QAAQ,EAAE,MAAM,eAAe,CAAC;AAOlF,MAAM,OAAO,IAAI;;;;;IAmBf,MAAM;QACJ,OAAO,CACL,EAAC,QAAQ;YACP,8DAAa;YACZ,CAAC,IAAI,CAAC,KAAK,IAAI,CACd,cAAQ,IAAI,EAAC,QAAQ,EAAC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,CAAC;gBACzD,gBAAU,IAAI,EAAC,OAAO,GAAY;gBAClC,YAAM,KAAK,EAAC,SAAS,cAAe,CAC7B,CACV,CACQ,CACZ,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Event, Prop, EventEmitter, Fragment } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-info\",\r\n  styleUrl: \"./info.scss\",\r\n  shadow: true,\r\n})\r\nexport class Info {\r\n  /**\r\n   * Set to true if the Info should not be toggled and always visible.\r\n   */\r\n  @Prop({ reflect: true })\r\n  fixed?: boolean;\r\n\r\n  /**\r\n   * Whether the Info is active.\r\n   */\r\n  @Prop({ reflect: true })\r\n  active?: boolean;\r\n\r\n  /**\r\n   * Emitted when the user activates the close button.\r\n   */\r\n  @Event()\r\n  dsoClose!: EventEmitter<MouseEvent>;\r\n\r\n  render() {\r\n    return (\r\n      <Fragment>\r\n        <slot></slot>\r\n        {!this.fixed && (\r\n          <button type=\"button\" onClick={(e) => this.dsoClose.emit(e)}>\r\n            <dso-icon icon=\"times\"></dso-icon>\r\n            <span class=\"sr-only\">Sluiten</span>\r\n          </button>\r\n        )}\r\n      </Fragment>\r\n    );\r\n  }\r\n}\r\n"]}

package/dist/collection/components/info-button/info-button.js

@@ -1,143 +1,143 @@
 import { h, Host } from "@stencil/core";
 import clsx from "clsx";
 export class InfoButton {
-  constructor() {
-    this.active = undefined;
-    this.hover = false;
-    this.secondary = undefined;
-    this.label = "Toelichting bij optie";
-  }
-  /**
-   * To set focus to the toggle button.
-   */
-  async setFocus() {
-    var _a;
-    (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
-  }
-  handleToggle(e) {
-    this.active = !this.active;
-    this.dsoToggle.emit({ originalEvent: e, active: this.active });
-  }
-  render() {
-    return (h(Host, { onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { icon: this.active || this.hover ? "info-active" : "info" }), h("span", { class: "sr-only" }, this.label))));
-  }
-  static get is() { return "dso-info-button"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["info-button.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["info-button.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "active": {
-        "type": "boolean",
-        "mutable": true,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Whether the InfoButton is active."
-        },
-        "attribute": "active",
-        "reflect": true
-      },
-      "secondary": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "For secondary Info Button."
-        },
-        "attribute": "secondary",
-        "reflect": false
-      },
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"Toelichting bij optie\""
-      }
-    };
-  }
-  static get states() {
-    return {
-      "hover": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoToggle",
-        "name": "dsoToggle",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when the user activates the Info Button."
-        },
-        "complexType": {
-          "original": "InfoButtonToggleEvent",
-          "resolved": "InfoButtonToggleEvent",
-          "references": {
-            "InfoButtonToggleEvent": {
-              "location": "import",
-              "path": "./info-button.interfaces",
-              "id": "src/components/info-button/info-button.interfaces.ts::InfoButtonToggleEvent"
+    constructor() {
+        this.active = undefined;
+        this.hover = false;
+        this.secondary = undefined;
+        this.label = "Toelichting bij optie";
+    }
+    /**
+     * To set focus to the toggle button.
+     */
+    async setFocus() {
+        var _a;
+        (_a = this.button) === null || _a === void 0 ? void 0 : _a.focus();
+    }
+    handleToggle(e) {
+        this.active = !this.active;
+        this.dsoToggle.emit({ originalEvent: e, active: this.active });
+    }
+    render() {
+        return (h(Host, { key: '01a6062d6bf5e19a160c129f725f92abe342f421', onMouseenter: () => (this.hover = true), onMouseleave: () => (this.hover = false) }, h("button", { key: 'b71c562f84b49002ff742fca142d026c72268eee', type: "button", class: clsx({ "dso-open": !!this.active, "dso-info-secondary": !!this.secondary }), "aria-expanded": typeof this.active === "boolean" ? this.active.toString() : undefined, onClick: (e) => this.handleToggle(e), ref: (element) => (this.button = element) }, h("dso-icon", { key: 'd40a3d4b720ad8c2f7403b451ea316d1108a6c6f', icon: this.active || this.hover ? "info-active" : "info" }), h("span", { key: '8a3138123fc9216335a2afc39007ad3f5a0a6a02', class: "sr-only" }, this.label))));
+    }
+    static get is() { return "dso-info-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["info-button.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["info-button.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "active": {
+                "type": "boolean",
+                "mutable": true,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the InfoButton is active."
+                },
+                "attribute": "active",
+                "reflect": true
+            },
+            "secondary": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "For secondary Info Button."
+                },
+                "attribute": "secondary",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"Toelichting bij optie\""
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "setFocus": {
-        "complexType": {
-          "signature": "() => Promise<void>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
+        };
+    }
+    static get states() {
+        return {
+            "hover": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoToggle",
+                "name": "dsoToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the user activates the Info Button."
+                },
+                "complexType": {
+                    "original": "InfoButtonToggleEvent",
+                    "resolved": "InfoButtonToggleEvent",
+                    "references": {
+                        "InfoButtonToggleEvent": {
+                            "location": "import",
+                            "path": "./info-button.interfaces",
+                            "id": "src/components/info-button/info-button.interfaces.ts::InfoButtonToggleEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "setFocus": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "To set focus to the toggle button.",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<void>"
-        },
-        "docs": {
-          "text": "To set focus to the toggle button.",
-          "tags": []
-        }
-      }
-    };
-  }
+        };
+    }
 }
 //# sourceMappingURL=info-button.js.map

package/dist/collection/components/info-button/info-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,UAAU;;;iBAUb,KAAK;;iBAYL,uBAAuB;;EAQ/B;;KAEG;EAEH,KAAK,CAAC,QAAQ;;IACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;EACvB,CAAC;EAEO,YAAY,CAAC,CAAa;IAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;IAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;EACjE,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;MACrF,cACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;QAEzC,gBAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;QAC/E,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.focus();\r\n  }\r\n\r\n  private handleToggle(e: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        <button\r\n          type=\"button\"\r\n          class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n          aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n          onClick={(e) => this.handleToggle(e)}\r\n          ref={(element) => (this.button = element)}\r\n        >\r\n          <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n          <span class=\"sr-only\">{this.label}</span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"info-button.js","sourceRoot":"","sources":["../../../../src/components/info-button/info-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAgB,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,IAAI,MAAM,MAAM,CAAC;AASxB,MAAM,OAAO,UAAU;;;qBAUb,KAAK;;qBAYL,uBAAuB;;IAQ/B;;OAEG;IAEH,KAAK,CAAC,QAAQ;;QACZ,MAAA,IAAI,CAAC,MAAM,0CAAE,KAAK,EAAE,CAAC;IACvB,CAAC;IAEO,YAAY,CAAC,CAAa;QAChC,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,aAAa,EAAE,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,CAAC,CAAC;IACjE,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACrF,+DACE,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,IAAI,CAAC,EAAE,UAAU,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,EAAE,oBAAoB,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS,EAAE,CAAC,mBACnE,OAAO,IAAI,CAAC,MAAM,KAAK,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAC,CAAC,CAAC,SAAS,EACpF,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EACpC,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,GAAG,OAAO,CAAC;gBAEzC,iEAAU,IAAI,EAAE,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,MAAM,GAAa;gBAC/E,6DAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CAClC,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { h, Component, Event, Prop, EventEmitter, Method, Host, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\n\r\nimport { InfoButtonToggleEvent } from \"./info-button.interfaces\";\r\n\r\n@Component({\r\n  tag: \"dso-info-button\",\r\n  shadow: true,\r\n  styleUrl: \"info-button.scss\",\r\n})\r\nexport class InfoButton {\r\n  private button?: HTMLButtonElement;\r\n\r\n  /**\r\n   * Whether the InfoButton is active.\r\n   */\r\n  @Prop({ mutable: true, reflect: true })\r\n  active?: boolean;\r\n\r\n  @State()\r\n  hover = false;\r\n\r\n  /**\r\n   * For secondary Info Button.\r\n   */\r\n  @Prop()\r\n  secondary?: boolean;\r\n\r\n  /**\r\n   * The label.\r\n   */\r\n  @Prop()\r\n  label = \"Toelichting bij optie\";\r\n\r\n  /**\r\n   * Emitted when the user activates the Info Button.\r\n   */\r\n  @Event()\r\n  dsoToggle!: EventEmitter<InfoButtonToggleEvent>;\r\n\r\n  /**\r\n   * To set focus to the toggle button.\r\n   */\r\n  @Method()\r\n  async setFocus() {\r\n    this.button?.focus();\r\n  }\r\n\r\n  private handleToggle(e: MouseEvent) {\r\n    this.active = !this.active;\r\n    this.dsoToggle.emit({ originalEvent: e, active: this.active });\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host onMouseenter={() => (this.hover = true)} onMouseleave={() => (this.hover = false)}>\r\n        <button\r\n          type=\"button\"\r\n          class={clsx({ \"dso-open\": !!this.active, \"dso-info-secondary\": !!this.secondary })}\r\n          aria-expanded={typeof this.active === \"boolean\" ? this.active.toString() : undefined}\r\n          onClick={(e) => this.handleToggle(e)}\r\n          ref={(element) => (this.button = element)}\r\n        >\r\n          <dso-icon icon={this.active || this.hover ? \"info-active\" : \"info\"}></dso-icon>\r\n          <span class=\"sr-only\">{this.label}</span>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}