{"version":3,"names":["initContainerBreakpointsDelegate","component","breakpoints","sort","a","b","observer","window","ResizeObserver","entries","contentRect","width","length","breakpoint","classList","remove","add","contains","observe"],"sources":["src/common/container-breakpoint-component.ts"],"sourcesContent":["/**\n * Implement this interface if your component has to support container breakpoints.\n * @example See the Card Teaser component\n */\nexport interface ContainerBreakpointComponent {\n  /**\n   * The host element of the custom component. Should be annotated with the Stencil decorator @Element().\n   * @example @Element() hostElement: HTMLEonUiMyComponentElement;\n   */\n  hostElement;\n\n  /**\n   * Array that defines component specific container breakpoints.\n   */\n  containerBreakpoints: number[];\n\n  /**\n   * Initializes the container breakpoint function\n   *\n   * @default\n   * initContainerBreakpoints() {\n   *   initContainerBreakpointsDelegate(this.hostElement, this.containerBreakpoints);\n   * }\n   */\n  initContainerBreakpoints(): void;\n}\n\n/**\n * attaches specific container breakpoint classes to host element which are based on the component width.\n * As container queries are not yet ready to be used in all browsers and in combination with web components this feature is provided via resize observer.\n * Only disadvantage is, that there is only one global css class on host element level. Using container queries within scss strcture is not possible.\n * @param component\n * @param breakpoints\n */\nexport function initContainerBreakpointsDelegate(component: any, breakpoints: number[]) {\n  // sort container breakpoints in an ascending order for comparison\n  breakpoints = breakpoints.sort((a, b) => a - b);\n\n  // resize observer for tracking component width\n  var observer = new window.ResizeObserver((entries) => {\n    // if component width is higher than largest breakpoint remove class and return\n    if (entries[0].contentRect.width > breakpoints[breakpoints.length - 1]) {\n      for (let breakpoint of breakpoints) {\n        component.classList.remove(`container-breakpoint-${breakpoint}`);\n        component.classList.add(`container-breakpoint-largest`);\n      }\n      return;\n    }\n\n    // go trough all container breakpoints until one matches\n    for (let breakpoint of breakpoints) {\n      if (entries[0].contentRect.width <= breakpoint) {\n        // check if container breakpoint class is already attached. If so, no update is needed.\n        if (!component.classList.contains(`container-breakpoint-${breakpoint}`)) {\n          // remove all attached container breakpoint classes\n          for (let breakpoint of breakpoints) {\n            component.classList.remove(`container-breakpoint-${breakpoint}`);\n            component.classList.remove(`container-breakpoint-largest`);\n          }\n          // add matching container breakpoint class\n          component.classList.add(`container-breakpoint-${breakpoint}`);\n        }\n        // force loop to stop\n        break;\n      }\n    }\n  });\n\n  observer.observe(component);\n}\n"],"mappings":"SAkCgBA,EAAiCC,EAAgBC,GAE/DA,EAAcA,EAAYC,MAAK,CAACC,EAAGC,IAAMD,EAAIC,IAG7C,IAAIC,EAAW,IAAIC,OAAOC,gBAAgBC,IAExC,GAAIA,EAAQ,GAAGC,YAAYC,MAAQT,EAAYA,EAAYU,OAAS,GAAI,CACtE,IAAK,IAAIC,KAAcX,EAAa,CAClCD,EAAUa,UAAUC,OAAO,wBAAwBF,KACnDZ,EAAUa,UAAUE,IAAI,+B,CAE1B,M,CAIF,IAAK,IAAIH,KAAcX,EAAa,CAClC,GAAIO,EAAQ,GAAGC,YAAYC,OAASE,EAAY,CAE9C,IAAKZ,EAAUa,UAAUG,SAAS,wBAAwBJ,KAAe,CAEvE,IAAK,IAAIA,KAAcX,EAAa,CAClCD,EAAUa,UAAUC,OAAO,wBAAwBF,KACnDZ,EAAUa,UAAUC,OAAO,+B,CAG7Bd,EAAUa,UAAUE,IAAI,wBAAwBH,I,CAGlD,K,MAKNP,EAASY,QAAQjB,EACnB,Q"}