@aurelia-ui-toolkits/headless 1.0.0

package/dist/select/ui-select.html

@@ -0,0 +1,70 @@
+<template class="ui-select"
+  data-disabled.attr="disabled ? '' : null"
+  data-invalid.attr="invalid || errors.size ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-open.attr="open ? '' : null"
+  data-inset.attr="inset ? '' : null"
+  data-has-value.attr="hasValue ? '' : null">
+  <label class="ui-select__label"
+    for.bind="id"
+    id.bind="!inset && label ? labelId : null"
+    show.bind="label && !inset">${label}</label>
+
+  <div class="ui-select__control"
+    ref="controlEl"
+    id.bind="id"
+    role="button"
+    tabindex.bind="disabled ? -1 : 0"
+    aria-haspopup="listbox"
+    aria-expanded.attr="open ? 'true' : 'false'"
+    aria-labelledby.bind="label ? labelId : null"
+    aria-invalid.bind="invalid || errors.size ? 'true' : 'false'"
+    aria-describedby.bind="errors.size ? errorsId : (helperNodes.length ? helperId : null)"
+    aria-disabled.attr="disabled ? '' : null"
+    aria-required.attr="required ? 'true' : null"
+    click.trigger="onClick()"
+    keydown.trigger="onKeyDown($event)"
+    focusin.trigger="onFocusIn()"
+    focusout.trigger="onFocusOut($event)"
+    pointerdown.trigger="onPointerDown()"
+    pointerup.trigger="onPointerUp()"
+    pointerleave.trigger="onPointerLeave()">
+    <span class="ui-select__leading" show.bind="leadingNodes.length">
+      <au-slot name="leading"></au-slot>
+    </span>
+
+    <span class="ui-select__inset-label"
+      id.bind="inset && label ? labelId : null"
+      show.bind="label && inset">${label}</span>
+
+    <span class="ui-select__value" data-placeholder.attr="displayText ? null : ''">
+      ${displayText || placeholderText}
+    </span>
+
+    <span class="ui-select__trailing">
+      <au-slot name="trailing">
+        <span class="ui-select__chevron" aria-hidden="true"></span>
+      </au-slot>
+    </span>
+  </div>
+
+  <ui-menu open.bind="open"
+    anchor.bind="controlEl"
+    tab-reference.bind="controlEl"
+    match-anchor-width
+    menu-tab-away.trigger="onMenuTabAway()"
+    menu-select.trigger="onMenuSelect($event)">
+    <au-slot></au-slot>
+  </ui-menu>
+
+  <div class="ui-select__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-select__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-select__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-select__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>

package/dist/select/ui-select.js

@@ -0,0 +1,323 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, computed, CustomElement, customElement, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-select.html?raw';
+let nextSelectId = 0;
+let UiSelect = (() => {
+    let _classDecorators = [customElement({ name: 'ui-select', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _instanceExtraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _selectedItem_decorators;
+    let _selectedItem_initializers = [];
+    let _selectedItem_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _inset_decorators;
+    let _inset_initializers = [];
+    let _inset_extraInitializers = [];
+    let _helperText_decorators;
+    let _helperText_initializers = [];
+    let _helperText_extraInitializers = [];
+    let _id_decorators;
+    let _id_initializers = [];
+    let _id_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _valueField_decorators;
+    let _valueField_initializers = [];
+    let _valueField_extraInitializers = [];
+    let _labelField_decorators;
+    let _labelField_initializers = [];
+    let _labelField_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 = [];
+    let _leadingNodes_decorators;
+    let _leadingNodes_initializers = [];
+    let _leadingNodes_extraInitializers = [];
+    let _trailingNodes_decorators;
+    let _trailingNodes_initializers = [];
+    let _trailingNodes_extraInitializers = [];
+    let _get_displayText_decorators;
+    let _get_placeholderText_decorators;
+    var UiSelect = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _selectedItem_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _label_decorators = [bindable];
+            _inset_decorators = [bindable({ set: booleanAttr })];
+            _helperText_decorators = [bindable];
+            _id_decorators = [bindable];
+            _placeholder_decorators = [bindable];
+            _valueField_decorators = [bindable];
+            _labelField_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' })];
+            _leadingNodes_decorators = [slotted({ slotName: 'leading' })];
+            _trailingNodes_decorators = [slotted({ slotName: 'trailing' })];
+            _get_displayText_decorators = [computed({ flush: 'async' })];
+            _get_placeholderText_decorators = [computed({ flush: 'async' })];
+            __esDecorate(this, null, _get_displayText_decorators, { kind: "getter", name: "displayText", static: false, private: false, access: { has: obj => "displayText" in obj, get: obj => obj.displayText }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _get_placeholderText_decorators, { kind: "getter", name: "placeholderText", static: false, private: false, access: { has: obj => "placeholderText" in obj, get: obj => obj.placeholderText }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __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, _selectedItem_decorators, { kind: "field", name: "selectedItem", static: false, private: false, access: { has: obj => "selectedItem" in obj, get: obj => obj.selectedItem, set: (obj, value) => { obj.selectedItem = value; } }, metadata: _metadata }, _selectedItem_initializers, _selectedItem_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, _inset_decorators, { kind: "field", name: "inset", static: false, private: false, access: { has: obj => "inset" in obj, get: obj => obj.inset, set: (obj, value) => { obj.inset = value; } }, metadata: _metadata }, _inset_initializers, _inset_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, _placeholder_decorators, { kind: "field", name: "placeholder", static: false, private: false, access: { has: obj => "placeholder" in obj, get: obj => obj.placeholder, set: (obj, value) => { obj.placeholder = value; } }, metadata: _metadata }, _placeholder_initializers, _placeholder_extraInitializers);
+            __esDecorate(null, null, _valueField_decorators, { kind: "field", name: "valueField", static: false, private: false, access: { has: obj => "valueField" in obj, get: obj => obj.valueField, set: (obj, value) => { obj.valueField = value; } }, metadata: _metadata }, _valueField_initializers, _valueField_extraInitializers);
+            __esDecorate(null, null, _labelField_decorators, { kind: "field", name: "labelField", static: false, private: false, access: { has: obj => "labelField" in obj, get: obj => obj.labelField, set: (obj, value) => { obj.labelField = value; } }, metadata: _metadata }, _labelField_initializers, _labelField_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, null, _leadingNodes_decorators, { kind: "field", name: "leadingNodes", static: false, private: false, access: { has: obj => "leadingNodes" in obj, get: obj => obj.leadingNodes, set: (obj, value) => { obj.leadingNodes = value; } }, metadata: _metadata }, _leadingNodes_initializers, _leadingNodes_extraInitializers);
+            __esDecorate(null, null, _trailingNodes_decorators, { kind: "field", name: "trailingNodes", static: false, private: false, access: { has: obj => "trailingNodes" in obj, get: obj => obj.trailingNodes, set: (obj, value) => { obj.trailingNodes = value; } }, metadata: _metadata }, _trailingNodes_initializers, _trailingNodes_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiSelect = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor() {
+            __runInitializers(this, _trailingNodes_extraInitializers);
+            defineUiSelectElementApis(this.element);
+        }
+        element = (__runInitializers(this, _instanceExtraInitializers), resolve(Element));
+        errors = new Map();
+        focus = false;
+        active = false;
+        open = false;
+        controlEl;
+        value = __runInitializers(this, _value_initializers, void 0);
+        selectedItem = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _selectedItem_initializers, void 0));
+        label = (__runInitializers(this, _selectedItem_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+        inset = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _inset_initializers, false));
+        helperText = (__runInitializers(this, _inset_extraInitializers), __runInitializers(this, _helperText_initializers, void 0));
+        id = (__runInitializers(this, _helperText_extraInitializers), __runInitializers(this, _id_initializers, `ui-select-${++nextSelectId}`));
+        placeholder = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _placeholder_initializers, void 0));
+        valueField = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _valueField_initializers, void 0));
+        labelField = (__runInitializers(this, _valueField_extraInitializers), __runInitializers(this, _labelField_initializers, void 0));
+        disabled = (__runInitializers(this, _labelField_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, []));
+        leadingNodes = (__runInitializers(this, _helperNodes_extraInitializers), __runInitializers(this, _leadingNodes_initializers, []));
+        trailingNodes = (__runInitializers(this, _leadingNodes_extraInitializers), __runInitializers(this, _trailingNodes_initializers, []));
+        get labelId() {
+            return `${this.id}-label`;
+        }
+        get helperId() {
+            return `${this.id}-helper`;
+        }
+        get errorsId() {
+            return `${this.id}-errors`;
+        }
+        get displayText() {
+            if (this.selectedItem !== undefined) {
+                return this.getItemLabel(this.selectedItem);
+            }
+            if (this.value !== undefined) {
+                return String(this.value);
+            }
+            return undefined;
+        }
+        get placeholderText() {
+            if (this.inset && !this.focus) {
+                return undefined;
+            }
+            return this.placeholder;
+        }
+        get hasValue() {
+            return this.value !== undefined && this.value !== null && this.value !== '';
+        }
+        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);
+        }
+        onClick() {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            this.open = !this.open;
+        }
+        onKeyDown(event) {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            if (event.key === Keys.Enter || event.key === Keys.Space || event.key === Keys.ArrowDown) {
+                event.preventDefault();
+                this.open = true;
+                return;
+            }
+            if (event.key === Keys.Escape) {
+                event.preventDefault();
+                this.open = false;
+            }
+        }
+        onMenuSelect(event) {
+            this.selectedItem = event.detail;
+            this.value = this.getItemValue(event.detail);
+            this.open = false;
+            this.dispatchValueEvent('input');
+            this.dispatchValueEvent('change');
+        }
+        onMenuTabAway() {
+            this.open = false;
+            this.focus = false;
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut(event) {
+            if (this.open) {
+                event.stopPropagation();
+                return;
+            }
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        getItemValue(item) {
+            if (this.valueField && item && typeof item === 'object') {
+                return item[this.valueField];
+            }
+            return item;
+        }
+        getItemLabel(item) {
+            if (this.labelField && item && typeof item === 'object') {
+                const label = item[this.labelField];
+                return label === undefined || label === null ? '' : String(label);
+            }
+            return item === undefined || item === null ? '' : String(item);
+        }
+        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 UiSelect = _classThis;
+})();
+export { UiSelect };
+function defineUiSelectElementApis(element) {
+    Object.defineProperties(element, {
+        tagName: {
+            get() {
+                return 'UI-SELECT';
+            }
+        },
+        value: {
+            get() {
+                return CustomElement.for(this).viewModel.value;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.value = value;
+            },
+            configurable: true
+        },
+        disabled: {
+            get() {
+                return CustomElement.for(this).viewModel.disabled;
+            },
+            set(value) {
+                CustomElement.for(this).viewModel.disabled = 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.controlEl.focus();
+            },
+            configurable: true
+        },
+        blur: {
+            value() {
+                CustomElement.for(this).viewModel.controlEl.blur();
+            },
+            configurable: true
+        },
+        isFocused: {
+            get() {
+                return document.activeElement === CustomElement.for(this).viewModel.controlEl;
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=ui-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-select.js","sourceRoot":"","sources":["../../src/select/ui-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, computed, CustomElement, customElement, resolve, slotted } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { IError, IValidatedElement } from '../base/i-validated-element';\nimport { Keys } from '../base/keys';\nimport template from './ui-select.html?raw';\n\nlet nextSelectId = 0;\n\n@customElement({ name: 'ui-select', template })\nexport class UiSelect {\n  constructor() {\n    defineUiSelectElementApis(this.element);\n  }\n\n  readonly element = resolve(Element) as HTMLElement;\n\n  errors = new Map<IError, boolean>();\n  focus: boolean = false;\n  active: boolean = false;\n  open: boolean = false;\n  controlEl!: HTMLElement;\n\n  @bindable({ mode: BindingMode.twoWay })\n  value: unknown;\n\n  @bindable({ mode: BindingMode.twoWay })\n  selectedItem: unknown;\n\n  @bindable\n  label: string | undefined;\n\n  @bindable({ set: booleanAttr })\n  inset: boolean = false;\n\n  @bindable\n  helperText: string | undefined;\n\n  @bindable\n  id: string = `ui-select-${++nextSelectId}`;\n\n  @bindable\n  placeholder: string | undefined;\n\n  @bindable\n  valueField: string | undefined;\n\n  @bindable\n  labelField: string | undefined;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  readonly: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  required: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  invalid: boolean = false;\n\n  @slotted({ slotName: 'helper' })\n  helperNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'leading' })\n  leadingNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'trailing' })\n  trailingNodes: readonly Node[] = [];\n\n  get labelId(): string {\n    return `${this.id}-label`;\n  }\n\n  get helperId(): string {\n    return `${this.id}-helper`;\n  }\n\n  get errorsId(): string {\n    return `${this.id}-errors`;\n  }\n\n  @computed({ flush: 'async' })\n  get displayText(): string | undefined {\n    if (this.selectedItem !== undefined) {\n      return this.getItemLabel(this.selectedItem);\n    }\n    if (this.value !== undefined) {\n      return String(this.value);\n    }\n\n    return undefined;\n  }\n\n  @computed({ flush: 'async' })\n  get placeholderText(): string | undefined {\n    if (this.inset && !this.focus) {\n      return undefined;\n    }\n\n    return this.placeholder;\n  }\n\n  get hasValue(): boolean {\n    return this.value !== undefined && this.value !== null && this.value !== '';\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  onClick(): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    this.open = !this.open;\n  }\n\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    if (event.key === Keys.Enter || event.key === Keys.Space || event.key === Keys.ArrowDown) {\n      event.preventDefault();\n      this.open = true;\n      return;\n    }\n\n    if (event.key === Keys.Escape) {\n      event.preventDefault();\n      this.open = false;\n    }\n  }\n\n  onMenuSelect(event: CustomEvent): void {\n    this.selectedItem = event.detail;\n    this.value = this.getItemValue(event.detail);\n    this.open = false;\n    this.dispatchValueEvent('input');\n    this.dispatchValueEvent('change');\n  }\n\n  onMenuTabAway(): void {\n    this.open = false;\n    this.focus = false;\n  }\n\n  onFocusIn(): void {\n    if (!this.disabled) {\n      this.focus = true;\n    }\n  }\n\n  onFocusOut(event: FocusEvent): void {\n    if (this.open) {\n      event.stopPropagation();\n      return;\n    }\n\n    this.focus = false;\n  }\n\n  onPointerDown(): void {\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  private getItemValue(item: unknown): unknown {\n    if (this.valueField && item && typeof item === 'object') {\n      return (item as Record<string, unknown>)[this.valueField];\n    }\n\n    return item;\n  }\n\n  private getItemLabel(item: unknown): string {\n    if (this.labelField && item && typeof item === 'object') {\n      const label = (item as Record<string, unknown>)[this.labelField];\n      return label === undefined || label === null ? '' : String(label);\n    }\n\n    return item === undefined || item === null ? '' : String(item);\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 IUiSelectElement extends IValidatedElement {\n  value: unknown;\n}\n\nfunction defineUiSelectElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    tagName: {\n      get() {\n        return 'UI-SELECT';\n      }\n    },\n    value: {\n      get(this: IUiSelectElement) {\n        return CustomElement.for<UiSelect>(this).viewModel.value;\n      },\n      set(this: IUiSelectElement, value: unknown) {\n        CustomElement.for<UiSelect>(this).viewModel.value = value;\n      },\n      configurable: true\n    },\n    disabled: {\n      get(this: IUiSelectElement) {\n        return CustomElement.for<UiSelect>(this).viewModel.disabled;\n      },\n      set(this: IUiSelectElement, value: boolean) {\n        CustomElement.for<UiSelect>(this).viewModel.disabled = value;\n      },\n      configurable: true\n    },\n    readOnly: {\n      get(this: IUiSelectElement) {\n        return CustomElement.for<UiSelect>(this).viewModel.readonly;\n      },\n      set(this: IUiSelectElement, value: boolean) {\n        CustomElement.for<UiSelect>(this).viewModel.readonly = value;\n      },\n      configurable: true\n    },\n    addError: {\n      value(this: IUiSelectElement, error: IError) {\n        CustomElement.for<UiSelect>(this).viewModel.addError(error);\n      },\n      configurable: true\n    },\n    removeError: {\n      value(this: IUiSelectElement, error: IError) {\n        CustomElement.for<UiSelect>(this).viewModel.removeError(error);\n      },\n      configurable: true\n    },\n    focus: {\n      value(this: IUiSelectElement) {\n        CustomElement.for<UiSelect>(this).viewModel.controlEl.focus();\n      },\n      configurable: true\n    },\n    blur: {\n      value(this: IUiSelectElement) {\n        CustomElement.for<UiSelect>(this).viewModel.controlEl.blur();\n      },\n      configurable: true\n    },\n    isFocused: {\n      get(this: IUiSelectElement) {\n        return document.activeElement === CustomElement.for<UiSelect>(this).viewModel.controlEl;\n      },\n      configurable: true\n    }\n  });\n}\n"]}

package/dist/slider/ui-slider.html

@@ -0,0 +1,69 @@
+<template class="ui-slider"
+  data-disabled.attr="disabled ? '' : null"
+  data-readonly.attr="readonly ? '' : null"
+  data-invalid.attr="invalid || errors.size ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-range.attr="range ? '' : null">
+  <label class="ui-slider__label" for.bind="id" id.bind="label ? labelId : null" show.bind="label">${label}</label>
+
+  <div class="ui-slider__control">
+    <span class="ui-slider__track" aria-hidden="true">
+      <span class="ui-slider__fill" style.bind="fillStyle"></span>
+    </span>
+    <input ref="inputEl"
+      class="ui-slider__native"
+      id.bind="id"
+      type="range"
+      name.attr="name || null"
+      min.bind="min"
+      max.bind="max"
+      step.bind="step"
+      value.bind="value"
+      disabled.bind="disabled"
+      required.bind="required"
+      aria-labelledby.bind="label ? labelId : null"
+      aria-invalid.bind="invalid || errors.size ? 'true' : 'false'"
+      aria-describedby.bind="errors.size ? errorsId : (helperNodes.length ? helperId : null)"
+      input.trigger="onInput($event)"
+      change.trigger="onChange($event)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut()"
+      pointerdown.trigger="onPointerDown($event)"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()"
+      keydown.trigger="onKeyDown($event)">
+    <input ref="endInputEl"
+      if.bind="range"
+      class="ui-slider__native ui-slider__native--end"
+      id.bind="endId"
+      type="range"
+      name.attr="name ? name + '-end' : null"
+      min.bind="min"
+      max.bind="max"
+      step.bind="step"
+      value.bind="endValue"
+      disabled.bind="disabled"
+      aria-label.attr="label ? label + ' end' : 'Range end'"
+      aria-invalid.bind="invalid || errors.size ? 'true' : 'false'"
+      aria-describedby.bind="errors.size ? errorsId : (helperNodes.length ? helperId : null)"
+      input.trigger="onInput($event)"
+      change.trigger="onChange($event)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut()"
+      pointerdown.trigger="onPointerDown($event)"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()"
+      keydown.trigger="onKeyDown($event)">
+  </div>
+
+  <div class="ui-slider__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-slider__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-slider__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-slider__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>