@telekom/scale-components
Version:
Scale is the digital design system for Telekom products and experiences.
1 lines • 11.7 kB
JavaScript
import{r as o,c as r,h as n,a as t,g as e}from"./p-d52b3602.js";import{c as a}from"./p-c608c6dc.js";import{g as d,e as i}from"./p-086c9d13.js";import{s}from"./p-c5a89792.js";const l=class{constructor(n){o(this,n),this.scaleInput=r(this,"scale-input",7),this.scaleInputLegacy=r(this,"scaleInput",7),this.scaleChange=r(this,"scale-change",7),this.scaleChangeLegacy=r(this,"scaleChange",7),this.scaleFocus=r(this,"scale-focus",7),this.scaleFocusLegacy=r(this,"scaleFocus",7),this.scaleBlur=r(this,"scale-blur",7),this.scaleBlurLegacy=r(this,"scaleBlur",7),this.scaleKeyDown=r(this,"scale-keydown",7),this.scaleKeyDownLegacy=r(this,"scaleKeydown",7),this.name="",this.label="",this.helperText="",this.status="",this.invalid=!1,this.variant="informational",this.value="",this.controlled=!1,this.hideLabelVisually=!1,this.internalId=d(),this.handleSelectChange=o=>{const r=o.target;this.controlled?(i(this,"scaleChange",{value:r.value}),this.selectElement.value=String(this.value),this.forceUpdate=String(Date.now())):(this.value=r.value||"",this.emitChange())},this.handleInput=o=>{const r=o.target;r&&(this.value=r.value||"",this.emitChange()),i(this,"scaleInput",o)},this.handleChange=o=>{const r=o.target;r&&(this.value=r.value||"",this.emitChange())},this.handleFocus=()=>{i(this,"scaleFocus")},this.handleBlur=()=>{i(this,"scaleBlur")},this.handleKeyDown=o=>{i(this,"scaleKeyDown",o)}}componentWillLoad(){this.hasSlotIcon=!!this.hostElement.querySelector('[slot="icon"]'),null==this.inputId&&(this.inputId="input-dropdown-"+this.internalId)}componentDidLoad(){const o=this.selectElement,r=o.selectedIndex>-1?o.options[o.selectedIndex].value:null;this.value?o.value=String(this.value):r&&(this.value=r),this.selectElement&&(this.mutationObserver=new MutationObserver((()=>{this.forceUpdate=String(Date.now())})),this.mutationObserver.observe(this.hostElement,{childList:!0,subtree:!0}))}componentDidUpdate(){this.hasSlotIcon=!!this.hostElement.querySelector('[slot="icon"]')}componentDidRender(){const o=null==this.value?"":this.value.toString();this.controlled&&this.selectElement.value.toString()!==o&&(this.selectElement.value=o),""!==this.status&&s({tag:"deprecated",message:'Property "status" is deprecated. Please use the "invalid" property!',type:"warn",source:this.hostElement}),this.size&&s({tag:"deprecated",message:'Property "size" is deprecated. Please use css overwrite!',type:"warn",source:this.hostElement})}disconnectedCallback(){this.mutationObserver&&this.mutationObserver.disconnect()}emitChange(){i(this,"scaleChange",{value:null==this.value?this.value:this.value.toString()})}render(){const o="error"===this.status||this.invalid?{"aria-invalid":!0}:{},r={"aria-describedBy":`helper-message-${this.internalId}`};return n(t,null,n("div",{class:this.getCssClassMap()},n("label",{class:"input__label",htmlFor:this.inputId},this.label),n("div",{class:"input__dropdown-wrapper"},n("select",Object.assign({ref:o=>this.selectElement=o,class:"input__dropdown",value:this.value,onChange:this.handleSelectChange,onFocus:this.handleFocus,onBlur:this.handleBlur,onKeyDown:this.handleKeyDown,disabled:this.disabled,required:this.required,multiple:this.multiple,id:this.inputId,name:this.name,size:this.visibleSize},o,this.helperText?r:{}),n("slot",null)),n("div",{class:"input__dropdown-icon"},this.hasSlotIcon?n("slot",{name:"icon"}):n("scale-icon-navigation-collapse-down",{size:20,decorative:!0}))),this.helperText&&n("scale-helper-text",{helperText:this.helperText,variant:this.invalid?"danger":this.variant})))}getCssClassMap(){return a("dropdown",this.disabled&&"dropdown--disabled",this.transparent&&"dropdown--transparent",this.status&&`dropdown--status-${this.status}`,this.helperText&&"dropdown--helper-text",this.variant&&`dropdown--variant-${this.invalid?"danger":this.variant}`,null!=this.value&&""!==this.value&&"animated",this.hideLabelVisually&&"dropdown--hide-label")}get hostElement(){return e(this)}};l.style="scale-dropdown{--font-weight:var(--telekom-typography-font-weight-bold);--height:var(--telekom-spacing-composition-space-13);--spacing-x:var(--telekom-spacing-composition-space-05);--spacing-dropdown:18px var(--telekom-spacing-composition-space-12) 5px\n calc(var(--spacing-x) - 1px);--transition:all var(--telekom-motion-duration-transition)\n var(--telekom-motion-easing-standard);--radius:var(--telekom-radius-standard);--border:var(--telekom-spacing-composition-space-01) solid\n var(--telekom-color-ui-border-standard);--border-danger:var(--telekom-spacing-composition-space-02) solid\n var(--telekom-color-functional-danger-standard);--border-success:var(--telekom-spacing-composition-space-02) solid\n var(--telekom-color-functional-success-standard);--border-warning:var(--telekom-spacing-composition-space-02) solid\n var(--telekom-color-functional-warning-standard);--border-color-hover:var(--telekom-color-ui-border-hovered);--border-color-focus:var(--telekom-color-ui-border-hovered);--border-color-disabled:var(--telekom-color-ui-border-disabled);--focus-outline:var(--telekom-line-weight-highlight) solid\n var(--telekom-color-functional-focus-standard);--color-disabled:var(--telekom-color-text-and-icon-disabled);--background-disabled:none;--color:var(--telekom-color-text-and-icon-standard);--background-color:var(--telekom-color-ui-state-fill-standard);--margin-bottom-helper-text:var(--telekom-spacing-composition-space-03);--transition-input:var(--transition);--font-size-input:var(--telekom-typography-font-size-body);--spacing-y-meta:var(--telekom-spacing-composition-space-03);--color-meta:var(--telekom-color-text-and-icon-standard);--height-icon:var(--telekom-spacing-composition-space-07);--color-icon:var(--telekom-color-text-and-icon-standard);--color-icon-hover:var(--telekom-color-text-and-icon-standard);--color-icon-active:var(--telekom-color-text-and-icon-standard);--transition-icon:var(--transition);--color-label:var(--telekom-color-text-and-icon-additional);--z-index-label:var(--scl-z-index-10);--transition-label:var(--transition);--font-size-label:var(--telekom-typography-font-size-body);--font-weight-label:var(--telekom-typography-font-weight-medium);--font-size-label-focus:var(--telekom-typography-font-size-small);--font-weight-label-focus:var(--telekom-typography-font-weight-bold)}.dropdown{position:relative}.dropdown .input__dropdown{width:100%;height:var(--height);margin:0;display:flex;outline:none;padding:var(--spacing-dropdown);z-index:1;box-sizing:border-box;transition:var(--transition-input);font-family:inherit;font-size:var(--font-size-input);border-radius:var(--radius);border:var(--border);white-space:nowrap;line-height:var(--font-size-input);text-overflow:ellipsis;appearance:none;-webkit-appearance:none;background-color:var(--background-color);color:var(--color)}.dropdown--hide-label .input__dropdown{padding:5px var(--telekom-spacing-composition-space-12) 5px\n calc(var(--spacing-x) - 1px)}.dropdown--hide-label .input__label{visibility:hidden}.dropdown .input__dropdown-wrapper{position:relative}.dropdown.dropdown--helper-text .input__dropdown-wrapper{margin-bottom:var(--margin-bottom-helper-text)}.dropdown .input__meta{display:flex;justify-content:space-between;margin-top:var(--spacing-y-meta);color:var(--color-meta)}.dropdown.dropdown--disabled .input__dropdown-wrapper .input__dropdown-icon{color:var(--color-disabled)}.dropdown:not(.dropdown--disabled):hover .input__dropdown-icon{color:var(--color-icon-hover)}.dropdown:not(.dropdown--disabled):active .input__dropdown-icon{color:var(--color-icon-active)}.dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger) .input__dropdown:hover{border-color:var(--border-color-hover);background-color:var(--telekom-color-ui-state-fill-hovered)}.dropdown:not(.dropdown--disabled).dropdown--variant-danger .input__dropdown:hover{border-color:var(--telekom-color-functional-danger-hovered);background-color:var(--telekom-color-ui-state-fill-hovered)}.dropdown:not(.dropdown--disabled).dropdown--variant-warning .input__dropdown:hover{border-color:var(--telekom-color-functional-warning-hovered);background-color:var(--telekom-color-ui-state-fill-hovered)}.dropdown:not(.dropdown--disabled).dropdown--variant-success .input__dropdown:hover{border-color:var(--telekom-color-functional-success-hovered);background-color:var(--telekom-color-ui-state-fill-hovered)}.dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger) .input__dropdown:focus{border-color:var(--border-color-focus)}.dropdown:not(.dropdown--disabled).dropdown--variant-danger .input__dropdown:focus{border-color:var(--telekom-color-functional-danger-hovered)}.dropdown:not(.dropdown--disabled).dropdown--variant-warning .input__dropdown:focus{border-color:var(--telekom-color-functional-warning-hovered)}.dropdown:not(.dropdown--disabled).dropdown--variant-success .input__dropdown:focus{border-color:var(--telekom-color-functional-success-hovered)}.dropdown:not(.dropdown--disabled) .input__dropdown:focus{outline:var(--focus-outline);outline-offset:1px}.dropdown .input__dropdown-wrapper .input__dropdown-icon{top:50%;right:var(--spacing-x);position:absolute;transform:translateY(-50%);pointer-events:none;height:var(--height-icon);color:var(--color-icon);transition:var(--transition-icon)}.input__label{top:-2px;color:var(--color-label);display:flex;z-index:var(--z-index-label);position:absolute;transition:var(--transition-label);pointer-events:none;font-size:var(--font-size-label);transform:translate(\n var(--spacing-x),\n calc(\n (var(--telekom-spacing-composition-space-14) - var(--font-size-label)) / 2\n )\n );font-weight:var(--font-weight-label)}.animated .input__label{transform:translate(\n var(--spacing-x),\n var(--telekom-spacing-composition-space-04)\n );font-size:var(--font-size-label-focus);font-weight:var(--font-weight-label-focus);line-height:var(--telekom-typography-font-size-small)}.dropdown--variant-danger .input__dropdown{border:var(--border-danger)}.dropdown--variant-warning .input__dropdown{border:var(--border-warning)}.dropdown--variant-success .input__dropdown{border:var(--border-success)}.dropdown--transparent .input__dropdown{background-color:transparent}.dropdown--disabled label,.dropdown--disabled .input__label,.dropdown--disabled input,.dropdown--disabled .input__dropdown{cursor:not-allowed;border-color:var(--border-color-disabled);color:var(--color-disabled);background:var(--background-disabled)}[data-mode='light'] .dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger) .input__dropdown:hover{background-color:var(--telekom-color-ui-state-fill-hovered)}[data-mode='light'] .dropdown:not(.dropdown--disabled).dropdown--variant-danger .input__dropdown:hover{background-color:var(--telekom-color-ui-state-fill-hovered)}[data-mode='dark'] .dropdown .input__dropdown{background-color:var(--telekom-color-background-canvas)}[data-mode='dark'] .dropdown:not(.dropdown--disabled):not(.dropdown--variant-danger) .input__dropdown:hover{background-color:#1b1b1b}[data-mode='dark'] .dropdown:not(.dropdown--disabled).dropdown--variant-danger .input__dropdown:hover{background-color:#1b1b1b}[data-mode='dark'] .dropdown--disabled .input__dropdown{background-color:var(--telekom-color-background-canvas)}@media (prefers-color-scheme: dark){.dropdown .input__dropdown{background-color:var(--telekom-color-background-canvas)}.dropdown:not(.dropdown--disabled):not(.dropdown--status-error) .input__dropdown:hover{background-color:#1b1b1b}.dropdown:not(.dropdown--disabled).dropdown--status-error .input__dropdown:hover{background-color:#1b1b1b}.dropdown--disabled .input__dropdown{background-color:var(--telekom-color-background-canvas)}}";export{l as scale_dropdown}