@telekom/scale-components/dist/scale-components/p-ca730373.entry.js

Scale is the digital design system for Telekom products and experiences.

import{r as t,c as s,h as e,a as r,g as i}from"./p-d52b3602.js";import{c as o}from"./p-c608c6dc.js";import{e as a}from"./p-086c9d13.js";import{s as l}from"./p-c5a89792.js";const h=class{constructor(e){t(this,e),this.scaleChange=s(this,"scale-change",7),this.scaleChangeLegacy=s(this,"scaleChange",7),this.position=0,this.slottedButtons=0,this.status=[],this.size="regular",this.background="white",this.fullWidth=!1,this.disabled=!1,this.hideBorder=!1,this.singleSelect=!1,this.ariaLabelTranslation="toggle button group with $slottedButtons buttons",this.colorScheme="color",this.variant="color"}scaleClickHandler(t){let s;s=this.status.map(this.singleSelect&&t.detail.selected?s=>t.detail.id===s.id?t.detail:Object.assign(Object.assign({},s),{selected:!1}):s=>t.detail.id===s.id?t.detail:Object.assign({},s)),this.setNewState(s)}handlePropsChange(){this.propagatePropsToChildren()}componentDidLoad(){const t=[],s=this.getAllToggleButtons();this.slottedButtons=s.length,s.forEach((s=>{this.position++,t.push({id:s.getAttribute("toggle-button-id"),selected:s.hasAttribute("selected")}),s.setAttribute("position",this.position.toString()),s.setAttribute("aria-description-translation","$position $selected")})),this.propagatePropsToChildren(),this.position=0,this.status=t}getAllToggleButtons(){return Array.from(this.hostElement.querySelectorAll("scale-toggle-button"))}propagatePropsToChildren(){this.getAllToggleButtons().forEach((t=>{t.setAttribute("size",this.size),t.setAttribute("background",this.background),t.setAttribute("disabled",this.disabled&&"disabled"),t.setAttribute("color-scheme","color"!==this.variant?this.variant:this.colorScheme),t.setAttribute("variant","color"!==this.colorScheme?this.colorScheme:this.variant),t.setAttribute("hide-border",this.hideBorder?"true":"false")}))}getAriaLabelTranslation(){return this.ariaLabelTranslation.replace(/\$slottedButtons/g,`${this.slottedButtons}`)}componentDidRender(){this.fullWidth&&this.setButtonWidth(),this.setChildrenCorners(),"color"!==this.colorScheme&&l({tag:"deprecated",message:'Property "colorScheme" is deprecated. Please use the "variant" property!',type:"warn",source:this.hostElement})}setNewState(t){Array.from(this.hostElement.querySelectorAll("scale-toggle-button")).forEach(((s,e)=>{s.setAttribute("selected",t[e].selected?"true":"false")})),this.status=t,a(this,"scaleChange",this.status)}setButtonWidth(){Array.from(this.hostElement.children).forEach((t=>{t.shadowRoot.querySelector("button").style.width="100%"}))}setChildrenCorners(){const t=Array.from(this.hostElement.children);if(1===t.length)t[0].setAttribute("radius","all");else for(let s=0;s<t.length;s++)0===s&&t[s].setAttribute("radius","left"),s>0&&s<t.length-1&&t[s].setAttribute("radius","neither"),s===t.length-1&&t[s].setAttribute("radius","right")}render(){return e(r,null,this.styles&&e("style",null,this.styles),e("div",{class:this.getCssClassMap(),part:this.getBasePartMap(),"aria-label":this.getAriaLabelTranslation(),role:"group"},e("slot",null)))}getBasePartMap(){return this.getCssOrBasePartMap("basePart")}getCssClassMap(){return this.getCssOrBasePartMap("css")}getCssOrBasePartMap(t){const s="basePart"===t?"":"toggle-group--";return o("toggle-group",this.fullWidth&&`${s}block`,!this.fullWidth&&`${s}inline`,this.disabled&&`${s}disabled`)}get hostElement(){return i(this)}static get watchers(){return{background:["handlePropsChange"],disabled:["handlePropsChange"],hideBorder:["handlePropsChange"],size:["handlePropsChange"],variant:["handlePropsChange"]}}};h.style=":host{--border-color:var(--telekom-color-ui-border-standard);--border-color-disabled:var(--telekom-color-ui-border-disabled);--border:var(--telekom-spacing-composition-space-01) solid\n    var(--border-color);--border-disabled:var(--telekom-spacing-composition-space-01) solid\n    var(--border-color-disabled);--radius:var(--telekom-radius-standard)}.toggle-group--inline{display:inline-flex}.toggle-group--block{display:flex}.toggle-group--block ::slotted(*){flex-grow:1}";export{h as scale_toggle_group}