@daikin-oss/design-system-web-components 2.0.0 → 2.1.0-next.2

package/dist/cjs-dev/controllers/click-outside.cjs

@@ -1,31 +1,61 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lit = require("lit");
-const controllerDirective = require("./helpers/controller-directive.cjs");
-const clickOutsideDirective = controllerDirective.createControllerDirective(
-  (element, callback) => {
-    const listener = (event) => {
-      if (!event.target || element.contains(event.target)) {
-        return;
-      }
-      callback.call(element, event);
-    };
-    setTimeout(() => {
-      window.addEventListener("click", listener);
-    }, 0);
-    return () => {
-      window.removeEventListener("click", listener);
-    };
-  }
-);
-class ClickOutsideController {
-  constructor(_host, _callback) {
-    this._host = _host;
-    this._callback = _callback;
-    _host.addController(this);
-  }
-  directive(enabled = true) {
-    return enabled ? clickOutsideDirective(this._host, this._callback) : lit.nothing;
-  }
-}
+const require_controller_directive = require("./helpers/controller-directive.cjs");
+let lit = require("lit");
+//#region src/controllers/click-outside.ts
+/**
+* An async directive that listens for pointer presses outside an element.
+* This directive takes the target HTMLElement and a callback function as arguments.
+* When the directive is connected to the DOM, an event listener is registered, and when it is disconnected from or removed from the DOM, the event listener will be unregistered.
+* Also, when the directive arguments are updated, the event listener is re-registered.
+*/
+var clickOutsideDirective = require_controller_directive.createControllerDirective((element, callback) => {
+	const listener = (event) => {
+		if (!event.target || element.contains(event.target)) return;
+		callback.call(element, event);
+	};
+	window.addEventListener("pointerdown", listener, true);
+	return () => {
+		window.removeEventListener("pointerdown", listener, true);
+	};
+});
+/**
+* A reactive controller that provides a directive that listens for clicks outside the host element.
+* This provides a declarative way to listen for outside clicks.
+* Create an instance of `ClickOutsideController` in the constructor or in a class field, and call `instance.directive()` inside a html template.
+*
+* @example
+*
+* ```ts
+* class MyComponent extends DDSElement {
+*   private _clickOutsideController = new ClickOutsideController(
+*     this,
+*     this._onClickOutside
+*   );
+*
+*   private _onClickOutside(event: PointerEvent): void {
+*     console.debug("Pointer outside", event);
+*     this.open = false;
+*   }
+*
+*   override render() {
+*     return html`<div ?hidden=${!open}>
+*       ${
+*         // Listen to click outside only when `this.open` is `true`.
+*         this._clickOutsideController.directive(this.open)
+*       }
+*     </div>`;
+*   }
+* }
+* ```
+*/
+var ClickOutsideController = class {
+	constructor(_host, _callback) {
+		this._host = _host;
+		this._callback = _callback;
+		_host.addController(this);
+	}
+	directive(enabled = true) {
+		return enabled ? clickOutsideDirective(this._host, this._callback) : lit.nothing;
+	}
+};
+//#endregion
 exports.ClickOutsideController = ClickOutsideController;

package/dist/cjs-dev/controllers/click-outside.d.cts

@@ -13,8 +13,8 @@ import { ReactiveControllerHost } from 'lit';
  *     this._onClickOutside
  *   );
  *
- *   private _onClickOutside(event: MouseEvent): void {
- *     console.debug("Click Outside", event);
+ *   private _onClickOutside(event: PointerEvent): void {
+ *     console.debug("Pointer outside", event);
  *     this.open = false;
  *   }
  *
@@ -32,6 +32,6 @@ import { ReactiveControllerHost } from 'lit';
 export declare class ClickOutsideController<T extends ReactiveControllerHost & HTMLElement> {
     private readonly _host;
     private readonly _callback;
-    constructor(_host: T, _callback: (this: T, event: MouseEvent) => void);
+    constructor(_host: T, _callback: (this: T, event: PointerEvent) => void);
     directive(enabled?: boolean): import('lit-html/directive.js').DirectiveResult<import('lit-html/directive.js').DirectiveClass>;
 }

package/dist/cjs-dev/controllers/custom-readonly.cjs

@@ -1,59 +1,53 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-class CustomReadonlyController {
-  constructor(host, _options) {
-    this._options = _options;
-    this._target = null;
-    this._preventInteraction = (event) => {
-      if (!this._isReadonlyActive()) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    this._handleKeydown = (event) => {
-      if (!this._isReadonlyActive() || !this._blockedKeys.has(event.key)) {
-        return;
-      }
-      event.preventDefault();
-      event.stopPropagation();
-    };
-    host.addController(this);
-    this._blockedKeys = new Set(_options.blockedKeys ?? []);
-  }
-  _isReadonlyActive() {
-    return this._options.isReadonly() && !(this._options.isDisabled ? this._options.isDisabled() : false);
-  }
-  _detachFromTarget(target) {
-    target.removeEventListener("pointerdown", this._preventInteraction);
-    target.removeEventListener("keydown", this._handleKeydown);
-    target.removeEventListener("wheel", this._preventInteraction);
-  }
-  _attachToTarget(target) {
-    target.addEventListener("pointerdown", this._preventInteraction);
-    target.addEventListener("keydown", this._handleKeydown);
-    target.addEventListener("wheel", this._preventInteraction, {
-      passive: false
-    });
-  }
-  setTarget(target) {
-    const previous = this._target;
-    if (previous && previous !== target) {
-      this._detachFromTarget(previous);
-    }
-    this._target = target;
-    if (!target) {
-      return;
-    }
-    if (previous !== target) {
-      this._attachToTarget(target);
-    }
-  }
-  hostDisconnected() {
-    if (this._target) {
-      this._detachFromTarget(this._target);
-      this._target = null;
-    }
-  }
-}
+//#region src/controllers/custom-readonly.ts
+/**
+* Adds a readonly fallback for controls that do not support native readonly semantics.
+*
+* This controller blocks interaction events (pointerdown, keydown, wheel)
+* to prevent the user from changing the value.
+*/
+var CustomReadonlyController = class {
+	constructor(host, _options) {
+		this._options = _options;
+		this._target = null;
+		this._preventInteraction = (event) => {
+			if (!this._isReadonlyActive()) return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		this._handleKeydown = (event) => {
+			if (!this._isReadonlyActive() || !this._blockedKeys.has(event.key)) return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		host.addController(this);
+		this._blockedKeys = new Set(_options.blockedKeys ?? []);
+	}
+	_isReadonlyActive() {
+		return this._options.isReadonly() && !(this._options.isDisabled ? this._options.isDisabled() : false);
+	}
+	_detachFromTarget(target) {
+		target.removeEventListener("pointerdown", this._preventInteraction);
+		target.removeEventListener("keydown", this._handleKeydown);
+		target.removeEventListener("wheel", this._preventInteraction);
+	}
+	_attachToTarget(target) {
+		target.addEventListener("pointerdown", this._preventInteraction);
+		target.addEventListener("keydown", this._handleKeydown);
+		target.addEventListener("wheel", this._preventInteraction, { passive: false });
+	}
+	setTarget(target) {
+		const previous = this._target;
+		if (previous && previous !== target) this._detachFromTarget(previous);
+		this._target = target;
+		if (!target) return;
+		if (previous !== target) this._attachToTarget(target);
+	}
+	hostDisconnected() {
+		if (this._target) {
+			this._detachFromTarget(this._target);
+			this._target = null;
+		}
+	}
+};
+//#endregion
 exports.CustomReadonlyController = CustomReadonlyController;

package/dist/cjs-dev/controllers/floating-ui-auto-update.cjs

@@ -1,106 +1,79 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const dom = require("@floating-ui/dom");
-const lit = require("lit");
-const ref_js = require("lit/directives/ref.js");
-const controllerDirective = require("./helpers/controller-directive.cjs");
-const floatingUIAutoUpdateDirective = controllerDirective.createControllerDirective(
-  (referenceElement, floatingElement, options, _isOptionsUpdated, triggerContext) => {
-    const cleanupAutoUpdate = dom.autoUpdate(
-      referenceElement,
-      floatingElement,
-      () => {
-        dom.computePosition(referenceElement, floatingElement, options).then(({ x, y }) => {
-          const isFirst = !floatingElement.hasAttribute(
-            "data-floating-ready"
-          );
-          floatingElement.style.setProperty("--floating-x", `${x}px`);
-          floatingElement.style.setProperty("--floating-y", `${y}px`);
-          floatingElement.setAttribute("data-floating-ready", "");
-          if (isFirst) {
-            const event = new CustomEvent("floating-ready", {
-              detail: triggerContext
-            });
-            floatingElement.dispatchEvent(event);
-          }
-        }).catch((error) => {
-          {
-            console.error(
-              "Failed to compute floating position for",
-              referenceElement,
-              error
-            );
-          }
-        });
-      }
-    );
-    return () => {
-      cleanupAutoUpdate();
-      floatingElement.removeAttribute("data-floating-ready");
-    };
-  },
-  (current, previous) => {
-    var _a;
-    return (
-      // Check if the reference element is changed
-      current[0] !== previous[0] || // Check if the floating element is changed
-      current[1] !== previous[1] || // Check if the options is changed.
-      // If option comparison function (current[3]) is provided, use it to compare options. Otherwise, use `!==` to compare options.
-      (((_a = current[3]) == null ? void 0 : _a.call(current, current[2], previous[2])) ?? current[2] !== previous[2]) || // Check if the trigger context is changed
-      current[4] !== previous[4]
-    );
-  }
-);
-class FloatingUIAutoUpdateController {
-  constructor(_host, _isOptionsUpdated) {
-    this._host = _host;
-    this._isOptionsUpdated = _isOptionsUpdated;
-    this._triggerContext = {};
-    this._refCallbackFloating = (element) => {
-      this._floatingElement = element;
-      this._host.requestUpdate();
-    };
-    this._refCallbackReference = (element) => {
-      this._referenceElement = element;
-      this._host.requestUpdate();
-    };
-    _host.addController(this);
-  }
-  /**
-   * Set context information that will be included in the floating-ready event
-   */
-  setTriggerContext(context) {
-    this._triggerContext = { ...context };
-  }
-  /**
-   * Clear the trigger context
-   */
-  clearTriggerContext() {
-    this._triggerContext = {};
-  }
-  get floatingElement() {
-    return this._floatingElement;
-  }
-  get referenceElement() {
-    return this._referenceElement;
-  }
-  refFloating() {
-    return ref_js.ref(this._refCallbackFloating);
-  }
-  refReference() {
-    return ref_js.ref(this._refCallbackReference);
-  }
-  directive(options, enabled = true) {
-    if (!enabled || !this._referenceElement || !this._floatingElement) {
-      return lit.nothing;
-    }
-    return floatingUIAutoUpdateDirective(
-      this._referenceElement,
-      this._floatingElement,
-      options,
-      this._isOptionsUpdated,
-      this._triggerContext
-    );
-  }
-}
+const require_controller_directive = require("./helpers/controller-directive.cjs");
+let lit = require("lit");
+let lit_directives_ref_js = require("lit/directives/ref.js");
+let _floating_ui_dom = require("@floating-ui/dom");
+//#region src/controllers/floating-ui-auto-update.ts
+var floatingUIAutoUpdateDirective = require_controller_directive.createControllerDirective((referenceElement, floatingElement, options, _isOptionsUpdated, triggerContext) => {
+	const cleanupAutoUpdate = (0, _floating_ui_dom.autoUpdate)(referenceElement, floatingElement, () => {
+		(0, _floating_ui_dom.computePosition)(referenceElement, floatingElement, options).then(({ x, y }) => {
+			const isFirst = !floatingElement.hasAttribute("data-floating-ready");
+			floatingElement.style.setProperty("--floating-x", `${x}px`);
+			floatingElement.style.setProperty("--floating-y", `${y}px`);
+			floatingElement.setAttribute("data-floating-ready", "");
+			if (isFirst) {
+				const event = new CustomEvent("floating-ready", { detail: triggerContext });
+				floatingElement.dispatchEvent(event);
+			}
+		}).catch((error) => {
+			console.error("Failed to compute floating position for", referenceElement, error);
+		});
+	});
+	return () => {
+		cleanupAutoUpdate();
+		floatingElement.removeAttribute("data-floating-ready");
+	};
+}, (current, previous) => current[0] !== previous[0] || current[1] !== previous[1] || (current[3]?.(current[2], previous[2]) ?? current[2] !== previous[2]) || current[4] !== previous[4]);
+/**
+* A reactive controller that provides a directive that calls `autoUpdate` and `computePosition` of Floating UI library.
+* This provides a declarative way to update floating position automatically.
+*
+* 1. Create an instance of `FloatingUIAutoUpdateController` in the constructor or in a class field.
+* 2. Attach `instance.refFloating()` and `instance.refReference()` to appropriate elements.
+* 3. Call `instance.directive()` inside a html template.
+*/
+var FloatingUIAutoUpdateController = class {
+	constructor(_host, _isOptionsUpdated) {
+		this._host = _host;
+		this._isOptionsUpdated = _isOptionsUpdated;
+		this._triggerContext = {};
+		this._refCallbackFloating = (element) => {
+			this._floatingElement = element;
+			this._host.requestUpdate();
+		};
+		this._refCallbackReference = (element) => {
+			this._referenceElement = element;
+			this._host.requestUpdate();
+		};
+		_host.addController(this);
+	}
+	/**
+	* Set context information that will be included in the floating-ready event
+	*/
+	setTriggerContext(context) {
+		this._triggerContext = { ...context };
+	}
+	/**
+	* Clear the trigger context
+	*/
+	clearTriggerContext() {
+		this._triggerContext = {};
+	}
+	get floatingElement() {
+		return this._floatingElement;
+	}
+	get referenceElement() {
+		return this._referenceElement;
+	}
+	refFloating() {
+		return (0, lit_directives_ref_js.ref)(this._refCallbackFloating);
+	}
+	refReference() {
+		return (0, lit_directives_ref_js.ref)(this._refCallbackReference);
+	}
+	directive(options, enabled = true) {
+		if (!enabled || !this._referenceElement || !this._floatingElement) return lit.nothing;
+		return floatingUIAutoUpdateDirective(this._referenceElement, this._floatingElement, options, this._isOptionsUpdated, this._triggerContext);
+	}
+};
+//#endregion
 exports.FloatingUIAutoUpdateController = FloatingUIAutoUpdateController;

package/dist/cjs-dev/controllers/focus-trap.cjs

@@ -1,58 +1,40 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const focusTrap = require("focus-trap");
-const lit = require("lit");
-const ref_js = require("lit/directives/ref.js");
-const controllerDirective = require("./helpers/controller-directive.cjs");
-const focusTrapDirective = controllerDirective.createControllerDirective(
-  (container, persistent, enableOutsideClickDeactivation, onDeactivate) => {
-    const trap = focusTrap.createFocusTrap(container, {
-      escapeDeactivates: !persistent,
-      fallbackFocus: container,
-      preventScroll: true,
-      tabbableOptions: {
-        getShadowRoot: (node) => node.shadowRoot ?? void 0
-      },
-      // When the consumer handles outside clicks itself (e.g. via a backdrop
-      // click handler), disable focus-trap's own outside-click detection.
-      // On iOS Safari, focus-trap's pointerdown listener calls deactivate()
-      // which moves focus before the synthesized `click` fires, causing the
-      // browser to redirect the tap away from the backdrop element.
-      clickOutsideDeactivates: !persistent && enableOutsideClickDeactivation,
-      // Prevent focus-trap from calling event.preventDefault() on any outside
-      // click when the consumer is responsible for closing.
-      ...enableOutsideClickDeactivation ? {} : { allowOutsideClick: () => true },
-      onDeactivate
-    });
-    trap.activate();
-    return () => {
-      trap.deactivate();
-    };
-  }
-);
-class FocusTrapController {
-  constructor(_host, _onDeactivate) {
-    this._host = _host;
-    this._onDeactivate = _onDeactivate;
-    this._refCallbackContainer = (element) => {
-      this._container = element;
-      this._host.requestUpdate();
-    };
-    _host.addController(this);
-  }
-  refContainer() {
-    return ref_js.ref(this._refCallbackContainer);
-  }
-  directive(open = true, persistent = false, enableOutsideClickDeactivation = true) {
-    if (!open || !this._container) {
-      return lit.nothing;
-    }
-    return focusTrapDirective(
-      this._container,
-      persistent,
-      enableOutsideClickDeactivation,
-      this._onDeactivate
-    );
-  }
-}
+const require_controller_directive = require("./helpers/controller-directive.cjs");
+let lit = require("lit");
+let lit_directives_ref_js = require("lit/directives/ref.js");
+let focus_trap = require("focus-trap");
+//#region src/controllers/focus-trap.ts
+var focusTrapDirective = require_controller_directive.createControllerDirective((container, persistent, enableOutsideClickDeactivation, onDeactivate) => {
+	const trap = (0, focus_trap.createFocusTrap)(container, {
+		escapeDeactivates: !persistent,
+		fallbackFocus: container,
+		preventScroll: true,
+		tabbableOptions: { getShadowRoot: (node) => node.shadowRoot ?? void 0 },
+		clickOutsideDeactivates: !persistent && enableOutsideClickDeactivation,
+		...enableOutsideClickDeactivation ? {} : { allowOutsideClick: () => true },
+		onDeactivate
+	});
+	trap.activate();
+	return () => {
+		trap.deactivate();
+	};
+});
+var FocusTrapController = class {
+	constructor(_host, _onDeactivate) {
+		this._host = _host;
+		this._onDeactivate = _onDeactivate;
+		this._refCallbackContainer = (element) => {
+			this._container = element;
+			this._host.requestUpdate();
+		};
+		_host.addController(this);
+	}
+	refContainer() {
+		return (0, lit_directives_ref_js.ref)(this._refCallbackContainer);
+	}
+	directive(open = true, persistent = false, enableOutsideClickDeactivation = true) {
+		if (!open || !this._container) return lit.nothing;
+		return focusTrapDirective(this._container, persistent, enableOutsideClickDeactivation, this._onDeactivate);
+	}
+};
+//#endregion
 exports.FocusTrapController = FocusTrapController;

package/dist/cjs-dev/controllers/helpers/controller-directive.cjs

@@ -1,50 +1,51 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const lit = require("lit");
-const asyncDirective_js = require("lit/async-directive.js");
+let lit = require("lit");
+let lit_async_directive_js = require("lit/async-directive.js");
+//#region src/controllers/helpers/controller-directive.ts
 function argsChanged(current, previous) {
-  return current.length !== previous.length || current.some((value, index) => !Object.is(value, previous[index]));
+	return current.length !== previous.length || current.some((value, index) => !Object.is(value, previous[index]));
 }
+/**
+* Creates an asynchronous directive that calls the user-specified startup and cleanup functions in accordance with the lifecycle and render argument changes.
+* Typically, there is no need to expose this directive directly to users. Instead, please provide a method that wraps the directive in a [Reactive Controller](https://lit.dev/docs/composition/controllers/).
+* See [click-outside.ts](../click-outside.ts) for an example of actual use.
+* @param start A startup function that is called when the directive is rendered. It must return a cleanup function.
+* @param shouldRenew A function that determines whether it is necessary to restart.
+*                    The arguments of the current directive call and the directive call when it was last started are passed.
+*                    If omitted, a function that compares each element of the array using `Object.is` is used.
+* @returns An async directive.
+*/
 function createControllerDirective(start, shouldRenew = argsChanged) {
-  class ControllerDirective extends asyncDirective_js.AsyncDirective {
-    _activate() {
-      if (!this.isConnected || !this._args || this._cleanup) {
-        return;
-      }
-      this._cleanup = start(...this._args);
-    }
-    _deactivate() {
-      if (!this._cleanup) {
-        return;
-      }
-      this._cleanup();
-      this._cleanup = void 0;
-    }
-    disconnected() {
-      this._deactivate();
-    }
-    reconnected() {
-      this._activate();
-    }
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars -- Required for type inference.
-    render(..._args) {
-      return lit.nothing;
-    }
-    update(_part, args) {
-      if (!this.isConnected) {
-        return lit.nothing;
-      }
-      if (this._args) {
-        if (!shouldRenew(args, this._args)) {
-          return lit.nothing;
-        }
-        this._deactivate();
-      }
-      this._args = args;
-      this._activate();
-      return lit.nothing;
-    }
-  }
-  return asyncDirective_js.directive(ControllerDirective);
+	class ControllerDirective extends lit_async_directive_js.AsyncDirective {
+		_activate() {
+			if (!this.isConnected || !this._args || this._cleanup) return;
+			this._cleanup = start(...this._args);
+		}
+		_deactivate() {
+			if (!this._cleanup) return;
+			this._cleanup();
+			this._cleanup = void 0;
+		}
+		disconnected() {
+			this._deactivate();
+		}
+		reconnected() {
+			this._activate();
+		}
+		render(..._args) {
+			return lit.nothing;
+		}
+		update(_part, args) {
+			if (!this.isConnected) return lit.nothing;
+			if (this._args) {
+				if (!shouldRenew(args, this._args)) return lit.nothing;
+				this._deactivate();
+			}
+			this._args = args;
+			this._activate();
+			return lit.nothing;
+		}
+	}
+	return (0, lit_async_directive_js.directive)(ControllerDirective);
 }
+//#endregion
 exports.createControllerDirective = createControllerDirective;