@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
1 lines • 4.86 kB
JavaScript
import{r as t,c as e,h as s,a as i,g as a}from"./p-d52b3602.js";import{c as h}from"./p-c608c6dc.js";import{e as n}from"./p-086c9d13.js";const r=class{constructor(s){t(this,s),this.scaleChange=e(this,"scale-change",7),this.scaleChangeLegacy=e(this,"scaleChange",7),this.position=0,this.slottedSegments=0,this.status=[],this.size="small",this.multiSelect=!1,this.disabled=!1,this.fullWidth=!1,this.invalid=!1,this.helperText="Please select an option",this.ariaLabelTranslation="segment button with $slottedSegments",this.showHelperText=!1,this.getAdjacentSiblings=(t,e)=>{let s="";return 0!==e&&t[e].selected&&t[e-1].selected&&(s="left"),e!==t.length-1&&t[e].selected&&t[e+1].selected&&(s=s?s+" right":"right"),s}}scaleClickHandler(t){let e;e=this.status.map(this.multiSelect?e=>t.detail.id===e.id?t.detail:Object.assign({},e):t.detail.selected?e=>t.detail.id===e.id?t.detail:Object.assign(Object.assign({},e),{selected:!1}):e=>t.detail.id===e.id?t.detail:Object.assign({},e)),this.setState(e)}handlePropsChange(){this.propagatePropsToChildren()}propagatePropsToChildren(){this.getAllSegments().forEach((t=>{t.setAttribute("size",this.size),t.setAttribute("selected-index",this.selectedIndex.toString()),this.disabled&&t.setAttribute("disabled","disabled")}))}componentDidLoad(){const t=[],e=this.getAllSegments();this.slottedSegments=e.length;const s=this.getLongestButtonWidth();e.forEach((e=>{this.position++,t.push({id:e.getAttribute("segment-id")||e.segmentId,selected:e.hasAttribute("selected")||e.selected}),e.setAttribute("position",this.position.toString()),e.setAttribute("aria-description-translation","$position $selected")})),this.fullWidth?this.container.style.display="flex":this.container.style.gridTemplateColumns=`repeat(${this.hostElement.children.length}, ${Math.ceil(s)}px)`,this.selectedIndex=this.getSelectedIndex(),this.propagatePropsToChildren(),this.position=0,this.status=t,this.setState(t)}componentWillUpdate(){this.selectedIndex=this.getSelectedIndex(),this.showHelperText=!1,this.invalid&&this.status.filter((t=>!0===t.selected)).length<=0&&(this.showHelperText=!0)}getSelectedIndex(){return this.multiSelect?-1:this.getAllSegments().findIndex((t=>!0===t.selected))}getLongestButtonWidth(){let t=0;return Array.from(this.hostElement.children).forEach((e=>{const s=e.hasAttribute("selected"),i=e.hasAttribute("icon-only"),a="small"===this.size?14:"medium"===this.size?30:38;t=s||i?e.getBoundingClientRect().width>t?e.getBoundingClientRect().width:t:e.getBoundingClientRect().width+a>t?e.getBoundingClientRect().width+a:t})),t}setState(t){Array.from(this.hostElement.querySelectorAll("scale-segment")).forEach(((e,s)=>{e.setAttribute("adjacent-siblings",this.getAdjacentSiblings(t,s)),e.setAttribute("selected",t[s].selected?"true":"false")})),this.status=t,n(this,"scaleChange",this.status)}getAllSegments(){return Array.from(this.hostElement.querySelectorAll("scale-segment"))}getAriaLabelTranslation(){return this.ariaLabelTranslation.replace(/\$slottedSegments/g,`${this.slottedSegments}`)}render(){return s(i,null,this.styles&&s("style",null,this.styles),this.label&&s("span",{class:"segmented-button--label"}," ",this.label," "),s("div",{class:this.getCssClassMap(),part:this.getBasePartMap(),"aria-label":this.getAriaLabelTranslation(),role:"group",ref:t=>this.container=t},s("slot",null)),this.showHelperText&&s("scale-helper-text",{class:"segmented-button--helper-text",helperText:this.helperText,variant:"danger"}))}getBasePartMap(){return this.getCssOrBasePartMap("basePart")}getCssClassMap(){return this.getCssOrBasePartMap("css")}getCssOrBasePartMap(t){const e="basePart"===t?"":"segmented-button--";return h("segmented-button",this.size&&`${e}${this.size}`,this.fullWidth&&`${e}full-width`)}get hostElement(){return a(this)}static get watchers(){return{disabled:["handlePropsChange"],size:["handlePropsChange"],selectedIndex:["handlePropsChange"]}}};r.style=":host{--background-color:var(--telekom-color-ui-faint);--radius:var(--telekom-radius-standard);--height:32px;--height-medium:40px;--height-large:44px;display:flex;flex-direction:column}.segmented-button{background-color:var(--background-color);border:0;border-radius:var(--radius);padding:0 var(--telekom-spacing-composition-space-02);width:fit-content;height:var(--height);display:inline-grid}.segmented-button--full-width{width:100%}.segmented-button--medium{height:var(--height-medium);padding:0 var(--telekom-spacing-composition-space-02)}.segmented-button--large{height:var(--height-large);padding:0 var(--telekom-spacing-composition-space-02)}.segmented-button--label{font-size:var(--telekom-typography-font-size-body);font-weight:var(--telekom-typography-font-weight-bold);margin-bottom:var(--telekom-spacing-composition-space-04)}.segmented-button--helper-text{margin-top:var(--telekom-spacing-composition-space-04)}";export{r as scale_segmented_button}