{"version":3,"names":["contentAggregatorCss","EonUiContentAggregatorStyle0","ContentAggregator","this","schemeConfig","CONTENT_AGGREGATOR_SCHEME_CONFIG","schemeMap","CONTENT_AGGREGATOR_SCHEME_MAP","contentAggregatorItems","CONTENT_AGGREGATOR_LAYOUT_CAROUSEL","TWO_ITEMS","CONTENT_AGGREGATOR_ITEM_LARGE_HEADLINE","CONTENT_AGGREGATOR_LARGE_GRID_SIZE","CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_LEFT","aggregatorItemsLength","length","handleCountOnDesktop","isDesktopMedium","isDesktopLarge","countOnDesktop","isTablet","isDesktopSmall","componentWillLoad","applyScheme","Array","from","hostElement","children","detectSlotChanges","handleLayoutChange","handleHeadlineHtmlTag","defaultProperties","createDivWrapper","componentDidLoad","setCssVariables","layout","CONTENT_AGGREGATOR_LAYOUT_TILE","handleItemsPerGrid","lastTileIndex","itemsPerGrid","onWindowresize","map","item","setAttribute","CONTENT_AGGREGATOR_ITEM_LAYOUT_TILE","CONTENT_AGGREGATOR_LAYOUT_LIST_EXPANDED","CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST_EXPANDED","CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST","headlineHtmlTag","aggregatorHeadlineHtmlTag","aggregatorHeadlineSize","size","forEach","index","hideTime","_a","timeZone","twelveHourFormat","showAbstract","dateInput","zebra","nearestBackground","getColorOfNearestBackground","split","toString","alignLayout","CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_ALTERNATE","CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_RIGHT","sameHeight","headlineCharacterLimit","copyCharacterLimit","childWrapper","document","createElement","className","pfx","parentNode","insertBefore","appendChild","newsTeaserWrapper","push","handleTeaserSchemeOnDifferentBackground","colors","CONTENT_AGGREGATOR_COLORFUL_VARIANT_COLORS","itemCount","CONTENT_AGGREGATOR_BACKGROUND_FOR_COLORFUL_VARIANT","whiteColorScheme","CONTENT_AGGREGATOR_TILE_BRIGHT_COLOR_SCHEME","CONTENT_AGGREGATOR_TILE_DEFAULT_COLOR_SCHEME","gridSize","TWELVE_ITEMS","EIGHT_ITEMS","SIX_ITEMS","FOUR_ITEMS","THREE_ITEMS","carouselItemWrapper","aggregatorItems","tileItemWrapper","tileRowWrapper","handleLastTileIndex","gridFormation","CONTENT_AGGREGATOR_LAYOUT_LIST","h","innerHTML","outerHTML","reInitiateGrid","visibleTileItems","increaseTileItems","contentPerRowItem","i","adjustGridVoidSpaces","row","contentGridColumn","class","applySchemeDelegate","setCssVariablesDelegate","render","content","pageSizes","totalItems","slot","text","buttonText","icon","onClick","controls","autoplay","itemsPerSlide","itemsPerSlideMobile","itemsPerSlideTablet","gap","Host"],"sources":["src/components/content-aggregator/content-aggregator.scss?tag=eon-ui-content-aggregator&encapsulation=shadow","src/components/content-aggregator/content-aggregator.tsx"],"sourcesContent":["$vGutterLargeDesktop: 48px;\n$vGutterDesktop: 40px;\n$vGutterTablet: 32px;\n$vGutterPhone: 24px;\n\n$hGutterLargeDesktop: 48px;\n$hGutterDesktop: 40px;\n$hGutterTablet: 32px;\n$hGutterPhone: 24px;\n\n$outerSpacingMobile: 24px;\n\n$content-aggregator-drop-shadow: none !default;\n$content-aggregator-drop-shadow-on-hover: none !default;\n\n/* Function calculates column width */\n@mixin calc-column-percentage($columnNumber, $maxColumnNumber) {\n width: customDivide(($columnNumber * 100%), $maxColumnNumber);\n flex-basis: calc(\n (#{$columnNumber} * 100% / #{$maxColumnNumber}) - 1px\n ); /* has to be set because of safari 13.x bug (solved in safari 14.x) */\n}\n\n/* Function generates width in percent per each column */\n@mixin generate-column-width($n, $i: 1) {\n @if ($i <= $n) {\n @at-root &.#{$prefix}grid-column-#{$i} {\n width: customDivide(($i * 100%), $n);\n flex-basis: calc(\n (#{$i} * 100% / #{$n}) - 1px\n ); /* has to be set because of safari 13.x bug (solved in safari 14.x) */\n }\n @include generate-column-width($n, ($i + 1));\n }\n}\n\n:host {\n display: block;\n}\n// apply pfx\n.#{$prefix}news-teaser-container {\n display: flex;\n\n &.#{$prefix}list-layout {\n flex-direction: column;\n .#{$prefix}news-teaser-item {\n padding-bottom: 8px;\n }\n }\n\n &.#{$prefix}tile-layout {\n display: block;\n\n * {\n margin: 0;\n padding: 0;\n }\n\n *,\n *::after,\n *::before {\n box-sizing: border-box;\n outline: 0 none;\n text-rendering: optimizelegibility;\n }\n\n .#{$prefix}news-teaser-grid__control {\n display: flex;\n flex-wrap: wrap;\n\n &[data-visible=\"false\"] {\n display: none;\n }\n\n &__last {\n .#{$prefix}news-teaser-grid__column {\n padding-bottom: 0 !important;\n }\n }\n\n .#{$prefix}news-teaser-grid__column {\n position: relative;\n flex-grow: 1;\n flex-shrink: 1;\n padding-left: $vGutterLargeDesktop * 0.5;\n padding-right: $vGutterLargeDesktop * 0.5;\n padding-bottom: $hGutterLargeDesktop;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n\n &:first-child {\n padding-left: 0;\n }\n &:last-child {\n padding-right: 0;\n }\n\n @include for-size(desktop) {\n padding-bottom: $hGutterDesktop;\n padding-left: $vGutterDesktop * 0.5;\n padding-right: $vGutterDesktop * 0.5;\n }\n\n @include for-size(tablet) {\n padding-bottom: $hGutterTablet;\n padding-left: $vGutterTablet * 0.5;\n padding-right: $vGutterTablet * 0.5;\n }\n\n @include for-size(phone) {\n padding-bottom: $hGutterPhone * 0.5;\n padding-left: $vGutterPhone * 0.5;\n padding-right: $vGutterPhone * 0.5;\n width: 100%;\n flex-basis: calc(100% - 1px);\n }\n\n @include generate-column-width(12);\n }\n }\n\n @include for-size(phone) {\n transform: translateX((-#{$outerSpacingMobile}));\n width: calc(100% + #{$outerSpacingMobile} * 2);\n position: relative;\n }\n\n .#{$prefix}news-teaser-paging {\n padding-top: $hGutterLargeDesktop;\n\n @include for-size(desktop) {\n padding-top: $hGutterDesktop;\n }\n\n @include for-size(tablet) {\n padding-top: $hGutterTablet;\n }\n\n @include for-size(phone) {\n padding-top: $hGutterPhone;\n padding-left: $vGutterPhone;\n padding-right: $vGutterPhone;\n }\n\n &__column {\n display: flex;\n flex-direction: row;\n justify-content: flex-end;\n\n @include for-size(phone) {\n display: block;\n }\n }\n }\n }\n\n .#{$prefix}news-teaser-item {\n flex-grow: 1;\n flex-basis: 0;\n }\n}\n\neon-ui-content-aggregator-item[variant=\"list_expanded\"] {\n margin: 20px 0;\n\n @include for-size(desktop) {\n margin: 20px 0;\n }\n\n @include for-size(tablet) {\n margin: 15px 0;\n }\n\n @include for-size(phone) {\n margin: 10px 0;\n }\n}\n","import { Component, Element, h, Host, Listen, Prop, State, Watch } from \"@stencil/core\";\nimport {\n applySchemeDelegate,\n ColorableComponent,\n getColorOfNearestBackground,\n setCssVariablesDelegate\n} from \"../../common/colorable-component\";\nimport {\n ContentAggregatorGridSize,\n ContentAggregatorItemLayoutAlignment,\n ContentAggregatorLayout,\n ContentAggregatorSchemeDefinition,\n ContentAggregatorSchemeName,\n NumberOfItemsPerCarouselWindow\n} from \"./constants/content-aggregator-types\";\nimport {\n CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_ALTERNATE,\n CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_LEFT,\n CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_RIGHT,\n CONTENT_AGGREGATOR_LARGE_GRID_SIZE,\n CONTENT_AGGREGATOR_LAYOUT_CAROUSEL,\n CONTENT_AGGREGATOR_LAYOUT_LIST,\n CONTENT_AGGREGATOR_LAYOUT_LIST_EXPANDED,\n CONTENT_AGGREGATOR_LAYOUT_TILE,\n CONTENT_AGGREGATOR_SCHEME_CONFIG,\n CONTENT_AGGREGATOR_SCHEME_MAP,\n EIGHT_ITEMS,\n FOUR_ITEMS,\n SIX_ITEMS,\n THREE_ITEMS,\n TWELVE_ITEMS,\n TWO_ITEMS\n} from \"./constants/content-aggregator-constants\";\nimport { detectSlotChanges } from \"../../utils/slot-helper\";\nimport { HeadlineTag } from \"../headline/constants/headline-types\";\nimport { ContentAggregatorSchemeConfiguration } from \"../../constants/colors\";\nimport { isDesktopLarge, isDesktopMedium, isDesktopSmall, isTablet } from \"../../utils/screen-helper\";\nimport pfx from \"../../utils/style-class-prefix-helper\";\nimport { ContentAggregatorItemHeadlineSize } from \"../content-aggregator-item/constants/content-aggregator-item-types\";\nimport {\n CONTENT_AGGREGATOR_ITEM_LARGE_HEADLINE,\n CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST,\n CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST_EXPANDED,\n CONTENT_AGGREGATOR_ITEM_LAYOUT_TILE\n} from \"../content-aggregator-item/constants/content-aggregator-item-constants\";\nimport {\n CONTENT_AGGREGATOR_BACKGROUND_FOR_COLORFUL_VARIANT,\n CONTENT_AGGREGATOR_COLORFUL_VARIANT_COLORS,\n CONTENT_AGGREGATOR_TILE_BRIGHT_COLOR_SCHEME,\n CONTENT_AGGREGATOR_TILE_DEFAULT_COLOR_SCHEME\n} from \"../../constants/global-constants\";\n// import { InitLogging } from \"../../decorators/init-logging\";\n\n/**\n * @slot [unnamed] - holds any number of HTML elements.\n */\n@Component({\n tag: \"eon-ui-content-aggregator\",\n styleUrl: \"content-aggregator.scss\",\n shadow: true\n})\nexport class ContentAggregator\n implements ColorableComponent> {\n // @InitLogging() sentryTransaction;\n schemeConfig: ContentAggregatorSchemeConfiguration = CONTENT_AGGREGATOR_SCHEME_CONFIG;\n schemeMap = CONTENT_AGGREGATOR_SCHEME_MAP;\n contentAggregatorItems: Element[] = [];\n carouselContainer: any;\n\n /**\n * The components active scheme. If {@link scheme} is set, it will be set to the corresponding scheme.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @State() activeScheme: ContentAggregatorSchemeDefinition;\n @State() newsTeaserWrapper = [];\n @State() carouselItemWrapper = [];\n @State() tileRowWrapper = [];\n @State() tileItemWrapper = [];\n @State() aggregatorItems: Element[] = [];\n @State() aggregatorHeadlineHtmlTag: string;\n @State() aggregatorHeadlineSize: string;\n\n @State() visibleTileItems: Element[] = [];\n @State() itemsPerGrid: number;\n @State() lastTileIndex: number;\n\n @Element() hostElement: HTMLEonUiContentAggregatorElement;\n\n /**\n * The name of the color scheme of the component.\n * If not set, the component will try to calculate it based on the nearest enclosing background information given by inner-background attribute or eon-ui-background component.\n */\n @Prop({ reflect: true }) scheme: ContentAggregatorSchemeName;\n\n /**\n * Sets a layout for a Aggregator varient component\n * @example carousel | list | list_expanded\n */\n @Prop({ reflect: true, mutable: true }) layout: ContentAggregatorLayout = CONTENT_AGGREGATOR_LAYOUT_CAROUSEL;\n\n /**\n * OnDesktop Large and Medium (>= 1600) the News-Teaser count per carousel-item can be 3 or 2.\n * options: 3 | 2\n */\n @Prop({ reflect: true }) countOnDesktop: NumberOfItemsPerCarouselWindow = TWO_ITEMS;\n\n /**\n * Property will hide and show the content/abstract of all the News-Teasers in carousal component\n */\n @Prop({ reflect: true, mutable: true }) showAbstract: boolean = true;\n\n /**\n * This property hides or shows the date property of all the News-Teasers in carousal component\n */\n @Prop({ reflect: true, mutable: true }) dateInput: boolean = true;\n\n /**\n * Property will hide and show the time format in date section of all the News-Teasers in carousal component\n */\n @Prop({ reflect: true, mutable: true }) hideTime: boolean = true;\n\n /**\n * timeZone property for uniform standard time, gives flexibility to authors to edit the timeZone\n * And implement the same all the News-Teasers in carousal component\n * @example: CET/CEST\n */\n @Prop({ mutable: true }) timeZone: string;\n\n /**\n * twelveHourFormat depicts whether date should be of 12 hours format or 24 hours format\n * Of all the News-Teasers in carousal component\n */\n @Prop({ reflect: true, mutable: true }) twelveHourFormat: boolean = false;\n\n /**\n * The size of the headline inside the teaser\n * @example: large | small\n */\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ reflect: true, mutable: true })\n size: ContentAggregatorItemHeadlineSize = CONTENT_AGGREGATOR_ITEM_LARGE_HEADLINE;\n\n /**\n * The size of the grid layout\n * determines the initial loaded items\n * @example: large | small\n */\n // eslint-disable-next-line @stencil-community/decorators-style\n @Prop({ reflect: true, mutable: true })\n gridSize: ContentAggregatorGridSize = CONTENT_AGGREGATOR_LARGE_GRID_SIZE;\n\n /**\n * Determines the layout of the expanded list item's content when variant is set to `list_expanded`\n * @example default: left\n */\n @Prop() alignLayout: ContentAggregatorItemLayoutAlignment = CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_LEFT;\n\n /**\n * If set, slides will switch after the defined time in miliseconds.\n * Must be at least 6000.\n */\n @Prop() autoplay: number = 6000;\n\n /**\n * Property will change color scheme of News Teaser on basis of background color scheme\n * By default the News Teasers will be colourfull on white background scheme\n */\n @Prop({ reflect: true, mutable: true }) whiteColorScheme: boolean = false;\n\n /**\n * height property will set height to 100% of all the news-teaserif true\n */\n @Prop({ reflect: true, mutable: true }) sameHeight: boolean = true;\n\n /**\n * headlineHtmlTag property is used for SEO-Optimisation.
\n * If this property is used and fill-out, this property is used for HTML-Tag for headline.\n */\n @Prop() headlineHtmlTag: HeadlineTag;\n\n /**\n * headlineCharacterLimit will limit the charaters of headline to the given value\n * @disableControlInStorybook true\n * @example default: 50\n */\n @Prop({ reflect: true }) headlineCharacterLimit: number = 50;\n\n /**\n * copyCharacterLimit will limit the charaters of copy text to the given value\n * @disableControlInStorybook true\n * @example default: 125\n */\n @Prop({ reflect: true }) copyCharacterLimit: number = 125;\n\n /**\n * Comma seperated list of page of page sizes\n */\n @Prop() pageSizes: string = \"5,10,20,50,100\";\n\n /**\n * Provide to total number of items.\n * Use this if you want to use this component with a backend api with paging.\n */\n @Prop() totalItems: number;\n\n /**\n * Determines whether the list expanded items will be showed with alternating background.\n */\n @Prop() zebra: boolean;\n\n /**\n * A string set as content of the button.\n * You can also omit this and specify HTML content yourself.\n * If you specify both, the content is ignored and this property is used instead.\n * @example \n * @example CONTENT\n */\n @Prop() buttonText: string;\n\n private get aggregatorItemsLength(): number {\n return this.contentAggregatorItems.length;\n }\n\n private handleCountOnDesktop(): number {\n return isDesktopMedium() || isDesktopLarge() ? this.countOnDesktop : isTablet() || isDesktopSmall() ? 2 : 1;\n }\n\n componentWillLoad() {\n this.applyScheme();\n this.contentAggregatorItems = Array.from(this.hostElement.children);\n detectSlotChanges(() => {\n this.handleLayoutChange();\n }, this.hostElement);\n this.handleHeadlineHtmlTag();\n this.defaultProperties();\n this.createDivWrapper();\n }\n\n componentDidLoad() {\n this.setCssVariables();\n if (this.layout === CONTENT_AGGREGATOR_LAYOUT_TILE) {\n this.handleItemsPerGrid();\n this.lastTileIndex = this.itemsPerGrid;\n }\n this.onWindowresize();\n }\n\n @Watch(\"layout\")\n handleLayoutChange() {\n this.contentAggregatorItems.map((item) => {\n item.setAttribute(\n \"variant\",\n this.layout === CONTENT_AGGREGATOR_LAYOUT_TILE || this.layout === CONTENT_AGGREGATOR_LAYOUT_CAROUSEL\n ? CONTENT_AGGREGATOR_ITEM_LAYOUT_TILE\n : this.layout === CONTENT_AGGREGATOR_LAYOUT_LIST_EXPANDED\n ? CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST_EXPANDED\n : CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST\n );\n });\n }\n\n @Watch(\"headlineHtmlTag\")\n handleHeadlineHtmlTag() {\n if (this.headlineHtmlTag) {\n this.aggregatorHeadlineHtmlTag = this.headlineHtmlTag;\n } else {\n this.aggregatorHeadlineSize =\n this.layout === CONTENT_AGGREGATOR_LAYOUT_CAROUSEL\n ? this.size === \"large\"\n ? \"h3\"\n : \"h4\"\n : this.size === \"large\"\n ? \"h5\"\n : \"copy\";\n this.aggregatorHeadlineHtmlTag = this.aggregatorHeadlineSize;\n }\n }\n\n @Watch(\"showAbstract\")\n @Watch(\"dateInput\")\n @Watch(\"hideTime\")\n @Watch(\"timeZone\")\n @Watch(\"twelveHourFormat\")\n @Watch(\"size\")\n @Watch(\"headlineHtmlTag\")\n @Watch(\"zebra\")\n @Watch(\"sameHeight\")\n @Watch(\"layout\")\n defaultProperties() {\n // Below code implements consistent properties all over the News Teasers placed inside Carousel Component\n this.contentAggregatorItems.forEach((item, index) => {\n item.setAttribute(\"hide-time\", this.hideTime ? \"true\" : \"false\");\n item.setAttribute(\"time-zone\", this.timeZone ?? \"\");\n item.setAttribute(\"twelve-hour-format\", this.twelveHourFormat ? \"true\" : \"false\");\n item.setAttribute(\"show-abstract\", this.showAbstract ? \"true\" : \"false\");\n item.setAttribute(\"date-input\", this.dateInput ? \"true\" : \"false\");\n item.setAttribute(\"headline-html-tag\", this.aggregatorHeadlineHtmlTag);\n item.setAttribute(\"headline-size\", this.size);\n\n if (this.zebra) {\n const nearestBackground = getColorOfNearestBackground(this.hostElement);\n\n item.setAttribute(\"scheme\", nearestBackground.split(\"-\")[1]);\n item.setAttribute(\"zebra\", this.zebra.toString());\n\n if (index % 2 === 0) {\n item.setAttribute(\"shade\", \"true\");\n }\n }\n\n item.setAttribute(\n \"align-layout\",\n this.alignLayout === CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_ALTERNATE\n ? index % 2 === 0\n ? CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_LEFT\n : CONTENT_AGGREGATOR_ITEM_LAYOUT_ALIGNMENT_RIGHT\n : this.alignLayout\n );\n item.setAttribute(\"style\", this.sameHeight ? \"height: 100%\" : \"\");\n item.setAttribute(\n \"variant\",\n this.layout === CONTENT_AGGREGATOR_LAYOUT_TILE || this.layout === CONTENT_AGGREGATOR_LAYOUT_CAROUSEL\n ? CONTENT_AGGREGATOR_ITEM_LAYOUT_TILE\n : this.layout === CONTENT_AGGREGATOR_LAYOUT_LIST_EXPANDED\n ? CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST_EXPANDED\n : CONTENT_AGGREGATOR_ITEM_LAYOUT_LIST\n );\n item.setAttribute(\"headline-character-limit\", `${this.headlineCharacterLimit}`);\n item.setAttribute(\"copy-character-limit\", `${this.copyCharacterLimit}`);\n });\n this.onWindowresize();\n }\n\n /**\n * Wraps newly created DIV element around each News-teaser\n */\n createDivWrapper() {\n this.contentAggregatorItems.forEach((item) => {\n let childWrapper = document.createElement(\"div\");\n childWrapper.className = `${pfx(\"news-teaser-item\")}`;\n item.parentNode.insertBefore(childWrapper, item);\n childWrapper.appendChild(item);\n this.newsTeaserWrapper.push(childWrapper);\n });\n this.handleTeaserSchemeOnDifferentBackground();\n }\n\n @Watch(\"layout\")\n @Watch(\"whiteColorScheme\")\n handleTeaserSchemeOnDifferentBackground() {\n /**\n * News Teaser scheme follows below flexible colour scheme sequence when placed on white background\n * Ex: limeyellow | turquoise | bordeaux | red | ultralightgrey\n * News Teaser scheme is set to white when placed on colourful background except white\n */\n const nearestBackground = getColorOfNearestBackground(this.hostElement);\n const colors = CONTENT_AGGREGATOR_COLORFUL_VARIANT_COLORS;\n let itemCount = 0;\n\n if (nearestBackground === CONTENT_AGGREGATOR_BACKGROUND_FOR_COLORFUL_VARIANT) {\n for (let item of this.contentAggregatorItems) {\n item.setAttribute(\n \"scheme\",\n this.layout === CONTENT_AGGREGATOR_LAYOUT_CAROUSEL || this.layout === CONTENT_AGGREGATOR_LAYOUT_TILE\n ? this.whiteColorScheme\n ? CONTENT_AGGREGATOR_TILE_BRIGHT_COLOR_SCHEME\n : colors[itemCount % colors.length]\n : CONTENT_AGGREGATOR_TILE_DEFAULT_COLOR_SCHEME\n );\n itemCount++;\n }\n }\n this.onWindowresize();\n }\n\n @Watch(\"gridSize\")\n handleItemsPerGrid(): void {\n if (this.gridSize === CONTENT_AGGREGATOR_LARGE_GRID_SIZE) {\n this.itemsPerGrid =\n isDesktopMedium() || isDesktopLarge() ? TWELVE_ITEMS : isTablet() || isDesktopSmall() ? EIGHT_ITEMS : SIX_ITEMS;\n } else {\n this.itemsPerGrid =\n isDesktopMedium() || isDesktopLarge() ? SIX_ITEMS : isTablet() || isDesktopSmall() ? FOUR_ITEMS : THREE_ITEMS;\n }\n\n this.lastTileIndex = !this.lastTileIndex ? this.itemsPerGrid : this.lastTileIndex;\n }\n\n @Listen(\"resize\", { target: \"window\" })\n @Watch(\"countOnDesktop\")\n @Watch(\"whiteColorScheme\")\n @Watch(\"totalItems\")\n onWindowresize() {\n this.carouselItemWrapper = [];\n this.aggregatorItems = [];\n this.tileItemWrapper = [];\n this.tileRowWrapper = [];\n if (this.layout === CONTENT_AGGREGATOR_LAYOUT_TILE) {\n // determines items per grid by view size\n this.handleItemsPerGrid();\n\n // detect last loaded tile item index\n this.handleLastTileIndex();\n /**\n * gridFormation() creates the grid layout and deals with filling up empty spaces, when number of columns\n * per row is less than the count per tile item depending on every viewport. (odd-even count)\n */\n this.gridFormation();\n } else if (\n this.layout === CONTENT_AGGREGATOR_LAYOUT_LIST ||\n this.layout === CONTENT_AGGREGATOR_LAYOUT_LIST_EXPANDED\n ) {\n this.contentAggregatorItems.map((item) => {\n this.aggregatorItems.push();\n });\n }\n }\n\n @Watch(\"gridSize\")\n reInitiateGrid() {\n this.lastTileIndex = this.itemsPerGrid;\n this.visibleTileItems = [];\n this.onWindowresize();\n }\n\n private increaseTileItems(): void {\n this.lastTileIndex += this.itemsPerGrid;\n this.onWindowresize();\n }\n\n private handleLastTileIndex(): void {\n // Defined count of tile items to be shown per row.\n // Mobile: 1, Tablet: 2, Small Desktop: 2, Medium and Large Desktop: 2 | 3\n const contentPerRowItem = this.handleCountOnDesktop();\n\n if (this.lastTileIndex > this.aggregatorItemsLength) {\n this.lastTileIndex = this.visibleTileItems.length > 0 ? this.visibleTileItems.length : this.aggregatorItemsLength;\n } else if (this.lastTileIndex < this.itemsPerGrid && this.lastTileIndex % contentPerRowItem !== 0) {\n for (let i = 0; i <= this.lastTileIndex % contentPerRowItem; i++) {\n this.lastTileIndex++;\n }\n }\n }\n\n gridFormation(): void {\n // determines visible tile items by last loaded index & total items length\n if (\n this.visibleTileItems.length < this.lastTileIndex &&\n this.visibleTileItems.length < this.aggregatorItemsLength\n ) {\n this.contentAggregatorItems.forEach((item) => {\n this.visibleTileItems.push(item);\n });\n }\n\n // deals with filling up empty spaces\n this.adjustGridVoidSpaces();\n\n this.tileRowWrapper.forEach((row) => {\n this.aggregatorItems.push(row);\n });\n }\n\n adjustGridVoidSpaces(): void {\n // Defined count of tile items to be shown per row.\n // Mobile: 1, Tablet: 2, Small Desktop: 2, Medium and Large Desktop: 2 | 3\n const contentPerRowItem = this.handleCountOnDesktop();\n\n const contentGridColumn =\n isDesktopMedium() || isDesktopLarge()\n ? \"grid-column-4\"\n : isTablet() || isDesktopSmall()\n ? \"grid-column-6\"\n : \"grid-column-12\";\n\n this.visibleTileItems.map((item, index) => {\n index++;\n this.tileItemWrapper.push(\n
\n );\n\n if (index % contentPerRowItem === 0 || index === this.visibleTileItems.length) {\n if (this.tileItemWrapper.length < contentPerRowItem) {\n for (let i = 0; i <= contentPerRowItem - this.tileItemWrapper.length; i++) {\n /**\n * if last tile item in row has an empty container for tile item due to odd count then a\n * new DIV wrapper is created to fill in the space for proper design adjustment\n */\n this.tileItemWrapper.push(\n \n );\n index++;\n }\n }\n\n // prevent empty columns if more items are available on window resize\n if (this.lastTileIndex % contentPerRowItem !== 0) {\n this.lastTileIndex++;\n }\n\n this.tileRowWrapper.push(\n \n {this.tileItemWrapper}\n \n );\n this.tileItemWrapper = [];\n }\n });\n }\n\n @Watch(\"scheme\")\n applyScheme() {\n applySchemeDelegate(this);\n }\n\n @Watch(\"activeScheme\")\n setCssVariables(): void {\n setCssVariablesDelegate(this);\n }\n\n render() {\n let content;\n\n if (this.layout === CONTENT_AGGREGATOR_LAYOUT_LIST || this.layout === CONTENT_AGGREGATOR_LAYOUT_LIST_EXPANDED) {\n content = (\n \n \n {this.aggregatorItems}\n \n );\n } else if (this.layout === CONTENT_AGGREGATOR_LAYOUT_TILE) {\n content = (\n
\n {this.aggregatorItems}\n {(() => {\n if (this.lastTileIndex < this.aggregatorItemsLength) {\n return (\n
\n
\n this.increaseTileItems()}\n >\n
\n
\n );\n }\n })()}\n
\n );\n } else {\n content = (\n \n {this.contentAggregatorItems.map((item) => {\n return ;\n })}\n \n );\n }\n\n return {content};\n }\n}\n"],"mappings":"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"}