@odx/foundation 0.1.0-alpha.2 → 0.1.0-alpha.21

package/dist/src/lib/facade/option-control.js

@@ -0,0 +1,49 @@
+import { property } from 'lit/decorators.js';
+import { CanBeDisabled } from '../mixins/can-be-disabled.js';
+import { CustomElement } from '../models/custom-element.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class OptionControl extends CanBeDisabled(CustomElement) {
+  constructor() {
+    super(...arguments);
+    this.role = null;
+    this.selected = false;
+    this.value = "";
+  }
+  getTextLabel() {
+    return this.textContent?.trim() ?? "";
+  }
+  setActive() {
+    this.setAttribute("odx-active", "true");
+  }
+  setInactive() {
+    this.removeAttribute("odx-active");
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "option";
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("selected")) {
+      this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
+    }
+  }
+}
+__decorateClass([
+  property({ type: Boolean })
+], OptionControl.prototype, "selected");
+__decorateClass([
+  property()
+], OptionControl.prototype, "value");
+
+export { OptionControl };

package/dist/src/lib/facade/radio-group-form-control.d.ts

@@ -0,0 +1,22 @@
+import { PropertyValues } from 'lit';
+import { CustomElement } from '../models';
+import { CheckboxFormControl } from './checkbox-form-control';
+declare const RadioGroupFormControl_base: import('../mixins').Constructor<import('../mixins').IsFormControl<string>> & typeof CustomElement;
+export declare abstract class RadioGroupFormControl extends RadioGroupFormControl_base {
+    #private;
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private elements;
+    constructor();
+    getControls(): CheckboxFormControl[];
+    connectedCallback(): void;
+    protected isControl(element: unknown): element is CheckboxFormControl;
+    protected update(changes: PropertyValues<this>): void;
+    protected updateCheckboxControls(updateFn: (control: CheckboxFormControl, index: number) => void): Promise<void>;
+}
+export {};
+//# sourceMappingURL=radio-group-form-control.d.ts.map

package/dist/src/lib/facade/radio-group-form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/radio-group-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,KAAK,CAAC;AAIpD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAE9D,8BAAsB,qBAAsB,SAAQ,0BAA0B;;IAC5E,OAAgB,iBAAiB;;;;;MAG/B;IAGF,OAAO,CAAC,QAAQ,CAAiB;;IAcjC,WAAW,IAAI,mBAAmB,EAAE;IAI3B,iBAAiB,IAAI,IAAI;IAKlC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,mBAAmB;cAIlD,MAAM,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cA6B9C,sBAAsB,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;CASvG"}

package/dist/src/lib/facade/radio-group-form-control.js

@@ -0,0 +1,86 @@
+import { isServer } from 'lit';
+import { queryAssignedElements } from 'lit/decorators.js';
+import { CheckboxFormControl } from './checkbox-form-control.js';
+import { RovingTabindexController } from '../external/roving-tabindex.js';
+import { FormControl } from '../mixins/form-control.js';
+import { CustomElement } from '../models/custom-element.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class RadioGroupFormControl extends FormControl(CustomElement) {
+  static {
+    this.shadowRootOptions = {
+      ...CustomElement.shadowRootOptions,
+      delegatesFocus: true
+    };
+  }
+  constructor() {
+    super();
+    if (!isServer) {
+      this.addEventListener("change", this.#handleChange, { capture: true });
+      new RovingTabindexController(this, {
+        elements: () => this.getControls(),
+        elementEnterAction: (element) => element.click(),
+        direction: "both"
+      });
+    }
+  }
+  getControls() {
+    return this.elements.filter((element) => this.isControl(element));
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "radiogroup";
+  }
+  isControl(element) {
+    return element instanceof CheckboxFormControl;
+  }
+  update(changes) {
+    super.update?.(changes);
+    if (changes.has("value")) {
+      this.updateCheckboxControls((control) => {
+        control.checked = this.value.includes(control.value);
+      });
+    }
+    if (changes.has("name")) {
+      this.updateCheckboxControls((control) => {
+        control.name = this.name;
+      });
+    }
+    if (changes.has("disabled")) {
+      this.updateCheckboxControls((control) => {
+        control.disabled = this.disabled;
+      });
+    }
+    if (changes.has("readonly")) {
+      this.updateCheckboxControls((control) => {
+        control.readonly = this.readonly;
+      });
+    }
+    if (changes.has("required") || changes.has("value")) {
+      const [firstControl] = this.getControls();
+      if (!firstControl) return;
+      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, firstControl);
+    }
+  }
+  async updateCheckboxControls(updateFn) {
+    await 0;
+    this.getControls().forEach(updateFn);
+  }
+  #handleChange = ({ target }) => {
+    if (!this.isControl(target) || this.value === target.value) return;
+    this.value = target.value;
+  };
+}
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], RadioGroupFormControl.prototype, "elements");
+
+export { RadioGroupFormControl };

package/dist/src/lib/facade/select-form-control.d.ts

@@ -0,0 +1,19 @@
+import { PropertyValues } from 'lit';
+import { CustomElement } from '../models';
+import { OptionControl } from './option-control';
+declare const SelectFormControl_base: import('../mixins').Constructor<import('../mixins').IsFormControl<string | string[]>> & typeof CustomElement;
+export declare abstract class SelectFormControl<Option extends OptionControl = OptionControl> extends SelectFormControl_base {
+    #private;
+    protected abstract options: Option[];
+    multiple: boolean;
+    value: string[] | string;
+    get selectedOptions(): MapIterator<Option>;
+    constructor();
+    toggle(option: OptionControl, state?: boolean, emitEvent?: boolean): void;
+    protected updateValue(option: OptionControl): void;
+    protected willUpdate(changes: PropertyValues<this>): void;
+    protected updateSelection(): Promise<void>;
+    protected handleKeyboardEvent: (event: KeyboardEvent) => void;
+}
+export {};
+//# sourceMappingURL=select-form-control.d.ts.map

package/dist/src/lib/facade/select-form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/select-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,KAAK,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAE1C,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;;AAEjD,8BAAsB,iBAAiB,CAAC,MAAM,SAAS,aAAa,GAAG,aAAa,CAAE,SAAQ,sBAE7F;;IAGC,SAAS,CAAC,QAAQ,CAAC,OAAO,EAAE,MAAM,EAAE,CAAC;IAGrC,QAAQ,UAAS;IAGR,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,CAAM;IAEvC,IAAI,eAAe,IAAI,WAAW,CAAC,MAAM,CAAC,CAEzC;;IAWD,MAAM,CAAC,MAAM,EAAE,aAAa,EAAE,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,UAAQ,GAAG,IAAI;IAWvE,SAAS,CAAC,WAAW,CAAC,MAAM,EAAE,aAAa;cASxB,UAAU,CAAC,OAAO,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAkBlD,eAAe,IAAI,OAAO,CAAC,IAAI,CAAC;IAgBhD,SAAS,CAAC,mBAAmB,GAAI,OAAO,aAAa,UAOnD;CAOH"}

package/dist/src/lib/facade/select-form-control.js

@@ -0,0 +1,108 @@
+import { isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { OptionControl } from './option-control.js';
+import { getElementFromEvent } from '../utils/dom.js';
+import { FormControl } from '../mixins/form-control.js';
+import { CustomElement } from '../models/custom-element.js';
+import { getKeyboardEventInfo } from '../utils/keyboard-events.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class SelectFormControl extends FormControl(
+  CustomElement
+) {
+  constructor() {
+    super();
+    this.#selectedOptions = /* @__PURE__ */ new Map();
+    this.multiple = false;
+    this.value = "";
+    this.handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
+      if (!option || !actions.enter && !actions.space) return;
+      event.preventDefault();
+      if (event.type === "keydown") return;
+      this.toggle(option, void 0, true);
+    };
+    this.#handleClick = (event) => {
+      const option = getElementFromEvent(event, (node) => node instanceof OptionControl);
+      if (!option) return;
+      this.toggle(option, void 0, true);
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.handleKeyboardEvent);
+      this.addEventListener("keyup", this.handleKeyboardEvent);
+    }
+  }
+  #selectedOptions;
+  get selectedOptions() {
+    return this.#selectedOptions.values();
+  }
+  toggle(option, state, emitEvent = false) {
+    const currentState = option.selected;
+    const newState = state ?? !option.selected;
+    if (this.disabled || newState === option.selected) return;
+    option.selected = newState;
+    this.updateValue(option);
+    if (!emitEvent || !this.emit("change")) return;
+    option.selected = currentState;
+    this.updateValue(option);
+  }
+  updateValue(option) {
+    if (this.multiple) {
+      const value = typeof this.value === "string" ? [this.value].filter(Boolean) : this.value;
+      this.value = option.selected ? [...value, option.value] : value.filter((value2) => value2 !== option.value);
+    } else {
+      this.value = option.value;
+    }
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("multiple")) {
+      const [selectedOption] = Array.from(this.#selectedOptions.entries());
+      if (selectedOption) {
+        this.updateValue(selectedOption[1]);
+      }
+    }
+    if (changes.has("value")) {
+      this.updateSelection();
+    }
+    if (changes.has("required") || changes.has("value")) {
+      const [selectedOption] = this.#selectedOptions.values();
+      if (!selectedOption?.selected) return;
+      this.setValidity({ valueMissing: this.required && this.value.length === 0 }, selectedOption);
+    }
+  }
+  async updateSelection() {
+    if (this.disabled) return;
+    await 0;
+    for (const option of this.options ?? []) {
+      if (option.disabled) continue;
+      option.selected = this.multiple ? this.value.includes(option.value) : this.value === option.value;
+      option.setInactive();
+      if (option.selected) {
+        this.#selectedOptions.set(option.value, option);
+      } else {
+        this.#selectedOptions.delete(option.value);
+      }
+    }
+    this.requestUpdate();
+  }
+  #handleClick;
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], SelectFormControl.prototype, "multiple");
+__decorateClass([
+  property()
+], SelectFormControl.prototype, "value");
+
+export { SelectFormControl };

package/dist/src/lib/mixins/can-be-disabled.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-disabled.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-disabled.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KA+BjD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-disabled.js

@@ -0,0 +1,49 @@
+import { property } from 'lit/decorators.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const CanBeDisabled = dedupeMixin((superClass) => {
+  class CanBeDisabledElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.#initialTabIndex = null;
+      this.disabled = false;
+    }
+    #initialTabIndex;
+    connectedCallback() {
+      super.connectedCallback?.();
+      this.#initialTabIndex = this.hasAttribute("tabindex") ? this.tabIndex : null;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("disabled")) {
+        this.#handleDisableChange();
+      }
+    }
+    #handleDisableChange() {
+      this.ariaDisabled = toAriaBooleanAttribute(this.disabled);
+      if (this.disabled) {
+        this.tabIndex = -1;
+      } else if (this.#initialTabIndex !== null) {
+        this.tabIndex = this.#initialTabIndex;
+      } else {
+        this.removeAttribute("tabindex");
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], CanBeDisabledElement.prototype, "disabled");
+  return CanBeDisabledElement;
+});
+
+export { CanBeDisabled };

package/dist/src/lib/mixins/can-be-readonly.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-readonly.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-readonly.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAajD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-readonly.js

@@ -0,0 +1,33 @@
+import { property } from 'lit/decorators.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const CanBeReadonly = dedupeMixin((superClass) => {
+  class CanBeReadonlyElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.readonly = false;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("readonly")) {
+        this.ariaReadOnly = toAriaBooleanAttribute(this.readonly);
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], CanBeReadonlyElement.prototype, "readonly");
+  return CanBeReadonlyElement;
+});
+
+export { CanBeReadonly };

package/dist/src/lib/mixins/can-be-required.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-required.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-required.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,aAAa;IAC5B,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,aAAa,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAajD,WAAW,CAAC,aAAa,CAAC,GAAG,CACvE,CAAC"}

package/dist/src/lib/mixins/can-be-required.js

@@ -0,0 +1,33 @@
+import { property } from 'lit/decorators.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const CanBeRequired = dedupeMixin((superClass) => {
+  class CanBeRequiredElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.required = false;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      if (props.has("required")) {
+        this.ariaRequired = toAriaBooleanAttribute(this.required);
+      }
+    }
+  }
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], CanBeRequiredElement.prototype, "required");
+  return CanBeRequiredElement;
+});
+
+export { CanBeRequired };

package/dist/src/lib/mixins/can-be-validated.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"can-be-validated.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/can-be-validated.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,SAAS,EAAE,gBAAgB,CAAC;IAErC,IAAI,QAAQ,IAAI,aAAa,CAAC;IAC9B,IAAI,iBAAiB,IAAI,MAAM,CAAC;IAChC,aAAa,IAAI,OAAO,CAAC;IACzB,cAAc,IAAI,IAAI,CAAC;IACvB,WAAW,CAAC,KAAK,CAAC,EAAE,kBAAkB,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CACrE;AAED,eAAO,MAAM,cAAc,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAgCjD,WAAW,CAAC,cAAc,CAAC,GAAG,CACzE,CAAC"}

package/dist/src/lib/mixins/can-be-validated.js

@@ -0,0 +1,32 @@
+import { dedupeMixin } from './dedupe-mixin.js';
+
+const CanBeValidated = dedupeMixin((superClass) => {
+  class CanBeValidatedElement extends superClass {
+    constructor() {
+      super(...arguments);
+      this.focusable = true;
+    }
+    get validity() {
+      return this.internals.validity;
+    }
+    get validationMessage() {
+      return this.internals.validationMessage;
+    }
+    get willValidate() {
+      return this.internals.willValidate;
+    }
+    checkValidity() {
+      return this.internals.checkValidity();
+    }
+    reportValidity() {
+      this.internals.reportValidity();
+    }
+    setValidity(flags, target = this) {
+      const errorKey = Object.keys(flags ?? {}).find((key) => flags?.[key] === true);
+      this.internals.setValidity(flags, errorKey ?? "unknown error", target);
+    }
+  }
+  return CanBeValidatedElement;
+});
+
+export { CanBeValidated };

package/dist/src/lib/mixins/dedupe-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dedupe-mixin.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/dedupe-mixin.ts"],"names":[],"mappings":"AAGA,MAAM,CAAC,OAAO,MAAM,WAAW,CAAC,CAAC,GAAG,GAAG,IAAI,KAAK,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,CAAC,CAAC;AAcrE,wBAAgB,WAAW,CAAC,CAAC,SAAS,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG,CAAC,KAAK,GAAG,EAAE,KAAK,EAAE,CAAC,GAAG,CAAC,CAS/E"}

package/dist/src/lib/mixins/dedupe-mixin.js

@@ -0,0 +1,23 @@
+const appliedClassMixins = /* @__PURE__ */ new WeakMap();
+function wasMixinPreviouslyApplied(mixin, superClass) {
+  let klass = superClass;
+  while (klass) {
+    if (appliedClassMixins.get(klass) === mixin) {
+      return true;
+    }
+    klass = Object.getPrototypeOf(klass);
+  }
+  return false;
+}
+function dedupeMixin(mixin) {
+  return (superClass) => {
+    if (wasMixinPreviouslyApplied(mixin, superClass)) {
+      return superClass;
+    }
+    const mixedClass = mixin(superClass);
+    appliedClassMixins.set(mixedClass, mixin);
+    return mixedClass;
+  };
+}
+
+export { dedupeMixin };

package/dist/{lib → src/lib}/mixins/form-control.d.ts

@@ -12,6 +12,7 @@ export interface IsFormControl<V extends ValueType = string> extends CanBeDisabl
     name: string;
     value: V;
     toFormValue(): string | File | FormData | null;
+    updateAriaAttributes?(): void;
 }
 export declare const FormControl: <T extends Constructor<CustomElement>, V extends ValueType = string>(superClass: T) => Constructor<IsFormControl<V>> & T;
 export {};

package/dist/src/lib/mixins/form-control.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/form-control.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AACpD,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,KAAK,SAAS,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,EAAE,GAAG,MAAM,EAAE,GAAG,OAAO,EAAE,CAAC;AAE7E,MAAM,WAAW,aAAa,CAAC,CAAC,SAAS,SAAS,GAAG,MAAM,CAAE,SAAQ,aAAa,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc;IAC9H,IAAI,EAAE,eAAe,GAAG,IAAI,CAAC;IAC7B,IAAI,EAAE,MAAM,CAAC;IACb,MAAM,EAAE,cAAc,CAAC;IACvB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,CAAC,CAAC;IACT,WAAW,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI,CAAC;IAC/C,oBAAoB,CAAC,IAAI,IAAI,CAAC;CAC/B;AAED,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,EAAE,CAAC,SAAS,SAAS,uBAAuB,CAAC,KA2C/E,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,GAAG,CACxE,CAAC"}

package/dist/src/lib/mixins/form-control.js

@@ -0,0 +1,61 @@
+import { property } from 'lit/decorators.js';
+import { CanBeDisabled } from './can-be-disabled.js';
+import { CanBeReadonly } from './can-be-readonly.js';
+import { CanBeRequired } from './can-be-required.js';
+import { CanBeValidated } from './can-be-validated.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { CustomElement } from '../models/custom-element.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const FormControl = dedupeMixin((superClass) => {
+  class FormControlElement extends CanBeValidated(CanBeRequired(CanBeReadonly(CanBeDisabled(superClass)))) {
+    constructor(...args) {
+      super(...args);
+      this.name = "";
+      this.value = "";
+      this.internals = this.attachInternals();
+    }
+    static {
+      this.formAssociated = true;
+    }
+    static {
+      this.shadowRootOptions = {
+        ...CustomElement.shadowRootOptions,
+        delegatesFocus: true
+      };
+    }
+    get form() {
+      return this.internals.form;
+    }
+    toFormValue() {
+      return this.value;
+    }
+    willUpdate(props) {
+      super.willUpdate?.(props);
+      this.updateAriaAttributes?.();
+    }
+    updated(props) {
+      super.updated(props);
+      if (props.has("value")) {
+        this.internals.setFormValue(this.toFormValue());
+      }
+    }
+  }
+  __decorateClass([
+    property()
+  ], FormControlElement.prototype, "name");
+  __decorateClass([
+    property()
+  ], FormControlElement.prototype, "value");
+  return FormControlElement;
+});
+
+export { FormControl };

package/dist/{lib → src/lib}/mixins/index.d.ts

@@ -5,6 +5,7 @@ export * from './can-be-validated';
 export * from './dedupe-mixin';
 export * from './form-control';
 export * from './is-localized';
+export * from './is-translatable';
 export * from './number-control';
 export * from './with-aria-controls';
 export * from './with-loading-state';

package/dist/src/lib/mixins/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/index.ts"],"names":[],"mappings":"AAAA,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,mBAAmB,CAAC;AAClC,cAAc,oBAAoB,CAAC;AACnC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,sBAAsB,CAAC;AACrC,cAAc,sBAAsB,CAAC"}

package/dist/src/lib/mixins/is-localized.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-localized.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/is-localized.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAA2B,MAAM,mBAAmB,CAAC;AAEzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAKL,UAAU,EACV,UAAU,EACV,YAAY,EACZ,kBAAkB,EAClB,SAAS,EACV,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAE/D,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,MAAM,EAAE,MAAM,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC,CAAC;IAC/D,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,YAAY,EAAE,OAAO,YAAY,CAAC;IAClC,UAAU,EAAE,OAAO,UAAU,CAAC;IAC9B,kBAAkB,EAAE,OAAO,kBAAkB,CAAC;CAC/C;AAED,eAAO,MAAM,WAAW,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAwB5D,WAAW,CAAC,WAAW,CAAC,GAAG,CACxD,CAAC"}

package/dist/src/lib/mixins/is-localized.js

@@ -0,0 +1,41 @@
+import { SignalWatcher, computed } from '@lit-labs/signals';
+import { property } from 'lit/decorators.js';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { getLocale } from '../utils/localization.js';
+import { formatDate, formatNumber, formatList, formatRelativeTime } from '../utils/format.js';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+const IsLocalized = dedupeMixin((superClass) => {
+  class IsLocalizedElement extends SignalWatcher(superClass) {
+    constructor() {
+      super(...arguments);
+      this.locale = computed(() => getLocale(this.lang));
+    }
+    formatDate(input, options) {
+      return formatDate(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatNumber(input, options) {
+      return formatNumber(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatList(input, options) {
+      return formatList(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+    formatRelativeTime(input, options) {
+      return formatRelativeTime(input, { ...options, locale: options?.locale ?? this.locale.get() });
+    }
+  }
+  __decorateClass([
+    property()
+  ], IsLocalizedElement.prototype, "lang");
+  return IsLocalizedElement;
+});
+
+export { IsLocalized };

package/dist/src/lib/mixins/is-translatable.d.ts

@@ -0,0 +1,13 @@
+import { Signal } from '@lit-labs/signals';
+import { CustomElement } from '../models';
+import { Constructor } from './dedupe-mixin';
+import { IsLocalized } from './is-localized';
+export interface IsTranslatable extends IsLocalized {
+    readonly language: Signal.Computed<string>;
+    _getTranslations?(): Record<string, Translation>;
+    _translate(key: string): string;
+}
+type Translation = Record<string, string>;
+export declare const IsTranslatable: <T extends Constructor<CustomElement>>(superClass: T) => Constructor<IsTranslatable> & T;
+export {};
+//# sourceMappingURL=is-translatable.d.ts.map

package/dist/src/lib/mixins/is-translatable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"is-translatable.d.ts","sourceRoot":"","sources":["../../../../src/lib/mixins/is-translatable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,MAAM,EAAY,MAAM,mBAAmB,CAAC;AAC1D,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,KAAK,WAAW,EAAe,MAAM,gBAAgB,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,WAAW,cAAe,SAAQ,WAAW;IACjD,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC;IAC3C,gBAAgB,CAAC,IAAI,MAAM,CAAC,MAAM,EAAE,WAAW,CAAC,CAAC;IACjD,UAAU,CAAC,GAAG,EAAE,MAAM,GAAG,MAAM,CAAC;CACjC;AAED,KAAK,WAAW,GAAG,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;AAE1C,eAAO,MAAM,cAAc,GAAgB,CAAC,SAAS,WAAW,CAAC,aAAa,CAAC,cAAc,CAAC,KAc5D,WAAW,CAAC,cAAc,CAAC,GAAG,CAC9D,CAAC"}

package/dist/src/lib/mixins/is-translatable.js

@@ -0,0 +1,20 @@
+import { computed } from '@lit-labs/signals';
+import { dedupeMixin } from './dedupe-mixin.js';
+import { IsLocalized } from './is-localized.js';
+
+const IsTranslatable = dedupeMixin((superClass) => {
+  class IsTranslatableElement extends IsLocalized(superClass) {
+    constructor() {
+      super(...arguments);
+      this.language = computed(() => this.locale.get().language);
+    }
+    _translate(key) {
+      const translations = this._getTranslations?.() ?? {};
+      const translation = translations[this.language.get()] ?? translations["en"];
+      return translation?.[key] ?? "";
+    }
+  }
+  return IsTranslatableElement;
+});
+
+export { IsTranslatable };