@statistikzh/leu 0.10.0 → 0.11.1

package/dist/vue/index.d.ts

@@ -1,25 +1,26 @@
 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 { LeuButtonGroup, CustomEvent } from "../ButtonGroup.js";
+import type { LeuButton } from "../Button.js";
+import type { LeuDialog } from "../Dialog.js";
+import type { LeuBreadcrumb } from "../Breadcrumb.js";
+import type { LeuDropdown } from "../Dropdown.js";
+import type { LeuIcon } from "../Icon.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 { LeuDialog } from "../Dialog.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 { LeuRange } from "../Range.js";
+import type { LeuPopup } from "../Popup.js";
 import type { LeuScrollTop } from "../ScrollTop.js";
 import type { LeuSelect } from "../Select.js";
 import type { LeuSpinner } from "../Spinner.js";
@@ -37,25 +38,35 @@ type LeuAccordionProps = {
   label?: LeuAccordion["label"];
 };
 
-type LeuBreadcrumbProps = {
-  /** Object array with { label, href } */
-  items?: LeuBreadcrumb["items"];
-  /** invert color on dark background */
-  inverted?: LeuBreadcrumb["inverted"];
+type LeuCheckboxProps = {
   /**  */
-  _hiddenItems?: LeuBreadcrumb["_hiddenItems"];
+  checked?: LeuCheckbox["checked"];
   /**  */
-  _showBackOnly?: LeuBreadcrumb["_showBackOnly"];
+  disabled?: LeuCheckbox["disabled"];
   /**  */
-  _isRecalculating?: LeuBreadcrumb["_isRecalculating"];
+  value?: LeuCheckbox["value"];
   /**  */
-  _isDropdownOpen?: LeuBreadcrumb["_isDropdownOpen"];
+  name?: LeuCheckbox["name"];
+};
+
+type LeuCheckboxGroupProps = {
   /**  */
-  _handleResize?: LeuBreadcrumb["_handleResize"];
+  orientation?: LeuCheckboxGroup["orientation"];
   /**  */
-  _closeDropdown?: LeuBreadcrumb["_closeDropdown"];
+  label?: LeuCheckboxGroup["label"];
   /**  */
-  resizeObserver?: LeuBreadcrumb["resizeObserver"];
+  value?: LeuCheckboxGroup["value"];
+  /**  */
+  items?: LeuCheckboxGroup["items"];
+};
+
+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 LeuButtonProps = {
@@ -83,35 +94,59 @@ type LeuButtonProps = {
   fluid?: LeuButton["fluid"];
 };
 
-type LeuButtonGroupProps = {
-  /** The value of the currenty selected (active) button */
-  value?: LeuButtonGroup["value"];
+type LeuDialogProps = {
   /**  */
-  _items?: LeuButtonGroup["_items"];
-  /** When the value of the group changes by clicking a button */
-  onInput?: (e: CustomEvent<CustomEvent>) => void;
+  label?: LeuDialog["label"];
+  /**  */
+  sublabel?: LeuDialog["sublabel"];
+  /**  */
+  open?: LeuDialog["open"];
+  /**  */
+  _dialogRef?: LeuDialog["_dialogRef"];
 };
 
-type LeuCheckboxProps = {
+type LeuBreadcrumbProps = {
+  /** Object array with { label, href } */
+  items?: LeuBreadcrumb["items"];
+  /** invert color on dark background */
+  inverted?: LeuBreadcrumb["inverted"];
   /**  */
-  checked?: LeuCheckbox["checked"];
+  _hiddenItems?: LeuBreadcrumb["_hiddenItems"];
   /**  */
-  disabled?: LeuCheckbox["disabled"];
+  _showBackOnly?: LeuBreadcrumb["_showBackOnly"];
   /**  */
-  value?: LeuCheckbox["value"];
+  _isRecalculating?: LeuBreadcrumb["_isRecalculating"];
   /**  */
-  name?: LeuCheckbox["name"];
+  _isDropdownOpen?: LeuBreadcrumb["_isDropdownOpen"];
+  /**  */
+  _handleResize?: LeuBreadcrumb["_handleResize"];
+  /**  */
+  _closeDropdown?: LeuBreadcrumb["_closeDropdown"];
+  /**  */
+  resizeObserver?: LeuBreadcrumb["resizeObserver"];
 };
 
-type LeuCheckboxGroupProps = {
+type LeuDropdownProps = {
   /**  */
-  orientation?: LeuCheckboxGroup["orientation"];
+  label?: LeuDropdown["label"];
   /**  */
-  label?: LeuCheckboxGroup["label"];
+  expanded?: LeuDropdown["expanded"];
   /**  */
-  value?: LeuCheckboxGroup["value"];
+  hasSlotController?: LeuDropdown["hasSlotController"];
   /**  */
-  items?: LeuCheckboxGroup["items"];
+  _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 LeuChipGroupProps = {
@@ -173,40 +208,6 @@ type LeuChipSelectableProps = {
   onInput?: (e: CustomEvent<CustomEvent>) => void;
 };
 
-type LeuDialogProps = {
-  /**  */
-  label?: LeuDialog["label"];
-  /**  */
-  sublabel?: LeuDialog["sublabel"];
-  /**  */
-  open?: LeuDialog["open"];
-  /**  */
-  _dialogRef?: LeuDialog["_dialogRef"];
-};
-
-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"];
@@ -303,33 +304,6 @@ type LeuPaginationProps = {
   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"];
@@ -360,6 +334,62 @@ type LeuRadioGroupProps = {
   items?: LeuRadioGroup["items"];
 };
 
+type LeuRangeProps = {
+  /**  */
+  value?: LeuRange["defaultValue"];
+  /**  */
+  min?: LeuRange["min"];
+  /**  */
+  max?: LeuRange["max"];
+  /**  */
+  step?: LeuRange["step"];
+  /**  */
+  name?: LeuRange["name"];
+  /**  */
+  label?: LeuRange["label"];
+  /**  */
+  disabled?: LeuRange["disabled"];
+  /**  */
+  multiple?: LeuRange["multiple"];
+  /** Sets the value of the underlying input element(s).
+The value has to be an array if "multiple" range is used.
+Otherwise it has to be a string. */
+  value?: LeuRange["value"];
+  /**  */
+  valueAsArray?: LeuRange["valueAsArray"];
+  /**  */
+  valueLow?: LeuRange["valueLow"];
+  /**  */
+  valueHigh?: LeuRange["valueHigh"];
+};
+
+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 LeuScrollTopProps = {
   /**  */
   _showButton?: LeuScrollTop["_showButton"];
@@ -444,6 +474,52 @@ export type CustomElements = {
    */
   "leu-accordion": DefineComponent<LeuAccordionProps>;
 
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **Events:**
+   *  - **input** - When the value of the group changes by clicking a button
+   *
+   * ### **Slots:**
+   *  - _default_ - Slot for the buttons
+   */
+  "leu-button-group": DefineComponent<LeuButtonGroupProps>;
+
+  /**
+   *
+   * ---
+   *
+   *
+   * ### **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>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-dialog": DefineComponent<LeuDialogProps>;
+
   /**
    * A Breadcrumb Navigation.
    *
@@ -483,40 +559,21 @@ export type CustomElements = {
    *
    * ---
    *
-   *
-   * ### **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-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.
    * ---
    *
-   */
-  "leu-checkbox": DefineComponent<LeuCheckboxProps>;
-
-  /**
-   *
-   * ---
    *
+   * ### **CSS Properties:**
+   *  - **--leu-icon-size** - The size of the icon. _(default: undefined)_
    */
-  "leu-checkbox-group": DefineComponent<LeuCheckboxGroupProps>;
+  "leu-icon": DefineComponent<LeuIconProps>;
 
   /**
    *
@@ -573,33 +630,6 @@ export type CustomElements = {
    */
   "leu-chip-selectable": DefineComponent<LeuChipSelectableProps>;
 
-  /**
-   *
-   * ---
-   *
-   */
-  "leu-dialog": DefineComponent<LeuDialogProps>;
-
-  /**
-   *
-   * ---
-   *
-   */
-  "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.
    * ---
@@ -656,21 +686,32 @@ export type CustomElements = {
    * ---
    *
    */
-  "leu-popup": DefineComponent<LeuPopupProps>;
+  "leu-radio": DefineComponent<LeuRadioProps>;
 
   /**
    *
    * ---
    *
    */
-  "leu-radio": DefineComponent<LeuRadioProps>;
+  "leu-radio-group": DefineComponent<LeuRadioGroupProps>;
 
   /**
    *
    * ---
    *
+   *
+   * ### **Methods:**
+   *  - **_handlePointerDown(e: _PointerEvent & {target: HTMLInputElement}_)** - Determine if the "click" (pointer event) is closer the
+   * the value of the other input element. Swap the values if this is the case.
    */
-  "leu-radio-group": DefineComponent<LeuRadioGroupProps>;
+  "leu-range": DefineComponent<LeuRangeProps>;
+
+  /**
+   *
+   * ---
+   *
+   */
+  "leu-popup": DefineComponent<LeuPopupProps>;
 
   /**
    *