@cbpds/web-components/dist/components/cbp-slider.js

Web components for the CBP Design System.

/*!
 * CPB Design System web components - built with Stencil
 */
import{p as r,H as e,h as c,c as i}from"./p-c5a784ab.js";import{c as t,s as a}from"./p-9c1b2f31.js";const o=":root{--cbp-slider-thumb-color:var(--cbp-color-interactive-secondary-dark);--cbp-slider-thumb-color-hover:var(--cbp-color-interactive-secondary-darker);--cbp-slider-thumb-color-focus:var(--cbp-color-interactive-focus-dark);--cbp-slider-thumb-color-border:var(--cbp-color-background-light);--cbp-slider-thumb-color-border-focus:var(--cbp-color-white);--cbp-slider-thumb-color-halo:transparent;--cbp-slider-thumb-color-halo-hover:var(--cbp-color-interactive-secondary-darker);--cbp-slider-thumb-color-halo-focus:var(--cbp-color-interactive-focus-dark);--cbp-slider-track-color-selected:var(--cbp-color-interactive-selected-dark);--cbp-slider-track-color-unselected:var(--cbp-color-interactive-secondary-light);--cbp-slider-thumb-color-dark:var(--cbp-color-interactive-secondary-light);--cbp-slider-thumb-color-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-slider-thumb-color-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-slider-thumb-color-border-dark:var(--cbp-color-background-dark);--cbp-slider-thumb-color-border-focus-dark:var(--cbp-color-black);--cbp-slider-thumb-color-halo-hover-dark:var(--cbp-color-interactive-secondary-lighter);--cbp-slider-thumb-color-halo-focus-dark:var(--cbp-color-interactive-focus-light);--cbp-slider-track-color-selected-dark:var(--cbp-color-interactive-selected-light);--cbp-slider-track-color-unselected-dark:var(--cbp-color-interactive-secondary-base);--cbp-slider-track-selection-size:0}[data-cbp-theme=light] cbp-slider[context*=dark],[data-cbp-theme=dark] cbp-slider:not([context=dark-inverts]):not([context=light-always]){--cbp-slider-thumb-color:var(--cbp-slider-thumb-color-dark);--cbp-slider-thumb-color-hover:var(--cbp-slider-thumb-color-hover-dark);--cbp-slider-thumb-color-focus:var(--cbp-slider-thumb-color-focus-dark);--cbp-slider-thumb-color-border:var(--cbp-slider-thumb-color-border-dark);--cbp-slider-thumb-color-border-focus:var(--cbp-slider-thumb-color-border-focus-dark);--cbp-slider-thumb-color-halo-hover:var(--cbp-slider-thumb-color-halo-hover-dark);--cbp-slider-thumb-color-halo-focus:var(--cbp-slider-thumb-color-halo-focus-dark);--cbp-slider-track-color-selected:var(--cbp-slider-track-color-selected-dark);--cbp-slider-track-color-unselected:var(--cbp-slider-track-color-unselected-dark)}cbp-slider{display:flex;align-items:center;gap:var(--cbp-space-2x);font-size:var(--cbp-font-size-subhead);font-weight:var(--cbp-font-weight-medium);font-style:italic}cbp-slider>span{display:flex;align-items:center}cbp-slider input[type=number]{width:7ch}cbp-slider input[type=number]::-webkit-outer-spin-button,cbp-slider input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}cbp-slider input[type=number]{-moz-appearance:textfield}cbp-slider .cbp-slider-wrapper{position:relative;display:flex;align-items:center;flex-grow:1;width:100%;height:100%}cbp-slider .cbp-slider-wrapper .cbp-slider-selection{position:absolute;display:block;background:var(--cbp-slider-track-color-selected);border-radius:var(--cbp-border-radius-pill);block-size:var(--cbp-space-2x);inline-size:100%;transform-origin:left center;transform:scaleX(var(--cbp-slider-track-selection-size));pointer-events:none}cbp-slider input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;border:0;outline:0;margin:0;padding:0;cursor:pointer}cbp-slider input[type=range]::-webkit-slider-runnable-track{background:var(--cbp-slider-track-color-unselected);height:var(--cbp-space-1x);border-radius:var(--cbp-border-radius-pill)}cbp-slider input[type=range]::-moz-range-track{background:var(--cbp-slider-track-color-unselected);height:var(--cbp-space-half-x);border-radius:var(--cbp-border-radius-pill)}cbp-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--cbp-space-4x) / 2 * -1);height:var(--cbp-space-5x);width:var(--cbp-space-5x);background-color:var(--cbp-slider-thumb-color);border:var(--cbp-border-size-md) solid var(--cbp-slider-thumb-color-border);border-radius:var(--cbp-border-radius-circle);box-shadow:0 0 0 var(--cbp-space-11x) color-mix(in srgb, var(--cbp-slider-thumb-color-halo), transparent 50%);clip-path:circle(122%);pointer-events:all}cbp-slider input[type=range]::-moz-range-thumb{-webkit-appearance:none;appearance:none;margin-top:calc(var(--cbp-space-4x) / 2 * -1);height:var(--cbp-space-5x);width:var(--cbp-space-5x);background-color:var(--cbp-slider-thumb-color);border:var(--cbp-border-size-md) solid var(--cbp-slider-thumb-color-border);border-radius:var(--cbp-border-radius-circle);box-shadow:0 0 0 var(--cbp-space-11x) color-mix(in srgb, var(--cbp-slider-thumb-color-halo), transparent 50%);clip-path:circle(122%);pointer-events:all}cbp-slider input[type=range]:hover:not(:disabled){--cbp-slider-thumb-color-halo:var(--cbp-slider-thumb-color-halo-hover);--cbp-slider-thumb-color:var(--cbp-slider-thumb-color-hover)}cbp-slider input[type=range]:focus:not(:disabled){--cbp-slider-thumb-color-halo:var(--cbp-slider-thumb-color-halo-focus);--cbp-slider-thumb-color:var(--cbp-slider-thumb-color-focus);--cbp-slider-thumb-color-border:var(--cbp-slider-thumb-color-border-focus)}cbp-slider input[type=range]:disabled{--cbp-slider-thumb-color:var(--cbp-color-interactive-secondary-dark);--cbp-slider-track-color-selected:var(--cbp-color-interactive-selected-dark);--cbp-slider-track-color-unselected:var(--cbp-color-interactive-secondary-light);--cbp-slider-thumb-color-dark:var(--cbp-color-interactive-disabled-light);--cbp-slider-track-color-selected-dark:var(--cbp-color-interactive-disabled-light);--cbp-slider-track-color-unselected-dark:var(--cbp-color-interactive-disabled-dark);cursor:not-allowed}";const s=o;const l=r(class r extends e{constructor(){super();this.__registerHost();this.fieldId=t("cbp-slider");this.value=undefined;this.min=0;this.max=100;this.step=1;this.hideMinmax=undefined;this.hideInput=undefined;this.error=false;this.disabled=false;this.context=undefined;this.sx={}}handleChange(r){let e=!isNaN(r.target.value)&&!isNaN(parseFloat(r.target.value))?r.target.value:this.min;if(e<this.min)e=this.min;if(e>this.max)e=this.max;this.formField.value=e;if(this.valueField)this.valueField.value=e;let c=(e-this.min)/(this.max-this.min);this.host.style.setProperty("--cbp-slider-track-selection-size",`${c}`);this.value=e}componentWillLoad(){this.formField=this.host.querySelector("input[type=range]");if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}a(this.host,Object.assign({},this.sx))}componentDidLoad(){if(!!this.formField){this.formField.getAttribute("id")?this.fieldId=this.formField.getAttribute("id"):this.formField.setAttribute("id",`${this.fieldId}`);if(this.value)this.formField.setAttribute("value",`${this.value}`);if(this.min)this.formField.setAttribute("min",`${this.min}`);if(this.max)this.formField.setAttribute("max",`${this.max}`);if(this.step)this.formField.setAttribute("step",`${this.step}`);if(this.disabled)this.formField.setAttribute("disabled",``);this.formField.addEventListener("click",(()=>this.formField.focus()));this.formField.addEventListener("input",(r=>this.handleChange(r)))}}render(){return c(i,{key:"f20a6a87dfeba35e2364964025b82ae2dd8cf4f6"},(!this.hideMinmax||this.host.querySelector('[slot="cpb-slider-before"]'))&&c("span",{key:"723ec06cb8690c6ac56bd3994fb2eaec0fad51f6"},!this.hideMinmax&&this.min,c("slot",{key:"c00beef77a0a28d0e8fa8f92961cd0a7c7a94350",name:"cpb-slider-before"})),c("div",{key:"fbc195d844779145f343ebf2d74d210784ab1977",class:"cbp-slider-wrapper"},c("span",{key:"71eca3b54708114f03319c250591b776056648a8",class:"cbp-slider-selection"}),c("slot",{key:"31aaafca8284c319c173fc6b6522ea7aa46c85a2"})),(!this.hideMinmax||this.host.querySelector('[slot="cpb-slider-after"]'))&&c("span",{key:"3c11d1a22fb45c00e3a2d33d3ae24bd8d59d194a"},c("slot",{key:"f011b5c31ade3d710d98ec9411fc2a6772ffc20a",name:"cpb-slider-after"}),!this.hideMinmax&&this.max),!this.hideInput&&c("input",{key:"733c7bcfd8241cd9c250b9d063568fb125227981",type:"number",min:this.min,max:this.max,step:this.step,value:this.value,disabled:this.disabled,"aria-label":"Slider value","aria-describedby":`${this.fieldId}-label`,"aria-invalid":this.error,ref:r=>this.valueField=r,onChange:r=>this.handleChange(r),onKeyUp:r=>this.handleChange(r)}))}get host(){return this}static get style(){return s}},[4,"cbp-slider",{fieldId:[1,"field-id"],value:[2],min:[2],max:[2],step:[2],hideMinmax:[4,"hide-minmax"],hideInput:[4,"hide-input"],error:[516],disabled:[516],context:[513],sx:[8]}]);function d(){if(typeof customElements==="undefined"){return}const r=["cbp-slider"];r.forEach((r=>{switch(r){case"cbp-slider":if(!customElements.get(r)){customElements.define(r,l)}break}}))}const b=l;const p=d;export{b as CbpSlider,p as defineCustomElement};
//# sourceMappingURL=cbp-slider.js.map