https://azte.co/resources/components/azteco-flow-spacer.js

1/* eslint-disable functional/no-let */
2/* eslint-disable functional/no-conditional-statement */
3/* eslint-disable functional/immutable-data */
4/* eslint-disable @typescript-eslint/explicit-function-return-type */
5
6AztecoYMUtils.spawn({
7  componentTag: 'azteco-flow-spacer',
8  renderer: obj => ({
9    ...obj,
10    component: AztecoYMUtils.createWebComponent({
11      style: `
12            :host {
13              display: block;
14            }
15
16            hr {
17                width: 100%;
18                border: none;
19                margin: 0;
20            }
21          `,
22      connectedCallback: ({ element }) => {
23        const hrTemplate = size => `<hr style="height: ${size}"></hr>`;
24
25        const size = element.dataset.size
26          ? AztecoYMUtils.rem(Number(element.dataset.size))
27          : AztecoYMUtils.rem(16);
28
29        const desktopSize = element.dataset.desktopSize
30          ? AztecoYMUtils.rem(Number(element.dataset.desktopSize))
31          : AztecoYMUtils.rem(16);
32
33        const initialWindowWidth = window.innerWidth;
34        initialWindowWidth < 1024 && element.render(hrTemplate(size));
35        initialWindowWidth >= 1024 && element.render(hrTemplate(desktopSize));
36
37        let prevWidth = window.innerWidth;
38
39        window.addEventListener('resize', event => {
40          const windowWidth = window.innerWidth;
41          if (prevWidth === windowWidth) {
42            return;
43          }
44
45          windowWidth >= 1024 && prevWidth < 1024 && element.render(hrTemplate(desktopSize));
46          windowWidth < 1024 && prevWidth >= 1024 && element.render(hrTemplate(size));
47
48          prevWidth = windowWidth;
49        });
50      },
51    }),
52  }),
53});