@daikin-oss/design-system-web-components 2.0.0 → 2.0.1-next.1

package/dist/es-dev/controllers/custom-readonly.js

@@ -1,59 +1,53 @@
-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;
-    }
-  }
-}
-export {
-  CustomReadonlyController
+//#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
+export { CustomReadonlyController };

package/dist/es-dev/controllers/floating-ui-auto-update.js

@@ -1,106 +1,79 @@
-import { autoUpdate, computePosition } from "@floating-ui/dom";
+import { createControllerDirective } from "./helpers/controller-directive.js";
 import { nothing } from "lit";
 import { ref } from "lit/directives/ref.js";
-import { createControllerDirective } from "./helpers/controller-directive.js";
-const floatingUIAutoUpdateDirective = createControllerDirective(
-  (referenceElement, floatingElement, options, _isOptionsUpdated, triggerContext) => {
-    const cleanupAutoUpdate = autoUpdate(
-      referenceElement,
-      floatingElement,
-      () => {
-        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(this._refCallbackFloating);
-  }
-  refReference() {
-    return ref(this._refCallbackReference);
-  }
-  directive(options, enabled = true) {
-    if (!enabled || !this._referenceElement || !this._floatingElement) {
-      return nothing;
-    }
-    return floatingUIAutoUpdateDirective(
-      this._referenceElement,
-      this._floatingElement,
-      options,
-      this._isOptionsUpdated,
-      this._triggerContext
-    );
-  }
-}
-export {
-  FloatingUIAutoUpdateController
+import { autoUpdate, computePosition } from "@floating-ui/dom";
+//#region src/controllers/floating-ui-auto-update.ts
+var floatingUIAutoUpdateDirective = createControllerDirective((referenceElement, floatingElement, options, _isOptionsUpdated, triggerContext) => {
+	const cleanupAutoUpdate = autoUpdate(referenceElement, floatingElement, () => {
+		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 ref(this._refCallbackFloating);
+	}
+	refReference() {
+		return ref(this._refCallbackReference);
+	}
+	directive(options, enabled = true) {
+		if (!enabled || !this._referenceElement || !this._floatingElement) return nothing;
+		return floatingUIAutoUpdateDirective(this._referenceElement, this._floatingElement, options, this._isOptionsUpdated, this._triggerContext);
+	}
 };
+//#endregion
+export { FloatingUIAutoUpdateController };

package/dist/es-dev/controllers/focus-trap.js

@@ -1,58 +1,40 @@
-import { createFocusTrap } from "focus-trap";
+import { createControllerDirective } from "./helpers/controller-directive.js";
 import { nothing } from "lit";
 import { ref } from "lit/directives/ref.js";
-import { createControllerDirective } from "./helpers/controller-directive.js";
-const focusTrapDirective = createControllerDirective(
-  (container, persistent, enableOutsideClickDeactivation, onDeactivate) => {
-    const trap = 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(this._refCallbackContainer);
-  }
-  directive(open = true, persistent = false, enableOutsideClickDeactivation = true) {
-    if (!open || !this._container) {
-      return nothing;
-    }
-    return focusTrapDirective(
-      this._container,
-      persistent,
-      enableOutsideClickDeactivation,
-      this._onDeactivate
-    );
-  }
-}
-export {
-  FocusTrapController
+import { createFocusTrap } from "focus-trap";
+//#region src/controllers/focus-trap.ts
+var focusTrapDirective = createControllerDirective((container, persistent, enableOutsideClickDeactivation, onDeactivate) => {
+	const 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 ref(this._refCallbackContainer);
+	}
+	directive(open = true, persistent = false, enableOutsideClickDeactivation = true) {
+		if (!open || !this._container) return nothing;
+		return focusTrapDirective(this._container, persistent, enableOutsideClickDeactivation, this._onDeactivate);
+	}
 };
+//#endregion
+export { FocusTrapController };

package/dist/es-dev/controllers/helpers/controller-directive.js

@@ -1,50 +1,51 @@
 import { nothing } from "lit";
-import { directive, AsyncDirective } from "lit/async-directive.js";
+import { AsyncDirective, directive } from "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 {
-    _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 nothing;
-    }
-    update(_part, args) {
-      if (!this.isConnected) {
-        return nothing;
-      }
-      if (this._args) {
-        if (!shouldRenew(args, this._args)) {
-          return nothing;
-        }
-        this._deactivate();
-      }
-      this._args = args;
-      this._activate();
-      return nothing;
-    }
-  }
-  return directive(ControllerDirective);
+	class ControllerDirective extends 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 nothing;
+		}
+		update(_part, args) {
+			if (!this.isConnected) return nothing;
+			if (this._args) {
+				if (!shouldRenew(args, this._args)) return nothing;
+				this._deactivate();
+			}
+			this._args = args;
+			this._activate();
+			return nothing;
+		}
+	}
+	return directive(ControllerDirective);
 }
-export {
-  createControllerDirective
-};
+//#endregion
+export { createControllerDirective };