@statistikzh/leu 0.5.0 → 0.6.0

package/dist/vue/index.d.ts

@@ -0,0 +1,682 @@
+import type { DefineComponent } from "vue";
+
+import type { LeuAccordion } from "../Accordion.js";
+import type { LeuBreadcrumb } from "../Breadcrumb.js";
+import type { LeuButton } from "../Button.js";
+import type { LeuButtonGroup, CustomEvent } from "../ButtonGroup.js";
+import type { LeuCheckbox } from "../Checkbox.js";
+import type { LeuCheckboxGroup } from "../CheckboxGroup.js";
+import type { LeuChipGroup } from "../ChipGroup.js";
+import type { LeuChipLink } from "../ChipLink.js";
+import type { LeuChipRemovable } from "../ChipRemovable.js";
+import type { LeuChipSelectable, CustomEvent } from "../ChipSelectable.js";
+import type { LeuDropdown } from "../Dropdown.js";
+import type { LeuIcon } from "../Icon.js";
+import type { LeuInput, CustomEvent } from "../Input.js";
+import type { LeuMenu } from "../Menu.js";
+import type { LeuMenuItem } from "../MenuItem.js";
+import type { LeuPagination, CustomEvent } from "../Pagination.js";
+import type { LeuPopup } from "../Popup.js";
+import type { LeuRadio } from "../Radio.js";
+import type { LeuRadioGroup } from "../RadioGroup.js";
+import type { LeuScrollTop } from "../ScrollTop.js";
+import type { LeuSelect } from "../Select.js";
+import type { LeuTable } from "../Table.js";
+import type { LeuVisuallyHidden } from "../VisuallyHidden.js";
+
+type LeuAccordionProps = {
+  /** The heading level of the accordion title. Must be between 1 and 6. */
+  "heading-level"?: LeuAccordion["headingLevel"];
+  /** The prefix of the accordion label. e.g. "01" */
+  "label-prefix"?: LeuAccordion["labelPrefix"];
+  /** The expanded state of the accordion. */
+  open?: LeuAccordion["open"];
+  /** The label (title) of the accordion. */
+  label?: LeuAccordion["label"];
+};
+
+type LeuBreadcrumbProps = {
+  /** Object array with { label, href } */
+  items?: LeuBreadcrumb["items"];
+  /** invert color on dark background */
+  inverted?: LeuBreadcrumb["inverted"];
+  /**  */
+  _hiddenItems?: LeuBreadcrumb["_hiddenItems"];
+  /**  */
+  _showBackOnly?: LeuBreadcrumb["_showBackOnly"];
+  /**  */
+  _isRecalculating?: LeuBreadcrumb["_isRecalculating"];
+  /**  */
+  _isDropdownOpen?: LeuBreadcrumb["_isDropdownOpen"];
+  /**  */
+  _handleResize?: LeuBreadcrumb["_handleResize"];
+  /**  */
+  _closeDropdown?: LeuBreadcrumb["_closeDropdown"];
+  /**  */
+  resizeObserver?: LeuBreadcrumb["resizeObserver"];
+};
+
+type LeuButtonProps = {
+  /**  */
+  label?: LeuButton["label"];
+  /**  */
+  size?: LeuButton["size"];
+  /**  */
+  variant?: LeuButton["variant"];
+  /**  */
+  type?: LeuButton["type"];
+  /**  */
+  componentRole?: LeuButton["componentRole"];
+  /**  */
+  disabled?: LeuButton["disabled"];
+  /** Only taken into account if no Label and an Icon is set */
+  round?: LeuButton["round"];
+  /**  */
+  active?: LeuButton["active"];
+  /** will be used on dark Background */
+  inverted?: LeuButton["inverted"];
+  /** Only taken into account if variant is "ghost" */
+  expanded?: LeuButton["expanded"];
+  /** Alters the shape of the button to be full width of its parent container */
+  fluid?: LeuButton["fluid"];
+};
+
+type LeuButtonGroupProps = {
+  /** The value of the currenty selected (active) button */
+  value?: LeuButtonGroup["value"];
+  /**  */
+  _items?: LeuButtonGroup["_items"];
+  /** When the value of the group changes by clicking a button */
+  onInput?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type LeuCheckboxProps = {
+  /**  */
+  checked?: LeuCheckbox["checked"];
+  /**  */
+  disabled?: LeuCheckbox["disabled"];
+  /**  */
+  value?: LeuCheckbox["value"];
+  /**  */
+  name?: LeuCheckbox["name"];
+};
+
+type LeuCheckboxGroupProps = {
+  /**  */
+  orientation?: LeuCheckboxGroup["orientation"];
+  /**  */
+  label?: LeuCheckboxGroup["label"];
+  /**  */
+  value?: LeuCheckboxGroup["value"];
+  /**  */
+  items?: LeuCheckboxGroup["items"];
+};
+
+type LeuChipGroupProps = {
+  /**  */
+  inverted?: LeuChipGroup["inverted"];
+  /**  */
+  "selection-mode"?: LeuChipGroup["selectionMode"];
+  /**  */
+  "heading-level"?: LeuChipGroup["headingLevel"];
+  /**  */
+  label?: LeuChipGroup["label"];
+  /**  */
+  value?: LeuChipGroup["value"];
+};
+
+type LeuChipLinkProps = {
+  /** The size of the chip */
+  size?: LeuChipLink["size"];
+  /**  */
+  href?: LeuChipLink["href"];
+  /**  */
+  inverted?: LeuChipLink["inverted"];
+};
+
+type LeuChipRemovableProps = {
+  /**  */
+  inverted?: LeuChipRemovable["inverted"];
+
+  /** Dispatched when the user clicks on the chip */
+  onRemove?: (e: CustomEvent<never>) => void;
+};
+
+type LeuChipSelectableProps = {
+  /** The size of the chip. Not supported for radio variant. */
+  size?: LeuChipSelectable["size"];
+  /** `toggle` or `radio`. Determines if only one or multiple chips can be selected. */
+  variant?: LeuChipSelectable["variant"];
+  /**  */
+  selected?: LeuChipSelectable["selected"];
+  /**  */
+  value?: LeuChipSelectable["value"];
+  /**  */
+  inverted?: LeuChipSelectable["inverted"];
+
+  /**  */
+  onInput?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type LeuDropdownProps = {
+  /**  */
+  label?: LeuDropdown["label"];
+  /**  */
+  expanded?: LeuDropdown["expanded"];
+  /**  */
+  hasSlotController?: LeuDropdown["hasSlotController"];
+  /**  */
+  _documentClickHandler?: LeuDropdown["_documentClickHandler"];
+  /**  */
+  _menuItemClickHandler?: LeuDropdown["_menuItemClickHandler"];
+  /** Close the dropdown when the user presses the Escape or the Tab key.
+Navigating the menu with the arrow keys is handled by the menu itself. */
+  _keyDownMenuHandler?: LeuDropdown["_keyDownMenuHandler"];
+  /**  */
+  _toggleRef?: LeuDropdown["_toggleRef"];
+};
+
+type LeuIconProps = {
+  /** The name of the icon to display. */
+  name?: LeuIcon["name"];
+};
+
+type LeuInputProps = {
+  /** Disables the input element. */
+  disabled?: LeuInput["disabled"];
+  /** Marks the input element as required. */
+  required?: LeuInput["required"];
+  /** Adds a button to clear the input element. */
+  clearable?: LeuInput["clearable"];
+  /** The value of the input element. */
+  value?: LeuInput["value"];
+  /** The name of the input element. */
+  name?: LeuInput["name"];
+  /** A custom error that is completely independent of the validity state. Useful for displaying server side errors. */
+  error?: LeuInput["error"];
+  /** The label of the input element. */
+  label?: LeuInput["label"];
+  /** A prefix that relates to the value of the input (e.g. CHF). */
+  prefix?: LeuInput["prefix"];
+  /** A suffix that relates to the value of the input (e.g. mm). */
+  suffix?: LeuInput["suffix"];
+  /** The size of the input element. */
+  size?: LeuInput["size"];
+  /** The icon that is displayed at the end of the input element. */
+  icon?: LeuInput["icon"];
+  /** A regular expression that the value is checked against. */
+  pattern?: LeuInput["pattern"];
+  /** The type of the input element. */
+  type?: LeuInput["type"];
+  /** The minimum value of the input element. */
+  min?: LeuInput["min"];
+  /** The maximum value of the input element. */
+  max?: LeuInput["max"];
+  /** The maximum length of the input element. */
+  maxlength?: LeuInput["maxlength"];
+  /** The minimum length of the input element. */
+  minlength?: LeuInput["minlength"];
+  /** Custom validation messages. The key is the name of the validity state and the value is the message. */
+  validationMessages?: LeuInput["validationMessages"];
+  /** Disables the browser's validation. */
+  novalidate?: LeuInput["novalidate"];
+  /** The step value of the input element. */
+  step?: LeuInput["step"];
+  /**  */
+  _validity?: LeuInput["_validity"];
+
+  /** Dispatched when the value of the input element changes. */
+  onInput?: (e: CustomEvent<CustomEvent>) => void;
+  /** Dispatched when the value of the input element changes and the input element loses focus. */
+  onChange?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type LeuMenuProps = {
+  /** This has only an effect when the role is 'menu'. It defines which role the menu items will get. Default is 'none'. */
+  selects?: LeuMenu["selects"];
+  /**  */
+  value?: LeuMenu["value"];
+};
+
+type LeuMenuItemProps = {
+  /** Defines if the item is selected or checked */
+  active?: LeuMenuItem["active"];
+  /** Disables the underlying button or link */
+  disabled?: LeuMenuItem["disabled"];
+  /** If the item should be focusable. Will be reflected as `tabindex` to the underlying button or link */
+  tabbable?: LeuMenuItem["tabbable"];
+  /** The href of the underlying link */
+  href?: LeuMenuItem["href"];
+  /** The value of the item. It must not contain commas. See `getValue()` */
+  value?: LeuMenuItem["value"];
+  /** The role of the item. This will be reflected as `role` to the underlying button or link. Default is `'menuitem'.` */
+  componentRole?: LeuMenuItem["componentRole"];
+};
+
+type LeuPaginationProps = {
+  /**  */
+  defaultPage?: LeuPagination["defaultPage"];
+  /**  */
+  itemsPerPage?: LeuPagination["itemsPerPage"];
+  /**  */
+  numOfItems?: LeuPagination["numOfItems"];
+  /**  */
+  _page?: LeuPagination["_page"];
+  /**  */
+  page?: LeuPagination["page"];
+  /**  */
+  startIndex?: LeuPagination["startIndex"];
+  /**  */
+  endIndex?: LeuPagination["endIndex"];
+  /**  */
+  _maxPage?: LeuPagination["_maxPage"];
+  /**  */
+  onLeupagechange?: (e: CustomEvent<CustomEvent>) => void;
+};
+
+type LeuPopupProps = {
+  /**  */
+  anchor?: LeuPopup["anchor"];
+  /**  */
+  active?: LeuPopup["active"];
+  /**  */
+  placement?: LeuPopup["placement"];
+  /**  */
+  flip?: LeuPopup["flip"];
+  /**  */
+  shift?: LeuPopup["shift"];
+  /**  */
+  shiftPadding?: LeuPopup["shiftPadding"];
+  /**  */
+  matchSize?: LeuPopup["matchSize"];
+  /**  */
+  autoSize?: LeuPopup["autoSize"];
+  /**  */
+  autoSizePadding?: LeuPopup["autoSizePadding"];
+  /**  */
+  popupEl?: LeuPopup["popupEl"];
+  /**  */
+  anchorEl?: LeuPopup["anchorEl"];
+  /**  */
+  cleanup?: LeuPopup["cleanup"];
+};
+
+type LeuRadioProps = {
+  /**  */
+  checked?: LeuRadio["checked"];
+  /**  */
+  disabled?: LeuRadio["disabled"];
+  /**  */
+  value?: LeuRadio["value"];
+  /**  */
+  name?: LeuRadio["name"];
+};
+
+type LeuRadioGroupProps = {
+  /**  */
+  orientation?: LeuRadioGroup["orientation"];
+  /**  */
+  label?: LeuRadioGroup["label"];
+  /**  */
+  value?: LeuRadioGroup["value"];
+  /**  */
+  handleFocusIn?: LeuRadioGroup["handleFocusIn"];
+  /**  */
+  handleKeyDown?: LeuRadioGroup["handleKeyDown"];
+  /**  */
+  handleInput?: LeuRadioGroup["handleInput"];
+  /**  */
+  _currentIndex?: LeuRadioGroup["_currentIndex"];
+  /**  */
+  items?: LeuRadioGroup["items"];
+};
+
+type LeuScrollTopProps = {
+  /**  */
+  _showButton?: LeuScrollTop["_showButton"];
+  /**  */
+  scroll?: LeuScrollTop["scroll"];
+};
+
+type LeuSelectProps = {
+  /** List of selected values. If they're set from outside the component, the select element tries to find all the options with the given values and selects them. */
+  value?: LeuSelect["value"];
+  /** Reflects to the name attribute of the hidden input field that would be used in a form */
+  name?: LeuSelect["name"];
+  /** The expanded state of the popup */
+  open?: LeuSelect["open"];
+  /** The label of the select */
+  label?: LeuSelect["label"];
+  /** Show a clearable button to reset the value */
+  clearable?: LeuSelect["clearable"];
+  /** If the select should be disabled */
+  disabled?: LeuSelect["disabled"];
+  /** Show an input field to filter the options inside the popup */
+  filterable?: LeuSelect["filterable"];
+  /** Allow multiple selections */
+  multiple?: LeuSelect["multiple"];
+  /**  */
+  _optionFilter?: LeuSelect["_optionFilter"];
+  /**  */
+  _hasFilterResults?: LeuSelect["_hasFilterResults"];
+  /**  */
+  _displayValue?: LeuSelect["_displayValue"];
+  /**  */
+  _optionFilterRef?: LeuSelect["_optionFilterRef"];
+  /**  */
+  _toggleButtonRef?: LeuSelect["_toggleButtonRef"];
+  /**  */
+  _menuRef?: LeuSelect["_menuRef"];
+};
+
+type LeuTableProps = {
+  /**  */
+  columns?: LeuTable["columns"];
+  /**  */
+  data?: LeuTable["data"];
+  /**  */
+  firstColumnSticky?: LeuTable["firstColumnSticky"];
+  /**  */
+  itemsPerPage?: LeuTable["itemsPerPage"];
+  /**  */
+  sortIndex?: LeuTable["sortIndex"];
+  /**  */
+  sortOrderAsc?: LeuTable["sortOrderAsc"];
+  /**  */
+  width?: LeuTable["width"];
+  /**  */
+  _shadowLeft?: LeuTable["_shadowLeft"];
+  /**  */
+  _shadowRight?: LeuTable["_shadowRight"];
+  /**  */
+  _page?: LeuTable["_page"];
+  /**  */
+  _columns?: LeuTable["_columns"];
+  /**  */
+  _sortedData?: LeuTable["_sortedData"];
+  /**  */
+  _data?: LeuTable["_data"];
+  /**  */
+  _resizeObserver?: LeuTable["_resizeObserver"];
+};
+
+type LeuVisuallyHiddenProps = {};
+
+export type CustomElements = {
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **content** - The content of the accordion. No styles will be applied to the content.
+   */
+  "leu-accordion": DefineComponent<LeuAccordionProps>;
+
+  /**
+   * A Breadcrumb Navigation.
+   *
+   * The breadcrumbs can be displayed in two different layouts.
+   * Only the back link (the last item / parent of the current page)
+   * is displayed when…
+   * -  … the width of the container is smaller
+   *      than the BACK_ONLY_BREAKPOINT.
+   * -  … less then two breadcrumb items could be displayed
+   *      without overflowing the container.
+   *
+   * Otherwise as many items as possible are displayed in an inline list
+   * without overflowing the container. The remaining items are displayed
+   * in a dropdown menu.
+   *
+   * In order to determine the exact numbers of items that have to be
+   * hidden inside the dropdown, all of them have to be rendered first.
+   * 1. Render all items
+   * 2. Calculate (measure) the number of items that can be displayed
+   *    without overflowing the container.
+   * 3. Updating the state (_hiddeItems) which will trigger a rerender
+   * 4. Render the items again with the new state.
+   *
+   * This results in multiple updates scheduled one after another. Lit
+   * will also print a waring in the console beacause of that.
+   * It's no a nice behaviour but the only one that works without
+   * having duplicate and hidden markup to derive the sizes from that.
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **renderDropdown(): __** - Render the dropdown menu
+   */
+  "leu-breadcrumb": DefineComponent<LeuBreadcrumbProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - **before** - The icon to display before the label
+   * - **after** - The icon to display after the label
+   * - _default_ - The label of the button or the icon if no label is set
+   */
+  "leu-button": DefineComponent<LeuButtonProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **input** - When the value of the group changes by clicking a button
+   *
+   * ### **Slots:**
+   *  - _default_ - Slot for the buttons
+   */
+  "leu-button-group": DefineComponent<LeuButtonGroupProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - Place leu-chip-* elements inside this slot
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-chip-group-gap** - The gap between the chips _(default: undefined)_
+   */
+  "leu-chip-group": DefineComponent<LeuChipGroupProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Slots:**
+   *  - _default_ - The content of the chip
+   */
+  "leu-chip-link": DefineComponent<LeuChipLinkProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **remove** - Dispatched when the user clicks on the chip
+   *
+   * ### **Slots:**
+   *  - _default_ - The content of the chip
+   */
+  "leu-chip-removable": DefineComponent<LeuChipRemovableProps>;
+
+  /**
+   * A chip component that can be selected.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **input**
+   *
+   * ### **Slots:**
+   *  - _default_ - The content of the chip
+   */
+  "leu-chip-selectable": DefineComponent<LeuChipSelectableProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dropdown": DefineComponent<LeuDropdownProps>;
+
+  /**
+   * A component to render all defined zhWeb icons.
+   * The `fill` of the icon is set to `currentColor` and
+   * can be overriden by setting the css `color` property.
+   * If the icon name is not found, a placeholder will be displayed.
+   * ---
+   *
+   *
+   * ### **CSS Properties:**
+   *  - **--leu-icon-size** - The size of the icon. _(default: undefined)_
+   */
+  "leu-icon": DefineComponent<LeuIconProps>;
+
+  /**
+   * A text input element.
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **input** - Dispatched when the value of the input element changes.
+   * - **change** - Dispatched when the value of the input element changes and the input element loses focus.
+   *
+   * ### **Methods:**
+   *  - **getValidationMessages(): _Object_** - Merge custom and default validation messages.
+   * A validation message can be a function or a string.
+   * If it s a function, the function is called with the corresponding
+   * attribute value as argument.
+   * e.g.
+   * `tooLong(this.maxlength)`
+   * This way the framework user can create reasonable validation messages
+   * - **renderErrorMessages(): _TemplateResult | nothing_** - Creates an error list with an item for the given validity state.
+   */
+  "leu-input": DefineComponent<LeuInputProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-menu": DefineComponent<LeuMenuProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **getValue(): _string_** - Returns the value of the item. If `value` is not set, it will return the inner text
+   *
+   * ### **Slots:**
+   *  - _default_ - The label of the menu item
+   */
+  "leu-menu-item": DefineComponent<LeuMenuItemProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **leu:pagechange**
+   */
+  "leu-pagination": DefineComponent<LeuPaginationProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-popup": DefineComponent<LeuPopupProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-radio": DefineComponent<LeuRadioProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-radio-group": DefineComponent<LeuRadioGroupProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-scroll-top": DefineComponent<LeuScrollTopProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Methods:**
+   *  - **_updateMenuItems(changed)** - Apply the current state to the menu items.
+   * - Set the active property when the value property has changed.
+   * - Hide menu items that do not match the filter.
+   * - **_getDisplayValue(): _String | nothing_** - Determines the value or label that should be displayed inside the toggle button.
+   * - **_isSelected(menuItemValue: _String_): _Boolean_** - Checks if the given value is selected.
+   * - **_handlePopupFocusOut(event)** - Close the dropdown if the focus moves outside the component.
+   *
+   * ### **Slots:**
+   *  - **before** - Optional content the appears before the option list
+   * - **after** - Optional content the appears after the option list
+   */
+  "leu-select": DefineComponent<LeuSelectProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-table": DefineComponent<LeuTableProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-visually-hidden": DefineComponent<LeuVisuallyHiddenProps>;
+};
+
+declare module "vue" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  interface GlobalComponents extends CustomElements {}
+}
+
+declare global {
+  namespace JSX {
+    // eslint-disable-next-line @typescript-eslint/no-empty-interface
+    interface IntrinsicElements extends CustomElements {}
+  }
+}