igniteui-webcomponents 6.4.0 → 6.5.0

package/components/file-input/file-input.d.ts

@@ -34,13 +34,20 @@ export default class IgcFileInputComponent extends IgcFileInputComponent_base {
     static readonly tagName = "igc-file-input";
     static styles: import("lit").CSSResult[];
     static register(): void;
+    protected readonly _themes: import("../../theming/theming-controller.js").ThemingController;
+    protected readonly _slots: import("../common/controllers/slot.js").SlotController<"invalid" | "prefix" | "[default]" | "helper-text" | "suffix" | "value-missing" | "custom-error" | "file-selector-text" | "file-missing-text">;
+    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<FileList | null>;
     protected readonly _i18nController: import("../common/i18n/i18n-controller.js").I18nController<IFileInputResourceStrings>;
     protected get __validators(): import("../common/validators.js").Validator<IgcFileInputComponent>[];
-    protected readonly _formValue: import("../common/mixins/forms/form-value.js").FormValue<FileList | null>;
-    private _hasActivation;
     private get _fileNames();
+    /**
+     * Indicates whether the file picker dialog is currently active.
+     * Used to manage validation on blur.
+     */
+    private _filePickerActive;
     /**
      * The value of the control.
+     * Similar to native file input, this property is read-only and cannot be set programmatically.
      * @attr
      */
     set value(value: string);
@@ -59,7 +66,9 @@ export default class IgcFileInputComponent extends IgcFileInputComponent_base {
     /**
      * The multiple attribute of the control.
      * Used to indicate that a file input allows the user to select more than one file.
+     *
      * @attr
+     * @default false
      */
     multiple: boolean;
     /**
@@ -73,22 +82,15 @@ export default class IgcFileInputComponent extends IgcFileInputComponent_base {
      * @attr
      */
     autofocus: boolean;
-    /** @hidden */
-    readonly readOnly = false;
-    /** Returns the selected files, if any; otherwise returns null. */
-    get files(): FileList | null;
-    constructor();
+    /** Returns the list of selected files. */
+    get files(): FileList;
     protected _restoreDefaultValue(): void;
-    /** @hidden */
-    setSelectionRange(): void;
-    /** @hidden */
-    setRangeText(): void;
     private _handleChange;
     private _handleCancel;
     protected _handleBlur(): void;
     protected _handleClick(): void;
-    protected renderFileParts(): import("lit-html").TemplateResult<1>;
-    protected renderInput(): import("lit-html").TemplateResult<1>;
+    protected _renderFileParts(): import("lit-html").TemplateResult<1>;
+    protected _renderInput(): import("lit-html").TemplateResult<1>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/components/file-input/file-input.js

@@ -9,21 +9,42 @@ import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import IgcButtonComponent from '../button/button.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { addI18nController } from '../common/i18n/i18n-controller.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormValueFileListTransformers } from '../common/mixins/forms/form-transformers.js';
 import { createFormValueState } from '../common/mixins/forms/form-value.js';
 import { partMap } from '../common/part-map.js';
-import { bindIf, hasFiles, isEmpty } from '../common/util.js';
+import { bindIf, hasFiles } from '../common/util.js';
 import { IgcInputBaseComponent, } from '../input/input-base.js';
+import { styles as baseStyle } from '../input/themes/input.base.css.js';
+import { styles as shared } from '../input/themes/shared/input.common.css.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
 import { styles } from './themes/file-input.base.css.js';
 import { all } from './themes/themes.js';
 import { fileValidators } from './validators.js';
+const Slots = setSlots('prefix', 'suffix', 'helper-text', 'file-selector-text', 'file-missing-text', 'value-missing', 'custom-error', 'invalid');
 export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBaseComponent) {
+    constructor() {
+        super(...arguments);
+        this._themes = addThemingController(this, all);
+        this._slots = addSlotController(this, {
+            slots: Slots,
+        });
+        this._formValue = createFormValueState(this, {
+            initialValue: null,
+            transformers: FormValueFileListTransformers,
+        });
+        this._i18nController = addI18nController(this, {
+            defaultEN: FileInputResourceStringsEN,
+        });
+        this._filePickerActive = false;
+        this.multiple = false;
+        this.accept = '';
+    }
     static { this.tagName = 'igc-file-input'; }
-    static { this.styles = [...IgcInputBaseComponent.styles, styles]; }
+    static { this.styles = [baseStyle, shared, styles]; }
     static register() {
         registerComponent(IgcFileInputComponent, IgcValidationContainerComponent, IgcButtonComponent);
     }
@@ -31,19 +52,20 @@ export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBas
         return fileValidators;
     }
     get _fileNames() {
-        return hasFiles(this)
-            ? Array.from(this.files)
-                .map((file) => file.name)
-                .join(', ')
-            : null;
+        if (!hasFiles(this)) {
+            return null;
+        }
+        return Array.from(this.files)
+            .map((file) => file.name || 'unnamed')
+            .join(', ');
     }
     set value(value) {
-        if (value === '' && this.input) {
-            this.input.value = value;
+        if (value === '' && this._input) {
+            this._input.value = value;
         }
     }
     get value() {
-        return this.input?.value ?? '';
+        return this._input?.value ?? '';
     }
     set resourceStrings(value) {
         this._i18nController.resourceStrings = value;
@@ -58,51 +80,34 @@ export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBas
         return this._i18nController.locale;
     }
     get files() {
-        return this.input?.files ?? null;
-    }
-    constructor() {
-        super();
-        this._i18nController = addI18nController(this, {
-            defaultEN: FileInputResourceStringsEN,
-        });
-        this._formValue = createFormValueState(this, {
-            initialValue: null,
-            transformers: FormValueFileListTransformers,
-        });
-        this._hasActivation = false;
-        this.multiple = false;
-        this.accept = '';
-        this.readOnly = false;
-        addThemingController(this, all);
+        return this._input?.files ?? new DataTransfer().files;
     }
     _restoreDefaultValue() {
-        this.input.value = '';
+        if (this._input) {
+            this._input.value = '';
+        }
         super._restoreDefaultValue();
     }
-    setSelectionRange() { }
-    setRangeText() { }
     _handleChange() {
-        this._hasActivation = false;
+        this._filePickerActive = false;
         this._setTouchedState();
         this._formValue.setValueAndFormState(this.files);
         this.requestUpdate();
         this.emitEvent('igcChange', { detail: this.files });
     }
     _handleCancel() {
-        this._hasActivation = false;
+        this._filePickerActive = false;
         this._setTouchedState();
         this._validate();
-        this.emitEvent('igcCancel', {
-            detail: this.files,
-        });
+        this.emitEvent('igcCancel', { detail: this.files });
     }
     _handleBlur() {
-        this._hasActivation ? this._validate() : super._handleBlur();
+        this._filePickerActive ? this._validate() : super._handleBlur();
     }
     _handleClick() {
-        this._hasActivation = true;
+        this._filePickerActive = true;
     }
-    renderFileParts() {
+    _renderFileParts() {
         const emptyText = this.placeholder ?? this.resourceStrings.file_input_placeholder;
         return html `
       <div part="file-parts">
@@ -122,13 +127,13 @@ export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBas
       </div>
     `;
     }
-    renderInput() {
+    _renderInput() {
         const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';
-        const hasHelperText = !isEmpty(this._helperText);
+        const hasHelperText = this._slots.hasAssignedElements('helper-text');
         return html `
       <input
-        id=${this.inputId}
-        part=${partMap(this.resolvePartNames('input'))}
+        id=${this._inputId}
+        part=${partMap(this._resolvePartNames('input'))}
         type="file"
         ?disabled=${this.disabled}
         ?required=${this.required}
@@ -147,7 +152,7 @@ export default class IgcFileInputComponent extends EventEmitterMixin(IgcInputBas
 }
 __decorate([
     state()
-], IgcFileInputComponent.prototype, "_hasActivation", void 0);
+], IgcFileInputComponent.prototype, "_filePickerActive", void 0);
 __decorate([
     property()
 ], IgcFileInputComponent.prototype, "value", null);
@@ -158,15 +163,12 @@ __decorate([
     property()
 ], IgcFileInputComponent.prototype, "locale", null);
 __decorate([
-    property({ type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcFileInputComponent.prototype, "multiple", void 0);
 __decorate([
-    property({ type: String })
+    property()
 ], IgcFileInputComponent.prototype, "accept", void 0);
 __decorate([
     property({ type: Boolean })
 ], IgcFileInputComponent.prototype, "autofocus", void 0);
-__decorate([
-    property({ type: Boolean, attribute: false, noAccessor: true })
-], IgcFileInputComponent.prototype, "readOnly", void 0);
 //# sourceMappingURL=file-input.js.map

package/components/file-input/file-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  FileInputResourceStringsEN,\n  type IFileInputResourceStrings,\n} from 'igniteui-i18n-core';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { addI18nController } from '../common/i18n/i18n-controller.js';\nimport type { AbstractConstructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormValueFileListTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, hasFiles, isEmpty } from '../common/util.js';\nimport {\n  IgcInputBaseComponent,\n  type IgcInputComponentEventMap,\n} from '../input/input-base.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/file-input.base.css.js';\nimport { all } from './themes/themes.js';\nimport { fileValidators } from './validators.js';\n\nexport interface IgcFileInputComponentEventMap extends Omit<\n  IgcInputComponentEventMap,\n  'igcChange' | 'igcInput'\n> {\n  igcCancel: CustomEvent<FileList>;\n  igcChange: CustomEvent<FileList>;\n}\n\n/* blazorSuppress */\n/**\n * @element igc-file-input\n *\n * @slot prefix - Renders content before the input.\n * @slot suffix - Renders content after input.\n * @slot helper-text - Renders content below the input.\n * @slot file-selector-text - Renders content for the browse button when input type is file.\n * @slot file-missing-text - Renders content when input type is file and no file is chosen.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n * @fires igcCancel - Emitted when the control's file picker dialog is canceled.\n *\n * @csspart container - The main wrapper that holds all main input elements.\n * @csspart input - The native input element.\n * @csspart label - The native label element.\n * @csspart file-names - The file names wrapper when input type is 'file'.\n * @csspart file-selector-button - The browse button when input type is 'file'.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n * @csspart helper-text - The helper text wrapper.\n */\nexport default class IgcFileInputComponent extends EventEmitterMixin<\n  IgcFileInputComponentEventMap,\n  AbstractConstructor<IgcInputBaseComponent>\n>(IgcInputBaseComponent) {\n  public static readonly tagName = 'igc-file-input';\n  public static styles = [...IgcInputBaseComponent.styles, styles];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcFileInputComponent,\n      IgcValidationContainerComponent,\n      IgcButtonComponent\n    );\n  }\n\n  protected readonly _i18nController =\n    addI18nController<IFileInputResourceStrings>(this, {\n      defaultEN: FileInputResourceStringsEN,\n    });\n\n  protected override get __validators() {\n    return fileValidators;\n  }\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: null,\n    transformers: FormValueFileListTransformers,\n  });\n\n  @state()\n  private _hasActivation = false;\n\n  private get _fileNames(): string | null {\n    return hasFiles(this)\n      ? Array.from(this.files!)\n          .map((file) => file.name)\n          .join(', ')\n      : null;\n  }\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the control.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    if (value === '' && this.input) {\n      this.input.value = value;\n    }\n  }\n\n  public get value(): string {\n    return this.input?.value ?? '';\n  }\n\n  /**\n   * The resource strings for localization.\n   */\n  @property({ attribute: false })\n  public set resourceStrings(value: IFileInputResourceStrings) {\n    this._i18nController.resourceStrings = value;\n  }\n\n  public get resourceStrings(): IFileInputResourceStrings {\n    return this._i18nController.resourceStrings;\n  }\n\n  /**\n   * Gets/Sets the locale used for getting language, affecting resource strings.\n   * @attr locale\n   */\n  @property()\n  public set locale(value: string) {\n    this._i18nController.locale = value;\n  }\n\n  public get locale() {\n    return this._i18nController.locale;\n  }\n\n  /**\n   * The multiple attribute of the control.\n   * Used to indicate that a file input allows the user to select more than one file.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public multiple = false;\n\n  /**\n   * The accept attribute of the control.\n   * Defines the file types as a list of comma-separated values that the file input should accept.\n   * @attr\n   */\n  @property({ type: String })\n  public accept = '';\n\n  /**\n   * The autofocus attribute of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /** @hidden */\n  @property({ type: Boolean, attribute: false, noAccessor: true })\n  public override readonly readOnly = false;\n\n  /** Returns the selected files, if any; otherwise returns null. */\n  public get files(): FileList | null {\n    return this.input?.files ?? null;\n  }\n\n  constructor() {\n    super();\n    addThemingController(this, all);\n  }\n\n  protected override _restoreDefaultValue(): void {\n    this.input.value = '';\n    super._restoreDefaultValue();\n  }\n\n  /* c8 ignore next 2 */\n  /** @hidden */\n  public override setSelectionRange(): void {}\n\n  /* c8 ignore next 2 */\n  /** @hidden */\n  public override setRangeText(): void {}\n\n  private _handleChange(): void {\n    this._hasActivation = false;\n    this._setTouchedState();\n    this._formValue.setValueAndFormState(this.files);\n\n    this.requestUpdate();\n    this.emitEvent('igcChange', { detail: this.files! });\n  }\n\n  private _handleCancel(): void {\n    this._hasActivation = false;\n    this._setTouchedState();\n    this._validate();\n\n    this.emitEvent('igcCancel', {\n      detail: this.files!,\n    });\n  }\n\n  protected override _handleBlur(): void {\n    this._hasActivation ? this._validate() : super._handleBlur();\n  }\n\n  /* c8 ignore next 3 */\n  protected _handleClick(): void {\n    this._hasActivation = true;\n  }\n\n  protected override renderFileParts() {\n    const emptyText =\n      this.placeholder ?? this.resourceStrings.file_input_placeholder!;\n\n    return html`\n      <div part=\"file-parts\">\n        <div part=\"file-selector-button\">\n          <igc-button variant=\"flat\" ?disabled=${this.disabled} tabindex=\"-1\">\n            <slot name=\"file-selector-text\"\n              >${this.resourceStrings.file_input_upload_button}</slot\n            >\n          </igc-button>\n        </div>\n        <div part=\"file-names\">\n          <span>\n            ${this._fileNames ??\n            html`<slot name=\"file-missing-text\">${emptyText}</slot>`}\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  protected renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n    const hasHelperText = !isEmpty(this._helperText);\n\n    return html`\n      <input\n        id=${this.inputId}\n        part=${partMap(this.resolvePartNames('input'))}\n        type=\"file\"\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?autofocus=${this.autofocus}\n        ?multiple=${this.multiple}\n        tabindex=${bindIf(hasNegativeTabIndex, -1)}\n        accept=${bindIf(this.accept, this.accept)}\n        aria-describedby=${bindIf(hasHelperText, 'helper-text')}\n        @click=${this._handleClick}\n        @change=${this._handleChange}\n        @cancel=${this._handleCancel}\n        @blur=${this._handleBlur}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-file-input': IgcFileInputComponent;\n  }\n}\n"]}
+{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../../src/components/file-input/file-input.ts"],"names":[],"mappings":"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","sourcesContent":["import {\n  FileInputResourceStringsEN,\n  type IFileInputResourceStrings,\n} from 'igniteui-i18n-core';\nimport { html } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { addThemingController } from '../../theming/theming-controller.js';\nimport IgcButtonComponent from '../button/button.js';\nimport { addSlotController, setSlots } from '../common/controllers/slot.js';\nimport { registerComponent } from '../common/definitions/register.js';\nimport { addI18nController } from '../common/i18n/i18n-controller.js';\nimport type { AbstractConstructor } from '../common/mixins/constructor.js';\nimport { EventEmitterMixin } from '../common/mixins/event-emitter.js';\nimport { FormValueFileListTransformers } from '../common/mixins/forms/form-transformers.js';\nimport { createFormValueState } from '../common/mixins/forms/form-value.js';\nimport { partMap } from '../common/part-map.js';\nimport { bindIf, hasFiles } from '../common/util.js';\nimport {\n  IgcInputBaseComponent,\n  type IgcInputComponentEventMap,\n} from '../input/input-base.js';\nimport { styles as baseStyle } from '../input/themes/input.base.css.js';\nimport { styles as shared } from '../input/themes/shared/input.common.css.js';\nimport IgcValidationContainerComponent from '../validation-container/validation-container.js';\nimport { styles } from './themes/file-input.base.css.js';\nimport { all } from './themes/themes.js';\nimport { fileValidators } from './validators.js';\n\nexport interface IgcFileInputComponentEventMap extends Omit<\n  IgcInputComponentEventMap,\n  'igcChange' | 'igcInput'\n> {\n  igcCancel: CustomEvent<FileList>;\n  igcChange: CustomEvent<FileList>;\n}\n\nconst Slots = setSlots(\n  'prefix',\n  'suffix',\n  'helper-text',\n  'file-selector-text',\n  'file-missing-text',\n  'value-missing',\n  'custom-error',\n  'invalid'\n);\n\n/* blazorSuppress */\n/**\n * @element igc-file-input\n *\n * @slot prefix - Renders content before the input.\n * @slot suffix - Renders content after input.\n * @slot helper-text - Renders content below the input.\n * @slot file-selector-text - Renders content for the browse button when input type is file.\n * @slot file-missing-text - Renders content when input type is file and no file is chosen.\n * @slot value-missing - Renders content when the required validation fails.\n * @slot custom-error - Renders content when setCustomValidity(message) is set.\n * @slot invalid - Renders content when the component is in invalid state (validity.valid = false).\n *\n * @fires igcChange - Emitted when the control's checked state changes.\n * @fires igcCancel - Emitted when the control's file picker dialog is canceled.\n *\n * @csspart container - The main wrapper that holds all main input elements.\n * @csspart input - The native input element.\n * @csspart label - The native label element.\n * @csspart file-names - The file names wrapper when input type is 'file'.\n * @csspart file-selector-button - The browse button when input type is 'file'.\n * @csspart prefix - The prefix wrapper.\n * @csspart suffix - The suffix wrapper.\n * @csspart helper-text - The helper text wrapper.\n */\nexport default class IgcFileInputComponent extends EventEmitterMixin<\n  IgcFileInputComponentEventMap,\n  AbstractConstructor<IgcInputBaseComponent>\n>(IgcInputBaseComponent) {\n  public static readonly tagName = 'igc-file-input';\n  public static styles = [baseStyle, shared, styles];\n\n  /* blazorSuppress */\n  public static register(): void {\n    registerComponent(\n      IgcFileInputComponent,\n      IgcValidationContainerComponent,\n      IgcButtonComponent\n    );\n  }\n\n  //#region Internal attributes and properties\n\n  protected override readonly _themes = addThemingController(this, all);\n\n  protected override readonly _slots = addSlotController(this, {\n    slots: Slots,\n  });\n\n  protected override readonly _formValue = createFormValueState(this, {\n    initialValue: null,\n    transformers: FormValueFileListTransformers,\n  });\n\n  protected readonly _i18nController = addI18nController(this, {\n    defaultEN: FileInputResourceStringsEN,\n  });\n\n  protected override get __validators() {\n    return fileValidators;\n  }\n\n  private get _fileNames(): string | null {\n    if (!hasFiles(this)) {\n      return null;\n    }\n\n    return Array.from(this.files)\n      .map((file) => file.name || 'unnamed')\n      .join(', ');\n  }\n\n  /**\n   * Indicates whether the file picker dialog is currently active.\n   * Used to manage validation on blur.\n   */\n  @state()\n  private _filePickerActive = false;\n\n  //#endregion\n\n  //#region Public attributes and properties\n\n  /* @tsTwoWayProperty(true, \"igcChange\", \"detail\", false) */\n  /**\n   * The value of the control.\n   * Similar to native file input, this property is read-only and cannot be set programmatically.\n   * @attr\n   */\n  @property()\n  public set value(value: string) {\n    if (value === '' && this._input) {\n      this._input.value = value;\n    }\n  }\n\n  public get value(): string {\n    return this._input?.value ?? '';\n  }\n\n  /**\n   * The resource strings for localization.\n   */\n  @property({ attribute: false })\n  public set resourceStrings(value: IFileInputResourceStrings) {\n    this._i18nController.resourceStrings = value;\n  }\n\n  public get resourceStrings(): IFileInputResourceStrings {\n    return this._i18nController.resourceStrings;\n  }\n\n  /**\n   * Gets/Sets the locale used for getting language, affecting resource strings.\n   * @attr locale\n   */\n  @property()\n  public set locale(value: string) {\n    this._i18nController.locale = value;\n  }\n\n  public get locale(): string {\n    return this._i18nController.locale;\n  }\n\n  /**\n   * The multiple attribute of the control.\n   * Used to indicate that a file input allows the user to select more than one file.\n   *\n   * @attr\n   * @default false\n   */\n  @property({ type: Boolean, reflect: true })\n  public multiple = false;\n\n  /**\n   * The accept attribute of the control.\n   * Defines the file types as a list of comma-separated values that the file input should accept.\n   * @attr\n   */\n  @property()\n  public accept = '';\n\n  /**\n   * The autofocus attribute of the control.\n   * @attr\n   */\n  @property({ type: Boolean })\n  public override autofocus!: boolean;\n\n  /** Returns the list of selected files. */\n  public get files(): FileList {\n    return this._input?.files ?? new DataTransfer().files;\n  }\n\n  //#endregion\n\n  //#region Internal methods\n\n  protected override _restoreDefaultValue(): void {\n    if (this._input) {\n      this._input.value = '';\n    }\n    super._restoreDefaultValue();\n  }\n\n  //#endregion\n\n  //#region Event Handlers\n\n  private _handleChange(): void {\n    this._filePickerActive = false;\n    this._setTouchedState();\n    this._formValue.setValueAndFormState(this.files);\n\n    this.requestUpdate();\n    this.emitEvent('igcChange', { detail: this.files });\n  }\n\n  private _handleCancel(): void {\n    this._filePickerActive = false;\n    this._setTouchedState();\n    this._validate();\n\n    this.emitEvent('igcCancel', { detail: this.files });\n  }\n\n  protected override _handleBlur(): void {\n    this._filePickerActive ? this._validate() : super._handleBlur();\n  }\n\n  /* c8 ignore next 3 */\n  protected _handleClick(): void {\n    this._filePickerActive = true;\n  }\n\n  //#endregion\n\n  protected override _renderFileParts() {\n    const emptyText =\n      this.placeholder ?? this.resourceStrings.file_input_placeholder;\n\n    return html`\n      <div part=\"file-parts\">\n        <div part=\"file-selector-button\">\n          <igc-button variant=\"flat\" ?disabled=${this.disabled} tabindex=\"-1\">\n            <slot name=\"file-selector-text\"\n              >${this.resourceStrings.file_input_upload_button}</slot\n            >\n          </igc-button>\n        </div>\n        <div part=\"file-names\">\n          <span>\n            ${this._fileNames ??\n            html`<slot name=\"file-missing-text\">${emptyText}</slot>`}\n          </span>\n        </div>\n      </div>\n    `;\n  }\n\n  protected override _renderInput() {\n    const hasNegativeTabIndex = this.getAttribute('tabindex') === '-1';\n    const hasHelperText = this._slots.hasAssignedElements('helper-text');\n\n    return html`\n      <input\n        id=${this._inputId}\n        part=${partMap(this._resolvePartNames('input'))}\n        type=\"file\"\n        ?disabled=${this.disabled}\n        ?required=${this.required}\n        ?autofocus=${this.autofocus}\n        ?multiple=${this.multiple}\n        tabindex=${bindIf(hasNegativeTabIndex, -1)}\n        accept=${bindIf(this.accept, this.accept)}\n        aria-describedby=${bindIf(hasHelperText, 'helper-text')}\n        @click=${this._handleClick}\n        @change=${this._handleChange}\n        @cancel=${this._handleCancel}\n        @blur=${this._handleBlur}\n      />\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'igc-file-input': IgcFileInputComponent;\n  }\n}\n"]}

package/components/input/input-base.d.ts

@@ -1,6 +1,7 @@
 import { LitElement, nothing, type TemplateResult } from 'lit';
+import type { ThemingController } from '../../theming/theming-controller.js';
+import type { SlotController } from '../common/controllers/slot.js';
 import type { Constructor } from '../common/mixins/constructor.js';
-import type { RangeTextSelectMode, SelectionRangeDirection } from '../types.js';
 export interface IgcInputComponentEventMap {
     igcInput: CustomEvent<string>;
     igcChange: CustomEvent<string>;
@@ -9,26 +10,21 @@ export interface IgcInputComponentEventMap {
 }
 declare const IgcInputBaseComponent_base: Constructor<import("../common/mixins/forms/types.js").FormRequiredInterface & import("../common/mixins/forms/types.js").FormAssociatedElementInterface> & Constructor<import("../common/mixins/event-emitter.js").EventEmitterInterface<IgcInputComponentEventMap>> & Constructor<LitElement>;
 export declare abstract class IgcInputBaseComponent extends IgcInputBaseComponent_base {
-    static styles: import("lit").CSSResult[];
-    private static readonly increment;
-    protected readonly _themes: import("../../theming/theming-controller.js").ThemingController;
-    protected inputId: string;
-    /** The value attribute of the control. */
+    protected abstract readonly _themes: ThemingController;
+    protected abstract readonly _slots: SlotController<any>;
+    protected readonly _inputId: string;
+    protected readonly _input?: HTMLInputElement;
+    /** The value attribute of the control.
+     * Type varies based on the input type and can be string, Date or null.
+     */
     abstract value: string | Date | null;
-    protected input: HTMLInputElement;
-    protected _helperText: Array<HTMLElement>;
-    protected prefixes: Array<HTMLElement>;
-    protected suffixes: Array<HTMLElement>;
     /**
      * Whether the control will have outlined appearance.
+     *
      * @attr
+     * @default false
      */
     outlined: boolean;
-    /**
-     * Makes the control a readonly field.
-     * @attr readonly
-     */
-    readOnly: boolean;
     /**
      * The placeholder attribute of the control.
      * @attr
@@ -39,29 +35,30 @@ export declare abstract class IgcInputBaseComponent extends IgcInputBaseComponen
      * @attr
      */
     label: string;
-    protected createRenderRoot(): HTMLElement | DocumentFragment;
-    /** Sets focus on the control. */
-    focus(options?: FocusOptions): void;
-    /** Removes focus from the control. */
-    blur(): void;
-    protected abstract renderInput(): TemplateResult;
-    protected renderValidatorContainer(): TemplateResult;
-    protected resolvePartNames(base: string): {
+    /**
+     * Resolves the part names for the container based on the current state.
+     * Used to apply conditional styling via CSS parts.
+     */
+    protected _resolvePartNames(base: string): {
         [x: string]: boolean;
         prefixed: boolean;
         suffixed: boolean;
         filled: boolean;
     };
-    protected renderFileParts(): TemplateResult | typeof nothing;
-    /** Sets the text selection range of the control */
-    setSelectionRange(start: number, end: number, direction?: SelectionRangeDirection): void;
-    /** Replaces the selected text in the input. */
-    setRangeText(replacement: string, start: number, end: number, selectMode?: RangeTextSelectMode): void;
-    private renderPrefix;
-    private renderSuffix;
-    private renderLabel;
-    private renderMaterial;
-    private renderStandard;
-    protected render(): TemplateResult<1>;
+    /** Selects all the text inside the input. */
+    select(): void;
+    /** Sets focus on the control. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the control. */
+    blur(): void;
+    protected abstract _renderInput(): TemplateResult;
+    protected _renderFileParts(): TemplateResult | typeof nothing;
+    private _renderValidatorContainer;
+    private _renderPrefix;
+    private _renderSuffix;
+    private _renderLabel;
+    private _renderMaterial;
+    private _renderStandard;
+    protected render(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/cache.js").CacheDirective>;
 }
 export {};

package/components/input/input-base.js

@@ -4,139 +4,114 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-var IgcInputBaseComponent_1;
 import { html, LitElement, nothing } from 'lit';
-import { property, query, queryAssignedElements } from 'lit/decorators.js';
-import { addThemingController } from '../../theming/theming-controller.js';
+import { property, query } from 'lit/decorators.js';
+import { cache } from 'lit/directives/cache.js';
 import { blazorDeepImport } from '../common/decorators/blazorDeepImport.js';
 import { shadowOptions } from '../common/decorators/shadow-options.js';
 import { EventEmitterMixin } from '../common/mixins/event-emitter.js';
 import { FormAssociatedRequiredMixin } from '../common/mixins/forms/associated-required.js';
 import { partMap } from '../common/part-map.js';
-import { createCounter } from '../common/util.js';
 import IgcValidationContainerComponent from '../validation-container/validation-container.js';
-import { styles } from './themes/input.base.css.js';
-import { styles as shared } from './themes/shared/input.common.css.js';
-import { all } from './themes/themes.js';
+let nextId = 1;
 let IgcInputBaseComponent = class IgcInputBaseComponent extends FormAssociatedRequiredMixin(EventEmitterMixin(LitElement)) {
     constructor() {
         super(...arguments);
-        this._themes = addThemingController(this, all);
-        this.inputId = `input-${IgcInputBaseComponent_1.increment()}`;
+        this._inputId = `input-${nextId++}`;
         this.outlined = false;
-        this.readOnly = false;
     }
-    static { IgcInputBaseComponent_1 = this; }
-    static { this.styles = [styles, shared]; }
-    static { this.increment = createCounter(); }
-    createRenderRoot() {
-        const root = super.createRenderRoot();
-        root.addEventListener('slotchange', () => this.requestUpdate());
-        return root;
-    }
-    focus(options) {
-        this.input.focus(options);
-    }
-    blur() {
-        this.input.blur();
-    }
-    renderValidatorContainer() {
-        return IgcValidationContainerComponent.create(this);
-    }
-    resolvePartNames(base) {
+    _resolvePartNames(base) {
         return {
             [base]: true,
-            prefixed: this.prefixes.length > 0,
-            suffixed: this.suffixes.length > 0,
+            prefixed: this._slots.hasAssignedElements('prefix', {
+                selector: '[slot="prefix"]:not([hidden])',
+            }),
+            suffixed: this._slots.hasAssignedElements('suffix', {
+                selector: '[slot="suffix"]:not([hidden])',
+            }),
             filled: !!this.value,
         };
     }
-    renderFileParts() {
-        return nothing;
+    select() {
+        this._input?.select();
+    }
+    focus(options) {
+        this._input?.focus(options);
     }
-    setSelectionRange(start, end, direction = 'none') {
-        this.input.setSelectionRange(start, end, direction);
+    blur() {
+        this._input?.blur();
+    }
+    _renderFileParts() {
+        return nothing;
     }
-    setRangeText(replacement, start, end, selectMode = 'preserve') {
-        this.input.setRangeText(replacement, start, end, selectMode);
+    _renderValidatorContainer() {
+        return IgcValidationContainerComponent.create(this);
     }
-    renderPrefix() {
-        return html `<div part="prefix">
-      <slot name="prefix"></slot>
-    </div>`;
+    _renderPrefix() {
+        return html `
+      <div part="prefix">
+        <slot name="prefix"></slot>
+      </div>
+    `;
     }
-    renderSuffix() {
-        return html `<div part="suffix">
-      <slot name="suffix"></slot>
-    </div>`;
+    _renderSuffix() {
+        return html `
+      <div part="suffix">
+        <slot name="suffix"></slot>
+      </div>
+    `;
     }
-    renderLabel() {
+    _renderLabel() {
         return this.label
-            ? html `<label part="label" for=${this.inputId}> ${this.label} </label>`
+            ? html `<label part="label" for=${this._inputId}>${this.label}</label>`
             : nothing;
     }
-    renderMaterial() {
+    _renderMaterial() {
         return html `
       <div
         part=${partMap({
-            ...this.resolvePartNames('container'),
+            ...this._resolvePartNames('container'),
             labelled: !!this.label,
         })}
       >
-        <div part="start">${this.renderPrefix()}</div>
-        ${this.renderInput()} ${this.renderFileParts()}
-        <div part="notch">${this.renderLabel()}</div>
+        <div part="start">${this._renderPrefix()}</div>
+        ${this._renderInput()} ${this._renderFileParts()}
+        <div part="notch">${this._renderLabel()}</div>
         <div part="filler"></div>
-        <div part="end">${this.renderSuffix()}</div>
+        <div part="end">${this._renderSuffix()}</div>
       </div>
-      ${this.renderValidatorContainer()}
+      ${this._renderValidatorContainer()}
     `;
     }
-    renderStandard() {
-        return html `${this.renderLabel()}
-      <div part=${partMap(this.resolvePartNames('container'))}>
-        ${this.renderPrefix()} ${this.renderFileParts()} ${this.renderInput()}
-        ${this.renderSuffix()}
+    _renderStandard() {
+        return html `
+      ${this._renderLabel()}
+      <div part=${partMap(this._resolvePartNames('container'))}>
+        ${this._renderPrefix()}${this._renderFileParts()}
+        ${this._renderInput()}${this._renderSuffix()}
       </div>
-      ${this.renderValidatorContainer()}`;
+      ${this._renderValidatorContainer()}
+    `;
     }
     render() {
-        return this._themes.theme === 'material'
-            ? this.renderMaterial()
-            : this.renderStandard();
+        return cache(this._themes.theme === 'material'
+            ? this._renderMaterial()
+            : this._renderStandard());
     }
 };
 __decorate([
     query('input')
-], IgcInputBaseComponent.prototype, "input", void 0);
-__decorate([
-    queryAssignedElements({ slot: 'helper-text' })
-], IgcInputBaseComponent.prototype, "_helperText", void 0);
+], IgcInputBaseComponent.prototype, "_input", void 0);
 __decorate([
-    queryAssignedElements({
-        slot: 'prefix',
-        selector: '[slot="prefix"]:not([hidden])',
-    })
-], IgcInputBaseComponent.prototype, "prefixes", void 0);
-__decorate([
-    queryAssignedElements({
-        slot: 'suffix',
-        selector: '[slot="suffix"]:not([hidden])',
-    })
-], IgcInputBaseComponent.prototype, "suffixes", void 0);
-__decorate([
-    property({ reflect: true, type: Boolean })
+    property({ type: Boolean, reflect: true })
 ], IgcInputBaseComponent.prototype, "outlined", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true, attribute: 'readonly' })
-], IgcInputBaseComponent.prototype, "readOnly", void 0);
 __decorate([
     property()
 ], IgcInputBaseComponent.prototype, "placeholder", void 0);
 __decorate([
     property()
 ], IgcInputBaseComponent.prototype, "label", void 0);
-IgcInputBaseComponent = IgcInputBaseComponent_1 = __decorate([
+IgcInputBaseComponent = __decorate([
     blazorDeepImport,
     shadowOptions({ delegatesFocus: true })
 ], IgcInputBaseComponent);