carbon-custom-elements
Version:
A Carbon Design System variant that's as easy to use as native HTML elements, with no framework tax, no framework silo.
815 lines (713 loc) • 31.9 kB
JavaScript
let _ = t => t,
_t;
function _decorate(decorators, factory, superClass, mixins) { var api = _getDecoratorsApi(); if (mixins) { for (var i = 0; i < mixins.length; i++) { api = mixins[i](api); } } var r = factory(function initialize(O) { api.initializeInstanceElements(O, decorated.elements); }, superClass); var decorated = api.decorateClass(_coalesceClassElements(r.d.map(_createElementDescriptor)), decorators); api.initializeClassElements(r.F, decorated.elements); return api.runClassFinishers(r.F, decorated.finishers); }
function _getDecoratorsApi() { _getDecoratorsApi = function () { return api; }; var api = { elementsDefinitionOrder: [["method"], ["field"]], initializeInstanceElements: function (O, elements) { ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { if (element.kind === kind && element.placement === "own") { this.defineClassElement(O, element); } }, this); }, this); }, initializeClassElements: function (F, elements) { var proto = F.prototype; ["method", "field"].forEach(function (kind) { elements.forEach(function (element) { var placement = element.placement; if (element.kind === kind && (placement === "static" || placement === "prototype")) { var receiver = placement === "static" ? F : proto; this.defineClassElement(receiver, element); } }, this); }, this); }, defineClassElement: function (receiver, element) { var descriptor = element.descriptor; if (element.kind === "field") { var initializer = element.initializer; descriptor = { enumerable: descriptor.enumerable, writable: descriptor.writable, configurable: descriptor.configurable, value: initializer === void 0 ? void 0 : initializer.call(receiver) }; } Object.defineProperty(receiver, element.key, descriptor); }, decorateClass: function (elements, decorators) { var newElements = []; var finishers = []; var placements = { static: [], prototype: [], own: [] }; elements.forEach(function (element) { this.addElementPlacement(element, placements); }, this); elements.forEach(function (element) { if (!_hasDecorators(element)) return newElements.push(element); var elementFinishersExtras = this.decorateElement(element, placements); newElements.push(elementFinishersExtras.element); newElements.push.apply(newElements, elementFinishersExtras.extras); finishers.push.apply(finishers, elementFinishersExtras.finishers); }, this); if (!decorators) { return { elements: newElements, finishers: finishers }; } var result = this.decorateConstructor(newElements, decorators); finishers.push.apply(finishers, result.finishers); result.finishers = finishers; return result; }, addElementPlacement: function (element, placements, silent) { var keys = placements[element.placement]; if (!silent && keys.indexOf(element.key) !== -1) { throw new TypeError("Duplicated element (" + element.key + ")"); } keys.push(element.key); }, decorateElement: function (element, placements) { var extras = []; var finishers = []; for (var decorators = element.decorators, i = decorators.length - 1; i >= 0; i--) { var keys = placements[element.placement]; keys.splice(keys.indexOf(element.key), 1); var elementObject = this.fromElementDescriptor(element); var elementFinisherExtras = this.toElementFinisherExtras((0, decorators[i])(elementObject) || elementObject); element = elementFinisherExtras.element; this.addElementPlacement(element, placements); if (elementFinisherExtras.finisher) { finishers.push(elementFinisherExtras.finisher); } var newExtras = elementFinisherExtras.extras; if (newExtras) { for (var j = 0; j < newExtras.length; j++) { this.addElementPlacement(newExtras[j], placements); } extras.push.apply(extras, newExtras); } } return { element: element, finishers: finishers, extras: extras }; }, decorateConstructor: function (elements, decorators) { var finishers = []; for (var i = decorators.length - 1; i >= 0; i--) { var obj = this.fromClassDescriptor(elements); var elementsAndFinisher = this.toClassDescriptor((0, decorators[i])(obj) || obj); if (elementsAndFinisher.finisher !== undefined) { finishers.push(elementsAndFinisher.finisher); } if (elementsAndFinisher.elements !== undefined) { elements = elementsAndFinisher.elements; for (var j = 0; j < elements.length - 1; j++) { for (var k = j + 1; k < elements.length; k++) { if (elements[j].key === elements[k].key && elements[j].placement === elements[k].placement) { throw new TypeError("Duplicated element (" + elements[j].key + ")"); } } } } } return { elements: elements, finishers: finishers }; }, fromElementDescriptor: function (element) { var obj = { kind: element.kind, key: element.key, placement: element.placement, descriptor: element.descriptor }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); if (element.kind === "field") obj.initializer = element.initializer; return obj; }, toElementDescriptors: function (elementObjects) { if (elementObjects === undefined) return; return _toArray(elementObjects).map(function (elementObject) { var element = this.toElementDescriptor(elementObject); this.disallowProperty(elementObject, "finisher", "An element descriptor"); this.disallowProperty(elementObject, "extras", "An element descriptor"); return element; }, this); }, toElementDescriptor: function (elementObject) { var kind = String(elementObject.kind); if (kind !== "method" && kind !== "field") { throw new TypeError('An element descriptor\'s .kind property must be either "method" or' + ' "field", but a decorator created an element descriptor with' + ' .kind "' + kind + '"'); } var key = _toPropertyKey(elementObject.key); var placement = String(elementObject.placement); if (placement !== "static" && placement !== "prototype" && placement !== "own") { throw new TypeError('An element descriptor\'s .placement property must be one of "static",' + ' "prototype" or "own", but a decorator created an element descriptor' + ' with .placement "' + placement + '"'); } var descriptor = elementObject.descriptor; this.disallowProperty(elementObject, "elements", "An element descriptor"); var element = { kind: kind, key: key, placement: placement, descriptor: Object.assign({}, descriptor) }; if (kind !== "field") { this.disallowProperty(elementObject, "initializer", "A method descriptor"); } else { this.disallowProperty(descriptor, "get", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "set", "The property descriptor of a field descriptor"); this.disallowProperty(descriptor, "value", "The property descriptor of a field descriptor"); element.initializer = elementObject.initializer; } return element; }, toElementFinisherExtras: function (elementObject) { var element = this.toElementDescriptor(elementObject); var finisher = _optionalCallableProperty(elementObject, "finisher"); var extras = this.toElementDescriptors(elementObject.extras); return { element: element, finisher: finisher, extras: extras }; }, fromClassDescriptor: function (elements) { var obj = { kind: "class", elements: elements.map(this.fromElementDescriptor, this) }; var desc = { value: "Descriptor", configurable: true }; Object.defineProperty(obj, Symbol.toStringTag, desc); return obj; }, toClassDescriptor: function (obj) { var kind = String(obj.kind); if (kind !== "class") { throw new TypeError('A class descriptor\'s .kind property must be "class", but a decorator' + ' created a class descriptor with .kind "' + kind + '"'); } this.disallowProperty(obj, "key", "A class descriptor"); this.disallowProperty(obj, "placement", "A class descriptor"); this.disallowProperty(obj, "descriptor", "A class descriptor"); this.disallowProperty(obj, "initializer", "A class descriptor"); this.disallowProperty(obj, "extras", "A class descriptor"); var finisher = _optionalCallableProperty(obj, "finisher"); var elements = this.toElementDescriptors(obj.elements); return { elements: elements, finisher: finisher }; }, runClassFinishers: function (constructor, finishers) { for (var i = 0; i < finishers.length; i++) { var newConstructor = (0, finishers[i])(constructor); if (newConstructor !== undefined) { if (typeof newConstructor !== "function") { throw new TypeError("Finishers must return a constructor."); } constructor = newConstructor; } } return constructor; }, disallowProperty: function (obj, name, objectType) { if (obj[name] !== undefined) { throw new TypeError(objectType + " can't have a ." + name + " property."); } } }; return api; }
function _createElementDescriptor(def) { var key = _toPropertyKey(def.key); var descriptor; if (def.kind === "method") { descriptor = { value: def.value, writable: true, configurable: true, enumerable: false }; } else if (def.kind === "get") { descriptor = { get: def.value, configurable: true, enumerable: false }; } else if (def.kind === "set") { descriptor = { set: def.value, configurable: true, enumerable: false }; } else if (def.kind === "field") { descriptor = { configurable: true, writable: true, enumerable: true }; } var element = { kind: def.kind === "field" ? "field" : "method", key: key, placement: def.static ? "static" : def.kind === "field" ? "own" : "prototype", descriptor: descriptor }; if (def.decorators) element.decorators = def.decorators; if (def.kind === "field") element.initializer = def.value; return element; }
function _coalesceGetterSetter(element, other) { if (element.descriptor.get !== undefined) { other.descriptor.get = element.descriptor.get; } else { other.descriptor.set = element.descriptor.set; } }
function _coalesceClassElements(elements) { var newElements = []; var isSameElement = function isSameElement(other) { return other.kind === "method" && other.key === element.key && other.placement === element.placement; }; for (var i = 0; i < elements.length; i++) { var element = elements[i]; var other; if (element.kind === "method" && (other = newElements.find(isSameElement))) { if (_isDataDescriptor(element.descriptor) || _isDataDescriptor(other.descriptor)) { if (_hasDecorators(element) || _hasDecorators(other)) { throw new ReferenceError("Duplicated methods (" + element.key + ") can't be decorated."); } other.descriptor = element.descriptor; } else { if (_hasDecorators(element)) { if (_hasDecorators(other)) { throw new ReferenceError("Decorators can't be placed on different accessors with for " + "the same property (" + element.key + ")."); } other.decorators = element.decorators; } _coalesceGetterSetter(element, other); } } else { newElements.push(element); } } return newElements; }
function _hasDecorators(element) { return element.decorators && element.decorators.length; }
function _isDataDescriptor(desc) { return desc !== undefined && !(desc.value === undefined && desc.writable === undefined); }
function _optionalCallableProperty(obj, name) { var value = obj[name]; if (value !== undefined && typeof value !== "function") { throw new TypeError("Expected '" + name + "' to be a function"); } return value; }
function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
function _toArray(arr) { return _arrayWithHoles(arr) || _iterableToArray(arr) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
function _iterableToArray(iter) { if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter); }
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
function _get(target, property, receiver) { if (typeof Reflect !== "undefined" && Reflect.get) { _get = Reflect.get; } else { _get = function _get(target, property, receiver) { var base = _superPropBase(target, property); if (!base) return; var desc = Object.getOwnPropertyDescriptor(base, property); if (desc.get) { return desc.get.call(receiver); } return desc.value; }; } return _get(target, property, receiver || target); }
function _superPropBase(object, property) { while (!Object.prototype.hasOwnProperty.call(object, property)) { object = _getPrototypeOf(object); if (object === null) break; } return object; }
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
/**
* @license
*
* Copyright IBM Corp. 2019, 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import { classMap } from 'lit-html/directives/class-map';
import throttle from 'lodash-es/throttle';
import { html, property, query, customElement, LitElement } from 'lit-element';
import settings from 'carbon-components/es/globals/js/settings';
import on from 'carbon-components/es/globals/js/misc/on';
import FocusMixin from '../../globals/mixins/focus';
import FormMixin from '../../globals/mixins/form';
import HostListenerMixin from '../../globals/mixins/host-listener';
import HostListener from '../../globals/decorators/host-listener';
import ifNonEmpty from '../../globals/directives/if-non-empty';
import styles from "./slider.css.js";
const {
prefix
} = settings;
/**
* The direction to move the thumb, associated with key symbols.
*/
const THUMB_DIRECTION = {
Left: -1,
ArrowLeft: -1,
Up: -1,
ArrowUp: -1,
Right: 1,
ArrowRight: 1,
Down: 1,
ArrowDown: 1
};
/**
* Slider.
* @element bx-slider
* @slot label-text - The label text.
* @slot max-text - The text for maximum value.
* @slot min-text - The text for minimum value.
* @fires bx-slider-changed - The custom event fired after the value is changed by user gesture.
*/
let BXSlider = _decorate([customElement(`${prefix}-slider`)], function (_initialize, _HostListenerMixin) {
class BXSlider extends _HostListenerMixin {
constructor(...args) {
super(...args);
_initialize(this);
}
}
return {
F: BXSlider,
d: [{
kind: "field",
key: "_max",
value() {
return '100';
}
}, {
kind: "field",
key: "_min",
value() {
return '0';
}
}, {
kind: "field",
key: "_step",
value() {
return '1';
}
}, {
kind: "field",
key: "_stepRatio",
value() {
return '4';
}
}, {
kind: "field",
key: "_hChangeInput",
value() {
return null;
}
}, {
kind: "field",
key: "_throttledHandleMousemoveImpl",
value() {
return null;
}
}, {
kind: "field",
key: "_dragging",
value() {
return false;
}
}, {
kind: "get",
key: "_rate",
value:
/**
* The internal value of `max` property.
*/
/**
* The internal value of `min` property.
*/
/**
* The internal value of `step` property.
*/
/**
* The internal value of `stepRatio` property.
*/
/**
* The handle for the listener of `${prefix}-slider-input` event.
*/
/**
* The handle for the throttled listener of `mousemove` event.
*/
/**
* `true` if dragging of thumb is in progress.
*/
/**
* The rate of the thumb position in the track.
* When we try to set a new value, we adjust the value considering `step` property.
*/
function _rate() {
const {
max,
min,
value
} = this; // Copes with out-of-range value coming programmatically or from `<bx-slider-input>`
return Math.min(Number(max), Math.max(Number(min), value)) / (Number(max) - Number(min));
}
}, {
kind: "set",
key: "_rate",
value: function _rate(rate) {
const {
max,
min,
step
} = this;
this.value = Number(min) + Math.round((Number(max) - Number(min)) * Math.min(1, Math.max(0, rate)) / Number(step)) * Number(step);
}
/**
* The DOM element of the thumb.
*/
}, {
kind: "field",
decorators: [query('#thumb')],
key: "_thumbNode",
value: void 0
}, {
kind: "field",
decorators: [query('#track')],
key: "_trackNode",
value: void 0
}, {
kind: "method",
key: "_handleClickLabel",
value:
/**
* The DOM element of the track.
*/
/**
* Handles `click` event on the `<label>` to focus on the thumb.
*/
function _handleClickLabel() {
var _this$_thumbNode;
(_this$_thumbNode = this._thumbNode) === null || _this$_thumbNode === void 0 ? void 0 : _this$_thumbNode.focus();
}
}, {
kind: "method",
key: "_handleFormdata",
value: function _handleFormdata(event) {
const {
formData
} = event; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
const {
disabled,
name,
value
} = this;
if (!disabled) {
formData.append(name, String(value));
}
}
/**
* Handles `keydown` event on the thumb to increase/decrease the value.
*/
}, {
kind: "method",
key: "_handleKeydownThumb",
value: function _handleKeydownThumb({
key,
shiftKey
}) {
if (!this.disabled) {
if (key in THUMB_DIRECTION) {
const {
max: rawMax,
min: rawMin,
step: rawStep,
stepRatio: rawStepRatio,
value
} = this;
const max = Number(rawMax);
const min = Number(rawMin);
const step = Number(rawStep);
const stepRatio = Number(rawStepRatio);
const diff = (!shiftKey ? step : (max - min) / stepRatio) * THUMB_DIRECTION[key];
const stepCount = (value + diff) / step; // Snaps to next
this.value = Math.min(max, Math.max(min, (diff >= 0 ? Math.floor(stepCount) : Math.ceil(stepCount)) * step));
this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
bubbles: true,
composed: true,
detail: {
value: this.value,
intermediate: false
}
}));
}
}
}
/**
* Handles `mousedown` event on the thumb to start dragging.
*/
}, {
kind: "method",
key: "_handleMousedownThumb",
value: function _handleMousedownThumb() {
this._dragging = true;
}
/**
* Handles `mousedown` event on the track to update the thumb position and the value as necessary.
*/
}, {
kind: "method",
key: "_handleMousedownTrack",
value: function _handleMousedownTrack(event) {
if (!this.disabled) {
const {
_trackNode: trackNode
} = this;
const isRtl = trackNode.ownerDocument.defaultView.getComputedStyle(trackNode).getPropertyValue('direction') === 'rtl';
const thumbPosition = event.clientX;
const {
left: trackLeft,
width: trackWidth
} = trackNode.getBoundingClientRect();
this._rate = (isRtl ? trackLeft + trackWidth - thumbPosition : thumbPosition - trackLeft) / trackWidth;
this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
bubbles: true,
composed: true,
detail: {
value: this.value
}
}));
}
}
/**
* Handles `mousemove` event on the `document` to update the thumb position and the value as necessary.
* @param event The event.
*/
}, {
kind: "field",
decorators: [HostListener('document:mousemove')],
key: "_handleMousemove",
value() {
return event => {
const {
disabled,
_dragging: dragging
} = this;
if (!disabled && dragging) {
this._throttledHandleMousemoveImpl(event);
}
};
}
}, {
kind: "method",
key: "_handleMousemoveImpl",
value:
/**
* Updates thumb position and value upon user's `mousemove` gesture.
* @param event The event.
*/
function _handleMousemoveImpl(event) {
const {
disabled,
_dragging: dragging,
_trackNode: trackNode
} = this;
if (!disabled && dragging) {
const isRtl = trackNode.ownerDocument.defaultView.getComputedStyle(trackNode).getPropertyValue('direction') === 'rtl';
const thumbPosition = event.clientX;
const {
left: trackLeft,
width: trackWidth
} = this._trackNode.getBoundingClientRect();
this._rate = (isRtl ? trackLeft + trackWidth - thumbPosition : thumbPosition - trackLeft) / trackWidth;
this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
bubbles: true,
composed: true,
detail: {
value: this.value,
intermediate: true
}
}));
}
}
/**
* Handles `mouseup` event on the `document` to finishing dragging.
*/
}, {
kind: "field",
decorators: [HostListener('document:mouseup')],
key: "_handleMouseup",
value() {
return () => {
if (this._dragging) {
this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
bubbles: true,
composed: true,
detail: {
value: this.value
}
}));
this._dragging = false;
}
};
}
}, {
kind: "field",
key: "_handleChangeInput",
value() {
return ({
detail
}) => {
const {
intermediate,
value
} = detail;
this.value = value;
this.dispatchEvent(new CustomEvent(this.constructor.eventChange, {
bubbles: true,
composed: true,
detail: {
value,
intermediate
}
}));
};
}
}, {
kind: "field",
decorators: [property({
type: Boolean,
reflect: true
})],
key: "disabled",
value() {
return false;
}
}, {
kind: "field",
decorators: [property({
attribute: false
})],
key: "formatMaxText",
value() {
return ({
max
}) => max;
}
}, {
kind: "field",
decorators: [property({
attribute: false
})],
key: "formatMinText",
value() {
return ({
min
}) => min;
}
}, {
kind: "field",
decorators: [property({
attribute: 'label-text'
})],
key: "labelText",
value() {
return '';
}
}, {
kind: "get",
decorators: [property({
type: Number,
reflect: true
})],
key: "max",
value:
/**
* Handles `${prefix}-slider-input-changed` event to update the value.
*/
/**
* `true` if the check box should be disabled.
*/
/**
* The formatter for the text for maximum value.
* Should be changed upon the locale the UI is rendered with.
*/
/**
* The formatter for the text for minimum value.
* Should be changed upon the locale the UI is rendered with.
*/
/**
* The label text.
*/
/**
* The maximum value.
*/
function max() {
return this._max.toString();
}
}, {
kind: "set",
key: "max",
value: function max(value) {
const {
max: oldMax
} = this;
this._max = value;
this.requestUpdate('max', oldMax);
}
/**
* The minimum value.
*/
}, {
kind: "get",
decorators: [property({
type: Number,
reflect: true
})],
key: "min",
value: function min() {
return this._min.toString();
}
}, {
kind: "set",
key: "min",
value: function min(value) {
const {
min: oldMin
} = this;
this._min = value;
this.requestUpdate('min', oldMin);
}
/**
* The form name.
*/
}, {
kind: "field",
decorators: [property()],
key: "name",
value: void 0
}, {
kind: "get",
decorators: [property({
type: Number,
reflect: true
})],
key: "step",
value:
/**
* The snapping step of the value.
*/
function step() {
return this._step.toString();
}
}, {
kind: "set",
key: "step",
value: function step(value) {
const {
step: oldStep
} = this;
this._step = value;
this.requestUpdate('step', oldStep);
}
/**
* A value determining how much the value should increase/decrease by Shift+arrow keys,
* which will be `(max - min) / stepRatio`.
*/
}, {
kind: "get",
decorators: [property({
type: Number,
reflect: true,
attribute: 'step-ratio'
})],
key: "stepRatio",
value: function stepRatio() {
return this._stepRatio.toString();
}
}, {
kind: "set",
key: "stepRatio",
value: function stepRatio(value) {
const {
stepRatio: oldStepRatio
} = this;
this._stepRatio = value;
this.requestUpdate('stepRatio', oldStepRatio);
}
/**
* The value.
*/
}, {
kind: "field",
decorators: [property({
type: Number
})],
key: "value",
value() {
return 50;
}
}, {
kind: "method",
key: "createRenderRoot",
value: function createRenderRoot() {
return this.attachShadow({
mode: 'open',
delegatesFocus: true
});
}
}, {
kind: "method",
key: "connectedCallback",
value: function connectedCallback() {
_get(_getPrototypeOf(BXSlider.prototype), "connectedCallback", this).call(this);
if (!this._throttledHandleMousemoveImpl) {
this._throttledHandleMousemoveImpl = throttle(this._handleMousemoveImpl, 10);
} // Manually hooks the event listeners on the host element to make the event names configurable
this._hChangeInput = on(this, this.constructor.eventChangeInput, this._handleChangeInput);
}
}, {
kind: "method",
key: "disconnectedCallback",
value: function disconnectedCallback() {
if (this._hChangeInput) {
this._hChangeInput = this._hChangeInput.release();
}
if (this._throttledHandleMousemoveImpl) {
this._throttledHandleMousemoveImpl.cancel();
this._throttledHandleMousemoveImpl = null;
}
_get(_getPrototypeOf(BXSlider.prototype), "disconnectedCallback", this).call(this);
}
}, {
kind: "method",
key: "shouldUpdate",
value: function shouldUpdate(changedProperties) {
const input = this.querySelector(this.constructor.selectorInput);
if (changedProperties.has('disabled')) {
if (input) {
input.disabled = this.disabled;
}
if (this.disabled) {
this._dragging = false;
}
}
if (input) {
['max', 'min', 'step', 'value'].forEach(name => {
if (changedProperties.has(name)) {
input[name] = this[name];
}
});
}
return true;
}
}, {
kind: "method",
key: "render",
value: function render() {
const {
disabled,
formatMaxText,
formatMinText,
labelText,
max,
min,
name,
value,
_rate: rate,
_handleClickLabel: handleClickLabel,
_handleKeydownThumb: handleKeydownThumb,
_handleMousedownTrack: handleMousedownTrack,
_handleMousedownThumb: handleMousedownThumb
} = this;
const labelClasses = classMap({
[`${prefix}--label`]: true,
[`${prefix}--label--disabled`]: disabled
});
const sliderClasses = classMap({
[`${prefix}--slider`]: true,
[`${prefix}--slider--disabled`]: disabled
});
return html(_t || (_t = _`
<label class="${0}" ="${0}">
<slot name="label-text">${0}</slot>
</label>
<div class="${0}--slider-container">
<span class="${0}--slider__range-label">
<slot name="min-text">${0}</slot>
</span>
<div class="${0}" role="presentation">
<div
id="thumb"
class="${0}--slider__thumb"
role="slider"
tabindex="0"
aria-valuemax="${0}"
aria-valuemin="${0}"
aria-valuenow="${0}"
style="left: ${0}%"
="${0}"
="${0}"
></div>
<div id="track" class="${0}--slider__track" ="${0}"></div>
<div class="${0}-ce--slider__filled-track-container">
<div class="${0}--slider__filled-track" style="transform: translate(0%, -50%) scaleX(${0})"></div>
</div>
<input
class="${0}--slider__input"
type="hidden"
name="${0}"
.value="${0}"
min="${0}"
max="${0}"
/>
</div>
<span class="${0}--slider__range-label">
<slot name="max-text">${0}</slot>
</span>
<slot></slot>
</div>
`), labelClasses, handleClickLabel, labelText, prefix, prefix, formatMinText({
min
}), sliderClasses, prefix, max, min, value, rate * 100, handleKeydownThumb, handleMousedownThumb, prefix, handleMousedownTrack, prefix, prefix, rate, prefix, ifNonEmpty(name), value, ifNonEmpty(min), ifNonEmpty(max), prefix, formatMaxText({
max
}));
}
/**
* A selector that will return the `<input>` box got entering the value directly.
*/
}, {
kind: "get",
static: true,
key: "selectorInput",
value: function selectorInput() {
return `${prefix}-slider-input`;
}
/**
* The name of the custom event fired after the value is changed by user gesture.
*/
}, {
kind: "get",
static: true,
key: "eventChange",
value: function eventChange() {
return `${prefix}-slider-changed`;
}
/**
* The name of the custom event fired after the value is changed in `<bx-slider-input>` by user gesture.
*/
}, {
kind: "get",
static: true,
key: "eventChangeInput",
value: function eventChangeInput() {
return `${prefix}-slider-input-changed`;
}
}, {
kind: "field",
static: true,
key: "styles",
value() {
return styles;
}
}]
};
}, HostListenerMixin(FormMixin(FocusMixin(LitElement))));
export default BXSlider;
//# sourceMappingURL=slider.js.map