@dso-toolkit/core 62.17.0 → 62.19.0

package/dist/components/responsive-element.js

@@ -1,73 +1,74 @@
 import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
 
 const responsiveElementCss = ":host{display:block}";
+const DsoResponsiveElementStyle0 = responsiveElementCss;
 
 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",
+    },
 ];
 const ResponsiveElement = /*@__PURE__*/ proxyCustomElement(class ResponsiveElement extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.dsoSizeChange = createEvent(this, "dsoSizeChange", 7);
-    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)));
-  }
-  get host() { return this; }
-  static get style() { return responsiveElementCss; }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoSizeChange = createEvent(this, "dsoSizeChange", 7);
+        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, { key: '10ef04775c70765e6b39b1000167fe6484b629bc', small: this.sizeAlias === "small", medium: this.sizeAlias === "medium", large: this.sizeAlias === "large" }, h("slot", { key: 'd85e9ec79a4cec3ddcfb4b1b601d2241281c6c09' })));
+    }
+    get host() { return this; }
+    static get style() { return DsoResponsiveElementStyle0; }
 }, [1, "dso-responsive-element", {
-    "sizeAlias": [32],
-    "sizeWidth": [32],
-    "getSize": [64]
-  }]);
+        "sizeAlias": [32],
+        "sizeWidth": [32],
+        "getSize": [64]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-responsive-element"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-responsive-element":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ResponsiveElement);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-responsive-element"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-responsive-element":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ResponsiveElement);
+            }
+            break;
+    } });
 }
 
 export { ResponsiveElement as R, defineCustomElement as d };

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

@@ -1 +1 @@
-{"file":"responsive-element.js","mappings":";;AAAA,MAAM,oBAAoB,GAAG,sBAAsB;;ACInD,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;MAOW,iBAAiB;;;;;;IAqBpB,aAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC;;MAC5C,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,KAAK,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;KAC/B,CAAC,CAAC;qBA5BgC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;qBAG5C,CAAC;;;;;EAYb,MAAM,OAAO;IACX,OAAO,IAAI,CAAC,SAAS,CAAC;GACvB;EAgBD,iBAAiB;IACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GAClC;EAED,oBAAoB;IAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;GACpC;EAED,MAAM;IACJ,QACE,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,IAC7G,eAAQ,CACH,EACP;GACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","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","mappings":";;AAAA,MAAM,oBAAoB,GAAG,sBAAsB,CAAC;AACpD,mCAAe,oBAAoB;;ACGnC,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;MAOW,iBAAiB;;;;;;QAqBpB,aAAQ,GAAG,IAAI,cAAc,CAAC,CAAC,CAAC,KAAK,CAAC;;YAC5C,IAAI,CAAC,KAAK,EAAE;gBACV,MAAM,IAAI,KAAK,CAAC,gBAAgB,CAAC,CAAC;aACnC;YAED,MAAM,IAAI,GAAG,MAAA,MAAA,YAAY,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,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;SAC/B,CAAC,CAAC;yBA5BgC,YAAY,CAAC,CAAC,CAAC,CAAC,KAAK;yBAG5C,CAAC;;;;;IAYb,MAAM,OAAO;QACX,OAAO,IAAI,CAAC,SAAS,CAAC;KACvB;IAgBD,iBAAiB;QACf,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KAClC;IAED,oBAAoB;QAClB,IAAI,CAAC,QAAQ,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;KACpC;IAED,MAAM;QACJ,QACE,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,IAC7G,8DAAQ,CACH,EACP;KACH;;;;;;;;;;;;;;;;;;;;;;;;","names":[],"sources":["src/components/responsive-element/responsive-element.scss?tag=dso-responsive-element&encapsulation=shadow","src/components/responsive-element/responsive-element.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","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}

package/dist/components/scrollable.js

@@ -1,115 +1,116 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as clsx } from './clsx.js';
-import { d as debounce_1 } from './index2.js';
+import { d as debounce } from './index2.js';
 
 const scrollableCss = ":host{display:block;height:100%;overflow-y:hidden}*,*::after,*::before{box-sizing:border-box}.dso-shadow-container{height:100%;max-height:inherit;min-height:inherit;position:relative}.dso-shadow-container .dso-scroll-container{height:100%;max-height:inherit;min-height:inherit;overflow-y:auto}.dso-shadow-container .dso-scroll-container::before,.dso-shadow-container .dso-scroll-container::after{background-repeat:no-repeat;background-size:100% 24px;content:\"\";display:block;height:24px;left:0;opacity:0;overflow:visible;position:absolute;transition:opacity 150ms ease-in-out;width:100%;pointer-events:none;z-index:1}.dso-shadow-container .dso-scroll-container::before{background-image:linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));top:0}.dso-shadow-container .dso-scroll-container::after{background-image:linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));bottom:0}.dso-shadow-container .dso-scroll-container.dso-scroll-bottom::before{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-top::after{opacity:1}.dso-shadow-container .dso-scroll-container.dso-scroll-middle::before,.dso-shadow-container .dso-scroll-container.dso-scroll-middle::after{opacity:1}";
+const DsoScrollableStyle0 = scrollableCss;
 
-const resizeObserver = new ResizeObserver(debounce_1((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
+const resizeObserver = new ResizeObserver(debounce((entries) => entries.forEach((entry) => { var _a; return (_a = getScrollableComponentFromResizeObserverEntry(entry)) === null || _a === void 0 ? void 0 : _a._setScrollState(); }), 50));
 function getScrollableComponentFromResizeObserverEntry({ target, }) {
-  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {
-    return target.parentNode.host;
-  }
-  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {
-    return target.parentElement;
-  }
-  return undefined;
+    if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {
+        return target.parentNode.host;
+    }
+    if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {
+        return target.parentElement;
+    }
+    return undefined;
 }
 function isDsoScrollableComponent(element) {
-  return element.tagName === "DSO-SCROLLABLE";
+    return element.tagName === "DSO-SCROLLABLE";
 }
 const Scrollable = /*@__PURE__*/ proxyCustomElement(class Scrollable extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    this.dsoScrollEnd = createEvent(this, "dsoScrollEnd", 7);
-    // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126
-    this.mutationObserver = new MutationObserver((entries) => entries.forEach(({ target }) => {
-      var _a;
-      const element = (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.closest("dso-scrollable");
-      if (element !== this.host) {
-        return;
-      }
-      this._setScrollState();
-    }));
-    this.scrollPosition = "noScroll";
-  }
-  /**
-   * @internal
-   */
-  async _setScrollState() {
-    const scrollPosition = this.getScrollPosition();
-    if (this.scrollPosition !== scrollPosition) {
-      this.scrollPosition = scrollPosition;
-      if (this.scrollPosition === "top" || this.scrollPosition === "bottom") {
-        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });
-      }
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.dsoScrollEnd = createEvent(this, "dsoScrollEnd", 7);
+        // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126
+        this.mutationObserver = new MutationObserver((entries) => entries.forEach(({ target }) => {
+            var _a;
+            const element = (_a = target.parentElement) === null || _a === void 0 ? void 0 : _a.closest("dso-scrollable");
+            if (element !== this.host) {
+                return;
+            }
+            this._setScrollState();
+        }));
+        this.scrollPosition = "noScroll";
     }
-  }
-  get slottedElements() {
-    return Array.from(this.host.children);
-  }
-  getScrollPosition() {
-    if (!this.scrollContainerDiv) {
-      return "noScroll";
+    /**
+     * @internal
+     */
+    async _setScrollState() {
+        const scrollPosition = this.getScrollPosition();
+        if (this.scrollPosition !== scrollPosition) {
+            this.scrollPosition = scrollPosition;
+            if (this.scrollPosition === "top" || this.scrollPosition === "bottom") {
+                this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });
+            }
+        }
     }
-    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;
-    if (scrollHeight <= clientHeight) {
-      return "noScroll";
+    get slottedElements() {
+        return Array.from(this.host.children);
     }
-    if (scrollTop === 0) {
-      return "top";
+    getScrollPosition() {
+        if (!this.scrollContainerDiv) {
+            return "noScroll";
+        }
+        const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;
+        if (scrollHeight <= clientHeight) {
+            return "noScroll";
+        }
+        if (scrollTop === 0) {
+            return "top";
+        }
+        if (scrollHeight - scrollTop - clientHeight < 1) {
+            return "bottom";
+        }
+        if (scrollTop > 0) {
+            return "middle";
+        }
+        return "noScroll";
     }
-    if (scrollHeight - scrollTop - clientHeight < 1) {
-      return "bottom";
+    componentDidLoad() {
+        this.mutationObserver.observe(this.host, {
+            characterData: true,
+            attributes: false,
+            childList: false,
+            subtree: true,
+        });
+        if (this.shadowContainerDiv instanceof HTMLDivElement) {
+            resizeObserver.observe(this.shadowContainerDiv);
+        }
+        this.slottedElements.forEach((element) => resizeObserver.observe(element));
     }
-    if (scrollTop > 0) {
-      return "middle";
+    disconnectedCallback() {
+        if (this.shadowContainerDiv instanceof HTMLDivElement) {
+            resizeObserver.unobserve(this.shadowContainerDiv);
+        }
+        this.mutationObserver.disconnect();
+        this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
     }
-    return "noScroll";
-  }
-  componentDidLoad() {
-    this.mutationObserver.observe(this.host, {
-      characterData: true,
-      attributes: false,
-      childList: false,
-      subtree: true,
-    });
-    if (this.shadowContainerDiv instanceof HTMLDivElement) {
-      resizeObserver.observe(this.shadowContainerDiv);
+    render() {
+        return (h("div", { key: 'c288a27880eb9224779c1096b6e4976968097fef', ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { key: '835d40a16dfbea41486841091d727f7e80302c81', ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
+                [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
+            }), onScroll: () => this._setScrollState() }, h("slot", { key: 'c3ef41ab3b7edb0f43913e05c5ad1332b78b4938' }))));
     }
-    this.slottedElements.forEach((element) => resizeObserver.observe(element));
-  }
-  disconnectedCallback() {
-    if (this.shadowContainerDiv instanceof HTMLDivElement) {
-      resizeObserver.unobserve(this.shadowContainerDiv);
-    }
-    this.mutationObserver.disconnect();
-    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));
-  }
-  render() {
-    return (h("div", { ref: (el) => (this.shadowContainerDiv = el), class: "dso-shadow-container" }, h("div", { ref: (el) => (this.scrollContainerDiv = el), class: clsx("dso-scroll-container", {
-        [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== "noScroll",
-      }), onScroll: () => this._setScrollState() }, h("slot", null))));
-  }
-  get host() { return this; }
-  static get style() { return scrollableCss; }
+    get host() { return this; }
+    static get style() { return DsoScrollableStyle0; }
 }, [1, "dso-scrollable", {
-    "scrollPosition": [32],
-    "_setScrollState": [64]
-  }]);
+        "scrollPosition": [32],
+        "_setScrollState": [64]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["dso-scrollable"];
-  components.forEach(tagName => { switch (tagName) {
-    case "dso-scrollable":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, Scrollable);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["dso-scrollable"];
+    components.forEach(tagName => { switch (tagName) {
+        case "dso-scrollable":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, Scrollable);
+            }
+            break;
+    } });
 }
 
 export { Scrollable as S, defineCustomElement as d };

package/dist/components/scrollable.js.map

@@ -1 +1 @@
-{"file":"scrollable.js","mappings":"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","names":["debounce"],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  height: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  height: 100%;\r\n  max-height: inherit;\r\n  min-height: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    height: 100%;\r\n    max-height: inherit;\r\n    min-height: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      height: units.$u3;\r\n      left: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      width: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      top: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      bottom: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}
+{"file":"scrollable.js","mappings":"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","names":[],"sources":["src/components/scrollable/scrollable.scss?tag=dso-scrollable&encapsulation=shadow","src/components/scrollable/scrollable.tsx"],"sourcesContent":["@use \"~dso-toolkit/src/utilities\";\r\n@use \"~dso-toolkit/src/variables/units\";\r\n\r\n:host {\r\n  display: block;\r\n  height: 100%;\r\n  overflow-y: hidden;\r\n}\r\n\r\n@include utilities.box-sizing();\r\n\r\n.dso-shadow-container {\r\n  height: 100%;\r\n  max-height: inherit;\r\n  min-height: inherit;\r\n  position: relative;\r\n\r\n  .dso-scroll-container {\r\n    height: 100%;\r\n    max-height: inherit;\r\n    min-height: inherit;\r\n    overflow-y: auto;\r\n\r\n    &::before,\r\n    &::after {\r\n      background-repeat: no-repeat;\r\n      background-size: 100% units.$u3;\r\n      content: \"\";\r\n      display: block;\r\n      height: units.$u3;\r\n      left: 0;\r\n      opacity: 0;\r\n      overflow: visible;\r\n      position: absolute;\r\n      transition: opacity 150ms ease-in-out;\r\n      width: 100%;\r\n      pointer-events: none;\r\n      z-index: 1;\r\n    }\r\n\r\n    &::before {\r\n      background-image: linear-gradient(to top, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      top: 0;\r\n    }\r\n\r\n    &::after {\r\n      background-image: linear-gradient(to bottom, rgba(183, 183, 183, 0), rgba(183, 183, 183, 0.7));\r\n      bottom: 0;\r\n    }\r\n\r\n    &.dso-scroll-bottom {\r\n      &::before {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-top {\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n\r\n    &.dso-scroll-middle {\r\n      &::before,\r\n      &::after {\r\n        opacity: 1;\r\n      }\r\n    }\r\n  }\r\n}\r\n","import { Component, Element, Event, EventEmitter, h, Method, State } from \"@stencil/core\";\r\nimport clsx from \"clsx\";\r\nimport debounce from \"debounce\";\r\n\r\nimport { DsoScrollEndEvent, ScrollPosition } from \"./scrollable.interfaces\";\r\n\r\nconst resizeObserver = new ResizeObserver(\r\n  debounce(\r\n    (entries: ResizeObserverEntry[]) =>\r\n      entries.forEach((entry) => getScrollableComponentFromResizeObserverEntry(entry)?._setScrollState()),\r\n    50,\r\n  ),\r\n);\r\n\r\nfunction getScrollableComponentFromResizeObserverEntry({\r\n  target,\r\n}: ResizeObserverEntry): HTMLDsoScrollableElement | undefined {\r\n  if (target.parentNode instanceof ShadowRoot && isDsoScrollableComponent(target.parentNode.host)) {\r\n    return target.parentNode.host;\r\n  }\r\n\r\n  if (target.parentElement && isDsoScrollableComponent(target.parentElement)) {\r\n    return target.parentElement;\r\n  }\r\n\r\n  return undefined;\r\n}\r\n\r\nfunction isDsoScrollableComponent(element: Element): element is HTMLDsoScrollableElement {\r\n  return element.tagName === \"DSO-SCROLLABLE\";\r\n}\r\n\r\n@Component({\r\n  tag: \"dso-scrollable\",\r\n  styleUrl: \"scrollable.scss\",\r\n  shadow: true,\r\n})\r\nexport class Scrollable {\r\n  // One MutationObserver per instance because of https://github.com/whatwg/dom/issues/126\r\n  private mutationObserver = new MutationObserver((entries) =>\r\n    entries.forEach(({ target }) => {\r\n      const element = target.parentElement?.closest(\"dso-scrollable\");\r\n      if (element !== this.host) {\r\n        return;\r\n      }\r\n\r\n      this._setScrollState();\r\n    }),\r\n  );\r\n\r\n  private scrollContainerDiv?: HTMLDivElement;\r\n\r\n  private shadowContainerDiv?: HTMLDivElement;\r\n\r\n  @Element()\r\n  host!: HTMLDsoScrollableElement;\r\n\r\n  /**\r\n   * Event emitted when the scrollbar has reached top or bottom.\r\n   */\r\n  @Event()\r\n  dsoScrollEnd!: EventEmitter<DsoScrollEndEvent>;\r\n\r\n  @State()\r\n  scrollPosition: ScrollPosition = \"noScroll\";\r\n\r\n  /**\r\n   * @internal\r\n   */\r\n  @Method()\r\n  async _setScrollState() {\r\n    const scrollPosition = this.getScrollPosition();\r\n    if (this.scrollPosition !== scrollPosition) {\r\n      this.scrollPosition = scrollPosition;\r\n\r\n      if (this.scrollPosition === \"top\" || this.scrollPosition === \"bottom\") {\r\n        this.dsoScrollEnd.emit({ scrollEnd: this.scrollPosition });\r\n      }\r\n    }\r\n  }\r\n\r\n  private get slottedElements() {\r\n    return Array.from(this.host.children);\r\n  }\r\n\r\n  private getScrollPosition(): ScrollPosition {\r\n    if (!this.scrollContainerDiv) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    const { scrollHeight, clientHeight, scrollTop } = this.scrollContainerDiv;\r\n\r\n    if (scrollHeight <= clientHeight) {\r\n      return \"noScroll\";\r\n    }\r\n\r\n    if (scrollTop === 0) {\r\n      return \"top\";\r\n    }\r\n\r\n    if (scrollHeight - scrollTop - clientHeight < 1) {\r\n      return \"bottom\";\r\n    }\r\n\r\n    if (scrollTop > 0) {\r\n      return \"middle\";\r\n    }\r\n\r\n    return \"noScroll\";\r\n  }\r\n\r\n  componentDidLoad(): void {\r\n    this.mutationObserver.observe(this.host, {\r\n      characterData: true,\r\n      attributes: false,\r\n      childList: false,\r\n      subtree: true,\r\n    });\r\n\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.observe(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.observe(element));\r\n  }\r\n\r\n  disconnectedCallback(): void {\r\n    if (this.shadowContainerDiv instanceof HTMLDivElement) {\r\n      resizeObserver.unobserve(this.shadowContainerDiv);\r\n    }\r\n\r\n    this.mutationObserver.disconnect();\r\n\r\n    this.slottedElements.forEach((element) => resizeObserver.unobserve(element));\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <div ref={(el) => (this.shadowContainerDiv = el)} class=\"dso-shadow-container\">\r\n        <div\r\n          ref={(el) => (this.scrollContainerDiv = el)}\r\n          class={clsx(\"dso-scroll-container\", {\r\n            [`dso-scroll-${this.scrollPosition}`]: this.scrollPosition !== \"noScroll\",\r\n          })}\r\n          onScroll={() => this._setScrollState()}\r\n        >\r\n          <slot></slot>\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"],"version":3}