@foxy.io/elements 1.18.0-beta.2 → 1.18.0-beta.21

package/dist/mixins/inferrable.js

@@ -19,30 +19,32 @@ export const InferrableMixin = (BaseElement) => {
                 return element[key];
         }
         inferProperties() {
-            var _a;
-            const context = new Map();
-            const constructor = this.constructor;
-            const contextKeysToInfer = new Set(constructor.inferredProperties);
-            const processNode = (node) => {
-                if (node) {
-                    if (node instanceof ShadowRoot) {
-                        processNode(node.host);
+            this.updateComplete.then(() => {
+                var _a;
+                const context = new Map();
+                const constructor = this.constructor;
+                const contextKeysToInfer = new Set(constructor.inferredProperties);
+                const processNode = (node) => {
+                    if (node) {
+                        if (node instanceof ShadowRoot) {
+                            processNode(node.host);
+                        }
+                        else if (node instanceof HTMLElement) {
+                            contextKeysToInfer.forEach(key => {
+                                const value = this.inferFromElement(key, node);
+                                if (value !== undefined) {
+                                    context.set(key, value);
+                                    contextKeysToInfer.delete(key);
+                                }
+                            });
+                            if (contextKeysToInfer.size > 0)
+                                processNode(node.parentNode);
+                        }
                     }
-                    else if (node instanceof HTMLElement) {
-                        contextKeysToInfer.forEach(key => {
-                            const value = this.inferFromElement(key, node);
-                            if (value !== undefined) {
-                                context.set(key, value);
-                                contextKeysToInfer.delete(key);
-                            }
-                        });
-                        if (contextKeysToInfer.size > 0)
-                            processNode(node.parentNode);
-                    }
-                }
-            };
-            processNode(this.parentNode);
-            (_a = this.applyInferredProperties) === null || _a === void 0 ? void 0 : _a.call(this, context);
+                };
+                processNode(this.parentNode);
+                (_a = this.applyInferredProperties) === null || _a === void 0 ? void 0 : _a.call(this, context);
+            });
         }
         inferPropertiesInDescendants() {
             const roots = this.renderRoot === this ? [this.renderRoot] : [this.renderRoot, this];

package/dist/mixins/inferrable.js.map

@@ -1 +1 @@
-{"version":3,"file":"inferrable.js","sourceRoot":"","sources":["../../src/mixins/inferrable.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,WAAkB,EAC2D,EAAE;IAC/E,OAAO,MAAM,iBAAkB,SAAQ,WAAW;QAA3C;;YAYL,+FAA+F;YAC/F,UAAK,GAAkB,IAAI,CAAC;QAyD9B,CAAC;QArEC,MAAM,KAAK,kBAAkB;YAC3B,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,KAAK,UAAU;YACnB,OAAO;gBACL,GAAG,KAAK,CAAC,UAAU;gBACnB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;aACvC,CAAC;QACJ,CAAC;QAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;YAChD,IAAI,GAAG,IAAI,OAAO;gBAAE,OAAQ,OAAe,CAAC,GAAG,CAAC,CAAC;QACnD,CAAC;QAED,eAAe;;YACb,MAAM,OAAO,GAAG,IAAI,GAAG,EAAmB,CAAC;YAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,WAAuC,CAAC;YACjE,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;YAEnE,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAQ,EAAE;gBAC9C,IAAI,IAAI,EAAE;oBACR,IAAI,IAAI,YAAY,UAAU,EAAE;wBAC9B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;qBACxB;yBAAM,IAAI,IAAI,YAAY,WAAW,EAAE;wBACtC,kBAAkB,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;4BAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;4BAC/C,IAAI,KAAK,KAAK,SAAS,EAAE;gCACvB,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;gCACxB,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;6BAChC;wBACH,CAAC,CAAC,CAAC;wBAEH,IAAI,kBAAkB,CAAC,IAAI,GAAG,CAAC;4BAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;qBAC/D;iBACF;YACH,CAAC,CAAC;YAEF,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;YAC7B,MAAA,IAAI,CAAC,uBAAuB,+CAA5B,IAAI,EAA2B,OAAO,EAAE;QAC1C,CAAC;QAED,4BAA4B;YAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YAErF,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CACnB,IAAI;iBACD,gBAAgB,CAAoC,SAAS,CAAC;iBAC9D,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,CACvD,CAAC;QACJ,CAAC;QAED,6DAA6D;QAC7D,uBAAuB,CAAC,OAA6B;YACnD,EAAE;QACJ,CAAC;QAED,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACtC,CAAC;QAED,OAAO,CAAC,OAAiC;YACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACvB,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACtC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Constructor, LitElement, PropertyDeclarations } from 'lit-element';\n\ntype Base = Constructor<LitElement> & { properties?: PropertyDeclarations };\n\nexport declare class InferrableMixinHost {\n  infer: string | null;\n\n  inferProperties(): void;\n\n  inferFromElement(key: string, element: HTMLElement): unknown | undefined;\n\n  inferPropertiesInDescendants(): void;\n\n  applyInferredProperties(context: Map<string, unknown>): void;\n}\n\nexport const InferrableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & Constructor<InferrableMixinHost> & { inferredProperties: string[] } => {\n  return class InferrableElement extends BaseElement {\n    static get inferredProperties(): string[] {\n      return [];\n    }\n\n    static get properties(): PropertyDeclarations {\n      return {\n        ...super.properties,\n        infer: { type: String, reflect: true },\n      };\n    }\n\n    /** Set a name for this element here to enable property inference. Set to `null` to disable. */\n    infer: string | null = null;\n\n    inferFromElement(key: string, element: HTMLElement): unknown | undefined {\n      if (key in element) return (element as any)[key];\n    }\n\n    inferProperties(): void {\n      const context = new Map<string, unknown>();\n      const constructor = this.constructor as typeof InferrableElement;\n      const contextKeysToInfer = new Set(constructor.inferredProperties);\n\n      const processNode = (node: Node | null): void => {\n        if (node) {\n          if (node instanceof ShadowRoot) {\n            processNode(node.host);\n          } else if (node instanceof HTMLElement) {\n            contextKeysToInfer.forEach(key => {\n              const value = this.inferFromElement(key, node);\n              if (value !== undefined) {\n                context.set(key, value);\n                contextKeysToInfer.delete(key);\n              }\n            });\n\n            if (contextKeysToInfer.size > 0) processNode(node.parentNode);\n          }\n        }\n      };\n\n      processNode(this.parentNode);\n      this.applyInferredProperties?.(context);\n    }\n\n    inferPropertiesInDescendants(): void {\n      const roots = this.renderRoot === this ? [this.renderRoot] : [this.renderRoot, this];\n\n      roots.forEach(root =>\n        root\n          .querySelectorAll<InferrableMixinHost & HTMLElement>('[infer]')\n          .forEach(inferrable => inferrable.inferProperties())\n      );\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    applyInferredProperties(context: Map<string, unknown>): void {\n      //\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      this.inferPropertiesInDescendants();\n    }\n\n    updated(changes: Map<keyof this, unknown>): void {\n      super.updated(changes);\n      this.inferPropertiesInDescendants();\n    }\n  };\n};\n"]}
+{"version":3,"file":"inferrable.js","sourceRoot":"","sources":["../../src/mixins/inferrable.ts"],"names":[],"mappings":"AAgBA,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,WAAkB,EAC2D,EAAE;IAC/E,OAAO,MAAM,iBAAkB,SAAQ,WAAW;QAA3C;;YAYL,+FAA+F;YAC/F,UAAK,GAAkB,IAAI,CAAC;QA2D9B,CAAC;QAvEC,MAAM,KAAK,kBAAkB;YAC3B,OAAO,EAAE,CAAC;QACZ,CAAC;QAED,MAAM,KAAK,UAAU;YACnB,OAAO;gBACL,GAAG,KAAK,CAAC,UAAU;gBACnB,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE;aACvC,CAAC;QACJ,CAAC;QAKD,gBAAgB,CAAC,GAAW,EAAE,OAAoB;YAChD,IAAI,GAAG,IAAI,OAAO;gBAAE,OAAQ,OAAe,CAAC,GAAG,CAAC,CAAC;QACnD,CAAC;QAED,eAAe;YACb,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,GAAG,EAAE;;gBAC5B,MAAM,OAAO,GAAG,IAAI,GAAG,EAAmB,CAAC;gBAC3C,MAAM,WAAW,GAAG,IAAI,CAAC,WAAuC,CAAC;gBACjE,MAAM,kBAAkB,GAAG,IAAI,GAAG,CAAC,WAAW,CAAC,kBAAkB,CAAC,CAAC;gBAEnE,MAAM,WAAW,GAAG,CAAC,IAAiB,EAAQ,EAAE;oBAC9C,IAAI,IAAI,EAAE;wBACR,IAAI,IAAI,YAAY,UAAU,EAAE;4BAC9B,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;yBACxB;6BAAM,IAAI,IAAI,YAAY,WAAW,EAAE;4BACtC,kBAAkB,CAAC,OAAO,CAAC,GAAG,CAAC,EAAE;gCAC/B,MAAM,KAAK,GAAG,IAAI,CAAC,gBAAgB,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC;gCAC/C,IAAI,KAAK,KAAK,SAAS,EAAE;oCACvB,OAAO,CAAC,GAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;oCACxB,kBAAkB,CAAC,MAAM,CAAC,GAAG,CAAC,CAAC;iCAChC;4BACH,CAAC,CAAC,CAAC;4BAEH,IAAI,kBAAkB,CAAC,IAAI,GAAG,CAAC;gCAAE,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;yBAC/D;qBACF;gBACH,CAAC,CAAC;gBAEF,WAAW,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC7B,MAAA,IAAI,CAAC,uBAAuB,+CAA5B,IAAI,EAA2B,OAAO,EAAE;YAC1C,CAAC,CAAC,CAAC;QACL,CAAC;QAED,4BAA4B;YAC1B,MAAM,KAAK,GAAG,IAAI,CAAC,UAAU,KAAK,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;YAErF,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,EAAE,CACnB,IAAI;iBACD,gBAAgB,CAAoC,SAAS,CAAC;iBAC9D,OAAO,CAAC,UAAU,CAAC,EAAE,CAAC,UAAU,CAAC,eAAe,EAAE,CAAC,CACvD,CAAC;QACJ,CAAC;QAED,6DAA6D;QAC7D,uBAAuB,CAAC,OAA6B;YACnD,EAAE;QACJ,CAAC;QAED,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAC1B,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACtC,CAAC;QAED,OAAO,CAAC,OAAiC;YACvC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YACvB,IAAI,CAAC,4BAA4B,EAAE,CAAC;QACtC,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Constructor, LitElement, PropertyDeclarations } from 'lit-element';\n\ntype Base = Constructor<LitElement> & { properties?: PropertyDeclarations };\n\nexport declare class InferrableMixinHost {\n  infer: string | null;\n\n  inferProperties(): void;\n\n  inferFromElement(key: string, element: HTMLElement): unknown | undefined;\n\n  inferPropertiesInDescendants(): void;\n\n  applyInferredProperties(context: Map<string, unknown>): void;\n}\n\nexport const InferrableMixin = <TBase extends Base>(\n  BaseElement: TBase\n): TBase & Constructor<InferrableMixinHost> & { inferredProperties: string[] } => {\n  return class InferrableElement extends BaseElement {\n    static get inferredProperties(): string[] {\n      return [];\n    }\n\n    static get properties(): PropertyDeclarations {\n      return {\n        ...super.properties,\n        infer: { type: String, reflect: true },\n      };\n    }\n\n    /** Set a name for this element here to enable property inference. Set to `null` to disable. */\n    infer: string | null = null;\n\n    inferFromElement(key: string, element: HTMLElement): unknown | undefined {\n      if (key in element) return (element as any)[key];\n    }\n\n    inferProperties(): void {\n      this.updateComplete.then(() => {\n        const context = new Map<string, unknown>();\n        const constructor = this.constructor as typeof InferrableElement;\n        const contextKeysToInfer = new Set(constructor.inferredProperties);\n\n        const processNode = (node: Node | null): void => {\n          if (node) {\n            if (node instanceof ShadowRoot) {\n              processNode(node.host);\n            } else if (node instanceof HTMLElement) {\n              contextKeysToInfer.forEach(key => {\n                const value = this.inferFromElement(key, node);\n                if (value !== undefined) {\n                  context.set(key, value);\n                  contextKeysToInfer.delete(key);\n                }\n              });\n\n              if (contextKeysToInfer.size > 0) processNode(node.parentNode);\n            }\n          }\n        };\n\n        processNode(this.parentNode);\n        this.applyInferredProperties?.(context);\n      });\n    }\n\n    inferPropertiesInDescendants(): void {\n      const roots = this.renderRoot === this ? [this.renderRoot] : [this.renderRoot, this];\n\n      roots.forEach(root =>\n        root\n          .querySelectorAll<InferrableMixinHost & HTMLElement>('[infer]')\n          .forEach(inferrable => inferrable.inferProperties())\n      );\n    }\n\n    // eslint-disable-next-line @typescript-eslint/no-unused-vars\n    applyInferredProperties(context: Map<string, unknown>): void {\n      //\n    }\n\n    connectedCallback(): void {\n      super.connectedCallback();\n      this.inferPropertiesInDescendants();\n    }\n\n    updated(changes: Map<keyof this, unknown>): void {\n      super.updated(changes);\n      this.inferPropertiesInDescendants();\n    }\n  };\n};\n"]}

package/dist/mixins/responsive.js

@@ -1,11 +1,11 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import debounce from 'lodash-es/debounce';
+import throttle from 'lodash-es/throttle';
 const breakpoints = Object.entries({ sm: 640, md: 768, lg: 1024, xl: 1280 });
 export const ResponsiveMixin = (BaseElement) => {
     return class ResponsiveElement extends BaseElement {
         constructor() {
             super(...arguments);
-            this.__handleResize = debounce((entries) => {
+            this.__handleResize = throttle((entries) => {
                 entries.forEach(({ contentRect, target }) => {
                     breakpoints.forEach(([name, minWidth]) => {
                         if (contentRect.width >= minWidth) {
@@ -18,13 +18,15 @@ export const ResponsiveMixin = (BaseElement) => {
                         }
                     });
                 });
-            }, 16);
+            }, 16, { trailing: true, leading: true });
         }
         connectedCallback() {
             super.connectedCallback();
-            const observer = new ResizeObserver(this.__handleResize);
-            observer.observe(this);
-            this.__removeBreakpoints = () => observer.disconnect();
+            if (window.ResizeObserver) {
+                const observer = new ResizeObserver(this.__handleResize);
+                observer.observe(this);
+                this.__removeBreakpoints = () => observer.disconnect();
+            }
         }
         disconnectedCallback() {
             var _a;

package/dist/mixins/responsive.js.map

@@ -1 +1 @@
-{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../src/mixins/responsive.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAItE,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,WAAkB,EACX,EAAE;IACT,OAAO,MAAM,iBAAkB,SAAQ,WAAW;QAA3C;;YAGG,mBAAc,GAAG,QAAQ,CAAC,CAAC,OAA8B,EAAE,EAAE;gBACnE,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE;oBAC1C,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAE;wBACvC,IAAI,WAAW,CAAC,KAAK,IAAI,QAAQ,EAAE;4BACjC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;gCAAE,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;yBAC/D;6BAAM;4BACL,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;gCAAE,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;yBAC7D;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,EAAE,EAAE,CAAC,CAAC;QAeT,CAAC;QAbC,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAE1B,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;YACzD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;YACvB,IAAI,CAAC,mBAAmB,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;QACzD,CAAC;QAED,oBAAoB;;YAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC7B,MAAA,IAAI,CAAC,mBAAmB,+CAAxB,IAAI,EAAyB;YAC7B,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC/B,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { Constructor, LitElement } from 'lit-element';\n\nimport debounce from 'lodash-es/debounce';\n\nconst breakpoints = Object.entries({ sm: 640, md: 768, lg: 1024, xl: 1280 });\n\nexport const ResponsiveMixin = <TBase extends Constructor<LitElement>>(\n  BaseElement: TBase\n): TBase => {\n  return class ResponsiveElement extends BaseElement {\n    private __removeBreakpoints?: () => void;\n\n    private __handleResize = debounce((entries: ResizeObserverEntry[]) => {\n      entries.forEach(({ contentRect, target }) => {\n        breakpoints.forEach(([name, minWidth]) => {\n          if (contentRect.width >= minWidth) {\n            if (!target.hasAttribute(name)) target.setAttribute(name, '');\n          } else {\n            if (target.hasAttribute(name)) target.removeAttribute(name);\n          }\n        });\n      });\n    }, 16);\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      const observer = new ResizeObserver(this.__handleResize);\n      observer.observe(this);\n      this.__removeBreakpoints = () => observer.disconnect();\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.__removeBreakpoints?.();\n      this.__handleResize.cancel();\n    }\n  };\n};\n"]}
+{"version":3,"file":"responsive.js","sourceRoot":"","sources":["../../src/mixins/responsive.ts"],"names":[],"mappings":"AAAA,sEAAsE;AAItE,OAAO,QAAQ,MAAM,oBAAoB,CAAC;AAE1C,MAAM,WAAW,GAAG,MAAM,CAAC,OAAO,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,GAAG,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC;AAE7E,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,WAAkB,EACX,EAAE;IACT,OAAO,MAAM,iBAAkB,SAAQ,WAAW;QAA3C;;YAGG,mBAAc,GAAG,QAAQ,CAC/B,CAAC,OAA8B,EAAE,EAAE;gBACjC,OAAO,CAAC,OAAO,CAAC,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,EAAE,EAAE;oBAC1C,WAAW,CAAC,OAAO,CAAC,CAAC,CAAC,IAAI,EAAE,QAAQ,CAAC,EAAE,EAAE;wBACvC,IAAI,WAAW,CAAC,KAAK,IAAI,QAAQ,EAAE;4BACjC,IAAI,CAAC,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;gCAAE,MAAM,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;yBAC/D;6BAAM;4BACL,IAAI,MAAM,CAAC,YAAY,CAAC,IAAI,CAAC;gCAAE,MAAM,CAAC,eAAe,CAAC,IAAI,CAAC,CAAC;yBAC7D;oBACH,CAAC,CAAC,CAAC;gBACL,CAAC,CAAC,CAAC;YACL,CAAC,EACD,EAAE,EACF,EAAE,QAAQ,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,CAClC,CAAC;QAiBJ,CAAC;QAfC,iBAAiB;YACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;YAE1B,IAAI,MAAM,CAAC,cAAc,EAAE;gBACzB,MAAM,QAAQ,GAAG,IAAI,cAAc,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;gBACzD,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;gBACvB,IAAI,CAAC,mBAAmB,GAAG,GAAG,EAAE,CAAC,QAAQ,CAAC,UAAU,EAAE,CAAC;aACxD;QACH,CAAC;QAED,oBAAoB;;YAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;YAC7B,MAAA,IAAI,CAAC,mBAAmB,+CAAxB,IAAI,EAAyB;YAC7B,IAAI,CAAC,cAAc,CAAC,MAAM,EAAE,CAAC;QAC/B,CAAC;KACF,CAAC;AACJ,CAAC,CAAC","sourcesContent":["/* eslint-disable @typescript-eslint/explicit-module-boundary-types */\n\nimport { Constructor, LitElement } from 'lit-element';\n\nimport throttle from 'lodash-es/throttle';\n\nconst breakpoints = Object.entries({ sm: 640, md: 768, lg: 1024, xl: 1280 });\n\nexport const ResponsiveMixin = <TBase extends Constructor<LitElement>>(\n  BaseElement: TBase\n): TBase => {\n  return class ResponsiveElement extends BaseElement {\n    private __removeBreakpoints?: () => void;\n\n    private __handleResize = throttle(\n      (entries: ResizeObserverEntry[]) => {\n        entries.forEach(({ contentRect, target }) => {\n          breakpoints.forEach(([name, minWidth]) => {\n            if (contentRect.width >= minWidth) {\n              if (!target.hasAttribute(name)) target.setAttribute(name, '');\n            } else {\n              if (target.hasAttribute(name)) target.removeAttribute(name);\n            }\n          });\n        });\n      },\n      16,\n      { trailing: true, leading: true }\n    );\n\n    connectedCallback(): void {\n      super.connectedCallback();\n\n      if (window.ResizeObserver) {\n        const observer = new ResizeObserver(this.__handleResize);\n        observer.observe(this);\n        this.__removeBreakpoints = () => observer.disconnect();\n      }\n    }\n\n    disconnectedCallback(): void {\n      super.disconnectedCallback();\n      this.__removeBreakpoints?.();\n      this.__handleResize.cancel();\n    }\n  };\n};\n"]}