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

Lime Elements

import { EventEmitter } from '../../stencil-public-runtime';
import { Icon } from '../../global/shared-types/icon.types';
import { Languages } from '../date-picker/date.types';
import { Link } from '../../global/shared-types/link.types';
import { ChipType, Chip as OldChipInterface } from '../chip-set/chip.types';
import { Image } from '../../global/shared-types/image.types';
import { ListSeparator } from '../list/list-item.types';
import { MenuItem } from '../../components';
interface ChipInterface extends Omit<OldChipInterface, 'id' | 'badge'> {
  /**
   * Identifier for the chip. Must be unique.
   */
  identifier?: number | string;
  /**
   * The value of the badge.
   */
  badge?: string | number;
}
/**
 * Chips and buttons are both interactive elements in UI design,
 * but they serve different purposes and are used in different contexts.
 *
 * :::warning
 * Do not use the chip component carelessly, as an alternative for
 * [`limel-button`](#/component/limel-button/) in the UI design!
 *
 * **Buttons:**
 * Buttons are used to trigger actions. They are typically used to
 * submit forms, open dialogs, initiate a process, or perform any action
 * that changes the state of the application.
 * Buttons' labels usually contain action words, in other words, the labels is
 * a _verb in imperative mood_ such as "Submit" or "Delete".
 * Buttons are placed in areas where it's clear they will initiate
 * an action when clicked.
 *
 * **Chips:**
 * Chips however are elements which may look like buttons, but they are
 * representing choices, filters, or tags, in a small block
 * or clearly bundled into a group. Chips are rarely used alone in the
 * user interface.
 * They are often used in a so called "chip-set", or placed together in
 * a section of the UI, where the user can expect more than one chip to be present.
 *
 * For example, a chip may represent a filter in a filter bar, or a tag in a tag list,
 * or an item in a shopping list.
 * Clicking a chip can also trigger an action, for example toggling a filter ON or OFF,
 * or opening a page with all posts tagged with the tag represented by the chip,
 * or navigating to a page with more information about the item in the shopping list.
 * :::
 *
 * @exampleComponent limel-example-chip-button
 * @exampleComponent limel-example-chip-link
 * @exampleComponent limel-example-chip-icon-colors
 * @exampleComponent limel-example-chip-image
 * @exampleComponent limel-example-chip-badge
 * @exampleComponent limel-example-chip-filter
 * @exampleComponent limel-example-chip-removable
 * @exampleComponent limel-example-chip-menu
 * @exampleComponent limel-example-chip-loading
 * @exampleComponent limel-example-chip-progress
 * @exampleComponent limel-example-chip-size
 * @exampleComponent limel-example-chip-readonly-border
 * @exampleComponent limel-example-chip-aria-role
 */
export declare class Chip implements ChipInterface {
  /**
   * Defines the language for translations.
   * Will translate the translatable strings on the components.
   */
  language: Languages;
  /**
   * Label displayed on the chip
   */
  text: string;
  /**
   * Icon of the chip.
   */
  icon?: string | Icon;
  /**
   * A picture to be displayed instead of the icon on the chip.
   */
  image?: Image;
  /**
   * If supplied, the chip will become a clickable link.
   */
  link?: Omit<Link, 'text'>;
  /**
   * The value of the badge, displayed on the chip.
   */
  badge?: string | number;
  /**
   * Set to `true` to disable the chip.
   */
  disabled: boolean;
  /**
   * Set to `true` to render the chip as a static UI element.
   * Useful when the parent component has a `readonly` state.
   */
  readonly: boolean;
  /**
   * Set to `true` to visualize the chip in a "selected" state.
   * This is typically used when the chip is used in a chip-set
   * along with other chips.
   */
  selected: boolean;
  /**
   * Set to `true` to visualize the chip in an "invalid" or "error" state.
   */
  invalid: boolean;
  /**
   * Set to `true` to render a remove button on the chip.
   */
  removable: boolean;
  /**
   * Set to `filter` to render the chip with a distinct style
   * suitable for visualizing filters.
   *
   */
  type?: ChipType;
  /**
   * Set to `true` to put the component in the `loading` state,
   * and render an indeterminate progress indicator inside the chip.
   * This does _not_ disable the interactivity of the chip!
   */
  loading?: boolean;
  /**
   * Reflects the current value of a progress bar on the chip,
   * visualizing the percentage of an ongoing process.
   * Must be a number between `0` and `100`.
   */
  progress?: number;
  /**
   * Identifier for the chip. Must be unique.
   */
  identifier?: number | string;
  /**
   * Defines the size of the chip.
   */
  size: 'small' | 'default';
  /**
   * When provided, the chip will render an ellipsis menu with the supplied items.
   * Also, this will hide the "remove button" when `removable={true}`, as
   * the remove button will automatically become the last item in the menu.
   */
  menuItems?: Array<MenuItem | ListSeparator>;
  /**
   * Fired when clicking on the remove button of a `removable` chip.
   * The value of `identifier` is emitted as the event detail.
   */
  remove: EventEmitter<number | string>;
  /**
   * Emitted when a menu item is selected from the actions menu.
   */
  menuItemSelected: EventEmitter<MenuItem>;
  private host;
  componentWillLoad(): void;
  disconnectedCallback(): void;
  render(): any;
  private renderAsButton;
  private renderAsLink;
  private renderLabel;
  private renderPicture;
  private renderBadge;
  private renderRemoveButton;
  private renderActionsMenu;
  private getMenuItems;
  private filterClickWhenDisabled;
  private handleRemoveClick;
  private handleDeleteKeyDown;
  private removeChipLabel;
  private actionMenuLabel;
  private getTranslation;
  private renderSpinner;
  private renderProgressBar;
  private handleActionMenuSelect;
  private handleActionMenuCancel;
}
export {};
//# sourceMappingURL=chip.d.ts.map