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

package/dist/cjs-dev/components/text-masked-field/daikin-text-masked-field.cjs

@@ -1,262 +1,100 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const IMask = require("imask");
-const lit = require("lit");
-const decorators_js = require("lit/decorators.js");
-const ifDefined_js = require("lit/directives/if-defined.js");
-const ref_js = require("lit/directives/ref.js");
-require("../../base/dds-element.cjs");
-const ddsFormElement = require("../../base/dds-form-element.cjs");
-const ddsProperty = require("../../base/dds-property.cjs");
-const decorators = require("../../base/decorators.cjs");
-require("../../base/define.cjs");
-const tailwind = require("../../tailwind.css.cjs");
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators2, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators2.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators2[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const cvaInput = classVarianceAuthority.cva(
-  [
-    "flex",
-    "items-center",
-    "w-full",
-    "h-full",
-    "bg-ddt-color-common-background-default",
-    "relative",
-    "rounded-sm",
-    "overflow-hidden",
-    "text-(length:--dds-font-size-400)",
-    "outline-solid",
-    "outline-(--color-border)",
-    "outline-0",
-    "-outline-offset-2",
-    "placeholder:text-ddt-color-common-text-secondary",
-    // Define `--color-border` as a CSS variable that references `--color-state-focus` and `--color-base` in that order.
-    // `--color-base` indicates the color of the border when the element is normal, hovered, or disabled.
-    "[--color-border:var(--color-state-focus,var(--color-base))]",
-    "border",
-    "border-(--color-border)",
-    "enabled:text-ddt-color-common-text-primary",
-    "enabled:data-empty:text-ddt-color-common-text-secondary",
-    "enabled:hover:bg-ddt-color-common-surface-hover",
-    "enabled:active:bg-ddt-color-common-surface-press",
-    "focus-visible:outline-2",
-    "disabled:[--color-base:var(--dds-color-common-disabled)]",
-    "disabled:text-ddt-color-common-disabled",
-    "disabled:bg-ddt-color-common-background-default",
-    "disabled:placeholder:text-ddt-color-common-disabled"
-  ],
-  {
-    variants: {
-      error: {
-        false: [
-          "enabled:[--color-base:var(--dds-color-common-neutral-default)]",
-          "enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
-          "enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
-          "focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
-        ],
-        true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
-      },
-      leftIcon: {
-        false: ["pl-(--dds-padding-40)"],
-        true: ["pl-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
-      },
-      rightIcon: {
-        false: ["pr-(--dds-padding-40)"],
-        true: ["pr-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
-      }
-    }
-  }
-);
-const cvaIcon = classVarianceAuthority.cva(
-  ["flex", "items-center", "absolute", "pointer-events-none"],
-  {
-    variants: {
-      icon: {
-        left: ["left-3"],
-        right: ["right-3"]
-      },
-      disabled: {
-        false: ["text-ddt-color-common-text-primary"],
-        true: ["text-ddt-color-common-disabled"]
-      }
-    }
-  }
-);
-exports.DaikinTextMaskedField = class DaikinTextMaskedField extends ddsFormElement.DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.readonly = false;
-    this.disabled = false;
-    this.required = false;
-    this.error = false;
-    this.minlength = null;
-    this.maxlength = null;
-    this.pattern = null;
-    this.mask = null;
-    this._unmaskedValue = "";
-    this._label = null;
-    this._hasLeftSlot = false;
-    this._hasRightSlot = false;
-    this._inputRef = ref_js.createRef();
-    this._maskInstance = null;
-  }
-  _initializeMask() {
-    if (!this._inputRef.value || !this.mask) {
-      return;
-    }
-    this._destroyMask();
-    const maskOptions = typeof this.mask === "string" ? { mask: this.mask, lazy: false, placeholderChar: "X" } : this.mask;
-    this._maskInstance = IMask(this._inputRef.value, maskOptions);
-    this._maskInstance.on("accept", () => {
-      if (this._maskInstance) {
-        this._unmaskedValue = this._maskInstance.unmaskedValue;
-        this.value = this._maskInstance.value;
-      }
-    });
-  }
-  _destroyMask() {
-    var _a;
-    (_a = this._maskInstance) == null ? void 0 : _a.destroy();
-    this._maskInstance = null;
-  }
-  /**
-   * The unmasked value of the input.
-   */
-  get unmaskedValue() {
-    return this._unmaskedValue;
-  }
-  set unmaskedValue(value) {
-    if (this._maskInstance) {
-      this._maskInstance.unmaskedValue = value;
-      this.value = this._maskInstance.value;
-      this._unmaskedValue = this._maskInstance.unmaskedValue;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback();
-    this._initializeMask();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this._destroyMask();
-  }
-  _handleChange(event) {
-    this.dispatchEvent(new Event("change", event));
-  }
-  _handleSlotChange(event) {
-    const target = event.target;
-    const name = target.name;
-    const hasIcon = !!target.assignedNodes().length;
-    switch (name) {
-      case "left-icon":
-        this._hasLeftSlot = hasIcon;
-        break;
-      case "right-icon":
-        this._hasRightSlot = hasIcon;
-        break;
-    }
-  }
-  _handleInput(event) {
-    this.value = event.target.value;
-  }
-  /**
-   * Focuses on the inner input.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
-  }
-  _createIcon() {
-    return lit.html`<span
-        class=${cvaIcon({
-      icon: "left",
-      disabled: this.disabled
-    })}
-      >
-        <slot
-          name="left-icon"
-          class="icon-size-token"
-          @slotchange=${this._handleSlotChange}
-        ></slot>
-      </span>
-      <span
-        class=${cvaIcon({
-      icon: "right",
-      disabled: this.disabled
-    })}
-      >
-        <slot
-          name="right-icon"
-          class="icon-size-token"
-          @slotchange=${this._handleSlotChange}
-        ></slot>
-      </span>`;
-  }
-  render() {
-    const error = !this.disabled && this.error;
-    const hasLeftSlot = this._hasLeftSlot;
-    const hasRightSlot = this._hasRightSlot;
-    const leftIcon = hasLeftSlot;
-    const rightIcon = hasRightSlot;
-    return lit.html`<input
-        ${ref_js.ref(this._inputRef)}
-        class=${cvaInput({
-      error,
-      leftIcon,
-      rightIcon
-    })}
-        type="text"
-        name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
-        placeholder=${ifDefined_js.ifDefined(this.getBackingProperty("placeholder"))}
-        minlength=${ifDefined_js.ifDefined(this.minlength)}
-        maxlength=${ifDefined_js.ifDefined(this.maxlength)}
-        pattern=${ifDefined_js.ifDefined(this.pattern)}
-        autocomplete=${ifDefined_js.ifDefined(this.getBackingProperty("autocomplete"))}
-        aria-label=${ifDefined_js.ifDefined(this._label)}
-        .value=${this.value}
-        ?data-empty=${!this._unmaskedValue}
-        ?disabled=${this.disabled}
-        ?readonly=${this.readonly}
-        ?required=${this.required}
-        @change=${this._handleChange}
-        @input=${this._handleInput}
-      />
-      ${this._createIcon()}`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("mask")) {
-      this._destroyMask();
-      this._initializeMask();
-    }
-    if (!changedProperties.has("value")) {
-      return;
-    }
-    this.setFormValue(this.value);
-  }
-  /**
-   * This method is used by `daikin-input-group` to reflect it's attributes to this component.
-   * @private
-   */
-  reflectInputGroup(inputGroup) {
-    const isError = !inputGroup.disabled && !!inputGroup.error;
-    this.disabled = !!inputGroup.disabled;
-    this.readonly = !!inputGroup.readonly;
-    this.required = !!inputGroup.required;
-    this.error = isError;
-    this._label = inputGroup.label;
-  }
-};
-exports.DaikinTextMaskedField.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
+const require_runtime = require("../../_virtual/_rolldown/runtime.cjs");
+const require_dds_property = require("../../base/dds-property.cjs");
+const require_decorate = require("../../_virtual/_@oxc-project_runtime@0.148.0/helpers/esm/decorate.cjs");
+const require_dds_form_element = require("../../base/dds-form-element.cjs");
+const require_decorators = require("../../base/decorators.cjs");
+require("../../base/index.cjs");
+const require_tailwind = require("../../tailwind.css.cjs");
+let lit = require("lit");
+let lit_decorators_js = require("lit/decorators.js");
+let class_variance_authority = require("class-variance-authority");
+let lit_directives_ref_js = require("lit/directives/ref.js");
+let lit_directives_if_defined_js = require("lit/directives/if-defined.js");
+let imask = require("imask");
+imask = require_runtime.__toESM(imask, 1);
+//#region src/components/text-masked-field/daikin-text-masked-field.ts
+var cvaInput = (0, class_variance_authority.cva)([
+	"flex",
+	"items-center",
+	"w-full",
+	"h-full",
+	"bg-ddt-color-common-background-default",
+	"relative",
+	"rounded-sm",
+	"overflow-hidden",
+	"text-(length:--dds-font-size-400)",
+	"outline-solid",
+	"outline-(--color-border)",
+	"outline-0",
+	"-outline-offset-2",
+	"placeholder:text-ddt-color-common-text-secondary",
+	"[--color-border:var(--color-state-focus,var(--color-base))]",
+	"border",
+	"border-(--color-border)",
+	"enabled:text-ddt-color-common-text-primary",
+	"enabled:data-empty:text-ddt-color-common-text-secondary",
+	"enabled:hover:bg-ddt-color-common-surface-hover",
+	"enabled:active:bg-ddt-color-common-surface-press",
+	"focus-visible:outline-2",
+	"disabled:[--color-base:var(--dds-color-common-disabled)]",
+	"disabled:text-ddt-color-common-disabled",
+	"disabled:bg-ddt-color-common-background-default",
+	"disabled:placeholder:text-ddt-color-common-disabled"
+], { variants: {
+	error: {
+		false: [
+			"enabled:[--color-base:var(--dds-color-common-neutral-default)]",
+			"enabled:hover:[--color-base:var(--dds-color-common-neutral-hover)]",
+			"enabled:active:[--color-base:var(--dds-color-common-neutral-press)]",
+			"focus-visible:[--color-state-focus:var(--dds-color-common-border-focus)]"
+		],
+		true: ["enabled:[--color-base:var(--dds-color-common-danger-default)]"]
+	},
+	leftIcon: {
+		false: ["pl-(--dds-padding-40)"],
+		true: ["pl-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
+	},
+	rightIcon: {
+		false: ["pr-(--dds-padding-40)"],
+		true: ["pr-[calc((var(--dds-padding-40)*2)+var(--dds-padding-30))]"]
+	}
+} });
+var cvaIcon = (0, class_variance_authority.cva)([
+	"flex",
+	"items-center",
+	"absolute",
+	"pointer-events-none"
+], { variants: {
+	icon: {
+		left: ["left-3"],
+		right: ["right-3"]
+	},
+	disabled: {
+		false: ["text-ddt-color-common-text-primary"],
+		true: ["text-ddt-color-common-disabled"]
+	}
+} });
+var DaikinTextMaskedField = class DaikinTextMaskedField extends require_dds_form_element.DDSFormElement {
+	constructor(..._args) {
+		super(..._args);
+		this.readonly = false;
+		this.disabled = false;
+		this.required = false;
+		this.error = false;
+		this.minlength = null;
+		this.maxlength = null;
+		this.pattern = null;
+		this.mask = null;
+		this._unmaskedValue = "";
+		this._label = null;
+		this._hasLeftSlot = false;
+		this._hasRightSlot = false;
+		this._inputRef = (0, lit_directives_ref_js.createRef)();
+		this._maskInstance = null;
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
 
     :host {
       display: flex;
@@ -295,52 +133,198 @@ exports.DaikinTextMaskedField.styles = lit.css`
       display: none !important;
     }
   `;
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
-], exports.DaikinTextMaskedField.prototype, "placeholder", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextMaskedField.prototype, "readonly", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextMaskedField.prototype, "disabled", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextMaskedField.prototype, "required", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinTextMaskedField.prototype, "error", 2);
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true })
-], exports.DaikinTextMaskedField.prototype, "minlength", 2);
-__decorateClass([
-  ddsProperty.property({ type: Number, reflect: true })
-], exports.DaikinTextMaskedField.prototype, "maxlength", 2);
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true })
-], exports.DaikinTextMaskedField.prototype, "pattern", 2);
-__decorateClass([
-  ddsProperty.property({ attribute: false })
-], exports.DaikinTextMaskedField.prototype, "mask", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    fallbackValue: ""
-  })
-], exports.DaikinTextMaskedField.prototype, "autocomplete", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinTextMaskedField.prototype, "_unmaskedValue", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinTextMaskedField.prototype, "_label", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinTextMaskedField.prototype, "_hasLeftSlot", 2);
-__decorateClass([
-  decorators_js.state()
-], exports.DaikinTextMaskedField.prototype, "_hasRightSlot", 2);
-exports.DaikinTextMaskedField = __decorateClass([
-  decorators.ddsElement("daikin-text-masked-field")
-], exports.DaikinTextMaskedField);
+	}
+	_initializeMask() {
+		if (!this._inputRef.value || !this.mask) return;
+		this._destroyMask();
+		const maskOptions = typeof this.mask === "string" ? {
+			mask: this.mask,
+			lazy: false,
+			placeholderChar: "X"
+		} : this.mask;
+		this._maskInstance = (0, imask.default)(this._inputRef.value, maskOptions);
+		this._maskInstance.on("accept", () => {
+			if (this._maskInstance) {
+				this._unmaskedValue = this._maskInstance.unmaskedValue;
+				this.value = this._maskInstance.value;
+			}
+		});
+	}
+	_destroyMask() {
+		this._maskInstance?.destroy();
+		this._maskInstance = null;
+	}
+	/**
+	* The unmasked value of the input.
+	*/
+	get unmaskedValue() {
+		return this._unmaskedValue;
+	}
+	set unmaskedValue(value) {
+		if (this._maskInstance) {
+			this._maskInstance.unmaskedValue = value;
+			this.value = this._maskInstance.value;
+			this._unmaskedValue = this._maskInstance.unmaskedValue;
+		}
+	}
+	connectedCallback() {
+		super.connectedCallback();
+		this._initializeMask();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		this._destroyMask();
+	}
+	_handleChange(event) {
+		this.dispatchEvent(new Event("change", event));
+	}
+	_handleSlotChange(event) {
+		const target = event.target;
+		const name = target.name;
+		const hasIcon = !!target.assignedNodes().length;
+		switch (name) {
+			case "left-icon":
+				this._hasLeftSlot = hasIcon;
+				break;
+			case "right-icon": this._hasRightSlot = hasIcon;
+		}
+	}
+	_handleInput(event) {
+		this.value = event.target.value;
+	}
+	/**
+	* Focuses on the inner input.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._inputRef.value?.focus(options);
+	}
+	_createIcon() {
+		return lit.html`<span
+        class=${cvaIcon({
+			icon: "left",
+			disabled: this.disabled
+		})}
+      >
+        <slot
+          name="left-icon"
+          class="icon-size-token"
+          @slotchange=${this._handleSlotChange}
+        ></slot>
+      </span>
+      <span
+        class=${cvaIcon({
+			icon: "right",
+			disabled: this.disabled
+		})}
+      >
+        <slot
+          name="right-icon"
+          class="icon-size-token"
+          @slotchange=${this._handleSlotChange}
+        ></slot>
+      </span>`;
+	}
+	render() {
+		const error = !this.disabled && this.error;
+		const hasLeftSlot = this._hasLeftSlot;
+		const hasRightSlot = this._hasRightSlot;
+		const leftIcon = hasLeftSlot;
+		const rightIcon = hasRightSlot;
+		return lit.html`<input
+        ${(0, lit_directives_ref_js.ref)(this._inputRef)}
+        class=${cvaInput({
+			error,
+			leftIcon,
+			rightIcon
+		})}
+        type="text"
+        name=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("name"))}
+        placeholder=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("placeholder"))}
+        minlength=${(0, lit_directives_if_defined_js.ifDefined)(this.minlength)}
+        maxlength=${(0, lit_directives_if_defined_js.ifDefined)(this.maxlength)}
+        pattern=${(0, lit_directives_if_defined_js.ifDefined)(this.pattern)}
+        autocomplete=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("autocomplete"))}
+        aria-label=${(0, lit_directives_if_defined_js.ifDefined)(this._label)}
+        .value=${this.value}
+        ?data-empty=${!this._unmaskedValue}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        @change=${this._handleChange}
+        @input=${this._handleInput}
+      />
+      ${this._createIcon()}`;
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("mask")) {
+			this._destroyMask();
+			this._initializeMask();
+		}
+		if (!changedProperties.has("value")) return;
+		this.setFormValue(this.value);
+	}
+	/**
+	* This method is used by `daikin-input-group` to reflect it's attributes to this component.
+	* @private
+	*/
+	reflectInputGroup(inputGroup) {
+		const isError = !inputGroup.disabled && !!inputGroup.error;
+		this.disabled = !!inputGroup.disabled;
+		this.readonly = !!inputGroup.readonly;
+		this.required = !!inputGroup.required;
+		this.error = isError;
+		this._label = inputGroup.label;
+	}
+};
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTextMaskedField.prototype, "placeholder", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextMaskedField.prototype, "readonly", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextMaskedField.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextMaskedField.prototype, "required", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinTextMaskedField.prototype, "error", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true
+})], DaikinTextMaskedField.prototype, "minlength", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Number,
+	reflect: true
+})], DaikinTextMaskedField.prototype, "maxlength", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true
+})], DaikinTextMaskedField.prototype, "pattern", void 0);
+require_decorate.default([require_dds_property.property({ attribute: false })], DaikinTextMaskedField.prototype, "mask", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinTextMaskedField.prototype, "autocomplete", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinTextMaskedField.prototype, "_unmaskedValue", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinTextMaskedField.prototype, "_label", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinTextMaskedField.prototype, "_hasLeftSlot", void 0);
+require_decorate.default([(0, lit_decorators_js.state)()], DaikinTextMaskedField.prototype, "_hasRightSlot", void 0);
+DaikinTextMaskedField = require_decorate.default([require_decorators.ddsElement("daikin-text-masked-field")], DaikinTextMaskedField);
+//#endregion
+Object.defineProperty(exports, "DaikinTextMaskedField", {
+	enumerable: true,
+	get: function() {
+		return DaikinTextMaskedField;
+	}
+});

package/dist/cjs-dev/components/text-masked-field/index.cjs

@@ -1,7 +1,8 @@
-"use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const daikinTextMaskedField = require("./daikin-text-masked-field.cjs");
+const require_daikin_text_masked_field = require("./daikin-text-masked-field.cjs");
 Object.defineProperty(exports, "DaikinTextMaskedField", {
-  enumerable: true,
-  get: () => daikinTextMaskedField.DaikinTextMaskedField
+	enumerable: true,
+	get: function() {
+		return require_daikin_text_masked_field.DaikinTextMaskedField;
+	}
 });