@universityofmaryland/web-elements-library 1.6.17 → 1.7.0

package/dist/composite/layout/box/logo.js

@@ -1,109 +1,61 @@
 import * as token from "@universityofmaryland/web-token-library";
-import * as typography from "@universityofmaryland/web-styles-library/typography";
-import { jssToCSS } from "@universityofmaryland/web-utilities-library/styles";
-const ATTRIBUTE_THEME = "theme";
-const ATTRIBUTE_BORDER = "border";
-const THEME_DARK = "dark";
-const ELEMENT_NAME = "umd-logo-block";
-const ELEMENT_LOGO_BLOCK_CONTAINER = "logo-block-container";
-const ELEMENT_LOGO_BLOCK_ASSET = "logo-block-asset";
-const ELEMENT_LOGO_BLOCK_TEXT = "logo-block-text";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const IS_BORDER = `[${ATTRIBUTE_BORDER}]`;
-const OVERWRITE_THEME_DARK_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_ASSET}`;
-const OVERWRITE_THEME_DARK_TEXT = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_TEXT}`;
-const OVERWRITE_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;
-const OVERWRITE_THEME_DARK_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;
-const VariantThemeStyles = `
-  ${OVERWRITE_THEME_DARK_ASSET} {
-    background-color: ${token.color.gray.darker};
-    padding: ${token.spacing.xl};
-  }
-
-  ${OVERWRITE_THEME_DARK_BORDER_ASSET} {
-    border: 1px solid ${token.color.gray.dark};
-  }
-
-  ${OVERWRITE_THEME_DARK_TEXT},
-  ${OVERWRITE_THEME_DARK_TEXT} * {
-    color: ${token.color.white};
-  };
-`;
-const VariantBorderStyles = `
-  ${OVERWRITE_BORDER_ASSET} {
-    border: 1px solid ${token.color.gray.light};
-    padding: ${token.spacing.xl};
-    height: 100%;
-  }
-`;
-const TextStyles = `
-  .${ELEMENT_LOGO_BLOCK_TEXT},
-  .${ELEMENT_LOGO_BLOCK_TEXT} * {
-    color: ${token.color.gray.darker};
-  }
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_LOGO_BLOCK_TEXT}`]: typography.sans.min
-  }
-})}
-
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_LOGO_BLOCK_TEXT} *`]: typography.sans.min
-  }
-})}
-
-  .${ELEMENT_LOGO_BLOCK_TEXT} a:hover,
-  .${ELEMENT_LOGO_BLOCK_TEXT} a:focus {
-    text-decoration: underline;
-   }
-`;
-const STYLES_LOGO_BLOCK_ELEMENT = `
-  .${ELEMENT_LOGO_BLOCK_CONTAINER} {
-    container: ${ELEMENT_NAME} / inline-size;
-    height: 100%;
-  }
-
-  .${ELEMENT_LOGO_BLOCK_ASSET} {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .${ELEMENT_LOGO_BLOCK_ASSET} > * {
-    max-height: 50px;
-    max-width: 150px;
-    display: flex;
-  }
-
-  .${ELEMENT_LOGO_BLOCK_ASSET} img {
-    object-fit: contain;
-  }
-
-  .${ELEMENT_LOGO_BLOCK_ASSET} + * {
-    margin-top: ${token.spacing.min};
-  }
-
-  ${TextStyles}
-  ${VariantBorderStyles}
-  ${VariantThemeStyles}
-`;
+import * as Styles from "@universityofmaryland/web-styles-library";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
 const CreateBoxLogoElement = (element) => {
   const { isThemeDark, image, text, isBordered = false } = element;
-  const elementContainer = document.createElement("div");
-  const assetContainer = document.createElement("div");
-  assetContainer.appendChild(image);
-  assetContainer.classList.add(ELEMENT_LOGO_BLOCK_ASSET);
-  elementContainer.classList.add(ELEMENT_LOGO_BLOCK_CONTAINER);
-  if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  if (isBordered) elementContainer.setAttribute(ATTRIBUTE_BORDER, "");
-  elementContainer.appendChild(assetContainer);
-  if (text) {
-    text.classList.add(ELEMENT_LOGO_BLOCK_TEXT);
-    elementContainer.appendChild(text);
-  }
-  return { element: elementContainer, styles: STYLES_LOGO_BLOCK_ELEMENT };
+  const createText = () => {
+    if (!text) {
+      console.warn("CreateBoxLogoElement: text element is not provided");
+      return null;
+    }
+    return new ElementBuilder(text).withClassName("logo-block-text").styled(Styles.typography.sans.min).withStyles({
+      element: {
+        color: token.color.gray.darker,
+        ...isThemeDark && { color: token.color.white },
+        "& *": {
+          ...Styles.typography.sans.min,
+          color: token.color.gray.darker,
+          ...isThemeDark && { color: token.color.white }
+        },
+        "& a:hover, & a:focus": {
+          textDecoration: "underline"
+        }
+      }
+    }).build();
+  };
+  const assetBuilder = new ElementBuilder().withClassName("logo-block-asset").withChild(image).withStyles({
+    element: {
+      display: "flex",
+      justifyContent: "center",
+      alignItems: "center",
+      ...isBordered && {
+        border: `1px solid ${token.color.gray.light}`,
+        ...isThemeDark && { border: `1px solid ${token.color.gray.dark}` },
+        height: "100%"
+      },
+      ...isThemeDark && {
+        backgroundColor: token.color.gray.darker
+      },
+      ...(isBordered || isThemeDark) && { padding: token.spacing.xl },
+      "& > *": {
+        maxHeight: "50px",
+        maxWidth: "150px",
+        display: "flex"
+      },
+      "& img": {
+        objectFit: "contain"
+      }
+    },
+    siblingAfter: {
+      marginTop: token.spacing.min
+    }
+  });
+  return new ElementBuilder().withClassName("logo-block-container").withStyles({
+    element: {
+      containerType: "inline-size",
+      height: "100%"
+    }
+  }).withChild(assetBuilder).withChild(createText()).build();
 };
 const createCompositeLayoutBoxLogo = CreateBoxLogoElement;
 export {

package/dist/composite/layout/box/logo.js.map

@@ -1 +1 @@
-{"version":3,"file":"logo.js","sources":["../../../../source/composite/layout/box/logo.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as typography from '@universityofmaryland/web-styles-library/typography';\nimport { jssToCSS } from '@universityofmaryland/web-utilities-library/styles';\n\nexport type TypeLogoRequirements = {\n  isBordered?: boolean;\n  isThemeDark?: boolean;\n  image: HTMLElement;\n  text?: HTMLElement | null;\n};\n\nconst ATTRIBUTE_THEME = 'theme';\nconst ATTRIBUTE_BORDER = 'border';\nconst THEME_DARK = 'dark';\n\nconst ELEMENT_NAME = 'umd-logo-block';\nconst ELEMENT_LOGO_BLOCK_CONTAINER = 'logo-block-container';\nconst ELEMENT_LOGO_BLOCK_ASSET = 'logo-block-asset';\nconst ELEMENT_LOGO_BLOCK_TEXT = 'logo-block-text';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\nconst IS_BORDER = `[${ATTRIBUTE_BORDER}]`;\n\nconst OVERWRITE_THEME_DARK_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_ASSET}`;\nconst OVERWRITE_THEME_DARK_TEXT = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK} .${ELEMENT_LOGO_BLOCK_TEXT}`;\n\nconst OVERWRITE_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;\nconst OVERWRITE_THEME_DARK_BORDER_ASSET = `.${ELEMENT_LOGO_BLOCK_CONTAINER}${IS_THEME_DARK}${IS_BORDER} .${ELEMENT_LOGO_BLOCK_ASSET}`;\n\n// prettier-ignore\nconst VariantThemeStyles = `\n  ${OVERWRITE_THEME_DARK_ASSET} {\n    background-color: ${token.color.gray.darker};\n    padding: ${token.spacing.xl};\n  }\n\n  ${OVERWRITE_THEME_DARK_BORDER_ASSET} {\n    border: 1px solid ${token.color.gray.dark};\n  }\n\n  ${OVERWRITE_THEME_DARK_TEXT},\n  ${OVERWRITE_THEME_DARK_TEXT} * {\n    color: ${token.color.white};\n  };\n`;\n\n// prettier-ignore\nconst VariantBorderStyles = `\n  ${OVERWRITE_BORDER_ASSET} {\n    border: 1px solid ${token.color.gray.light};\n    padding: ${token.spacing.xl};\n    height: 100%;\n  }\n`;\n\n// prettier-ignore\nconst TextStyles = `\n  .${ELEMENT_LOGO_BLOCK_TEXT},\n  .${ELEMENT_LOGO_BLOCK_TEXT} * {\n    color: ${token.color.gray.darker};\n  }\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_LOGO_BLOCK_TEXT}`]: typography.sans.min,\n    },\n  })}\n\n  ${jssToCSS({\n    styleObj: {\n      [`.${ELEMENT_LOGO_BLOCK_TEXT} *`]: typography.sans.min,\n    },\n  })}\n\n  .${ELEMENT_LOGO_BLOCK_TEXT} a:hover,\n  .${ELEMENT_LOGO_BLOCK_TEXT} a:focus {\n    text-decoration: underline;\n   }\n`;\n\n// prettier-ignore\nconst STYLES_LOGO_BLOCK_ELEMENT = `\n  .${ELEMENT_LOGO_BLOCK_CONTAINER} {\n    container: ${ELEMENT_NAME} / inline-size;\n    height: 100%;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} {\n    display: flex;\n    justify-content: center;\n    align-items: center;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} > * {\n    max-height: 50px;\n    max-width: 150px;\n    display: flex;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} img {\n    object-fit: contain;\n  }\n\n  .${ELEMENT_LOGO_BLOCK_ASSET} + * {\n    margin-top: ${token.spacing.min};\n  }\n\n  ${TextStyles}\n  ${VariantBorderStyles}\n  ${VariantThemeStyles}\n`;\n\nconst CreateBoxLogoElement = (element: TypeLogoRequirements) => {\n  const { isThemeDark, image, text, isBordered = false } = element;\n\n  const elementContainer = document.createElement('div');\n  const assetContainer = document.createElement('div');\n\n  assetContainer.appendChild(image);\n  assetContainer.classList.add(ELEMENT_LOGO_BLOCK_ASSET);\n\n  elementContainer.classList.add(ELEMENT_LOGO_BLOCK_CONTAINER);\n  if (isThemeDark) elementContainer.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n  if (isBordered) elementContainer.setAttribute(ATTRIBUTE_BORDER, '');\n  elementContainer.appendChild(assetContainer);\n\n  if (text) {\n    text.classList.add(ELEMENT_LOGO_BLOCK_TEXT);\n    elementContainer.appendChild(text);\n  }\n\n  return { element: elementContainer, styles: STYLES_LOGO_BLOCK_ELEMENT };\n};\n\nexport const createCompositeLayoutBoxLogo = CreateBoxLogoElement;\n"],"names":[],"mappings":";;;AAWA,MAAM,kBAAkB;AACxB,MAAM,mBAAmB;AACzB,MAAM,aAAa;AAEnB,MAAM,eAAe;AACrB,MAAM,+BAA+B;AACrC,MAAM,2BAA2B;AACjC,MAAM,0BAA0B;AAEhC,MAAM,gBAAgB,IAAI,eAAe,KAAK,UAAU;AACxD,MAAM,YAAY,IAAI,gBAAgB;AAEtC,MAAM,6BAA6B,IAAI,4BAA4B,GAAG,aAAa,KAAK,wBAAwB;AAChH,MAAM,4BAA4B,IAAI,4BAA4B,GAAG,aAAa,KAAK,uBAAuB;AAE9G,MAAM,yBAAyB,IAAI,4BAA4B,GAAG,SAAS,KAAK,wBAAwB;AACxG,MAAM,oCAAoC,IAAI,4BAA4B,GAAG,aAAa,GAAG,SAAS,KAAK,wBAAwB;AAGnI,MAAM,qBAAqB;AAAA,IACvB,0BAA0B;AAAA,wBACN,MAAM,MAAM,KAAK,MAAM;AAAA,eAChC,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA,IAG3B,iCAAiC;AAAA,wBACb,MAAM,MAAM,KAAK,IAAI;AAAA;AAAA;AAAA,IAGzC,yBAAyB;AAAA,IACzB,yBAAyB;AAAA,aAChB,MAAM,MAAM,KAAK;AAAA;AAAA;AAK9B,MAAM,sBAAsB;AAAA,IACxB,sBAAsB;AAAA,wBACF,MAAM,MAAM,KAAK,KAAK;AAAA,eAC/B,MAAM,QAAQ,EAAE;AAAA;AAAA;AAAA;AAM/B,MAAM,aAAa;AAAA,KACd,uBAAuB;AAAA,KACvB,uBAAuB;AAAA,aACf,MAAM,MAAM,KAAK,MAAM;AAAA;AAAA;AAAA,IAGhC,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,EAAE,GAAG,WAAW,KAAK;AAAA,EAAA;AAErD,CAAC,CAAC;AAAA;AAAA,IAEA,SAAS;AAAA,EACT,UAAU;AAAA,IACR,CAAC,IAAI,uBAAuB,IAAI,GAAG,WAAW,KAAK;AAAA,EAAA;AAEvD,CAAC,CAAC;AAAA;AAAA,KAEC,uBAAuB;AAAA,KACvB,uBAAuB;AAAA;AAAA;AAAA;AAM5B,MAAM,4BAA4B;AAAA,KAC7B,4BAA4B;AAAA,iBAChB,YAAY;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxB,wBAAwB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,KAMxB,wBAAwB;AAAA;AAAA;AAAA;AAAA,KAIxB,wBAAwB;AAAA,kBACX,MAAM,QAAQ,GAAG;AAAA;AAAA;AAAA,IAG/B,UAAU;AAAA,IACV,mBAAmB;AAAA,IACnB,kBAAkB;AAAA;AAGtB,MAAM,uBAAuB,CAAC,YAAkC;AAC9D,QAAM,EAAE,aAAa,OAAO,MAAM,aAAa,UAAU;AAEzD,QAAM,mBAAmB,SAAS,cAAc,KAAK;AACrD,QAAM,iBAAiB,SAAS,cAAc,KAAK;AAEnD,iBAAe,YAAY,KAAK;AAChC,iBAAe,UAAU,IAAI,wBAAwB;AAErD,mBAAiB,UAAU,IAAI,4BAA4B;AAC3D,MAAI,YAAa,kBAAiB,aAAa,iBAAiB,UAAU;AAC1E,MAAI,WAAY,kBAAiB,aAAa,kBAAkB,EAAE;AAClE,mBAAiB,YAAY,cAAc;AAE3C,MAAI,MAAM;AACR,SAAK,UAAU,IAAI,uBAAuB;AAC1C,qBAAiB,YAAY,IAAI;AAAA,EACnC;AAEA,SAAO,EAAE,SAAS,kBAAkB,QAAQ,0BAAA;AAC9C;AAEO,MAAM,+BAA+B;"}
+{"version":3,"file":"logo.js","sources":["../../../../source/composite/layout/box/logo.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as Styles from '@universityofmaryland/web-styles-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\n\nexport type TypeLogoRequirements = {\n  isBordered?: boolean;\n  isThemeDark?: boolean;\n  image: HTMLElement;\n  text?: HTMLElement | null;\n};\n\nconst CreateBoxLogoElement = (element: TypeLogoRequirements) => {\n  const { isThemeDark, image, text, isBordered = false } = element;\n\n  const createText = () => {\n    if (!text) {\n      console.warn('CreateBoxLogoElement: text element is not provided');\n      return null;\n    }\n\n    return new ElementBuilder(text)\n      .withClassName('logo-block-text')\n      .styled(Styles.typography.sans.min)\n      .withStyles({\n        element: {\n          color: token.color.gray.darker,\n          ...(isThemeDark && { color: token.color.white }),\n          '& *': {\n            ...Styles.typography.sans.min,\n            color: token.color.gray.darker,\n            ...(isThemeDark && { color: token.color.white }),\n          },\n          '& a:hover, & a:focus': {\n            textDecoration: 'underline',\n          },\n        },\n      })\n      .build();\n  };\n\n  const assetBuilder = new ElementBuilder()\n    .withClassName('logo-block-asset')\n    .withChild(image)\n    .withStyles({\n      element: {\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        ...(isBordered && {\n          border: `1px solid ${token.color.gray.light}`,\n          ...(isThemeDark && { border: `1px solid ${token.color.gray.dark}` }),\n          height: '100%',\n        }),\n        ...(isThemeDark && {\n          backgroundColor: token.color.gray.darker,\n        }),\n        ...((isBordered || isThemeDark) && { padding: token.spacing.xl }),\n        '& > *': {\n          maxHeight: '50px',\n          maxWidth: '150px',\n          display: 'flex',\n        },\n        '& img': {\n          objectFit: 'contain',\n        },\n      },\n      siblingAfter: {\n        marginTop: token.spacing.min,\n      },\n    });\n\n  return new ElementBuilder()\n    .withClassName('logo-block-container')\n    .withStyles({\n      element: {\n        containerType: 'inline-size',\n        height: '100%',\n      },\n    })\n    .withChild(assetBuilder)\n    .withChild(createText())\n    .build();\n};\n\nexport const createCompositeLayoutBoxLogo = CreateBoxLogoElement;\n"],"names":[],"mappings":";;;AAWA,MAAM,uBAAuB,CAAC,YAAkC;AAC9D,QAAM,EAAE,aAAa,OAAO,MAAM,aAAa,UAAU;AAEzD,QAAM,aAAa,MAAM;AACvB,QAAI,CAAC,MAAM;AACT,cAAQ,KAAK,oDAAoD;AACjE,aAAO;AAAA,IACT;AAEA,WAAO,IAAI,eAAe,IAAI,EAC3B,cAAc,iBAAiB,EAC/B,OAAO,OAAO,WAAW,KAAK,GAAG,EACjC,WAAW;AAAA,MACV,SAAS;AAAA,QACP,OAAO,MAAM,MAAM,KAAK;AAAA,QACxB,GAAI,eAAe,EAAE,OAAO,MAAM,MAAM,MAAA;AAAA,QACxC,OAAO;AAAA,UACL,GAAG,OAAO,WAAW,KAAK;AAAA,UAC1B,OAAO,MAAM,MAAM,KAAK;AAAA,UACxB,GAAI,eAAe,EAAE,OAAO,MAAM,MAAM,MAAA;AAAA,QAAM;AAAA,QAEhD,wBAAwB;AAAA,UACtB,gBAAgB;AAAA,QAAA;AAAA,MAClB;AAAA,IACF,CACD,EACA,MAAA;AAAA,EACL;AAEA,QAAM,eAAe,IAAI,eAAA,EACtB,cAAc,kBAAkB,EAChC,UAAU,KAAK,EACf,WAAW;AAAA,IACV,SAAS;AAAA,MACP,SAAS;AAAA,MACT,gBAAgB;AAAA,MAChB,YAAY;AAAA,MACZ,GAAI,cAAc;AAAA,QAChB,QAAQ,aAAa,MAAM,MAAM,KAAK,KAAK;AAAA,QAC3C,GAAI,eAAe,EAAE,QAAQ,aAAa,MAAM,MAAM,KAAK,IAAI,GAAA;AAAA,QAC/D,QAAQ;AAAA,MAAA;AAAA,MAEV,GAAI,eAAe;AAAA,QACjB,iBAAiB,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,MAEpC,IAAK,cAAc,gBAAgB,EAAE,SAAS,MAAM,QAAQ,GAAA;AAAA,MAC5D,SAAS;AAAA,QACP,WAAW;AAAA,QACX,UAAU;AAAA,QACV,SAAS;AAAA,MAAA;AAAA,MAEX,SAAS;AAAA,QACP,WAAW;AAAA,MAAA;AAAA,IACb;AAAA,IAEF,cAAc;AAAA,MACZ,WAAW,MAAM,QAAQ;AAAA,IAAA;AAAA,EAC3B,CACD;AAEH,SAAO,IAAI,eAAA,EACR,cAAc,sBAAsB,EACpC,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,QAAQ;AAAA,IAAA;AAAA,EACV,CACD,EACA,UAAU,YAAY,EACtB,UAAU,WAAA,CAAY,EACtB,MAAA;AACL;AAEO,MAAM,+BAA+B;"}

package/dist/composite/layout/image/expand.d.ts

@@ -2,9 +2,6 @@ type TypeLayoutImageExpandProps = {
     content: HTMLElement;
     image: HTMLImageElement;
 };
-export declare const createCompositeLayoutImageExpand: (props: TypeLayoutImageExpandProps) => {
-    element: HTMLDivElement;
-    styles: string;
-};
+export declare const createCompositeLayoutImageExpand: (props: TypeLayoutImageExpandProps) => import('../../../../builder/dist/index.d.ts').ElementModel<HTMLElement>;
 export {};
 //# sourceMappingURL=expand.d.ts.map

package/dist/composite/layout/image/expand.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/image/expand.ts"],"names":[],"mappings":"AASA,KAAK,0BAA0B,GAAG;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AA8TF,eAAO,MAAM,gCAAgC,UAtCJ,0BAA0B;;;CAsCK,CAAC"}
+{"version":3,"file":"expand.d.ts","sourceRoot":"","sources":["../../../../source/composite/layout/image/expand.ts"],"names":[],"mappings":"AAYA,KAAK,0BAA0B,GAAG;IAChC,OAAO,EAAE,WAAW,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC;CACzB,CAAC;AA+NF,eAAO,MAAM,gCAAgC,UA/DJ,0BAA0B,kFA+DK,CAAC"}

package/dist/composite/layout/image/expand.js

@@ -1,267 +1,165 @@
 import * as token from "@universityofmaryland/web-token-library";
 import * as layout from "@universityofmaryland/web-styles-library/layout";
-import { jssToCSS, parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { withViewTimelineAnimation, parsePixelValue } from "@universityofmaryland/web-utilities-library/styles";
 import { isScreenZoomed, isPreferredReducedMotion } from "@universityofmaryland/web-utilities-library/accessibility";
-const { spacing } = token;
-const ELEMENT_NAME = "umd-layout-image-expand";
-const ELEMENT_EXPLAND_DECLARATION = "layout-image-expand-declaration";
-const ELEMENT_EXPAND_CONTAINER = "layout-image-expand-container";
-const ELEMENT_EXPAND_IMAGE_CONTAINER = "layout-image-expand-image-container";
-const ELEMENT_EXPAND_IMAGE_POSITION = "layout-image-expand-image-position";
-const ELEMENT_EXPAND_IMAGE_SIZE = "layout-image-expand-image-size";
-const ELEMENT_EXPAND_IMAGE_OVERLAY = "layout-image-expand-image-overlay";
-const ELEMENT_EXPAND_TEXT_CONTAINER = "layout-image-expand-text-container";
-const ELEMENT_EXPAND_TEXT_LOCK = "layout-image-expand-text-lock";
-const ELEMENT_EXPAND_TEXT_ANIMATION = "layout-image-expand-text-animation";
-const TextLock = `
-  ${jssToCSS({
-  styleObj: {
-    [`.${ELEMENT_EXPAND_TEXT_LOCK}`]: layout.space.horizontal.larger
-  }
-})}
-
-  .${ELEMENT_EXPAND_TEXT_LOCK} {
-    display: flex;
-    height: 100%;
-  }
-`;
-const TextContainer = `
-  .${ELEMENT_EXPAND_TEXT_CONTAINER} {
-    position: relative;
-    padding-top: ${token.spacing.max};
-    padding-bottom: ${token.spacing.max};
-    height: 100%;
-    z-index: 9999;
-  }
-`;
-const TextAnimation = `
-  .${ELEMENT_EXPAND_TEXT_ANIMATION} {
-    width: 100vw;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_EXPAND_TEXT_ANIMATION} {
-        position: absolute;
-        top: 0;
-        height: 80vh;
-        transform: translateY(80vh);
-      }
-    }
-  }
-
-  @media (${token.media.queries.tablet.min}) {
-    @media (prefers-reduced-motion: no-preference) {
-      @supports (animation-timeline: scroll()) {
-        .${ELEMENT_EXPAND_TEXT_ANIMATION} {
-          transform: translateY(100vh);
-        }
-      }
-    }
-  }
-`;
-const ImageOverlayContainer = `
+const KEYFRAMES = `
   @keyframes img-overlay {
     from { opacity: 0; }
     to { opacity: 1; }
   }
 
-  .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background: rgba(0,0,0,0.65);
-    opacity: 1;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_EXPAND_IMAGE_OVERLAY} {
-        opacity: 1;
-        animation: img-overlay forwards;
-        animation-timeline: view();
-        animation-range-start: 70vh;
-        animation-range-end: 100vh;
-      }
-    }
-  }
-`;
-const ImageSizeContainer = `
   @keyframes img-size {
     to { width: 100%; height: 100vh; }
   }
-
-  .${ELEMENT_EXPAND_IMAGE_SIZE} {
-    overflow: hidden;
-    position: relative;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_EXPAND_IMAGE_SIZE} {
-        width: ${token.spacing.maxWidth.smallest};
-        height: 70vh;
-        animation: img-size ease-in-out forwards;
-        animation-timeline: view();
-        animation-range-start: cover;
-        animation-range-end: 200vh;
-      }
-    }
-  }
-
-  @supports not (animation-timeline: scroll()) {
-    .${ELEMENT_EXPAND_IMAGE_SIZE} {
-      height: 100%;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .${ELEMENT_EXPAND_IMAGE_SIZE} {
-      height: 100%;
-    }
-  }
 `;
-const ImagePosition = `
-  .${ELEMENT_EXPAND_IMAGE_POSITION} {
-    width: 100%;
-    margin: 0 auto;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_EXPAND_IMAGE_POSITION} {
-        display: flex;
-        justify-content: center;
-        position: sticky;
-        top: 0; 
-        animation: img-position ease-in-out forwards;
-        animation-timeline: view();
-        animation-range-start: cover;
-        animation-range-end: 200vh;
-      }
-    }
-  }
-
-  @supports not (animation-timeline: scroll()) {
-    .${ELEMENT_EXPAND_IMAGE_POSITION} {
-      height: 100%;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .${ELEMENT_EXPAND_IMAGE_POSITION} {
-      height: 100%;
+const CreateImageContainer = ({ image }) => {
+  const imageOverlay = new ElementBuilder().withClassName("layout-image-expand-image-overlay").withStyles({
+    element: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      height: "100%",
+      width: "100%",
+      background: "rgba(0,0,0,0.65)",
+      opacity: 1,
+      ...withViewTimelineAnimation({
+        animation: "img-overlay forwards",
+        animationTimeline: "view()",
+        animationRangeStart: "70vh",
+        animationRangeEnd: "100vh"
+      })
     }
-  }
-`;
-const ImageContainer = `
-  .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_EXPAND_IMAGE_CONTAINER} {
-        position: relative;
+  }).build();
+  const imageSize = new ElementBuilder().withClassName("layout-image-expand-image-size").withStyles({
+    element: {
+      overflow: "hidden",
+      position: "relative",
+      ...withViewTimelineAnimation({
+        width: token.spacing.maxWidth.smallest,
+        height: "70vh",
+        animation: "img-size ease-in-out forwards",
+        animationTimeline: "view()",
+        animationRangeStart: "cover",
+        animationRangeEnd: "200vh"
+      }),
+      "@supports not (animation-timeline: scroll())": {
+        height: "100%"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        height: "100%"
+      },
+      "& img": {
+        display: "block",
+        width: "100%",
+        height: "100%",
+        objectFit: "cover"
       }
     }
-  }
-`;
-const Container = `
-  .${ELEMENT_EXPAND_CONTAINER} {
-    height: 100%;
-    width: 100%;
-    position: relative;
-  }
-`;
-const STYLES_LAYOUT_IMAGE_EXPAND = `
-  .${ELEMENT_EXPLAND_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-    overflow: clip;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    @supports (animation-timeline: scroll()) {
-      .${ELEMENT_EXPLAND_DECLARATION} {
-        height: 180vh;
+  }).withChildren(image, imageOverlay).build();
+  const imagePosition = new ElementBuilder().withClassName("layout-image-expand-image-position").withStyles({
+    element: {
+      width: "100%",
+      margin: "0 auto",
+      ...withViewTimelineAnimation({
+        display: "flex",
+        justifyContent: "center",
+        position: "sticky",
+        top: 0,
+        animation: "img-position ease-in-out forwards",
+        animationTimeline: "view()",
+        animationRangeStart: "cover",
+        animationRangeEnd: "200vh"
+      }),
+      "@supports not (animation-timeline: scroll())": {
+        height: "100%"
+      },
+      "@media (prefers-reduced-motion: reduce)": {
+        height: "100%"
       }
     }
-  }
-
-  @media (${token.media.queries.tablet.min}) {
-    @media (prefers-reduced-motion: no-preference) {
-      @supports (animation-timeline: scroll()) {
-        .${ELEMENT_EXPLAND_DECLARATION} {
-          height: 200vh;
-        }
-      }
+  }).withChild(imageSize).build();
+  return new ElementBuilder().withClassName("layout-image-expand-image-container").withStyles({
+    element: {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      width: "100%",
+      height: "100%",
+      ...withViewTimelineAnimation({
+        position: "relative"
+      })
     }
-  }
-
-  .${ELEMENT_EXPLAND_DECLARATION} img {
-    display: block;
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  ${Container}
-  ${ImageContainer}
-  ${ImageSizeContainer}
-  ${ImagePosition}
-  ${ImageOverlayContainer}
-  ${TextAnimation}
-  ${TextContainer}
-  ${TextLock}
-`;
-const CreateImageContainer = ({ image }) => {
-  const imageContainer = document.createElement("div");
-  const imagePosition = document.createElement("div");
-  const imageSize = document.createElement("div");
-  const imageOverlay = document.createElement("div");
-  imageOverlay.classList.add(ELEMENT_EXPAND_IMAGE_OVERLAY);
-  imageSize.classList.add(ELEMENT_EXPAND_IMAGE_SIZE);
-  imageSize.appendChild(image);
-  imageSize.appendChild(imageOverlay);
-  imagePosition.classList.add(ELEMENT_EXPAND_IMAGE_POSITION);
-  imagePosition.appendChild(imageSize);
-  imageContainer.appendChild(imagePosition);
-  imageContainer.classList.add(ELEMENT_EXPAND_IMAGE_CONTAINER);
-  return imageContainer;
+  }).withChild(imagePosition).build();
 };
 const CreateTextContainer = ({ content }) => {
-  const textAnimation = document.createElement("div");
-  const textContainer = document.createElement("div");
-  const textLock = document.createElement("div");
-  textLock.classList.add(ELEMENT_EXPAND_TEXT_LOCK);
-  textLock.appendChild(content);
-  textContainer.appendChild(textLock);
-  textContainer.classList.add(ELEMENT_EXPAND_TEXT_CONTAINER);
-  textAnimation.classList.add(ELEMENT_EXPAND_TEXT_ANIMATION);
-  textAnimation.appendChild(textContainer);
-  return textAnimation;
+  const textLock = new ElementBuilder().withClassName("layout-image-expand-text-lock").withStyles({
+    element: {
+      ...layout.space.horizontal.larger,
+      display: "flex",
+      height: "100%"
+    }
+  }).withChild(content).build();
+  const textContainer = new ElementBuilder().withClassName("layout-image-expand-text-container").withStyles({
+    element: {
+      position: "relative",
+      paddingTop: token.spacing.max,
+      paddingBottom: token.spacing.max,
+      height: "100%",
+      zIndex: 9999
+    }
+  }).withChild(textLock).build();
+  return new ElementBuilder().withClassName("layout-image-expand-text-animation").withStyles({
+    element: {
+      width: "100vw",
+      ...withViewTimelineAnimation({
+        position: "absolute",
+        top: 0,
+        height: "80vh",
+        transform: "translateY(80vh)"
+      }),
+      [`@media (${token.media.queries.tablet.min})`]: {
+        ...withViewTimelineAnimation({
+          transform: "translateY(100vh)"
+        })
+      }
+    }
+  }).withChild(textContainer).build();
 };
 const CreateImageExpandElement = (props) => {
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const imageContainer = CreateImageContainer(props);
-  const textContainer = CreateTextContainer(props);
+  const imageContainerModel = CreateImageContainer(props);
+  const textContainerModel = CreateTextContainer(props);
+  let containerElement;
   const sizeImageForText = () => {
-    const textContainerHeight = textContainer.clientHeight + parsePixelValue(spacing["2xl"]) * 2;
-    const imageContainerHeight = container.clientHeight;
+    const textContainerHeight = textContainerModel.element.clientHeight + parsePixelValue(token.spacing["2xl"]) * 2;
+    const imageContainerHeight = containerElement.clientHeight;
     if (textContainerHeight > imageContainerHeight) {
-      container.style.minHeight = `${textContainerHeight}px`;
+      containerElement.style.minHeight = `${textContainerHeight}px`;
     }
   };
+  const containerModel = new ElementBuilder().withClassName("layout-image-expand-container").withStyles({
+    element: {
+      height: "100%",
+      width: "100%",
+      position: "relative"
+    }
+  }).ref((element) => {
+    containerElement = element;
+  }).withChildren(imageContainerModel, textContainerModel).build();
+  const declarationModel = new ElementBuilder().withClassName("layout-image-expand-declaration").withStyles({
+    element: {
+      containerType: "inline-size",
+      overflow: "clip",
+      ...withViewTimelineAnimation({ height: "180vh" }),
+      [`@media (${token.media.queries.tablet.min})`]: {
+        ...withViewTimelineAnimation({ height: "200vh" })
+      }
+    }
+  }).withChild(containerModel).build();
+  declarationModel.styles += KEYFRAMES;
   if (isScreenZoomed() && !isPreferredReducedMotion()) {
-    textContainer.style.height = "90vh";
-    textContainer.style.transform = "translateY(0)";
+    textContainerModel.element.style.height = "90vh";
+    textContainerModel.element.style.transform = "translateY(0)";
   }
   if (!CSS.supports("animation-timeline", "view()")) {
     setTimeout(() => {
@@ -269,12 +167,7 @@ const CreateImageExpandElement = (props) => {
     }, 1e3);
     window.addEventListener("resize", () => sizeImageForText());
   }
-  container.appendChild(imageContainer);
-  container.appendChild(textContainer);
-  container.classList.add(ELEMENT_EXPAND_CONTAINER);
-  declaration.appendChild(container);
-  declaration.classList.add(ELEMENT_EXPLAND_DECLARATION);
-  return { element: declaration, styles: STYLES_LAYOUT_IMAGE_EXPAND };
+  return declarationModel;
 };
 const createCompositeLayoutImageExpand = CreateImageExpandElement;
 export {