@cas-smartdesign/list-item

A list item element based on lit-element with SmartDesign look & feel.

Requirements

The main entry point requires ES6 & support for Custom Elements v1

Properties

• caption: string
  • Defines the text of the caption component of the item
• description: string
  • Defines the text of the description component of the item
• descriptionIcon: string
  • Defines the icon of the description component of the item
• selected: boolean
  • Defines whether if the item is in selected state
• icon: string
  • Defines the icon of the item
• iconPlaceholder: string
  • Defines the placeholder icon of the item
• iconBackgroundColor: string
  • Defines the background color to be used behind the icon of the item
• condensedIconBackground: boolean
  • Defines if the background to be used behind the icon uses a condensed state.
• contentMode: ContentMode
  • Defines the mode in which it should handle its content
  • Possible values:
    • text - renders the content as text
    • html - renders the content as HTML
• enableLineClamp: boolean
  • If set and the list item has only one label defined (caption or description) then long texts are wrapped to two lines and line-clamp property is applied to them.
  • The corresponding attribute is enable-line-clamp
• aria attributes (the corresponding attribute is in camel-case)
  • role: string (default is "listitem")
  • iconAttrAriaLabel: string
• title attributes (the corresponding attribute is in camel-case)
  • captionAttrTitle: string
  • descriptionAttrTitle: string
  • iconAttrTitle: string
• disabled (reflects aria-disabled attribute)
  • A disabled item MAY indicate that changing the selected state is not allowed.

All of these properties can be defined with a corresponding (by default with lowercase) attribute as well.

CSS Custom Properties

• --sd-list-item-font-family
  • Defines the font family of the labels (default is "Segoe UI", "Lucida Sans", Arial, sans-serif)
• --sd-list-item-label-content-padding
  • Defines the padding of the labels (default is 0 8px)
• --sd-list-item-caption-font-size
  • Defines the font size of the caption (default is 16px)
• --sd-list-item-caption-text-color
  • Defines the text color of the caption (default is #111)
• --sd-list-item-caption-font-weight
  • Defines the font weight of the caption (default is 400)
• --sd-list-item-description-font-size
  • Defines the font size of the description (default is 13px)
• --sd-list-item-description-text-color
  • Defines the text color of the description (default is #999)
• --sd-list-item-description-font-weight
  • Defines the font weight of the description (default is 400)
• --sd-list-item-text-decoration
  • Defines the text-decoration applied on the caption and description (default is inherit)
• --sd-list-item-icon-size
  • Defines the size of the icon (default is 24px)
• --sd-list-item-icon-background-size
  • Defines the background-size CSS property of the icon (default is cover)
• --sd-list-item-icon-wrapper-width
  • Defines the width of the icon wrapper element (default is 45px)
• --sd-list-item-level-x-color
  • Defines the color of the level indicator for the x-th level (0-6)
• --sd-list-item-icon-background-radius
  • Defines the border radius of the condensed icon background element.

Custom events

• list-item-icon-click
  • This event is dispatched when non-disabled list item icon is clicked