@cbpds/web-components
Version:
Web components for the CBP Design System.
79 lines (73 loc) • 9.73 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-507f2a89.js');
const utils = require('./utils-99c9e716.js');
const cbpSliderCss = ":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 CbpSliderStyle0 = cbpSliderCss;
const CbpSlider = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.fieldId = utils.createNamespaceKey('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(e) {
let newValue = (!isNaN(e.target.value) && !isNaN(parseFloat(e.target.value))) ? e.target.value : this.min;
if (newValue < this.min)
newValue = this.min;
if (newValue > this.max)
newValue = this.max;
this.formField.value = newValue;
if (this.valueField)
this.valueField.value = newValue;
let newValuePercent = (newValue - this.min) / (this.max - this.min);
this.host.style.setProperty('--cbp-slider-track-selection-size', `${newValuePercent}`);
this.value = newValue;
}
componentWillLoad() {
this.formField = this.host.querySelector('input[type=range]');
if (typeof this.sx == 'string') {
this.sx = JSON.parse(this.sx) || {};
}
utils.setCSSProps(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', (e) => this.handleChange(e));
}
}
render() {
return (index.h(index.Host, { key: 'f20a6a87dfeba35e2364964025b82ae2dd8cf4f6' }, (!this.hideMinmax || this.host.querySelector('[slot="cpb-slider-before"]')) &&
index.h("span", { key: '723ec06cb8690c6ac56bd3994fb2eaec0fad51f6' }, !this.hideMinmax && this.min, index.h("slot", { key: 'c00beef77a0a28d0e8fa8f92961cd0a7c7a94350', name: "cpb-slider-before" })), index.h("div", { key: 'fbc195d844779145f343ebf2d74d210784ab1977', class: "cbp-slider-wrapper" }, index.h("span", { key: '71eca3b54708114f03319c250591b776056648a8', class: "cbp-slider-selection" }), index.h("slot", { key: '31aaafca8284c319c173fc6b6522ea7aa46c85a2' })), (!this.hideMinmax || this.host.querySelector('[slot="cpb-slider-after"]')) &&
index.h("span", { key: '3c11d1a22fb45c00e3a2d33d3ae24bd8d59d194a' }, index.h("slot", { key: 'f011b5c31ade3d710d98ec9411fc2a6772ffc20a', name: "cpb-slider-after" }), !this.hideMinmax && this.max), !this.hideInput && index.h("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: (el) => this.valueField = el, onChange: (e) => this.handleChange(e), onKeyUp: (e) => this.handleChange(e) })));
}
get host() { return index.getElement(this); }
};
CbpSlider.style = CbpSliderStyle0;
exports.cbp_slider = CbpSlider;
//# sourceMappingURL=cbp-slider.cjs.entry.js.map