@universityofmaryland/web-elements-library 1.6.16 → 1.7.0

package/dist/composite/carousel/default/index.js

@@ -1,149 +1,98 @@
 import * as token from "@universityofmaryland/web-token-library";
-import { createCompositeCarouselBlocks } from "../elements/blocks.js";
-import "../elements/full-screen.js";
-import "../elements/overlay.js";
-import "../elements/image.js";
-const ATTRIBUTE_THEME = "data-theme";
-const THEME_DARK = "dark";
-const IS_THEME_DARK = `[${ATTRIBUTE_THEME}="${THEME_DARK}"]`;
-const ELEMENT_NAME = "umd-element-carousel";
-const ELEMENT_DECLARATION = "carousel-default-declaration";
-const CAROUSEL_CONTAINER = "element-carousel-default-container";
-const OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.container}`;
-const OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.button}`;
-const OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.previousButton}`;
-const OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${createCompositeCarouselBlocks.Elements.nextButton}`;
-const OVERWRITE_THEME_DARK_CONTAINER = `.${CAROUSEL_CONTAINER}${IS_THEME_DARK}`;
-const OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${createCompositeCarouselBlocks.Elements.button}`;
-const OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${createCompositeCarouselBlocks.Elements.containerSingleBlock}`;
-const OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${createCompositeCarouselBlocks.Elements.button}`;
-const OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${createCompositeCarouselBlocks.Elements.previousButton}`;
-const OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${createCompositeCarouselBlocks.Elements.nextButton}`;
-const OverwriteThemeDark = `
-  ${OVERWRITE_THEME_DARK_BUTTON} {
-    background-color: ${token.color.red} !important;
-  }
-
-  ${OVERWRITE_THEME_DARK_BUTTON} > svg {
-    fill: ${token.color.white} !important;
-  }
-`;
-const OverwriteCarouselStyles = `
-  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {
-    padding-bottom: 0;
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {
-    top: 50%;
-    transform: translateY(-50%);
-    background-color: ${token.color.white};
-  }
-
-  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {
-    fill: ${token.color.black};
-  }
-
-  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {
-    left: 0;
-  }
-
-  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {
-    right: 0;
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN} {
-    padding-bottom: 70px;
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {
-    bottom: -19px;
-    top: inherit;
-    background-color: ${token.color.gray.lighter};
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {
-    left: calc(50% - 44px);
-  }
-
-  ${OVERWRITE_SINGLE_COLUMN_NEXT} {
-    left: calc(50% + 4px);
-    right: inherit;
-  }
-`;
-const ContainerStyles = `
-  .${CAROUSEL_CONTAINER} {
-    position: relative;
-    overflow: hidden;
-  }
-`;
-const STYLES_CAROUSEL_ELEMENT = `
-  .${ELEMENT_DECLARATION} {
-    container: ${ELEMENT_NAME} / inline-size;
-  }
-
-  .${ELEMENT_DECLARATION} * {
-    color: ${token.color.white};
-  }
-  
-  ${createCompositeCarouselBlocks.Styles}
-  ${ContainerStyles}
-  ${OverwriteCarouselStyles}
-  ${OverwriteThemeDark}
-`;
+import { ElementBuilder } from "@universityofmaryland/web-builder-library";
+import { createCompositeCarouselBlocks } from "../elements/equal-width-items.js";
+import { buttonColorsOnWhite } from "../elements/nav-button.js";
+import "@universityofmaryland/web-utilities-library/styles";
+import "@universityofmaryland/web-icons-library/controls";
+import "@universityofmaryland/web-styles-library/element";
+import "@universityofmaryland/web-styles-library/layout";
+import "@universityofmaryland/web-styles-library/animation";
+import "@universityofmaryland/web-styles-library/typography";
+import "@universityofmaryland/web-utilities-library/media";
+import "@universityofmaryland/web-utilities-library/dom";
+import "@universityofmaryland/web-icons-library/communication";
+import "@universityofmaryland/web-icons-library/files";
+import "@universityofmaryland/web-icons-library/brand";
+import "@universityofmaryland/web-icons-library/arrows";
+import "@universityofmaryland/web-utilities-library/performance";
+import "../../../atomic/animations/brand/card-stack.js";
+import "@universityofmaryland/web-styles-library";
+import "@universityofmaryland/web-utilities-library/accessibility";
+import "@universityofmaryland/web-icons-library/location";
+import "@universityofmaryland/web-icons-library/calendar";
+import "@universityofmaryland/web-utilities-library/theme";
+import "../../../atomic/layout/block/stacked.js";
+import "../../../atomic/layout/person/columns.js";
+import "@universityofmaryland/web-icons-library/social";
+import "@universityofmaryland/web-utilities-library/string";
+import "@universityofmaryland/web-utilities-library/animation";
+import "../../../atomic/text-lockup/small.js";
+import "@universityofmaryland/web-utilities-library/events";
 const createCompositeCarouselDefault = (props) => (() => {
   const {
+    slide,
+    shadowRef,
+    blocks,
     isThemeDark,
     gridGap,
     hasLeftButton = true,
     hasRightButton = true,
-    mobileHint,
-    hint,
+    mobileHint = true,
+    hint = true,
     tabletSize,
     desktopSize,
     tabletCount,
     desktopCount,
-    maxCount
+    maxCount,
+    button
   } = props;
-  const declaration = document.createElement("div");
-  const container = document.createElement("div");
-  const wrapper = document.createElement("div");
-  const overwriteDisplayLogic = {
-    tabletBreakpoint: tabletSize || 768,
-    desktopBreakpoint: desktopSize || 1024,
-    tabletCount: tabletCount || 2,
-    desktopCount: desktopCount || 3,
-    maxCount: maxCount || 4,
-    hasLeftButton,
-    hasRightButton,
-    showMobileHint: true,
-    showHint: true
-  };
+  let tabletBreakpoint = tabletSize ?? token.media.breakpointValues.desktop.min;
+  let desktopBreakpoint = desktopSize;
+  let blockGap;
   if (gridGap) {
-    overwriteDisplayLogic.blockGap = parseInt(gridGap);
-    overwriteDisplayLogic.tabletBreakpoint = 1e3 + parseInt(gridGap);
-    overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);
+    blockGap = parseInt(gridGap);
+    tabletBreakpoint = 1e3 + parseInt(gridGap);
+    desktopBreakpoint = 1400 + parseInt(gridGap);
   }
-  if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;
-  if (!hint) overwriteDisplayLogic.showHint = false;
   const carouselContainer = createCompositeCarouselBlocks.CreateElement({
-    ...props,
-    blocks: props.blocks,
-    overwriteDisplayLogic
+    slide,
+    shadowRef,
+    blocks,
+    hasLeftButton,
+    hasRightButton,
+    showMobileHint: mobileHint,
+    showHint: hint,
+    tabletBreakpoint,
+    desktopBreakpoint,
+    tabletCount,
+    desktopCount,
+    maxCount,
+    blockGap,
+    button: {
+      ...button,
+      ...buttonColorsOnWhite(isThemeDark)
+    }
   });
-  wrapper.appendChild(carouselContainer.element);
-  container.classList.add(CAROUSEL_CONTAINER);
-  container.appendChild(wrapper);
-  if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);
-  declaration.classList.add(ELEMENT_DECLARATION);
-  declaration.appendChild(container);
-  return {
-    element: declaration,
-    styles: STYLES_CAROUSEL_ELEMENT,
-    events: {
-      resize: carouselContainer.events.resize,
-      load: carouselContainer.events.load
+  const containerModel = new ElementBuilder().withClassName("element-carousel-default-container").withStyles({
+    element: {
+      position: "relative",
+      overflow: "hidden"
+    }
+  }).withModifier((element) => {
+    if (isThemeDark) {
+      element.setAttribute("data-theme", "dark");
+    }
+  }).withChild(carouselContainer).build();
+  const declarationModel = new ElementBuilder().withClassName("carousel-default-declaration").withStyles({
+    element: {
+      containerType: "inline-size",
+      "& *": { color: token.color.white }
     }
-  };
+  }).withChild(containerModel).withEvents({
+    resize: carouselContainer.events.resize,
+    load: carouselContainer.events.load
+  }).build();
+  return declarationModel;
 })();
 export {
   createCompositeCarouselDefault

package/dist/composite/carousel/default/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/default/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport * as carouselElements from '../elements';\n\ntype TypeCarouselRequirements = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n  gridGap?: string | null;\n  hasLeftButton?: boolean;\n  hasRightButton?: boolean;\n  mobileHint?: boolean;\n  hint?: boolean;\n  mobileSize?: number | null;\n  tabletSize?: number | null;\n  desktopSize?: number | null;\n  mobileCount?: number | null;\n  tabletCount?: number | null;\n  desktopCount?: number | null;\n  maxCount?: number | null;\n};\n\nconst ATTRIBUTE_THEME = 'data-theme';\nconst THEME_DARK = 'dark';\n\nconst IS_THEME_DARK = `[${ATTRIBUTE_THEME}=\"${THEME_DARK}\"]`;\n\nconst ELEMENT_NAME = 'umd-element-carousel';\nconst ELEMENT_DECLARATION = 'carousel-default-declaration';\nconst CAROUSEL_CONTAINER = 'element-carousel-default-container';\n\nconst OVERWRITE_ANIMATION_CAROUSEL_CONTAINER = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.container}`;\nconst OVERWRITE_ANIMATION_CAROUSEL_BUTTON = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_ANIMATION_BUTTON_PREVIOUS = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_ANIMATION_BUTTON_NEXT = `.${CAROUSEL_CONTAINER} .${carouselElements.blocks.Elements.nextButton}`;\n\nconst OVERWRITE_THEME_DARK_CONTAINER = `.${CAROUSEL_CONTAINER}${IS_THEME_DARK}`;\nconst OVERWRITE_THEME_DARK_BUTTON = `${OVERWRITE_THEME_DARK_CONTAINER} .${carouselElements.blocks.Elements.button}`;\n\nconst OVERWRITE_SINGLE_COLUMN = `.${CAROUSEL_CONTAINER} ${carouselElements.blocks.Elements.containerSingleBlock}`;\nconst OVERWRITE_SINGLE_COLUMN_BUTTONS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.button}`;\nconst OVERWRITE_SINGLE_COLUMN_PREVIOUS = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.previousButton}`;\nconst OVERWRITE_SINGLE_COLUMN_NEXT = `${OVERWRITE_SINGLE_COLUMN} .${carouselElements.blocks.Elements.nextButton}`;\n\n// prettier-ignore\nconst OverwriteThemeDark = `\n  ${OVERWRITE_THEME_DARK_BUTTON} {\n    background-color: ${token.color.red} !important;\n  }\n\n  ${OVERWRITE_THEME_DARK_BUTTON} > svg {\n    fill: ${token.color.white} !important;\n  }\n`;\n\n// prettier-ignore\nconst OverwriteCarouselStyles = `\n  .${OVERWRITE_ANIMATION_CAROUSEL_CONTAINER} {\n    padding-bottom: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} {\n    top: 50%;\n    transform: translateY(-50%);\n    background-color: ${token.color.white};\n  }\n\n  ${OVERWRITE_ANIMATION_CAROUSEL_BUTTON} > svg {\n    fill: ${token.color.black};\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_PREVIOUS} {\n    left: 0;\n  }\n\n  ${OVERWRITE_ANIMATION_BUTTON_NEXT} {\n    right: 0;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN} {\n    padding-bottom: 70px;\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_BUTTONS} {\n    bottom: -19px;\n    top: inherit;\n    background-color: ${token.color.gray.lighter};\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_PREVIOUS} {\n    left: calc(50% - 44px);\n  }\n\n  ${OVERWRITE_SINGLE_COLUMN_NEXT} {\n    left: calc(50% + 4px);\n    right: inherit;\n  }\n`;\n\n// prettier-ignore\nconst ContainerStyles = `\n  .${CAROUSEL_CONTAINER} {\n    position: relative;\n    overflow: hidden;\n  }\n`\n\n// prettier-ignore\nconst STYLES_CAROUSEL_ELEMENT = `\n  .${ELEMENT_DECLARATION} {\n    container: ${ELEMENT_NAME} / inline-size;\n  }\n\n  .${ELEMENT_DECLARATION} * {\n    color: ${token.color.white};\n  }\n  \n  ${carouselElements.blocks.Styles}\n  ${ContainerStyles}\n  ${OverwriteCarouselStyles}\n  ${OverwriteThemeDark}\n`;\n\nexport const createCompositeCarouselDefault = (props: TypeCarouselRequirements) =>\n  (() => {\n    const {\n      isThemeDark,\n      gridGap,\n      hasLeftButton = true,\n      hasRightButton = true,\n      mobileHint,\n      hint,\n      tabletSize,\n      desktopSize,\n      tabletCount,\n      desktopCount,\n      maxCount,\n    } = props;\n\n    const declaration = document.createElement('div');\n    const container = document.createElement('div');\n    const wrapper = document.createElement('div');\n    const overwriteDisplayLogic: Record<string, number | boolean> = {\n      tabletBreakpoint: tabletSize || 768,\n      desktopBreakpoint: desktopSize || 1024,\n      tabletCount: tabletCount || 2,\n      desktopCount: desktopCount || 3,\n      maxCount: maxCount || 4,\n      hasLeftButton,\n      hasRightButton,\n      showMobileHint: true,\n      showHint: true,\n    };\n\n    if (gridGap) {\n      overwriteDisplayLogic.blockGap = parseInt(gridGap);\n      overwriteDisplayLogic.tabletBreakpoint = 1000 + parseInt(gridGap);\n      overwriteDisplayLogic.desktopBreakpoint = 1400 + parseInt(gridGap);\n    }\n\n    if (!mobileHint) overwriteDisplayLogic.showMobileHint = false;\n    if (!hint) overwriteDisplayLogic.showHint = false;\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      ...props,\n      blocks: props.blocks,\n      overwriteDisplayLogic,\n    });\n\n    wrapper.appendChild(carouselContainer.element);\n\n    container.classList.add(CAROUSEL_CONTAINER);\n    container.appendChild(wrapper);\n    if (isThemeDark) container.setAttribute(ATTRIBUTE_THEME, THEME_DARK);\n\n    declaration.classList.add(ELEMENT_DECLARATION);\n    declaration.appendChild(container);\n\n    return {\n      element: declaration,\n      styles: STYLES_CAROUSEL_ELEMENT,\n      events: {\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      },\n    };\n  })();\n"],"names":["carouselElements.blocks"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../../../source/composite/carousel/default/index.ts"],"sourcesContent":["import * as token from '@universityofmaryland/web-token-library';\nimport { ElementBuilder } from '@universityofmaryland/web-builder-library';\nimport * as carouselElements from '../elements';\nimport { type TypeButtonConfig } from '../elements/equal-width-items';\n\ntype TypeCarouselRequirements = {\n  slide: HTMLElement;\n  shadowRef?: HTMLElement;\n  blocks: HTMLElement[];\n  isThemeDark?: boolean;\n  gridGap?: string | null;\n  hasLeftButton?: boolean;\n  hasRightButton?: boolean;\n  mobileHint?: boolean;\n  hint?: boolean;\n  tabletSize?: number;\n  desktopSize?: number;\n  mobileCount?: number;\n  tabletCount?: number;\n  desktopCount?: number;\n  maxCount?: number;\n  button?: TypeButtonConfig;\n};\n\nexport const createCompositeCarouselDefault = (props: TypeCarouselRequirements) =>\n  (() => {\n    const {\n      slide,\n      shadowRef,\n      blocks,\n      isThemeDark,\n      gridGap,\n      hasLeftButton = true,\n      hasRightButton = true,\n      mobileHint = true,\n      hint = true,\n      tabletSize,\n      desktopSize,\n      tabletCount,\n      desktopCount,\n      maxCount,\n      button,\n    } = props;\n\n    let tabletBreakpoint = tabletSize ?? token.media.breakpointValues.desktop.min;\n    let desktopBreakpoint = desktopSize;\n    let blockGap;\n\n    if (gridGap) {\n      blockGap = parseInt(gridGap);\n      tabletBreakpoint = 1000 + parseInt(gridGap);\n      desktopBreakpoint = 1400 + parseInt(gridGap);\n    }\n\n    const carouselContainer = carouselElements.blocks.CreateElement({\n      slide,\n      shadowRef,\n      blocks,\n      hasLeftButton,\n      hasRightButton,\n      showMobileHint: mobileHint,\n      showHint: hint,\n      tabletBreakpoint,\n      desktopBreakpoint,\n      tabletCount,\n      desktopCount,\n      maxCount,\n      blockGap,\n      button: {\n        ...button,\n        ...carouselElements.buttonColorsOnWhite(isThemeDark),\n      },\n    });\n\n    const containerModel = new ElementBuilder()\n      .withClassName('element-carousel-default-container')\n      .withStyles({\n        element: {\n          position: 'relative',\n          overflow: 'hidden',\n        },\n      })\n      .withModifier((element) => {\n        if (isThemeDark) {\n          element.setAttribute('data-theme', 'dark');\n        }\n      })\n      .withChild(carouselContainer)\n      .build();\n\n    const declarationModel = new ElementBuilder()\n      .withClassName('carousel-default-declaration')\n      .withStyles({\n        element: {\n          containerType: 'inline-size',\n          '& *': { color: token.color.white },\n        },\n      })\n      .withChild(containerModel)\n      .withEvents({\n        resize: carouselContainer.events.resize,\n        load: carouselContainer.events.load,\n      })\n      .build();\n\n    return declarationModel;\n  })();\n"],"names":["carouselElements.blocks","carouselElements.buttonColorsOnWhite"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwBO,MAAM,iCAAiC,CAAC,WAC5C,MAAM;AACL,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,iBAAiB;AAAA,IACjB,aAAa;AAAA,IACb,OAAO;AAAA,IACP;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,MAAI,mBAAmB,cAAc,MAAM,MAAM,iBAAiB,QAAQ;AAC1E,MAAI,oBAAoB;AACxB,MAAI;AAEJ,MAAI,SAAS;AACX,eAAW,SAAS,OAAO;AAC3B,uBAAmB,MAAO,SAAS,OAAO;AAC1C,wBAAoB,OAAO,SAAS,OAAO;AAAA,EAC7C;AAEA,QAAM,oBAAoBA,8BAAwB,cAAc;AAAA,IAC9D;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,gBAAgB;AAAA,IAChB,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,QAAQ;AAAA,MACN,GAAG;AAAA,MACH,GAAGC,oBAAqC,WAAW;AAAA,IAAA;AAAA,EACrD,CACD;AAED,QAAM,iBAAiB,IAAI,eAAA,EACxB,cAAc,oCAAoC,EAClD,WAAW;AAAA,IACV,SAAS;AAAA,MACP,UAAU;AAAA,MACV,UAAU;AAAA,IAAA;AAAA,EACZ,CACD,EACA,aAAa,CAAC,YAAY;AACzB,QAAI,aAAa;AACf,cAAQ,aAAa,cAAc,MAAM;AAAA,IAC3C;AAAA,EACF,CAAC,EACA,UAAU,iBAAiB,EAC3B,MAAA;AAEH,QAAM,mBAAmB,IAAI,eAAA,EAC1B,cAAc,8BAA8B,EAC5C,WAAW;AAAA,IACV,SAAS;AAAA,MACP,eAAe;AAAA,MACf,OAAO,EAAE,OAAO,MAAM,MAAM,MAAA;AAAA,IAAM;AAAA,EACpC,CACD,EACA,UAAU,cAAc,EACxB,WAAW;AAAA,IACV,QAAQ,kBAAkB,OAAO;AAAA,IACjC,MAAM,kBAAkB,OAAO;AAAA,EAAA,CAChC,EACA,MAAA;AAEH,SAAO;AACT,GAAA;"}

package/dist/composite/carousel/elements/equal-width-items.d.ts

@@ -0,0 +1,37 @@
+export type TypeButtonConfig = {
+    backgroundColor?: string;
+    verticalCenter?: boolean;
+    outsetOffset?: string;
+};
+type TypeAnimationCarouselBlockProps = {
+    slide: HTMLElement;
+    shadowRef?: HTMLElement;
+    blocks: HTMLElement[];
+    mobileBreakpoint?: number;
+    tabletBreakpoint?: number;
+    desktopBreakpoint?: number;
+    mobileCount?: number;
+    tabletCount?: number;
+    desktopCount?: number;
+    maxCount?: number;
+    blockGap?: number;
+    hasLeftButton?: boolean;
+    hasRightButton?: boolean;
+    showMobileHint?: boolean;
+    showHint?: boolean;
+    fullScreenCallback?: (index: number) => void;
+    button?: TypeButtonConfig;
+};
+type CarouselBlockModel = {
+    element: HTMLElement;
+    styles: string;
+    events: {
+        resize: () => void;
+        load: () => void;
+    };
+};
+export declare const createCompositeCarouselBlocks: {
+    CreateElement: (props: TypeAnimationCarouselBlockProps) => CarouselBlockModel;
+};
+export {};
+//# sourceMappingURL=equal-width-items.d.ts.map

package/dist/composite/carousel/elements/equal-width-items.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"equal-width-items.d.ts","sourceRoot":"","sources":["../../../../source/composite/carousel/elements/equal-width-items.ts"],"names":[],"mappings":"AASA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CAAC;AAkBF,KAAK,+BAA+B,GAAG;IACrC,KAAK,EAAE,WAAW,CAAC;IACnB,SAAS,CAAC,EAAE,WAAW,CAAC;IACxB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7C,MAAM,CAAC,EAAE,gBAAgB,CAAC;CAC3B,CAAC;AAkCF,KAAK,kBAAkB,GAAG;IACxB,OAAO,EAAE,WAAW,CAAC;IACrB,MAAM,EAAE,MAAM,CAAC;IACf,MAAM,EAAE;QACN,MAAM,EAAE,MAAM,IAAI,CAAC;QACnB,IAAI,EAAE,MAAM,IAAI,CAAC;KAClB,CAAC;CACH,CAAC;AAsdF,eAAO,MAAM,6BAA6B;2BAlUC,+BAA+B;CAoUzE,CAAC"}