@daikin-oss/design-system-web-components 1.6.0 → 2.0.0

package/dist/es-dev/components/date-picker/daikin-date-picker.js

@@ -14,6 +14,7 @@ import { FloatingUIAutoUpdateController } from "../../controllers/floating-ui-au
 import { FocusTrapController } from "../../controllers/focus-trap.js";
 import tailwindStyles from "../../tailwind.css.js";
 import { tryParseDateFromProperty, parseDateFromProperty, DEFAULT_MIN_DATE, DEFAULT_MAX_DATE, formatDateForProperty, isDateOutOfRange, cvaIconButton, countDaysForYearMonth } from "../../utils/calendar-common.js";
+import { extractHalfWidthDigits } from "../../utils/extract-half-width-digits.js";
 import { reDispatch } from "../../utils/re-dispatch.js";
 import "../calendar/daikin-calendar.js";
 import "../icon-button/daikin-icon-button.js";
@@ -28,18 +29,18 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 const dateTimeFormatPartsCache = /* @__PURE__ */ new Map();
-function getSafeDateTimeFormatParts(locale) {
+function getSafeDateTimeFormatParts(inputLocale) {
   const options = {
     year: "numeric",
     month: "numeric",
     day: "numeric"
   };
-  const key = locale ?? "__DEFAULT__";
+  const key = inputLocale ?? "__DEFAULT__";
   const cached = dateTimeFormatPartsCache.get(key);
   if (cached) return cached;
   try {
     const parts = new Intl.DateTimeFormat(
-      locale ?? void 0,
+      inputLocale ?? void 0,
       options
     ).formatToParts(0);
     dateTimeFormatPartsCache.set(key, parts);
@@ -50,8 +51,8 @@ function getSafeDateTimeFormatParts(locale) {
     return parts;
   }
 }
-function getDateOrderAndSeparator(locale) {
-  const parts = getSafeDateTimeFormatParts(locale ?? void 0);
+function getDateOrderAndSeparator(inputLocale) {
+  const parts = getSafeDateTimeFormatParts(inputLocale ?? void 0);
   const order = parts.filter(
     (p) => ["year", "month", "day"].includes(p.type)
   ).map((p) => p.type);
@@ -68,8 +69,8 @@ function getDateOrderAndSeparator(locale) {
   }
   return { order, sep };
 }
-function getDateItems(locale) {
-  const { order, sep } = getDateOrderAndSeparator(locale);
+function getDateItems(inputLocale) {
+  const { order, sep } = getDateOrderAndSeparator(inputLocale);
   const lengths = { year: 4, month: 2, day: 2 };
   const items = order.map((key, i) => {
     const type = key;
@@ -88,9 +89,10 @@ const cvaField = cva(
     "flex",
     "items-center",
     "size-full",
+    "min-h-(--dds-input-height)",
     "bg-ddt-color-common-background-default",
-    "pl-4",
-    "pr-10",
+    "pl-[calc(var(--dds-padding-30)+0.25rem)]",
+    "pr-[calc((var(--dds-gap-10))+var(--dds-icon-button)+0.5rem)]",
     "rounded-sm",
     "truncate",
     "outline-solid",
@@ -126,25 +128,25 @@ const cvaField = cva(
     }
   }
 );
-function parsePartsFromUIValue(value, locale) {
-  const { order, sep } = getDateOrderAndSeparator(locale);
+function parsePartsFromUIValue(value, inputLocale) {
+  const { order, sep } = getDateOrderAndSeparator(inputLocale);
   const parts = value.split(sep);
   return Object.fromEntries(
     order.map((key, i) => [key, parts[i] ?? ""])
   );
 }
-function formatPartsForUI(parts, locale) {
-  const { order, sep } = getDateOrderAndSeparator(locale);
+function formatPartsForUI(parts, inputLocale) {
+  const { order, sep } = getDateOrderAndSeparator(inputLocale);
   return order.map((k) => parts[k]).join(sep);
 }
-function getPlaceholderAll(locale) {
+function getPlaceholderAll(inputLocale) {
   return formatPartsForUI(
     { year: PLACEHOLDER_YEAR, month: PLACEHOLDER_MONTH, day: PLACEHOLDER_DAY },
-    locale
+    inputLocale
   );
 }
-function tryParseDateFromUIValue(value, locale) {
-  const { year, month, day } = parsePartsFromUIValue(value, locale);
+function tryParseDateFromUIValue(value, inputLocale) {
+  const { year, month, day } = parsePartsFromUIValue(value, inputLocale);
   if (
     // Prevent treating incomplete year entries (such as 0202) as valid.
     // This also means that dates less than 1000 years ago cannot be handled.
@@ -158,18 +160,18 @@ function tryParseDateFromUIValue(value, locale) {
   }
   return date;
 }
-function formatDateForUI(date, locale) {
+function formatDateForUI(date, inputLocale) {
   return formatPartsForUI(
     {
       year: String(date.getUTCFullYear()).padStart(4, "0"),
       month: String(date.getUTCMonth() + 1).padStart(2, "0"),
       day: String(date.getUTCDate()).padStart(2, "0")
     },
-    locale
+    inputLocale
   );
 }
-function getDateItemInSelection(selectionStart, selectionEnd, locale) {
-  for (const { type, range } of getDateItems(locale)) {
+function getDateItemInSelection(selectionStart, selectionEnd, inputLocale) {
+  for (const { type, range } of getDateItems(inputLocale)) {
     if (range[0] <= selectionStart && selectionStart <= range[1] && range[0] <= selectionEnd && selectionEnd <= range[1]) {
       return type;
     }
@@ -285,13 +287,19 @@ let DaikinDatePicker = class extends DDSFormElement {
     this.open = false;
     this.defaultValue = null;
     this.locale = null;
+    this.inputLocale = null;
     this._label = null;
     this._currentSelection = "month";
+    this._preCompositionValue = "";
+    this._inputValue = "";
+    this._monthDigitIndex = 0;
+    this._dayDigitIndex = 0;
+    this._yearDigitIndex = 0;
     this._autoUpdateController = new FloatingUIAutoUpdateController(this);
     this._dateInputElement = createRef();
     this._calendarElement = createRef();
     this._calendarButtonElement = createRef();
-    this._getLocale = () => this.locale ?? null;
+    this._getLocale = () => this.inputLocale ?? null;
     this._getDateItems = () => getDateItems(this._getLocale());
     this._parsePartsFromUIValue = (v) => parsePartsFromUIValue(v, this._getLocale());
     this._formatPartsForUI = (p) => formatPartsForUI(p, this._getLocale());
@@ -315,9 +323,29 @@ let DaikinDatePicker = class extends DDSFormElement {
   static getDefaultPlaceholder(element) {
     return getPlaceholderAll(element._getLocale());
   }
-  get _value() {
+  get _dateValue() {
     return tryParseDateFromProperty(this.value);
   }
+  /**
+   * Returns the string to bind to the <input> element's .value property.
+   *
+   * - When this.value holds a valid date, show the locale-formatted date.
+   * - When _inputValue contains partial or invalid content (placeholders / impossible
+   *   dates like 02/31), return it so the user's in-progress entry is preserved
+   *   across Lit re-renders.
+   * - Otherwise (e.g. this.value was cleared externally while _inputValue still
+   *   holds a now-stale complete valid date string) return "" so the CSS placeholder
+   *   text is visible instead.
+   */
+  get _displayValue() {
+    if (this._dateValue) {
+      return this._formatDateForUI(this._dateValue);
+    }
+    if (this._inputValue && !this._tryParseDateFromUIValue(this._inputValue)) {
+      return this._inputValue;
+    }
+    return "";
+  }
   get _min() {
     return tryParseDateFromProperty(this.min) ?? parseDateFromProperty(DEFAULT_MIN_DATE);
   }
@@ -347,10 +375,11 @@ let DaikinDatePicker = class extends DDSFormElement {
     const target = event.target;
     if (target.value === this._getPlaceholderAll()) {
       target.value = "";
+      this._inputValue = "";
     }
   }
   _handleChange(event) {
-    this._updateValue(event);
+    this._updateValue(event.target);
   }
   _handleMouseUp(event) {
     var _a, _b;
@@ -369,14 +398,104 @@ let DaikinDatePicker = class extends DDSFormElement {
       this._updateSelection(dateItemInSelection);
     }
   }
+  // Saves the input's display value when IME composition starts so that
+  // `_handleCompositionEnd` can restore it if the browser inserted raw IME text.
+  _handleCompositionStart(event) {
+    this._preCompositionValue = event.target.value;
+  }
+  // Handle compositionend to support full-width and half-width digit input via IME.
+  // Full-width digits are converted to half-width, then each digit is applied as if
+  // the user had typed them one by one using the existing handleDigitInput logic.
+  _handleCompositionEnd(event) {
+    const target = event.target;
+    const composedText = event.data;
+    target.value = this._preCompositionValue || this._getPlaceholderAll();
+    const digits = extractHalfWidthDigits(composedText);
+    if (digits.length === 0) {
+      this._updateInputSelection(target);
+      this._updateValue(target);
+      return;
+    }
+    this._applyDigits(target, digits);
+  }
+  // Applies a single digit to the given date part, incorporating fresh-entry
+  // tracking for month and day. Extracted from _applyDigits to keep complexity low.
+  _applyDigitToPart(parts, item, digit) {
+    if (item === "month") {
+      const monthDigitIndex = this._monthDigitIndex;
+      if (monthDigitIndex === 0) {
+        this._monthDigitIndex = 1;
+        if (digit === "0") {
+          return { parts: { ...parts, month: "00" }, done: false };
+        }
+        return {
+          parts: { ...parts, month: `0${digit}` },
+          done: digit !== "1"
+        };
+      }
+      this._monthDigitIndex = 0;
+      if (parts.month === "00") {
+        if (digit === "0") return null;
+        return { parts: { ...parts, month: `0${digit}` }, done: true };
+      }
+    } else if (item === "day") {
+      const dayDigitIndex = this._dayDigitIndex;
+      if (dayDigitIndex === 0) {
+        this._dayDigitIndex = 1;
+        if (digit === "0") {
+          return { parts: { ...parts, day: "00" }, done: false };
+        }
+        return {
+          parts: { ...parts, day: `0${digit}` },
+          done: !["1", "2", "3"].includes(digit)
+        };
+      }
+      this._dayDigitIndex = 0;
+      if (parts.day === "00") {
+        if (digit === "0") return null;
+        return { parts: { ...parts, day: `0${digit}` }, done: true };
+      }
+    } else if (this._yearDigitIndex === 0) {
+      this._yearDigitIndex = 1;
+      return { parts: { ...parts, year: `000${digit}` }, done: false };
+    }
+    return handleDigitInput(parts, item, digit);
+  }
+  // Applies a sequence of digit characters to the input starting from the currently
+  // selected date item, then commits the result to this.value.
+  // Shared by _handleKeyDown (single digit) and _handleCompositionEnd (multiple digits).
+  _applyDigits(target, digits) {
+    const items = this._getDateItems();
+    let parts = this._parsePartsFromUIValue(target.value);
+    let currentItem = this._currentSelection;
+    for (const digit of digits) {
+      const currentIndex = items.findIndex(({ type }) => type === currentItem);
+      if (currentIndex < 0) break;
+      const newState = this._applyDigitToPart(parts, currentItem, digit);
+      if (!newState) continue;
+      parts = newState.parts;
+      if (!newState.done) continue;
+      const nextIndex = Math.min(currentIndex + 1, items.length - 1);
+      currentItem = items[nextIndex].type;
+      this._monthDigitIndex = 0;
+      this._dayDigitIndex = 0;
+      this._yearDigitIndex = 0;
+    }
+    target.value = this._formatPartsForUI(parts);
+    this._updateSelection(currentItem);
+    this._updateValue(target);
+  }
   _handleKeyDown(event) {
     if (this.readonly) {
       return;
     }
+    if (event.isComposing || event.key === "Process" || event.keyCode === 229) {
+      return;
+    }
     const target = event.target;
     const key = event.key;
     const parts = this._parsePartsFromUIValue(target.value);
-    if (key === "Backspace") {
+    if (key === "Backspace" || key === "Delete") {
       event.preventDefault();
       const itemToRemove = this._currentSelection;
       const placeholder = {
@@ -391,24 +510,12 @@ let DaikinDatePicker = class extends DDSFormElement {
         });
         this._updateSelection(itemToRemove);
       }
-      this._updateValue(event);
+      this._updateValue(target);
       return;
     }
     if (/^\d$/.test(key)) {
       event.preventDefault();
-      const newState = handleDigitInput(parts, this._currentSelection, key);
-      if (newState) {
-        target.value = this._formatPartsForUI(newState.parts);
-        const items = this._getDateItems();
-        const currentIndex = items.findIndex(
-          ({ type }) => type === this._currentSelection
-        );
-        const nextIndex = currentIndex >= 0 ? Math.min(currentIndex + 1, items.length - 1) : -1;
-        this._updateSelection(
-          newState.done && nextIndex >= 0 ? items[nextIndex].type : this._currentSelection
-        );
-      }
-      this._updateValue(event);
+      this._applyDigits(target, [key]);
       return;
     }
     const moveOffset = {
@@ -443,7 +550,7 @@ let DaikinDatePicker = class extends DDSFormElement {
         target.value = this._formatPartsForUI(newParts);
         this._updateSelection(this._currentSelection);
       }
-      this._updateValue(event);
+      this._updateValue(target);
       return;
     }
     if (key.length <= 1) {
@@ -452,10 +559,15 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
   }
   // Depending on the PC settings, a period may be entered when the space key is pressed repeatedly, so this is stopped.
-  // When this happens, the selection range changes, so this is also reset.
+  // When this happens, the selection range changes, so this is also reset to the current item.
+  // Note: _updateInputSelection is intentionally NOT used here because it always moves focus to the
+  // first item, which would break IME input on non-first fields (e.g. compositionend would always
+  // edit the first date part instead of the one the user is on).
   _handleBeforeInput(event) {
     event.preventDefault();
-    this._updateInputSelection(event.target);
+    if (!event.isComposing) {
+      this._updateSelection(this._currentSelection);
+    }
   }
   _handleSelect(event) {
     event.stopPropagation();
@@ -465,8 +577,10 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
     const target = this._dateInputElement.value;
     const value = parseDateFromProperty(calendar.value);
+    const formattedForUI = this._formatDateForUI(value);
     this.value = formatDateForProperty(value);
-    target.value = this._formatDateForUI(value);
+    target.value = formattedForUI;
+    this._inputValue = formattedForUI;
     this.error = false;
     if (event.type === "select") {
       this.open = false;
@@ -502,19 +616,46 @@ let DaikinDatePicker = class extends DDSFormElement {
       }
     }
   }
-  _updateValue(event) {
-    const target = event.target;
+  /**
+   * Returns true if all date parts (year/month/day) in the input are filled with
+   * digits and no placeholder text (YYYY, MM, DD) remains.
+   */
+  _isInputComplete(value) {
+    const parts = this._parsePartsFromUIValue(value);
+    return /^\d{4}$/.test(parts.year) && /^\d{2}$/.test(parts.month) && /^\d{2}$/.test(parts.day);
+  }
+  _updateValue(target) {
+    this._inputValue = target.value;
     if (target.value === this._getPlaceholderAll()) {
       this.error = false;
+      this.value = "";
+      return;
+    }
+    if (!this._isInputComplete(target.value)) {
+      this.error = true;
+      this.value = "";
       return;
     }
     const newDate = this._tryParseDateFromUIValue(target.value);
-    if (!newDate || isDateOutOfRange(newDate, this._min, this._max)) {
+    if (!newDate) {
+      this.error = true;
+      this.value = "";
+      return;
+    }
+    const newValue = formatDateForProperty(newDate);
+    if (isDateOutOfRange(newDate, this._min, this._max)) {
       this.error = true;
+      if (this.value !== newValue) {
+        this.value = newValue;
+        this._emitSelect();
+      }
+      return;
+    }
+    if (!this.error && !this.open && this.value === newValue) {
       return;
     }
     this.error = false;
-    this.value = formatDateForProperty(newDate);
+    this.value = newValue;
     this.open = false;
     this._emitSelect();
   }
@@ -526,12 +667,16 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
     if (target.value === "") {
       target.value = this._getPlaceholderAll();
+      this._inputValue = this._getPlaceholderAll();
     }
     const itemInfo = this._getDateItems()[0];
     (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
       itemInfo.range[0],
       itemInfo.range[1]
     );
+    this._monthDigitIndex = 0;
+    this._dayDigitIndex = 0;
+    this._yearDigitIndex = 0;
     this._currentSelection = itemInfo.type;
   }
   _updateSelection(dateItem) {
@@ -542,6 +687,11 @@ let DaikinDatePicker = class extends DDSFormElement {
     }
     const itemInfo = this._getDateItems().find(({ type }) => type === dateItem);
     if (itemInfo) {
+      if (dateItem !== this._currentSelection) {
+        if (dateItem === "month") this._monthDigitIndex = 0;
+        if (dateItem === "day") this._dayDigitIndex = 0;
+        if (dateItem === "year") this._yearDigitIndex = 0;
+      }
       (_a = this._dateInputElement.value) == null ? void 0 : _a.setSelectionRange(
         itemInfo.range[0],
         itemInfo.range[1]
@@ -574,28 +724,30 @@ let DaikinDatePicker = class extends DDSFormElement {
           ?disabled=${this.disabled}
           ?readonly=${this.readonly}
           ?required=${this.required}
-          .value=${this._value ? this._formatDateForUI(this._value) : ""}
+          .value=${this._displayValue}
           @change=${this._handleChange}
+          @compositionstart=${this._handleCompositionStart}
+          @compositionend=${this._handleCompositionEnd}
           @focusin=${this._handleFocusIn}
           @focusout=${this._handleFocusOut}
           @keydown=${this._handleKeyDown}
           @beforeinput=${this._handleBeforeInput}
           @mouseup=${this._handleMouseUp}
         />
-        <daikin-icon-button
-          ${ref(this._calendarButtonElement)}
-          class="absolute top-0 bottom-0 right-2 m-auto"
-          type="button"
-          color="neutral"
-          variant="ghost"
-          button-aria-label="Open the date picker"
-          ?disabled=${this.disabled}
-          @pointerdown=${this._handlePointerDown}
-          @pointerup=${this._handlePointerUp}
-          @keydown=${this._handleCalendarKeyDown}
-        >
-          <span class=${cvaIconButton({ intent: "calender" })}></span>
-        </daikin-icon-button>
+        ${this.readonly && !this.disabled ? nothing : html`<daikin-icon-button
+              ${ref(this._calendarButtonElement)}
+              class="absolute size-(--dds-icon-button) top-0 bottom-0 right-2 m-auto"
+              type="button"
+              color="neutral"
+              variant="ghost"
+              button-aria-label="Open the date picker"
+              ?disabled=${this.disabled}
+              @pointerdown=${this._handlePointerDown}
+              @pointerup=${this._handlePointerUp}
+              @keydown=${this._handleCalendarKeyDown}
+            >
+              <span class=${cvaIconButton({ intent: "calender" })}></span>
+            </daikin-icon-button>`}
         <span class="sr-only" aria-live="polite"
           >${this.value ? `${this._label ?? ""} Selected: ${this.value}` : ""}
         </span>
@@ -604,11 +756,12 @@ let DaikinDatePicker = class extends DDSFormElement {
         ${ref(this._calendarElement)}
         ${this._focusTrapController.refContainer()}
         id="calendar"
-        value=${this._value ? formatDateForProperty(this._value) : nothing}
+        value=${this._dateValue ? formatDateForProperty(this._dateValue) : nothing}
         min=${formatDateForProperty(min)}
         max=${formatDateForProperty(max)}
         default-value=${ifDefined(this.defaultValue)}
-        popover="manual"
+        locale=${ifDefined(this.locale)}
+        .popover=${"manual"}
         class="absolute left-(--floating-x,0) top-(--floating-y,0)"
         @toggle=${this._handleToggle}
         @select=${this._handleSelect}
@@ -682,6 +835,7 @@ let DaikinDatePicker = class extends DDSFormElement {
   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;
@@ -693,7 +847,28 @@ DaikinDatePicker.styles = css`
     :host {
       display: flex;
       align-items: center;
-      height: 3rem;
+      height: var(--dds-input-height, 3rem);
+    }
+
+    :host([readonly]:not([disabled])) input {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:hover,
+    :host([readonly]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-surface-secondary);
+      background-color: var(--dds-color-common-surface-secondary);
+    }
+
+    :host([readonly]:not([disabled])) input:focus-visible {
+      --color-base: var(--dds-color-common-border-focus);
+    }
+
+    :host([readonly][error]:not([disabled])) input,
+    :host([readonly][error]:not([disabled])) input:hover,
+    :host([readonly][error]:not([disabled])) input:active {
+      --color-base: var(--dds-color-common-danger-default);
     }
 
     daikin-calendar[popover] {
@@ -738,6 +913,9 @@ __decorateClass([
 __decorateClass([
   property({ type: String, reflect: true })
 ], DaikinDatePicker.prototype, "locale", 2);
+__decorateClass([
+  property({ type: String, reflect: true, attribute: "input-locale" })
+], DaikinDatePicker.prototype, "inputLocale", 2);
 __decorateClass([
   state()
 ], DaikinDatePicker.prototype, "_label", 2);

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

@@ -142,7 +142,7 @@ let DaikinDrawer = class extends DDSElement {
   render() {
     return html`<div
         class=${cvaBackDrop({ open: this.open, placement: this.placement })}
-        ?inert=${!this.open}
+        .inert=${!this.open}
         aria-hidden=${ifDefined(!this.open ? "true" : void 0)}
         @click=${this._handleBackdropClick}
       >

package/dist/es-dev/components/dropdown/daikin-dropdown.d.ts

@@ -19,6 +19,7 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * @fires toggle - A custom event emitted when the dropdown menu opens or closes.
  *
  * @slot - Dropdown item list slot. Place `daikin-dropdown-item` elements here.
+ * @slot left-icon - A slot for an icon to be placed to the left of the text. Place `daikin-icon` or something similar.
  *
  * @example
  *
@@ -36,6 +37,7 @@ import { DaikinInputGroup } from "../input-group/index.js";
  * ```
  */
 export declare class DaikinDropdown extends DDSFormElement {
+    private static _activeOpenByRoot;
     static readonly styles: import('lit').CSSResult;
     /**
      * Placeholder text of the dropdown.
@@ -45,6 +47,10 @@ export declare class DaikinDropdown extends DDSFormElement {
      * Whether the dropdown is disabled.
      */
     disabled: boolean;
+    /**
+     * Whether the dropdown is readonly.
+     */
+    readonly: boolean;
     /**
      * Whether the dropdown is required.
      */
@@ -84,6 +90,8 @@ export declare class DaikinDropdown extends DDSFormElement {
     private get _selectionLabels();
     private _initialUpdateCompleted;
     private _autoUpdateController;
+    private readonly _readonlyController;
+    private _clickOutsideController;
     private _willBeFocusedByPress;
     /**
      * Last focused dropdown item.
@@ -91,6 +99,8 @@ export declare class DaikinDropdown extends DDSFormElement {
      */
     private _lastFocusedItem;
     private _dropdownRef;
+    private get _isMenuOpen();
+    private _syncSingleOpenState;
     private _searchItem;
     private _moveFocus;
     private _updateFormValue;
@@ -106,6 +116,8 @@ export declare class DaikinDropdown extends DDSFormElement {
      */
     private _handleSelectOption;
     private _handleFocusOut;
+    private _closeDropdownByBlur;
+    private _onClickOutside;
     /**
      * Removes the last selected option.
      *
@@ -141,6 +153,7 @@ export declare class DaikinDropdown extends DDSFormElement {
     focus(options?: FocusOptions): void;
     protected willUpdate(changedProperties: PropertyValues): void;
     protected updated(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
     /**
      * This method is used by `daikin-input-group` to reflect it's attributes to this component.
      * @private