@aurelia-ui-toolkits/headless 1.0.0

package/dist/input/ui-input.html

@@ -0,0 +1,56 @@
+<template class="ui-input"
+  data-disabled.attr="disabled ? '' : null"
+  data-invalid.attr="invalid || errors.size ? '' : null"
+  data-focus.attr="focus ? '' : null"
+  data-active.attr="active ? '' : null"
+  data-inset.attr="inset ? '' : null"
+  data-has-value.attr="inputEl.value ? '' : null">
+  <label class="ui-input__label"
+    for.bind="id"
+    id.bind="!inset && label ? labelId : null"
+    show.bind="label && !inset">${label}</label>
+
+  <div class="ui-input__control">
+    <span class="ui-input__leading" show.bind="leadingNodes.length">
+      <au-slot name="leading"></au-slot>
+    </span>
+
+    <span class="ui-input__inset-label"
+      id.bind="inset && label ? labelId : null"
+      show.bind="label && inset">${label}</span>
+
+    <input ref="inputEl"
+      class="ui-input__native"
+      id.bind="id"
+      type.bind="type || null"
+      name.attr="name || null"
+      value.bind="value"
+      placeholder.attr="inset ? null : placeholder || null"
+      autocomplete.attr="autocomplete || null"
+      disabled.bind="disabled"
+      readonly.bind="readonly"
+      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)"
+      focusin.trigger="onFocusIn()"
+      focusout.trigger="onFocusOut()"
+      pointerdown.trigger="onPointerDown()"
+      pointerup.trigger="onPointerUp()"
+      pointerleave.trigger="onPointerLeave()">
+
+    <span class="ui-input__trailing" show.bind="trailingNodes.length">
+      <au-slot name="trailing"></au-slot>
+    </span>
+  </div>
+
+  <div class="ui-input__subscript" show.bind="errors.size || helperText || helperNodes.length">
+    <div class="ui-input__helper" id.bind="helperId" show.bind="!errors.size && (helperText || helperNodes.length)">
+      <au-slot name="helper">${helperText}</au-slot>
+    </div>
+
+    <div class="ui-input__errors" id.bind="errorsId" show.bind="errors.size">
+      <div class="ui-input__error" repeat.for="[error, _] of errors" if.bind="error.message">${error.message}</div>
+    </div>
+  </div>
+</template>

package/dist/input/ui-input.js

@@ -0,0 +1,259 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, CustomElement, customElement, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-input.html?raw';
+let nextInputId = 0;
+let UiInput = (() => {
+    let _classDecorators = [customElement({ name: 'ui-input', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    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 _type_decorators;
+    let _type_initializers = [];
+    let _type_extraInitializers = [];
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _placeholder_decorators;
+    let _placeholder_initializers = [];
+    let _placeholder_extraInitializers = [];
+    let _autocomplete_decorators;
+    let _autocomplete_initializers = [];
+    let _autocomplete_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 = [];
+    var UiInput = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _label_decorators = [bindable];
+            _inset_decorators = [bindable({ set: booleanAttr })];
+            _helperText_decorators = [bindable];
+            _id_decorators = [bindable];
+            _type_decorators = [bindable];
+            _name_decorators = [bindable];
+            _placeholder_decorators = [bindable];
+            _autocomplete_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' })];
+            __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, _type_decorators, { kind: "field", name: "type", static: false, private: false, access: { has: obj => "type" in obj, get: obj => obj.type, set: (obj, value) => { obj.type = value; } }, metadata: _metadata }, _type_initializers, _type_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, _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, _autocomplete_decorators, { kind: "field", name: "autocomplete", static: false, private: false, access: { has: obj => "autocomplete" in obj, get: obj => obj.autocomplete, set: (obj, value) => { obj.autocomplete = value; } }, metadata: _metadata }, _autocomplete_initializers, _autocomplete_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);
+            UiInput = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor() {
+            defineUiInputElementApis(resolve(Element));
+        }
+        errors = new Map();
+        focus = false;
+        active = false;
+        inputEl;
+        label = __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-input-${++nextInputId}`));
+        type = (__runInitializers(this, _id_extraInitializers), __runInitializers(this, _type_initializers, void 0));
+        name = (__runInitializers(this, _type_extraInitializers), __runInitializers(this, _name_initializers, void 0));
+        placeholder = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _placeholder_initializers, void 0));
+        autocomplete = (__runInitializers(this, _placeholder_extraInitializers), __runInitializers(this, _autocomplete_initializers, void 0));
+        disabled = (__runInitializers(this, _autocomplete_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, []));
+        initialValue = __runInitializers(this, _trailingNodes_extraInitializers);
+        get value() {
+            if (this.inputEl) {
+                return this.inputEl.value;
+            }
+            else {
+                return this.initialValue;
+            }
+        }
+        set value(value) {
+            if (this.inputEl) {
+                this.inputEl.value = value;
+            }
+            else {
+                this.initialValue = value;
+            }
+        }
+        get labelId() {
+            return `${this.id}-label`;
+        }
+        get helperId() {
+            return `${this.id}-helper`;
+        }
+        get errorsId() {
+            return `${this.id}-errors`;
+        }
+        attached() {
+            if (this.initialValue !== undefined) {
+                this.value = this.initialValue;
+            }
+        }
+        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);
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        onPointerDown() {
+            if (!this.disabled) {
+                this.active = true;
+            }
+        }
+        onPointerUp() {
+            this.active = false;
+        }
+        onPointerLeave() {
+            this.active = false;
+        }
+        findError(error) {
+            for (const existing of this.errors.keys()) {
+                if (existing === error || existing.message === error.message) {
+                    return existing;
+                }
+            }
+            return undefined;
+        }
+    };
+    return UiInput = _classThis;
+})();
+export { UiInput };
+function defineUiInputElementApis(element) {
+    Object.defineProperties(element, {
+        tagName: {
+            get() {
+                return 'UI-INPUT';
+            }
+        },
+        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.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-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-input.js","sourceRoot":"","sources":["../../src/input/ui-input.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, CustomElement, customElement, resolve, slotted } from 'aurelia';\r\nimport { booleanAttr } from '../base/boolean-attr';\r\nimport template from './ui-input.html?raw';\r\nimport { IValidatedElement } from '../base/i-validated-element';\r\n\r\nlet nextInputId = 0;\r\n\r\nexport interface IError {\r\n  message: string | undefined;\r\n}\r\n\r\n@customElement({ name: 'ui-input', template })\r\nexport class UiInput {\r\n  constructor() {\r\n    defineUiInputElementApis(resolve(Element) as HTMLElement);\r\n  }\r\n\r\n  errors = new Map<IError, boolean>();\r\n  focus: boolean = false;\r\n  active: boolean = false;\r\n  inputEl!: HTMLInputElement;\r\n\r\n  @bindable\r\n  label: string | undefined;\r\n\r\n  @bindable({ set: booleanAttr })\r\n  inset: boolean = false;\r\n\r\n  @bindable\r\n  helperText: string | undefined;\r\n\r\n  @bindable\r\n  id: string = `ui-input-${++nextInputId}`;\r\n\r\n  @bindable\r\n  type: string | undefined;\r\n\r\n  @bindable\r\n  name: string | undefined;\r\n\r\n  @bindable\r\n  placeholder: string | undefined;\r\n\r\n  @bindable\r\n  autocomplete: AutoFill | undefined;\r\n\r\n  @bindable({ set: booleanAttr })\r\n  disabled: boolean = false;\r\n\r\n  @bindable({ set: booleanAttr })\r\n  readonly: boolean = false;\r\n\r\n  @bindable({ set: booleanAttr })\r\n  required: boolean = false;\r\n\r\n  @bindable({ set: booleanAttr })\r\n  invalid: boolean = false;\r\n\r\n  @slotted({ slotName: 'helper' })\r\n  helperNodes: readonly Node[] = [];\r\n\r\n  @slotted({ slotName: 'leading' })\r\n  leadingNodes: readonly Node[] = [];\r\n\r\n  @slotted({ slotName: 'trailing' })\r\n  trailingNodes: readonly Node[] = [];\r\n\r\n  private initialValue: string | undefined;\r\n  get value(): string | undefined {\r\n    if (this.inputEl) {\r\n      return this.inputEl.value;\r\n    } else {\r\n      return this.initialValue;\r\n    }\r\n  }\r\n  set value(value: string) {\r\n    if (this.inputEl) {\r\n      this.inputEl.value = value;\r\n    } else {\r\n      this.initialValue = value;\r\n    }\r\n  }\r\n\r\n\r\n  get labelId(): string {\r\n    return `${this.id}-label`;\r\n  }\r\n\r\n  get helperId(): string {\r\n    return `${this.id}-helper`;\r\n  }\r\n\r\n  get errorsId(): string {\r\n    return `${this.id}-errors`;\r\n  }\r\n\r\n  attached() {\r\n    if (this.initialValue !== undefined) {\r\n      this.value = this.initialValue;\r\n    }\r\n  }\r\n\r\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\r\n  onFocusIn(): void {\r\n    if (!this.disabled) {\r\n      this.focus = true;\r\n    }\r\n  }\r\n\r\n  onFocusOut(): void {\r\n    this.focus = false;\r\n  }\r\n\r\n  onPointerDown(): void {\r\n    if (!this.disabled) {\r\n      this.active = true;\r\n    }\r\n  }\r\n\r\n  onPointerUp(): void {\r\n    this.active = false;\r\n  }\r\n\r\n  onPointerLeave(): void {\n    this.active = false;\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\r\nexport interface IUiInputElement extends IValidatedElement {\r\n  value: string;\r\n}\r\n\r\nfunction defineUiInputElementApis(element: HTMLElement) {\r\n  Object.defineProperties(element, {\r\n    tagName: {\r\n      get() {\r\n        return 'UI-INPUT';\r\n      }\r\n    },\r\n    value: {\r\n      get(this: IUiInputElement) {\r\n        return CustomElement.for<UiInput>(this).viewModel.value;\r\n      },\r\n      set(this: IUiInputElement, value: string) {\r\n        CustomElement.for<UiInput>(this).viewModel.value = value;\r\n      },\r\n      configurable: true\r\n    },\r\n    disabled: {\r\n      get(this: IUiInputElement) {\r\n        return CustomElement.for<UiInput>(this).viewModel.disabled;\r\n      },\r\n      set(this: IUiInputElement, value: boolean) {\r\n        CustomElement.for<UiInput>(this).viewModel.disabled = value;\r\n      },\r\n      configurable: true\r\n    },\r\n    readOnly: {\r\n      get(this: IUiInputElement) {\r\n        return CustomElement.for<UiInput>(this).viewModel.readonly;\r\n      },\r\n      set(this: IUiInputElement, value: boolean) {\r\n        CustomElement.for<UiInput>(this).viewModel.readonly = value;\r\n      },\r\n      configurable: true\r\n    },\r\n    addError: {\r\n      value(this: IUiInputElement, error: IError) {\r\n        CustomElement.for<UiInput>(this).viewModel.addError(error);\r\n      },\r\n      configurable: true\r\n    },\r\n    removeError: {\r\n      value(this: IUiInputElement, error: IError) {\r\n        CustomElement.for<UiInput>(this).viewModel.removeError(error);\r\n      },\r\n      configurable: true\r\n    },\r\n    focus: {\r\n      value(this: IUiInputElement) {\r\n        CustomElement.for<UiInput>(this).viewModel.inputEl.focus();\r\n      },\r\n      configurable: true\r\n    },\r\n    blur: {\r\n      value(this: IUiInputElement) {\r\n        CustomElement.for<UiInput>(this).viewModel.inputEl.blur();\r\n      },\r\n      configurable: true\r\n    },\r\n    isFocused: {\r\n      get(this: IUiInputElement) {\r\n        return document.activeElement === CustomElement.for<UiInput>(this).viewModel.inputEl;\r\n      },\r\n      configurable: true\r\n    }\r\n  });\r\n}\r\n"]}

package/dist/list/ui-list-item.html

@@ -0,0 +1,22 @@
+<template class="ui-list-item"
+  role="option"
+  aria-selected.attr="selected ? 'true' : 'false'"
+  aria-disabled.attr="disabled ? '' : null"
+  data-active.attr="parentList.activeItem === value ? '' : null"
+  data-selected.attr="parentList.selected === value ? '' : null"
+  data-disabled.attr="disabled ? '' : null">
+  <span class="ui-list-item__leading" show.bind="leadingNodes.length">
+    <au-slot name="leading"></au-slot>
+  </span>
+  <span class="ui-list-item__content">
+    <span class="ui-list-item__primary">
+      <au-slot></au-slot>
+    </span>
+    <span class="ui-list-item__secondary" show.bind="secondaryNodes.length">
+      <au-slot name="secondary"></au-slot>
+    </span>
+  </span>
+  <span class="ui-list-item__trailing" show.bind="trailingNodes.length">
+    <au-slot name="trailing"></au-slot>
+  </span>
+</template>

package/dist/list/ui-list-item.js

@@ -0,0 +1,59 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement, INode, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import template from './ui-list-item.html?raw';
+import { UiList } from './ui-list';
+let UiListItem = (() => {
+    let _classDecorators = [customElement({ name: 'ui-list-item', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _leadingNodes_decorators;
+    let _leadingNodes_initializers = [];
+    let _leadingNodes_extraInitializers = [];
+    let _secondaryNodes_decorators;
+    let _secondaryNodes_initializers = [];
+    let _secondaryNodes_extraInitializers = [];
+    let _trailingNodes_decorators;
+    let _trailingNodes_initializers = [];
+    let _trailingNodes_extraInitializers = [];
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var UiListItem = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _leadingNodes_decorators = [slotted({ slotName: 'leading' })];
+            _secondaryNodes_decorators = [slotted({ slotName: 'secondary' })];
+            _trailingNodes_decorators = [slotted({ slotName: 'trailing' })];
+            _value_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            __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, _secondaryNodes_decorators, { kind: "field", name: "secondaryNodes", static: false, private: false, access: { has: obj => "secondaryNodes" in obj, get: obj => obj.secondaryNodes, set: (obj, value) => { obj.secondaryNodes = value; } }, metadata: _metadata }, _secondaryNodes_initializers, _secondaryNodes_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, 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, _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, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiListItem = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        element = resolve(INode);
+        parentList = resolve(UiList);
+        leadingNodes = __runInitializers(this, _leadingNodes_initializers, []);
+        secondaryNodes = (__runInitializers(this, _leadingNodes_extraInitializers), __runInitializers(this, _secondaryNodes_initializers, []));
+        trailingNodes = (__runInitializers(this, _secondaryNodes_extraInitializers), __runInitializers(this, _trailingNodes_initializers, []));
+        value = (__runInitializers(this, _trailingNodes_extraInitializers), __runInitializers(this, _value_initializers, this));
+        disabled = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        constructor() {
+            __runInitializers(this, _disabled_extraInitializers);
+        }
+    };
+    return UiListItem = _classThis;
+})();
+export { UiListItem };
+//# sourceMappingURL=ui-list-item.js.map

package/dist/list/ui-list-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-list-item.js","sourceRoot":"","sources":["../../src/list/ui-list-item.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAC3E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,QAAQ,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;IAGtB,UAAU;4BADtB,aAAa,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;;;;;;;;;;wCAK/C,OAAO,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,CAAC;0CAGhC,OAAO,CAAC,EAAE,QAAQ,EAAE,WAAW,EAAE,CAAC;yCAGlC,OAAO,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,CAAC;iCAGjC,QAAQ;oCAGR,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;YAX/B,sLAAA,YAAY,6BAAZ,YAAY,mGAAuB;YAGnC,4LAAA,cAAc,6BAAd,cAAc,uGAAuB;YAGrC,yLAAA,aAAa,6BAAb,aAAa,qGAAuB;YAGpC,iKAAA,KAAK,6BAAL,KAAK,qFAAgB;YAGrB,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAjB5B,6KAkBC;;;YAlBY,uDAAU;;QACZ,OAAO,GAAG,OAAO,CAAC,KAAK,CAAgB,CAAC;QACxC,UAAU,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC;QAGtC,YAAY,uDAAoB,EAAE,EAAC;QAGnC,cAAc,oHAAoB,EAAE,GAAC;QAGrC,aAAa,qHAAoB,EAAE,GAAC;QAGpC,KAAK,4GAAW,IAAI,GAAC;QAGrB,QAAQ,uGAAY,KAAK,GAAC;;;;;;;SAjBf,UAAU","sourcesContent":["import { bindable, customElement, INode, resolve, slotted } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport template from './ui-list-item.html?raw';\nimport { UiList } from './ui-list';\n\n@customElement({ name: 'ui-list-item', template })\nexport class UiListItem {\n  readonly element = resolve(INode) as HTMLElement;\n  readonly parentList = resolve(UiList);\n\n  @slotted({ slotName: 'leading' })\n  leadingNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'secondary' })\n  secondaryNodes: readonly Node[] = [];\n\n  @slotted({ slotName: 'trailing' })\n  trailingNodes: readonly Node[] = [];\n\n  @bindable\n  value: object = this;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n}\n"]}

package/dist/list/ui-list.html

@@ -0,0 +1,10 @@
+<template class="ui-list"
+  role="listbox"
+  tabindex="0"
+  data-orientation.bind="orientation"
+  keydown.trigger="onKeyDown($event)"
+  click.trigger="onClick($event)"
+  mousemove.trigger="onMouseMove()"
+  mouseover.trigger="onMouseOver($event)">
+  <au-slot></au-slot>
+</template>