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

package/dist/es-dev/components/checkbox/daikin-checkbox.js

@@ -1,9 +1,10 @@
 import { cva } from "class-variance-authority";
-import { css, unsafeCSS, html, nothing } from "lit";
+import { unsafeCSS, css, nothing, html } from "lit";
 import { property } from "lit/decorators.js";
-import { DDSElement } from "../../base/dds-element.js";
+import "../../base/dds-element.js";
 import { ddsElement } from "../../base/decorators.js";
 import "../../base/define.js";
+import { DDSFormElement } from "../../base/dds-form-element.js";
 import tailwindStyles from "../../tailwind.css.js";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -67,21 +68,19 @@ const cvaLabel = cva([], {
       true: ["text-ddt-color-common-disabled"]
     },
     hidden: {
-      false: ["inline-block", "pr-2"],
+      false: ["inline-block"],
       true: ["hidden"]
     }
   }
 });
-let DaikinCheckbox = class extends DDSElement {
+let DaikinCheckbox = class extends 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";
@@ -98,7 +97,7 @@ let DaikinCheckbox = class extends 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;
@@ -115,8 +114,10 @@ let DaikinCheckbox = class extends DDSElement {
     this.dispatchEvent(new Event("change", event));
   }
   render() {
+    const disabled = this.disabled || this.disabledByParent;
     return html`<label
       class="group flex gap-2 items-center size-full font-daikinSerif"
+      part="label"
       @click=${this._handleClick}
     >
       <span class="p-2">
@@ -124,8 +125,8 @@ let DaikinCheckbox = class extends DDSElement {
           class=${CHECKBOX_CLASS_NAME}
           type="checkbox"
           name=${this.name}
+          ?disabled=${disabled}
           aria-label=${this._labelHidden ? this.label : nothing}
-          ?disabled=${this.disabled}
           .checked=${this.checked}
           .indeterminate=${this.checkState === "indeterminate"}
           .value=${this.value}
@@ -134,7 +135,7 @@ let DaikinCheckbox = class extends DDSElement {
       </span>
       <slot
         class=${cvaLabel({
-      disabled: this.disabled,
+      disabled,
       hidden: this._labelHidden
     })}
         ?hidden=${this._labelHidden}
@@ -156,13 +157,6 @@ DaikinCheckbox.styles = css`
       display: inline-flex;
     }
   `;
-DaikinCheckbox.formAssociated = true;
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinCheckbox.prototype, "name", 2);
-__decorateClass([
-  property({ type: String, reflect: true })
-], DaikinCheckbox.prototype, "value", 2);
 __decorateClass([
   property({ type: String })
 ], DaikinCheckbox.prototype, "label", 2);
@@ -175,6 +169,9 @@ __decorateClass([
 __decorateClass([
   property({ type: Boolean, reflect: true })
 ], DaikinCheckbox.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true, attribute: false })
+], DaikinCheckbox.prototype, "disabledByParent", 2);
 DaikinCheckbox = __decorateClass([
   ddsElement("daikin-checkbox")
 ], DaikinCheckbox);

package/dist/es-dev/components/checkbox-group/daikin-checkbox-group.d.ts

@@ -0,0 +1,69 @@
+import { LitElement } from 'lit';
+import { MergeVariantProps } from "../../type-utils.js";
+import { DaikinInputGroup } from "../input-group/index.js";
+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/es-dev/components/checkbox-group/daikin-checkbox-group.js

@@ -0,0 +1,95 @@
+import { cva } from "class-variance-authority";
+import { unsafeCSS, css, LitElement, html } from "lit";
+import { property, state, queryAssignedElements, customElement } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import tailwindStyles from "../../tailwind.css.js";
+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 = cva(["size-full", "flex", "gap-x-8", "gap-y-2"], {
+  variants: {
+    orientation: {
+      horizontal: ["flex-row", "flex-wrap"],
+      vertical: ["flex-col"]
+    }
+  }
+});
+let DaikinCheckboxGroup = class extends 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 html`<fieldset
+      class=${cvaCheckboxGroup({ orientation: this.orientation })}
+      aria-label=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this._label)}
+      aria-required=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    ifDefined(this.required)}
+      aria-disabled=${// eslint-disable-next-line @typescript-eslint/no-explicit-any -- workaround lit-analyzer checking
+    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();
+  }
+};
+DaikinCheckboxGroup.styles = css`
+    ${unsafeCSS(tailwindStyles)}
+
+    :host {
+      display: inline-block;
+    }
+  `;
+__decorateClass([
+  property({ type: String })
+], DaikinCheckboxGroup.prototype, "orientation", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCheckboxGroup.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DaikinCheckboxGroup.prototype, "disabled", 2);
+__decorateClass([
+  state()
+], DaikinCheckboxGroup.prototype, "_label", 2);
+__decorateClass([
+  queryAssignedElements({
+    selector: "daikin-checkbox"
+  })
+], DaikinCheckboxGroup.prototype, "_checkboxes", 2);
+DaikinCheckboxGroup = __decorateClass([
+  customElement("daikin-checkbox-group")
+], DaikinCheckboxGroup);
+export {
+  DaikinCheckboxGroup
+};

package/dist/es-dev/components/checkbox-group/index.d.ts

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

package/dist/es-dev/components/checkbox-group/index.js

@@ -0,0 +1,4 @@
+import { DaikinCheckboxGroup } from "./daikin-checkbox-group.js";
+export {
+  DaikinCheckboxGroup
+};

package/dist/es-dev/components/date-picker/daikin-date-picker.d.ts

@@ -0,0 +1,105 @@
+import { PropertyValues } from 'lit';
+import { DDSFormElement } from "../../base/dds-form-element.js";
+import { DaikinInputGroup } from "../input-group/daikin-input-group.js";
+/**
+ * The date picker component provides a date selection function that can be combined with forms. This component uses `daikin-calendar` internally (users do not need to nest this).
+ *
+ * @fires select - Fires when the date is selected.
+ *
+ * @example
+ *
+ * ```js
+ * import "@daikin-oss/design-system-web-components/components/date-picker/index.js";
+ * ```
+ *
+ * ```html
+ * <daikin-date-picker></daikin-date-picker>
+ * ```
+ */
+export declare class DaikinDatePicker extends DDSFormElement {
+    static readonly styles: import('lit').CSSResult;
+    /**
+     * The placeholder text.
+     */
+    placeholder: string | null;
+    /**
+     * The minimum date.
+     * example: `1900-01-01`
+     */
+    min: string;
+    /**
+     * The maximum date.
+     * example: `2099-12-31`
+     */
+    max: string;
+    /**
+     * Whether the text field is readonly.
+     */
+    readonly: boolean;
+    /**
+     * Whether the text field is disabled.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    disabled: boolean;
+    /**
+     * Whether the text field is required.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    required: boolean;
+    /**
+     * Whether or not to display error states.
+     * Ignored if the `disabled` is `true`.
+     * Controlled by `daikin-input-group` when used within `daikin-input-group`.
+     */
+    error: boolean;
+    /**
+     * Whether the date picker is open.
+     */
+    open: boolean;
+    /**
+     * The month that is initially displayed when the date picker is opened.
+     * If there is a `value` attribute, this is ignored.
+     */
+    defaultValue: string | null;
+    /**
+     * The label text used as the value of aria-label.
+     * Set automatically by `reflectInputGroup` method.
+     */
+    private _label;
+    private _currentSelection;
+    private _autoUpdateController;
+    private _dateInputElement;
+    private _calendarElement;
+    private get _value();
+    private get _min();
+    private get _max();
+    private get _defaultValue();
+    private get _viewDate();
+    private get _open();
+    private _openCalendar;
+    private _emitSelect;
+    private _handleFocusIn;
+    private _handleFocusOut;
+    private _handleChange;
+    private _handleMouseUp;
+    private _handleKeyDown;
+    private _handleBeforeInput;
+    private _handleSelect;
+    private _handleToggle;
+    private _updateValue;
+    private _updateInputSelection;
+    private _updateSelection;
+    render(): import('lit-html').TemplateResult<1>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected updated(changedProperties: PropertyValues<this>): void;
+    /**
+     * This method is used by `daikin-input-group` to reflect it's attributes to this component.
+     * @private
+     */
+    reflectInputGroup(inputGroup: DaikinInputGroup): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "daikin-date-picker": DaikinDatePicker;
+    }
+}