@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
1 lines • 3.92 kB
JavaScript
import{r as e,h as t,a as r,g as o}from"./p-d52b3602.js";import{c as a}from"./p-c608c6dc.js";const i=e=>{try{return!!JSON.parse(e)}catch(t){return"string"==typeof e||!!e}},n=class{constructor(t){e(this,t),this.condensed=!1,this.bold=!1,this.active=!1,this.current=null}nestingLevelChanged(e){1===e&&(this.bold=!0)}currentChanged(e){this.handleAriaCurrentInSlottedA(e),this.syncActiveToCurrent(e)}componentDidLoad(){this.handleAriaCurrentInSlottedA(this.current),this.current&&this.syncActiveToCurrent(this.current)}syncActiveToCurrent(e){this.active=i(e)}handleAriaCurrentInSlottedA(e){const t=this.el.querySelector("a");null!=this.srOnlyElement&&(t.removeChild(this.srOnlyElement),this.srOnlyElement=null),null!=t&&t.removeAttribute("aria-current"),i(e)&&null!=t&&(this.srOnlyElement=this.createScreenReaderOnlySpan(),t.appendChild(this.srOnlyElement),t.setAttribute("aria-current","page"))}createScreenReaderOnlySpan(){const e=(e=>{let t;try{t=JSON.parse(e)}catch(r){t=e}return"string"==typeof t&&t.length>0?` ${t}`:" Zurzeit aktiv"})(this.current),t=document.createElement("span");return Object.assign(t.style,{position:"absolute",left:"-10000px",overflow:"hidden"}),t.textContent=e,t}render(){return t(r,null,this.styles&&t("style",null,this.styles),t("li",{part:this.getBasePartMap(),class:this.getCssClassMap(),role:"listitem"},t("slot",null)))}getBasePartMap(){return this.getCssOrBasePartMap("basePart")}getCssClassMap(){return this.getCssOrBasePartMap("css")}getCssOrBasePartMap(e){const t="sidebar-nav-item",r="basePart"===e?"":`${t}--`;return a(t,this.bold&&`${r}bold`,this.condensed&&`${r}condensed`,this.active&&`${r}active`)}get el(){return o(this)}static get watchers(){return{nestingLevel:["nestingLevelChanged"],current:["currentChanged"]}}};n.style=":host{--border-bottom-color:var(--telekom-color-ui-faint);--border-left-color-third-nesting:var(--telekom-color-ui-strong);--color-active:var(--telekom-color-text-and-icon-primary-pressed);--color-hover:var(--telekom-color-text-and-icon-primary-hovered);--color-primary:var(--telekom-color-text-and-icon-primary-standard);--background-color-before-active:var(--color-primary);--font-bold:var(--telekom-text-style-ui-bold);--box-shadow-focus:inset 0 0 0 var(--telekom-line-weight-highlight)\n var(--telekom-color-functional-focus-standard)}.sidebar-nav-item{border-bottom-style:solid;border-bottom-width:1px;border-bottom-color:var(--border-bottom-color)}.sidebar-nav-item--active{position:relative;color:var(--color-primary)}.sidebar-nav-item--active::before{content:'';display:block;position:absolute;top:0;left:var(--left-current-border, 0);width:0;height:100%;background-color:var(--background-color-before-active);border-left:2px solid transparent}.sidebar-nav-item:hover.sidebar-nav-item--active::before{background-color:var(--color-hover)}.sidebar-nav-item:active.sidebar-nav-item--active::before{background-color:var(--color-active)}.sidebar-nav-item--condensed.sidebar-nav-item--active::before{left:-1px}:host([nesting-level='1']) .sidebar-nav-item,.sidebar-nav-item--bold{font:var(--font-bold)}:host([nesting-level='3']) .sidebar-nav-item{border-left-color:var(--border-left-color-third-nesting);border-left-style:solid;border-left-width:0.0625rem}::slotted(a){color:currentColor;display:flex;align-items:center;padding-top:1rem;padding-right:1rem;padding-bottom:1rem;padding-left:var(--spacing-indent);border-radius:var(--telekom-radius-small);text-decoration:none;outline:none;min-height:20px}:host([nesting-level='2']) ::slotted(a){padding-left:calc(var(--spacing-indent) + 0.75rem)}::slotted(a:hover){color:var(--color-hover)}::slotted(a:focus){box-shadow:var(--box-shadow-focus)}::slotted(a:active){color:var(--color-active)}.sidebar-nav-item--condensed{border-bottom-width:0}.sidebar-nav-item--condensed ::slotted(a){padding-top:0.5rem;padding-left:0.75rem;padding-right:0.5rem;padding-bottom:0.5rem}";export{n as scale_sidebar_nav_item}