{"version":3,"names":["sewDialogCss","SewDialog","constructor","hostRef","this","ws","type","size","iconMapping","info","attention","warning","error","valid","closeOnEscape","e","key","closeDialog","componentWillLoad","el","querySelectorAll","forEach","video","vid","removeAttribute","setAttribute","document","addEventListener","componentWillRender","open","body","classList","add","startVideo","remove","close","emit","pauseVideo","disconnectedCallback","removeEventListener","render","buttons","hasButtons","length","button","ellipsis","h","Host","class","Object","assign","dialog","status","icon","content","label","headline","innerHTML","name","closeButton","onClick"],"sources":["src/components/sew-dialog/sew-dialog.scss?tag=sew-dialog&encapsulation=shadow","src/components/sew-dialog/sew-dialog.tsx"],"sourcesContent":[":host {\n --dialog-color: var(--color-background-interaction-secondary-contrast);\n --status-color: var(--color-text-inverted);\n\n display: none;\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n z-index: 1001;\n background-color: rgba(0, 0, 0, 0.2);\n overflow: auto;\n\n .grid {\n @include grid;\n\n align-items: center;\n height: 100%;\n }\n\n .dialog-wrapper {\n padding: 16px 0;\n }\n\n .dialog {\n display: block;\n background-color: var(--color-background-interaction-tertiary-default);\n box-shadow: var(--shadow-large);\n }\n\n .status {\n font-family: 'Helvetica Now Text Bold', sans-serif;\n font-size: 18px;\n line-height: 48px;\n color: var(--status-color);\n background-color: var(--dialog-color);\n padding: 0 24px;\n border-width: 2px 0;\n display: flex;\n align-items: center;\n\n .svg {\n width: 24px;\n margin-right: 8px;\n }\n }\n\n .status-border {\n border-top: 4px solid var(--dialog-color);\n }\n\n .content {\n position: relative;\n padding: 12px 24px 24px;\n }\n\n .label {\n @include typo-ws-paragraph;\n\n color: var(--color-text-secondary);\n }\n\n .headline-wrapper {\n display: flex;\n column-gap: 8px;\n width: calc(100% - 30px);\n\n slot {\n flex-shrink: 0;\n display: block;\n position: relative;\n top: -2px;\n }\n }\n\n h3 {\n @include typo-ws-h3;\n\n color: var(--color-text-default);\n margin: 0 0 24px;\n display: flex;\n align-items: center;\n }\n\n button {\n all: unset;\n position: absolute;\n top: 16px;\n right: 20px;\n width: 24px;\n color: var(--color-icon-default);\n cursor: pointer;\n outline-offset: -1px;\n\n &:focus {\n outline: 2px solid var(--color-border-interaction-focus);\n outline-offset: 2px;\n }\n }\n\n slot[name='button'] {\n border-top: 1px solid var(--color-border-separator-primary);\n padding: 12px;\n display: flex;\n justify-content: flex-end;\n }\n}\n\n:host([type='attention']) {\n --dialog-color: var(--color-background-hint-attention-ansi);\n --status-color: var(--color-text-light);\n}\n\n:host([type='warning']) {\n --dialog-color: var(--color-background-hint-warning-default);\n --status-color: $color-brand-iron100;\n}\n\n:host([type='warning-ansi']) {\n --dialog-color: var(--color-background-hint-warning-ansi);\n --status-color: $color-brand-iron100;\n}\n\n:host([type='error']) {\n --dialog-color: var(--color-background-hint-error);\n --status-color: var(--color-text-light);\n}\n\n:host([type='valid']) {\n --dialog-color: var(--color-background-hint-valid);\n --status-color: var(--color-text-light);\n}\n\n:host([open]) {\n display: block;\n}\n\n:host([size='xs']) {\n .dialog-wrapper {\n grid-area: 1 / 6 / 2 / -6;\n\n @include mq-1 {\n grid-area: 1 / 3 / 2 / -3;\n }\n }\n}\n\n:host([size='s']) {\n .dialog-wrapper {\n grid-area: 1 / 5 / 2 / -5;\n\n @include mq-1 {\n grid-area: 1 / 3 / 2 / -3;\n }\n }\n}\n\n:host([size='m']) {\n .dialog-wrapper {\n grid-area: 1 / 4 / 2 / -4;\n\n @include mq-2 {\n grid-area: 1 / 4 / 2 / -4;\n }\n\n @include mq-1 {\n grid-area: 1 / 2 / 2 / -2;\n }\n }\n}\n\n:host([size='l']) {\n .dialog-wrapper {\n grid-area: 1 / 3 / 2 / -3;\n\n @include mq-2 {\n grid-area: 1 / 2 / 2 / -2;\n }\n }\n}\n\n::slotted(p) {\n @include typo-ws-paragraph;\n\n color: var(--color-text-secondary);\n margin: 0;\n}\n\n::slotted(sew-button) {\n margin-left: 8px;\n}\n\n::slotted(sew-ws-button) {\n margin-left: 20px;\n}\n\n::slotted(sew-button:first-of-type),\n::slotted(sew-ws-button:first-of-type) {\n margin-left: 0;\n}\n\n@mixin button-slot {\n slot[name='button'] {\n display: flex;\n flex-direction: column;\n flex-basis: 100%;\n padding: 8px 24px 24px;\n }\n}\n\n@mixin slotted-buttons {\n ::slotted(sew-button),\n ::slotted(sew-ws-button) {\n margin-left: 0;\n margin-top: 16px;\n }\n\n ::slotted(sew-button):first-of-type,\n ::slotted(sew-ws-button):first-of-type {\n margin-top: 0;\n }\n}\n\n:host(.squeezed-buttons) {\n @include button-slot;\n @include slotted-buttons;\n}\n\n@include mq-1 {\n @include slotted-buttons;\n :host {\n @include button-slot;\n }\n}\n\n// website adaptions\n:host(.sew-ws) {\n --dialog-color: #{$color-red};\n --status-color: #{$color-white};\n\n .label {\n font-size: 12px;\n text-transform: uppercase;\n }\n\n .headline-wrapper {\n slot {\n top: 1px;\n }\n }\n\n h3 {\n margin: 0 0 12px;\n }\n\n .content {\n padding: 60px 40px 24px;\n\n &.has-headlines {\n padding-top: 30px;\n }\n }\n\n ::slotted(p) {\n color: $color-grey-01-dark;\n }\n\n slot[name='button'] {\n border-top: 0;\n padding: 0 40px 40px;\n }\n}\n\n:host(.sew-ws[type='blank']) {\n .status-border {\n border-top: 0;\n }\n}\n\n@include mq-1 {\n :host(.sew-ws) {\n .content {\n padding: 60px 20px 24px;\n }\n\n slot[name='button'] {\n padding: 0 20px 32px;\n }\n }\n}\n","import { Component, Host, h, Prop, Element, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n tag: 'sew-dialog',\n styleUrl: 'sew-dialog.scss',\n shadow: true,\n})\nexport class SewDialog {\n @Element() public el: HTMLSewDialogElement;\n /**\n * Sets the styles to the sew-ws theme. Default is false.\n */\n @Prop() ws = false;\n @Prop({ reflect: true }) type = 'info';\n @Prop() headline: string;\n @Prop() label?: string;\n @Prop() status: string;\n @Prop() closeButton: boolean;\n @Prop({ reflect: true }) open: boolean;\n @Prop({ reflect: true }) size = 'xs';\n @Event() close: EventEmitter;\n\n private iconMapping = {\n 'info': 'info-filled',\n 'attention': 'info-filled',\n 'warning': 'warning-filled',\n 'warning-ansi': 'warning-filled',\n 'error': 'wrong-filled',\n 'valid': 'check-circle-filled',\n };\n\n componentWillLoad(): void {\n this.el.querySelectorAll('sew-video[autoplay]').forEach(video => {\n const vid = video as HTMLSewVideoElement;\n\n vid.removeAttribute('autoplay');\n vid.setAttribute('data-autoplay', 'true');\n });\n\n document.addEventListener('keydown', this.closeOnEscape);\n }\n\n private closeOnEscape = (e: KeyboardEvent) => {\n if (e.key === 'Escape') {\n this.closeDialog();\n }\n };\n\n componentWillRender(): void {\n if (this.open) {\n document.body.classList.add('sew-modal-open');\n this.el\n .querySelectorAll('sew-video[data-autoplay]')\n .forEach(video => (video as HTMLSewVideoElement).startVideo());\n } else {\n document.body.classList.remove('sew-modal-open');\n }\n\n this.el.addEventListener('buttonIsSqueezed', () => {\n this.el.classList.add('squeezed-buttons');\n });\n }\n\n private closeDialog() {\n document.body.classList.remove('sew-modal-open');\n this.open && this.close.emit(true);\n this.open = false;\n this.el.querySelectorAll('sew-video').forEach(video => video.pauseVideo());\n }\n\n disconnectedCallback(): void {\n document.removeEventListener('keydown', this.closeOnEscape);\n this.open = false;\n this.closeDialog();\n }\n\n render() {\n // TODO: test with non ws dialog\n const buttons = this.el.querySelectorAll('[slot=\"button\"]');\n const hasButtons = buttons.length > 0;\n buttons.forEach(button => {\n button.ellipsis = false;\n });\n\n return (\n \n
\n
\n \n {this.status && (\n
\n \n {this.status}\n
\n )}\n \n {this.label &&
{this.label}
}\n
\n {this.headline &&

}\n \n
\n {this.closeButton && (\n {\n this.closeDialog();\n }}\n >\n \n \n )}\n \n
\n {hasButtons && }\n
\n \n \n \n );\n }\n}\n"],"mappings":"gEAAA,MAAMA,EAAe,olK,MCORC,EAAS,MALtB,WAAAC,CAAAC,G,uCAUYC,KAAEC,GAAG,MACYD,KAAIE,KAAG,OAMPF,KAAIG,KAAG,KAGxBH,KAAAI,YAAc,CAClBC,KAAQ,cACRC,UAAa,cACbC,QAAW,iBACX,eAAgB,iBAChBC,MAAS,eACTC,MAAS,uBAcLT,KAAAU,cAAiBC,IACrB,GAAIA,EAAEC,MAAQ,SAAU,CACpBZ,KAAKa,a,EAkFhB,CA/FG,iBAAAC,GACId,KAAKe,GAAGC,iBAAiB,uBAAuBC,SAAQC,IACpD,MAAMC,EAAMD,EAEZC,EAAIC,gBAAgB,YACpBD,EAAIE,aAAa,gBAAiB,OAAO,IAG7CC,SAASC,iBAAiB,UAAWvB,KAAKU,c,CAS9C,mBAAAc,GACI,GAAIxB,KAAKyB,KAAM,CACXH,SAASI,KAAKC,UAAUC,IAAI,kBAC5B5B,KAAKe,GACAC,iBAAiB,4BACjBC,SAAQC,GAAUA,EAA8BW,c,KAClD,CACHP,SAASI,KAAKC,UAAUG,OAAO,iB,CAGnC9B,KAAKe,GAAGQ,iBAAiB,oBAAoB,KACzCvB,KAAKe,GAAGY,UAAUC,IAAI,mBAAmB,G,CAIzC,WAAAf,GACJS,SAASI,KAAKC,UAAUG,OAAO,kBAC/B9B,KAAKyB,MAAQzB,KAAK+B,MAAMC,KAAK,MAC7BhC,KAAKyB,KAAO,MACZzB,KAAKe,GAAGC,iBAAiB,aAAaC,SAAQC,GAASA,EAAMe,c,CAGjE,oBAAAC,GACIZ,SAASa,oBAAoB,UAAWnC,KAAKU,eAC7CV,KAAKyB,KAAO,MACZzB,KAAKa,a,CAGT,MAAAuB,GAEI,MAAMC,EAAUrC,KAAKe,GAAGC,iBAAyC,mBACjE,MAAMsB,EAAaD,EAAQE,OAAS,EACpCF,EAAQpB,SAAQuB,IACZA,EAAOC,SAAW,KAAK,IAG3B,OACIC,EAACC,EAAI,CAAA/B,IAAA,2CAACgC,MAAO,CAAE,SAAU5C,KAAKC,KAC1ByC,EAAK,OAAA9B,IAAA,2CAAAgC,MAAM,QACPF,EAAK,OAAA9B,IAAA,2CAAAgC,MAAM,kBACPF,EACI,OAAA9B,IAAA,2CAAAgC,MACIC,OAAAC,OAAA,CAAAC,OAAQ,MACJ/C,KAAKgD,SAAW,KAAO,CAAE,iBAAkBhD,KAAKgD,QAAW,KAGlEhD,KAAKgD,QACFN,EAAK,OAAA9B,IAAA,2CAAAgC,MAAM,UACPF,EAAA,YAAA9B,IAAA,2CAAUgC,MAAM,MAAMK,KAAMjD,KAAKI,YAAYJ,KAAKE,QACjDF,KAAKgD,QAGdN,EACI,OAAA9B,IAAA,2CAAAgC,MAAO,CAAEM,QAAW,KAAM,kBAAmBlD,KAAKmD,SAAWnD,KAAKoD,WAEjEpD,KAAKmD,OAAST,EAAK,OAAA9B,IAAA,2CAAAgC,MAAM,SAAS5C,KAAKmD,OACxCT,EAAK,OAAA9B,IAAA,2CAAAgC,MAAM,oBACN5C,KAAKoD,UAAYV,EAAA,MAAA9B,IAAA,2CAAIyC,UAAWrD,KAAKoD,WACtCV,EAAA,QAAA9B,IAAA,2CAAM0C,KAAK,UAEdtD,KAAKuD,aACFb,EAAA,UAAA9B,IAAA,2CACI4C,QAAS,KACLxD,KAAKa,aAAa,GAGtB6B,EAAA,YAAA9B,IAAA,2CAAUqC,KAAK,WAGvBP,EAAA,QAAA9B,IAAA,8CAEH0B,GAAcI,EAAM,QAAA9B,IAAA,2CAAA0C,KAAK,c","ignoreList":[]}