@limetech/lime-elements/dist/types/components/chip-set/chip-set.d.ts

Lime Elements

import { Chip } from '../chip-set/chip.types';
import { Languages } from '../date-picker/date.types';
/**
 * :::note
 * **Regarding `click` and `interact` events:**
 *
 * The `interact` event is emitted when a chip is interacted with, and is
 * the recommended way to listen for chip interactions.
 *
 * However, if you need to handle clicks differently depending on which chip
 * was clicked, or whether the click was on a chip or elsewhere, you need to
 * listen to the native `click` event instead.
 *
 * Native `click` events are passed through, and if the click came from
 * a chip, the chip object is available in the event object under
 * `<event object>.Lime.chip`.
 *
 * Example usage:
 * ```ts
 * private handleClick(event: Event) {
 *     if (event && 'Lime' in event && (event.Lime as any).chip) {
 *         if ((event.Lime as { chip: Chip }).chip.href) {
 *             // Chip has href, so let the browser open the link.
 *             return;
 *         }
 *         // handle click on chip without href
 *     } else {
 *         // handle click elsewhere
 *     }
 * }
 * ```
 * :::
 *
 * @exampleComponent limel-example-chip-set
 * @exampleComponent limel-example-chip-set-choice
 * @exampleComponent limel-example-chip-set-filter
 * @exampleComponent limel-example-chip-set-filter-badge
 * @exampleComponent limel-example-chip-set-input
 * @exampleComponent limel-example-chip-set-input-type-with-menu-items
 * @exampleComponent limel-example-chip-set-input-type-text
 * @exampleComponent limel-example-chip-set-input-type-search
 * @exampleComponent limel-example-chip-icon-color
 * @exampleComponent limel-example-chip-set-image
 * @exampleComponent limel-example-chip-set-composite
 */
export declare class ChipSet {
  /**
   * List of chips for the set
   */
  value: Chip[];
  /**
   * Type of chip set
   *
   * - `choice` renders a set of selectable chips where only one is selectable. The `removable` property is ignored
   * - `filter` renders a set of selectable chips where all are selectable.
   * - `input` renders a set of chips that can be used in conjunction with an input field
   *
   * If no type is set, a basic set of chips without additional functionality will be rendered
   */
  type?: 'choice' | 'filter' | 'input';
  /**
   * Label for the chip-set
   */
  label: string;
  /**
   * Optional helper text to display below the chipset.
   * When type is `input`, the helper text is displayed below the
   * input field when it has focus.
   * When type is not `input`, the helper text is always displayed
   * if the device is touch screen; otherwise it is shown when chip-set
   * is hovered or focused using keyboard navigation.
   */
  helperText: string;
  /**
   * True if the chip set should be disabled
   */
  disabled: boolean;
  /**
   * For chip-sets of type `input`, set to `true` to disable adding and
   * removing chips, but allow interaction with existing chips in the set.
   * For any other types, setting either `readonly` or `disabled` disables
   * the chip-set.
   */
  readonly: boolean;
  /**
   * Set to `true` to indicate that the current value of the input field is
   * invalid.
   */
  invalid: boolean;
  /**
   * For chip-sets of type `input`. Value to use for the `type` attribute on the
   * input field inside the chip-set.
   */
  inputType: 'search' | 'text';
  /**
   * For chip-sets of type `input`. Limits the maximum number of chips.
   * When the value is `0` or not set, no limit is applied.
   */
  maxItems: number;
  /**
   * True if the control requires a value
   */
  required: boolean;
  /**
   * Search label to display when type is `input` and component is in search mode
   */
  searchLabel: string;
  /**
   * Whether the input field should be emptied when the chip-set loses focus.
   */
  emptyInputOnBlur: boolean;
  /**
   * Whether the "Clear all" buttons should be shown
   */
  clearAllButton: boolean;
  /**
   * For chip-sets of type `input`. When the value is null, no leading icon is used.
   * Leading icon to show to the far left in the text field
   */
  leadingIcon: string;
  /**
   * For chip-set of type `input`. Sets delimiters between chips.
   */
  delimiter: string;
  /**
   * For chip-set of type `input`, defines whether the input field should have autocomplete enabled.
   * Read more about the `autocomplete` attribute
   * [here](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete).
   */
  autocomplete: string;
  /**
   * Defines the language for translations.
   * Will translate the translatable strings on the components. For example, the clear all chips label.
   */
  language: Languages;
  /**
   * Dispatched when a chip is interacted with
   */
  private readonly interact;
  /**
   * Dispatched when a chip is selected/deselected
   */
  private readonly change;
  /**
   * Emitted when an input chip set has received focus and editing in the text field has started
   */
  private readonly startEdit;
  /**
   * Emitted when an input chip set has lost focus and editing in the text field has ended
   */
  private readonly stopEdit;
  /**
   * Dispatched when the input is changed for type `input`
   */
  private readonly input;
  private readonly host;
  private editMode;
  private textValue;
  private blurred;
  private inputChipIndexSelected;
  private selectedChipIds;
  private mdcTextField;
  private readonly handleKeyDown;
  private labelId;
  constructor();
  connectedCallback(): void;
  private initialize;
  /**
   * Used to find out whether the chip-set is in edit mode.
   *
   * @returns `true` if the chip-set is in edit mode, `false` otherwise.
   */
  getEditMode(): Promise<boolean>;
  /**
   * Used to set focus to the chip-set input field.
   *
   * @param emptyInput - if `true`, any text in the input is discarded
   * @returns does not return anything, but methods have to be async
   */
  setFocus(emptyInput?: boolean): Promise<void>;
  /**
   * Used to empty the input field. Used in conjunction with `emptyInputOnBlur` to let the
   * consumer control when the input is emptied.
   *
   * @returns does not return anything, but methods have to be async
   */
  emptyInput(): Promise<void>;
  componentDidLoad(): void;
  componentDidUpdate(): void;
  disconnectedCallback(): void;
  render(): any[];
  private getContentProps;
  private renderContent;
  private readonly getValue;
  protected handleChangeChips(newValue: Chip[], oldValue: Chip[]): void;
  private renderInputChips;
  private readonly floatLabelAbove;
  private isFull;
  private isInvalid;
  private inputFieldOnChange;
  /**
   * Enter edit mode when the text field receives focus. When editMode is true, the input element will be visible
   */
  private handleTextFieldFocus;
  /**
   * Exit edit mode when the input element loses focus. This makes sure the input element does not take up any
   * additional space when the user it not typing anything
   */
  private handleInputBlur;
  private syncEmptyInput;
  private inputHidden;
  private handleTextInput;
  private emitInteraction;
  private renderChip;
  private readonly hasHelperText;
  private readonly renderHelperLine;
  private renderInputChip;
  private getChipProps;
  private readonly catchInputChipClicks;
  private isSelectableChip;
  private updateSelectedChipIds;
  private updateChoiceTypeSelectedIds;
  private isChipSelected;
  private updateFilterTypeSelectedIds;
  private removeChipIdFromSelectedChipIds;
  private addChipIdToSelectedChipIds;
  private readonly handleRemoveChip;
  private readonly removeChip;
  private renderLeadingIcon;
  private renderClearAllChipsButton;
  private readonly clearAllChipsLabel;
  private handleDeleteAllIconClick;
  private renderDelimiter;
  private triggerIconColorWarning;
}
//# sourceMappingURL=chip-set.d.ts.map