@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 e,H as r,d as i,h as t,c as s}from"./p-e7f1ba21.js";import{c as a,s as c}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-numeric-input-width:6ch;--cbp-slider-track-selection-size:0;--cbp-slider-track-selection-offset: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:var(--cbp-slider-numeric-input-width)}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;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));margin-inline-start:var(--cbp-slider-track-selection-offset);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;z-index:2}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;z-index:2}cbp-slider input[type=range]:last-of-type:not(:first-of-type){position:absolute}cbp-slider input[type=range]:last-of-type:not(:first-of-type)::-webkit-slider-runnable-track{background:transparent}cbp-slider input[type=range]:last-of-type:not(:first-of-type)::-moz-range-track{background:transparent}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}cbp-slider[variant=range] input[type=range]{pointer-events:none}cbp-slider[variant=range] input[type=range]::-webkit-slider-runnable-track{pointer-events:none}cbp-slider[variant=range] input[type=range]::-moz-range-track{pointer-events:none}";const l=o;const d=e(class e extends r{constructor(){super();this.__registerHost();this.valueChange=i(this,"valueChange",7);this.formFields=[];this.valueFields=[];this.fieldId=a("cbp-slider");this.value=undefined;this.gap=0;this.variant="single";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={}}async reset(){this.value=this.initialValue!=undefined?this.initialValue:"";if(this.variant=="range")this.initRangeSlider();if(!this.hideInput){if(this.variant=="range"){this.valueFields.forEach(((e,r)=>{!isNaN(this.initialValue[r])?e.setAttribute("value",this.initialValue[r]):e.removeAttribute("value")}))}else!isNaN(this.initialValue)?this.valueField1.setAttribute("value",this.initialValue):this.valueField1.removeAttribute("value")}this.setSliderBar()}watchDisabledHandler(e){this.formFields.forEach((r=>{e?r.setAttribute("disabled",""):r.removeAttribute("disabled")}))}handleChange(e,r=0){var i,t,s,a;let c=!isNaN(e.target.value)&&!isNaN(parseFloat(e.target.value))?e.target.value:this.min;if(r==1){const e=Number(((i=this.value)===null||i===void 0?void 0:i[0])||this.min)+this.gap;if(c<e)c=e}else if(c<this.min)c=this.min;if(r==0&&this.formFields.length>1){const e=Number(((t=this.value)===null||t===void 0?void 0:t[1])||this.max)-this.gap;if(c>e)c=e}else if(c>this.max)c=this.max;this.formFields[r].value=c;if(!!this.valueFields[r])this.valueFields[r].value=c;if(this.variant=="single")this.value=c;else{this.value=[r==0?c:((s=this.value)===null||s===void 0?void 0:s[0])||undefined,r==1?c:((a=this.value)===null||a===void 0?void 0:a[1])||undefined];this.updateRangeBoundaries()}this.valueChange.emit({host:this.host,nativeElement:this.formFields[r],value:this.value,nativeEvent:e});this.setSliderBar()}setSliderBar(){var e,r,i;if(this.variant=="single"){let e=(Number(this.value)-this.min)/(this.max-this.min);this.host.style.setProperty("--cbp-slider-track-selection-size",`${e||0}`)}else{let t=(((e=this.value)===null||e===void 0?void 0:e[1])-((r=this.value)===null||r===void 0?void 0:r[0]))/(this.max-this.min)||0;let s=(((i=this.value)===null||i===void 0?void 0:i[0])-this.min)/(this.max-this.min)*100||0;this.host.style.setProperty("--cbp-slider-track-selection-size",`${t}`);this.host.style.setProperty("--cbp-slider-track-selection-offset",`${s}%`)}}initRangeSlider(){this.variant="range";let e;if(typeof this.value=="string"){e=this.value.split(",").map(Number);e.forEach(((r,i)=>{if(isNaN(r))e[i]=""}));this.value=[...e]}}updateRangeBoundaries(){if(!this.hideInput){this.valueFields.forEach(((e,r)=>{if(r==0){e===null||e===void 0?void 0:e.setAttribute("max",`${Number(this.value[1]||this.max)-this.gap}`)}if(r==1){e===null||e===void 0?void 0:e.setAttribute("min",`${Number(this.value[0]||this.min)+this.gap}`)}}))}}componentWillLoad(){this.formFields=Array.from(this.host.querySelectorAll("input[type=range]"));if(this.formFields.length>1){this.initRangeSlider()}if(typeof this.sx=="string"){this.sx=JSON.parse(this.sx)||{}}c(this.host,Object.assign({},this.sx))}componentDidLoad(){this.valueFields=this.variant=="range"?[this.valueField1,this.valueField2]:[this.valueField1];this.formFields.forEach(((e,r)=>{if(!!e.getAttribute("id")){this.fieldId=e.getAttribute("id")}else{if(this.variant=="single"){e.setAttribute("id",`${this.fieldId}`)}else{e.setAttribute("id",`${this.fieldId}${r==1?"-end":""}`)}}if(this.value)e.setAttribute("value",this.variant=="range"?this.value[r]:this.value);if(this.min)e.setAttribute("min",`${this.min}`);if(this.max)e.setAttribute("max",`${this.max}`);if(this.step)e.setAttribute("step",`${this.step}`);if(this.disabled)e.setAttribute("disabled","");if(r==1)e.setAttribute("aria-labelledby",`${this.fieldId}-label`);if(this.variant=="range"){if(document.querySelector(`${this.fieldId}-description`))e.setAttribute("aria-describedby",`${this.fieldId}-description`);else e.setAttribute("aria-description",r==0?"Range start":"Range end")}if(this.value!=undefined){this.setSliderBar()}e.addEventListener("click",(()=>e.focus()));e.addEventListener("input",(e=>this.handleChange(e,r)));this.initialValue=this.value}))}componentDidRender(){this.valueFields.forEach((e=>{e===null||e===void 0?void 0:e.removeAttribute("aria-describedby")}))}render(){var e,r;return t(s,{key:"271858cc4f7d313c271df3b67210bb63e1584851"},!this.hideInput&&this.variant=="range"&&t("input",{key:"6fbbdc8c31d45d02d3677d5afe98bd00cea39ee8",type:"number",min:this.min,max:this.max,step:this.step,value:this.variant=="range"?(e=this.value)===null||e===void 0?void 0:e[0]:`${this.value}`,disabled:this.disabled,"aria-labelledby":`${this.fieldId}-label`,"aria-description":"Slider 1 value","aria-invalid":this.error,ref:e=>this.valueField1=e,onChange:e=>this.handleChange(e,0)}),(!this.hideMinmax||this.host.querySelector('[slot="cpb-slider-before"]'))&&t("span",{key:"858b7daa8791a18800727812c21641f004f26939"},!this.hideMinmax&&this.min,t("slot",{key:"8db542532da0e625a673ec34f6307e24277deec5",name:"cpb-slider-before"})),t("div",{key:"88ea8a6e653d9428ac361e6fef4df25e4acca623",class:"cbp-slider-wrapper"},t("span",{key:"39fe9f424a979c2f51c2cdc3100ef20a3f9fc3e5",class:"cbp-slider-selection"}),t("slot",{key:"906d92a1c78c279afa32c76a6c3c002d22e2d4e8"})),(!this.hideMinmax||this.host.querySelector('[slot="cpb-slider-after"]'))&&t("span",{key:"c9e3650f1dceda9a94520a5928fe14da0af12e76"},t("slot",{key:"d5fc7e843885bcfa6712b3fe7469800e46820aba",name:"cpb-slider-after"}),!this.hideMinmax&&this.max),!this.hideInput&&t("input",{key:"bddd64c541d6c381c49163a328da53e55b0f667a",type:"number",min:this.min,max:this.max,step:this.step,value:this.variant=="range"?(r=this.value)===null||r===void 0?void 0:r[1]:`${this.value}`,disabled:this.disabled,"aria-labelledby":`${this.fieldId}-label`,"aria-description":`Slider ${this.variant=="range"?2:1} value`,"aria-invalid":this.error,ref:e=>this.variant=="range"?this.valueField2=e:this.valueField1=e,onChange:e=>this.handleChange(e,this.variant=="range"?1:0)}))}get host(){return this}static get watchers(){return{disabled:["watchDisabledHandler"]}}static get style(){return l}},[4,"cbp-slider",{fieldId:[1,"field-id"],value:[1544],gap:[2],variant:[1537],min:[2],max:[2],step:[2],hideMinmax:[4,"hide-minmax"],hideInput:[4,"hide-input"],error:[516],disabled:[516],context:[513],sx:[8],reset:[64]},undefined,{disabled:["watchDisabledHandler"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["cbp-slider"];e.forEach((e=>{switch(e){case"cbp-slider":if(!customElements.get(e)){customElements.define(e,d)}break}}))}const b=d;const p=n;export{b as CbpSlider,p as defineCustomElement};
//# sourceMappingURL=cbp-slider.js.map