import "./icon-CTW4Gr4z.js";
import "./button-yMIli_DJ.js";
import { CSSResultGroup, PropertyValues } from "lit";
import { SigveloFormControlElement } from "@mcp-b/wc-support/base/sigvelo-element";
//#region src/components/file-input/file-input.d.ts
/**
 * <sigvelo-file-input>
 *
 * @summary Allows the user to select files to upload to the server.
 * @tag sigvelo-file-input
 * @documentation https://design-system.sigvelo.com/docs/components/file
 * @status stable
 * @since 1.0
 *
 * @dependency sigvelo-button
 * @dependency sigvelo-icon
 *
 * @slot label - The file input's label. For plain-text labels, you can use the `label` attribute instead.
 * @slot description - The file input's description. For plain-text descriptions, you can use the `description`
 *  attribute instead.
 * @slot dropzone - Custom content to show in the dropzone.
 *
 * @event sigvelo-blur - Emitted when the file input loses focus. This event does not bubble.
 * @event sigvelo-change - Emitted when the user selects or removes a file.
 * @event sigvelo-focus - Emitted when the file input receives focus. This event does not bubble.
 * @event sigvelo-input - Emitted when the file input receives input.
 *
 * @csspart label - The element that contains the text field's label, a `<label>` element.
 * @csspart description - The element that contains the text field's description.
 * @csspart dropzone - The bordered region where files can be dropped.
 * @csspart file-list - The list of files shown when at least one file is selected.
 * @csspart file - A selected file will be drawn in this container.
 * @csspart file-thumbnail - The container that hold's the file's image or icon.
 * @csspart file-image - The file's image preview (if it's an image).
 * @csspart file-icon - The file's icon (if it's not an image).
 * @csspart file-icon__svg - The `<svg>` part of the file icon.
 * @csspart file-details - The container that holds the filename and size.
 * @csspart file-name - The container that holds the file's name, a `<span>` element.
 * @csspart file-size - The container that holds the file's size, a `<small>` element.
 * @csspart file-actions - The container that holds the file's remove button.
 * @csspart file-remove-button - The file's remove button.
 * @csspart file-remove-button__button - The `button` part of the file's remove button.
 *
 * @cssstate disabled - Applied when the file input is disabled.
 * @cssstate blank - Applied when the file input has a blank value.
 * @cssstate focused - Applied when the file input has focus.
 * @cssstate user-valid - Applied when the file input is valid and the user has sufficiently interacted with it.
 * @cssstate user-invalid - Applied when the file input is invalid and the user has sufficiently interacted with it.
 *
 * @example Default
 * ```html
 * <sigvelo-file-input
 *   name="files"
 *   label="Select a file"
 *   description="Files must be 20MB or less"
 *   multiple
 * ></sigvelo-file-input>
 * ```
 *
 * **Note:** This component works like a [native file input](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file). Files can be posted to your server as multipart form data or you can access them via JavaScript for processing.
 *
 * @example Labels and descriptions
 * You can use the `label` and `description` attributes to provide plain text labels and descriptions for the file input. If you want to provide HTML, use the `label` and `description` slots instead.
 *
 * ```html
 * <sigvelo-file-input name="file" label="Select a file">
 *   <span slot="description">
 *     For more information, <a href="https://example.com/" target="_blank">visit our website</a>.
 *   </span>
 * </sigvelo-file-input>
 * ```
 *
 * @example Uploading with forms
 * When uploading a file from a form, you'll probably want to add `method="post"` and `enctype="multipart/form-data"` to the form so the files will be sent to the server correctly.
 *
 * ```html
 * <form
 *   id="file-input__uploading"
 *   enctype="multipart/form-data"
 *   method="post"
 *   action="about:blank"
 *   target="_blank"
 * >
 *   <sigvelo-file-input name="files" label="Select a file"></sigvelo-file-input>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Upload</sigvelo-button>
 * </form>
 *
 * <script>
 *   const form = document.getElementById('file-input__uploading');
 *
 *   form.addEventListener('submit', event => {
 *     event.preventDefault();
 *
 *     const formData = new FormData(form);
 *     console.log(...formData.values());
 *   });
 * </script>
 * ```
 *
 * @example Working with files
 * Use the `files` property to get an array of selected files. Note the use of an array instead of a `FileList`, which allows you to add, modify, and remove files more easily than a native file input.
 *
 * Try selecting a few files and then clicking each button.
 *
 * ```html
 * <sigvelo-file-input
 *   id="file-input__accessing"
 *   name="files"
 *   label="Select some files"
 *   description="Files must be 20MB or less"
 *   multiple
 * ></sigvelo-file-input>
 * <br>
 * <sigvelo-button type="submit">Reverse</sigvelo-button>
 * <sigvelo-button type="submit">Clear</sigvelo-button>
 *
 * <script>
 *   const fileInput = document.getElementById('file-input__accessing');
 *   const reverseButton = fileInput.nextElementSibling.nextElementSibling;
 *   const clearButton = reverseButton.nextElementSibling;
 *
 *   // Reverse
 *   reverseButton.addEventListener('click', event => {
 *     fileInput.files = fileInput.files.toReversed();
 *   });
 *
 *   // Clear
 *   clearButton.addEventListener('click', event => {
 *     fileInput.files = [];
 *   });
 * </script>
 * ```
 *
 * **Warning:** The `files` property must be reassigned, not mutated! Avoid using functions that mutate the array, such as [`reverse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/reverse) and [`sort()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort), because they won't trigger an update.
 *
 * @example Accepting multiple files
 * Add the `multiple` attribute to allow the file input to accept more than one file. If the user drops a folder, all files within it will be added to the file input.
 *
 * ```html
 * <sigvelo-file-input
 *   name="files"
 *   label="Select the files you want to upload"
 *   multiple
 * >
 * </sigvelo-file-input>
 * ```
 *
 * @example Accepting file types
 * To limit the file input to certain file types, set the `accept` attribute to a comma-separated string of unique file type specifiers.
 *
 * ```html
 * <sigvelo-file-input
 *   name="file"
 *   label="Upload a picture of your cat"
 *   accept="image/jpeg, image/png, image/gif, image/webp"
 * >
 * </sigvelo-file-input>
 * ```
 *
 * @example Changing the size
 * ```html
 * <sigvelo-file-input size="xs" name="xs" label="Extra small"></sigvelo-file-input><br>
 * <sigvelo-file-input size="sm" name="sm" label="Small"></sigvelo-file-input><br>
 * <sigvelo-file-input size="md" name="md" label="Medium"></sigvelo-file-input><br>
 * <sigvelo-file-input size="lg" name="lg" label="Large"></sigvelo-file-input><br>
 * <sigvelo-file-input size="xl" name="xl" label="Extra large"></sigvelo-file-input>
 * ```
 *
 * @example Custom dropzone content
 * Use the `dropzone` slot to customize what appears inside the dropzone.
 *
 * ```html
 * <sigvelo-file-input name="files" label="Upload a file" multiple>
 *   <div slot="dropzone">
 *     <sigvelo-icon name="cloud-upload" style="font-size: 2rem;"></sigvelo-icon>
 *     <br>
 *     Choose some files to send to the cloud
 *   </div>
 * </sigvelo-file-input>
 * ```
 *
 * @example Button-only file inputs
 * Button-only file inputs aren't supported, but you can achieve this pattern with a button, a native `<input type="file">`, and a bit of JavaScript. You can use the `sigvelo-vh` utility class to hide the input.
 *
 * ```html
 * <sigvelo-button id="file-input__button-only">Select files</sigvelo-button>
 * <input class="sigvelo-vh" type="file" name="file">
 *
 * <script>
 *   const button = document.getElementById('file-input__button-only');
 *   const fileInput = button.nextElementSibling;
 *
 *   // Open the system file browser when the button is clicked
 *   button.addEventListener('click', () => {
 *     fileInput.click();
 *   });
 *
 *   // Listen for files to be selected
 *   fileInput.addEventListener('change', () => {
 *     // Do something with the files
 *     console.log(...fileInput.files);
 *
 *     // Reset the input
 *     fileInput.value = '';
 *   });
 * </script>
 * ```
 *
 * @example Validation
 * The `required` attribute can be applied to enable validation using the Constraint Validation API. This will prevent form submission until the user has selected a file.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank">
 *   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 * ```
 *
 * @example Using custom validation
 * Use the `setCustomValidity()` method to make the file input invalid and show a custom error message on submit. This will override all other validation parameters. To clear the error, remove the attribute or set it to an empty string.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" id="file-input__custom-validation">
 *   <sigvelo-file-input
 *     name="file"
 *     label="Select a file"
 *     required
 *   ></sigvelo-file-input>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <script type="module">
 *   import { allDefined } from '/dist/sigvelo.js';
 *
 *   await allDefined();
 *
 *   const form = document.getElementById('file-input__custom-validation');
 *   const fileInput = form.querySelector('sigvelo-file-input');
 *
 *   fileInput.setCustomValidity('Not so fast, bubba!');
 * </script>
 * ```
 *
 * @example Styling validation
 * You can style valid and invalid file inputs using the `:valid` and `:invalid` pseudo classes.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" class="file-input__validation-pseudo">
 *   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .file-input__validation-pseudo {
 *     sigvelo-file-input:valid {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-file-input:invalid {
 *       outline: solid 2px var(--sigvelo-color-danger-border);
 *       outline-offset: .5rem;
 *     }
 *   }
 * </style>
 * ```
 *
 * However, these selectors will match even before the user has had a chance to fill out the form. More often than not, you'll want to use the `user-valid` and `user-invalid` custom states instead. This way, validation styles are only shown _after_ the user interacts with the form control or when the form is submitted.
 *
 * ```html
 * <form action="about:blank" method="get" target="_blank" class="file-input__validation-custom">
 *   <sigvelo-file-input name="file" label="Select a file" required></sigvelo-file-input>
 *   <br>
 *   <sigvelo-button type="submit" color="primary">Submit</sigvelo-button>
 *   <sigvelo-button type="reset">Reset</sigvelo-button>
 * </form>
 *
 * <style>
 *   .file-input__validation-custom {
 *     sigvelo-file-input:state(user-valid) {
 *       outline: solid 2px var(--sigvelo-color-success-border);
 *       outline-offset: .5rem;
 *     }
 *
 *     sigvelo-file-input:state(user-invalid) {
 *       outline: solid 2px var(--sigvelo-color-danger-border);
 *       outline-offset: .5rem;
 *     }
 *   }
 * </style>
 * ```
 */
declare class SigveloFileInput extends SigveloFormControlElement {
  #private;
  static formAssociated: boolean;
  static observeSlots: boolean;
  static styles: CSSResultGroup;
  private localize;
  protected get focusableAnchor(): HTMLInputElement;
  dropzone: HTMLLabelElement;
  fileInput: HTMLInputElement;
  isDragging: boolean;
  isInvalid: boolean;
  hadUserInteraction: boolean;
  wasSubmitted: boolean;
  /** An array of files that are currently selected. (Property only) */
  files: File[];
  /**
   * The text field's label. If you need to provide HTML in the label, use the `label` slot instead.
   */
  label: string;
  /**
   * The text field's description. If you need to provide HTML in the description, use the `description` slot instead.
   */
  description: string;
  /** The name of the file input. This will be submitted with the form as a name/value pair. */
  name: string;
  /** Disables the file input. */
  disabled: boolean;
  /**
   * A list of acceptable file types. Must be a comma-separated list of [unique file type
   * specifiers](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers).
   */
  accept: boolean;
  /** Allows more than one file to be selected. */
  multiple: boolean;
  /** The file input's size. */
  size: "xs" | "sm" | "md" | "lg" | "xl";
  /**
   * The form to associate this control with. If omitted, the closest containing `<form>` will be used. The value of
   * this attribute must be an ID of a form in the same document or shadow root.
   */
  form: string;
  /**
   * Makes the file input required. Form submission will not be allowed when this is set and no files are selected.
   */
  required: boolean;
  updated(changedProperties: PropertyValues<this>): void;
  /** @internal Called when the form is reset. */
  formResetCallback(): void;
  /** Converts the `this.files` array into a `FileList` object so the `<input type="file">` can be updated. */
  private getFileList;
  private handleBlur;
  private handleDragEnter;
  private handleDragLeave;
  private handleDragOver;
  private handleDrop;
  private handleFileInput;
  private handleFocus;
  private handleRemoveClick;
  /** Determines if a File object is an image type the browser can render. */
  private isImage;
  /** Returns a system icon name based on the provided mime type. */
  private mimeTypeToIconName;
  /** Updates the form value based on this.files. Call this after adding or removing files to/from this.files. */
  private updateFormValue;
  /** Sets the form control's validity */
  private updateValidity;
  render(): import("lit-html").TemplateResult<1>;
}
declare global {
  interface HTMLElementTagNameMap {
    "sigvelo-file-input": SigveloFileInput;
  }
}
//#endregion
export { SigveloFileInput as t };