@cbpds/web-components
Version:
Web components for the CBP Design System.
185 lines (179 loc) • 15.5 kB
JavaScript
/*!
* CPB Design System web components - built with Stencil
*/
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
const index = require('./index-cd71cbd5.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;--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 CbpSliderStyle0 = cbpSliderCss;
const CbpSlider = class {
constructor(hostRef) {
index.registerInstance(this, hostRef);
this.valueChange = index.createEvent(this, "valueChange", 7);
this.formFields = [];
this.valueFields = [];
this.fieldId = utils.createNamespaceKey('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(newValue) {
this.formFields.forEach((item) => {
(newValue)
? item.setAttribute('disabled', '')
: item.removeAttribute('disabled');
});
}
handleChange(e, i = 0) {
var _a, _b, _c, _d;
let newValue = (!isNaN(e.target.value) && !isNaN(parseFloat(e.target.value))) ? e.target.value : this.min;
if (i == 1) {
const Min = Number(((_a = this.value) === null || _a === void 0 ? void 0 : _a[0]) || this.min) + this.gap;
if (newValue < Min)
newValue = Min;
}
else if (newValue < this.min)
newValue = this.min;
if (i == 0 && this.formFields.length > 1) {
const Max = Number(((_b = this.value) === null || _b === void 0 ? void 0 : _b[1]) || this.max) - this.gap;
if (newValue > Max)
newValue = Max;
}
else if (newValue > this.max)
newValue = this.max;
this.formFields[i].value = newValue;
if (!!this.valueFields[i])
this.valueFields[i].value = newValue;
if (this.variant == 'single')
this.value = newValue;
else {
this.value = [
i == 0 ? newValue : (_c = this.value) === null || _c === void 0 ? void 0 : _c[0],
i == 1 ? newValue : (_d = this.value) === null || _d === void 0 ? void 0 : _d[1],
];
this.updateRangeBoundaries();
}
this.valueChange.emit({
host: this.host,
nativeElement: this.formFields[i],
value: this.value,
nativeEvent: e
});
this.setSliderBar();
}
initRangeValues() {
if (typeof this.value == 'string') {
this.value = this.value.split(',').map(Number) || [undefined, undefined];
}
}
setSliderBar() {
var _a, _b, _c;
if (this.variant == 'single') {
let newValuePercent = (Number(this.value) - this.min) / (this.max - this.min);
this.host.style.setProperty('--cbp-slider-track-selection-size', `${newValuePercent || 0}`);
}
else {
let newValuePercent = ((((_a = this.value) === null || _a === void 0 ? void 0 : _a[1]) - ((_b = this.value) === null || _b === void 0 ? void 0 : _b[0])) / (this.max - this.min)) || 0;
let newValueOffsetPercent = (((((_c = this.value) === null || _c === void 0 ? void 0 : _c[0]) - this.min) / (this.max - this.min)) * 100) || 0;
this.host.style.setProperty('--cbp-slider-track-selection-size', `${newValuePercent}`);
this.host.style.setProperty('--cbp-slider-track-selection-offset', `${newValueOffsetPercent}%`);
}
}
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((item, index) => {
if (index == 0) {
item === null || item === void 0 ? void 0 : item.setAttribute('max', `${Number(this.value[1] || this.max) - this.gap}`);
}
if (index == 1) {
item === null || item === void 0 ? void 0 : item.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) || {};
}
utils.setCSSProps(this.host, Object.assign({}, this.sx));
}
componentDidLoad() {
this.valueFields = this.variant == 'range' ? [this.valueField1, this.valueField2] : [this.valueField1];
this.formFields.forEach((item, index) => {
if (!!item.getAttribute('id')) {
this.fieldId = item.getAttribute('id');
}
else {
if (this.variant == 'single') {
item.setAttribute('id', `${this.fieldId}`);
}
else {
item.setAttribute('id', `${this.fieldId}${index == 1 ? '-end' : ''}`);
}
}
if (this.value)
item.setAttribute('value', this.variant == 'range' ? this.value[index] : this.value);
if (this.min)
item.setAttribute('min', `${this.min}`);
if (this.max)
item.setAttribute('max', `${this.max}`);
if (this.step)
item.setAttribute('step', `${this.step}`);
if (this.disabled)
item.setAttribute('disabled', '');
if (index == 1)
item.setAttribute('aria-labelledby', `${this.fieldId}-label`);
if (this.variant == "range") {
if (document.querySelector(`${this.fieldId}-description`))
item.setAttribute('aria-describedby', `${this.fieldId}-description`);
else
item.setAttribute('aria-description', index == 0 ? 'Range start' : 'Range end');
}
if (this.value != undefined) {
this.setSliderBar();
}
item.addEventListener('click', () => item.focus());
item.addEventListener('input', (e) => this.handleChange(e, index));
});
}
componentDidRender() {
this.valueFields.forEach(item => {
item === null || item === void 0 ? void 0 : item.removeAttribute('aria-describedby');
});
}
render() {
var _a, _b;
return (index.h(index.Host, { key: '46b8036fab408e9fe04b22267051d317e2d26c44' }, !this.hideInput && this.variant == 'range' &&
index.h("input", { key: '0cd71fb085d417d64fae2515b4a397d9e88f09e4', type: "number", min: this.min, max: this.max, step: this.step, value: this.variant == 'range' ? ((_a = this.value) === null || _a === void 0 ? void 0 : _a[0]) || undefined : `${this.value}`, disabled: this.disabled, "aria-labelledby": `${this.fieldId}-label`, "aria-description": "Slider 1 value", "aria-invalid": this.error, ref: (el) => this.valueField1 = el, onChange: (e) => this.handleChange(e, 0) }), (!this.hideMinmax || this.host.querySelector('[slot="cpb-slider-before"]')) &&
index.h("span", { key: '8af23aaa497932c27e9b9d189d700af0218cdc65' }, !this.hideMinmax && this.min, index.h("slot", { key: '9760c5d838c5f9e5e6f5ca8b692dcc2cfb8fc2ee', name: "cpb-slider-before" })), index.h("div", { key: '957846b676686cbf0287c249e46dd71acd5024e5', class: "cbp-slider-wrapper" }, index.h("span", { key: 'ef0a1b974f6c741ff06f020967da3a752b7f1dd3', class: "cbp-slider-selection" }), index.h("slot", { key: 'd391f7f3218f15de31e916a449bf76fe984683e1' })), (!this.hideMinmax || this.host.querySelector('[slot="cpb-slider-after"]')) &&
index.h("span", { key: '61827dc879971640b857cb2d7fd556d95856190b' }, index.h("slot", { key: 'b0458c8442740652c1b1f32fbd1f3d2f7d36456e', name: "cpb-slider-after" }), !this.hideMinmax && this.max), !this.hideInput &&
index.h("input", { key: '5978cf26359a95e58a84eee278af9cfa692641a8', type: "number", min: this.min, max: this.max, step: this.step, value: this.variant == 'range' ? ((_b = this.value) === null || _b === void 0 ? void 0 : _b[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: (el) => this.variant == 'range' ? this.valueField2 = el : this.valueField1 = el, onChange: (e) => this.handleChange(e, this.variant == 'range' ? 1 : 0) })));
}
get host() { return index.getElement(this); }
static get watchers() { return {
"disabled": ["watchDisabledHandler"]
}; }
};
CbpSlider.style = CbpSliderStyle0;
exports.cbp_slider = CbpSlider;
//# sourceMappingURL=cbp-slider.cjs.entry.js.map