@daikin-oss/design-system-web-components 1.0.0 → 1.2.0

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

@@ -3,9 +3,10 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const classVarianceAuthority = require("class-variance-authority");
 const lit = require("lit");
 const decorators_js = require("lit/decorators.js");
-const ddsElement = require("../../base/dds-element.cjs");
+require("../../base/dds-element.cjs");
 const decorators = require("../../base/decorators.cjs");
 require("../../base/define.cjs");
+const ddsFormElement = require("../../base/dds-form-element.cjs");
 const tailwind = require("../../tailwind.css.cjs");
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -69,21 +70,19 @@ const cvaLabel = classVarianceAuthority.cva([], {
       true: ["text-ddt-color-common-disabled"]
     },
     hidden: {
-      false: ["inline-block", "pr-2"],
+      false: ["inline-block"],
       true: ["hidden"]
     }
   }
 });
-exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
+exports.DaikinCheckbox = class DaikinCheckbox extends ddsFormElement.DDSFormElement {
   constructor() {
     super(...arguments);
-    this.name = "";
-    this.value = "";
     this.label = "";
     this.labelPosition = "right";
     this.checkState = "unchecked";
     this.disabled = false;
-    this._internals = this.attachInternals();
+    this.disabledByParent = false;
   }
   get checked() {
     return this.checkState === "checked";
@@ -100,7 +99,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
     this.checkState = value ? "checked" : "unchecked";
   }
   _updateFormValue() {
-    this._internals.setFormValue(this.checked ? this.value : null);
+    this.setFormValue(this.checked ? this.value : null);
   }
   _handleClick(event) {
     var _a;
@@ -117,8 +116,10 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
+    const disabled = this.disabled || this.disabledByParent;
     return lit.html`<label
       class="group flex gap-2 items-center size-full font-daikinSerif"
+      part="label"
       @click=${this._handleClick}
     >
       <span class="p-2">
@@ -126,8 +127,8 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${this.name}
+          ?disabled=${disabled}
           aria-label=${this._labelHidden ? this.label : lit.nothing}
-          ?disabled=${this.disabled}
           .checked=${this.checked}
           .indeterminate=${this.checkState === "indeterminate"}
           .value=${this.value}
@@ -136,7 +137,7 @@ exports.DaikinCheckbox = class DaikinCheckbox extends ddsElement.DDSElement {
       </span>
       <slot
         class=${cvaLabel({
-      disabled: this.disabled,
+      disabled,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}
@@ -158,13 +159,6 @@ exports.DaikinCheckbox.styles = lit.css`
       display: inline-flex;
     }
   `;
-exports.DaikinCheckbox.formAssociated = true;
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinCheckbox.prototype, "name", 2);
-__decorateClass([
-  decorators_js.property({ type: String, reflect: true })
-], exports.DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   decorators_js.property({ type: String })
 ], exports.DaikinCheckbox.prototype, "label", 2);
@@ -177,6 +171,9 @@ __decorateClass([
 __decorateClass([
   decorators_js.property({ type: Boolean, reflect: true })
 ], exports.DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true, attribute: false })
+], exports.DaikinCheckbox.prototype, "disabledByParent", 2);
 exports.DaikinCheckbox = __decorateClass([
   decorators.ddsElement("daikin-checkbox")
 ], exports.DaikinCheckbox);

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

@@ -1,5 +1,5 @@
 import { PropertyValues } from 'lit';
-import { DDSElement } from "../../base/index.cjs";
+import { DDSFormElement } from "../../base/dds-form-element.cjs";
 /**
  * The checkbox component is a UI element that allows users to select one or more options from a list of choices.
  * It functions similarly to the HTML `<input type="checkbox">` tag, enabling users to toggle the selection of each option independently.
@@ -7,6 +7,10 @@ import { DDSElement } from "../../base/index.cjs";
  *
  * @fires change - A cloned event of a [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event) emitted from the inner `<input type="checkbox">` element.
  *
+ * @slot - A slot for the checkbox label content.
+ *
+ * @csspart label - Change the style of checkbox label.
+ *
  * @example
  *
  * ```js
@@ -17,16 +21,8 @@ import { DDSElement } from "../../base/index.cjs";
  * <daikin-checkbox label="Checkbox label" name="name" value="value"></daikin-checkbox>
  * ```
  */
-export declare class DaikinCheckbox extends DDSElement {
+export declare class DaikinCheckbox extends DDSFormElement {
     static readonly styles: import('lit').CSSResult;
-    /**
-     * The form name, submitted as a name/value pair when submitting the form.
-     */
-    name: string;
-    /**
-     * The form value, submitted as a name/value pair when submitting the form.
-     */
-    value: string;
     /**
      * Label text for the checkbox.
      */
@@ -45,6 +41,13 @@ export declare class DaikinCheckbox extends DDSElement {
      * Specify the checkbox disabled state.
      */
     disabled: boolean;
+    /**
+     * Specify the checkbox disabled state controlled by the parent component.
+     * Controlled by `daikin-checkbox-group`.
+     *
+     * @private
+     */
+    disabledByParent: boolean;
     get checked(): boolean;
     private get _labelHidden();
     /**
@@ -53,8 +56,6 @@ export declare class DaikinCheckbox extends DDSElement {
      * _Setter_: If `true` is set, it updates `checkState` to `"checked"`, and if `false` is set, it updates `checkState` to `"unchecked"`.
      */
     set checked(value: boolean);
-    static readonly formAssociated = true;
-    private _internals;
     private _updateFormValue;
     private _handleClick;
     private _handleChange;

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

@@ -0,0 +1,94 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const classVarianceAuthority = require("class-variance-authority");
+const lit = require("lit");
+const decorators_js = require("lit/decorators.js");
+const ifDefined_js = require("lit/directives/if-defined.js");
+const tailwind = require("../../tailwind.css.cjs");
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+const cvaCheckboxGroup = classVarianceAuthority.cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+  variants: {
+    orientation: {
+      horizontal: ["flex-row", "flex-wrap"],
+      vertical: ["flex-col"]
+    }
+  }
+});
+exports.DaikinCheckboxGroup = class DaikinCheckboxGroup extends lit.LitElement {
+  constructor() {
+    super(...arguments);
+    this.orientation = "vertical";
+    this.required = false;
+    this.disabled = false;
+    this._label = null;
+  }
+  _reflectSlotProperties() {
+    for (const checkbox of this._checkboxes) {
+      checkbox.disabledByParent = this.disabled;
+    }
+  }
+  _handleSlotChange() {
+    this._reflectSlotProperties();
+  }
+  render() {
+    return lit.html`<fieldset
+      class=${cvaCheckboxGroup({ orientation: this.orientation })}
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this._label)}
+      aria-required=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.required)}
+      aria-disabled=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined_js.ifDefined(this.disabled)}
+    >
+      <slot @slotchange=${this._handleSlotChange}></slot>
+    </fieldset>`;
+  }
+  /**
+   * This function expose to `daikin-input-group` and reflect it's attributes to `daikin-checkbox-group`.
+   * @ignore
+   */
+  reflectInputGroup(inputGroup) {
+    this._label = inputGroup.label;
+    this.required = !!inputGroup.required;
+    this.disabled = inputGroup.disabled;
+  }
+  updated() {
+    this._reflectSlotProperties();
+  }
+};
+exports.DaikinCheckboxGroup.styles = lit.css`
+    ${lit.unsafeCSS(tailwind.default)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+__decorateClass([
+  decorators_js.property({ type: String })
+], exports.DaikinCheckboxGroup.prototype, "orientation", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckboxGroup.prototype, "required", 2);
+__decorateClass([
+  decorators_js.property({ type: Boolean, reflect: true })
+], exports.DaikinCheckboxGroup.prototype, "disabled", 2);
+__decorateClass([
+  decorators_js.state()
+], exports.DaikinCheckboxGroup.prototype, "_label", 2);
+__decorateClass([
+  decorators_js.queryAssignedElements({
+    selector: "daikin-checkbox"
+  })
+], exports.DaikinCheckboxGroup.prototype, "_checkboxes", 2);
+exports.DaikinCheckboxGroup = __decorateClass([
+  decorators_js.customElement("daikin-checkbox-group")
+], exports.DaikinCheckboxGroup);

package/dist/cjs/components/checkbox-group/daikin-checkbox-group.d.cts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.cjs";
+import { DaikinInputGroup } from "../input-group/index.cjs";
+declare const cvaCheckboxGroup: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type CheckboxGroupProps = MergeVariantProps<typeof cvaCheckboxGroup>;
+/**
+ * Checkbox groups are used to group multiple checkboxes.
+ *
+ * Hierarchies:
+ * - `daikin-checkbox-group` > `daikin-checkbox`
+ * - `daikin-input-group` > `daikin-checkbox-group` > `daikin-checkbox`
+ *
+ * @slot - A slot for checkbox. Place `daikin-checkbox` elements here.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/checkbox/index.js";
+ * import "@daikin-oss/design-system-web-components/components/checkbox-group/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-checkbox-group>
+ *   <daikin-checkbox name="name1" value="value1" label="Checkbox Item 1"></daikin-checkbox>
+ *   <daikin-checkbox name="name2" value="value2" label="Checkbox Item 2"></daikin-checkbox>
+ *   <daikin-checkbox name="name3" value="value3" label="Checkbox Item 3"></daikin-checkbox>
+ * </daikin-checkbox-group>
+ * ```
+ */
+export declare class DaikinCheckboxGroup extends LitElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * Specify the checkbox group orientation
+     */
+    orientation: CheckboxGroupProps["orientation"];
+    /**
+     * Whether the checkbox group is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether the checkbox group is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private readonly _checkboxes;
+    private _reflectSlotProperties;
+    private _handleSlotChange;
+    render(): import('lit-html').TemplateResult<1>;
+    /**
+     * This function expose to `daikin-input-group` and reflect it's attributes to `daikin-checkbox-group`.
+     * @ignore
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+    updated(): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-checkbox-group": DaikinCheckboxGroup;
+    }
+}
+export {};

package/dist/cjs/components/checkbox-group/index.cjs

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const daikinCheckboxGroup = require("./daikin-checkbox-group.cjs");
+Object.defineProperty(exports, "DaikinCheckboxGroup", {
+  enumerable: true,
+  get: () => daikinCheckboxGroup.DaikinCheckboxGroup
+});

package/dist/cjs/components/checkbox-group/index.d.cts

@@ -0,0 +1 @@
+export * from "./daikin-checkbox-group.cjs";