@dso-toolkit/core 62.18.0 → 62.20.0

package/dist/collection/components/progress-bar/progress-bar.js

@@ -1,83 +1,83 @@
 import { h } from "@stencil/core";
 export class ProgressBar {
-  constructor() {
-    this.progress = undefined;
-    this.min = 0;
-    this.max = 100;
-  }
-  render() {
-    const progressNumber = Math.round(this.progress);
-    const progressPercentage = `${progressNumber}%`;
-    return (h("div", { class: "progress" }, h("span", { class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { style: { width: `${progressPercentage}` } })), h("span", { id: "progress-bar-label" }, h("slot", null))));
-  }
-  static get is() { return "dso-progress-bar"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["progress-bar.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["progress-bar.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "progress": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": true,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The current progress. Should be between `min` and `max`."
-        },
-        "attribute": "progress",
-        "reflect": false
-      },
-      "min": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "From where progress is made."
-        },
-        "attribute": "min",
-        "reflect": false,
-        "defaultValue": "0"
-      },
-      "max": {
-        "type": "number",
-        "mutable": false,
-        "complexType": {
-          "original": "number",
-          "resolved": "number",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "When the operation completes."
-        },
-        "attribute": "max",
-        "reflect": false,
-        "defaultValue": "100"
-      }
-    };
-  }
+    constructor() {
+        this.progress = undefined;
+        this.min = 0;
+        this.max = 100;
+    }
+    render() {
+        const progressNumber = Math.round(this.progress);
+        const progressPercentage = `${progressNumber}%`;
+        return (h("div", { key: '934db66813ae6a3e46bea91a27dc0186d895a730', class: "progress" }, h("span", { key: '04c069db44d12bfb25ffb8f4fb1ad694aa5f83d6', class: "progress-bar", role: "progressbar", "aria-labelledby": "progress-bar-label", "aria-valuenow": progressNumber, "aria-valuemin": this.min, "aria-valuemax": this.max }, h("span", { key: 'ea66a781d0c3c02c48623ea803c975ad2364f102', style: { width: `${progressPercentage}` } })), h("span", { key: '7e30b61ee45fe03728838ab0bbbd0b37d7125710', id: "progress-bar-label" }, h("slot", { key: '7a6a57446f74c97edb10635d49a318f0489a16db' }))));
+    }
+    static get is() { return "dso-progress-bar"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress-bar.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress-bar.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The current progress. Should be between `min` and `max`."
+                },
+                "attribute": "progress",
+                "reflect": false
+            },
+            "min": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "From where progress is made."
+                },
+                "attribute": "min",
+                "reflect": false,
+                "defaultValue": "0"
+            },
+            "max": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When the operation completes."
+                },
+                "attribute": "max",
+                "reflect": false,
+                "defaultValue": "100"
+            }
+        };
+    }
 }
 //# sourceMappingURL=progress-bar.js.map

package/dist/collection/components/progress-bar/progress-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;;;eAWhB,CAAC;eAMD,GAAG;;EAET,MAAM;IACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;IACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;IAEhD,OAAO,CACL,WAAK,KAAK,EAAC,UAAU;MACnB,YACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG;QAEvB,YAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD;MACP,YAAM,EAAE,EAAC,oBAAoB;QAC3B,eAAa,CACR,CACH,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-bar\",\r\n  styleUrl: \"progress-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProgressBar {\r\n  /**\r\n   * The current progress. Should be between `min` and `max`.\r\n   */\r\n  @Prop()\r\n  progress!: number;\r\n\r\n  /**\r\n   * From where progress is made.\r\n   */\r\n  @Prop()\r\n  min = 0;\r\n\r\n  /**\r\n   * When the operation completes.\r\n   */\r\n  @Prop()\r\n  max = 100;\r\n\r\n  render() {\r\n    const progressNumber = Math.round(this.progress);\r\n    const progressPercentage = `${progressNumber}%`;\r\n\r\n    return (\r\n      <div class=\"progress\">\r\n        <span\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-labelledby=\"progress-bar-label\"\r\n          aria-valuenow={progressNumber}\r\n          aria-valuemin={this.min}\r\n          aria-valuemax={this.max}\r\n        >\r\n          <span style={{ width: `${progressPercentage}` }}></span>\r\n        </span>\r\n        <span id=\"progress-bar-label\">\r\n          <slot></slot>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"progress-bar.js","sourceRoot":"","sources":["../../../../src/components/progress-bar/progress-bar.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,WAAW;;;mBAWhB,CAAC;mBAMD,GAAG;;IAET,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;QACjD,MAAM,kBAAkB,GAAG,GAAG,cAAc,GAAG,CAAC;QAEhD,OAAO,CACL,4DAAK,KAAK,EAAC,UAAU;YACnB,6DACE,KAAK,EAAC,cAAc,EACpB,IAAI,EAAC,aAAa,qBACF,oBAAoB,mBACrB,cAAc,mBACd,IAAI,CAAC,GAAG,mBACR,IAAI,CAAC,GAAG;gBAEvB,6DAAM,KAAK,EAAE,EAAE,KAAK,EAAE,GAAG,kBAAkB,EAAE,EAAE,GAAS,CACnD;YACP,6DAAM,EAAE,EAAC,oBAAoB;gBAC3B,8DAAa,CACR,CACH,CACP,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from \"@stencil/core\";\r\n\r\n@Component({\r\n  tag: \"dso-progress-bar\",\r\n  styleUrl: \"progress-bar.scss\",\r\n  shadow: true,\r\n})\r\nexport class ProgressBar {\r\n  /**\r\n   * The current progress. Should be between `min` and `max`.\r\n   */\r\n  @Prop()\r\n  progress!: number;\r\n\r\n  /**\r\n   * From where progress is made.\r\n   */\r\n  @Prop()\r\n  min = 0;\r\n\r\n  /**\r\n   * When the operation completes.\r\n   */\r\n  @Prop()\r\n  max = 100;\r\n\r\n  render() {\r\n    const progressNumber = Math.round(this.progress);\r\n    const progressPercentage = `${progressNumber}%`;\r\n\r\n    return (\r\n      <div class=\"progress\">\r\n        <span\r\n          class=\"progress-bar\"\r\n          role=\"progressbar\"\r\n          aria-labelledby=\"progress-bar-label\"\r\n          aria-valuenow={progressNumber}\r\n          aria-valuemin={this.min}\r\n          aria-valuemax={this.max}\r\n        >\r\n          <span style={{ width: `${progressPercentage}` }}></span>\r\n        </span>\r\n        <span id=\"progress-bar-label\">\r\n          <slot></slot>\r\n        </span>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -1,80 +1,80 @@
 import { h, Host } from "@stencil/core";
 export class Progressindicator {
-  constructor() {
-    this.label = "Resultaten laden: een moment geduld alstublieft.";
-    this.size = undefined;
-    this.block = undefined;
-  }
-  render() {
-    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"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["progress-indicator.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["progress-indicator.css"]
-    };
-  }
-  static get properties() {
-    return {
-      "label": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
-        },
-        "required": false,
-        "optional": false,
-        "docs": {
-          "tags": [],
-          "text": "The label of the Progress Indicator."
-        },
-        "attribute": "label",
-        "reflect": false,
-        "defaultValue": "\"Resultaten laden: een moment geduld alstublieft.\""
-      },
-      "size": {
-        "type": "string",
-        "mutable": false,
-        "complexType": {
-          "original": "\"small\" | \"medium\" | \"large\"",
-          "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "The size (width) of the Progress Indicator.\r\n\r\nIf no size is set, falls back to `small`."
-        },
-        "attribute": "size",
-        "reflect": true
-      },
-      "block": {
-        "type": "boolean",
-        "mutable": false,
-        "complexType": {
-          "original": "boolean",
-          "resolved": "boolean | undefined",
-          "references": {}
-        },
-        "required": false,
-        "optional": true,
-        "docs": {
-          "tags": [],
-          "text": "Set for bloatier Progress Indicator."
-        },
-        "attribute": "block",
-        "reflect": false
-      }
-    };
-  }
+    constructor() {
+        this.label = "Resultaten laden: een moment geduld alstublieft.";
+        this.size = undefined;
+        this.block = undefined;
+    }
+    render() {
+        return (h(Host, { key: '25d4e250926f77eaf40a3cbccccbf5af370b9791' }, h("span", { key: '200556fa4278425fda6b805bdaccf248d84cd5e6', class: "dso-progress-indicator-spinner", role: "progressbar", "aria-labelledby": "progress-indicator-label" }, h("dso-icon", { key: 'b6e5a3081bf8e5f9b4b9160e2a57e7b437f8778c', icon: "spinner" })), h("span", { key: 'f509b115a8b7520d90a8faecf7276b3527e412fe', id: "progress-indicator-label", class: "dso-progress-indicator-label" }, this.label)));
+    }
+    static get is() { return "dso-progress-indicator"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["progress-indicator.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["progress-indicator.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label of the Progress Indicator."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "\"Resultaten laden: een moment geduld alstublieft.\""
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "\"small\" | \"medium\" | \"large\"",
+                    "resolved": "\"large\" | \"medium\" | \"small\" | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "The size (width) of the Progress Indicator.\r\n\r\nIf no size is set, falls back to `small`."
+                },
+                "attribute": "size",
+                "reflect": true
+            },
+            "block": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean | undefined",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Set for bloatier Progress Indicator."
+                },
+                "attribute": "block",
+                "reflect": false
+            }
+        };
+    }
 }
 //# sourceMappingURL=progress-indicator.js.map

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

@@ -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;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"]}
+{"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;;qBAKpB,kDAAkD;;;;IAgB1D,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DAAM,KAAK,EAAC,gCAAgC,EAAC,IAAI,EAAC,aAAa,qBAAiB,0BAA0B;gBACxG,iEAAU,IAAI,EAAC,SAAS,GAAY,CAC/B;YACP,6DAAM,EAAE,EAAC,0BAA0B,EAAC,KAAK,EAAC,8BAA8B,IACrE,IAAI,CAAC,KAAK,CACN,CACF,CACR,CAAC;IACJ,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/responsive-element/responsive-element.js

@@ -1,115 +1,115 @@
 import { h, Host } from "@stencil/core";
 const elementSizes = [
-  {
-    width: 624,
-    alias: "large",
-  },
-  {
-    width: 375,
-    alias: "medium",
-  },
-  {
-    width: 0,
-    alias: "small",
-  },
+    {
+        width: 624,
+        alias: "large",
+    },
+    {
+        width: 375,
+        alias: "medium",
+    },
+    {
+        width: 0,
+        alias: "small",
+    },
 ];
 export class ResponsiveElement {
-  constructor() {
-    this.observer = new ResizeObserver(([entry]) => {
-      var _a, _b;
-      if (!entry) {
-        throw new Error("No entry found");
-      }
-      const size = (_b = (_a = elementSizes.find((s) => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
-      this.sizeAlias = size;
-      this.dsoSizeChange.emit(size);
-    });
-    this.sizeAlias = elementSizes[0].alias;
-    this.sizeWidth = 0;
-  }
-  /**
-   * The current size
-   */
-  async getSize() {
-    return this.sizeAlias;
-  }
-  componentWillLoad() {
-    this.observer.observe(this.host);
-  }
-  disconnectedCallback() {
-    this.observer.unobserve(this.host);
-  }
-  render() {
-    return (h(Host, { small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", null)));
-  }
-  static get is() { return "dso-responsive-element"; }
-  static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() {
-    return {
-      "$": ["./responsive-element.scss"]
-    };
-  }
-  static get styleUrls() {
-    return {
-      "$": ["responsive-element.css"]
-    };
-  }
-  static get states() {
-    return {
-      "sizeAlias": {},
-      "sizeWidth": {}
-    };
-  }
-  static get events() {
-    return [{
-        "method": "dsoSizeChange",
-        "name": "dsoSizeChange",
-        "bubbles": true,
-        "cancelable": true,
-        "composed": true,
-        "docs": {
-          "tags": [],
-          "text": "Emitted when size has changed"
-        },
-        "complexType": {
-          "original": "ResponsiveElementSize",
-          "resolved": "\"large\" | \"medium\" | \"small\"",
-          "references": {
-            "ResponsiveElementSize": {
-              "location": "import",
-              "path": "./responsive-element.interfaces",
-              "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+    constructor() {
+        this.observer = new ResizeObserver(([entry]) => {
+            var _a, _b;
+            if (!entry) {
+                throw new Error("No entry found");
             }
-          }
-        }
-      }];
-  }
-  static get methods() {
-    return {
-      "getSize": {
-        "complexType": {
-          "signature": "() => Promise<ResponsiveElementSize>",
-          "parameters": [],
-          "references": {
-            "Promise": {
-              "location": "global",
-              "id": "global::Promise"
-            },
-            "ResponsiveElementSize": {
-              "location": "import",
-              "path": "./responsive-element.interfaces",
-              "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+            const size = (_b = (_a = elementSizes.find((s) => entry.contentRect.width >= s.width)) === null || _a === void 0 ? void 0 : _a.alias) !== null && _b !== void 0 ? _b : elementSizes[0].alias;
+            this.sizeAlias = size;
+            this.dsoSizeChange.emit(size);
+        });
+        this.sizeAlias = elementSizes[0].alias;
+        this.sizeWidth = 0;
+    }
+    /**
+     * The current size
+     */
+    async getSize() {
+        return this.sizeAlias;
+    }
+    componentWillLoad() {
+        this.observer.observe(this.host);
+    }
+    disconnectedCallback() {
+        this.observer.unobserve(this.host);
+    }
+    render() {
+        return (h(Host, { key: '33e633cee0f3684e6dc5b5c075c8e973e907a823', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: '15af44d617541b63cc9f53350ee124a0e0cb73fa' })));
+    }
+    static get is() { return "dso-responsive-element"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["./responsive-element.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["responsive-element.css"]
+        };
+    }
+    static get states() {
+        return {
+            "sizeAlias": {},
+            "sizeWidth": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "dsoSizeChange",
+                "name": "dsoSizeChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when size has changed"
+                },
+                "complexType": {
+                    "original": "ResponsiveElementSize",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {
+                        "ResponsiveElementSize": {
+                            "location": "import",
+                            "path": "./responsive-element.interfaces",
+                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "getSize": {
+                "complexType": {
+                    "signature": "() => Promise<ResponsiveElementSize>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "ResponsiveElementSize": {
+                            "location": "import",
+                            "path": "./responsive-element.interfaces",
+                            "id": "src/components/responsive-element/responsive-element.interfaces.ts::ResponsiveElementSize"
+                        }
+                    },
+                    "return": "Promise<ResponsiveElementSize>"
+                },
+                "docs": {
+                    "text": "The current size",
+                    "tags": []
+                }
             }
-          },
-          "return": "Promise<ResponsiveElementSize>"
-        },
-        "docs": {
-          "text": "The current size",
-          "tags": []
-        }
-      }
-    };
-  }
-  static get elementRef() { return "host"; }
+        };
+    }
+    static get elementRef() { return "host"; }
 }
 //# sourceMappingURL=responsive-element.js.map

package/dist/collection/components/responsive-element/responsive-element.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive-element.js","sourceRoot":"","sources":["../../../../src/components/responsive-element/responsive-element.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIpH,MAAM,YAAY,GAA4C;EAC5D;IACE,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,OAAO;GACf;EACD;IACE,KAAK,EAAE,GAAG;IACV,KAAK,EAAE,QAAQ;GAChB;EACD;IACE,KAAK,EAAE,CAAC;IACR,KAAK,EAAE,OAAO;GACf;CACF,CAAC;AAOF,MAAM,OAAO,iBAAiB;;IAqBpB,aAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;;MAChD,IAAI,CAAC,KAAK,EAAE;QACV,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;OACnC;MAED,MAAM,IAAI,GAAG,MAAA,MAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;MAE1G,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;MACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IAChC,CAAC,CAAC,CAAC;qBA5BgC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;qBAG5C,CAAC;;EAQb;;KAEG;EAEH,KAAK,CAAC,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC;EACxB,CAAC;EAgBD,iBAAiB;IACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACnC,CAAC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;EACrC,CAAC;EAED,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IAAC,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;MAC7G,eAAQ,CACH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, State } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"responsive-element.js","sourceRoot":"","sources":["../../../../src/components/responsive-element/responsive-element.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAsB,OAAO,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAIpH,MAAM,YAAY,GAA4C;IAC5D;QACE,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,OAAO;KACf;IACD;QACE,KAAK,EAAE,GAAG;QACV,KAAK,EAAE,QAAQ;KAChB;IACD;QACE,KAAK,EAAE,CAAC;QACR,KAAK,EAAE,OAAO;KACf;CACF,CAAC;AAOF,MAAM,OAAO,iBAAiB;;QAqBpB,aAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE;;YAChD,IAAI,CAAC,KAAK,EAAE,CAAC;gBACX,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;YACpC,CAAC;YAED,MAAM,IAAI,GAAG,MAAA,MAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,IAAI,CAAC,CAAC,KAAK,CAAC,0CAAE,KAAK,mCAAI,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC;YAE1G,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC;YACtB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;QAChC,CAAC,CAAC,CAAC;yBA5BgC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;yBAG5C,CAAC;;IAQb;;OAEG;IAEH,KAAK,CAAC,OAAO;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;IACxB,CAAC;IAgBD,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACnC,CAAC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;IACrC,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,SAAS,KAAK,OAAO;YAC7G,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, ComponentInterface, Element, Event, EventEmitter, h, Host, Method, State } from \"@stencil/core\";\r\n\r\nimport { ElementSize, ResponsiveElementSize } from \"./responsive-element.interfaces\";\r\n\r\nconst elementSizes: [ElementSize, ElementSize, ElementSize] = [\r\n  {\r\n    width: 624,\r\n    alias: \"large\",\r\n  },\r\n  {\r\n    width: 375,\r\n    alias: \"medium\",\r\n  },\r\n  {\r\n    width: 0,\r\n    alias: \"small\",\r\n  },\r\n];\r\n\r\n@Component({\r\n  tag: \"dso-responsive-element\",\r\n  styleUrl: \"./responsive-element.scss\",\r\n  shadow: true,\r\n})\r\nexport class ResponsiveElement implements ComponentInterface {\r\n  @State()\r\n  sizeAlias: ResponsiveElementSize = elementSizes[0].alias;\r\n\r\n  @State()\r\n  sizeWidth = 0;\r\n\r\n  /**\r\n   * Emitted when size has changed\r\n   */\r\n  @Event()\r\n  dsoSizeChange!: EventEmitter<ResponsiveElementSize>;\r\n\r\n  /**\r\n   * The current size\r\n   */\r\n  @Method()\r\n  async getSize(): Promise<ResponsiveElementSize> {\r\n    return this.sizeAlias;\r\n  }\r\n\r\n  private observer = new ResizeObserver(([entry]) => {\r\n    if (!entry) {\r\n      throw new Error(\"No entry found\");\r\n    }\r\n\r\n    const size = elementSizes.find((s) => entry.contentRect.width >= s.width)?.alias ?? elementSizes[0].alias;\r\n\r\n    this.sizeAlias = size;\r\n    this.dsoSizeChange.emit(size);\r\n  });\r\n\r\n  @Element()\r\n  host!: HTMLDsoResponsiveElementElement;\r\n\r\n  componentWillLoad() {\r\n    this.observer.observe(this.host);\r\n  }\r\n\r\n  disconnectedCallback() {\r\n    this.observer.unobserve(this.host);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host small={this.sizeAlias === \"small\"} medium={this.sizeAlias === \"medium\"} large={this.sizeAlias === \"large\"}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}