{"version":3,"file":"link-CnGXQFgn.js","sources":["../../../../../frontend/src/components/icon/icon.styles.ts","../../../../../frontend/src/components/icon/icon.ts","../../../../../frontend/src/components/link/link.styles.ts","../../../../../frontend/src/components/link/link.ts"],"sourcesContent":["import { css, unsafeCSS } from 'lit';\nimport { sbkCoreBreakpointMd } from '@/tokens/variables.js'\n\nconst breakpointMd = unsafeCSS(`${sbkCoreBreakpointMd}`);\n\nexport const style = css`\n :host {\n display: flex;\n box-sizing: border-box;\n }\n\n .icon {\n box-sizing: border-box;\n fill: currentColor;\n }\n\n .icon-16 {\n height: 16px;\n width: 16px;\n }\n\n .icon-20 {\n height: 20px;\n width: 20px;\n }\n\n .icon-24 {\n height: 24px;\n width: 24px;\n }\n\n .icon-32 {\n height: 32px;\n width: 32px;\n }\n\n .icon-40 {\n height: 40px;\n width: 40px;\n }\n\n .icon-64 {\n height: 64px;\n width: 64px;\n }\n\n .icon-88 {\n height: 88px;\n width: 88px;\n }\n\n .icon-112 {\n height: var(--sbkModalSizingImageHeight);\n width: var(--sbkModalSizingImageHeight);\n }\n\n .icon-24.responsive {\n height: 20px;\n width: 20px;\n\n @media screen and (min-width: ${breakpointMd}) {\n height: 24px;\n width: 24px;\n }\n }\n\n :host([symbol=\"badge-new-german\"]), :host([symbol=\"badge-new-english\"]) {\n display: inline-flex;\n margin-right: var(--sbkCoreSpacing4xs);\n vertical-align: text-bottom;\n }\n`;\n","import { SbkElement } from '../../configuration/sbk-element.ts';\nimport { customElement, property } from 'lit/decorators.js';\nimport { style } from './icon.styles';\nimport { html, nothing } from 'lit';\nimport { when } from 'lit/directives/when.js';\n\n\n@customElement('sbk-icon')\nexport class SbkIcon extends SbkElement {\n\n @property({type: String})\n symbol = '';\n\n @property({type: String})\n size?: '16' | '20' | '24' | '32' | '40' | '64' | '88' | '112' = '24';\n\n @property({type: String})\n description= '';\n\n @property({type: Boolean})\n responsive= false;\n\n static get styles() {\n return style;\n }\n\n render() {\n const ariaDescriptionReference = this.description ? 'icon-title' : false;\n const spriteUrl = location.port === '5173' || location.port === '6006' || location.hostname.includes('storybook') ? '/icons/sprite.svg' : '/typo3conf/ext/mms_sbk_sitepackage/Resources/Public/icons/sprite.svg'\n return html`\n \n `;\n\n }\n}\n","import { css, unsafeCSS } from \"lit\";\nimport { sbkCoreBreakpointMd, sbkCoreBreakpointXl } from \"@/tokens/variables\";\n\nconst breakpointXl = unsafeCSS(`${sbkCoreBreakpointXl}`);\nconst breakpointMd = unsafeCSS(`${sbkCoreBreakpointMd}`);\n\nexport const style = css`\n :host {\n --link-border-focus: var(--_link-border-focus, var(--sbkLinkBorderOnLightFocus));\n --link-color: var(--_link-color, var(--sbkLinkFgColorOnLightEnabled));\n --link-color-hover: var(--_link-color-hover, var(--sbkLinkFgColorOnLightHover));\n --link-color-active: var(--_link-color-active, var(--sbkLinkFgColorOnLightActive));\n --link-color-disabled: var(--_link-color-disabled, var(--sbkLinkFgColorOnLightDisabled));\n --link-color-visited: var(--_link-color-visited, var(--sbkLinkFgColorOnLightVisited));\n --link-color-selected: var(--_link-color-selected, var(--sbkLinkFgColorOnLightSelected));\n box-sizing: border-box;\n display: inline-block;\n }\n\n :host([variant=\"underlined\"]) {\n display: inline;\n position: relative;\n }\n\n .link-wrapper {\n display: flex;\n align-items: center;\n \n &.link-wrapper-underlined {\n display: inline;\n \n @media all and (max-width: ${breakpointXl}) {\n height: 100%;\n }\n\n .link {\n position: relative;\n display: inline;\n background-color: unset;\n outline: 2px solid transparent;\n outline-offset: 2px;\n border: none;\n cursor: pointer;\n color: var(--link-color);\n padding: 0;\n text-align: left;\n overflow-wrap: break-word;\n word-break: break-word;\n hyphens: auto;\n transition: text-decoration 0.3s;\n width: fit-content;\n text-decoration-color: transparent;\n text-decoration-thickness: 2px;\n text-decoration-line: underline;\n text-underline-offset: 4px;\n\n &.break-all {\n word-break: break-all;\n }\n\n &.link--icon-position-left {\n padding-left: 25px;\n\n &.link-underlined-xs {\n padding-left: 20px;\n\n sbk-icon {\n left: -20px;\n top: 2px;\n }\n }\n\n .link__icon {\n margin-right: var(--sbkLinkSpacing4xs);\n }\n\n sbk-icon {\n left: -25px;\n top: 0;\n }\n }\n\n &.link--icon-position-right {\n &.link-underlined-xs {\n sbk-icon {\n top: 2px;\n }\n }\n\n .link__icon {\n margin-left: var(--sbkLinkSpacing4xs);\n }\n\n sbk-icon {\n right: -22px;\n top: 0;\n @media all and (min-width: ${breakpointXl}) {\n right: -20px;\n }\n }\n }\n }\n\n sbk-icon {\n position: absolute;\n }\n }\n }\n\n .link-wrapper.right {\n margin-right: 24px;\n &.link-xs {\n margin-right: 20px;\n }\n @media all and (max-width: ${breakpointXl}) {\n height: 100%;\n }\n }\n\n .link {\n display: flex;\n background-color: unset;\n gap: var(--sbkLinkSpacing4xs);\n align-items: flex-start;\n outline: transparent solid 2px;\n outline-offset: var(--sbkLinkBorderGapFocus);\n border-radius: var(--sbkLinkBorderRadiusFocus);\n border: none;\n cursor: pointer;\n text-decoration: none;\n color: var(--link-color);\n fill: currentcolor;\n padding: 0px;\n font: inherit;\n overflow-wrap: break-word;\n word-break: break-word;\n hyphens: auto;\n\n\n &.break-all {\n word-break: break-all;\n }\n\n &.link-icon-navigation {\n font: var(--sbkLinkBold2xs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link__text {\n align-self: center;\n }\n\n .link__icon {\n position: relative;\n top: 0;\n }\n\n &.link-underlined-md {\n .link__icon {\n margin-top: 0;\n }\n }\n \n sbk-icon {\n &.xs {\n height: 20px;\n }\n &.size-2xs {\n height: 20px;\n }\n \n @media all and (min-width: ${breakpointXl}) {\n ~ .link__text {\n position: relative;\n top: -2px;\n }\n }\n }\n\n &:not(.link--selected):visited {\n color: var(--link-color-visited);\n }\n\n &:not(.link--selected):active {\n color: var(--link-color-active);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n &:focus-visible {\n outline: var(--link-border-focus);\n }\n\n @media (hover: hover) and (pointer: fine) {\n &:not(.link--selected):hover {\n @media all and (min-width: ${breakpointMd}) {\n color: var(--link-color-hover);\n\n .link__text {\n text-decoration: underline;\n }\n }\n }\n }\n }\n\n .link--selected {\n color: var(--link-color-selected);\n }\n\n .link--disabled {\n color: var(--link-color-disabled);\n cursor: not-allowed;\n margin: 0;\n padding: 0;\n display: inline-block;\n outline: 2px solid transparent;\n outline-offset: var(--sbkLinkBorderGapFocus);\n border-radius: var(--sbkLinkBorderRadiusFocus);\n border: none;\n text-decoration: none;\n fill: currentColor;\n }\n\n .link-regular-bold {\n font-weight: 700;\n }\n\n .link-regular-2xs {\n font: var(--sbkLinkRegular2xs);\n }\n\n .link-regular-xs {\n font: var(--sbkLinkRegularXs);\n }\n\n .link-regular-sm {\n font: var(--sbkLinkRegularSm);\n }\n\n .link-regular-md {\n font: var(--sbkLinkRegularMd);\n }\n\n .link-icon-navigation-bold {\n font-weight: 700;\n align-items: center;\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-icon-navigation-2xs {\n align-items: center;\n font: var(--sbkLinkRegular2xs);\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-icon-navigation-xs {\n font: var(--sbkLinkRegularXs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-icon-navigation-sm {\n font: var(--sbkLinkRegularSm);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-icon-navigation-md {\n font: var(--sbkLinkRegularMd);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-icon-navigation-bold-2xs {\n font: var(--sbkLinkBold2xs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-icon-navigation-bold-xs {\n font: var(--sbkLinkBoldXs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-icon-navigation-bold-sm {\n font: var(--sbkLinkBoldSm);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-icon-navigation-bold-md {\n font: var(--sbkLinkBoldMd);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n\n .link__text {\n display: none;\n @media all and (max-width: ${breakpointXl}) {\n display: block;\n }\n }\n }\n\n .link-reduced-navigation-bold {\n font-weight: 700;\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-2xs {\n font: var(--sbkLinkRegular2xs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-xs {\n font: var(--sbkLinkRegularXs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-sm {\n font: var(--sbkLinkRegularSm);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-md {\n font: var(--sbkLinkRegularMd);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-bold-2xs {\n font: var(--sbkLinkBold2xs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-bold-xs {\n font: var(--sbkLinkBoldXs);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-bold-sm {\n font: var(--sbkLinkBoldSm);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-reduced-navigation-bold-md {\n font: var(--sbkLinkBoldMd);\n align-items: center;\n @media all and (max-width: ${breakpointXl}) {\n flex-direction: column;\n }\n }\n\n .link-navigation {\n justify-content: space-between;\n line-height: var(--sbkCoreLineHightDefaultLg);\n }\n\n .link-navigation-bold {\n font-weight: 700;\n justify-content: space-between;\n line-height: var(--sbkCoreLineHightDefaultLg);\n }\n\n .link-navigation-2xs {\n font: var(--sbkLinkRegular2xs);\n justify-content: space-between;\n line-height: var(--sbkCoreLineHightDefaultLg);\n }\n\n .link-navigation-xs {\n font: var(--sbkLinkRegularXs);\n justify-content: space-between;\n line-height: var(--sbkCoreLineHightDefaultLg);\n }\n\n .link-navigation-sm {\n font: var(--sbkLinkRegularSm);\n justify-content: space-between;\n line-height: var(--sbkCoreLineHightDefaultLg);\n }\n\n .link-navigation-md {\n font: var(--sbkLinkRegularMd);\n justify-content: space-between;\n line-height: var(--sbkCoreLineHightDefaultLg);\n }\n\n .link-underlined {\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link-underlined-bold {\n text-decoration: underline;\n font-weight: 700;\n }\n\n .link-underlined-2xs {\n font: var(--sbkLinkUnderlined2xs);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link-underlined-xs {\n font: var(--sbkLinkUnderlinedXs);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link-underlined-sm {\n font: var(--sbkLinkUnderlinedSm);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link-underlined-md {\n font: var(--sbkLinkUnderlinedMd);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link-regular-bold-2xs {\n font: var(--sbkLinkBold2xs);\n }\n\n .link-regular-bold-xs {\n font: var(--sbkLinkBoldXs);\n }\n\n .link-regular-bold-sm {\n font: var(--sbkLinkBoldSm);\n }\n\n .link-regular-bold-md {\n font: var(--sbkLinkBoldMd);\n }\n\n .link-underlined-bold-xs {\n font: var(--sbkLinkBoldUnderlinedXs);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link-underlined-bold-sm {\n font: var(--sbkLinkBoldUnderlinedSm);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link-underlined-bold-md {\n font: var(--sbkLinkBoldUnderlinedMd);\n\n .link__text {\n text-decoration: underline;\n }\n }\n\n .link.link--noHyphens {\n hyphens: none;\n word-break: keep-all;\n }\n`;\n","import { customElement, property } from 'lit/decorators.js';\nimport { style } from './link.styles';\nimport './link.scss';\nimport { html, LitElement, nothing } from 'lit';\nimport { when } from 'lit/directives/when.js';\nimport { SbkModal } from \"@/components/modal/modal\";\n\n// eslint-disable-next-line\ndeclare let _paq: any;\n\n@customElement('sbk-link')\nexport class SbkLink extends LitElement {\n @property({ type: Boolean, attribute: 'automatic-download' }) automaticDownload = false;\n @property({ type: Boolean }) disabled = false;\n @property() icon = '';\n initialIcon = '';\n @property({attribute: 'icon-position'}) iconPosition: 'left' | 'right' | '' = 'left';\n @property({type: Boolean, attribute: 'is-bold'}) isBold = false;\n @property() href = '';\n @property() size: '2xs' | 'xs' | 'sm' | 'md' | '' = '';\n @property() target: '_blank' | '_parent' | '_self' | '_top' | '' = '';\n @property() variant: 'icon-navigation' | 'reduced-navigation' | 'navigation' | 'regular' | 'underlined' = 'underlined';\n @property({type: Boolean, attribute: 'is-selected'}) isSelected = false;\n @property() hyphens: 'auto' | 'none' = 'auto';\n @property({attribute: 'modal-trigger-id'}) modalTriggerId = '';\n @property({type: Boolean, attribute: 'data-nosnippet'}) dataNoSnippet = false;\n @property({type: Boolean, attribute: 'break-all'}) breakAll = false;\n\n static get styles() {\n return [style];\n }\n\n connectedCallback() {\n super.connectedCallback();\n this.initialIcon = this.icon;\n this.addEventListener('click', this.trackMatomo);\n if (this.href && this.automaticDownload) {\n setTimeout(() => (window.location.href = this.href), 1000);\n }\n if (this.modalTriggerId) {\n this.addEventListener('click', this._showModal);\n }\n }\n\n disconnectedCallback() {\n super.disconnectedCallback();\n this.removeEventListener('click', this.trackMatomo);\n this.removeEventListener('click', this._showModal);\n }\n\n private _showModal = (e: Event) => {\n e.preventDefault();\n const modal = document.querySelector(`#${this.modalTriggerId}`) as SbkModal;\n modal?.showModal();\n };\n\n render() {\n return html`\n
\n ${when(this.icon && this.iconPosition === \"left\", this.renderIcon)}\n