@odx/foundation 0.1.0-alpha.13 → 0.1.0-alpha.15

package/dist/src/lib/external/roving-tabindex.js

@@ -0,0 +1,386 @@
+function ensureMethod(value, type, fallback) {
+  if (typeof value === type) {
+    return () => value;
+  } else if (typeof value === "function") {
+    return value;
+  }
+  return fallback;
+}
+class FocusGroupController {
+  constructor(host, { hostDelegatesFocus, direction, elementEnterAction, elements, focusInIndex, isFocusableElement, listenerScope } = {
+    elements: () => []
+  }) {
+    this._currentIndex = -1;
+    this.prevIndex = -1;
+    this._direction = () => "both";
+    this.directionLength = 5;
+    this.hostDelegatesFocus = false;
+    this.elementEnterAction = (_el) => {
+      return;
+    };
+    this._focused = false;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this._focusInIndex = (_elements) => 0;
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    this.isFocusableElement = (_el) => true;
+    this._listenerScope = () => this.host;
+    // When elements are virtualized, the delta between the first element
+    // and the first rendered element.
+    this.offset = 0;
+    this.recentlyConnected = false;
+    this.handleFocusin = (event) => {
+      if (!this.isEventWithinListenerScope(event)) return;
+      const path = event.composedPath();
+      let targetIndex = -1;
+      path.find((el) => {
+        targetIndex = this.elements.indexOf(el);
+        return targetIndex !== -1;
+      });
+      this.prevIndex = this.currentIndex;
+      this.currentIndex = targetIndex > -1 ? targetIndex : this.currentIndex;
+      if (this.isRelatedTargetOrContainAnElement(event)) {
+        this.hostContainsFocus();
+      }
+    };
+    /**
+     * handleClick - Finds the element that was clicked and sets the tabindex to 0
+     * @returns void
+     */
+    this.handleClick = () => {
+      const elements = this.elements;
+      if (!elements.length) return;
+      let focusElement = elements[this.currentIndex];
+      if (this.currentIndex < 0) {
+        return;
+      }
+      if (!focusElement || !this.isFocusableElement(focusElement)) {
+        this.setCurrentIndexCircularly(1);
+        focusElement = elements[this.currentIndex];
+      }
+      if (focusElement && this.isFocusableElement(focusElement)) {
+        elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+        focusElement.setAttribute("tabindex", "0");
+      }
+    };
+    this.handleFocusout = (event) => {
+      if (this.isRelatedTargetOrContainAnElement(event)) {
+        this.hostNoLongerContainsFocus();
+      }
+    };
+    this.handleKeydown = (event) => {
+      if (!this.acceptsEventKey(event.key) || event.defaultPrevented) {
+        return;
+      }
+      let diff = 0;
+      this.prevIndex = this.currentIndex;
+      switch (event.key) {
+        case "ArrowRight":
+          diff += 1;
+          break;
+        case "ArrowDown":
+          diff += this.direction === "grid" ? this.directionLength : 1;
+          break;
+        case "ArrowLeft":
+          diff -= 1;
+          break;
+        case "ArrowUp":
+          diff -= this.direction === "grid" ? this.directionLength : 1;
+          break;
+        case "End":
+          this.currentIndex = 0;
+          diff -= 1;
+          break;
+        case "Home":
+          this.currentIndex = this.elements.length - 1;
+          diff += 1;
+          break;
+      }
+      event.preventDefault();
+      if (this.direction === "grid" && this.currentIndex + diff < 0) {
+        this.currentIndex = 0;
+      } else if (this.direction === "grid" && this.currentIndex + diff > this.elements.length - 1) {
+        this.currentIndex = this.elements.length - 1;
+      } else {
+        this.setCurrentIndexCircularly(diff);
+      }
+      this.elementEnterAction(this.elements[this.currentIndex]);
+      this.focus();
+    };
+    this.mutationObserver = new MutationObserver(() => {
+      this.handleItemMutation();
+    });
+    this.hostDelegatesFocus = hostDelegatesFocus || false;
+    this.host = host;
+    this.host.addController(this);
+    this._elements = elements;
+    this.isFocusableElement = isFocusableElement || this.isFocusableElement;
+    this._direction = ensureMethod(direction, "string", this._direction);
+    this.elementEnterAction = elementEnterAction || this.elementEnterAction;
+    this._focusInIndex = ensureMethod(focusInIndex, "number", this._focusInIndex);
+    this._listenerScope = ensureMethod(listenerScope, "object", this._listenerScope);
+  }
+  get currentIndex() {
+    if (this._currentIndex === -1) {
+      this._currentIndex = this.focusInIndex;
+    }
+    return this._currentIndex - this.offset;
+  }
+  set currentIndex(currentIndex) {
+    this._currentIndex = currentIndex + this.offset;
+  }
+  get direction() {
+    return this._direction();
+  }
+  get elements() {
+    if (!this.cachedElements) {
+      this.cachedElements = this._elements();
+    }
+    return this.cachedElements;
+  }
+  set focused(focused) {
+    if (focused === this.focused) return;
+    this._focused = focused;
+  }
+  get focused() {
+    return this._focused;
+  }
+  get focusInElement() {
+    return this.elements[this.focusInIndex];
+  }
+  get focusInIndex() {
+    return this._focusInIndex(this.elements);
+  }
+  isEventWithinListenerScope(event) {
+    if (this._listenerScope() === this.host) return true;
+    return event.composedPath().includes(this._listenerScope());
+  }
+  /*  In  handleItemMutation() method the first if condition is checking if the element is not focused or if the element's children's length is not decreasing then it means no element has been deleted and we must return.
+        Then we are checking if the deleted element was the focused one before the deletion if so then we need to proceed else we casn return;
+    */
+  handleItemMutation() {
+    if (this._currentIndex == -1 || this.elements.length <= this._elements().length) return;
+    const focusedElement = this.elements[this.currentIndex];
+    this.clearElementCache();
+    if (this.elements.includes(focusedElement)) return;
+    const moveToNextElement = this.currentIndex !== this.elements.length;
+    const diff = moveToNextElement ? 1 : -1;
+    if (moveToNextElement) {
+      this.setCurrentIndexCircularly(-1);
+    }
+    this.setCurrentIndexCircularly(diff);
+    this.focus();
+  }
+  update({ elements } = { elements: () => [] }) {
+    this.unmanage();
+    this._elements = elements;
+    this.clearElementCache();
+    this.manage();
+  }
+  /**
+   * resets the focusedItem to initial item
+   */
+  reset() {
+    const elements = this.elements;
+    if (!elements.length) return;
+    this.setCurrentIndexCircularly(this.focusInIndex - this.currentIndex);
+    let focusElement = elements[this.currentIndex];
+    if (this.currentIndex < 0) {
+      return;
+    }
+    if (!focusElement || !this.isFocusableElement(focusElement)) {
+      this.setCurrentIndexCircularly(1);
+      focusElement = elements[this.currentIndex];
+    }
+    if (focusElement && this.isFocusableElement(focusElement)) {
+      elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+      focusElement.setAttribute("tabindex", "0");
+    }
+  }
+  focusOnItem(item, options) {
+    if (item && this.isFocusableElement(item) && this.elements.indexOf(item)) {
+      const diff = this.elements.indexOf(item) - this.currentIndex;
+      this.setCurrentIndexCircularly(diff);
+      this.elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+    }
+    this.focus(options);
+  }
+  focus(options) {
+    const elements = this.elements;
+    if (!elements.length) return;
+    let focusElement = elements[this.currentIndex];
+    if (!focusElement || !this.isFocusableElement(focusElement)) {
+      this.setCurrentIndexCircularly(1);
+      focusElement = elements[this.currentIndex];
+    }
+    if (focusElement && this.isFocusableElement(focusElement)) {
+      if (!this.hostDelegatesFocus || elements[this.prevIndex] !== focusElement) {
+        elements[this.prevIndex]?.setAttribute("tabindex", "-1");
+      }
+      focusElement.tabIndex = 0;
+      focusElement.focus(options);
+      if (this.hostDelegatesFocus && !this.focused) {
+        this.hostContainsFocus();
+      }
+    }
+  }
+  clearElementCache(offset = 0) {
+    this.mutationObserver.disconnect();
+    delete this.cachedElements;
+    this.offset = offset;
+    requestAnimationFrame(() => {
+      this.elements.forEach((element) => {
+        this.mutationObserver.observe(element, {
+          attributes: true
+        });
+      });
+    });
+  }
+  setCurrentIndexCircularly(diff) {
+    const { length } = this.elements;
+    let steps = length;
+    this.prevIndex = this.currentIndex;
+    let nextIndex = (length + this.currentIndex + diff) % length;
+    while (
+      // don't cycle the elements more than once
+      steps && this.elements[nextIndex] && // @ts-ignore
+      !this.isFocusableElement(this.elements[nextIndex])
+    ) {
+      nextIndex = (length + nextIndex + diff) % length;
+      steps -= 1;
+    }
+    this.currentIndex = nextIndex;
+  }
+  hostContainsFocus() {
+    this.host.addEventListener("focusout", this.handleFocusout);
+    this.host.addEventListener("keydown", this.handleKeydown);
+    this.focused = true;
+  }
+  hostNoLongerContainsFocus() {
+    this.host.addEventListener("focusin", this.handleFocusin);
+    this.host.removeEventListener("focusout", this.handleFocusout);
+    this.host.removeEventListener("keydown", this.handleKeydown);
+    this.focused = false;
+  }
+  isRelatedTargetOrContainAnElement(event) {
+    const relatedTarget = event.relatedTarget;
+    const isRelatedTargetAnElement = this.elements.includes(relatedTarget);
+    const isRelatedTargetContainedWithinElements = this.elements.some((el) => el.contains(relatedTarget));
+    return !(isRelatedTargetAnElement || isRelatedTargetContainedWithinElements);
+  }
+  acceptsEventKey(key) {
+    if (key === "End" || key === "Home") {
+      return true;
+    }
+    switch (this.direction) {
+      case "horizontal":
+        return key === "ArrowLeft" || key === "ArrowRight";
+      case "vertical":
+        return key === "ArrowUp" || key === "ArrowDown";
+      case "both":
+      case "grid":
+        return key.startsWith("Arrow");
+    }
+  }
+  manage() {
+    this.addEventListeners();
+  }
+  unmanage() {
+    this.removeEventListeners();
+  }
+  addEventListeners() {
+    this.host.addEventListener("focusin", this.handleFocusin);
+    this.host.addEventListener("click", this.handleClick);
+  }
+  removeEventListeners() {
+    this.host.removeEventListener("focusin", this.handleFocusin);
+    this.host.removeEventListener("focusout", this.handleFocusout);
+    this.host.removeEventListener("keydown", this.handleKeydown);
+    this.host.removeEventListener("click", this.handleClick);
+  }
+  hostConnected() {
+    this.recentlyConnected = true;
+    this.addEventListeners();
+  }
+  hostDisconnected() {
+    this.mutationObserver.disconnect();
+    this.removeEventListeners();
+  }
+  hostUpdated() {
+    if (this.recentlyConnected) {
+      this.recentlyConnected = false;
+      this.elements.forEach((element) => {
+        this.mutationObserver.observe(element, {
+          attributes: true
+        });
+      });
+    }
+  }
+}
+class RovingTabindexController extends FocusGroupController {
+  constructor() {
+    super(...arguments);
+    this.managed = true;
+    this.manageIndexesAnimationFrame = 0;
+  }
+  set focused(focused) {
+    if (focused === this.focused) return;
+    super.focused = focused;
+    this.manageTabindexes();
+  }
+  get focused() {
+    return super.focused;
+  }
+  clearElementCache(offset = 0) {
+    cancelAnimationFrame(this.manageIndexesAnimationFrame);
+    super.clearElementCache(offset);
+    if (!this.managed) return;
+    this.manageIndexesAnimationFrame = requestAnimationFrame(() => this.manageTabindexes());
+  }
+  manageTabindexes() {
+    if (this.focused && !this.hostDelegatesFocus) {
+      this.updateTabindexes(() => ({ tabIndex: -1 }));
+    } else {
+      this.updateTabindexes((el) => {
+        return {
+          removeTabIndex: el.contains(this.focusInElement) && el !== this.focusInElement,
+          tabIndex: el === this.focusInElement ? 0 : -1
+        };
+      });
+    }
+  }
+  updateTabindexes(getTabIndex) {
+    this.elements.forEach((el) => {
+      const { tabIndex, removeTabIndex } = getTabIndex(el);
+      if (!removeTabIndex) {
+        if (this.focused) {
+          if (el !== this.elements[this.currentIndex]) {
+            el.tabIndex = tabIndex;
+          }
+        } else {
+          el.tabIndex = tabIndex;
+        }
+        return;
+      }
+      const updatable = el;
+      if (updatable.requestUpdate) updatable.requestUpdate();
+    });
+  }
+  manage() {
+    this.managed = true;
+    this.manageTabindexes();
+    super.manage();
+  }
+  unmanage() {
+    this.managed = false;
+    this.updateTabindexes(() => ({ tabIndex: 0 }));
+    super.unmanage();
+  }
+  hostUpdated() {
+    super.hostUpdated();
+    if (!this.host.hasUpdated) {
+      this.manageTabindexes();
+    }
+  }
+}
+
+export { FocusGroupController, RovingTabindexController };

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/checkbox-form-control.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAK1C,8BAAsB,mBAAoB,SAAQ,wBAA0B;;IAC1E,OAAgB,iBAAiB,EAAE,cAAc,CAG/C;IACO,IAAI,EAAE,UAAU,GAAG,kBAAkB,GAAG,eAAe,GAAG,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAQ;IAG/G,OAAO,UAAS;;IAWP,WAAW,IAAI,MAAM,GAAG,IAAI,GAAG,QAAQ,GAAG,IAAI;IAOvD,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,UAAQ,GAAG,IAAI;IASvC,iBAAiB,IAAI,IAAI;IAKzB,oBAAoB,IAAI,IAAI;CAmBtC"}

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

@@ -0,0 +1,77 @@
+import { isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { FormControl } from '../mixins/form-control.js';
+import { getKeyboardEventInfo } from '../utils/keyboard-events.js';
+import { toAriaBooleanAttribute } from '../directives/aria-boolean-attr.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 LINK_SELECTORS = /* @__PURE__ */ new Set(["a", "button", "odx-link"]);
+class CheckboxFormControl extends FormControl(CustomElement) {
+  constructor() {
+    super();
+    this.role = null;
+    this.checked = false;
+    this.#handleClick = ({ target }) => {
+      const { localName } = target;
+      if (LINK_SELECTORS.has(localName)) return;
+      this.toggle(void 0, true);
+    };
+    this.#handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!actions.enter && !actions.space) return;
+      const { localName } = event.target;
+      event.preventDefault();
+      if (event.type === "keydown" || LINK_SELECTORS.has(localName)) return;
+      this.toggle(void 0, true);
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.#handleKeyboardEvent);
+      this.addEventListener("keyup", this.#handleKeyboardEvent);
+    }
+  }
+  static {
+    this.shadowRootOptions = {
+      ...CustomElement.shadowRootOptions,
+      delegatesFocus: false
+    };
+  }
+  toFormValue() {
+    if (this.value) {
+      return this.checked ? this.value : null;
+    }
+    return this.checked ? "on" : null;
+  }
+  toggle(state, emitEvent = false) {
+    const currentState = this.checked;
+    const newState = state ?? !currentState;
+    if (this.disabled || this.readonly || newState === currentState) return;
+    this.checked = newState;
+    if (!emitEvent || !this.emit("change")) return;
+    this.checked = currentState;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "checkbox";
+  }
+  updateAriaAttributes() {
+    super.updateAriaAttributes?.();
+    this.ariaChecked = toAriaBooleanAttribute(this.checked, false);
+  }
+  #handleClick;
+  #handleKeyboardEvent;
+}
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], CheckboxFormControl.prototype, "checked");
+
+export { CheckboxFormControl };

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

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-group-form-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/checkbox-group-form-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAY,MAAM,KAAK,CAAC;AAGpD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;;AAI9D,8BAAsB,wBAAyB,SAAQ,6BAA0D;;IAE/G,OAAO,CAAC,QAAQ,CAAiB;IAEjC,SAAS,KAAK,WAAW,IAAI,wBAAwB,EAAE,CAEtD;IAED,IAAI,QAAQ,IAAI,mBAAmB,EAAE,CAEpC;IAED,IAAI,aAAa,IAAI,mBAAmB,EAAE,CAEzC;IAGQ,KAAK,EAAE,MAAM,EAAE,CAAM;;IASrB,WAAW,IAAI,QAAQ;IAQhC,SAAS,CAAC,eAAe,IAAI,OAAO;IAIpC,SAAS,CAAC,SAAS,CAAC,OAAO,EAAE,OAAO,GAAG,OAAO,IAAI,mBAAmB;cAIlD,OAAO,CAAC,KAAK,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8B7D,SAAS,CAAC,sBAAsB,CAAC,QAAQ,EAAE,CAAC,OAAO,EAAE,mBAAmB,EAAE,KAAK,EAAE,MAAM,KAAK,IAAI;IAIhG,SAAS,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI;CAsBtE"}

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

@@ -0,0 +1,109 @@
+import { isServer } from 'lit';
+import { queryAssignedElements, property } from 'lit/decorators.js';
+import { CheckboxFormControl } from './checkbox-form-control.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;
+};
+const GROUP_CONTROL_SELECTOR = "odx-checkbox-group-control";
+const _CheckboxGroupFormControl = class _CheckboxGroupFormControl extends FormControl(CustomElement) {
+  constructor() {
+    super();
+    this.value = [];
+    this.#handleChangeEvent = (event) => {
+      const { target } = event;
+      if (!this.isControl(target)) return;
+      if (target.checked) {
+        this.updateValue([...this.value, target.value], true);
+        return;
+      }
+      this.updateValue(
+        this.value.filter((value) => value !== target.value),
+        true
+      );
+    };
+    if (!isServer) {
+      this.addEventListener("change", this.#handleChangeEvent);
+    }
+  }
+  get childGroups() {
+    return this.elements.filter((element) => element instanceof _CheckboxGroupFormControl);
+  }
+  get controls() {
+    return this.#findCheckboxControls((element) => !element.hasAttribute(GROUP_CONTROL_SELECTOR)).concat(this.childGroups.flatMap((group) => group.controls));
+  }
+  get groupControls() {
+    return this.#findCheckboxControls((element) => element.hasAttribute(GROUP_CONTROL_SELECTOR));
+  }
+  toFormValue() {
+    const formData = new FormData();
+    this.value.forEach((value, index) => {
+      formData.append(`${this.name}[${index}]`, value);
+    });
+    return formData;
+  }
+  isIndeterminate() {
+    return this.value.length > 0 && this.value.length < this.controls.length;
+  }
+  isControl(element) {
+    return element instanceof CheckboxFormControl;
+  }
+  updated(props) {
+    super.updated(props);
+    if (props.has("value")) {
+      this.updateCheckboxControls((control) => {
+        control.checked = this.value.includes(control.value);
+      });
+      for (const groupControl of this.groupControls) {
+        if (groupControl instanceof CheckboxFormControl && "indeterminate" in groupControl) {
+          groupControl.indeterminate = this.isIndeterminate();
+          groupControl.checked = this.controls.length > 0 && this.value.length === this.controls.length;
+        }
+      }
+    }
+    if (props.has("name")) {
+      this.updateCheckboxControls((control) => {
+        control.name = this.name;
+      });
+    }
+    if (props.has("disabled")) {
+      this.updateCheckboxControls((control) => {
+        control.disabled = this.disabled;
+      });
+    }
+    if (props.has("readonly")) {
+      this.updateCheckboxControls((control) => {
+        control.readonly = this.readonly;
+      });
+    }
+  }
+  updateCheckboxControls(updateFn) {
+    this.controls.forEach(updateFn);
+  }
+  updateValue(value, dispatchEvent) {
+    this.value = value;
+    if (!dispatchEvent) return;
+    this.emit("change");
+  }
+  #handleChangeEvent;
+  #findCheckboxControls(predicate) {
+    return this.elements.filter((element) => this.isControl(element) && predicate(element));
+  }
+};
+__decorateClass([
+  queryAssignedElements({ flatten: true })
+], _CheckboxGroupFormControl.prototype, "elements");
+__decorateClass([
+  property({ type: Array })
+], _CheckboxGroupFormControl.prototype, "value");
+let CheckboxGroupFormControl = _CheckboxGroupFormControl;
+
+export { CheckboxGroupFormControl };

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/index.ts"],"names":[],"mappings":"AAAA,cAAc,yBAAyB,CAAC;AACxC,cAAc,+BAA+B,CAAC;AAC9C,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,uBAAuB,CAAC"}

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

@@ -0,0 +1 @@
+{"version":3,"file":"option-control.d.ts","sourceRoot":"","sources":["../../../../src/lib/facade/option-control.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,gBAAgB,EAAY,MAAM,KAAK,CAAC;AAGtD,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;AAC1C,OAAO,EAAE,aAAa,EAAE,MAAM,WAAW,CAAC;;AAG1C,8BAAsB,aAAc,SAAQ,kBAA4B;;IAC7D,IAAI,EAAE,QAAQ,GAAG,UAAU,GAAG,KAAK,GAAG,KAAK,GAAG,IAAI,CAAQ;IAGnE,QAAQ,UAAS;IAGjB,KAAK,SAAM;IAEX,YAAY,IAAI,MAAM;;IAatB,MAAM,CAAC,KAAK,CAAC,EAAE,OAAO,EAAE,SAAS,UAAQ,GAAG,IAAI;IASvC,iBAAiB,IAAI,IAAI;cAKf,UAAU,CAAC,OAAO,EAAE,gBAAgB,CAAC,IAAI,CAAC,GAAG,IAAI;CAkBrE"}

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

@@ -0,0 +1,70 @@
+import { isServer } from 'lit';
+import { property } from 'lit/decorators.js';
+import { CanBeDisabled } from '../mixins/can-be-disabled.js';
+import { CustomElement } from '../models/custom-element.js';
+import { getKeyboardEventInfo } from '../utils/keyboard-events.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();
+    this.role = null;
+    this.selected = false;
+    this.value = "";
+    this.#handleClick = () => {
+      this.toggle(void 0, true);
+    };
+    this.#handleKeyboardEvent = (event) => {
+      const { actions } = getKeyboardEventInfo(event);
+      if (!actions.enter && !actions.space) return;
+      event.preventDefault();
+      if (event.type === "keydown") return;
+      this.toggle(void 0, true);
+    };
+    if (!isServer) {
+      this.addEventListener("click", this.#handleClick);
+      this.addEventListener("keydown", this.#handleKeyboardEvent);
+      this.addEventListener("keyup", this.#handleKeyboardEvent);
+    }
+  }
+  getTextLabel() {
+    return this.textContent?.trim() ?? "";
+  }
+  toggle(state, emitEvent = false) {
+    const currentState = this.selected;
+    const newState = state ?? !this.selected;
+    if (this.disabled || newState === this.selected) return;
+    this.selected = newState;
+    if (!emitEvent || !this.emit("change")) return;
+    this.selected = currentState;
+  }
+  connectedCallback() {
+    super.connectedCallback?.();
+    this.role ||= "option";
+  }
+  willUpdate(changes) {
+    super.willUpdate?.(changes);
+    if (changes.has("selected")) {
+      this.ariaSelected = toAriaBooleanAttribute(this.selected, false);
+    }
+  }
+  #handleClick;
+  #handleKeyboardEvent;
+}
+__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.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"}