import{S as $}from"./sbk-element-D0ymjRIy.js";import{t as f}from"./custom-element-BhZVzxrc.js";import{n as t}from"./property-1JAdfsvf.js";import{i as y,r as B,k as a,D as h,h as x}from"./lit-element-DDcuVA3y.js";import{b as O}from"./button--onDark.styles-DnSVf0w0.js";import{s as L,b as C}from"./variables-BWf6YqMz.js";import{n as k}from"./when-BxLAFfhK.js";const S=y` --_round-button__color: var(--sbkRoundButtonBgColorOnLightEnabled); --_round-button__color--active: var(--sbkRoundButtonBgColorOnDarkEnabled); --_round-button__color--hover: var(--sbkRoundButtonFgColorOnDarkDefault); --_round-button__color--focus: var(--sbkRoundButtonBgColorOnLightEnabled); --_round-button__color--disabled: var(--sbkRoundButtonFgColorOnLightDisabled); --_round-button__color--error: var(--sbkRoundButtonFgColorOnDarkDefault); --_round-button-icon-only__color: var(--sbkRoundButtonBgColorOnDarkEnabled); --_round-button__bg: var(--sbkRoundButtonBgColorOnDarkEnabled); --_round-button__bg--active: var(--sbkRoundButtonBgColorOnDarkActive); --_round-button__bg--hover: var(--sbkRoundButtonBgColorOnDarkHover); --_round-button__bg--focus: var(--sbkRoundButtonBgColorOnDarkFocus); --_round-button__bg--disabled: var(--sbkRoundButtonBgColorOnDarkDisabled); --_round-button__bg--error: var(--sbkRoundButtonBgColorOnDarkError); --_round-button-icon-only__bg: var(--sbkRoundButtonBgColorOnDarkEnabledTransparent); --_round-button__border-color: var(--sbkRoundButtonBorderOnDarkMarked); --_round-button__border-color--active: var(--sbkButtonBorderOnDarkActive); --_round-button__border-color--hover: var(--sbkButtonBorderOnDarkHover); --_round-button__border-color--focus: var(--sbkButtonBorderOnDarkFocus); --_secondary-button__border-color--disabled: var(--sbkButtonBorderOnDarkDisabled); --_secondary-button__border-color--error: var(--sbkButtonBorderOnDarkDisabled); `,w=B(`${L}`),R=y` :host([alternativestyling]) { ${O} } :host { --button__border--focus: var(--_button__border--focus, var(--sbkButtonBorderOnLightFocus)); --primary-button__bg: var(--_primary-button__bg, var(--sbkButtonBgColorPrimaryOnLightEnabled)); --primary-button__color: var(--_primary-button__color, var(--sbkButtonFgColorOnDarkDefault)); --primary-button__bg--hover: var(--_primary-button__bg--hover, var(--sbkButtonBgColorPrimaryOnLightHover)); --primary-button__color--hover: var(--_primary-button__color--hover, var(--sbkButtonFgColorOnDarkDefault)); --primary-button__bg--active: var(--_primary-button__bg--active, var(--sbkButtonBgColorPrimaryOnLightActive)); --primary-button__color--active: var(--_primary-button__color--active, var(--sbkButtonFgColorOnDarkDefault)); --primary-button__bg--focus: var(--_primary-button__bg--focus, var(--sbkButtonBgColorPrimaryOnLightFocus)); --primary-button__color--focus: var(--_primary-button__color--focus, var(--sbkButtonFgColorOnDarkDefault)); --primary-button__bg--disabled: var(--_primary-button__bg--disabled, var(--sbkButtonBgColorPrimaryOnLightDisabled)); --primary-button__color--disabled: var(--_primary-button__color--disabled, var(--sbkButtonFgColorOnLightDisabled)); --secondary-button__bg: var(--_secondary-button__bg, var(--sbkButtonBgColorSecondaryOnLightEnabled)); --secondary-button__color: var(--_secondary-button__color, var(--sbkButtonFgColorOnLightDefault)); --secondary-button__bg--hover: var(--_secondary-button__bg--hover, var(--sbkButtonBgColorSecondaryOnLightHover)); --secondary-button__color--hover: var(--_secondary-button__color--hover, var(--sbkButtonSecondaryFgColorOnLightHover)); --secondary-button__bg--active: var(--_secondary-button__bg--active, var(--sbkButtonBgColorSecondaryOnLightActive)); --secondary-button__color--active: var(--_secondary-button__color--active, var(--sbkButtonFgColorOnDarkDefault)); --secondary-button__bg--focus: var(--_secondary-button__bg--focus, var(--sbkButtonBgColorSecondaryOnLightFocus)); --secondary-button__color--focus: var(--_secondary-button__color--focus, var(--sbkButtonFgColorOnDarkDefault)); --secondary-button__bg--disabled: var(--_secondary-button__bg--disabled, var(--sbkButtonBgColorSecondaryOnLightDisabled)); --secondary-button__color--disabled: var(--_secondary-button__color--disabled, var(--sbkButtonFgColorOnLightDisabled)); --secondary-button__border-color: var(--_secondary-button__border-color, var(--sbkButtonBorderOnLightEnabled)); --secondary-button__border-color--hover: var(--_secondary-button__border-color--hover, var(--sbkButtonBorderOnLightHover)); --secondary-button__border-color--focus: var(--_secondary-button__border-color--focus, var(--sbkButtonBgColorSecondaryOnLightFocus)); --secondary-button__border-color--active: var(--_secondary-button__border-color--active, var(--sbkButtonBorderOnLightActive)); --secondary-button__border-color--disabled: var(--_secondary-button__border-color--disabled, var(--sbkButtonBorderOnLightDisabled)); --cta-button__bg: var(--_cta-button__bg, var(--sbkButtonBgColorCtaOnLightEnabled)); --cta-button__color: var(--_cta-button__color, var(--sbkButtonFgColorOnLightDefault)); --cta-button__border: var(--_cta-button__border, var(--sbkButtonBorderOnLightDefault)); --cta-button__bg--hover: var(--_cta-button__bg--hover, var(--sbkButtonBgColorCtaOnLightHover)); --cta-button__color--hover: var(--_cta-button__color--hover, var(--sbkButtonFgColorOnLightDefault)); --cta-button__bg--active: var(--_cta-button__bg--active, var (--sbkButtonBgColorCtaOnLightActive)); --cta-button__color--active: var(--_cta-button__color--active, var(--sbkButtonFgColorOnLightDefault)); --cta-button__bg--focus: var(--_cta-button__bg--focus, var(--sbkButtonBgColorCtaOnLightFocus)); --cta-button__color--focus: var(--_cta-button__color--focus, var(--sbkButtonFgColorOnLightDefault)); --cta-button__bg--disabled: var(--_cta-button__bg--disabled, var(--sbkButtonBgColorCtaOnLightDisabled)); --cta-button__color--disabled: var(--_cta-button__color--disabled, var(--sbkButtonFgColorOnLightDisabled)); display: inline-block; } a { width: fit-content; } .button { part: button; display: flex; gap: var(--sbkButton3xs); align-items: center; justify-content: center; outline: 2px solid transparent; outline-offset: var(--sbkButtonBorderGapFocus); border-radius: var(--sbkButtonBorderRadiusDefault); border: none; cursor: pointer; text-decoration: none; fill: currentColor; } .button:focus-visible { outline: var(--button__border--focus); } .button[disabled] { cursor: not-allowed; } .button-small { font: var(--sbkButtonSmallLabelSm); padding: var(--sbkButton2xs) var(--sbkButtonMd); } .button-large { font: var(--sbkButtonLargeLableMd); padding: var(--sbkButtonXs) var(--sbkButtonXl); } .button-adaptive{ font: var(--sbkButtonSmallLabelSm); padding: var(--sbkButton2xs) var(--sbkButtonMd); } @media screen and (min-width: ${w}) { .button-adaptive{ font: var(--sbkButtonLargeLableMd); padding: var(--sbkButtonXs) var(--sbkButtonXl); }} .button-table { width: initial !important; } /* Primary Button Styles */ .button-primary { background-color: var(--primary-button__bg); color: var(--primary-button__color); border: var(--secondary-button__border-color); border-color: var(--primary-button__bg); } @media (hover: hover) and (pointer: fine) { .button-primary:hover { background-color: var(--primary-button__bg--hover); color: var(--primary-button__color--hover); &:not(:focus-visible):not(:active){ border-color: var(--primary-button__bg--hover); } } } .button-primary:active { background-color: var(--primary-button__bg--active); color: var(--primary-button__color--active); border-color: var(--primary-button__bg--active); } .button-primary:focus-visible { background-color: var(--primary-button__bg--focus); color: var(--primary-button__color--focus); border-color: var(--primary-button__bg--focus); } .button-primary[disabled] { background-color: var(--primary-button__bg--disabled); color: var(--primary-button__color--disabled); border-color: var(--primary-button__bg--disabled); } /* Secondary Button Styles */ .button-secondary { background-color: var(--secondary-button__bg); border: var(--secondary-button__border-color); color: var(--secondary-button__color); } @media (hover: hover) and (pointer: fine) { .button-secondary:hover { background-color: var(--secondary-button__bg--hover); border: var(--secondary-button__border-color--hover); color: var(--secondary-button__color--hover); } } .button-secondary:active { background-color: var(--secondary-button__bg--active); border: var(--secondary-button__border-color--active); color: var(--secondary-button__color--active); } .button-secondary:focus-visible { background-color: var(--secondary-button__bg--focus); border-color: var(--secondary-button__border-color--focus); color: var(--secondary-button__color--focus); } .button-secondary[disabled] { background-color: var(--secondary-button__bg--disabled); border: var(--secondary-button__border-color--disabled); color: var(--secondary-button__color--disabled); } /* CTA Button Styles */ .button-cta { background-color: var(--cta-button__bg); border: var(--cta-button__border); color: var(--cta-button__color); } @media (hover: hover) and (pointer: fine) { .button-cta:hover { background-color: var(--cta-button__bg--hover); color: var(--cta-button__color--hover); } } .button-cta:active { background-color: var(--cta-button__bg--active); color: var(--cta-button__color--active); } .button-cta:focus-visible { background-color: var(--cta-button__bg--focus); color: var(--cta-button__color--focus); } .button-cta[disabled] { background-color: var(--cta-button__bg--disabled); color: var(--cta-button__color--disabled); border-color: var(--cta-button__bg--disabled); } /* Meta CTA Button Styles */ .button-meta-cta { background-color: var(--cta-button__bg); border-radius: var(--sbkButtonBorderRadiusMetaCta) var(--sbkButtonBorderRadiusMetaCta) 0 0; color: var(--cta-button__color); } @media (hover: hover) and (pointer: fine) { .button-meta-cta:hover { background-color: var(--cta-button__bg--hover); color: var(--cta-button__color--hover); } } .button-meta-cta:active { background-color: var(--cta-button__bg--active); color: var(--cta-button__color--active); } .button-meta-cta:focus-visible { background-color: var(--cta-button__bg--focus); color: var(--cta-button__color--focus); } .button-meta-cta[disabled] { background-color: var(--cta-button__bg--disabled); color: var(--cta-button__color--disabled); } `;var D=Object.defineProperty,z=Object.getOwnPropertyDescriptor,c=(r,o,s,i)=>{for(var n=i>1?void 0:i?z(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&D(o,s,n),n};let l=class extends ${constructor(){super(...arguments),this.name="",this.icon="",this.iconPosition="left",this.iconOnly=!1,this.disabled=!1,this.alternativestyling=!1,this.inTable=!1,this.href="",this.size="adaptive",this.target="",this.value="",this.variant="primary",this.type="button"}connectedCallback(){if(super.connectedCallback(),this.type==="submit"){const r=document.createElement("input");r.type="submit",r.name=this.name??"",r.value=this.value??"",r.hidden=!0;const o=this.closest("form");o==null||o.appendChild(r),this.fakeSubmitButton=r}}static get styles(){return R}render(){return this.href?this.renderLink():this.renderButton()}renderButton(){return a` <button part="button" title=${this.title||h} class="button button-${this.variant} button-${this.size} button-${this.alternativeStyling}-styling ${this.inTable?"button-table":""} ${this.iconOnly?"button-icon-only":""}" type='button' ?disabled=${this.disabled} aria-labelledby="button-label" ?alternativestyling=${this.alternativestyling} .value=${this.value} @click=${this.type==="submit"?this._handleSubmit:this._handleClick} > ${this.renderIconLeft()} <span id="button-label"> <slot></slot> </span> ${this.renderIconRight()} </button> `}renderLink(){return a` <a part="button" id="button" class="button button-${this.variant} ${this.inTable?"button-table":""} button-${this.size}${this.iconOnly?" button-icon-only":""}" role="button" href=${this.href} title=${this.title||h} target=${this.target||h} ?disabled=${this.disabled} > ${this.renderIconLeft()} <slot class="button__content"></slot> ${this.renderIconRight()} </a> `}renderIconLeft(){return!this.icon&&this.variant!=="cta"||this.icon&&this.iconPosition!=="left"?a`${h}`:a` <div class="icon-wrapper"><sbk-icon size=${this.getIconSize(this.size)} symbol=${this.variant==="cta"?"logo":this.icon}></sbk-icon></div> `}renderIconRight(){return!this.icon&&this.variant!=="cta"||this.icon&&this.iconPosition!=="right"?a`${h}`:a` <div class="icon-wrapper"><sbk-icon size=${this.getIconSize(this.size)} symbol=${this.variant==="cta"?"chevron-right":this.icon}></sbk-icon></div> `}getIconSize(r){switch(r){case"small":case"medium":return 20;case"large":return 24;default:return 24}}_handleClick(){const r=new CustomEvent("sbk-click");this.dispatchEvent(r)}_handleSubmit(){const r=new CustomEvent("sbk-click");this.dispatchEvent(r);const o=this.closest("form");o==null||o.requestSubmit(this.fakeSubmitButton)}};c([t({type:String})],l.prototype,"name",2);c([t({type:String})],l.prototype,"icon",2);c([t({attribute:"icon-position"})],l.prototype,"iconPosition",2);c([t({type:Boolean,attribute:"icon-only"})],l.prototype,"iconOnly",2);c([t({type:Boolean})],l.prototype,"disabled",2);c([t({type:Boolean})],l.prototype,"alternativestyling",2);c([t({type:Boolean})],l.prototype,"inTable",2);c([t({type:String})],l.prototype,"href",2);c([t()],l.prototype,"size",2);c([t()],l.prototype,"target",2);c([t({type:String})],l.prototype,"value",2);c([t()],l.prototype,"variant",2);c([t()],l.prototype,"alternativeStyling",2);c([t()],l.prototype,"type",2);l=c([f("sbk-button")],l);const M=B(`${L}`),F=y` :host { display: flex; box-sizing: border-box; } .icon { box-sizing: border-box; fill: currentColor; } .icon-16 { height: 16px; width: 16px; } .icon-20 { height: 20px; width: 20px; } .icon-24 { height: 24px; width: 24px; } .icon-32 { height: 32px; width: 32px; } .icon-40 { height: 40px; width: 40px; } .icon-64 { height: 64px; width: 64px; } .icon-112 { height: var(--sbkModalSizingImageHeight); width: var(--sbkModalSizingImageHeight); } .icon-24.responsive { height: 20px; width: 20px; @media screen and (min-width: ${M}) { height: 24px; width: 24px; } } `;var H=Object.defineProperty,I=Object.getOwnPropertyDescriptor,m=(r,o,s,i)=>{for(var n=i>1?void 0:i?I(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&H(o,s,n),n};let p=class extends ${constructor(){super(...arguments),this.symbol="",this.size="24",this.description="",this.responsive=!1}static get styles(){return F}render(){const r=this.description?"icon-title":!1,o=location.port==="5173"||location.port==="6006"?"/icons/sprite.svg":"/typo3conf/ext/mms_sbk_sitepackage/Resources/Public/icons/sprite.svg";return a` <svg class="icon icon-${this.size} ${this.responsive?"responsive":""}" aria-describedby=${r||h} aria-hidden=${this.description?"false":"true"} role="img" > ${k(this.description,()=>a`<title id="icon-title">${this.description}</title>`)} <use href="${o}#icon-${this.symbol}"></use> </svg> `}};m([t({type:String})],p.prototype,"symbol",2);m([t({type:String})],p.prototype,"size",2);m([t({type:String})],p.prototype,"description",2);m([t({type:Boolean})],p.prototype,"responsive",2);p=m([f("sbk-icon")],p);const E=y` :host { display: inline-block; --button__border--focus: var(--_button__border--focus , var(--sbkRoundButtonBorderOnLightFocus)); --round-button__color: var(--_round-button__color, var(--sbkRoundButtonBgColorOnDarkEnabled)); --round-button__color--active: var(--_round-button__color--active, var(--sbkRoundButtonBgColorOnDarkEnabled)); --round-button__color--hover: var(--_round-button__color--hover , var(--sbkRoundButtonFgColorOnLightDefault)); --round-button__color--focus: var(--_round-button__color--focus , var(--sbkRoundButtonBgColorOnDarkEnabled)); --round-button__color--disabled: var(--_round-button__color--disabled , var(--sbkRoundButtonFgColorOnLightDisabled)); --round-button__color--error: var(--_round-button__color--error, var(--sbkRoundButtonFgColorOnDarkDefault)); --round-button-icon-only__color: var(--_round-button-icon-only__color, var(--sbkRoundButtonBgColorOnLightEnabled)); --round-button__bg: var(--_round-button__bg , var(--sbkRoundButtonBgColorOnLightEnabled)); --round-button__bg--active: var(--_round-button__bg--active , var(--sbkRoundButtonBgColorOnLightActive)); --round-button__bg--hover: var(--_round-button__bg--hover , var(--sbkRoundButtonBgColorOnLightHover)); --round-button__bg--focus: var(--_round-button__bg--focus , var(--sbkRoundButtonBgColorOnLightFocus)); --round-button__bg--disabled: var(--_round-button__bg--disabled , var(--sbkRoundButtonBgColorOnLightDisabled)); --round-button__bg--error: var(--_round-button__bg--error, var(--sbkRoundButtonBgColorOnLightError)); --round-button-icon-only__bg: var(--_round-button-icon-only__bg, var(--sbkRoundButtonBgColorOnLightEnabledTransparent)); --round-button__border-color: var(--_round-button__border-color, var(--sbkRoundButtonBorderOnLightMarked)); --round-button__border-color--active: var(--_round-button__border-color--active, var(--sbkButtonBorderOnLightActive)); --round-button__border-color--hover: var(--_round-button__border-color--hover, var(--sbkButtonBorderOnLightHover)); --round-button__border-color--focus: var(--_round-button__border-color--focus, var(--sbkButtonBorderOnLightFocus)); --round-button__border-color--disabled: var(--_secondary-button__border-color--disabled, var(--sbkButtonBorderOnLightDisabled)); --round-button__border-color--error: var(--_secondary-button__border-color--error, var(--sbkButtonBorderOnLightDisabled)); } :host([hidden]) { display: none; } * { box-sizing: border-box; } :host([alternativestyling]) { ${S} } .round-button { font: var(--sbkRoundButtonLabel); border: 2px solid transparent; border-radius: var(--sbkRoundButtonBorderRadiusBorderRadiusDefault); cursor: pointer; position: relative; display: flex; align-items: center; justify-content: center; outline: 2px solid transparent; outline-offset: var(--sbkRoundButtonBorderRadiusBorderGapFocus); background-color: var(--round-button__bg); color: var(--round-button__color); text-decoration: none; } @media (hover: hover) and (pointer: fine) { .round-button:hover:not([disabled]) { background-color: var(--round-button__bg--hover); border: var(--round-button__border-color--hover); color: var(--round-button__color--hover); } } .round-button__icon-slot::slotted(div) { filter: brightness(0) saturate(100%) invert(16%) sepia(19%) saturate(7500%) hue-rotate(189deg) brightness(97%) contrast(104%); } @media (hover: hover) and (pointer: fine) { .round-button:hover .round-button__icon-slot::slotted(div) { filter: brightness(0) saturate(100%) invert(100%) sepia(15%) saturate(5522%) hue-rotate(209deg) brightness(120%) contrast(107%); } } .round-button:focus-visible:not(:active) { outline: var(--button__border--focus); background-color: var(--round-button__bg--focus); border: 2px solid transparent; color: var(--round-button__color--focus); } .round-button-extra-small { padding: var(--sbkRoundButtonSpacing3xs); height: 20px;//var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly); width: 20px; //var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly); &.round-button-icon-only { height: 20px; //var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly); width: 20px; //var(--sbkRoundButtonSizingMaxHeightExtraSmallIconOnly); } } .round-button-small { padding: var(--sbkRoundButtonSpacing3xs); height: var(--sbkRoundButtonSizingMaxHeightSmall); width: var(--sbkRoundButtonSizingMaxHeightSmall); &.round-button-icon-only { height: var(--sbkRoundButtonSizingMaxHeightSmallIconOnly); width: var(--sbkRoundButtonSizingMaxHeightSmallIconOnly); } } .round-button-medium { padding: var(--sbkRoundButtonSpacing3xs); height: var(--sbkRoundButtonSizingMaxHeightMedium); width: var(--sbkRoundButtonSizingMaxHeightMedium); &.round-button-icon-only { height: var(--sbkRoundButtonSizingMaxHeightMediumIconOnly); width: var(--sbkRoundButtonSizingMaxHeightMediumIconOnly); } } .round-button-large { padding: var(--sbkRoundButtonSpacing2xs); height: var(--sbkRoundButtonSizingMaxHeightLarge); width: var(--sbkRoundButtonSizingMaxHeightLarge); &.round-button-icon-only { height: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly); width: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly); } } /* todo: Adjust roundbutton sizing tokens */ .round-button-extra-large { padding: var(--sbkRoundButtonSpacing2xs); height: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly); width: var(--sbkRoundButtonSizingMaxHeightLargeIconOnly); } .round-button-text, .round-button-icon-only { background-color: var(--round-button-icon-only__bg); color: var(--round-button-icon-only__color); } .round-button[disabled] { background-color: var(--round-button__bg--disabled); color: var(--round-button__color--disabled); cursor: not-allowed; } .round-button--error { background-color: var(--round-button__bg--error); color: var(--round-button__color--error); } .round-button--active, .round-button:active, .round-button:hover:active { background-color: var(--round-button__bg--active); border: var(--round-button__border-color--active); color: var(--round-button__color--active); } `;var P=Object.defineProperty,j=Object.getOwnPropertyDescriptor,_=(r,o,s,i)=>{for(var n=i>1?void 0:i?j(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&P(o,s,n),n};let b=class extends x{constructor(){super(),this.active=!1,this.disabled=!1,this.error=!1,this.href="",this.icon="",this.size="large",this.target="",this.value="",this.variant="default",this.type="button",this.isAjax=!1,this._internals=this.attachInternals()}static get styles(){return E}render(){return this.href?this.renderLink():this.renderButton()}renderButton(){return a` <button id="button" part="button" class="round-button round-button-${this.size} round-button-${this.variant}${this.error?" round-button--error":""}${this.active?" round-button--active":""}" aria-labelledby="button-label" type=${this.type} @click=${this.type==="submit"?this._handleSubmit:h} ?disabled=${this.disabled}> ${this.renderIcon()} <span id="button-label" ?hidden=${this.variant!=="text"}> <slot class="round-button__content"></slot> </span> </button> `}renderLink(){return a` <a ?id="link" part="link" class="round-button round-button-${this.size} round-button-${this.variant}${this.error?" round-button--error":""}${this.active?" round-button--active":""}" role="button" href=${this.href} ?title=${this.title} target=${this.target} ?disabled=${this.disabled} rel=${this.isAjax?"nofollow":h} > ${this.renderIcon()} <span id="button-label" ?hidden=${this.variant!=="text"}> <slot class="round-button__content"></slot> </span> </a> `}renderIcon(){return this.variant==="text"?a`${h}`:a` <slot class="round-button__icon-slot" name="icon"> <div class="icon-wrapper" part="icon"> <sbk-icon size=${this.getIconSize(this.size)} symbol=${this.icon}></sbk-icon> </div> </slot> `}getIconSize(r){switch(r){case"extra-small":return 16;case"small":return 20;case"medium":case"large":return 24;default:return 24}}_handleSubmit(){var o;const r=new CustomEvent("round-button-submit");this.dispatchEvent(r),(o=this._internals.form)==null||o.requestSubmit()}};b.formAssociated=!0;b.shadowRootOptions={...x.shadowRootOptions,delegatesFocus:!0};_([t({type:Boolean})],b.prototype,"active",2);_([t({type:Boolean})],b.prototype,"disabled",2);_([t({type:Boolean})],b.prototype,"error",2);_([t({type:String})],b.prototype,"href",2);_([t({type:String})],b.prototype,"icon",2);_([t()],b.prototype,"size",2);_([t()],b.prototype,"target",2);_([t({type:String})],b.prototype,"value",2);_([t()],b.prototype,"variant",2);_([t()],b.prototype,"type",2);_([t({type:Boolean,attribute:"is-ajax"})],b.prototype,"isAjax",2);b=_([f("sbk-round-button")],b);const e=B(`${C}`),A=B(`${L}`),X=y` :host { --link-border-focus: var(--_link-border-focus, var(--sbkLinkBorderOnLightFocus)); --link-color: var(--_link-color, var(--sbkLinkFgColorOnLightEnabled)); --link-color-hover: var(--_link-color-hover, var(--sbkLinkFgColorOnLightHover)); --link-color-active: var(--_link-color-active, var(--sbkLinkFgColorOnLightActive)); --link-color-disabled: var(--_link-color-disabled, var(--sbkLinkFgColorOnLightDisabled)); --link-color-visited: var(--_link-color-visited, var(--sbkLinkFgColorOnLightVisited)); --link-color-selected: var(--_link-color-selected, var(--sbkLinkFgColorOnLightSelected)); box-sizing: border-box; display: inline-block; } div.link-wrapper { display: flex; align-items: center; @media all and (max-width: ${e}) { height: 100%; } } .link { display: flex; background-color: unset; gap: var(--sbkLinkSpacing4xs); align-items: center; outline: 2px solid transparent; outline-offset: var(--sbkLinkBorderGapFocus); border-radius: var(--sbkLinkBorderRadiusFocus); border: none; cursor: pointer; text-decoration: none; color: var(--link-color); fill: currentColor; padding: 0; font: inherit; overflow-wrap: break-word; word-wrap: break-word; /* This is the dangerous one in WebKit, as it breaks things wherever */ word-break: break-all; /* Instead use this non-standard one: */ word-break: break-word; hyphens: auto; &:not(.link--selected):visited { color: var(--link-color-visited); } &:not(.link--selected):active { color: var(--link-color-active); .link__text { text-decoration: underline; } } &:focus-visible { outline: var(--link-border-focus); } @media (hover: hover) and (pointer: fine) { &:not(.link--selected):hover { @media all and (min-width: ${A}) { color: var(--link-color-hover); .link__text { text-decoration: underline; } } } } } .link--selected { color: var(--link-color-selected); } .link--disabled { color: var(--link-color-disabled); cursor: not-allowed; margin: 0; padding: 0; display: inline-block; outline: 2px solid transparent; outline-offset: var(--sbkLinkBorderGapFocus); border-radius: var(--sbkLinkBorderRadiusFocus); border: none; text-decoration: none; fill: currentColor; } .link-regular-bold { font-weight: 700; } .link-regular-2xs { font: var(--sbkLinkRegular2xs); } .link-regular-xs { font: var(--sbkLinkRegularXs); } .link-regular-sm { font: var(--sbkLinkRegularSm); } .link-regular-md { font: var(--sbkLinkRegularMd); } .link-icon-navigation-bold { font-weight: 700; .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } @media all and (max-width: ${e}) { flex-direction: column; } } .link-icon-navigation-2xs { font: var(--sbkLinkRegular2xs); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-icon-navigation-xs { font: var(--sbkLinkRegularXs); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-icon-navigation-sm { font: var(--sbkLinkRegularSm); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-icon-navigation-md { font: var(--sbkLinkRegularMd); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-icon-navigation-bold-2xs { font: var(--sbkLinkBold2xs); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-icon-navigation-bold-xs { font: var(--sbkLinkBoldXs); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-icon-navigation-bold-sm { font: var(--sbkLinkBoldSm); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-icon-navigation-bold-md { font: var(--sbkLinkBoldMd); @media all and (max-width: ${e}) { flex-direction: column; } .link__text { display: none; @media all and (max-width: ${e}) { display: block; } } } .link-reduced-navigation-bold { font-weight: 700; @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-2xs { font: var(--sbkLinkRegular2xs); @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-xs { font: var(--sbkLinkRegularXs); @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-sm { font: var(--sbkLinkRegularSm); @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-md { font: var(--sbkLinkRegularMd); @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-bold-2xs { font: var(--sbkLinkBold2xs); @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-bold-xs { font: var(--sbkLinkBoldXs); @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-bold-sm { font: var(--sbkLinkBoldSm); @media all and (max-width: ${e}) { flex-direction: column; } } .link-reduced-navigation-bold-md { font: var(--sbkLinkBoldMd); @media all and (max-width: ${e}) { flex-direction: column; } } .link-navigation { justify-content: space-between; line-height: var(--sbkCoreLineHightDefaultLg); } .link-navigation-bold { font-weight: 700; justify-content: space-between; line-height: var(--sbkCoreLineHightDefaultLg); } .link-navigation-2xs { font: var(--sbkLinkRegular2xs); justify-content: space-between; line-height: var(--sbkCoreLineHightDefaultLg); } .link-navigation-xs { font: var(--sbkLinkRegularXs); justify-content: space-between; line-height: var(--sbkCoreLineHightDefaultLg); } .link-navigation-sm { font: var(--sbkLinkRegularSm); justify-content: space-between; line-height: var(--sbkCoreLineHightDefaultLg); } .link-navigation-md { font: var(--sbkLinkRegularMd); justify-content: space-between; line-height: var(--sbkCoreLineHightDefaultLg); } .link-underlined { .link__text { text-decoration: underline; } } .link-underlined-bold { text-decoration: underline; font-weight: 700; } .link-underlined-2xs { font: var(--sbkLinkUnderlined2xs); .link__text { text-decoration: underline; } } .link-underlined-xs { font: var(--sbkLinkUnderlinedXs); .link__text { text-decoration: underline; } } .link-underlined-sm { font: var(--sbkLinkUnderlinedSm); .link__text { text-decoration: underline; } } .link-underlined-md { font: var(--sbkLinkUnderlinedMd); .link__text { text-decoration: underline; } } .link-regular-bold-2xs { font: var(--sbkLinkBold2xs); } .link-regular-bold-xs { font: var(--sbkLinkBoldXs); } .link-regular-bold-sm { font: var(--sbkLinkBoldSm); } .link-regular-bold-md { font: var(--sbkLinkBoldMd); } .link-underlined-bold-xs { font: var(--sbkLinkBoldUnderlinedXs); .link__text { text-decoration: underline; } } .link-underlined-bold-sm { font: var(--sbkLinkBoldUnderlinedSm); .link__text { text-decoration: underline; } } .link-underlined-bold-md { font: var(--sbkLinkBoldUnderlinedMd); .link__text { text-decoration: underline; } } .link.link--noHyphens { hyphens: none; word-break: keep-all; } `,T=y` /* Special Styling for external Links in Typo3 */ :host(.externalLink), :host(.externalLinkIcon) { div.link-wrapper { display: inline-block; } sbk-icon { display: inline-flex; position: relative; vertical-align: text-bottom; } .link { display: inline-block; } } `;var U=Object.defineProperty,G=Object.getOwnPropertyDescriptor,g=(r,o,s,i)=>{for(var n=i>1?void 0:i?G(o,s):o,d=r.length-1,u;d>=0;d--)(u=r[d])&&(n=(i?u(o,s,n):u(n))||n);return i&&n&&U(o,s,n),n};let v=class extends x{constructor(){super(...arguments),this.disabled=!1,this.icon="",this.iconPosition="left",this.isBold=!1,this.href="",this.size="",this.target="",this.variant="underlined",this.isSelected=!1,this.hyphens="auto"}static get styles(){return[X,T]}connectedCallback(){super.connectedCallback(),this.addEventListener("click",this.trackMatomo)}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("click",this.trackMatomo)}render(){return a` <div class=${this.variant==="navigation"?"link-wrapper__navigation":"link-wrapper"}> ${this.disabled?this.renderDisabledAsText():this.href?this.renderLink():this.renderButton()} </div> `}renderLink(){return a` <a part="link" class="link link-${this.variant}${this.isBold?"-bold":""}${this.size?`-${this.size}`:""} ${this.isSelected?"link--selected":""} ${this.hyphens==="none"?"link--noHyphens":""}" href=${this.href} title=${this.title||h} target=${this.target||h} > ${k(this.icon&&this.iconPosition==="left",()=>this.renderIcon())} <span class="link__text"> <slot></slot> </span> ${k(this.icon&&this.iconPosition==="right",()=>this.renderIcon())} </a> `}renderButton(){return a` <button class="link link-${this.variant}${this.isBold?"-bold":""}${this.size?`-${this.size}`:""} ${this.isSelected?"link--selected":""} ${this.hyphens==="none"?"link--noHyphens":""}"> ${k(this.icon&&this.iconPosition==="left",()=>this.renderIcon())} <span class="link__text"> <slot></slot> </span> ${k(this.icon&&this.iconPosition==="right",()=>this.renderIcon())} </button> `}renderDisabledAsText(){return a` <p class="link link--disabled link-${this.variant}-${this.isBold?"bold-":""}${this.size} ${this.hyphens==="none"?"link--noHyphens":""}"> ${k(this.icon&&this.iconPosition==="left",()=>this.renderIcon())} <slot></slot> ${k(this.icon&&this.iconPosition==="right",()=>this.renderIcon())} </p> `}renderIcon(){return a` <sbk-icon size=${this.size==="xs"||this.size==="2xs"?20:24} symbol=${this.icon}></sbk-icon>`}trackMatomo(){this.href.match(/@sbk.org$/)!==null&&_paq.push(["trackGoal",12])}};g([t({type:Boolean})],v.prototype,"disabled",2);g([t()],v.prototype,"icon",2);g([t({attribute:"icon-position"})],v.prototype,"iconPosition",2);g([t({type:Boolean,attribute:"is-bold"})],v.prototype,"isBold",2);g([t()],v.prototype,"href",2);g([t()],v.prototype,"size",2);g([t()],v.prototype,"target",2);g([t()],v.prototype,"variant",2);g([t({type:Boolean,attribute:"is-selected"})],v.prototype,"isSelected",2);g([t()],v.prototype,"hyphens",2);v=g([f("sbk-link")],v);export{l as S,b as a,S as r}; //# sourceMappingURL=link-BqszdS6-.js.map