@universityofmaryland/web-elements-library 1.4.8 → 1.5.0-beta.0

package/dist/composite/footer/elements/main-section/row-links/link-columns.mjs

@@ -1,313 +1,269 @@
-import { token, typography, animation } from "@universityofmaryland/web-styles-library";
-import { animationLinkSpan } from "../../../../../utilities/markup/modify.mjs";
-import { convertJSSObjectToStyles } from "../../../../../utilities/theme/index.mjs";
-import { VARIABLES, ELEMENTS, REFERENCES, BREAKPOINTS } from "../../../globals.mjs";
+import { token, animation, typography } from "@universityofmaryland/web-styles-library";
+import { wrapLinkForAnimation } from "@universityofmaryland/web-utilities-library/animation";
+import { createDiv, create } from "../../../../../model/elements/index.mjs";
+import { BREAKPOINTS } from "../../../globals.mjs";
 const { MEDIUM, LARGE } = BREAKPOINTS;
-const { ELEMENT_WRAPPER } = ELEMENTS;
-const { ELEMENT_NAME } = VARIABLES;
-const { IS_THEME_LIGHT } = REFERENCES;
-const HEADLINE_ATTRIBUTE = "data-headline";
-const HEADLINE_ATTRIBUTE_EMPTY = "data-empty";
-const LINK_TYPE = "link";
-const HEADLINE_TYPE = "headline";
-const ROW_LINKS_COLUMNS_CONTAINER = "umd-footer-row-links-columns";
-const ROW_LINKS_COLUMN_WRAPPER = "umd-footer-row-links-column-wrapper";
-const ROW_LINKS_COLUMN_HEADLINE = `link-column-headline`;
-const ROW_LINKS_COLUMN_LINKS = `link-column-fonts`;
 const COLUMN_ONE_DEFAULT_LINKS = [
+  { elmentType: "link", title: "Careers", url: "https://ejobs.umd.edu" },
   {
-    elmentType: LINK_TYPE,
-    title: "Careers",
-    url: "https://ejobs.umd.edu"
-  },
-  {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Office of Civil Rights & Sexual Misconduct",
     url: "https://ocrsm.umd.edu"
   },
   {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "UMD Police Department",
     url: "https://www.umpd.umd.edu"
   },
   {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Public Records Request",
     url: "https://umd.edu/administration/public-information-request"
   },
   {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Report Fraud and Waste",
     url: "https://finance.umd.edu/ethics-integrity-and-compliance-reporting"
   },
   {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Policies and Procedures",
     url: "https://umd.edu/policies-and-procedures"
   }
 ];
 const COLUMN_TWO_DEFAULT_LINKS = [
+  { elmentType: "headline", title: "Information for" },
   {
-    elmentType: HEADLINE_TYPE,
-    title: "Information for"
-  },
-  {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Prospective Undergraduate Students",
     url: "https://admissions.umd.edu/"
   },
   {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Prospective Graduate Students",
     url: "https://gradschool.umd.edu/"
   },
   {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Parents & Families",
     url: "https://admissions.umd.edu/persona/parent-families"
   },
-  {
-    elmentType: LINK_TYPE,
-    title: "Alumni",
-    url: "https://alumni.umd.edu/"
-  }
+  { elmentType: "link", title: "Alumni", url: "https://alumni.umd.edu/" }
 ];
 const COLUMN_THREE_DEFAULT_LINKS = [
+  { elmentType: "headline", title: "Academics" },
   {
-    elmentType: HEADLINE_TYPE,
-    title: "Academics"
-  },
-  {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Academic Calendars",
     url: "https://provost.umd.edu/node/3876"
   },
   {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Course Catalogs",
     url: "https://academiccatalog.umd.edu"
   },
+  { elmentType: "link", title: "Libraries", url: "https://www.lib.umd.edu" },
   {
-    elmentType: LINK_TYPE,
-    title: "Libraries",
-    url: "https://www.lib.umd.edu"
-  },
-  {
-    elmentType: LINK_TYPE,
+    elmentType: "link",
     title: "Terp Portals",
     url: "https://testudo.umd.edu"
   }
 ];
-const HeadlineStyles = `
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ROW_LINKS_COLUMN_HEADLINE}`]: typography.elements.interativeMedium
-  }
-})}
-
-  .${ROW_LINKS_COLUMN_HEADLINE} {
-    margin-bottom: ${token.spacing.sm};
-    font-weight: 700;
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ROW_LINKS_COLUMN_HEADLINE}[${HEADLINE_ATTRIBUTE_EMPTY}="true"] {
-      display: none;
-    }
-  }
-`;
-const LinkStyles = `
-  .${ROW_LINKS_COLUMN_LINKS}:not(:last-child) {
-    margin-bottom: ${token.spacing.sm};
-  }
-
-  .${ROW_LINKS_COLUMN_LINKS} > * {
-    margin-bottom: ${token.spacing.sm};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ROW_LINKS_COLUMN_LINKS} a`]: typography.sans.smaller
-  }
-})}
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ROW_LINKS_COLUMN_LINKS} a`]: animation.line.slideUnderWhite
-  }
-})}
-
-  .${ROW_LINKS_COLUMN_LINKS} a,
-  .${ROW_LINKS_COLUMN_LINKS} span {
-    color: ${token.color.gray.light};
-  }
-
-  ${convertJSSObjectToStyles({
-  styleObj: {
-    [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_COLUMN_LINKS} a`]: animation.line.slideUnderBlack
-  }
-})}
-`;
-const ColumnWrapper = `
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
-    .${ROW_LINKS_COLUMN_WRAPPER} {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      gap: 0 ${token.spacing.md};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {
-    .${ROW_LINKS_COLUMN_WRAPPER}:not(:last-child) {
-      margin-bottom: ${token.spacing.lg};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${ROW_LINKS_COLUMN_WRAPPER} {
-      padding-right: ${token.spacing.xs};
-    }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${ROW_LINKS_COLUMN_WRAPPER}:not(:first-child) {
-      margin-left: ${token.spacing.lg};
-      padding-left: ${token.spacing.lg};
-      border-left: 1px solid ${token.color.gray.dark};
+const createLinkColumn = (props, children) => {
+  const { isThemeLight } = props;
+  return createDiv({
+    className: "link-column-fonts",
+    children,
+    elementStyles: {
+      element: {
+        marginBottom: token.spacing.sm,
+        ["& > *"]: {
+          marginBottom: token.spacing.sm
+        },
+        ["& a"]: {
+          ...animation.line.slideUnderWhite,
+          ...typography.sans.smaller,
+          ...isThemeLight && {
+            ...animation.line.slideUnderBlack
+          }
+        },
+        ["& a, & span, & p"]: {
+          color: token.color.gray.light,
+          ...isThemeLight && {
+            color: token.color.gray.dark
+          }
+        },
+        [`@container (max-width: ${MEDIUM - 1}px)`]: {
+          ["&:last-child"]: {
+            marginBottom: 0
+          }
+        }
+      }
     }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {
-    .${ROW_LINKS_COLUMN_WRAPPER} > p {
-      grid-column: 1 / span 2;
+  });
+};
+const createLinkColumnFontsLink = (element) => {
+  return create({
+    element,
+    className: `link-column-fonts-link`,
+    elementStyles: {
+      element: {
+        [`&p`]: {
+          gridColumn: "1 / span 2"
+        }
+      }
     }
-  }
-`;
-const LinkColumnStyles = `
-  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {
-    .${ROW_LINKS_COLUMNS_CONTAINER} {
-      padding-top: ${token.spacing.md};
+  });
+};
+const createDefaultColumn = (props, defaultContent) => {
+  const children = defaultContent.map((row) => {
+    if (row.elmentType === "link" && row.url) {
+      const link = document.createElement("a");
+      const span = document.createElement("span");
+      const columnLinkChildren = [createLinkColumnFontsLink(link)];
+      span.textContent = row.title;
+      link.appendChild(span);
+      link.href = row.url;
+      link.target = "_blank";
+      link.rel = "noopener noreferrer";
+      return createLinkColumn(props, columnLinkChildren);
     }
-  }
-
-  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {
-    .${ROW_LINKS_COLUMNS_CONTAINER} {
-      display: grid;
-      grid-template-columns: 1fr 1fr 1fr;
+    if (row.elmentType === "headline") {
+      const headline = document.createElement("p");
+      headline.textContent = row.title;
+      return createLinkColumnHeadline(headline);
     }
-  }
-
-  ${ColumnWrapper}
-  ${HeadlineStyles}
-  ${LinkStyles}
-`;
-const CreateDefaultColumn = ({
-  defaultContent
+    return void 0;
+  }).filter(Boolean);
+  return createRowLinksColumnWrapper({ children });
+};
+const createRowLinksColumnWrapper = ({
+  children
 }) => {
-  const container = document.createElement("div");
-  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);
-  defaultContent.forEach((row) => {
-    if (row.elmentType === LINK_TYPE) {
-      if (row.url) {
-        const wrapper = document.createElement("div");
-        const link = document.createElement("a");
-        const span = document.createElement("span");
-        span.textContent = row.title;
-        link.appendChild(span);
-        link.href = row.url;
-        link.target = "_blank";
-        link.rel = "noopener noreferrer";
-        wrapper.classList.add(ROW_LINKS_COLUMN_LINKS);
-        wrapper.appendChild(link);
-        container.appendChild(wrapper);
+  return createDiv({
+    className: "umd-footer-row-links-column-wrapper",
+    children,
+    elementStyles: {
+      element: {
+        [`@container (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px)`]: {
+          display: "grid",
+          gridTemplateColumns: "1fr 1fr",
+          gap: `0 ${token.spacing.md}`
+        },
+        [`@container (max-width: ${MEDIUM}px)`]: {
+          ["&:not(:last-child)"]: {
+            marginBottom: token.spacing.lg
+          }
+        },
+        [`@container (min-width: ${LARGE}px)`]: {
+          paddingRight: token.spacing.xs,
+          minWidth: "240px",
+          [`&:not(:first-child)`]: {
+            marginLeft: token.spacing.lg,
+            paddingLeft: token.spacing.lg,
+            borderLeft: `1px solid ${token.color.gray.dark}`
+          }
+        }
       }
-    } else if (row.elmentType === HEADLINE_TYPE) {
-      const headline = document.createElement("p");
-      headline.textContent = row.title;
-      headline.classList.add(ROW_LINKS_COLUMN_HEADLINE);
-      container.appendChild(headline);
     }
   });
-  return container;
 };
-const CreateSlotColumn = ({
+const createSlotColumn = ({
+  props,
   slot,
-  hasHeadlines,
+  slotHasHeadline,
   isColumnOne
 }) => {
-  const container = document.createElement("div");
-  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);
-  const wrapper = document.createElement("div");
-  const links = Array.from(slot.querySelectorAll("a")).map((link) => {
-    const linkWrapper = document.createElement("div");
-    linkWrapper.classList.add(ROW_LINKS_COLUMN_LINKS);
-    animationLinkSpan({ element: link });
-    linkWrapper.appendChild(link);
-    return linkWrapper;
+  const linkChildren = Array.from(
+    slot.querySelectorAll("a")
+  ).map((link) => {
+    wrapLinkForAnimation({ element: link });
+    const slotColumnChild = [createLinkColumnFontsLink(link)];
+    return createLinkColumn(props, slotColumnChild);
   });
-  if (hasHeadlines) {
-    const headline = slot.getAttribute(HEADLINE_ATTRIBUTE);
-    const headlineElement = document.createElement("p");
-    headlineElement.classList.add(ROW_LINKS_COLUMN_HEADLINE);
-    headlineElement.innerHTML = headline;
-    if (!headline && !isColumnOne) {
-      headlineElement.setAttribute(HEADLINE_ATTRIBUTE_EMPTY, "true");
-      wrapper.appendChild(headlineElement);
-    }
-    if (headline) {
-      wrapper.appendChild(headlineElement);
+  const wrapperChildren = [];
+  if (slotHasHeadline) {
+    const headlineAttr = slot.getAttribute("data-headline") ?? "";
+    const headline = document.createElement("p");
+    headline.innerHTML = headlineAttr;
+    if (!headlineAttr && !isColumnOne) {
+      headline.setAttribute("data-empty", "true");
     }
+    wrapperChildren.push(createLinkColumnHeadline(headline));
   }
-  links.forEach((link) => {
-    wrapper.appendChild(link);
+  wrapperChildren.push(...linkChildren);
+  return createRowLinksColumnWrapper({ children: wrapperChildren });
+};
+const createLinkColumnHeadline = (element) => {
+  return create({
+    element,
+    className: "link-column-headline",
+    elementStyles: {
+      element: {
+        ...typography.elements.interativeMedium,
+        marginBottom: token.spacing.sm,
+        fontWeight: 700,
+        gridColumn: "1 / span 2"
+      }
+    }
   });
-  container.appendChild(wrapper);
-  return container;
 };
 const createLinkColumns = (props) => {
   const { slotColumns } = props;
-  const container = document.createElement("div");
+  let children;
   if (slotColumns) {
     const hasHeadlines = slotColumns.some(
-      (slot) => slot.hasAttribute(HEADLINE_ATTRIBUTE)
+      (slot) => slot.hasAttribute("data-headline")
     );
-    slotColumns.forEach((slot, index) => {
-      const slotToAppend = CreateSlotColumn({
+    children = slotColumns.map((slot, index) => {
+      const slotHasHeadline = slot.hasAttribute("data-headline");
+      return createSlotColumn({
+        props,
         slot,
-        hasHeadlines,
+        slotHasHeadline,
         isColumnOne: index === 0
       });
-      if (slotToAppend) container.appendChild(slotToAppend);
     });
     if (hasHeadlines) {
       setTimeout(() => {
         const headlines = Array.from(
-          container.querySelectorAll(`.${ROW_LINKS_COLUMN_HEADLINE}`)
+          document.querySelectorAll(`.${"link-column-headline"}`)
+        );
+        const renderedHeadlinesSize = headlines.reduce(
+          (acc, h) => Math.max(acc, h.offsetHeight),
+          10
+        );
+        headlines.forEach(
+          (h) => h.style.height = `${renderedHeadlinesSize}px`
         );
-        const renderedHeadlinesSize = headlines.reduce((acc, headline) => {
-          return headline.offsetHeight > acc ? headline.offsetHeight : acc;
-        }, 10);
-        headlines.forEach((headline) => {
-          headline.style.height = `${renderedHeadlinesSize}px`;
-        });
       }, 200);
     }
   } else {
-    container.appendChild(
-      CreateDefaultColumn({ defaultContent: COLUMN_ONE_DEFAULT_LINKS })
-    );
-    container.appendChild(
-      CreateDefaultColumn({ defaultContent: COLUMN_TWO_DEFAULT_LINKS })
-    );
-    container.appendChild(
-      CreateDefaultColumn({ defaultContent: COLUMN_THREE_DEFAULT_LINKS })
-    );
+    children = [
+      createDefaultColumn(props, COLUMN_ONE_DEFAULT_LINKS),
+      createDefaultColumn(props, COLUMN_TWO_DEFAULT_LINKS),
+      createDefaultColumn(props, COLUMN_THREE_DEFAULT_LINKS)
+    ];
   }
-  container.classList.add(ROW_LINKS_COLUMNS_CONTAINER);
-  return container;
+  return createDiv({
+    className: "umd-footer-row-links-columns",
+    children,
+    elementStyles: {
+      element: {
+        [`@container (min-width: ${LARGE}px)`]: {
+          [`&`]: {
+            display: "grid",
+            gridTemplateColumns: "1fr 1fr 1fr"
+          }
+        },
+        [`@container (max-width: ${LARGE - 1}px)`]: {
+          paddingTop: token.spacing.md
+        }
+      }
+    }
+  });
 };
 export {
-  LinkColumnStyles,
-  createLinkColumns
+  createLinkColumns as default
 };
 //# sourceMappingURL=link-columns.mjs.map

package/dist/composite/footer/elements/main-section/row-links/link-columns.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"link-columns.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/link-columns.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport * as Utils from 'utilities';\nimport { BREAKPOINTS, ELEMENTS, VARIABLES, REFERENCES } from '../../../globals';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\nconst { ELEMENT_WRAPPER } = ELEMENTS;\nconst { ELEMENT_NAME } = VARIABLES;\nconst { IS_THEME_LIGHT } = REFERENCES;\n\nconst HEADLINE_ATTRIBUTE = 'data-headline';\nconst HEADLINE_ATTRIBUTE_EMPTY = 'data-empty';\nconst LINK_TYPE = 'link';\nconst HEADLINE_TYPE = 'headline';\n\ntype ColumnRow = {\n  elmentType: string;\n  title: string;\n  url?: string;\n};\n\nconst ROW_LINKS_COLUMNS_CONTAINER = 'umd-footer-row-links-columns';\nconst ROW_LINKS_COLUMN_WRAPPER = 'umd-footer-row-links-column-wrapper';\nconst ROW_LINKS_COLUMN_HEADLINE = `link-column-headline`;\nconst ROW_LINKS_COLUMN_LINKS = `link-column-fonts`;\n\nconst COLUMN_ONE_DEFAULT_LINKS = [\n  {\n    elmentType: LINK_TYPE,\n    title: 'Careers',\n    url: 'https://ejobs.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Office of Civil Rights & Sexual Misconduct',\n    url: 'https://ocrsm.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'UMD Police Department',\n    url: 'https://www.umpd.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Public Records Request',\n    url: 'https://umd.edu/administration/public-information-request',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Report Fraud and Waste',\n    url: 'https://finance.umd.edu/ethics-integrity-and-compliance-reporting',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Policies and Procedures',\n    url: 'https://umd.edu/policies-and-procedures',\n  },\n];\n\nconst COLUMN_TWO_DEFAULT_LINKS = [\n  {\n    elmentType: HEADLINE_TYPE,\n    title: 'Information for',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Prospective Undergraduate Students',\n    url: 'https://admissions.umd.edu/',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Prospective Graduate Students',\n    url: 'https://gradschool.umd.edu/',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Parents & Families',\n    url: 'https://admissions.umd.edu/persona/parent-families',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Alumni',\n    url: 'https://alumni.umd.edu/',\n  },\n];\n\nconst COLUMN_THREE_DEFAULT_LINKS = [\n  {\n    elmentType: HEADLINE_TYPE,\n    title: 'Academics',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Academic Calendars',\n    url: 'https://provost.umd.edu/node/3876',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Course Catalogs',\n    url: 'https://academiccatalog.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Libraries',\n    url: 'https://www.lib.umd.edu',\n  },\n  {\n    elmentType: LINK_TYPE,\n    title: 'Terp Portals',\n    url: 'https://testudo.umd.edu',\n  },\n];\n\n// prettier-ignore\nconst HeadlineStyles = `\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_HEADLINE}`]: typography.elements.interativeMedium,\n    },\n  })}\n\n  .${ROW_LINKS_COLUMN_HEADLINE} {\n    margin-bottom: ${token.spacing.sm};\n    font-weight: 700;\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_COLUMN_HEADLINE}[${HEADLINE_ATTRIBUTE_EMPTY}=\"true\"] {\n      display: none;\n    }\n  }\n`;\n\n// prettier-ignore\nconst LinkStyles = `\n  .${ROW_LINKS_COLUMN_LINKS}:not(:last-child) {\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  .${ROW_LINKS_COLUMN_LINKS} > * {\n    margin-bottom: ${token.spacing.sm};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_LINKS} a`]: typography.sans.smaller,\n    },\n  })}\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ROW_LINKS_COLUMN_LINKS} a`]:\n      animation.line.slideUnderWhite\n    },\n  })}\n\n  .${ROW_LINKS_COLUMN_LINKS} a,\n  .${ROW_LINKS_COLUMN_LINKS} span {\n    color: ${token.color.gray.light};\n  }\n\n  ${Utils.theme.convertJSSObjectToStyles({\n    styleObj: {\n      [`.${ELEMENT_WRAPPER}${IS_THEME_LIGHT} .${ROW_LINKS_COLUMN_LINKS} a`]:\n      animation.line.slideUnderBlack\n    },\n  })}\n`;\n\n// prettier-ignore\nconst ColumnWrapper = `\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr;\n      gap: 0 ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (max-width: ${MEDIUM - 1}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER}:not(:last-child) {\n      margin-bottom: ${token.spacing.lg};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} {\n      padding-right: ${token.spacing.xs};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER}:not(:first-child) {\n      margin-left: ${token.spacing.lg};\n      padding-left: ${token.spacing.lg};\n      border-left: 1px solid ${token.color.gray.dark};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMN_WRAPPER} > p {\n      grid-column: 1 / span 2;\n    }\n  }\n`\n\n// prettier-ignore\nexport const LinkColumnStyles = `\n  @container ${ELEMENT_NAME} (max-width: ${LARGE - 1}px) {\n    .${ROW_LINKS_COLUMNS_CONTAINER} {\n      padding-top: ${token.spacing.md};\n    }\n  }\n\n  @container ${ELEMENT_NAME} (min-width: ${LARGE}px) {\n    .${ROW_LINKS_COLUMNS_CONTAINER} {\n      display: grid;\n      grid-template-columns: 1fr 1fr 1fr;\n    }\n  }\n\n  ${ColumnWrapper}\n  ${HeadlineStyles}\n  ${LinkStyles}\n`;\n\nconst CreateDefaultColumn = ({\n  defaultContent,\n}: {\n  defaultContent: ColumnRow[];\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);\n\n  defaultContent.forEach((row) => {\n    if (row.elmentType === LINK_TYPE) {\n      if (row.url) {\n        const wrapper = document.createElement('div');\n        const link = document.createElement('a');\n        const span = document.createElement('span');\n\n        span.textContent = row.title;\n        link.appendChild(span);\n\n        link.href = row.url;\n        link.target = '_blank';\n        link.rel = 'noopener noreferrer';\n\n        wrapper.classList.add(ROW_LINKS_COLUMN_LINKS);\n        wrapper.appendChild(link);\n        container.appendChild(wrapper);\n      }\n    } else if (row.elmentType === HEADLINE_TYPE) {\n      const headline = document.createElement('p');\n      headline.textContent = row.title;\n      headline.classList.add(ROW_LINKS_COLUMN_HEADLINE);\n      container.appendChild(headline);\n    }\n  });\n\n  return container;\n};\n\nconst CreateSlotColumn = ({\n  slot,\n  hasHeadlines,\n  isColumnOne,\n}: {\n  slot: HTMLElement;\n  hasHeadlines: boolean;\n  isColumnOne: boolean;\n}) => {\n  const container = document.createElement('div');\n\n  container.classList.add(ROW_LINKS_COLUMN_WRAPPER);\n\n  const wrapper = document.createElement('div');\n  const links = Array.from(slot.querySelectorAll('a')).map((link) => {\n    const linkWrapper = document.createElement('div');\n    linkWrapper.classList.add(ROW_LINKS_COLUMN_LINKS);\n    Utils.markup.modify.animationLinkSpan({ element: link });\n    linkWrapper.appendChild(link);\n    return linkWrapper;\n  });\n\n  if (hasHeadlines) {\n    const headline = slot.getAttribute(HEADLINE_ATTRIBUTE) as string;\n    const headlineElement = document.createElement('p');\n    headlineElement.classList.add(ROW_LINKS_COLUMN_HEADLINE);\n    headlineElement.innerHTML = headline;\n\n    if (!headline && !isColumnOne) {\n      headlineElement.setAttribute(HEADLINE_ATTRIBUTE_EMPTY, 'true');\n      wrapper.appendChild(headlineElement);\n    }\n\n    if (headline) {\n      wrapper.appendChild(headlineElement);\n    }\n  }\n\n  links.forEach((link) => {\n    wrapper.appendChild(link);\n  });\n\n  container.appendChild(wrapper);\n\n  return container;\n};\n\nexport interface slotColumnsProps {\n  slotColumns?: HTMLSlotElement[];\n}\n\nexport const createLinkColumns = (props: slotColumnsProps) => {\n  const { slotColumns } = props;\n  const container = document.createElement('div');\n\n  if (slotColumns) {\n    const hasHeadlines = slotColumns.some((slot) =>\n      slot.hasAttribute(HEADLINE_ATTRIBUTE),\n    );\n\n    slotColumns.forEach((slot, index) => {\n      const slotToAppend = CreateSlotColumn({\n        slot,\n        hasHeadlines,\n        isColumnOne: index === 0,\n      });\n      if (slotToAppend) container.appendChild(slotToAppend);\n    });\n\n    if (hasHeadlines) {\n      setTimeout(() => {\n        // To Do - refactor to load event\n        const headlines = Array.from(\n          container.querySelectorAll(`.${ROW_LINKS_COLUMN_HEADLINE}`),\n        ) as HTMLDivElement[];\n\n        const renderedHeadlinesSize = headlines.reduce((acc, headline) => {\n          return headline.offsetHeight > acc ? headline.offsetHeight : acc;\n        }, 10);\n\n        headlines.forEach((headline) => {\n          headline.style.height = `${renderedHeadlinesSize}px`;\n        });\n      }, 200);\n    }\n  } else {\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_ONE_DEFAULT_LINKS }),\n    );\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_TWO_DEFAULT_LINKS }),\n    );\n    container.appendChild(\n      CreateDefaultColumn({ defaultContent: COLUMN_THREE_DEFAULT_LINKS }),\n    );\n  }\n\n  container.classList.add(ROW_LINKS_COLUMNS_CONTAINER);\n\n  return container;\n};\n"],"names":["Utils.theme.convertJSSObjectToStyles","Utils.markup.modify.animationLinkSpan"],"mappings":";;;;AAQA,MAAM,EAAE,QAAQ,MAAA,IAAU;AAC1B,MAAM,EAAE,oBAAoB;AAC5B,MAAM,EAAE,iBAAiB;AACzB,MAAM,EAAE,mBAAmB;AAE3B,MAAM,qBAAqB;AAC3B,MAAM,2BAA2B;AACjC,MAAM,YAAY;AAClB,MAAM,gBAAgB;AAQtB,MAAM,8BAA8B;AACpC,MAAM,2BAA2B;AACjC,MAAM,4BAA4B;AAClC,MAAM,yBAAyB;AAE/B,MAAM,2BAA2B;AAAA,EAC/B;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAEA,MAAM,2BAA2B;AAAA,EAC/B;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAEA,MAAM,6BAA6B;AAAA,EACjC;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,EAAA;AAAA,EAET;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAAA,EAEP;AAAA,IACE,YAAY;AAAA,IACZ,OAAO;AAAA,IACP,KAAK;AAAA,EAAA;AAET;AAGA,MAAM,iBAAiB;AAAA,IACnBA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,yBAAyB,EAAE,GAAG,WAAW,SAAS;AAAA,EAAA;AAE3D,CAAC,CAAC;AAAA;AAAA,KAEC,yBAAyB;AAAA,qBACT,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAItB,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,yBAAyB,IAAI,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAO5D,MAAM,aAAa;AAAA,KACd,sBAAsB;AAAA,qBACN,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,KAGhC,sBAAsB;AAAA,qBACN,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAGjCA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,sBAAsB,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAEtD,CAAC,CAAC;AAAA;AAAA,IAEAA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,sBAAsB,IAAI,GAC/B,UAAU,KAAK;AAAA,EAAA;AAEnB,CAAC,CAAC;AAAA;AAAA,KAEC,sBAAsB;AAAA,KACtB,sBAAsB;AAAA,aACd,MAAM,MAAM,KAAK,KAAK;AAAA;AAAA;AAAA,IAG/BA,yBAAqC;AAAA,EACrC,UAAU;AAAA,IACR,CAAC,IAAI,eAAe,GAAG,cAAc,KAAK,sBAAsB,IAAI,GACpE,UAAU,KAAK;AAAA,EAAA;AAEnB,CAAC,CAAC;AAAA;AAIJ,MAAM,gBAAgB;AAAA,eACP,YAAY,gBAAgB,MAAM,uBAAuB,KAAK;AAAA,OACtE,wBAAwB;AAAA;AAAA;AAAA,eAGhB,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIhB,YAAY,gBAAgB,SAAS,CAAC;AAAA,OAC9C,wBAAwB;AAAA,uBACR,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIxB,YAAY,gBAAgB,KAAK;AAAA,OACzC,wBAAwB;AAAA,uBACR,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAIxB,YAAY,gBAAgB,KAAK;AAAA,OACzC,wBAAwB;AAAA,qBACV,MAAM,QAAQ,EAAE;AAAA,sBACf,MAAM,QAAQ,EAAE;AAAA,+BACP,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA;AAAA,eAIrC,YAAY,gBAAgB,MAAM,uBAAuB,KAAK;AAAA,OACtE,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAOxB,MAAM,mBAAmB;AAAA,eACjB,YAAY,gBAAgB,QAAQ,CAAC;AAAA,OAC7C,2BAA2B;AAAA,qBACb,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAAA,eAItB,YAAY,gBAAgB,KAAK;AAAA,OACzC,2BAA2B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAM9B,aAAa;AAAA,IACb,cAAc;AAAA,IACd,UAAU;AAAA;AAGd,MAAM,sBAAsB,CAAC;AAAA,EAC3B;AACF,MAEM;AACJ,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,UAAU,IAAI,wBAAwB;AAEhD,iBAAe,QAAQ,CAAC,QAAQ;AAC9B,QAAI,IAAI,eAAe,WAAW;AAChC,UAAI,IAAI,KAAK;AACX,cAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,cAAM,OAAO,SAAS,cAAc,GAAG;AACvC,cAAM,OAAO,SAAS,cAAc,MAAM;AAE1C,aAAK,cAAc,IAAI;AACvB,aAAK,YAAY,IAAI;AAErB,aAAK,OAAO,IAAI;AAChB,aAAK,SAAS;AACd,aAAK,MAAM;AAEX,gBAAQ,UAAU,IAAI,sBAAsB;AAC5C,gBAAQ,YAAY,IAAI;AACxB,kBAAU,YAAY,OAAO;AAAA,MAC/B;AAAA,IACF,WAAW,IAAI,eAAe,eAAe;AAC3C,YAAM,WAAW,SAAS,cAAc,GAAG;AAC3C,eAAS,cAAc,IAAI;AAC3B,eAAS,UAAU,IAAI,yBAAyB;AAChD,gBAAU,YAAY,QAAQ;AAAA,IAChC;AAAA,EACF,CAAC;AAED,SAAO;AACT;AAEA,MAAM,mBAAmB,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AACF,MAIM;AACJ,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,YAAU,UAAU,IAAI,wBAAwB;AAEhD,QAAM,UAAU,SAAS,cAAc,KAAK;AAC5C,QAAM,QAAQ,MAAM,KAAK,KAAK,iBAAiB,GAAG,CAAC,EAAE,IAAI,CAAC,SAAS;AACjE,UAAM,cAAc,SAAS,cAAc,KAAK;AAChD,gBAAY,UAAU,IAAI,sBAAsB;AAChDC,sBAAsC,EAAE,SAAS,MAAM;AACvD,gBAAY,YAAY,IAAI;AAC5B,WAAO;AAAA,EACT,CAAC;AAED,MAAI,cAAc;AAChB,UAAM,WAAW,KAAK,aAAa,kBAAkB;AACrD,UAAM,kBAAkB,SAAS,cAAc,GAAG;AAClD,oBAAgB,UAAU,IAAI,yBAAyB;AACvD,oBAAgB,YAAY;AAE5B,QAAI,CAAC,YAAY,CAAC,aAAa;AAC7B,sBAAgB,aAAa,0BAA0B,MAAM;AAC7D,cAAQ,YAAY,eAAe;AAAA,IACrC;AAEA,QAAI,UAAU;AACZ,cAAQ,YAAY,eAAe;AAAA,IACrC;AAAA,EACF;AAEA,QAAM,QAAQ,CAAC,SAAS;AACtB,YAAQ,YAAY,IAAI;AAAA,EAC1B,CAAC;AAED,YAAU,YAAY,OAAO;AAE7B,SAAO;AACT;AAMO,MAAM,oBAAoB,CAAC,UAA4B;AAC5D,QAAM,EAAE,gBAAgB;AACxB,QAAM,YAAY,SAAS,cAAc,KAAK;AAE9C,MAAI,aAAa;AACf,UAAM,eAAe,YAAY;AAAA,MAAK,CAAC,SACrC,KAAK,aAAa,kBAAkB;AAAA,IAAA;AAGtC,gBAAY,QAAQ,CAAC,MAAM,UAAU;AACnC,YAAM,eAAe,iBAAiB;AAAA,QACpC;AAAA,QACA;AAAA,QACA,aAAa,UAAU;AAAA,MAAA,CACxB;AACD,UAAI,aAAc,WAAU,YAAY,YAAY;AAAA,IACtD,CAAC;AAED,QAAI,cAAc;AAChB,iBAAW,MAAM;AAEf,cAAM,YAAY,MAAM;AAAA,UACtB,UAAU,iBAAiB,IAAI,yBAAyB,EAAE;AAAA,QAAA;AAG5D,cAAM,wBAAwB,UAAU,OAAO,CAAC,KAAK,aAAa;AAChE,iBAAO,SAAS,eAAe,MAAM,SAAS,eAAe;AAAA,QAC/D,GAAG,EAAE;AAEL,kBAAU,QAAQ,CAAC,aAAa;AAC9B,mBAAS,MAAM,SAAS,GAAG,qBAAqB;AAAA,QAClD,CAAC;AAAA,MACH,GAAG,GAAG;AAAA,IACR;AAAA,EACF,OAAO;AACL,cAAU;AAAA,MACR,oBAAoB,EAAE,gBAAgB,yBAAA,CAA0B;AAAA,IAAA;AAElE,cAAU;AAAA,MACR,oBAAoB,EAAE,gBAAgB,yBAAA,CAA0B;AAAA,IAAA;AAElE,cAAU;AAAA,MACR,oBAAoB,EAAE,gBAAgB,2BAAA,CAA4B;AAAA,IAAA;AAAA,EAEtE;AAEA,YAAU,UAAU,IAAI,2BAA2B;AAEnD,SAAO;AACT;"}
+{"version":3,"file":"link-columns.mjs","sources":["../../../../../../source/composite/footer/elements/main-section/row-links/link-columns.ts"],"sourcesContent":["import {\n  animation,\n  token,\n  typography,\n} from '@universityofmaryland/web-styles-library';\nimport { wrapLinkForAnimation } from '@universityofmaryland/web-utilities-library/animation';\nimport { ElementModel } from 'model';\nimport { BREAKPOINTS } from '../../../globals';\nimport { BaseProps } from '../../../_types';\nimport { type ElementVisual } from '../../../../../_types';\n\nconst { MEDIUM, LARGE } = BREAKPOINTS;\n\ntype ColumnRow = {\n  elmentType: string;\n  title: string;\n  url?: string;\n};\n\nconst COLUMN_ONE_DEFAULT_LINKS: ColumnRow[] = [\n  { elmentType: 'link', title: 'Careers', url: 'https://ejobs.umd.edu' },\n  {\n    elmentType: 'link',\n    title: 'Office of Civil Rights & Sexual Misconduct',\n    url: 'https://ocrsm.umd.edu',\n  },\n  {\n    elmentType: 'link',\n    title: 'UMD Police Department',\n    url: 'https://www.umpd.umd.edu',\n  },\n  {\n    elmentType: 'link',\n    title: 'Public Records Request',\n    url: 'https://umd.edu/administration/public-information-request',\n  },\n  {\n    elmentType: 'link',\n    title: 'Report Fraud and Waste',\n    url: 'https://finance.umd.edu/ethics-integrity-and-compliance-reporting',\n  },\n  {\n    elmentType: 'link',\n    title: 'Policies and Procedures',\n    url: 'https://umd.edu/policies-and-procedures',\n  },\n];\n\nconst COLUMN_TWO_DEFAULT_LINKS: ColumnRow[] = [\n  { elmentType: 'headline', title: 'Information for' },\n  {\n    elmentType: 'link',\n    title: 'Prospective Undergraduate Students',\n    url: 'https://admissions.umd.edu/',\n  },\n  {\n    elmentType: 'link',\n    title: 'Prospective Graduate Students',\n    url: 'https://gradschool.umd.edu/',\n  },\n  {\n    elmentType: 'link',\n    title: 'Parents & Families',\n    url: 'https://admissions.umd.edu/persona/parent-families',\n  },\n  { elmentType: 'link', title: 'Alumni', url: 'https://alumni.umd.edu/' },\n];\n\nconst COLUMN_THREE_DEFAULT_LINKS: ColumnRow[] = [\n  { elmentType: 'headline', title: 'Academics' },\n  {\n    elmentType: 'link',\n    title: 'Academic Calendars',\n    url: 'https://provost.umd.edu/node/3876',\n  },\n  {\n    elmentType: 'link',\n    title: 'Course Catalogs',\n    url: 'https://academiccatalog.umd.edu',\n  },\n  { elmentType: 'link', title: 'Libraries', url: 'https://www.lib.umd.edu' },\n  {\n    elmentType: 'link',\n    title: 'Terp Portals',\n    url: 'https://testudo.umd.edu',\n  },\n];\n\nconst createLinkColumn = (\n  props: slotColumnsProps,\n  children: ElementVisual[],\n) => {\n  const { isThemeLight } = props;\n\n  return ElementModel.createDiv({\n    className: 'link-column-fonts',\n    children: children,\n    elementStyles: {\n      element: {\n        marginBottom: token.spacing.sm,\n\n        ['& > *']: {\n          marginBottom: token.spacing.sm,\n        },\n\n        ['& a']: {\n          ...animation.line.slideUnderWhite,\n          ...typography.sans.smaller,\n\n          ...(isThemeLight && {\n            ...animation.line.slideUnderBlack,\n          }),\n        },\n\n        ['& a, & span, & p']: {\n          color: token.color.gray.light,\n\n          ...(isThemeLight && {\n            color: token.color.gray.dark,\n          }),\n        },\n\n        [`@container (max-width: ${MEDIUM - 1}px)`]: {\n          ['&:last-child']: {\n            marginBottom: 0,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createLinkColumnFontsLink = (element: HTMLElement) => {\n  return ElementModel.create({\n    element: element,\n    className: `link-column-fonts-link`,\n    elementStyles: {\n      element: {\n        [`&p`]: {\n          gridColumn: '1 / span 2',\n        },\n      },\n    },\n  });\n};\n\nconst createDefaultColumn = (\n  props: slotColumnsProps,\n  defaultContent: ColumnRow[],\n): ElementVisual => {\n  const children: ElementVisual[] = defaultContent\n    .map((row) => {\n      if (row.elmentType === 'link' && row.url) {\n        const link = document.createElement('a');\n        const span = document.createElement('span');\n        const columnLinkChildren = [createLinkColumnFontsLink(link)];\n\n        span.textContent = row.title;\n        link.appendChild(span);\n        link.href = row.url;\n        link.target = '_blank';\n        link.rel = 'noopener noreferrer';\n\n        return createLinkColumn(props, columnLinkChildren);\n      }\n\n      if (row.elmentType === 'headline') {\n        const headline = document.createElement('p');\n\n        headline.textContent = row.title;\n\n        return createLinkColumnHeadline(headline);\n      }\n\n      return undefined as unknown as ElementVisual;\n    })\n    .filter(Boolean) as ElementVisual[];\n\n  return createRowLinksColumnWrapper({ children: children });\n};\n\nconst createRowLinksColumnWrapper = ({\n  children,\n}: {\n  children: ElementVisual[];\n}) => {\n  return ElementModel.createDiv({\n    className: 'umd-footer-row-links-column-wrapper',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${MEDIUM}px) and (max-width: ${LARGE}px)`]: {\n          display: 'grid',\n          gridTemplateColumns: '1fr 1fr',\n          gap: `0 ${token.spacing.md}`,\n        },\n\n        [`@container (max-width: ${MEDIUM}px)`]: {\n          ['&:not(:last-child)']: {\n            marginBottom: token.spacing.lg,\n          },\n        },\n\n        [`@container (min-width: ${LARGE}px)`]: {\n          paddingRight: token.spacing.xs,\n          minWidth: '240px',\n\n          [`&:not(:first-child)`]: {\n            marginLeft: token.spacing.lg,\n            paddingLeft: token.spacing.lg,\n            borderLeft: `1px solid ${token.color.gray.dark}`,\n          },\n        },\n      },\n    },\n  });\n};\n\nconst createSlotColumn = ({\n  props,\n  slot,\n  slotHasHeadline,\n  isColumnOne,\n}: {\n  props: slotColumnsProps;\n  slot: HTMLElement;\n  slotHasHeadline: boolean;\n  isColumnOne: boolean;\n}): ElementVisual => {\n  const linkChildren: ElementVisual[] = Array.from(\n    slot.querySelectorAll('a'),\n  ).map((link) => {\n    wrapLinkForAnimation({ element: link });\n\n    const slotColumnChild = [createLinkColumnFontsLink(link)];\n\n    return createLinkColumn(props, slotColumnChild);\n  });\n\n  const wrapperChildren: ElementVisual[] = [];\n\n  if (slotHasHeadline) {\n    const headlineAttr = slot.getAttribute('data-headline') ?? '';\n    const headline = document.createElement('p');\n\n    headline.innerHTML = headlineAttr;\n\n    if (!headlineAttr && !isColumnOne) {\n      headline.setAttribute('data-empty', 'true');\n    }\n\n    wrapperChildren.push(createLinkColumnHeadline(headline));\n  }\n\n  wrapperChildren.push(...linkChildren);\n\n  return createRowLinksColumnWrapper({ children: wrapperChildren });\n};\n\nconst createLinkColumnHeadline = (element: HTMLElement) => {\n  return ElementModel.create({\n    element: element,\n    className: 'link-column-headline',\n    elementStyles: {\n      element: {\n        ...typography.elements.interativeMedium,\n        marginBottom: token.spacing.sm,\n        fontWeight: 700,\n        gridColumn: '1 / span 2',\n      },\n    },\n  });\n};\n\nexport interface slotColumnsProps extends BaseProps {\n  slotColumns?: HTMLSlotElement[];\n}\n\nexport default (props: slotColumnsProps): ElementVisual => {\n  const { slotColumns } = props;\n\n  let children: ElementVisual[];\n\n  if (slotColumns) {\n    const hasHeadlines = slotColumns.some((slot) =>\n      slot.hasAttribute('data-headline'),\n    );\n\n    children = slotColumns.map((slot, index) => {\n      const slotHasHeadline = slot.hasAttribute('data-headline');\n      return createSlotColumn({\n        props,\n        slot,\n        slotHasHeadline,\n        isColumnOne: index === 0,\n      });\n    });\n\n    if (hasHeadlines) {\n      setTimeout(() => {\n        const headlines = Array.from(\n          document.querySelectorAll(`.${'link-column-headline'}`),\n        ) as HTMLElement[];\n        const renderedHeadlinesSize = headlines.reduce(\n          (acc, h) => Math.max(acc, h.offsetHeight),\n          10,\n        );\n        headlines.forEach(\n          (h) => (h.style.height = `${renderedHeadlinesSize}px`),\n        );\n      }, 200);\n    }\n  } else {\n    children = [\n      createDefaultColumn(props, COLUMN_ONE_DEFAULT_LINKS),\n      createDefaultColumn(props, COLUMN_TWO_DEFAULT_LINKS),\n      createDefaultColumn(props, COLUMN_THREE_DEFAULT_LINKS),\n    ];\n  }\n\n  return ElementModel.createDiv({\n    className: 'umd-footer-row-links-columns',\n    children,\n    elementStyles: {\n      element: {\n        [`@container (min-width: ${LARGE}px)`]: {\n          [`&`]: {\n            display: 'grid',\n            gridTemplateColumns: '1fr 1fr 1fr',\n          },\n        },\n\n        [`@container (max-width: ${LARGE - 1}px)`]: {\n          paddingTop: token.spacing.md,\n        },\n      },\n    },\n  });\n};\n"],"names":["ElementModel.createDiv","ElementModel.create"],"mappings":"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"}

package/dist/composite/footer/elements/main-section/row-logo/contact.d.ts

@@ -1,5 +1,6 @@
 import { SocialCampaignColumnsProps } from '../social';
-export declare const ContactContainerStyles: string;
+import { BaseProps } from '../../../_types';
+import { ElementVisual } from '../../../../../_types';
 interface HeadlineProps {
     slotHeadline: HTMLSlotElement;
 }
@@ -9,8 +10,8 @@ interface AddressProps {
 interface LinksProps {
     slotContentLinks: HTMLSlotElement;
 }
-export interface ContactProps extends SocialCampaignColumnsProps, AddressProps, HeadlineProps, LinksProps {
+export interface ContactProps extends BaseProps, SocialCampaignColumnsProps, AddressProps, HeadlineProps, LinksProps {
 }
-export declare const createContact: (props: ContactProps) => HTMLDivElement;
-export {};
+declare const _default: (props: ContactProps) => ElementVisual;
+export default _default;
 //# sourceMappingURL=contact.d.ts.map

package/dist/composite/footer/elements/main-section/row-logo/contact.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/contact.ts"],"names":[],"mappings":"AAMA,OAAO,EAGL,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AA6JnB,eAAO,MAAM,sBAAsB,QAyBlC,CAAC;AAYF,UAAU,aAAa;IACrB,YAAY,EAAE,eAAe,CAAC;CAC/B;AAkBD,UAAU,YAAY;IACpB,WAAW,EAAE,eAAe,CAAC;CAC9B;AAmBD,UAAU,UAAU;IAClB,gBAAgB,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,YACf,SAAQ,0BAA0B,EAChC,YAAY,EACZ,aAAa,EACb,UAAU;CAAG;AAEjB,eAAO,MAAM,aAAa,GAAI,OAAO,YAAY,mBA6ChD,CAAC"}
+{"version":3,"file":"contact.d.ts","sourceRoot":"","sources":["../../../../../../source/composite/footer/elements/main-section/row-logo/contact.ts"],"names":[],"mappings":"AAMA,OAAoC,EAClC,KAAK,0BAA0B,EAChC,MAAM,WAAW,CAAC;AAGnB,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAE3D,UAAU,aAAa;IACrB,YAAY,EAAE,eAAe,CAAC;CAC/B;AAED,UAAU,YAAY;IACpB,WAAW,EAAE,eAAe,CAAC;CAC9B;AAED,UAAU,UAAU;IAClB,gBAAgB,EAAE,eAAe,CAAC;CACnC;AAED,MAAM,WAAW,YACf,SAAQ,SAAS,EACf,0BAA0B,EAC1B,YAAY,EACZ,aAAa,EACb,UAAU;CAAG;yBAsMD,OAAO,YAAY,KAAG,aAAa;AAAnD,wBAqDE"}