@aurelia-ui-toolkits/headless 1.0.0

package/dist/radio/ui-radio-group.js

@@ -0,0 +1,259 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, CustomElement, customElement, INode, resolve, slotted } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-radio-group.html?raw';
+let nextRadioGroupId = 0;
+let UiRadioGroup = (() => {
+    let _classDecorators = [customElement({ name: 'ui-radio-group', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_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 _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 _radioElements_decorators;
+    let _radioElements_initializers = [];
+    let _radioElements_extraInitializers = [];
+    var UiRadioGroup = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _label_decorators = [bindable];
+            _helperText_decorators = [bindable];
+            _id_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' })];
+            _radioElements_decorators = [slotted('ui-radio')];
+            __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, _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, _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, _radioElements_decorators, { kind: "field", name: "radioElements", static: false, private: false, access: { has: obj => "radioElements" in obj, get: obj => obj.radioElements, set: (obj, value) => { obj.radioElements = value; } }, metadata: _metadata }, _radioElements_initializers, _radioElements_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiRadioGroup = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        constructor() {
+            __runInitializers(this, _radioElements_extraInitializers);
+            defineUiRadioGroupElementApis(this.element);
+        }
+        element = resolve(INode);
+        errors = new Map();
+        focus = false;
+        value = __runInitializers(this, _value_initializers, void 0);
+        label = (__runInitializers(this, _value_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-radio-group-${++nextRadioGroupId}`));
+        disabled = (__runInitializers(this, _id_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, []));
+        radioElements = (__runInitializers(this, _helperNodes_extraInitializers), __runInitializers(this, _radioElements_initializers, []));
+        get radios() {
+            return this.radioElements.map(element => CustomElement.for(element).viewModel);
+        }
+        get labelId() {
+            return `${this.id}-label`;
+        }
+        get helperId() {
+            return `${this.id}-helper`;
+        }
+        get errorsId() {
+            return `${this.id}-errors`;
+        }
+        select(value) {
+            if (this.disabled || this.readonly || this.value === value) {
+                return;
+            }
+            this.value = value;
+            this.dispatchValueEvent('input');
+            this.dispatchValueEvent('change');
+        }
+        isSelected(radio) {
+            return this.value === radio.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);
+        }
+        onRadioKeyDown(radio, event) {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const radios = this.enabledRadios;
+            if (!radios.length) {
+                return;
+            }
+            if (event.key === Keys.Space || event.key === Keys.Enter) {
+                if (!radio.disabled) {
+                    event.preventDefault();
+                    this.select(radio.value);
+                }
+                return;
+            }
+            if (event.key === Keys.Home) {
+                event.preventDefault();
+                this.focusRadio(radios[0]);
+                return;
+            }
+            if (event.key === Keys.End) {
+                event.preventDefault();
+                this.focusRadio(radios[radios.length - 1]);
+                return;
+            }
+            const direction = this.getNavigationDirection(event.key);
+            if (!direction) {
+                return;
+            }
+            event.preventDefault();
+            const index = radios.indexOf(radio);
+            this.focusRadio(radios[(index + direction + radios.length) % radios.length]);
+        }
+        onFocusIn() {
+            if (!this.disabled) {
+                this.focus = true;
+            }
+        }
+        onFocusOut() {
+            this.focus = false;
+        }
+        get enabledRadios() {
+            return this.radios.filter(radio => !radio.disabled);
+        }
+        focusRadio(radio) {
+            radio.element.focus();
+        }
+        getNavigationDirection(key) {
+            if (key === Keys.ArrowRight || key === Keys.ArrowDown) {
+                return 1;
+            }
+            if (key === Keys.ArrowLeft || key === Keys.ArrowUp) {
+                return -1;
+            }
+            return undefined;
+        }
+        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 UiRadioGroup = _classThis;
+})();
+export { UiRadioGroup };
+function defineUiRadioGroupElementApis(element) {
+    Object.defineProperties(element, {
+        tagName: {
+            get() {
+                return 'UI-RADIO-GROUP';
+            }
+        },
+        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.enabledRadios[0]?.element.focus();
+            },
+            configurable: true
+        },
+        blur: {
+            value() {
+                const viewModel = CustomElement.for(this).viewModel;
+                if (viewModel.radios.some(radio => radio.element === document.activeElement)) {
+                    document.activeElement.blur();
+                }
+            },
+            configurable: true
+        }
+    });
+}
+//# sourceMappingURL=ui-radio-group.js.map

package/dist/radio/ui-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-radio-group.js","sourceRoot":"","sources":["../../src/radio/ui-radio-group.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 { Keys } from '../base/keys';\nimport { UiRadio } from './ui-radio';\nimport template from './ui-radio-group.html?raw';\n\nlet nextRadioGroupId = 0;\n\n@customElement({ name: 'ui-radio-group', template })\nexport class UiRadioGroup {\n  constructor() {\n    defineUiRadioGroupElementApis(this.element);\n  }\n\n  readonly element = resolve(INode) as HTMLElement;\n\n  errors = new Map<IError, boolean>();\n  focus: boolean = false;\n\n  @bindable({ mode: BindingMode.twoWay })\n  value: unknown;\n\n  @bindable\n  label: string | undefined;\n\n  @bindable\n  helperText: string | undefined;\n\n  @bindable\n  id: string = `ui-radio-group-${++nextRadioGroupId}`;\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('ui-radio')\n  radioElements: readonly HTMLElement[] = [];\n\n  get radios(): UiRadio[] {\n    return this.radioElements.map(element => CustomElement.for<UiRadio>(element).viewModel);\n  }\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  select(value: unknown): void {\n    if (this.disabled || this.readonly || this.value === value) {\n      return;\n    }\n\n    this.value = value;\n    this.dispatchValueEvent('input');\n    this.dispatchValueEvent('change');\n  }\n\n  isSelected(radio: UiRadio): boolean {\n    return this.value === radio.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  onRadioKeyDown(radio: UiRadio, event: KeyboardEvent): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const radios = this.enabledRadios;\n    if (!radios.length) {\n      return;\n    }\n\n    if (event.key === Keys.Space || event.key === Keys.Enter) {\n      if (!radio.disabled) {\n        event.preventDefault();\n        this.select(radio.value);\n      }\n      return;\n    }\n\n    if (event.key === Keys.Home) {\n      event.preventDefault();\n      this.focusRadio(radios[0]);\n      return;\n    }\n\n    if (event.key === Keys.End) {\n      event.preventDefault();\n      this.focusRadio(radios[radios.length - 1]);\n      return;\n    }\n\n    const direction = this.getNavigationDirection(event.key);\n    if (!direction) {\n      return;\n    }\n\n    event.preventDefault();\n    const index = radios.indexOf(radio);\n    this.focusRadio(radios[(index + direction + radios.length) % radios.length]);\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  get enabledRadios(): UiRadio[] {\n    return this.radios.filter(radio => !radio.disabled);\n  }\n\n  private focusRadio(radio: UiRadio): void {\n    radio.element.focus();\n  }\n\n  private getNavigationDirection(key: string): 1 | -1 | undefined {\n    if (key === Keys.ArrowRight || key === Keys.ArrowDown) {\n      return 1;\n    }\n\n    if (key === Keys.ArrowLeft || key === Keys.ArrowUp) {\n      return -1;\n    }\n\n    return undefined;\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 IUiRadioGroupElement extends IValidatedElement {\n  value: unknown;\n}\n\nfunction defineUiRadioGroupElementApis(element: HTMLElement) {\n  Object.defineProperties(element, {\n    tagName: {\n      get() {\n        return 'UI-RADIO-GROUP';\n      }\n    },\n    value: {\n      get(this: IUiRadioGroupElement) {\n        return CustomElement.for<UiRadioGroup>(this).viewModel.value;\n      },\n      set(this: IUiRadioGroupElement, value: unknown) {\n        CustomElement.for<UiRadioGroup>(this).viewModel.value = value;\n      },\n      configurable: true\n    },\n    disabled: {\n      get(this: IUiRadioGroupElement) {\n        return CustomElement.for<UiRadioGroup>(this).viewModel.disabled;\n      },\n      set(this: IUiRadioGroupElement, value: boolean) {\n        CustomElement.for<UiRadioGroup>(this).viewModel.disabled = value;\n      },\n      configurable: true\n    },\n    readOnly: {\n      get(this: IUiRadioGroupElement) {\n        return CustomElement.for<UiRadioGroup>(this).viewModel.readonly;\n      },\n      set(this: IUiRadioGroupElement, value: boolean) {\n        CustomElement.for<UiRadioGroup>(this).viewModel.readonly = value;\n      },\n      configurable: true\n    },\n    addError: {\n      value(this: IUiRadioGroupElement, error: IError) {\n        CustomElement.for<UiRadioGroup>(this).viewModel.addError(error);\n      },\n      configurable: true\n    },\n    removeError: {\n      value(this: IUiRadioGroupElement, error: IError) {\n        CustomElement.for<UiRadioGroup>(this).viewModel.removeError(error);\n      },\n      configurable: true\n    },\n    focus: {\n      value(this: IUiRadioGroupElement) {\n        CustomElement.for<UiRadioGroup>(this).viewModel.enabledRadios[0]?.element.focus();\n      },\n      configurable: true\n    },\n    blur: {\n      value(this: IUiRadioGroupElement) {\n        const viewModel = CustomElement.for<UiRadioGroup>(this).viewModel;\n        if (viewModel.radios.some(radio => radio.element === document.activeElement)) {\n          (document.activeElement as HTMLElement).blur();\n        }\n      },\n      configurable: true\n    }\n  });\n}\n"]}

package/dist/radio/ui-radio.html

@@ -0,0 +1,11 @@
+<template class="ui-radio"
+  role="radio"
+  tabindex.bind="parentGroup.disabled || disabled ? -1 : 0"
+  aria-checked.attr="parentGroup.value === value ? 'true' : 'false'"
+  aria-disabled.attr="disabled || parentGroup.disabled ? '' : null"
+  data-selected.attr="parentGroup.value === value ? '' : null"
+  data-disabled.attr="disabled || parentGroup.disabled ? '' : null"
+  click.trigger="onClick()">
+  <span class="ui-radio__indicator" aria-hidden="true"></span>
+  <span class="ui-radio__label"><au-slot></au-slot></span>
+</template>

package/dist/radio/ui-radio.js

@@ -0,0 +1,55 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiRadioGroup } from './ui-radio-group';
+import template from './ui-radio.html?raw';
+let UiRadio = (() => {
+    let _classDecorators = [customElement({ name: 'ui-radio', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var UiRadio = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            __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);
+            UiRadio = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        element = resolve(INode);
+        parentGroup = resolve(UiRadioGroup);
+        onHostKeyDown = (event) => {
+            this.parentGroup.onRadioKeyDown(this, event);
+        };
+        value = __runInitializers(this, _value_initializers, this);
+        disabled = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        onClick() {
+            if (!this.disabled) {
+                this.parentGroup.select(this.value);
+            }
+        }
+        attaching() {
+            this.element.addEventListener('keydown', this.onHostKeyDown);
+        }
+        detaching() {
+            this.element.removeEventListener('keydown', this.onHostKeyDown);
+        }
+        constructor() {
+            __runInitializers(this, _disabled_extraInitializers);
+        }
+    };
+    return UiRadio = _classThis;
+})();
+export { UiRadio };
+//# sourceMappingURL=ui-radio.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ui-radio.js","sourceRoot":"","sources":["../../src/radio/ui-radio.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,QAAQ,MAAM,qBAAqB,CAAC;IAG9B,OAAO;4BADnB,aAAa,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;iCAS3C,QAAQ;oCAGR,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;YAF/B,iKAAA,KAAK,6BAAL,KAAK,qFAAiB;YAGtB,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAZ5B,6KA4BC;;;YA5BY,uDAAO;;QACT,OAAO,GAAG,OAAO,CAAC,KAAK,CAAgB,CAAC;QACxC,WAAW,GAAG,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,aAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;YAC9D,IAAI,CAAC,WAAW,CAAC,cAAc,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;QAC/C,CAAC,CAAC;QAGF,KAAK,gDAAY,IAAI,EAAC;QAGtB,QAAQ,uGAAY,KAAK,GAAC;QAE1B,OAAO;YACL,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;gBACnB,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;YACtC,CAAC;QACH,CAAC;QAED,SAAS;YACP,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC/D,CAAC;QAED,SAAS;YACP,IAAI,CAAC,OAAO,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAClE,CAAC;;;;;;;SA1BU,OAAO","sourcesContent":["import { bindable, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { UiRadioGroup } from './ui-radio-group';\nimport template from './ui-radio.html?raw';\n\n@customElement({ name: 'ui-radio', template })\nexport class UiRadio {\n  readonly element = resolve(INode) as HTMLElement;\n  readonly parentGroup = resolve(UiRadioGroup);\n\n  private readonly onHostKeyDown = (event: KeyboardEvent): void => {\n    this.parentGroup.onRadioKeyDown(this, event);\n  };\n\n  @bindable\n  value: unknown = this;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  onClick(): void {\n    if (!this.disabled) {\n      this.parentGroup.select(this.value);\n    }\n  }\n\n  attaching(): void {\n    this.element.addEventListener('keydown', this.onHostKeyDown);\n  }\n\n  detaching(): void {\n    this.element.removeEventListener('keydown', this.onHostKeyDown);\n  }\n\n}\n"]}

package/dist/segmented-control/ui-segment.html

@@ -0,0 +1,10 @@
+<template class="ui-segment"
+  role="radio"
+  tabindex.bind="parentControl.disabled || disabled ? -1 : parentControl.value === value ? 0 : -1"
+  aria-checked.attr="parentControl.value === value ? 'true' : 'false'"
+  aria-disabled.attr="parentControl.disabled || disabled ? '' : null"
+  data-selected.attr="parentControl.value === value ? '' : null"
+  data-disabled.attr="parentControl.disabled || disabled ? '' : null"
+  click.trigger="onClick()">
+  <au-slot></au-slot>
+</template>

package/dist/segmented-control/ui-segment.js

@@ -0,0 +1,44 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { UiSegmentedControl } from './ui-segmented-control';
+import template from './ui-segment.html?raw';
+let UiSegment = (() => {
+    let _classDecorators = [customElement({ name: 'ui-segment', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    var UiSegment = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            __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);
+            UiSegment = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        element = resolve(INode);
+        parentControl = resolve(UiSegmentedControl);
+        value = __runInitializers(this, _value_initializers, this);
+        disabled = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        onClick() {
+            this.parentControl.select(this);
+        }
+        constructor() {
+            __runInitializers(this, _disabled_extraInitializers);
+        }
+    };
+    return UiSegment = _classThis;
+})();
+export { UiSegment };
+//# sourceMappingURL=ui-segment.js.map

package/dist/segmented-control/ui-segment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-segment.js","sourceRoot":"","sources":["../../src/segmented-control/ui-segment.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,QAAQ,EAAE,aAAa,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAClE,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAC;AAC5D,OAAO,QAAQ,MAAM,uBAAuB,CAAC;IAGhC,SAAS;4BADrB,aAAa,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,QAAQ,EAAE,CAAC;;;;;;;;;;;;;;iCAK7C,QAAQ;oCAGR,QAAQ,CAAC,EAAE,GAAG,EAAE,WAAW,EAAE,CAAC;YAF/B,iKAAA,KAAK,6BAAL,KAAK,qFAAiB;YAGtB,0KAAA,QAAQ,6BAAR,QAAQ,2FAAkB;YAR5B,6KAaC;;;YAbY,uDAAS;;QACX,OAAO,GAAG,OAAO,CAAC,KAAK,CAAgB,CAAC;QACxC,aAAa,GAAG,OAAO,CAAC,kBAAkB,CAAC,CAAC;QAGrD,KAAK,gDAAY,IAAI,EAAC;QAGtB,QAAQ,uGAAY,KAAK,GAAC;QAE1B,OAAO;YACL,IAAI,CAAC,aAAa,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAClC,CAAC;;;;;;;SAZU,SAAS","sourcesContent":["import { bindable, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { UiSegmentedControl } from './ui-segmented-control';\nimport template from './ui-segment.html?raw';\n\n@customElement({ name: 'ui-segment', template })\nexport class UiSegment {\n  readonly element = resolve(INode) as HTMLElement;\n  readonly parentControl = resolve(UiSegmentedControl);\n\n  @bindable\n  value: unknown = this;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  onClick(): void {\n    this.parentControl.select(this);\n  }\n}\n"]}

package/dist/segmented-control/ui-segmented-control.html

@@ -0,0 +1,9 @@
+<template class="ui-segmented-control"
+  role="radiogroup"
+  aria-label.attr="label || null"
+  aria-disabled.attr="disabled ? '' : null"
+  data-disabled.attr="disabled ? '' : null"
+  data-readonly.attr="readonly ? '' : null"
+  keydown.trigger="onKeyDown($event)">
+  <au-slot></au-slot>
+</template>

package/dist/segmented-control/ui-segmented-control.js

@@ -0,0 +1,134 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { bindable, BindingMode, children, customElement, INode, resolve } from 'aurelia';
+import { booleanAttr } from '../base/boolean-attr';
+import { Keys } from '../base/keys';
+import template from './ui-segmented-control.html?raw';
+let UiSegmentedControl = (() => {
+    let _classDecorators = [customElement({ name: 'ui-segmented-control', template })];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _value_decorators;
+    let _value_initializers = [];
+    let _value_extraInitializers = [];
+    let _label_decorators;
+    let _label_initializers = [];
+    let _label_extraInitializers = [];
+    let _disabled_decorators;
+    let _disabled_initializers = [];
+    let _disabled_extraInitializers = [];
+    let _readonly_decorators;
+    let _readonly_initializers = [];
+    let _readonly_extraInitializers = [];
+    let _segments_decorators;
+    let _segments_initializers = [];
+    let _segments_extraInitializers = [];
+    var UiSegmentedControl = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            _value_decorators = [bindable({ mode: BindingMode.twoWay })];
+            _label_decorators = [bindable];
+            _disabled_decorators = [bindable({ set: booleanAttr })];
+            _readonly_decorators = [bindable({ set: booleanAttr })];
+            _segments_decorators = [children({
+                    query: 'ui-segment',
+                    map: (_node, viewModel) => viewModel
+                })];
+            __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, _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, _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, _segments_decorators, { kind: "field", name: "segments", static: false, private: false, access: { has: obj => "segments" in obj, get: obj => obj.segments, set: (obj, value) => { obj.segments = value; } }, metadata: _metadata }, _segments_initializers, _segments_extraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            UiSegmentedControl = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        host = resolve(INode);
+        value = __runInitializers(this, _value_initializers, void 0);
+        label = (__runInitializers(this, _value_extraInitializers), __runInitializers(this, _label_initializers, void 0));
+        disabled = (__runInitializers(this, _label_extraInitializers), __runInitializers(this, _disabled_initializers, false));
+        readonly = (__runInitializers(this, _disabled_extraInitializers), __runInitializers(this, _readonly_initializers, false));
+        segments = (__runInitializers(this, _readonly_extraInitializers), __runInitializers(this, _segments_initializers, []));
+        segmentsChanged() {
+            this.selectInitialSegment();
+        }
+        attached() {
+            this.selectInitialSegment();
+        }
+        select(segment) {
+            if (this.disabled || this.readonly || segment.disabled || this.value === segment.value) {
+                return;
+            }
+            this.value = segment.value;
+            this.dispatchValueEvent('input');
+            this.dispatchValueEvent('change');
+        }
+        onKeyDown(event) {
+            if (this.disabled || this.readonly) {
+                return;
+            }
+            const active = this.segments.find(segment => segment.element === event.target);
+            if (!active) {
+                return;
+            }
+            if (event.key === Keys.Space || event.key === Keys.Enter) {
+                event.preventDefault();
+                this.select(active);
+                return;
+            }
+            const segments = this.enabledSegments;
+            if (!segments.length) {
+                return;
+            }
+            if (event.key === Keys.Home) {
+                event.preventDefault();
+                segments[0].element.focus();
+                return;
+            }
+            if (event.key === Keys.End) {
+                event.preventDefault();
+                segments[segments.length - 1].element.focus();
+                return;
+            }
+            const direction = this.getNavigationDirection(event.key);
+            if (!direction) {
+                return;
+            }
+            event.preventDefault();
+            const index = segments.indexOf(active);
+            segments[(index + direction + segments.length) % segments.length].element.focus();
+        }
+        get enabledSegments() {
+            return this.segments.filter(segment => !segment.disabled);
+        }
+        selectInitialSegment() {
+            if (this.value !== undefined) {
+                return;
+            }
+            const first = this.enabledSegments[0];
+            if (first) {
+                this.value = first.value;
+            }
+        }
+        getNavigationDirection(key) {
+            if (key === Keys.ArrowRight || key === Keys.ArrowDown) {
+                return 1;
+            }
+            if (key === Keys.ArrowLeft || key === Keys.ArrowUp) {
+                return -1;
+            }
+            return undefined;
+        }
+        dispatchValueEvent(type) {
+            this.host.dispatchEvent(new Event(type, { bubbles: true }));
+        }
+        constructor() {
+            __runInitializers(this, _segments_extraInitializers);
+        }
+    };
+    return UiSegmentedControl = _classThis;
+})();
+export { UiSegmentedControl };
+//# sourceMappingURL=ui-segmented-control.js.map

package/dist/segmented-control/ui-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ui-segmented-control.js","sourceRoot":"","sources":["../../src/segmented-control/ui-segmented-control.ts"],"names":[],"mappings":"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","sourcesContent":["import { bindable, BindingMode, children, customElement, INode, resolve } from 'aurelia';\nimport { booleanAttr } from '../base/boolean-attr';\nimport { Keys } from '../base/keys';\nimport { UiSegment } from './ui-segment';\nimport template from './ui-segmented-control.html?raw';\n\n@customElement({ name: 'ui-segmented-control', template })\nexport class UiSegmentedControl {\n  private readonly host = resolve(INode) as HTMLElement;\n\n  @bindable({ mode: BindingMode.twoWay })\n  value: unknown;\n\n  @bindable\n  label: string | undefined;\n\n  @bindable({ set: booleanAttr })\n  disabled: boolean = false;\n\n  @bindable({ set: booleanAttr })\n  readonly: boolean = false;\n\n  @children({\n    query: 'ui-segment',\n    map: (_node, viewModel) => viewModel\n  })\n  segments: UiSegment[] = [];\n  segmentsChanged(): void {\n    this.selectInitialSegment();\n  }\n\n  attached(): void {\n    this.selectInitialSegment();\n  }\n\n  select(segment: UiSegment): void {\n    if (this.disabled || this.readonly || segment.disabled || this.value === segment.value) {\n      return;\n    }\n\n    this.value = segment.value;\n    this.dispatchValueEvent('input');\n    this.dispatchValueEvent('change');\n  }\n\n  onKeyDown(event: KeyboardEvent): void {\n    if (this.disabled || this.readonly) {\n      return;\n    }\n\n    const active = this.segments.find(segment => segment.element === event.target);\n    if (!active) {\n      return;\n    }\n\n    if (event.key === Keys.Space || event.key === Keys.Enter) {\n      event.preventDefault();\n      this.select(active);\n      return;\n    }\n\n    const segments = this.enabledSegments;\n    if (!segments.length) {\n      return;\n    }\n\n    if (event.key === Keys.Home) {\n      event.preventDefault();\n      segments[0].element.focus();\n      return;\n    }\n\n    if (event.key === Keys.End) {\n      event.preventDefault();\n      segments[segments.length - 1].element.focus();\n      return;\n    }\n\n    const direction = this.getNavigationDirection(event.key);\n    if (!direction) {\n      return;\n    }\n\n    event.preventDefault();\n    const index = segments.indexOf(active);\n    segments[(index + direction + segments.length) % segments.length].element.focus();\n  }\n\n  get enabledSegments(): UiSegment[] {\n    return this.segments.filter(segment => !segment.disabled);\n  }\n\n  private selectInitialSegment(): void {\n    if (this.value !== undefined) {\n      return;\n    }\n\n    const first = this.enabledSegments[0];\n    if (first) {\n      this.value = first.value;\n    }\n  }\n\n  private getNavigationDirection(key: string): 1 | -1 | undefined {\n    if (key === Keys.ArrowRight || key === Keys.ArrowDown) {\n      return 1;\n    }\n\n    if (key === Keys.ArrowLeft || key === Keys.ArrowUp) {\n      return -1;\n    }\n\n    return undefined;\n  }\n\n  private dispatchValueEvent(type: 'input' | 'change'): void {\n    this.host.dispatchEvent(new Event(type, { bubbles: true }));\n  }\n}\n"]}

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

@@ -0,0 +1,26 @@
+import { __esDecorate, __runInitializers } from "tslib";
+import { templateCompilerHooks } from 'aurelia';
+let EnhanceUiSelect = (() => {
+    let _classDecorators = [templateCompilerHooks];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    var EnhanceUiSelect = class {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(null) : void 0;
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            EnhanceUiSelect = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        compiling(template) {
+            template.innerHTML = template.innerHTML
+                .replaceAll('<ui-select ', '<label as-element="ui-select" ui-select-element ')
+                .replaceAll('</ui-select>', '</label>');
+        }
+    };
+    return EnhanceUiSelect = _classThis;
+})();
+export { EnhanceUiSelect };
+//# sourceMappingURL=enhance-ui-select.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"enhance-ui-select.js","sourceRoot":"","sources":["../../src/select/enhance-ui-select.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,SAAS,CAAC;IAGnC,eAAe;4BAD3B,qBAAqB;;;;;;;;YACtB,6KAMC;;;YANY,uDAAe;;QAC1B,SAAS,CAAC,QAA2C;YACnD,QAAQ,CAAC,SAAS,GAAG,QAAQ,CAAC,SAAS;iBACpC,UAAU,CAAC,aAAa,EAAE,kDAAkD,CAAC;iBAC7E,UAAU,CAAC,cAAc,EAAE,UAAU,CAAC,CAAC;QAC5C,CAAC;;;;SALU,eAAe","sourcesContent":["import { templateCompilerHooks } from 'aurelia';\n\n@templateCompilerHooks\nexport class EnhanceUiSelect {\n  compiling(template: HTMLElement | HTMLTemplateElement) {\n    template.innerHTML = template.innerHTML\n      .replaceAll('<ui-select ', '<label as-element=\"ui-select\" ui-select-element ')\n      .replaceAll('</ui-select>', '</label>');\n  }\n}\n"]}