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

package/dist/cjs/components/checkbox/daikin-checkbox.cjs

@@ -1,291 +1,279 @@
-"use strict";
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const classVarianceAuthority = require("class-variance-authority");
-const lit = require("lit");
-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 cvaWrapper = classVarianceAuthority.cva(
-  ["group", "flex", "gap-2", "items-center", "size-full"],
-  {
-    variants: {
-      disabled: {
-        false: [],
-        true: []
-      },
-      readonly: {
-        false: [],
-        true: []
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: false,
-        readonly: false,
-        class: ["cursor-pointer"]
-      }
-    ]
-  }
-);
-const CHECKBOX_CLASS_NAME = classVarianceAuthority.cva(
-  [
-    "block",
-    "size-4",
-    "rounded-xs",
-    "relative",
-    "appearance-none",
-    "before:absolute",
-    "before:m-auto",
-    "before:inset-0",
-    "focus-visible:outline-solid",
-    "focus-visible:outline-2",
-    "focus-visible:outline-offset-2",
-    "focus-visible:outline-ddt-color-common-border-focus",
-    "disabled:border-ddt-color-common-disabled",
-    "disabled:bg-ddt-color-common-text-inverse",
-    "disabled:checked:bg-ddt-color-common-disabled",
-    "disabled:indeterminate:bg-ddt-color-common-disabled"
-  ],
-  {
-    variants: {
-      disabled: {
-        false: [],
-        true: []
-      },
-      readonly: {
-        false: [],
-        true: []
-      },
-      checkState: {
-        unchecked: [],
-        checked: [],
-        indeterminate: []
-      }
-    },
-    compoundVariants: [
-      {
-        disabled: false,
-        readonly: false,
-        class: ["cursor-pointer"]
-      },
-      {
-        readonly: false,
-        checkState: "unchecked",
-        class: [
-          "border-2",
-          "border-ddt-color-common-neutral-default",
-          "group-hover:enabled:border-ddt-color-common-neutral-hover",
-          "group-hover:enabled:bg-ddt-color-common-surface-hover",
-          "group-active:enabled:border-ddt-color-common-neutral-press",
-          "group-active:enabled:bg-ddt-color-common-surface-press"
-        ]
-      },
-      {
-        readonly: false,
-        checkState: "checked",
-        class: [
-          "border-2",
-          "before:text-ddt-color-common-text-inverse",
-          "before:icon-[daikin--checkbox-checked]",
-          "before:size-3",
-          "enabled:checked:border-ddt-color-common-brand-default",
-          "enabled:checked:bg-ddt-color-common-brand-default",
-          "group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
-          "group-hover:checked:enabled:border-ddt-color-common-brand-hover",
-          "group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
-          "group-active:checked:enabled:bg-ddt-color-common-brand-press",
-          "group-active:checked:enabled:border-ddt-color-common-brand-press",
-          "group-active:checked:enabled:before:text-ddt-color-common-text-inverse"
-        ]
-      },
-      {
-        readonly: false,
-        checkState: "indeterminate",
-        class: [
-          "border-2",
-          "before:text-ddt-color-common-text-inverse",
-          "before:icon-[daikin--checkbox-indeterminate]",
-          "before:size-2.5",
-          "enabled:indeterminate:bg-ddt-color-common-brand-default",
-          "enabled:indeterminate:border-ddt-color-common-brand-default",
-          "group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
-          "group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
-          "group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
-          "group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
-          "group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
-          "group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse"
-        ]
-      },
-      {
-        readonly: true,
-        checkState: "unchecked",
-        class: [
-          "border",
-          "border-ddt-color-common-disabled",
-          "bg-(--dds-color-common-surface-secondary)"
-        ]
-      },
-      {
-        readonly: true,
-        checkState: "checked",
-        class: [
-          "border",
-          "border-ddt-color-common-neutral-default",
-          "bg-(--dds-color-common-surface-secondary)",
-          "before:text-ddt-color-common-neutral-default",
-          "before:icon-[daikin--checkbox-checked]",
-          "before:size-3"
-        ]
-      },
-      {
-        readonly: true,
-        checkState: "indeterminate",
-        class: [
-          "border",
-          "border-ddt-color-common-neutral-default",
-          "bg-(--dds-color-common-surface-secondary)",
-          "before:text-ddt-color-common-neutral-default",
-          "before:icon-[daikin--checkbox-indeterminate]",
-          "before:size-2.5"
-        ]
-      }
-    ]
-  }
-);
-const cvaLabel = classVarianceAuthority.cva(["natural-break"], {
-  variants: {
-    checkState: {
-      unchecked: [],
-      checked: [],
-      indeterminate: []
-    },
-    readonly: {
-      false: [],
-      true: []
-    },
-    disabled: {
-      false: ["text-ddt-color-common-text-primary"],
-      true: ["text-ddt-color-common-disabled"]
-    },
-    hidden: {
-      false: ["inline-block"],
-      true: ["hidden"]
-    }
-  },
-  compoundVariants: [
-    {
-      readonly: true,
-      checkState: "unchecked",
-      disabled: false,
-      hidden: false,
-      class: ["text-ddt-color-common-disabled!"]
-    }
-  ]
+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 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");
+//#region src/components/checkbox/daikin-checkbox.ts
+var cvaWrapper = (0, class_variance_authority.cva)([
+	"group",
+	"flex",
+	"gap-2",
+	"items-center",
+	"size-full"
+], {
+	variants: {
+		disabled: {
+			false: [],
+			true: []
+		},
+		readonly: {
+			false: [],
+			true: []
+		}
+	},
+	compoundVariants: [{
+		disabled: false,
+		readonly: false,
+		class: ["cursor-pointer"]
+	}]
 });
-exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElement {
-  constructor() {
-    super(...arguments);
-    this.disabled = false;
-    this.readonly = false;
-    this.disabledByParent = false;
-    this.readonlyByParent = false;
-    this._inputRef = ref_js.createRef();
-  }
-  /**
-   * The effective disabled state of the checkbox.
-   * Returns `true` if either `disabled` or `disabledByParent` is `true`.
-   *
-   * @private
-   */
-  get _disabled() {
-    return this.disabled || this.disabledByParent;
-  }
-  /**
-   * The effective readonly state of the checkbox.
-   * Returns `true` if either `readonly` or `readonlyByParent` is `true`.
-   *
-   * @private
-   */
-  get _readonly() {
-    return this.readonly || this.readonlyByParent;
-  }
-  /**
-   * Focuses on the inner checkbox.
-   * @param options focus options
-   */
-  focus(options) {
-    var _a;
-    (_a = this._inputRef.value) == null ? void 0 : _a.focus(options);
-  }
-  get checked() {
-    return this.checkState === "checked";
-  }
-  get _labelHidden() {
-    return this.labelPosition === "hidden";
-  }
-  /**
-   * A property-only accessor for `checkState` provided for convenience.
-   * _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
-   * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
-   */
-  set checked(value) {
-    this.checkState = value ? "checked" : "unchecked";
-  }
-  _updateFormValue() {
-    this.setFormValue(this.checked ? this.value : null);
-  }
-  _handleClick(event) {
-    var _a;
-    if (this._disabled || this._readonly) {
-      event.preventDefault();
-    }
-    if (((_a = event.target) == null ? void 0 : _a.tagName) !== "INPUT") {
-      event.stopPropagation();
-    }
-  }
-  _handleChange(event) {
-    if (this._readonly) {
-      event.preventDefault();
-      return;
+var CHECKBOX_CLASS_NAME = (0, class_variance_authority.cva)([
+	"block",
+	"size-4",
+	"rounded-xs",
+	"relative",
+	"appearance-none",
+	"before:absolute",
+	"before:m-auto",
+	"before:inset-0",
+	"focus-visible:outline-solid",
+	"focus-visible:outline-2",
+	"focus-visible:outline-offset-2",
+	"focus-visible:outline-ddt-color-common-border-focus",
+	"disabled:border-ddt-color-common-disabled",
+	"disabled:bg-ddt-color-common-text-inverse",
+	"disabled:checked:bg-ddt-color-common-disabled",
+	"disabled:indeterminate:bg-ddt-color-common-disabled"
+], {
+	variants: {
+		disabled: {
+			false: [],
+			true: []
+		},
+		readonly: {
+			false: [],
+			true: []
+		},
+		checkState: {
+			unchecked: [],
+			checked: [],
+			indeterminate: []
+		}
+	},
+	compoundVariants: [
+		{
+			disabled: false,
+			readonly: false,
+			class: ["cursor-pointer"]
+		},
+		{
+			readonly: false,
+			checkState: "unchecked",
+			class: [
+				"border-2",
+				"border-ddt-color-common-neutral-default",
+				"group-hover:enabled:border-ddt-color-common-neutral-hover",
+				"group-hover:enabled:bg-ddt-color-common-surface-hover",
+				"group-active:enabled:border-ddt-color-common-neutral-press",
+				"group-active:enabled:bg-ddt-color-common-surface-press"
+			]
+		},
+		{
+			readonly: false,
+			checkState: "checked",
+			class: [
+				"border-2",
+				"before:text-ddt-color-common-text-inverse",
+				"before:icon-[daikin--checkbox-checked]",
+				"before:size-3",
+				"enabled:checked:border-ddt-color-common-brand-default",
+				"enabled:checked:bg-ddt-color-common-brand-default",
+				"group-hover:checked:enabled:bg-ddt-color-common-brand-hover",
+				"group-hover:checked:enabled:border-ddt-color-common-brand-hover",
+				"group-hover:checked:enabled:before:text-ddt-color-common-text-inverse",
+				"group-active:checked:enabled:bg-ddt-color-common-brand-press",
+				"group-active:checked:enabled:border-ddt-color-common-brand-press",
+				"group-active:checked:enabled:before:text-ddt-color-common-text-inverse"
+			]
+		},
+		{
+			readonly: false,
+			checkState: "indeterminate",
+			class: [
+				"border-2",
+				"before:text-ddt-color-common-text-inverse",
+				"before:icon-[daikin--checkbox-indeterminate]",
+				"before:size-2.5",
+				"enabled:indeterminate:bg-ddt-color-common-brand-default",
+				"enabled:indeterminate:border-ddt-color-common-brand-default",
+				"group-hover:indeterminate:enabled:bg-ddt-color-common-brand-hover",
+				"group-hover:indeterminate:enabled:border-ddt-color-common-brand-hover",
+				"group-hover:indeterminate:enabled:before:text-ddt-color-common-text-inverse",
+				"group-active:indeterminate:enabled:bg-ddt-color-common-brand-press",
+				"group-active:indeterminate:enabled:border-ddt-color-common-brand-press",
+				"group-active:indeterminate:enabled:before:text-ddt-color-common-text-inverse"
+			]
+		},
+		{
+			readonly: true,
+			checkState: "unchecked",
+			class: [
+				"border",
+				"border-ddt-color-common-disabled",
+				"bg-(--dds-color-common-surface-secondary)"
+			]
+		},
+		{
+			readonly: true,
+			checkState: "checked",
+			class: [
+				"border",
+				"border-ddt-color-common-neutral-default",
+				"bg-(--dds-color-common-surface-secondary)",
+				"before:text-ddt-color-common-neutral-default",
+				"before:icon-[daikin--checkbox-checked]",
+				"before:size-3"
+			]
+		},
+		{
+			readonly: true,
+			checkState: "indeterminate",
+			class: [
+				"border",
+				"border-ddt-color-common-neutral-default",
+				"bg-(--dds-color-common-surface-secondary)",
+				"before:text-ddt-color-common-neutral-default",
+				"before:icon-[daikin--checkbox-indeterminate]",
+				"before:size-2.5"
+			]
+		}
+	]
+});
+var cvaLabel = (0, class_variance_authority.cva)(["natural-break"], {
+	variants: {
+		checkState: {
+			unchecked: [],
+			checked: [],
+			indeterminate: []
+		},
+		readonly: {
+			false: [],
+			true: []
+		},
+		disabled: {
+			false: ["text-ddt-color-common-text-primary"],
+			true: ["text-ddt-color-common-disabled"]
+		},
+		hidden: {
+			false: ["inline-block"],
+			true: ["hidden"]
+		}
+	},
+	compoundVariants: [{
+		readonly: true,
+		checkState: "unchecked",
+		disabled: false,
+		hidden: false,
+		class: ["text-ddt-color-common-disabled!"]
+	}]
+});
+var DaikinCheckbox = class DaikinCheckbox extends require_dds_form_element.DDSFormElement {
+	constructor(..._args) {
+		super(..._args);
+		this.disabled = false;
+		this.readonly = false;
+		this.disabledByParent = false;
+		this.readonlyByParent = false;
+		this._inputRef = (0, lit_directives_ref_js.createRef)();
+	}
+	static {
+		this.styles = lit.css`
+    ${(0, lit.unsafeCSS)(require_tailwind.default)}
+
+    :host {
+      display: inline-flex;
     }
-    this.checkState = event.target.checked ? "checked" : "unchecked";
-    this._updateFormValue();
-    this.dispatchEvent(new Event("change", event));
-  }
-  render() {
-    return lit.html`<label
+  `;
+	}
+	/**
+	* The effective disabled state of the checkbox.
+	* Returns `true` if either `disabled` or `disabledByParent` is `true`.
+	*
+	* @private
+	*/
+	get _disabled() {
+		return this.disabled || this.disabledByParent;
+	}
+	/**
+	* The effective readonly state of the checkbox.
+	* Returns `true` if either `readonly` or `readonlyByParent` is `true`.
+	*
+	* @private
+	*/
+	get _readonly() {
+		return this.readonly || this.readonlyByParent;
+	}
+	/**
+	* Focuses on the inner checkbox.
+	* @param options focus options
+	*/
+	focus(options) {
+		this._inputRef.value?.focus(options);
+	}
+	get checked() {
+		return this.checkState === "checked";
+	}
+	get _labelHidden() {
+		return this.labelPosition === "hidden";
+	}
+	/**
+	* A property-only accessor for `checkState` provided for convenience.
+	* _Getter_: Returns `true` when `checkState` is `"checked"`, and `false` otherwise.
+	* _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
+	*/
+	set checked(value) {
+		this.checkState = value ? "checked" : "unchecked";
+	}
+	_updateFormValue() {
+		this.setFormValue(this.checked ? this.value : null);
+	}
+	_handleClick(event) {
+		if (this._disabled || this._readonly) event.preventDefault();
+		if (event.target?.tagName !== "INPUT") event.stopPropagation();
+	}
+	_handleChange(event) {
+		if (this._readonly) {
+			event.preventDefault();
+			return;
+		}
+		this.checkState = event.target.checked ? "checked" : "unchecked";
+		this._updateFormValue();
+		this.dispatchEvent(new Event("change", event));
+	}
+	render() {
+		return lit.html`<label
       class=${cvaWrapper({
-      disabled: this._disabled,
-      readonly: this._readonly
-    })}
+			disabled: this._disabled,
+			readonly: this._readonly
+		})}
       part="label"
       @click=${this._handleClick}
     >
       <span class="p-2">
         <input
-          ${ref_js.ref(this._inputRef)}
+          ${(0, lit_directives_ref_js.ref)(this._inputRef)}
           class=${CHECKBOX_CLASS_NAME({
-      disabled: this._disabled,
-      readonly: this._readonly && !this._disabled,
-      checkState: this.checkState
-    })}
+			disabled: this._disabled,
+			readonly: this._readonly && !this._disabled,
+			checkState: this.checkState
+		})}
           type="checkbox"
-          name=${ifDefined_js.ifDefined(this.getBackingProperty("name"))}
+          name=${(0, lit_directives_if_defined_js.ifDefined)(this.getBackingProperty("name"))}
           ?disabled=${this._disabled}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
           .checked=${this.checked}
@@ -296,67 +284,67 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElem
       </span>
       <slot
         class=${cvaLabel({
-      disabled: this._disabled,
-      readonly: this._readonly && !this._disabled,
-      checkState: this.checkState,
-      hidden: this._labelHidden
-    })}
+			disabled: this._disabled,
+			readonly: this._readonly && !this._disabled,
+			checkState: this.checkState,
+			hidden: this._labelHidden
+		})}
         ?hidden=${this._labelHidden}
       >
         ${this.label}
       </slot>
     </label>`;
-  }
-  updated(changedProperties) {
-    if (changedProperties.has("checkState")) {
-      this._updateFormValue();
-    }
-  }
+	}
+	updated(changedProperties) {
+		if (changedProperties.has("checkState")) this._updateFormValue();
+	}
 };
-exports.DaikinCheckbox.styles = lit.css`
-    ${lit.unsafeCSS(tailwind.default)}
-
-    :host {
-      display: inline-flex;
-    }
-  `;
-__decorateClass([
-  ddsProperty.property({ type: String, reflect: true, fallbackValue: "" })
-], exports.DaikinCheckbox.prototype, "label", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    attribute: "label-position",
-    fallbackValue: "right",
-    isAllowedValue: ddsProperty.oneOf(["right", "hidden"])
-  })
-], exports.DaikinCheckbox.prototype, "labelPosition", 2);
-__decorateClass([
-  ddsProperty.property({
-    type: String,
-    reflect: true,
-    attribute: "check-state",
-    fallbackValue: "unchecked",
-    isAllowedValue: ddsProperty.oneOf([
-      "unchecked",
-      "indeterminate",
-      "checked"
-    ])
-  })
-], exports.DaikinCheckbox.prototype, "checkState", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinCheckbox.prototype, "disabled", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true })
-], exports.DaikinCheckbox.prototype, "readonly", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
-], exports.DaikinCheckbox.prototype, "disabledByParent", 2);
-__decorateClass([
-  ddsProperty.property({ type: Boolean, reflect: true, attribute: false })
-], exports.DaikinCheckbox.prototype, "readonlyByParent", 2);
-exports.DaikinCheckbox = __decorateClass([
-  decorators.ddsElement("daikin-checkbox")
-], exports.DaikinCheckbox);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	fallbackValue: ""
+})], DaikinCheckbox.prototype, "label", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "label-position",
+	fallbackValue: "right",
+	isAllowedValue: require_dds_property.oneOf(["right", "hidden"])
+})], DaikinCheckbox.prototype, "labelPosition", void 0);
+require_decorate.default([require_dds_property.property({
+	type: String,
+	reflect: true,
+	attribute: "check-state",
+	fallbackValue: "unchecked",
+	isAllowedValue: require_dds_property.oneOf([
+		"unchecked",
+		"indeterminate",
+		"checked"
+	])
+})], DaikinCheckbox.prototype, "checkState", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinCheckbox.prototype, "disabled", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true
+})], DaikinCheckbox.prototype, "readonly", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true,
+	attribute: false
+})], DaikinCheckbox.prototype, "disabledByParent", void 0);
+require_decorate.default([require_dds_property.property({
+	type: Boolean,
+	reflect: true,
+	attribute: false
+})], DaikinCheckbox.prototype, "readonlyByParent", void 0);
+DaikinCheckbox = require_decorate.default([require_decorators.ddsElement("daikin-checkbox")], DaikinCheckbox);
+//#endregion
+Object.defineProperty(exports, "DaikinCheckbox", {
+	enumerable: true,
+	get: function() {
+		return DaikinCheckbox;
+	}
+});