igniteui-webcomponents 5.0.0 → 5.0.2

package/components/common/mixins/{form-associated.js → forms/associated.js}

@@ -5,23 +5,11 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
 import { property } from 'lit/decorators.js';
-export function FormAssociatedMixin(superClass) {
-    class FormAssociatedElement extends superClass {
+function BaseFormAssociated(base) {
+    class BaseFormAssociatedElement extends base {
         get __validators() {
             return [];
         }
-        get form() {
-            return this.__internals.form;
-        }
-        get validity() {
-            return this.__internals.validity;
-        }
-        get validationMessage() {
-            return this.__internals.validationMessage;
-        }
-        get willValidate() {
-            return this.__internals.willValidate;
-        }
         set disabled(value) {
             this._disabled = value;
             this.toggleAttribute('disabled', Boolean(this._disabled));
@@ -36,56 +24,51 @@ export function FormAssociatedMixin(superClass) {
         get invalid() {
             return this._invalid;
         }
+        get form() {
+            return this.__internals.form;
+        }
+        get validity() {
+            return this.__internals.validity;
+        }
+        get validationMessage() {
+            return this.__internals.validationMessage;
+        }
+        get willValidate() {
+            return this.__internals.willValidate;
+        }
         constructor(...args) {
             super(args);
             this._disabled = false;
             this._invalid = false;
             this._dirty = false;
             this.__internals = this.attachInternals();
-            this.addEventListener('invalid', this.handleInvalid);
+            this.addEventListener('invalid', this._handleInvalid);
         }
         connectedCallback() {
             super.connectedCallback();
             this._dirty = false;
-            this.setDefaultValue();
-        }
-        setDefaultValue() {
-            if ('checked' in this) {
-                this._defaultValue = this.checked;
-            }
-            else if ('value' in this) {
-                this._defaultValue = this.value;
+            this._updateValidity();
+            if (!this.hasUpdated) {
+                this._setInitialDefaultValue();
             }
         }
-        restoreDefaultValue() {
-            if ('checked' in this) {
-                this.checked = this._defaultValue;
-            }
-            else if ('value' in this) {
-                this.value = this._defaultValue;
-            }
-        }
-        handleInvalid(event) {
+        _handleInvalid(event) {
             event.preventDefault();
             this.invalid = true;
         }
-        setFormValue(value, state) {
-            this.__internals.setFormValue(value, state || value);
-        }
-        setValidity(flags, message, anchor) {
-            this.__internals.setValidity(flags, message, anchor);
-        }
-        formResetCallback() {
-            this.restoreDefaultValue();
-            this._dirty = false;
-            this.performUpdate();
-            this.invalid = false;
+        _setInvalidState() {
+            if (this.hasUpdated || this._dirty) {
+                this.invalid = !this.checkValidity();
+            }
         }
-        formDisabledCallback(state) {
-            this._disabled = state;
-            this.requestUpdate();
+        _setInitialDefaultValue() { }
+        _setDefaultValue(_prev, _current) { }
+        _restoreDefaultValue() { }
+        _validate(message) {
+            this._updateValidity(message);
+            this._setInvalidState();
         }
-        updateValidity(message) {
+        _updateValidity(message) {
             const validity = {};
             let validationMessage = '';
             for (const validator of this.__validators) {
@@ -104,11 +87,21 @@ export function FormAssociatedMixin(superClass) {
             }
             this.__internals.setValidity(validity, validationMessage);
         }
-        setInvalidState() {
-            if (this.hasUpdated || this._dirty) {
-                this.invalid = !this.checkValidity();
-            }
+        _setFormValue(value, state) {
+            this.__internals.setFormValue(value, state);
         }
+        formAssociatedCallback(_form) { }
+        formDisabledCallback(state) {
+            this._disabled = state;
+            this.requestUpdate();
+        }
+        formResetCallback() {
+            this._restoreDefaultValue();
+            this._dirty = false;
+            this.performUpdate();
+            this.invalid = false;
+        }
+        formStateRestoreCallback(_state, _mode) { }
         reportValidity() {
             return this.__internals.reportValidity();
         }
@@ -116,20 +109,72 @@ export function FormAssociatedMixin(superClass) {
             return this.__internals.checkValidity();
         }
         setCustomValidity(message) {
-            this.updateValidity(message);
+            this._updateValidity(message);
             this.invalid = !this.checkValidity();
         }
     }
-    FormAssociatedElement.formAssociated = true;
+    BaseFormAssociatedElement.formAssociated = true;
     __decorate([
         property({ reflect: true })
-    ], FormAssociatedElement.prototype, "name", void 0);
+    ], BaseFormAssociatedElement.prototype, "name", void 0);
     __decorate([
         property({ type: Boolean, reflect: true })
-    ], FormAssociatedElement.prototype, "disabled", null);
+    ], BaseFormAssociatedElement.prototype, "disabled", null);
     __decorate([
         property({ type: Boolean, reflect: true })
-    ], FormAssociatedElement.prototype, "invalid", null);
+    ], BaseFormAssociatedElement.prototype, "invalid", null);
+    return BaseFormAssociatedElement;
+}
+export function FormAssociatedMixin(base) {
+    class FormAssociatedElement extends BaseFormAssociated(base) {
+        attributeChangedCallback(name, prev, current) {
+            super.attributeChangedCallback(name, prev, current);
+            if (name === 'value') {
+                this._setDefaultValue(prev, current);
+            }
+        }
+        _setDefaultValue(_, current) {
+            this._defaultValue = current;
+        }
+        _restoreDefaultValue() {
+            if ('value' in this) {
+                this.value = this._defaultValue;
+            }
+        }
+        _setInitialDefaultValue() {
+            if ('_value' in this) {
+                this._defaultValue = this._value;
+            }
+        }
+    }
     return FormAssociatedElement;
 }
-//# sourceMappingURL=form-associated.js.map
+export function FormAssociatedCheckboxMixin(base) {
+    class FormAssociatedCheckboxElement extends BaseFormAssociated(base) {
+        constructor() {
+            super(...arguments);
+            this._defaultChecked = false;
+        }
+        attributeChangedCallback(name, prev, current) {
+            super.attributeChangedCallback(name, prev, current);
+            if (name === 'checked') {
+                this._setDefaultValue(prev, current);
+            }
+        }
+        _setDefaultValue(_, current) {
+            this._defaultChecked = current !== null;
+        }
+        _restoreDefaultValue() {
+            if ('checked' in this) {
+                this.checked = this._defaultChecked;
+            }
+        }
+        _setInitialDefaultValue() {
+            if ('checked' in this) {
+                this._defaultChecked = this.checked;
+            }
+        }
+    }
+    return FormAssociatedCheckboxElement;
+}
+//# sourceMappingURL=associated.js.map

package/components/common/mixins/forms/associated.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"associated.js","sourceRoot":"","sources":["../../../../../src/components/common/mixins/forms/associated.ts"],"names":[],"mappings":"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","sourcesContent":["import type { LitElement } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport type { Validator } from '../../validators.js';\nimport type { Constructor } from '../constructor.js';\nimport type {\n  FormAssociatedCheckboxElementInterface,\n  FormAssociatedElementInterface,\n  FormRestoreMode,\n  FormValueType,\n} from './types.js';\n\nfunction BaseFormAssociated<T extends Constructor<LitElement>>(base: T) {\n  class BaseFormAssociatedElement extends base {\n    public static readonly formAssociated = true;\n\n    private __internals: ElementInternals;\n\n    protected _disabled = false;\n    protected _invalid = false;\n    protected _dirty = false;\n\n    protected get __validators(): Validator[] {\n      return [];\n    }\n\n    /**\n     * The name attribute of the control.\n     * @attr\n     */\n    @property({ reflect: true })\n    public name!: string;\n\n    /**\n     * The disabled state of the component.\n     * @attr\n     * @default false\n     */\n    @property({ type: Boolean, reflect: true })\n    public set disabled(value: boolean) {\n      this._disabled = value;\n      this.toggleAttribute('disabled', Boolean(this._disabled));\n    }\n\n    public get disabled(): boolean {\n      return this._disabled;\n    }\n\n    /**\n     * Control the validity of the control.\n     * @attr\n     * @default false\n     */\n    @property({ type: Boolean, reflect: true })\n    public set invalid(value: boolean) {\n      this._invalid = value;\n      this.toggleAttribute('invalid', Boolean(this._invalid));\n    }\n\n    public get invalid(): boolean {\n      return this._invalid;\n    }\n\n    /** Returns the HTMLFormElement associated with this element. */\n    public get form(): HTMLFormElement | null {\n      return this.__internals.form;\n    }\n\n    /**\n     * Returns a ValidityState object which represents the different validity states\n     * the element can be in, with respect to constraint validation.\n     */\n    public get validity(): ValidityState {\n      return this.__internals.validity;\n    }\n\n    /** A string containing the validation message of this element. */\n    public get validationMessage(): string {\n      return this.__internals.validationMessage;\n    }\n\n    /**\n     * A boolean value which returns true if the element is a submittable element\n     * that is a candidate for constraint validation.\n     */\n    public get willValidate(): boolean {\n      return this.__internals.willValidate;\n    }\n\n    constructor(...args: any[]) {\n      super(args);\n      this.__internals = this.attachInternals();\n      this.addEventListener('invalid', this._handleInvalid);\n    }\n\n    public override connectedCallback(): void {\n      super.connectedCallback();\n      this._dirty = false;\n      this._updateValidity();\n\n      if (!this.hasUpdated) {\n        this._setInitialDefaultValue();\n      }\n    }\n\n    private _handleInvalid(event: Event) {\n      event.preventDefault();\n      this.invalid = true;\n    }\n\n    private _setInvalidState(): void {\n      if (this.hasUpdated || this._dirty) {\n        this.invalid = !this.checkValidity();\n      }\n    }\n\n    /* c8 ignore next 1 */\n    protected _setInitialDefaultValue(): void {}\n\n    /* c8 ignore next 4 */\n    protected _setDefaultValue(\n      _prev: string | null,\n      _current: string | null\n    ): void {}\n\n    /* c8 ignore next 1 */\n    protected _restoreDefaultValue(): void {}\n\n    protected _validate(message?: string): void {\n      this._updateValidity(message);\n      this._setInvalidState();\n    }\n\n    protected _updateValidity(message?: string) {\n      const validity: ValidityStateFlags = {};\n      let validationMessage = '';\n\n      for (const validator of this.__validators) {\n        const isValid = validator.isValid(this);\n\n        validity[validator.key] = !isValid;\n\n        if (!isValid) {\n          validationMessage =\n            typeof validator.message === 'function'\n              ? validator.message(this)\n              : validator.message;\n        }\n      }\n\n      if (message) {\n        validity.customError = true;\n        validationMessage = message;\n      }\n\n      this.__internals.setValidity(validity, validationMessage);\n    }\n\n    protected _setFormValue(value: FormValueType, state?: FormValueType): void {\n      this.__internals.setFormValue(value, state);\n    }\n\n    protected formAssociatedCallback(_form: HTMLFormElement): void {}\n\n    protected formDisabledCallback(state: boolean): void {\n      this._disabled = state;\n      this.requestUpdate();\n    }\n\n    protected formResetCallback(): void {\n      this._restoreDefaultValue();\n      this._dirty = false;\n      this.performUpdate();\n      this.invalid = false;\n    }\n\n    /* c8 ignore next 4 */\n    protected formStateRestoreCallback(\n      _state: FormValueType,\n      _mode: FormRestoreMode\n    ): void {}\n\n    /** Checks for validity of the control and shows the browser message if it invalid. */\n    public reportValidity() {\n      return this.__internals.reportValidity();\n    }\n\n    /** Checks for validity of the control and emits the invalid event if it invalid. */\n    public checkValidity() {\n      return this.__internals.checkValidity();\n    }\n\n    /**\n     * Sets a custom validation message for the control.\n     * As long as `message` is not empty, the control is considered invalid.\n     */\n    public setCustomValidity(message: string) {\n      this._updateValidity(message);\n      this.invalid = !this.checkValidity();\n    }\n  }\n  return BaseFormAssociatedElement as Constructor<BaseFormAssociatedElement> &\n    T;\n}\n\n/**\n * Mixes the passed in class and turns it into a form associated custom element.\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(\n  base: T\n) {\n  class FormAssociatedElement extends BaseFormAssociated(base) {\n    protected _defaultValue: unknown;\n\n    public override attributeChangedCallback(\n      name: string,\n      prev: string | null,\n      current: string | null\n    ): void {\n      super.attributeChangedCallback(name, prev, current);\n      if (name === 'value') {\n        this._setDefaultValue(prev, current);\n      }\n    }\n\n    protected override _setDefaultValue(\n      _: string | null,\n      current: string | null\n    ): void {\n      this._defaultValue = current;\n    }\n\n    protected override _restoreDefaultValue(): void {\n      if ('value' in this) {\n        this.value = this._defaultValue;\n      }\n    }\n\n    protected override _setInitialDefaultValue() {\n      if ('_value' in this) {\n        this._defaultValue = this._value;\n      }\n    }\n  }\n\n  return FormAssociatedElement as unknown as Constructor<FormAssociatedElementInterface> &\n    T;\n}\n\n/**\n * Mixes the passed in class and turns it into a form associated custom element.\n */\nexport function FormAssociatedCheckboxMixin<T extends Constructor<LitElement>>(\n  base: T\n) {\n  class FormAssociatedCheckboxElement extends BaseFormAssociated(base) {\n    protected _defaultChecked = false;\n\n    public override attributeChangedCallback(\n      name: string,\n      prev: string | null,\n      current: string | null\n    ): void {\n      super.attributeChangedCallback(name, prev, current);\n      if (name === 'checked') {\n        this._setDefaultValue(prev, current);\n      }\n    }\n\n    protected override _setDefaultValue(\n      _: string | null,\n      current: string | null\n    ): void {\n      this._defaultChecked = current !== null;\n    }\n\n    protected override _restoreDefaultValue(): void {\n      if ('checked' in this) {\n        this.checked = this._defaultChecked;\n      }\n    }\n\n    protected override _setInitialDefaultValue() {\n      if ('checked' in this) {\n        this._defaultChecked = this.checked as boolean;\n      }\n    }\n  }\n\n  return FormAssociatedCheckboxElement as unknown as Constructor<FormAssociatedCheckboxElementInterface> &\n    T;\n}\n"]}

package/components/common/mixins/forms/types.d.ts

@@ -0,0 +1,125 @@
+import type { Validator } from '../../validators.js';
+export type FormRestoreMode = 'autocomplete' | 'restore';
+export type FormValueType = string | File | FormData | null;
+declare class BaseFormAssociatedElement {
+    static readonly formAssociated: boolean;
+    private __internals;
+    protected _dirty: boolean;
+    protected _disabled: boolean;
+    protected _invalid: boolean;
+    protected get __validators(): Validator[];
+    /**
+     * The disabled state of the component.
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * Control the validity of the control.
+     * @attr
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * The name attribute of the control.
+     * @attr
+     */
+    name: string;
+    /** Returns the HTMLFormElement associated with this element. */
+    get form(): HTMLFormElement | null;
+    /**
+     * Returns a ValidityState object which represents the different validity states
+     * the element can be in, with respect to constraint validation.
+     */
+    get validity(): ValidityState;
+    /** A string containing the validation message of this element. */
+    get validationMessage(): string;
+    /**
+     * A boolean value which returns true if the element is a submittable element
+     * that is a candidate for constraint validation.
+     */
+    get willValidate(): boolean;
+    /**
+     * Invoked on the first `connectedCallback` run before the component has been through the
+     * firstUpdate lifecycle hook. Sets the default value to the **property** state of the value/checked member.
+     */
+    protected _setInitialDefaultValue(): void;
+    /**
+     * Sets the default value of the component.
+     * Called in `attributeChangedCallback`(i.e. when the `value` attribute of the control is set).
+     */
+    protected _setDefaultValue(prev: string | null, current: string | null): void;
+    /**
+     * Called when the associated parent form is reset.
+     */
+    protected _restoreDefaultValue(): void;
+    /**
+     * Executes the {@link BaseFormAssociatedElement._updateValidity | `_updateValidity()`} hook and then applies
+     * the {@link BaseFormAssociatedElement.invalid | `invalid`} attribute on the control and the associated styles
+     * if the element has completed the first update cycle or it has been interacted with by the user.
+     */
+    protected _validate(message?: string): void;
+    /**
+     * Executes the component's validators and updates the internal validity state.
+     */
+    protected _updateValidity(message?: string): void;
+    /**
+     * Sets the component's submission value and state.
+     */
+    protected _setFormValue(value: FormValueType, state?: FormValueType): void;
+    /**
+     * Called by the browser when it associates/disassociates the component with/from a given form element.
+     * Receives the form element as a parameter.
+     *
+     * @remarks
+     * This is not implemented currently.
+     */
+    protected formAssociatedCallback(form: HTMLFormElement): void;
+    /**
+     * Called whenever the component or a parent `fieldset` elements are disabled.
+     * Receives the current disabled state.
+     */
+    protected formDisabledCallback(state: boolean): void;
+    /**
+     * Called when the form is reset.
+     * Resets the component value/checked state to the default one, internal state and validation.
+     *
+     * @remarks
+     * The default implementation calls {@link BaseFormAssociatedElement._restoreDefaultValue | `_restoreDefaultValue`}.
+     * If additional customization is needed, it is better to override that method instead of this callback.
+     */
+    protected formResetCallback(): void;
+    /**
+     * Called when the browser attempts to automatically fill out the component.
+     *
+     * @remarks
+     * This is not implemented currently.
+     */
+    protected formStateRestoreCallback(state: FormValueType, mode: FormRestoreMode): void;
+    /** Checks for validity of the control and emits the invalid event if it invalid. */
+    checkValidity(): boolean;
+    /** Checks for validity of the control and shows the browser message if it invalid. */
+    reportValidity(): boolean;
+    /**
+     * Sets a custom validation message for the control.
+     * As long as `message` is not empty, the control is considered invalid.
+     */
+    setCustomValidity(message: string): void;
+}
+export declare class FormAssociatedElementInterface extends BaseFormAssociatedElement {
+    protected _defaultValue: unknown;
+}
+export declare class FormAssociatedCheckboxElementInterface extends BaseFormAssociatedElement {
+    protected _defaultChecked: boolean;
+}
+export declare class FormRequiredInterface {
+    protected _required: boolean;
+    /**
+     * When set, makes the component a required field for validation.
+     * @attr
+     * @default false
+     */
+    set required(value: boolean);
+    get required(): boolean;
+}
+export {};

package/components/common/mixins/forms/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.js.map

package/components/common/mixins/forms/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../../src/components/common/mixins/forms/types.ts"],"names":[],"mappings":"","sourcesContent":["import type { Validator } from '../../validators.js';\n\nexport type FormRestoreMode = 'autocomplete' | 'restore';\nexport type FormValueType = string | File | FormData | null;\n\ndeclare class BaseFormAssociatedElement {\n  public static readonly formAssociated: boolean;\n\n  private __internals: ElementInternals;\n\n  // Properties\n\n  protected _dirty: boolean;\n  protected _disabled: boolean;\n  protected _invalid: boolean;\n\n  protected get __validators(): Validator[];\n\n  /**\n   * The disabled state of the component.\n   * @attr\n   * @default false\n   */\n  public disabled: boolean;\n\n  /**\n   * Control the validity of the control.\n   * @attr\n   * @default false\n   */\n  public invalid: boolean;\n\n  /**\n   * The name attribute of the control.\n   * @attr\n   */\n  public name: string;\n\n  /** Returns the HTMLFormElement associated with this element. */\n  public get form(): HTMLFormElement | null;\n\n  /**\n   * Returns a ValidityState object which represents the different validity states\n   * the element can be in, with respect to constraint validation.\n   */\n  public get validity(): ValidityState;\n\n  /** A string containing the validation message of this element. */\n  public get validationMessage(): string;\n\n  /**\n   * A boolean value which returns true if the element is a submittable element\n   * that is a candidate for constraint validation.\n   */\n  public get willValidate(): boolean;\n\n  // Methods\n\n  /**\n   * Invoked on the first `connectedCallback` run before the component has been through the\n   * firstUpdate lifecycle hook. Sets the default value to the **property** state of the value/checked member.\n   */\n  protected _setInitialDefaultValue(): void;\n\n  /**\n   * Sets the default value of the component.\n   * Called in `attributeChangedCallback`(i.e. when the `value` attribute of the control is set).\n   */\n  protected _setDefaultValue(prev: string | null, current: string | null): void;\n\n  /**\n   * Called when the associated parent form is reset.\n   */\n  protected _restoreDefaultValue(): void;\n\n  /**\n   * Executes the {@link BaseFormAssociatedElement._updateValidity | `_updateValidity()`} hook and then applies\n   * the {@link BaseFormAssociatedElement.invalid | `invalid`} attribute on the control and the associated styles\n   * if the element has completed the first update cycle or it has been interacted with by the user.\n   */\n  protected _validate(message?: string): void;\n\n  /**\n   * Executes the component's validators and updates the internal validity state.\n   */\n  protected _updateValidity(message?: string): void;\n\n  /**\n   * Sets the component's submission value and state.\n   */\n  protected _setFormValue(value: FormValueType, state?: FormValueType): void;\n\n  /**\n   * Called by the browser when it associates/disassociates the component with/from a given form element.\n   * Receives the form element as a parameter.\n   *\n   * @remarks\n   * This is not implemented currently.\n   */\n  protected formAssociatedCallback(form: HTMLFormElement): void;\n\n  /**\n   * Called whenever the component or a parent `fieldset` elements are disabled.\n   * Receives the current disabled state.\n   */\n  protected formDisabledCallback(state: boolean): void;\n\n  /**\n   * Called when the form is reset.\n   * Resets the component value/checked state to the default one, internal state and validation.\n   *\n   * @remarks\n   * The default implementation calls {@link BaseFormAssociatedElement._restoreDefaultValue | `_restoreDefaultValue`}.\n   * If additional customization is needed, it is better to override that method instead of this callback.\n   */\n  protected formResetCallback(): void;\n\n  /**\n   * Called when the browser attempts to automatically fill out the component.\n   *\n   * @remarks\n   * This is not implemented currently.\n   */\n  protected formStateRestoreCallback(\n    state: FormValueType,\n    mode: FormRestoreMode\n  ): void;\n\n  /** Checks for validity of the control and emits the invalid event if it invalid. */\n  public checkValidity(): boolean;\n\n  /** Checks for validity of the control and shows the browser message if it invalid. */\n  public reportValidity(): boolean;\n\n  /**\n   * Sets a custom validation message for the control.\n   * As long as `message` is not empty, the control is considered invalid.\n   */\n  public setCustomValidity(message: string): void;\n}\n\nexport declare class FormAssociatedElementInterface extends BaseFormAssociatedElement {\n  protected _defaultValue: unknown;\n}\n\nexport declare class FormAssociatedCheckboxElementInterface extends BaseFormAssociatedElement {\n  protected _defaultChecked: boolean;\n}\n\nexport declare class FormRequiredInterface {\n  protected _required: boolean;\n\n  /**\n   * When set, makes the component a required field for validation.\n   * @attr\n   * @default false\n   */\n  public set required(value: boolean);\n  public get required(): boolean;\n}\n"]}

package/components/date-picker/date-picker.d.ts

@@ -12,7 +12,7 @@ export interface IgcDatepickerEventMap {
     igcChange: CustomEvent<Date>;
     igcInput: CustomEvent<Date>;
 }
-declare const IgcDatePickerComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/form-associated-required.js").FormRequiredInterface & import("../common/mixins/form-associated.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDatepickerEventMap>> & AbstractConstructor<IgcBaseComboBoxLikeComponent>;
+declare const IgcDatePickerComponent_base: import("../common/mixins/constructor.js").Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & import("../common/mixins/constructor.js").Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcDatepickerEventMap>> & AbstractConstructor<IgcBaseComboBoxLikeComponent>;
 /**
  * igc-date-picker is a feature rich component used for entering a date through manual text input or
  * choosing date values from a calendar dialog that pops up.
@@ -23,6 +23,7 @@ declare const IgcDatePickerComponent_base: import("../common/mixins/constructor.
  * @slot suffix - Renders content after the input.
  * @slot helper-text - Renders content below the input.
  * @slot title - Renders content in the calendar title.
+ * @slot header-date - Renders content instead of the current date/range in the calendar header.
  * @slot clear-icon - Renders a clear icon template.
  * @slot calendar-icon - Renders the icon/content for the calendar picker.
  * @slot calendar-icon-open - Renders the icon/content for the picker in open state.
@@ -109,6 +110,7 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     private prefixes;
     private suffixes;
     private actions;
+    private headerDateSlotItems;
     private helperText;
     protected get _isMaterialTheme(): boolean;
     /**
@@ -231,8 +233,7 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     /** Sets the start day of the week for the calendar. */
     weekStart: WeekDays;
     constructor();
-    connectedCallback(): void;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
+    protected createRenderRoot(): DocumentFragment | HTMLElement;
     /** Clears the input part of the component of any user input */
     clear(): void;
     /** Increments the passed in date part */
@@ -257,9 +258,11 @@ export default class IgcDatePickerComponent extends IgcDatePickerComponent_base
     protected handleClosing(): void;
     protected handleDialogClosing(event: Event): void;
     protected handleDialogClosed(event: Event): void;
+    protected _setDefaultValue(_: string | null, current: string | null): void;
     private setDateConstraints;
     private renderClearIcon;
     private renderCalendarIcon;
+    private renderCalendarSlots;
     private renderCalendar;
     protected renderActions(): import("lit-html").TemplateResult<1>;
     protected renderPicker(id: string): import("lit-html").TemplateResult<1>;

package/components/date-picker/date-picker.js

@@ -11,6 +11,7 @@ import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { getThemeController, themes } from '../../theming/theming-decorator.js';
 import IgcCalendarComponent, { focusActiveDate } from '../calendar/calendar.js';
+import { dateFromISOString } from '../calendar/helpers.js';
 import { DateRangeType, } from '../calendar/types.js';
 import { addKeybindings, altKey, arrowDown, arrowUp, escapeKey, } from '../common/controllers/key-bindings.js';
 import { blazorAdditionalDependencies } from '../common/decorators/blazorAdditionalDependencies.js';
@@ -19,7 +20,7 @@ import { registerComponent } from '../common/definitions/register.js';
 import { IgcCalendarResourceStringEN, } from '../common/i18n/calendar.resources.js';
 import { IgcBaseComboBoxLikeComponent } from '../common/mixins/combo-box.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
-import { FormAssociatedRequiredMixin } from '../common/mixins/form-associated-required.js';
+import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import { createCounter, findElementFromEventPath } from '../common/util.js';
 import IgcDateTimeInputComponent from '../date-time-input/date-time-input.js';
 import IgcDialogComponent from '../dialog/dialog.js';
@@ -30,10 +31,6 @@ import { styles } from './themes/date-picker.base.css.js';
 import { styles as shared } from './themes/shared/date-picker.common.css.js';
 import { all } from './themes/themes.js';
 import { datePickerValidators } from './validators.js';
-const converter = {
-    fromAttribute: (value) => (value ? new Date(value) : undefined),
-    toAttribute: (value) => value.toISOString(),
-};
 const formats = new Set(['short', 'medium', 'long', 'full']);
 let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(IgcBaseComboBoxLikeComponent)) {
     get __validators() {
@@ -50,9 +47,8 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     }
     set value(value) {
         this._value = value;
-        this.setFormValue(value ? value.toISOString() : null);
-        this.updateValidity();
-        this.setInvalidState();
+        this._setFormValue(value ? value.toISOString() : null);
+        this._validate();
     }
     get value() {
         return this._value ?? null;
@@ -66,7 +62,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     set min(value) {
         this._min = value;
         this.setDateConstraints();
-        this.updateValidity();
+        this._updateValidity();
     }
     get min() {
         return this._min;
@@ -74,7 +70,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     set max(value) {
         this._max = value;
         this.setDateConstraints();
-        this.updateValidity();
+        this._updateValidity();
     }
     get max() {
         return this._max;
@@ -82,7 +78,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     set disabledDates(dates) {
         this._disabledDates = dates;
         this.setDateConstraints();
-        this.updateValidity();
+        this._updateValidity();
     }
     get disabledDates() {
         return this._disabledDates;
@@ -131,10 +127,6 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
             .set([altKey, arrowUp], this.onEscapeKey)
             .set(escapeKey, this.onEscapeKey);
     }
-    connectedCallback() {
-        super.connectedCallback();
-        this.updateValidity();
-    }
     createRenderRoot() {
         const root = super.createRenderRoot();
         root.addEventListener('slotchange', () => this.requestUpdate());
@@ -228,6 +220,9 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
     handleDialogClosed(event) {
         event.stopPropagation();
     }
+    _setDefaultValue(_, current) {
+        this._defaultValue = dateFromISOString(current);
+    }
     setDateConstraints() {
         const dates = [];
         if (this._min) {
@@ -272,6 +267,18 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
       </span>
     `;
     }
+    renderCalendarSlots() {
+        if (this.isDropDown) {
+            return nothing;
+        }
+        const hasHeaderDate = this.headerDateSlotItems.length ? 'header-date' : '';
+        return html `
+      <slot name="title" slot="title">
+        ${this.resourceStrings.selectDate}
+      </slot>
+      <slot name="header-date" slot=${hasHeaderDate}></slot>
+    `;
+    }
     renderCalendar(id) {
         const hideHeader = this.isDropDown ? true : this.hideHeader;
         return html `
@@ -298,11 +305,7 @@ let IgcDatePickerComponent = IgcDatePickerComponent_1 = class IgcDatePickerCompo
         date-inner, first, last, inactive, hidden, weekend, range, special, disabled, single, preview,
         month, month-inner, year, year-inner, selected, current"
       >
-        ${!this.isDropDown
-            ? html `<slot name="title" slot="title"
-              >${this.resourceStrings.selectDate}</slot
-            >`
-            : nothing}
+        ${this.renderCalendarSlots()}
       </igc-calendar>
     `;
     }
@@ -428,6 +431,9 @@ __decorate([
 __decorate([
     queryAssignedElements({ slot: 'actions' })
 ], IgcDatePickerComponent.prototype, "actions", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'header-date' })
+], IgcDatePickerComponent.prototype, "headerDateSlotItems", void 0);
 __decorate([
     queryAssignedElements({ slot: 'helper-text' })
 ], IgcDatePickerComponent.prototype, "helperText", void 0);
@@ -447,16 +453,16 @@ __decorate([
     property({ type: Boolean, reflect: true, attribute: 'readonly' })
 ], IgcDatePickerComponent.prototype, "readOnly", void 0);
 __decorate([
-    property({ converter: converter })
+    property({ converter: dateFromISOString })
 ], IgcDatePickerComponent.prototype, "value", null);
 __decorate([
-    property({ attribute: 'active-date', converter: converter })
+    property({ attribute: 'active-date', converter: dateFromISOString })
 ], IgcDatePickerComponent.prototype, "activeDate", null);
 __decorate([
-    property({ converter: converter })
+    property({ converter: dateFromISOString })
 ], IgcDatePickerComponent.prototype, "min", null);
 __decorate([
-    property({ converter: converter })
+    property({ converter: dateFromISOString })
 ], IgcDatePickerComponent.prototype, "max", null);
 __decorate([
     property({ attribute: 'header-orientation', reflect: true })