@cbpds/web-components
Version:
Web components for the CBP Design System.
5 lines • 12.3 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
import{r as e,c as r,h as i,a as t,g as s}from"./p-654179c2.js";import{c as a,s as c}from"./p-93ade441.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;--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: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;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=class{constructor(i){e(this,i);this.valueChange=r(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={}}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],r==1?c:(a=this.value)===null||a===void 0?void 0:a[1]];this.updateRangeBoundaries()}this.valueChange.emit({host:this.host,nativeElement:this.formFields[r],value:this.value,nativeEvent:e});this.setSliderBar()}initRangeValues(){if(typeof this.value=="string"){this.value=this.value.split(",").map(Number)||[undefined,undefined]}}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";if(typeof this.value=="string"){this.value=this.value.split(",").map(Number)||[undefined,undefined]}}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)))}))}componentDidRender(){this.valueFields.forEach((e=>{e===null||e===void 0?void 0:e.removeAttribute("aria-describedby")}))}render(){var e,r;return i(t,{key:"46b8036fab408e9fe04b22267051d317e2d26c44"},!this.hideInput&&this.variant=="range"&&i("input",{key:"0cd71fb085d417d64fae2515b4a397d9e88f09e4",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])||undefined:`${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"]'))&&i("span",{key:"8af23aaa497932c27e9b9d189d700af0218cdc65"},!this.hideMinmax&&this.min,i("slot",{key:"9760c5d838c5f9e5e6f5ca8b692dcc2cfb8fc2ee",name:"cpb-slider-before"})),i("div",{key:"957846b676686cbf0287c249e46dd71acd5024e5",class:"cbp-slider-wrapper"},i("span",{key:"ef0a1b974f6c741ff06f020967da3a752b7f1dd3",class:"cbp-slider-selection"}),i("slot",{key:"d391f7f3218f15de31e916a449bf76fe984683e1"})),(!this.hideMinmax||this.host.querySelector('[slot="cpb-slider-after"]'))&&i("span",{key:"61827dc879971640b857cb2d7fd556d95856190b"},i("slot",{key:"b0458c8442740652c1b1f32fbd1f3d2f7d36456e",name:"cpb-slider-after"}),!this.hideMinmax&&this.max),!this.hideInput&&i("input",{key:"5978cf26359a95e58a84eee278af9cfa692641a8",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])||undefined:`${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 s(this)}static get watchers(){return{disabled:["watchDisabledHandler"]}}};d.style=l;export{d as cbp_slider};
//# sourceMappingURL=p-a2472e5d.entry.js.map