import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-3ded372f.js';
import { d as debounce } from './debounce-5b0b5e9a.js';
import { g as getViewportWidth } from './getViewportWidth-cada4b08.js';
import { t as throttle } from './throttle-ef9f8f11.js';
const whiteCircle = (id) => ``;
const greenCircle = (id) => ``;
const interactiveTileCss = ".ux-iws-interactive-tile{position:relative;background:-webkit-gradient(linear, right top, left top, from(rgba(40, 81, 114, 0.65)), color-stop(70%, rgba(40, 81, 114, 0.95)), to(#285172));background:linear-gradient(to left, rgba(40, 81, 114, 0.65) 0%, rgba(40, 81, 114, 0.95) 70%, #285172 100%);color:#fff;-ms-flex:1 1;flex:1 1;display:-ms-flexbox;display:flex;-webkit-transition:height 500ms ease, background 500ms ease, padding 500ms ease;transition:height 500ms ease, background 500ms ease, padding 500ms ease}.ux-iws-interactive-tile:not(:last-child){border-bottom:1px solid #e2e2e2}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile{background:-webkit-gradient(linear, left top, left bottom, from(rgba(40, 81, 114, 0.65)), color-stop(70%, rgba(40, 81, 114, 0.95)), to(#285172));background:linear-gradient(to bottom, rgba(40, 81, 114, 0.65) 0%, rgba(40, 81, 114, 0.95) 70%, #285172 100%)}}.ux-iws-interactive-tile__content-wrapper{padding:32px 30px}@media only screen and (min-width: 568px){.ux-iws-interactive-tile__content-wrapper{padding:44px 60px 44px 30px}}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__content-wrapper{padding:30px;display:block;-ms-flex-item-align:end;align-self:flex-end;padding-top:125px}}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__content-wrapper--static{-ms-flex-item-align:start;align-self:flex-start;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-ms-flex-item-align:stretch;align-self:stretch}}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__content-wrapper::after{content:\"\";position:absolute;z-index:auto;top:0;right:-1px;display:block;content:\"\";height:100%;width:2px;background:-webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.25)));background:linear-gradient(to bottom, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0.25) 100%)}}.ux-iws-interactive-tile__header{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;margin-right:50px}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__header{-ms-flex-direction:column;flex-direction:column;-ms-flex-align:start;align-items:flex-start;margin-right:0}}.ux-iws-interactive-tile__icon-container{margin-right:15px}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__icon-container{margin-right:0;margin-bottom:25px}}.ux-iws-interactive-tile__icon-container .ux-icon{fill:#fff;font-size:45px}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__icon-container .ux-icon{font-size:65px}}.ux-iws-interactive-tile *[slot=headline]{color:#fff;font-size:18px;line-height:24px}@media only screen and (min-width: 768px){.ux-iws-interactive-tile *[slot=headline]{font-size:20px;line-height:26px}}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile *[slot=headline]{font-size:22px;line-height:28px;width:100%}}.ux-iws-interactive-tile *[slot=copy-text] *{color:#fff !important}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile *[slot=link]{margin-top:auto}}.ux-iws-interactive-tile a:hover{color:#fff}.ux-iws-interactive-tile a:hover .ux-icon{color:#fff}.ux-iws-interactive-tile__content{-ms-flex:1 0 auto;flex:1 0 auto;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column}.ux-iws-interactive-tile__content--interactive{height:0;overflow:hidden;max-height:1500px;-webkit-transition:height 250ms ease;transition:height 250ms ease}@media (max-width: 1023px){.ux-iws-interactive-tile__content--interactive{max-height:1500px}}@media (max-width: 768px){.ux-iws-interactive-tile__content--interactive{max-height:2250px}}.ux-iws-interactive-tile__up-arrow{display:block;position:absolute;top:35px;right:30px}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__up-arrow{position:absolute;width:100%;right:0;top:auto;bottom:10px;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center;-ms-flex-align:center;align-items:center}}.ux-iws-interactive-tile__number{font-size:22px}@media only screen and (min-width: 768px){.ux-iws-interactive-tile__number{font-size:30px}}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__number{font-size:34px}}.ux-iws-interactive-tile__number--green{color:#bbd03a !important}.ux-iws-interactive-tile__number-container{width:50px;min-width:50px;height:50px;margin-right:10px;display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;position:relative}@media only screen and (min-width: 768px){.ux-iws-interactive-tile__number-container{min-width:65px;height:65px}}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__number-container{min-width:75px;height:75px;margin-bottom:15px}}.ux-iws-interactive-tile__number-circle{position:absolute;top:0;left:0;width:100%;height:100%}.ux-iws-interactive-tile__up-arrow .ux-icon[name=arrow-down]{fill:#bbd03a}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile__up-arrow .ux-icon[name=arrow-down]{-webkit-transform:rotate(180deg);transform:rotate(180deg)}}.ux-iws-interactive-tile--interactive{cursor:pointer}.ux-iws-interactive-tile--active{background:-webkit-gradient(linear, left top, right top, from(rgba(187, 208, 58, 0.65)), color-stop(70%, rgba(187, 208, 58, 0.95)), to(#bbd03a));background:linear-gradient(to right, rgba(187, 208, 58, 0.65) 0%, rgba(187, 208, 58, 0.95) 70%, #bbd03a 100%)}.ux-iws-interactive-tile--active *[slot=link] a{color:#fff}.ux-iws-interactive-tile--active *[slot=link] a:hover{color:#285172}@media only screen and (min-width: 568px){.ux-iws-interactive-tile--with-number .ux-iws-interactive-tile__content-wrapper{padding:30px 60px 30px 30px}}@media only screen and (min-width: 1024px){.ux-iws-interactive-tile--with-number .ux-iws-interactive-tile__content-wrapper{padding:30px;padding-top:125px}}";
let InteractiveTiles = class {
constructor(hostRef) {
registerInstance(this, hostRef);
this.interactiveTileSelected = createEvent(this, "uxInteractiveTileSelected", 7);
this.interactiveTileHeight = createEvent(this, "uxInteractiveTileHeight", 7);
this.baseClass = "ux-iws-interactive-tile";
/** if set, the content of the tiles will be interactive */
this.interactive = false;
/** if set, the tile will be active */
this.active = false;
this.isSelected = false;
this.isHovered = false;
this.contentHeight = 0;
this.viewportWidth = 0;
this.minimumTileHeight = 0;
this.onResize = debounce(() => {
this.resetContentHeight();
this.viewportWidth = getViewportWidth();
}, 200);
this.resetContentHeight = () => {
this.contentHeight = null;
};
this.setContentHeight = () => {
if (this.viewportWidth < 1024)
this.contentHeight = this.content.scrollHeight;
else {
let contentElementMaxHeight = 0;
const contentElements = this.element.parentElement.querySelectorAll(`.${this.baseClass}__content`);
contentElements.forEach((contentElement) => {
const contentElementHeight = contentElement.scrollHeight;
if (contentElementHeight > contentElementMaxHeight)
contentElementMaxHeight = contentElementHeight;
});
this.contentHeight = contentElementMaxHeight;
}
};
this.handleMouseEnter = throttle(() => {
this.isHovered = true;
}, 500);
this.handleMouseLeave = () => (this.isHovered = false);
this.handleSelected = () => {
this.isSelected = !this.isSelected;
this.interactiveTileSelected.emit();
};
}
connectedCallback() {
this.idIconGradient1 = ++gradientIdCounter;
this.idIconGradient2 = ++gradientIdCounter;
}
/** method used from the parent component to get the height of the content element */
async getContentHeight() {
return this.contentHeight;
}
/** method used from the parent component to get the height of the content wrapper element */
async getContentWrapperHeight() {
let height = 0;
if (this.iconName && this.tileIcon.scrollHeight !== 65) {
height = this.contentWrapper.getBoundingClientRect().height + 65;
}
else
height = this.contentWrapper.getBoundingClientRect().height;
return height;
}
componentWillLoad() {
this.viewportWidth = getViewportWidth();
}
componentDidLoad() {
this.setContentHeight();
}
handleResize() {
this.onResize();
}
handleTileSelectedEvent(e) {
const eTarget = e.target;
if (eTarget.parentElement !== this.element.parentElement)
return;
if (this.element === eTarget)
return;
this.isSelected = false;
}
setActiveState() {
if (this.isSelected || this.isHovered)
this.active = true;
else
this.active = false;
}
adjustContentHeight() {
if (this.contentHeight === null)
setTimeout(() => this.setContentHeight());
}
render() {
const isActive = this.isHovered || this.isSelected;
return (h(Host, { class: {
[this.baseClass]: true,
[`${this.baseClass}--interactive`]: this.interactive,
[`${this.baseClass}--active`]: isActive,
[`${this.baseClass}--with-number`]: !!this.number,
}, onMouseEnter: this.interactive && this.handleMouseEnter, onMouseLeave: this.interactive && this.handleMouseLeave, onClick: this.interactive && this.handleSelected, onKeyDown: this.interactive && this.handleSelected, tabindex: this.interactive ? "0" : null }, h("div", { class: {
[`${this.baseClass}__content-wrapper`]: true,
[`${this.baseClass}__content-wrapper--static`]: !this
.interactive,
}, ref: (el) => (this.contentWrapper = el) }, h("div", { class: `${this.baseClass}__header` }, this.iconName && this.iconName !== "" && (h("div", { class: `${this.baseClass}__icon-container` }, h("ux-icon", { ref: (el) => (this.tileIcon = el), name: this.iconName }))), this.number && this.number !== "" && (h("div", { class: `${this.baseClass}__number-container` }, h("span", { class: {
[`${this.baseClass}__number`]: true,
[`${this.baseClass}__number--green`]: !this.active && this.interactive,
} }, this.number), h("div", { class: `${this.baseClass}__number-circle`, innerHTML: this.active || !this.interactive
? whiteCircle(this.idIconGradient1)
: greenCircle(this.idIconGradient2) }))), h("slot", { name: "headline" })), h("div", { class: {
[`${this.baseClass}__content`]: true,
[`${this.baseClass}__content--interactive`]: this
.interactive,
[`${this.baseClass}__content--active`]: isActive,
}, style: this.interactive
? {
height: isActive
? `${this.contentHeight}px`
: `0px`,
}
: null, ref: (el) => (this.content = el), "aria-hidden": this.interactive && !isActive ? "true" : null }, h("div", { class: "ux-text-normal", "data-same-height": "text" }, h("slot", { name: "copy-text" })), h("slot", { name: "link" }))), this.interactive && !isActive && (h("div", { class: `${this.baseClass}__up-arrow` }, h("ux-icon", { name: "arrow-down" })))));
}
get element() { return getElement(this); }
static get watchers() { return {
"isSelected": ["setActiveState"],
"isHovered": ["setActiveState"],
"contentHeight": ["adjustContentHeight"]
}; }
};
/** this variable is incremented by each instance */
let gradientIdCounter = 0;
InteractiveTiles.style = interactiveTileCss;
export { InteractiveTiles as ux_iws_interactive_tile };