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

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

import{r as e,c as t,h as i,a as o,g as a}from"./p-d52b3602.js";import{c}from"./p-c608c6dc.js";import{e as n}from"./p-086c9d13.js";const r=class{constructor(i){e(this,i),this.scaleChange=t(this,"scale-change",7),this.scaleChangeLegacy=t(this,"scaleChange",7),this.scaleClose=t(this,"scale-close",7),this.scaleCloseLegacy=t(this,"scaleClose",7),this.variant="standard",this.type="persistent",this.selected=!1,this.disabled=!1,this.dismissText="dismiss",this.handleClose=e=>{e.preventDefault(),e.stopPropagation(),this.disabled&&"dynamic"!==this.type||n(this,"scaleClose",e)},this.handleClick=e=>{"dynamic"!==this.type&&(this.selected=!this.selected),e.preventDefault(),e.stopPropagation(),this.disabled&&"dynamic"!==this.type||n(this,"scaleChange",e)}}componentDidRender(){const e=this.hostElement.querySelector('[slot="chip-icon"]');null!==e&&(e.children[0].getAttribute("size")===String(24)&&e.children[0].setAttribute("size",String(16)),e.children[0].setAttribute("selected",String(!!this.selected)))}disconnectedCallback(){}getIcon(){return"dynamic"===this.type&&this.selected?i("button",{part:"button-dismissable",disabled:this.disabled,"aria-label":this.dismissText,onClick:this.disabled?null:this.handleClose},i("scale-icon-action-close",{"accessibility-title":"close",size:16,selected:!0})):"persistent"===this.type&&this.selected?i("scale-icon-action-checkmark",{"accessibility-title":"success",size:16,selected:!0}):"persistent"===this.type?i("scale-icon-action-checkmark",{"accessibility-title":"success",size:16}):void 0}render(){return i(o,null,this.styles&&i("style",null,this.styles),i("span","dynamic"===this.type&&this.selected?{role:this.ariaRoleTitle,tabindex:this.selected?"0":"-1",part:this.getBasePartMap(),class:this.getCssClassMap(),onClick:this.disabled&&"dynamic"!==this.type?null:this.handleClick}:{role:this.ariaRoleTitle?this.ariaRoleTitle:"switch","aria-checked":this.ariaCheckedState?this.ariaCheckedState:this.selected,tabindex:this.selected?"0":"-1",part:this.getBasePartMap(),class:this.getCssClassMap(),onClick:this.disabled&&"dynamic"!==this.type?null:this.handleClick},i("slot",{name:"chip-icon"}),i("span",{class:"chip-label"},i("slot",null)),this.selected?this.getIcon():null))}getBasePartMap(){return this.getCssOrBasePartMap("basePart")}getCssClassMap(){return this.getCssOrBasePartMap("css")}getCssOrBasePartMap(e){const t="basePart"===e?"":"chip--";return c("basePart"===e?"base":"chip",!!this.selected&&`${t}selected`,!!this.disabled&&`${t}disabled`,this.type&&`${t}type-${this.type}`,this.variant&&`${t}variant-${this.variant}`)}get hostElement(){return a(this)}};r.style=":host{--height:32px;--font-size:var(--telekom-typography-font-size-body);--line-height:var(--telekom-typography-line-spacing-standard);--font-weight:var(--telekom-typography-font-weight-bold);--color-focus:var(--telekom-color-functional-focus-standard);--focus-outline:var(--telekom-line-weight-highlight) solid\n    var(--telekom-color-functional-focus-standard);--box-shadow:0px 1px 2px rgba(0, 0, 0, 0.1), 0px 2px 8px rgba(0, 0, 0, 0.1);--background-standard-selected:var(--telekom-color-ui-extra-strong);--color-standard-selected:var(\n    --telekom-color-text-and-icon-inverted-standard\n  )}.chip{box-sizing:border-box;border:var(--telekom-spacing-composition-space-01) solid transparent;display:inline-flex;outline:none;padding:0 var(--telekom-spacing-composition-space-05);text-align:center;align-items:center;white-space:nowrap;border-radius:1rem;border-color:rgba(255, 255, 255, 0.14);height:var(--height);vertical-align:baseline;justify-content:center;cursor:default;color:var(--telekom-color-text-and-icon-standard);background:var(--telekom-color-text-and-icon-inverted-standard);border:1px solid var(--telekom-color-ui-border-standard)}.chip.chip--selected.chip--type-dynamic{padding-right:var(--telekom-spacing-composition-space-03)}.chip.chip--selected.chip--type-dynamic button{border:none;cursor:pointer;padding:0;height:24px;width:24px;outline:none;background:transparent;border-radius:var(--telekom-radius-circle);display:flex;justify-content:center;align-items:center;background-color:transparent}.chip.chip--selected.chip--type-dynamic.chip--variant-standard button:hover{background:var(--telekom-color-ui-state-fill-hovered-inverted)}.chip.chip--selected.chip--type-dynamic.chip--variant-standard button:active{background:var(--telekom-color-ui-state-fill-pressed-inverted)}.chip.chip--selected.chip--type-dynamic button:focus{justify-content:center;outline:var(--focus-outline)}.chip.chip--selected.chip--type-dynamic.chip--variant-standard scale-icon-action-close{padding:0;color:var(--telekom-color-text-and-icon-inverted-standard)}.chip:not(.chip--disabled):not(.chip--type-dynamic):focus,.chip.chip--type-dynamic:not(.chip--selected):focus{outline:var(--telekom-spacing-composition-space-02) solid var(--color-focus);outline-offset:var(--telekom-spacing-composition-space-01)}.chip:not(.chip--disabled):not(.chip--type-dynamic):hover,.chip.chip--type-dynamic:not(.chip--selected):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered),\n      var(--telekom-color-ui-state-fill-hovered)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip:not(.chip--disabled):not(.chip--type-dynamic):active,.chip.chip--type-dynamic:not(.chip--selected):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed),\n      var(--telekom-color-ui-state-fill-pressed)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip--selected{background:var(--background-standard-selected);color:var(--color-standard-selected)}.chip--selected:not(.chip--disabled):not(.chip--type-dynamic):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered-inverted),\n      var(--telekom-color-ui-state-fill-hovered-inverted)\n    ),\n    var(--background-standard-selected)}.chip--selected:not(.chip--disabled):not(.chip--type-dynamic):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed-inverted),\n      var(--telekom-color-ui-state-fill-pressed-inverted)\n    ),\n    var(--background-standard-selected)}.chip-label{padding:0 var(--telekom-spacing-composition-space-03) 0\n    var(--telekom-spacing-composition-space-03);font-weight:var(--telekom-typography-font-weight-bold);font-size:1rem;line-height:100%}.chip--selected .chip-label{padding-right:var(--telekom-spacing-composition-space-04)}.chip--type-dynamic.chip--selected .chip-label{padding-right:var(--telekom-spacing-composition-space-03)}.chip slot[name='chip-icon']::slotted(*){padding-right:var(--telekom-spacing-composition-space-03);padding-top:var(--telekom-spacing-composition-space-03)}.chip.chip--disabled:not(.chip--type-dynamic){color:var(--telekom-color-text-and-icon-disabled);border:1px solid var(--telekom-color-ui-border-disabled)}.chip--selected:not(.chip--variant-outlined):not(.chip--type-dynamic).chip--disabled{background:var(--telekom-color-ui-disabled);color:var(--telekom-color-text-and-icon-disabled);border:none}.chip--variant-outlined.chip--selected.chip--disabled:not(.chip--type-dynamic){background-color:var(--telekom-color-text-and-icon-inverted-standard);color:var(--telekom-color-text-and-icon-disabled);border:1px solid var(--telekom-color-ui-border-disabled)}.chip.chip--variant-outline.chip--selected:not(.chip.chip--disabled):not(.chip--type-dynamic):hover{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-hovered),\n      var(--telekom-color-ui-state-fill-hovered)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip.chip--variant-outline.chip--selected:not(.chip.chip--disabled):not(.chip--type-dynamic):active{background:linear-gradient(\n      var(--telekom-color-ui-state-fill-pressed),\n      var(--telekom-color-ui-state-fill-pressed)\n    ),\n    var(--telekom-color-text-and-icon-inverted-standard)}.chip.chip--variant-outline.chip--selected{color:var(--telekom-color-text-and-icon-primary-standard);background:var(--telekom-color-text-and-icon-inverted-standard);border:1px solid var(--telekom-color-text-and-icon-primary-standard)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline scale-icon-action-close{padding:0;color:var(--telekom-color-text-and-icon-primary-standard)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:hover{background:var(--telekom-color-ui-state-fill-hovered)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:hover scale-icon-action-close{color:var(--telekom-color-text-and-icon-primary-hovered)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:active{background:var(telekom-color-ui-state-fill-pressed)}.chip.chip--selected.chip--type-dynamic.chip--variant-outline button:active scale-icon-action-close{color:var(--telekom-color-text-and-icon-primary-pressed)}";export{r as scale_chip}