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

package/dist/es-dev/base/dds-element.js

@@ -1,100 +1,105 @@
 import { LitElement } from "lit";
-const globalNameToKeyIndexMap = /* @__PURE__ */ new Map();
+//#region src/base/dds-element.ts
+/**
+* Global map that stores a unique symbol for each property name.
+* This map ensures that the same property name always maps to the same symbol across all component classes.
+* The symbols are used as keys to store the mapping from property names to their backing property keys.
+*
+* Why is this needed?
+* - Multiple component classes may define properties with the same name (e.g., "value").
+* - Each class needs to map that property name to its own unique backing property key.
+* - We use a symbol as an intermediate "index" to store this mapping on the class constructor.
+* - This allows `getBackingProperty()` to retrieve the correct backing key for any property name.
+*/
+var globalNameToKeyIndexMap = /* @__PURE__ */ new Map();
+/**
+* Ensures a unique symbol exists for the given property name.
+* This symbol acts as an "index" to retrieve the backing property key for a property name.
+*
+* @param name - The property name to get or create an index symbol for
+* @returns A unique symbol representing the index for this property name
+*/
 function ensureGlobalKeyIndex(name) {
-  let key = globalNameToKeyIndexMap.get(name);
-  if (!key) {
-    key = Symbol(`__dds_backing_property_${String(name)}`);
-    globalNameToKeyIndexMap.set(name, key);
-  }
-  return key;
+	let key = globalNameToKeyIndexMap.get(name);
+	if (!key) {
+		key = Symbol(`__dds_backing_property_${String(name)}`);
+		globalNameToKeyIndexMap.set(name, key);
+	}
+	return key;
 }
-const _DDSElement = class _DDSElement extends LitElement {
-  /**
-   * Override of LitElement's getPropertyDescriptor to add support for fallback values
-   * and property validation.
-   *
-   * @param name - The property name (e.g., "value", "disabled")
-   * @param key - The backing property key used for internal storage (generated by Lit)
-   * @param options - DDS property declaration options including fallbackValue and isAllowedValue
-   * @returns Property descriptor with enhanced getter/setter logic
-   */
-  static getPropertyDescriptor(name, key, { fallbackValue, isAllowedValue, ...options }) {
-    const keyIndex = ensureGlobalKeyIndex(name);
-    if (this[keyIndex] != null && this[keyIndex] !== key) {
-      throw new Error(
-        `Property name "${String(name)}" is already mapped to a different backing property key.`
-      );
-    }
-    Object.defineProperty(this, keyIndex, {
-      value: key,
-      writable: false,
-      configurable: false,
-      enumerable: false
-    });
-    const orgDescriptor = super.getPropertyDescriptor(name, key, options);
-    if (!orgDescriptor || fallbackValue === void 0 && isAllowedValue == null) {
-      return orgDescriptor;
-    }
-    return {
-      get() {
-        const orgValue = orgDescriptor.get.call(this);
-        const resolvedFallbackValue = typeof fallbackValue === "function" ? fallbackValue(this) : fallbackValue;
-        return orgValue === void 0 ? resolvedFallbackValue : orgValue;
-      },
-      set(value) {
-        const isValid = isAllowedValue == null || value != null && isAllowedValue(value);
-        {
-          if (!isValid) {
-            console.warn(
-              `[DDS] Property "${String(name)}" was set to an invalid or nullish value:`,
-              value,
-              "- replaced with undefined and will fallback to:",
-              fallbackValue
-            );
-          }
-        }
-        orgDescriptor.set.call(
-          this,
-          // Convert a nullish value or an invalid value to `undefined` before setting.
-          // This `undefined` will be replaced with `fallbackValue` in the getter above (if provided).
-          // We cannot use `fallbackValue` here since it prevents reflection when the user tries to set the same value as `fallbackValue` next time.
-          isValid ? value : void 0
-        );
-      },
-      configurable: true,
-      enumerable: true
-    };
-  }
-  /**
-   * Retrieves the backing property value for a given property name.
-   * This allows access to the underlying stored value before any fallback logic is applied.
-   *
-   * Why is this needed?
-   * - The public property getter may return a fallback value when the actual value is undefined.
-   * - Sometimes we need to know if the property was explicitly set or if we're using a fallback.
-   * - This method provides access to the raw backing value stored by Lit.
-   *
-   * @template T - The property key type extending keyof this
-   *
-   * @param name - The property name to retrieve the backing value for
-   * @returns The raw backing property value or undefined if not found
-   */
-  getBackingProperty(name) {
-    const index = globalNameToKeyIndexMap.get(name);
-    if (!index) {
-      throw new Error(
-        `Backing property index for "${String(name)}" not found.`
-      );
-    }
-    const key = this.constructor[index];
-    if (key == null) {
-      throw new Error(`Backing property key for "${String(name)}" not found.`);
-    }
-    return this[key];
-  }
-};
-_DDSElement.version = "2.0.0";
-let DDSElement = _DDSElement;
-export {
-  DDSElement
+/**
+* Base class for all DDS (DAIKIN Design System) components.
+* Extends LitElement with enhanced property handling capabilities including fallback values
+* and property validation.
+*
+* @example
+* ```typescript
+* class MyComponent extends DDSElement {
+*   @property({ reflect: true, fallbackValue: "" })
+*   name!: string;
+* }
+* ```
+*/
+var DDSElement = class extends LitElement {
+	static {
+		this.version = "2.1.0-next.2";
+	}
+	/**
+	* Override of LitElement's getPropertyDescriptor to add support for fallback values
+	* and property validation.
+	*
+	* @param name - The property name (e.g., "value", "disabled")
+	* @param key - The backing property key used for internal storage (generated by Lit)
+	* @param options - DDS property declaration options including fallbackValue and isAllowedValue
+	* @returns Property descriptor with enhanced getter/setter logic
+	*/
+	static getPropertyDescriptor(name, key, { fallbackValue, isAllowedValue, ...options }) {
+		const keyIndex = ensureGlobalKeyIndex(name);
+		if (this[keyIndex] != null && this[keyIndex] !== key) throw new Error(`Property name "${String(name)}" is already mapped to a different backing property key.`);
+		Object.defineProperty(this, keyIndex, {
+			value: key,
+			writable: false,
+			configurable: false,
+			enumerable: false
+		});
+		const orgDescriptor = super.getPropertyDescriptor(name, key, options);
+		if (!orgDescriptor || fallbackValue === void 0 && isAllowedValue == null) return orgDescriptor;
+		return {
+			get() {
+				const orgValue = orgDescriptor.get.call(this);
+				const resolvedFallbackValue = typeof fallbackValue === "function" ? fallbackValue(this) : fallbackValue;
+				return orgValue === void 0 ? resolvedFallbackValue : orgValue;
+			},
+			set(value) {
+				const isValid = isAllowedValue == null || value != null && isAllowedValue(value);
+				if (!isValid) console.warn(`[DDS] Property "${String(name)}" was set to an invalid or nullish value:`, value, "- replaced with undefined and will fallback to:", fallbackValue);
+				orgDescriptor.set.call(this, isValid ? value : void 0);
+			},
+			configurable: true,
+			enumerable: true
+		};
+	}
+	/**
+	* Retrieves the backing property value for a given property name.
+	* This allows access to the underlying stored value before any fallback logic is applied.
+	*
+	* Why is this needed?
+	* - The public property getter may return a fallback value when the actual value is undefined.
+	* - Sometimes we need to know if the property was explicitly set or if we're using a fallback.
+	* - This method provides access to the raw backing value stored by Lit.
+	*
+	* @template T - The property key type extending keyof this
+	*
+	* @param name - The property name to retrieve the backing value for
+	* @returns The raw backing property value or undefined if not found
+	*/
+	getBackingProperty(name) {
+		const index = globalNameToKeyIndexMap.get(name);
+		if (!index) throw new Error(`Backing property index for "${String(name)}" not found.`);
+		const key = this.constructor[index];
+		if (key == null) throw new Error(`Backing property key for "${String(name)}" not found.`);
+		return this[key];
+	}
 };
+//#endregion
+export { DDSElement };

package/dist/es-dev/base/dds-form-element.js

@@ -1,148 +1,126 @@
 import { DDSElement } from "./dds-element.js";
 import { property } from "./dds-property.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;
+import __decorate from "../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.js";
+//#region src/base/dds-form-element.ts
+var DDSFormElement = class extends DDSElement {
+	static {
+		this.formAssociated = true;
+	}
+	constructor() {
+		super();
+		this.value = "";
+		this.internals = this.attachInternals();
+	}
+	/**
+	* Returns the form object associated with the element, or null if none exists.
+	* @private
+	*/
+	get form() {
+		return this.internals ? this.internals.form : null;
+	}
+	/**
+	* Set the element's name and value within the current form.
+	* @private
+	*/
+	setFormValue(value, state) {
+		this.internals?.setFormValue(value, state);
+	}
+	/**
+	* A function that maps to the form control's `reportValidity()` function.
+	* Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+	* @private
+	*/
+	reportValidity() {
+		return this.internals?.reportValidity();
+	}
+	/**
+	* A function that maps to the form control's `checkValidity()` function.
+	* Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+	* @private
+	*/
+	checkValidity() {
+		return this.internals?.checkValidity();
+	}
+	/**
+	* TODO Enhance these functions to bring our components closer to native form components.
+	* @private
+	*/
+	hostConnected() {}
+	/**
+	* TODO Enhance these functions to bring our components closer to native form components.
+	* @private
+	*/
+	hostDisconnected() {}
+	/**
+	* TODO Enhance these functions to bring our components closer to native form components.
+	* @private
+	*/
+	hostUpdated() {}
 };
-const _DDSFormElement = class _DDSFormElement extends DDSElement {
-  constructor() {
-    super();
-    this.value = "";
-    this.internals = this.attachInternals();
-  }
-  /**
-   * Returns the form object associated with the element, or null if none exists.
-   * @private
-   */
-  get form() {
-    return this.internals ? this.internals.form : null;
-  }
-  /**
-   * Set the element's name and value within the current form.
-   * @private
-   */
-  setFormValue(value, state) {
-    var _a;
-    (_a = this.internals) == null ? void 0 : _a.setFormValue(value, state);
-  }
-  /**
-   * A function that maps to the form control's `reportValidity()` function.
-   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
-   * @private
-   */
-  reportValidity() {
-    var _a;
-    return (_a = this.internals) == null ? void 0 : _a.reportValidity();
-  }
-  /**
-   * A function that maps to the form control's `checkValidity()` function.
-   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
-   * @private
-   */
-  checkValidity() {
-    var _a;
-    return (_a = this.internals) == null ? void 0 : _a.checkValidity();
-  }
-  /**
-   * TODO Enhance these functions to bring our components closer to native form components.
-   * @private
-   */
-  hostConnected() {
-  }
-  /**
-   * TODO Enhance these functions to bring our components closer to native form components.
-   * @private
-   */
-  hostDisconnected() {
-  }
-  /**
-   * TODO Enhance these functions to bring our components closer to native form components.
-   * @private
-   */
-  hostUpdated() {
-  }
-};
-_DDSFormElement.formAssociated = true;
-let DDSFormElement = _DDSFormElement;
-__decorateClass([
-  property({ type: String, reflect: true, fallbackValue: "" })
-], DDSFormElement.prototype, "name");
-__decorateClass([
-  property({ type: String })
-], DDSFormElement.prototype, "value");
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    attribute: "form",
-    fallbackValue: ""
-  })
-], DDSFormElement.prototype, "formAttr");
-const _DDSFormSubmitElement = class _DDSFormSubmitElement extends DDSElement {
-  constructor() {
-    super();
-    this.internals = this.attachInternals();
-  }
-  /**
-   * Returns the form object associated with the element, or null if none exists.
-   * @private
-   */
-  get form() {
-    return this.internals ? this.internals.form : null;
-  }
-  /**
-   * A function that maps to the form control's `reportValidity()` function.
-   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
-   * @private
-   */
-  requestSubmit() {
-    var _a, _b;
-    (_b = (_a = this.internals) == null ? void 0 : _a.form) == null ? void 0 : _b.requestSubmit();
-  }
-  /**
-   * A function that maps to the form control's `checkValidity()` function.
-   * Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
-   * @private
-   */
-  reset() {
-    var _a, _b;
-    (_b = (_a = this.internals) == null ? void 0 : _a.form) == null ? void 0 : _b.reset();
-  }
-  /**
-   * TODO Enhance these functions to bring our components closer to native form components.
-   * @private
-   */
-  hostConnected() {
-  }
-  /**
-   * TODO Enhance these functions to bring our components closer to native form components.
-   * @private
-   */
-  hostDisconnected() {
-  }
-  /**
-   * TODO Enhance these functions to bring our components closer to native form components.
-   * @private
-   */
-  hostUpdated() {
-  }
-};
-_DDSFormSubmitElement.formAssociated = true;
-let DDSFormSubmitElement = _DDSFormSubmitElement;
-__decorateClass([
-  property({
-    type: String,
-    reflect: true,
-    attribute: "form",
-    fallbackValue: ""
-  })
-], DDSFormSubmitElement.prototype, "formAttr");
-export {
-  DDSFormElement,
-  DDSFormSubmitElement
+__decorate([property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DDSFormElement.prototype, "name", void 0);
+__decorate([property({ type: String })], DDSFormElement.prototype, "value", void 0);
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "form",
+	fallbackValue: ""
+})], DDSFormElement.prototype, "formAttr", void 0);
+var DDSFormSubmitElement = class extends DDSElement {
+	static {
+		this.formAssociated = true;
+	}
+	constructor() {
+		super();
+		this.internals = this.attachInternals();
+	}
+	/**
+	* Returns the form object associated with the element, or null if none exists.
+	* @private
+	*/
+	get form() {
+		return this.internals ? this.internals.form : null;
+	}
+	/**
+	* A function that maps to the form control's `reportValidity()` function.
+	* Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reportValidity
+	* @private
+	*/
+	requestSubmit() {
+		this.internals?.form?.requestSubmit();
+	}
+	/**
+	* A function that maps to the form control's `checkValidity()` function.
+	* Reference: https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/checkValidity
+	* @private
+	*/
+	reset() {
+		this.internals?.form?.reset();
+	}
+	/**
+	* TODO Enhance these functions to bring our components closer to native form components.
+	* @private
+	*/
+	hostConnected() {}
+	/**
+	* TODO Enhance these functions to bring our components closer to native form components.
+	* @private
+	*/
+	hostDisconnected() {}
+	/**
+	* TODO Enhance these functions to bring our components closer to native form components.
+	* @private
+	*/
+	hostUpdated() {}
 };
+__decorate([property({
+	type: String,
+	reflect: true,
+	attribute: "form",
+	fallbackValue: ""
+})], DDSFormSubmitElement.prototype, "formAttr", void 0);
+//#endregion
+export { DDSFormElement, DDSFormSubmitElement };

package/dist/es-dev/base/dds-property.d.ts

@@ -89,4 +89,4 @@ export declare function property(options?: DDSPropertyDeclaration): PropertyDeco
  * @param values - Array of allowed values
  * @returns Validation function that returns true if the value is in the allowed values array
  */
-export declare function oneOf<T>(values: readonly T[]): (value: unknown) => boolean;
+export declare function oneOf<T>(values: readonly T[]): (value: unknown) => value is T;

package/dist/es-dev/base/dds-property.js

@@ -1,11 +1,51 @@
-import { property as property$1 } from "lit/decorators.js";
-function property(options) {
-  return property$1(options);
+import { property } from "lit/decorators.js";
+//#region src/base/dds-property.ts
+/**
+* Property decorator for DDS components that enhances Lit's `@property` decorator
+* with additional features like fallback values and property validation.
+*
+* This decorator should be used instead of Lit's `@property` for DDS components
+* that need enhanced property handling capabilities.
+*
+* @param options - DDS property declaration options
+* @returns Property decorator function
+*
+* @example
+* ```typescript
+* class MyComponent extends DDSElement {
+*   // Basic property
+*   @property({ type: String })
+*   label = "";
+*
+*   // Property with fallback value
+*   @property({ reflect: true, fallbackValue: "default" })
+*   value!: string;
+*
+*   // Property with validation
+*   @property({
+*     reflect: true,
+*     fallbackValue: 0,
+*     isAllowedValue: (v) => v >= 0
+*   })
+*   count!: number;
+* }
+* ```
+*/
+function property$1(options) {
+	return property(options);
 }
+/**
+* Creates a validation function that checks if a value is one of the allowed values.
+*
+* This helper function is commonly used with the `isAllowedValue` option in property
+* declarations to restrict property values to a predefined set of allowed values.
+*
+* @template T - The type of the allowed values
+* @param values - Array of allowed values
+* @returns Validation function that returns true if the value is in the allowed values array
+*/
 function oneOf(values) {
-  return (value) => values.includes(value);
+	return (value) => values.includes(value);
 }
-export {
-  oneOf,
-  property
-};
+//#endregion
+export { oneOf, property$1 as property };

package/dist/es-dev/base/decorators.js

@@ -1,13 +1,10 @@
 import { defineDDSElement } from "./define.js";
-const ddsElement = (tagName) => (classOrTarget, context) => {
-  if (context) {
-    context.addInitializer(() => {
-      defineDDSElement(classOrTarget, tagName);
-    });
-  } else {
-    defineDDSElement(classOrTarget, tagName);
-  }
-};
-export {
-  ddsElement
+//#region src/base/decorators.ts
+var ddsElement = (tagName) => (classOrTarget, context) => {
+	if (context) context.addInitializer(() => {
+		defineDDSElement(classOrTarget, tagName);
+	});
+	else defineDDSElement(classOrTarget, tagName);
 };
+//#endregion
+export { ddsElement };

package/dist/es-dev/base/define.js

@@ -1,20 +1,15 @@
 import { DDSElement } from "./dds-element.js";
-const currentVersion = DDSElement.version;
+//#region src/base/define.ts
+var currentVersion = DDSElement.version;
 function defineDDSElement(ctor, name) {
-  var _a;
-  const existing = customElements.get(name);
-  if (existing) {
-    const existingVersion = existing.version ?? "unknown version";
-    if (existingVersion !== currentVersion) {
-      console.warn(
-        `<${name}> is already registered but the version does not match. (${existingVersion} vs ${currentVersion})`
-      );
-    }
-    return;
-  }
-  (_a = ctor.registerCSSCustomProperties) == null ? void 0 : _a.call(ctor);
-  customElements.define(name, ctor);
+	const existing = customElements.get(name);
+	if (existing) {
+		const existingVersion = existing.version ?? "unknown version";
+		if (existingVersion !== currentVersion) console.warn(`<${name}> is already registered but the version does not match. (${existingVersion} vs ${currentVersion})`);
+		return;
+	}
+	ctor.registerCSSCustomProperties?.();
+	customElements.define(name, ctor);
 }
-export {
-  defineDDSElement
-};
+//#endregion
+export { defineDDSElement };

package/dist/es-dev/base/index.js

@@ -1,14 +1,6 @@
 import { DDSElement } from "./dds-element.js";
-import { DDSFormElement, DDSFormSubmitElement } from "./dds-form-element.js";
 import { oneOf, property } from "./dds-property.js";
-import { ddsElement } from "./decorators.js";
+import { DDSFormElement, DDSFormSubmitElement } from "./dds-form-element.js";
 import { defineDDSElement } from "./define.js";
-export {
-  DDSElement,
-  DDSFormElement,
-  DDSFormSubmitElement,
-  ddsElement,
-  defineDDSElement,
-  oneOf,
-  property
-};
+import { ddsElement } from "./decorators.js";
+export { DDSElement, DDSFormElement, DDSFormSubmitElement, ddsElement, defineDDSElement, oneOf, property };