{"version":3,"names":["sewWsServicesCss","SewWsServices","constructor","hostRef","this","activatePanel","clickedItem","active","i","host","children","length","currentElement","activePanel","openContent","renderPanels","Array","from","map","panel","h","onClick","class","inactive","gettrackmeEventCategory","gettrackmeEventObject","label","icon","size","height","width","itemClickedHandler","event","detail","checkIfBelowStage","previousSibling","nodeType","nodeName","classList","add","componentDidLoad","render","Host","key"],"sources":["src/components/website-components/sew-ws-services/sew-ws-services.scss?tag=sew-ws-services&encapsulation=shadow","src/components/website-components/sew-ws-services/sew-ws-services.tsx"],"sourcesContent":[":host {\n display: block;\n\n .panels {\n background-color: $color-grey-05-light;\n border-bottom: 4px solid $color-red;\n }\n\n .panel-grid {\n @include grid;\n }\n\n .panel-wrapper {\n grid-column: 2 / -2;\n position: relative;\n display: grid;\n grid-auto-columns: 1fr;\n grid-auto-flow: column;\n justify-items: center;\n column-gap: var(--column-gap);\n padding: 60px 0 36px;\n }\n\n .panel {\n border: 0;\n background-color: transparent;\n display: flex;\n justify-content: flex-start;\n align-items: center;\n flex-direction: column;\n text-align: center;\n transition: color 300ms;\n cursor: pointer;\n\n h2 {\n @include typo-ws-h4;\n\n margin: 20px 0 12px;\n }\n\n &::before {\n content: ' ';\n background-color: $color-grey-06-bright;\n border-top: 4px solid $color-red;\n border-left: 4px solid $color-red;\n bottom: 0;\n position: absolute;\n width: 20px;\n height: 20px;\n transform: translate(0, 53%) rotate(45deg);\n opacity: 0;\n transition: opacity 0.1s 0s;\n }\n\n &:hover {\n color: $color-red;\n\n .arrow-svg {\n transform: translate3d(0, 8px, 0);\n\n /* stylelint-disable-next-line selector-max-compound-selectors, max-nesting-depth */\n .shaft {\n opacity: 1;\n }\n }\n }\n\n &.active {\n .arrow-svg {\n transition: none;\n opacity: 0;\n }\n\n &::before {\n opacity: 1;\n transition: opacity 0.1s 0.6s;\n }\n }\n }\n\n .service-svg {\n align-self: center;\n display: block;\n width: 96px;\n color: $color-red;\n }\n\n .arrow-svg {\n color: $color-red;\n transition:\n opacity 300ms,\n transform 300ms;\n margin-top: auto;\n\n .shaft {\n opacity: 0;\n }\n }\n\n .inactive {\n color: $color-grey-03;\n\n .arrow-svg,\n sew-icon {\n color: inherit;\n }\n }\n}\n\n:host(.spacing) {\n @include component-spacing;\n}\n\n@include mq-1 {\n :host {\n .panels {\n display: none;\n }\n }\n}\n","import { Component, Host, h, Listen, State, Element } from '@stencil/core';\nimport { gettrackmeEventCategory, gettrackmeEventObject } from '../../../utils/tracking-helpers';\n\n@Component({\n tag: 'sew-ws-services',\n styleUrl: 'sew-ws-services.scss',\n shadow: true,\n})\nexport class SewWsServices {\n @Element() host: HTMLSewWsServicesElement;\n\n @State() activePanel: HTMLSewWsServicesItemElement;\n\n @Listen('itemClickedEmitter')\n itemClickedHandler(event: CustomEvent): void {\n this.activatePanel(event.detail.clickedItem, event.detail.active);\n }\n\n private checkIfBelowStage(): void {\n let previousSibling = this.host.previousSibling;\n\n // skip textnodes\n while (previousSibling && (previousSibling.nodeType != 1 || previousSibling.nodeName === 'A')) {\n previousSibling = previousSibling.previousSibling;\n }\n\n if (!previousSibling || previousSibling.nodeName !== 'SEW-WS-STAGE') {\n this.host.classList.add('spacing');\n }\n }\n\n private activatePanel = (clickedItem: HTMLSewWsServicesItemElement, active: boolean) => {\n for (let i = 0; i < this.host.children.length; i++) {\n const currentElement = this.host.children[i] as HTMLSewWsServicesItemElement;\n\n if (!!this.activePanel && currentElement === clickedItem && this.activePanel !== clickedItem) {\n currentElement.openContent = true;\n } else {\n currentElement.openContent = false;\n }\n\n if (currentElement === clickedItem) {\n currentElement.active = active;\n this.activePanel = active ? currentElement : null;\n } else {\n currentElement.active = false;\n }\n }\n };\n\n private renderPanels = () => {\n return Array.from(this.host.children).map((panel: HTMLSewWsServicesItemElement) => {\n return (\n this.activatePanel(panel, !panel.active)}\n class={{\n panel: true,\n active: panel === this.activePanel,\n inactive: !!this.activePanel && this.activePanel !== panel,\n }}\n data-sew-trackme-event-category={gettrackmeEventCategory('Services ')}\n data-sew-trackme-event-object={gettrackmeEventObject('Services_' + panel.label)}\n data-sew-trackme-event-action=\"Click\"\n >\n \n

{panel.label}

\n \n \n );\n });\n };\n\n componentDidLoad(): void {\n this.checkIfBelowStage();\n }\n\n render() {\n return (\n \n
\n
\n
{this.renderPanels()}
\n
\n
\n \n \n );\n }\n}\n"],"mappings":"oGAAA,MAAMA,EAAmB,0qE,MCQZC,EAAa,MAL1B,WAAAC,CAAAC,G,UA4BYC,KAAAC,cAAgB,CAACC,EAA2CC,KAChE,IAAK,IAAIC,EAAI,EAAGA,EAAIJ,KAAKK,KAAKC,SAASC,OAAQH,IAAK,CAChD,MAAMI,EAAiBR,KAAKK,KAAKC,SAASF,GAE1C,KAAMJ,KAAKS,aAAeD,IAAmBN,GAAeF,KAAKS,cAAgBP,EAAa,CAC1FM,EAAeE,YAAc,I,KAC1B,CACHF,EAAeE,YAAc,K,CAGjC,GAAIF,IAAmBN,EAAa,CAChCM,EAAeL,OAASA,EACxBH,KAAKS,YAAcN,EAASK,EAAiB,I,KAC1C,CACHA,EAAeL,OAAS,K,IAK5BH,KAAYW,aAAG,IACZC,MAAMC,KAAKb,KAAKK,KAAKC,UAAUQ,KAAKC,GAEnCC,EAAA,UACIC,QAAS,IAAMjB,KAAKC,cAAcc,GAAQA,EAAMZ,QAChDe,MAAO,CACHH,MAAO,KACPZ,OAAQY,IAAUf,KAAKS,YACvBU,WAAYnB,KAAKS,aAAeT,KAAKS,cAAgBM,GACxD,kCACgCK,EAAwB,aAAY,gCACtCC,EAAsB,YAAcN,EAAMO,OAAM,gCACjD,SAE9BN,EAAU,YAAAE,MAAM,cAAcK,KAAMR,EAAMQ,KAAMC,KAAK,KAAKC,OAAO,OAAOC,MAAM,OAC9EV,EAAK,UAAAD,EAAMO,OACXN,EAAA,YAAUE,MAAM,YAAYK,KAAK,aAAaC,KAAK,QAsBtE,CA1EG,kBAAAG,CAAmBC,GACf5B,KAAKC,cAAc2B,EAAMC,OAAO3B,YAAa0B,EAAMC,OAAO1B,O,CAGtD,iBAAA2B,GACJ,IAAIC,EAAkB/B,KAAKK,KAAK0B,gBAGhC,MAAOA,IAAoBA,EAAgBC,UAAY,GAAKD,EAAgBE,WAAa,KAAM,CAC3FF,EAAkBA,EAAgBA,e,CAGtC,IAAKA,GAAmBA,EAAgBE,WAAa,eAAgB,CACjEjC,KAAKK,KAAK6B,UAAUC,IAAI,U,EA6ChC,gBAAAC,GACIpC,KAAK8B,mB,CAGT,MAAAO,GACI,OACIrB,EAACsB,EAAI,CAAAC,IAAA,4CACDvB,EAAK,OAAAuB,IAAA,2CAAArB,MAAM,UACPF,EAAK,OAAAuB,IAAA,2CAAArB,MAAM,cACPF,EAAK,OAAAuB,IAAA,2CAAArB,MAAM,iBAAiBlB,KAAKW,kBAGzCK,EAAa,QAAAuB,IAAA,6C","ignoreList":[]}