@aurelia-ui-toolkits/headless 1.0.0

package/dist/slider/ui-slider.js

@@ -0,0 +1,362 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, CustomElement, customElement, INode, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-slider.html?raw';
+let nextSliderId = 0;
+let UiSlider = (() => {
+    let _classDecorators = [customElement({ name: 'ui-slider', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _endValue_decorators;
+    let _endValue_initializers = [];
+    let _endValue_extraInitializers = [];
+    let _min_decorators;
+    let _min_initializers = [];
+    let _min_extraInitializers = [];
+    let _max_decorators;
+    let _max_initializers = [];
+    let _max_extraInitializers = [];
+    let _step_decorators;
+    let _step_initializers = [];
+    let _step_extraInitializers = [];
+    let _range_decorators;
+    let _range_initializers = [];
+    let _range_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _helperText_decorators;
+    let _helperText_initializers = [];
+    let _helperText_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _required_decorators;
+    let _required_initializers = [];
+    let _required_extraInitializers = [];
+    let _invalid_decorators;
+    let _invalid_initializers = [];
+    let _invalid_extraInitializers = [];
+    let _helperNodes_decorators;
+    let _helperNodes_initializers = [];
+    let _helperNodes_extraInitializers = [];
+    var UiSlider = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _endValue_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _min_decorators = [bindable];
+            _max_decorators = [bindable];
+            _step_decorators = [bindable];
+            _range_decorators = [bindable({ set: booleanAttr })];
+            _label_decorators = [bindable];
+            _helperText_decorators = [bindable];
+            _id_decorators = [bindable];
+            _name_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _readonly_decorators = [bindable({ set: booleanAttr })];
+            _required_decorators = [bindable({ set: booleanAttr })];
+            _invalid_decorators = [bindable({ set: booleanAttr })];
+            _helperNodes_decorators = [slotted({ slotName: 'helper' })];
+            __esDecorate(null, null, _value_decorators, { kind: "field", name: "value", static: false, private: false, access: { has: obj => "value" in obj, get: obj => obj.value, set: (obj, value) => { obj.value = value; } }, metadata: _metadata }, _value_initializers, _value_extraInitializers);
+            __esDecorate(null, null, _endValue_decorators, { kind: "field", name: "endValue", static: false, private: false, access: { has: obj => "endValue" in obj, get: obj => obj.endValue, set: (obj, value) => { obj.endValue = value; } }, metadata: _metadata }, _endValue_initializers, _endValue_extraInitializers);
+            __esDecorate(null, null, _min_decorators, { kind: "field", name: "min", static: false, private: false, access: { has: obj => "min" in obj, get: obj => obj.min, set: (obj, value) => { obj.min = value; } }, metadata: _metadata }, _min_initializers, _min_extraInitializers);
+            __esDecorate(null, null, _max_decorators, { kind: "field", name: "max", static: false, private: false, access: { has: obj => "max" in obj, get: obj => obj.max, set: (obj, value) => { obj.max = value; } }, metadata: _metadata }, _max_initializers, _max_extraInitializers);
+            __esDecorate(null, null, _step_decorators, { kind: "field", name: "step", static: false, private: false, access: { has: obj => "step" in obj, get: obj => obj.step, set: (obj, value) => { obj.step = value; } }, metadata: _metadata }, _step_initializers, _step_extraInitializers);
+            __esDecorate(null, null, _range_decorators, { kind: "field", name: "range", static: false, private: false, access: { has: obj => "range" in obj, get: obj => obj.range, set: (obj, value) => { obj.range = value; } }, metadata: _metadata }, _range_initializers, _range_extraInitializers);
+            __esDecorate(null, null, _label_decorators, { kind: "field", name: "label", static: false, private: false, access: { has: obj => "label" in obj, get: obj => obj.label, set: (obj, value) => { obj.label = value; } }, metadata: _metadata }, _label_initializers, _label_extraInitializers);
+            __esDecorate(null, null, _helperText_decorators, { kind: "field", name: "helperText", static: false, private: false, access: { has: obj => "helperText" in obj, get: obj => obj.helperText, set: (obj, value) => { obj.helperText = value; } }, metadata: _metadata }, _helperText_initializers, _helperText_extraInitializers);
+            __esDecorate(null, null, _id_decorators, { kind: "field", name: "id", static: false, private: false, access: { has: obj => "id" in obj, get: obj => obj.id, set: (obj, value) => { obj.id = value; } }, metadata: _metadata }, _id_initializers, _id_extraInitializers);
+            __esDecorate(null, null, _name_decorators, { kind: "field", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
+            __esDecorate(null, null, _disabled_decorators, { kind: "field", name: "disabled", static: false, private: false, access: { has: obj => "disabled" in obj, get: obj => obj.disabled, set: (obj, value) => { obj.disabled = value; } }, metadata: _metadata }, _disabled_initializers, _disabled_extraInitializers);
+            __esDecorate(null, null, _readonly_decorators, { kind: "field", name: "readonly", static: false, private: false, access: { has: obj => "readonly" in obj, get: obj => obj.readonly, set: (obj, value) => { obj.readonly = value; } }, metadata: _metadata }, _readonly_initializers, _readonly_extraInitializers);
+            __esDecorate(null, null, _required_decorators, { kind: "field", name: "required", static: false, private: false, access: { has: obj => "required" in obj, get: obj => obj.required, set: (obj, value) => { obj.required = value; } }, metadata: _metadata }, _required_initializers, _required_extraInitializers);
+            __esDecorate(null, null, _invalid_decorators, { kind: "field", name: "invalid", static: false, private: false, access: { has: obj => "invalid" in obj, get: obj => obj.invalid, set: (obj, value) => { obj.invalid = value; } }, metadata: _metadata }, _invalid_initializers, _invalid_extraInitializers);
+            __esDecorate(null, null, _helperNodes_decorators, { kind: "field", name: "helperNodes", static: false, private: false, access: { has: obj => "helperNodes" in obj, get: obj => obj.helperNodes, set: (obj, value) => { obj.helperNodes = value; } }, metadata: _metadata }, _helperNodes_initializers, _helperNodes_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiSlider = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor() {
+            __runInitializers(this, _helperNodes_extraInitializers);
+            defineUiSliderElementApis(this.element);
+        }
+        element = resolve(INode);
+        errors = new Map();
+        focus = false;
+        active = false;
+        inputEl;
+        endInputEl;
+        fillStyle = 'width: 0%';
+        normalizedValue = 0;
+        normalizedEndValue = 0;
+        labelId = '';
+        helperId = '';
+        errorsId = '';
+        endId = '';
+        value = __runInitializers(this, _value_initializers, 0);
+        valueChanged() {
+            this.normalizeValues('start');
+            this.updateFillStyle();
+        }
+        endValue = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _endValue_initializers, 100));
+        endValueChanged() {
+            this.normalizeValues('end');
+            this.updateFillStyle();
+        }
+        min = (__runInitializers(this, _endValue_extraInitializers), __runInitializers(this, _min_initializers, 0));
+        minChanged() {
+            this.normalizeValues();
+            this.updateFillStyle();
+        }
+        max = (__runInitializers(this, _min_extraInitializers), __runInitializers(this, _max_initializers, 100));
+        maxChanged() {
+            this.normalizeValues();
+            this.updateFillStyle();
+        }
+        step = (__runInitializers(this, _max_extraInitializers), __runInitializers(this, _step_initializers, 1));
+        range = (__runInitializers(this, _step_extraInitializers), __runInitializers(this, _range_initializers, false));
+        rangeChanged() {
+            this.normalizeValues();
+            this.updateFillStyle();
+        }
+        label = (__runInitializers(this, _range_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+        helperText = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _helperText_initializers, void 0));
+        id = (__runInitializers(this, _helperText_extraInitializers), __runInitializers(this, _id_initializers, `ui-slider-${++nextSliderId}`));
+        idChanged() {
+            this.updateIds();
+        }
+        name = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _name_initializers, void 0));
+        disabled = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        readonly = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+        required = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _required_initializers, false));
+        invalid = (__runInitializers(this, _required_extraInitializers), __runInitializers(this, _invalid_initializers, false));
+        helperNodes = (__runInitializers(this, _invalid_extraInitializers), __runInitializers(this, _helperNodes_initializers, []));
+        binding() {
+            this.updateIds();
+            this.normalizeValues();
+            this.updateFillStyle();
+        }
+        addError(error) {
+            if (this.findError(error)) {
+                return;
+            }
+            this.errors.set(error, true);
+        }
+        removeError(error) {
+            const existing = this.findError(error);
+            if (existing) {
+                this.errors.delete(existing);
+                return;
+            }
+            this.errors.delete(error);
+        }
+        onInput(event) {
+            if (!(event.target instanceof HTMLInputElement) || this.disabled || this.readonly) {
+                return;
+            }
+            if (event.target === this.endInputEl) {
+                this.endValue = Number(event.target.value);
+                this.normalizeValues('end');
+            }
+            else {
+                this.value = Number(event.target.value);
+                this.normalizeValues('start');
+            }
+            this.updateFillStyle();
+            this.dispatchValueEvent('input');
+        }
+        onChange(event) {
+            if (!(event.target instanceof HTMLInputElement) || this.disabled || this.readonly) {
+                return;
+            }
+            if (event.target === this.endInputEl) {
+                this.endValue = Number(event.target.value);
+                this.normalizeValues('end');
+            }
+            else {
+                this.value = Number(event.target.value);
+                this.normalizeValues('start');
+            }
+            this.updateFillStyle();
+            this.dispatchValueEvent('change');
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        onPointerDown(event) {
+            if (this.readonly) {
+                event.preventDefault();
+                return;
+            }
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        onKeyDown(event) {
+            if (this.readonly) {
+                event.preventDefault();
+            }
+        }
+        normalizeValues(changed) {
+            const min = Number(this.min);
+            const max = Number(this.max);
+            const low = Number.isFinite(min) ? min : 0;
+            const high = Number.isFinite(max) && max > low ? max : low + 100;
+            const next = Number(this.value);
+            const nextEnd = Number(this.endValue);
+            this.normalizedValue = Math.max(low, Math.min(high, Number.isFinite(next) ? next : low));
+            this.normalizedEndValue = Math.max(low, Math.min(high, Number.isFinite(nextEnd) ? nextEnd : high));
+            if (this.range && this.normalizedValue > this.normalizedEndValue) {
+                if (changed === 'end') {
+                    this.normalizedEndValue = this.normalizedValue;
+                }
+                else {
+                    this.normalizedValue = this.normalizedEndValue;
+                }
+            }
+            if (!this.range) {
+                this.normalizedEndValue = high;
+            }
+            if (this.value !== this.normalizedValue) {
+                this.value = this.normalizedValue;
+            }
+            if (this.endValue !== this.normalizedEndValue) {
+                this.endValue = this.normalizedEndValue;
+            }
+        }
+        updateFillStyle() {
+            const min = Number(this.min) || 0;
+            const max = Number(this.max) || 100;
+            const range = Math.max(1, max - min);
+            const startPercent = Math.max(0, Math.min(100, (this.normalizedValue - min) / range * 100));
+            const endPercent = Math.max(0, Math.min(100, (this.normalizedEndValue - min) / range * 100));
+            if (this.range) {
+                this.fillStyle = `left: ${startPercent}%; width: ${Math.max(0, endPercent - startPercent)}%`;
+                return;
+            }
+            this.fillStyle = `left: 0%; width: ${startPercent}%`;
+        }
+        updateIds() {
+            this.labelId = `${this.id}-label`;
+            this.helperId = `${this.id}-helper`;
+            this.errorsId = `${this.id}-errors`;
+            this.endId = `${this.id}-end`;
+        }
+        dispatchValueEvent(type) {
+            this.element.dispatchEvent(new Event(type, { bubbles: true }));
+        }
+        findError(error) {
+            for (const existing of this.errors.keys()) {
+                if (existing === error || existing.message === error.message) {
+                    return existing;
+                }
+            }
+            return undefined;
+        }
+    };
+    return UiSlider = _classThis;
+})();
+export { UiSlider };
+function defineUiSliderElementApis(element) {
+    Object.defineProperties(element, {
+        tagName: {
+            get() {
+                return 'UI-SLIDER';
+            }
+        },
+        value: {
+            get() {
+                return CustomElement.for(this).viewModel.value;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.value = Number(value);
+            },
+            configurable: true
+        },
+        disabled: {
+            get() {
+                return CustomElement.for(this).viewModel.disabled;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.disabled = value;
+            },
+            configurable: true
+        },
+        endValue: {
+            get() {
+                return CustomElement.for(this).viewModel.endValue;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.endValue = Number(value);
+            },
+            configurable: true
+        },
+        readOnly: {
+            get() {
+                return CustomElement.for(this).viewModel.readonly;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.readonly = value;
+            },
+            configurable: true
+        },
+        addError: {
+            value(error) {
+                CustomElement.for(this).viewModel.addError(error);
+            },
+            configurable: true
+        },
+        removeError: {
+            value(error) {
+                CustomElement.for(this).viewModel.removeError(error);
+            },
+            configurable: true
+        },
+        focus: {
+            value() {
+                CustomElement.for(this).viewModel.inputEl.focus();
+            },
+            configurable: true
+        },
+        blur: {
+            value() {
+                CustomElement.for(this).viewModel.inputEl.blur();
+            },
+            configurable: true
+        },
+        isFocused: {
+            get() {
+                return document.activeElement === CustomElement.for(this).viewModel.inputEl;
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=ui-slider.js.map

package/dist/slider/ui-slider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-slider.js","sourceRoot":"","sources":["../../src/slider/ui-slider.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, CustomElement, customElement, INode, resolve, slotted } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { IError, IValidatedElement } from '../base/i-validated-element';\nimport template from './ui-slider.html?raw';\n\nlet nextSliderId = 0;\n\n@customElement({ name: 'ui-slider', template })\nexport class UiSlider {\n  constructor() {\n    defineUiSliderElementApis(this.element);\n  }\n\n  readonly element = resolve(INode) as HTMLElement;\n  errors = new Map<IError, boolean>();\n  focus = false;\n  active = false;\n  inputEl!: HTMLInputElement;\n  endInputEl!: HTMLInputElement;\n  fillStyle = 'width: 0%';\n  normalizedValue = 0;\n  normalizedEndValue = 0;\n  labelId = '';\n  helperId = '';\n  errorsId = '';\n  endId = '';\n\n  @bindable({ mode: BindingMode.twoWay })\n  value: number = 0;\n  valueChanged(): void {\n    this.normalizeValues('start');\n    this.updateFillStyle();\n  }\n\n  @bindable({ mode: BindingMode.twoWay })\n  endValue: number = 100;\n  endValueChanged(): void {\n    this.normalizeValues('end');\n    this.updateFillStyle();\n  }\n\n  @bindable\n  min: number = 0;\n  minChanged(): void {\n    this.normalizeValues();\n    this.updateFillStyle();\n  }\n\n  @bindable\n  max: number = 100;\n  maxChanged(): void {\n    this.normalizeValues();\n    this.updateFillStyle();\n  }\n\n  @bindable\n  step: number = 1;\n\n  @bindable({ set: booleanAttr })\n  range = false;\n  rangeChanged(): void {\n    this.normalizeValues();\n    this.updateFillStyle();\n  }\n\n  @bindable\n  label: string | undefined;\n\n  @bindable\n  helperText: string | undefined;\n\n  @bindable\n  id: string = `ui-slider-${++nextSliderId}`;\n  idChanged(): void {\n    this.updateIds();\n  }\n\n  @bindable\n  name: string | undefined;\n\n  @bindable({ set: booleanAttr })\n  disabled = false;\n\n  @bindable({ set: booleanAttr })\n  readonly = false;\n\n  @bindable({ set: booleanAttr })\n  required = false;\n\n  @bindable({ set: booleanAttr })\n  invalid = false;\n\n  @slotted({ slotName: 'helper' })\n  helperNodes: readonly Node[] = [];\n\n  binding(): void {\n    this.updateIds();\n    this.normalizeValues();\n    this.updateFillStyle();\n  }\n\n  addError(error: IError): void {\n    if (this.findError(error)) {\n      return;\n    }\n\n    this.errors.set(error, true);\n  }\n\n  removeError(error: IError): void {\n    const existing = this.findError(error);\n    if (existing) {\n      this.errors.delete(existing);\n      return;\n    }\n\n    this.errors.delete(error);\n  }\n\n  onInput(event: Event): void {\n    if (!(event.target instanceof HTMLInputElement) || this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.target === this.endInputEl) {\n      this.endValue = Number(event.target.value);\n      this.normalizeValues('end');\n    } else {\n      this.value = Number(event.target.value);\n      this.normalizeValues('start');\n    }\n    this.updateFillStyle();\n    this.dispatchValueEvent('input');\n  }\n\n  onChange(event: Event): void {\n    if (!(event.target instanceof HTMLInputElement) || this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.target === this.endInputEl) {\n      this.endValue = Number(event.target.value);\n      this.normalizeValues('end');\n    } else {\n      this.value = Number(event.target.value);\n      this.normalizeValues('start');\n    }\n    this.updateFillStyle();\n    this.dispatchValueEvent('change');\n  }\n\n  onFocusIn(): void {\n    if (!this.disabled) {\n      this.focus = true;\n    }\n  }\n\n  onFocusOut(): void {\n    this.focus = false;\n  }\n\n  onPointerDown(event: PointerEvent): void {\n    if (this.readonly) {\n      event.preventDefault();\n      return;\n    }\n\n    if (!this.disabled) {\n      this.active = true;\n    }\n  }\n\n  onPointerUp(): void {\n    this.active = false;\n  }\n\n  onPointerLeave(): void {\n    this.active = false;\n  }\n\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.readonly) {\n      event.preventDefault();\n    }\n  }\n\n  private normalizeValues(changed?: 'start' | 'end'): void {\n    const min = Number(this.min);\n    const max = Number(this.max);\n    const low = Number.isFinite(min) ? min : 0;\n    const high = Number.isFinite(max) && max > low ? max : low + 100;\n    const next = Number(this.value);\n    const nextEnd = Number(this.endValue);\n    this.normalizedValue = Math.max(low, Math.min(high, Number.isFinite(next) ? next : low));\n    this.normalizedEndValue = Math.max(low, Math.min(high, Number.isFinite(nextEnd) ? nextEnd : high));\n    if (this.range && this.normalizedValue > this.normalizedEndValue) {\n      if (changed === 'end') {\n        this.normalizedEndValue = this.normalizedValue;\n      } else {\n        this.normalizedValue = this.normalizedEndValue;\n      }\n    }\n    if (!this.range) {\n      this.normalizedEndValue = high;\n    }\n    if (this.value !== this.normalizedValue) {\n      this.value = this.normalizedValue;\n    }\n    if (this.endValue !== this.normalizedEndValue) {\n      this.endValue = this.normalizedEndValue;\n    }\n  }\n\n  private updateFillStyle(): void {\n    const min = Number(this.min) || 0;\n    const max = Number(this.max) || 100;\n    const range = Math.max(1, max - min);\n    const startPercent = Math.max(0, Math.min(100, (this.normalizedValue - min) / range * 100));\n    const endPercent = Math.max(0, Math.min(100, (this.normalizedEndValue - min) / range * 100));\n    if (this.range) {\n      this.fillStyle = `left: ${startPercent}%; width: ${Math.max(0, endPercent - startPercent)}%`;\n      return;\n    }\n\n    this.fillStyle = `left: 0%; width: ${startPercent}%`;\n  }\n\n  private updateIds(): void {\n    this.labelId = `${this.id}-label`;\n    this.helperId = `${this.id}-helper`;\n    this.errorsId = `${this.id}-errors`;\n    this.endId = `${this.id}-end`;\n  }\n\n  private dispatchValueEvent(type: 'input' | 'change'): void {\n    this.element.dispatchEvent(new Event(type, { bubbles: true }));\n  }\n\n  private findError(error: IError): IError | undefined {\n    for (const existing of this.errors.keys()) {\n      if (existing === error || existing.message === error.message) {\n        return existing;\n      }\n    }\n\n    return undefined;\n  }\n}\n\nexport interface IUiSliderElement extends IValidatedElement {\n  value: number;\n  endValue: number;\n}\n\nfunction defineUiSliderElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    tagName: {\n      get() {\n        return 'UI-SLIDER';\n      }\n    },\n    value: {\n      get(this: IUiSliderElement) {\n        return CustomElement.for<UiSlider>(this).viewModel.value;\n      },\n      set(this: IUiSliderElement, value: number) {\n        CustomElement.for<UiSlider>(this).viewModel.value = Number(value);\n      },\n      configurable: true\n    },\n    disabled: {\n      get(this: IUiSliderElement) {\n        return CustomElement.for<UiSlider>(this).viewModel.disabled;\n      },\n      set(this: IUiSliderElement, value: boolean) {\n        CustomElement.for<UiSlider>(this).viewModel.disabled = value;\n      },\n      configurable: true\n    },\n    endValue: {\n      get(this: IUiSliderElement) {\n        return CustomElement.for<UiSlider>(this).viewModel.endValue;\n      },\n      set(this: IUiSliderElement, value: number) {\n        CustomElement.for<UiSlider>(this).viewModel.endValue = Number(value);\n      },\n      configurable: true\n    },\n    readOnly: {\n      get(this: IUiSliderElement) {\n        return CustomElement.for<UiSlider>(this).viewModel.readonly;\n      },\n      set(this: IUiSliderElement, value: boolean) {\n        CustomElement.for<UiSlider>(this).viewModel.readonly = value;\n      },\n      configurable: true\n    },\n    addError: {\n      value(this: IUiSliderElement, error: IError) {\n        CustomElement.for<UiSlider>(this).viewModel.addError(error);\n      },\n      configurable: true\n    },\n    removeError: {\n      value(this: IUiSliderElement, error: IError) {\n        CustomElement.for<UiSlider>(this).viewModel.removeError(error);\n      },\n      configurable: true\n    },\n    focus: {\n      value(this: IUiSliderElement) {\n        CustomElement.for<UiSlider>(this).viewModel.inputEl.focus();\n      },\n      configurable: true\n    },\n    blur: {\n      value(this: IUiSliderElement) {\n        CustomElement.for<UiSlider>(this).viewModel.inputEl.blur();\n      },\n      configurable: true\n    },\n    isFocused: {\n      get(this: IUiSliderElement) {\n        return document.activeElement === CustomElement.for<UiSlider>(this).viewModel.inputEl;\n      },\n      configurable: true\n    }\n  });\n}\n"]}

package/dist/splitter/ui-splitter.html

@@ -0,0 +1,14 @@
+<template class="ui-splitter"
+  role="separator"
+  tabindex.bind="disabled ? -1 : 0"
+  aria-orientation.attr="direction"
+  aria-valuemin.attr="min"
+  aria-valuemax.attr="max"
+  aria-valuenow.attr="valueNow"
+  aria-disabled.attr="disabled ? 'true' : null"
+  data-direction.attr="direction"
+  data-disabled.attr="disabled ? '' : null"
+  pointerdown.trigger="onPointerDown($event)"
+  keydown.trigger="onKeyDown($event)">
+  <span class="ui-splitter__handle" aria-hidden="true"></span>
+</template>