@carbon/web-components 2.60.0 → 2.61.0

package/es/components/date-picker/next/components/date-picker-input.js

@@ -0,0 +1,334 @@
+/**
+ * Copyright IBM Corp. 2026
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import "../../../../globals/settings.js";
+import { carbonElement } from "../../../../globals/decorators/carbon-element.js";
+import __decorate from "../../../../_virtual/_@oxc-project_runtime@0.139.0/helpers/esm/decorate.js";
+import iconLoader from "../../../../globals/internal/icon-loader.js";
+import FocusMixin from "../../../../globals/mixins/focus.js";
+import { FORM_ELEMENT_COLOR_SCHEME } from "../../../../globals/shared-enums.js";
+import { DATE_PICKER_INPUT_KIND } from "../../defs.js";
+import date_picker_default from "./date-picker.scss.js";
+import { LitElement, html } from "lit";
+import { property, query, state } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import WarningFilled16 from "@carbon/icons/es/warning--filled/16.js";
+import WarningAltFilled16 from "@carbon/icons/es/warning--alt--filled/16.js";
+import Calendar16 from "@carbon/icons/es/calendar/16.js";
+//#region src/components/date-picker/next/components/date-picker-input.ts
+/**
+* Copyright IBM Corp. 2026
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+* The input box for date picker.
+*
+* @element cds-preview-date-picker-input
+*/
+let CDSDatePickerInput = class CDSDatePickerInput extends FocusMixin(LitElement) {
+	constructor(..._args) {
+		super(..._args);
+		this._hasAILabel = false;
+		this._handleInputClick = () => {
+			this.dispatchEvent(new CustomEvent(`cds-preview-date-picker-input-click`, {
+				bubbles: true,
+				composed: true,
+				detail: { inputType: this.kind || "from" }
+			}));
+		};
+		this._handleFocus = () => {
+			this.dispatchEvent(new CustomEvent(`cds-preview-date-picker-input-focus`, {
+				bubbles: true,
+				composed: true,
+				detail: { inputType: this.kind || "from" }
+			}));
+		};
+		this._handleBlur = () => {
+			this.dispatchEvent(new CustomEvent(`cds-preview-date-picker-input-blur`, {
+				bubbles: true,
+				composed: true,
+				detail: { inputType: this.kind || "from" }
+			}));
+		};
+		this._hasHelperText = false;
+		this.colorScheme = "";
+		this.disabled = false;
+		this.hideLabel = false;
+		this.invalid = false;
+		this.invalidText = "";
+		this.kind = "simple";
+		this.readonly = false;
+		this.required = false;
+		this.short = false;
+		this.size = "md";
+		this.warn = false;
+		this.warnText = "";
+	}
+	/**
+	* Handles `slotchange` event.
+	*
+	* @param {object} root0 - Event object
+	* @param {EventTarget} root0.target - The event target
+	*/
+	_handleAILabelSlotChange({ target }) {
+		const hasContent = target.assignedNodes().filter((elem) => elem.matches !== void 0 ? elem.matches(this.constructor.aiLabelItem) || elem.matches(this.constructor.slugItem) : false);
+		this._hasAILabel = Boolean(hasContent);
+		hasContent[0].setAttribute("size", "mini");
+		this.requestUpdate();
+	}
+	/**
+	* Handles `click` event on the calendar icon button.
+	* Dispatches a custom event and does NOT move focus to the text input,
+	* matching the React implementation where the icon is a separate button.
+	*
+	* @param {MouseEvent} event - The click event.
+	*/
+	_handleIconButtonClick(event) {
+		event.stopPropagation();
+		this.dispatchEvent(new CustomEvent(`cds-preview-date-picker-icon-click`, {
+			bubbles: true,
+			composed: true
+		}));
+	}
+	/**
+	* Handles `input` event on `<input>` in the shadow DOM.
+	*
+	* @param {Event} event - The event.
+	* @param {HTMLInputElement} event.target - The event target.
+	*/
+	_handleInput({ target }) {
+		const { value } = target;
+		this.value = value;
+	}
+	/**
+	* @returns The template for the calendar icon button.
+	* Rendered as a focusable-false button (tabindex="-1") so clicking it does
+	* not move focus to the text input — matching the React implementation.
+	*/
+	_renderIcon() {
+		if (this.kind === "simple") return;
+		return html`<button
+      type="button"
+      class="${"cds"}--date-picker__icon"
+      ?disabled="${this.disabled || this.readonly}"
+      aria-label="Open calendar"
+      tabindex="-1"
+      @click="${this._handleIconButtonClick}">
+      ${iconLoader(Calendar16, {
+			focusable: "false",
+			"aria-hidden": "true"
+		})}
+    </button>`;
+	}
+	/**
+	* Handles `slotchange` event on the default `<slot>`.
+	*
+	* @param {object} root0 - Event object
+	* @param {EventTarget} root0.target - The event target
+	*/
+	_handleSlotChange({ target }) {
+		if (!target.name) {
+			const hasContent = target.assignedNodes().some((node) => node.nodeType !== Node.TEXT_NODE || node.textContent.trim());
+			this._hasHelperText = hasContent;
+		}
+	}
+	/**
+	* Renders the component template.
+	*
+	* @returns {TemplateResult} The template result
+	*/
+	render() {
+		const constructor = this.constructor;
+		const { disabled, _hasHelperText: hasHelperText, hideLabel, invalid, invalidText, labelText, pattern = constructor.defaultPattern, placeholder, readonly, size, type = constructor.defaultType, value, warn, warnText, _handleInput: handleInput, _handleFocus: handleFocus, _handleBlur: handleBlur, _handleInputClick: handleInputClick, _hasAILabel: hasAILabel } = this;
+		const invalidIcon = iconLoader(WarningFilled16, { class: `cds--date-picker__icon cds--date-picker__icon--invalid` });
+		const warnIcon = iconLoader(WarningAltFilled16, { class: `cds--date-picker__icon cds--date-picker__icon--warn` });
+		const normalizedProps = {
+			disabled: disabled && !readonly,
+			invalid: invalid && !readonly && !disabled,
+			warn: warn && !readonly && !disabled && !invalid,
+			"slot-name": "",
+			"slot-text": "",
+			icon: null
+		};
+		if (normalizedProps.invalid) {
+			normalizedProps.icon = invalidIcon;
+			normalizedProps["slot-name"] = "invalid-text";
+			normalizedProps["slot-text"] = invalidText;
+		} else if (normalizedProps.warn) {
+			normalizedProps.icon = warnIcon;
+			normalizedProps["slot-name"] = "warn-text";
+			normalizedProps["slot-text"] = warnText;
+		}
+		const labelClasses = classMap({
+			[`cds--label`]: true,
+			[`cds--visually-hidden`]: hideLabel,
+			[`cds--label--disabled`]: disabled
+		});
+		const inputClasses = classMap({
+			[`cds--date-picker__input`]: true,
+			[`cds--date-picker__input--invalid`]: normalizedProps.invalid,
+			[`cds--date-picker__input--warn`]: normalizedProps.warn,
+			[`cds--date-picker__input--${size}`]: size,
+			[`cds--date-picker__input--decorator`]: hasAILabel
+		});
+		const inputWrapperClasses = classMap({
+			[`cds--date-picker-input__wrapper`]: true,
+			[`cds--date-picker-input__wrapper--invalid`]: normalizedProps.invalid,
+			[`cds--date-picker-input__wrapper--warn`]: normalizedProps.warn
+		});
+		const helperTextClasses = classMap({
+			[`cds--form__helper-text`]: true,
+			[`cds--form__helper-text--disabled`]: disabled
+		});
+		return html`
+      <label for="input" class="${labelClasses}">
+        <slot name="label-text">${labelText}</slot>
+      </label>
+      <div class="${inputWrapperClasses}">
+        <span>
+          <input
+            id="input"
+            type="${type}"
+            class="${inputClasses}"
+            ?disabled="${normalizedProps.disabled}"
+            pattern="${pattern}"
+            placeholder="${ifDefined(placeholder)}"
+            .value="${ifDefined(value)}"
+            ?data-invalid="${normalizedProps.invalid}"
+            @input="${handleInput}"
+            @focus="${handleFocus}"
+            @blur="${handleBlur}"
+            @click="${handleInputClick}"
+            ?readonly="${readonly}" />
+          ${normalizedProps.icon || this._renderIcon()}
+          <slot
+            name="ai-label"
+            @slotchange="${this._handleAILabelSlotChange}"></slot>
+          <slot
+            name="slug"
+            @slotchange="${this._handleAILabelSlotChange}"></slot>
+        </span>
+      </div>
+      <div
+        class="${"cds"}--form-requirement"
+        ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
+        <slot name="${normalizedProps["slot-name"]}">
+          ${normalizedProps["slot-text"]}
+        </slot>
+      </div>
+      <div ?hidden="${!hasHelperText}" class="${helperTextClasses}">
+        <slot name="helper-text" @slotchange="${this._handleSlotChange}"></slot>
+      </div>
+    `;
+	}
+	/**
+	* Lifecycle method called after component updates.
+	*/
+	updated() {
+		this.toggleAttribute("ai-label", this._hasAILabel);
+		const label = this.shadowRoot?.querySelector("slot[name='ai-label']");
+		if (label) label?.classList.toggle(`cds--slug--revert`, this.querySelector(`cds-ai-label`)?.hasAttribute("revert-active"));
+		else this.shadowRoot?.querySelector("slot[name='slug']")?.classList.toggle(`cds--slug--revert`, this.querySelector(`cds-slug`)?.hasAttribute("revert-active"));
+	}
+	static {
+		this.defaultPattern = "\\d{1,2}\\/\\d{1,2}\\/\\d{4}";
+	}
+	static {
+		this.defaultType = "text";
+	}
+	/**
+	* A selector that will return the parent date picker.
+	*/
+	static get selectorParent() {
+		return `cds-preview-date-picker`;
+	}
+	/**
+	* A selector that will return the slug item.
+	*
+	* remove in v12
+	*/
+	static get slugItem() {
+		return `cds-slug`;
+	}
+	/**
+	* A selector that will return the AI Label item.
+	*/
+	static get aiLabelItem() {
+		return `cds-ai-label`;
+	}
+	/**
+	* The name of the custom event fired when the input is clicked.
+	*/
+	static get inputClickEventName() {
+		return `cds-preview-date-picker-input-click`;
+	}
+	static {
+		this.shadowRootOptions = {
+			...LitElement.shadowRootOptions,
+			delegatesFocus: true
+		};
+	}
+	static {
+		this.styles = date_picker_default;
+	}
+};
+__decorate([state()], CDSDatePickerInput.prototype, "_hasHelperText", void 0);
+__decorate([query("input")], CDSDatePickerInput.prototype, "input", void 0);
+__decorate([property({
+	attribute: "color-scheme",
+	reflect: true
+})], CDSDatePickerInput.prototype, "colorScheme", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePickerInput.prototype, "disabled", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true,
+	attribute: "hide-label"
+})], CDSDatePickerInput.prototype, "hideLabel", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePickerInput.prototype, "invalid", void 0);
+__decorate([property({ attribute: "invalid-text" })], CDSDatePickerInput.prototype, "invalidText", void 0);
+__decorate([property({ reflect: true })], CDSDatePickerInput.prototype, "kind", void 0);
+__decorate([property({ attribute: "label-text" })], CDSDatePickerInput.prototype, "labelText", void 0);
+__decorate([property()], CDSDatePickerInput.prototype, "pattern", void 0);
+__decorate([property()], CDSDatePickerInput.prototype, "placeholder", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePickerInput.prototype, "readonly", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePickerInput.prototype, "required", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePickerInput.prototype, "short", void 0);
+__decorate([property({
+	attribute: "size",
+	reflect: true
+})], CDSDatePickerInput.prototype, "size", void 0);
+__decorate([property()], CDSDatePickerInput.prototype, "type", void 0);
+__decorate([property()], CDSDatePickerInput.prototype, "value", void 0);
+__decorate([property({
+	type: Boolean,
+	reflect: true
+})], CDSDatePickerInput.prototype, "warn", void 0);
+__decorate([property({ attribute: "warn-text" })], CDSDatePickerInput.prototype, "warnText", void 0);
+CDSDatePickerInput = __decorate([carbonElement(`cds-preview-date-picker-input`)], CDSDatePickerInput);
+var date_picker_input_default = CDSDatePickerInput;
+//#endregion
+export { FORM_ELEMENT_COLOR_SCHEME as DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND, date_picker_input_default as default };
+
+//# sourceMappingURL=date-picker-input.js.map

package/es/components/date-picker/next/components/date-picker-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-picker-input.js","names":["styles","customElement"],"sources":["../../../../../src/components/date-picker/next/components/date-picker-input.ts"],"sourcesContent":["/**\n * Copyright IBM Corp. 2026\n *\n * This source code is licensed under the Apache-2.0 license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { LitElement, html } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { prefix } from '../../../../globals/settings';\nimport FocusMixin from '../../../../globals/mixins/focus';\nimport {\n  INPUT_SIZE,\n  DATE_PICKER_INPUT_COLOR_SCHEME,\n  DATE_PICKER_INPUT_KIND,\n} from '../../defs';\nimport styles from './date-picker.scss?lit';\nimport Calendar16 from '@carbon/icons/es/calendar/16.js';\nimport WarningFilled16 from '@carbon/icons/es/warning--filled/16.js';\nimport WarningAltFilled16 from '@carbon/icons/es/warning--alt--filled/16.js';\nimport { carbonElement as customElement } from '../../../../globals/decorators/carbon-element';\nimport { iconLoader } from '../../../../globals/internal/icon-loader';\n\nexport { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND };\n\n/**\n * The input box for date picker.\n *\n * @element cds-preview-date-picker-input\n */\n@customElement(`${prefix}-preview-date-picker-input`)\nclass CDSDatePickerInput extends FocusMixin(LitElement) {\n  /**\n   * `true` if there is an AI Label.\n   */\n  private _hasAILabel = false;\n\n  /**\n   * Handles `slotchange` event.\n   *\n   * @param {object} root0 - Event object\n   * @param {EventTarget} root0.target - The event target\n   */\n  protected _handleAILabelSlotChange({ target }: Event) {\n    const hasContent = (target as HTMLSlotElement)\n      .assignedNodes()\n      .filter((elem) =>\n        (elem as HTMLElement).matches !== undefined\n          ? (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSDatePickerInput).aiLabelItem\n            ) ||\n            // remove reference to slug in v12\n            (elem as HTMLElement).matches(\n              (this.constructor as typeof CDSDatePickerInput).slugItem\n            )\n          : false\n      );\n\n    this._hasAILabel = Boolean(hasContent);\n    (hasContent[0] as HTMLElement).setAttribute('size', 'mini');\n    this.requestUpdate();\n  }\n\n  /**\n   * Handles `click` event on the calendar icon button.\n   * Dispatches a custom event and does NOT move focus to the text input,\n   * matching the React implementation where the icon is a separate button.\n   *\n   * @param {MouseEvent} event - The click event.\n   */\n  private _handleIconButtonClick(event: MouseEvent) {\n    event.stopPropagation();\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-preview-date-picker-icon-click`, {\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  /**\n   * Handles `click` event on `<input>` in the shadow DOM.\n   * Dispatches a custom event so the parent date picker can reopen the calendar\n   * when the input already has focus (clicking a focused input does not fire\n   * a new `focus` event, so a dedicated click event is required).\n   */\n  private _handleInputClick = () => {\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-preview-date-picker-input-click`, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          inputType: this.kind || 'from',\n        },\n      })\n    );\n  };\n\n  /**\n   * Handles `input` event on `<input>` in the shadow DOM.\n   *\n   * @param {Event} event - The event.\n   * @param {HTMLInputElement} event.target - The event target.\n   */\n  private _handleInput({ target }: Event) {\n    const { value } = target as HTMLInputElement;\n    this.value = value;\n  }\n\n  /**\n   * Handles `focus` event on `<input>` in the shadow DOM.\n   */\n  private _handleFocus = () => {\n    // Dispatch custom event for input focus\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-preview-date-picker-input-focus`, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          inputType: this.kind || 'from',\n        },\n      })\n    );\n  };\n\n  /**\n   * Handles `blur` event on `<input>` in the shadow DOM.\n   */\n  private _handleBlur = () => {\n    // Dispatch custom event for input blur\n    this.dispatchEvent(\n      new CustomEvent(`${prefix}-preview-date-picker-input-blur`, {\n        bubbles: true,\n        composed: true,\n        detail: {\n          inputType: this.kind || 'from',\n        },\n      })\n    );\n  };\n\n  /**\n   * @returns The template for the calendar icon button.\n   * Rendered as a focusable-false button (tabindex=\"-1\") so clicking it does\n   * not move focus to the text input — matching the React implementation.\n   */\n  private _renderIcon() {\n    if (this.kind === DATE_PICKER_INPUT_KIND.SIMPLE) {\n      return undefined;\n    }\n    return html`<button\n      type=\"button\"\n      class=\"${prefix}--date-picker__icon\"\n      ?disabled=\"${this.disabled || this.readonly}\"\n      aria-label=\"Open calendar\"\n      tabindex=\"-1\"\n      @click=\"${this._handleIconButtonClick}\">\n      ${iconLoader(Calendar16, { focusable: 'false', 'aria-hidden': 'true' })}\n    </button>`;\n  }\n\n  /**\n   * `true` if there is helper text content.\n   */\n  @state()\n  protected _hasHelperText = false;\n\n  /**\n   * Handles `slotchange` event on the default `<slot>`.\n   *\n   * @param {object} root0 - Event object\n   * @param {EventTarget} root0.target - The event target\n   */\n  protected _handleSlotChange({ target }: Event) {\n    if (!(target as HTMLSlotElement).name) {\n      const hasContent = (target as HTMLSlotElement).assignedNodes().some(\n        (node) =>\n          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion -- https://github.com/carbon-design-system/carbon/issues/20452\n          node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()\n      );\n      this._hasHelperText = hasContent;\n    }\n  }\n\n  /**\n   * The `<input>`, used for Flatpickr to grab.\n   */\n  @query('input')\n  input!: HTMLInputElement;\n\n  /**\n   * The color scheme.\n   */\n  @property({ attribute: 'color-scheme', reflect: true })\n  colorScheme = DATE_PICKER_INPUT_COLOR_SCHEME.REGULAR;\n\n  /**\n   * `true` if the check box should be disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * `true` if the label should be hidden.\n   */\n  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })\n  hideLabel = false;\n\n  /**\n   * Controls the invalid state and visibility of the `validityMessage`.\n   */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /**\n   * Message which is displayed if the value is invalid.\n   */\n  @property({ attribute: 'invalid-text' })\n  invalidText = '';\n\n  /**\n   * Date picker input kind.\n   */\n  @property({ reflect: true })\n  kind = DATE_PICKER_INPUT_KIND.SIMPLE;\n\n  /**\n   * The label text.\n   */\n  @property({ attribute: 'label-text' })\n  labelText!: string;\n\n  /**\n   * The `pattern` attribute for the `<input>` in the shadow DOM.\n   */\n  @property()\n  pattern!: string;\n\n  /**\n   * The placeholder text.\n   */\n  @property()\n  placeholder!: string;\n\n  /**\n   * Specify if the component should be read-only\n   */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /**\n   * `true` if the value is required.\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * true to use the short version.\n   */\n  @property({ type: Boolean, reflect: true })\n  short = false;\n\n  /**\n   * Vertical size of this date picker input.\n   */\n  @property({ attribute: 'size', reflect: true })\n  size = INPUT_SIZE.MEDIUM;\n\n  /**\n   * The `type` attribute for the `<input>` in the shadow DOM.\n   */\n  @property()\n  type!: string;\n\n  /**\n   * The value.\n   */\n  @property()\n  value!: string;\n\n  /**\n   * Specify whether the control is currently in warning state\n   */\n  @property({ type: Boolean, reflect: true })\n  warn = false;\n\n  /**\n   * Provide the text that is displayed when the control is in warning state\n   */\n  @property({ attribute: 'warn-text' })\n  warnText = '';\n\n  /**\n   * Renders the component template.\n   *\n   * @returns {TemplateResult} The template result\n   */\n  render() {\n    const constructor = this.constructor as typeof CDSDatePickerInput;\n    const {\n      disabled,\n      _hasHelperText: hasHelperText,\n      hideLabel,\n      invalid,\n      invalidText,\n      labelText,\n      pattern = constructor.defaultPattern,\n      placeholder,\n      readonly,\n      size,\n      type = constructor.defaultType,\n      value,\n      warn,\n      warnText,\n      _handleInput: handleInput,\n      _handleFocus: handleFocus,\n      _handleBlur: handleBlur,\n      _handleInputClick: handleInputClick,\n      _hasAILabel: hasAILabel,\n    } = this;\n\n    const invalidIcon = iconLoader(WarningFilled16, {\n      class: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`,\n    });\n\n    const warnIcon = iconLoader(WarningAltFilled16, {\n      class: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn`,\n    });\n\n    const normalizedProps: {\n      disabled: boolean;\n      invalid: boolean;\n      warn: boolean;\n      'slot-name': string;\n      'slot-text': string;\n      icon: ReturnType<typeof iconLoader>;\n    } = {\n      disabled: disabled && !readonly,\n      invalid: invalid && !readonly && !disabled,\n      warn: warn && !readonly && !disabled && !invalid,\n      'slot-name': '',\n      'slot-text': '',\n      icon: null,\n    };\n\n    if (normalizedProps.invalid) {\n      normalizedProps.icon = invalidIcon;\n      normalizedProps['slot-name'] = 'invalid-text';\n      normalizedProps['slot-text'] = invalidText;\n    } else if (normalizedProps.warn) {\n      normalizedProps.icon = warnIcon;\n      normalizedProps['slot-name'] = 'warn-text';\n      normalizedProps['slot-text'] = warnText;\n    }\n\n    const labelClasses = classMap({\n      [`${prefix}--label`]: true,\n      [`${prefix}--visually-hidden`]: hideLabel,\n      [`${prefix}--label--disabled`]: disabled,\n    });\n    const inputClasses = classMap({\n      [`${prefix}--date-picker__input`]: true,\n      [`${prefix}--date-picker__input--invalid`]: normalizedProps.invalid,\n      [`${prefix}--date-picker__input--warn`]: normalizedProps.warn,\n      [`${prefix}--date-picker__input--${size}`]: size,\n      [`${prefix}--date-picker__input--decorator`]: hasAILabel,\n    });\n\n    const inputWrapperClasses = classMap({\n      [`${prefix}--date-picker-input__wrapper`]: true,\n      [`${prefix}--date-picker-input__wrapper--invalid`]:\n        normalizedProps.invalid,\n      [`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn,\n    });\n\n    const helperTextClasses = classMap({\n      [`${prefix}--form__helper-text`]: true,\n      [`${prefix}--form__helper-text--disabled`]: disabled,\n    });\n\n    return html`\n      <label for=\"input\" class=\"${labelClasses}\">\n        <slot name=\"label-text\">${labelText}</slot>\n      </label>\n      <div class=\"${inputWrapperClasses}\">\n        <span>\n          <input\n            id=\"input\"\n            type=\"${type}\"\n            class=\"${inputClasses}\"\n            ?disabled=\"${normalizedProps.disabled}\"\n            pattern=\"${pattern}\"\n            placeholder=\"${ifDefined(placeholder)}\"\n            .value=\"${ifDefined(value)}\"\n            ?data-invalid=\"${normalizedProps.invalid}\"\n            @input=\"${handleInput}\"\n            @focus=\"${handleFocus}\"\n            @blur=\"${handleBlur}\"\n            @click=\"${handleInputClick}\"\n            ?readonly=\"${readonly}\" />\n          ${normalizedProps.icon || this._renderIcon()}\n          <slot\n            name=\"ai-label\"\n            @slotchange=\"${this._handleAILabelSlotChange}\"></slot>\n          <slot\n            name=\"slug\"\n            @slotchange=\"${this._handleAILabelSlotChange}\"></slot>\n        </span>\n      </div>\n      <div\n        class=\"${prefix}--form-requirement\"\n        ?hidden=\"${!normalizedProps.invalid && !normalizedProps.warn}\">\n        <slot name=\"${normalizedProps['slot-name']}\">\n          ${normalizedProps['slot-text']}\n        </slot>\n      </div>\n      <div ?hidden=\"${!hasHelperText}\" class=\"${helperTextClasses}\">\n        <slot name=\"helper-text\" @slotchange=\"${this._handleSlotChange}\"></slot>\n      </div>\n    `;\n  }\n\n  /**\n   * Lifecycle method called after component updates.\n   */\n  updated() {\n    this.toggleAttribute('ai-label', this._hasAILabel);\n    const label = this.shadowRoot?.querySelector(\"slot[name='ai-label']\");\n\n    if (label) {\n      label?.classList.toggle(\n        `${prefix}--slug--revert`,\n        this.querySelector(`${prefix}-ai-label`)?.hasAttribute('revert-active')\n      );\n    } else {\n      this.shadowRoot\n        ?.querySelector(\"slot[name='slug']\")\n        ?.classList.toggle(\n          `${prefix}--slug--revert`,\n          this.querySelector(`${prefix}-slug`)?.hasAttribute('revert-active')\n        );\n    }\n  }\n\n  /**\n   * The default value for `pattern` property.\n   */\n  static defaultPattern = '\\\\d{1,2}\\\\/\\\\d{1,2}\\\\/\\\\d{4}';\n\n  /**\n   * The default value for `type` property.\n   */\n  static defaultType = 'text';\n\n  /**\n   * A selector that will return the parent date picker.\n   */\n  static get selectorParent() {\n    return `${prefix}-preview-date-picker`;\n  }\n\n  /**\n   * A selector that will return the slug item.\n   *\n   * remove in v12\n   */\n  static get slugItem() {\n    return `${prefix}-slug`;\n  }\n\n  /**\n   * A selector that will return the AI Label item.\n   */\n  static get aiLabelItem() {\n    return `${prefix}-ai-label`;\n  }\n\n  /**\n   * The name of the custom event fired when the input is clicked.\n   */\n  static get inputClickEventName() {\n    return `${prefix}-preview-date-picker-input-click`;\n  }\n\n  static shadowRootOptions = {\n    ...LitElement.shadowRootOptions,\n    delegatesFocus: true,\n  };\n  static styles = styles;\n}\n\nexport default CDSDatePickerInput;\n"],"mappings":"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"}