@siemens/ix 1.0.0-beta.2

package/dist/siemens-ix/siemens-ix.esm.js

@@ -0,0 +1 @@
+import{p as e,b as i}from"./p-47ea9884.js";(()=>{const i=import.meta.url,t={};return""!==i&&(t.resourcesUrl=new URL(".",i).href),e(t)})().then((e=>i(JSON.parse('[["p-7f5a2e3c",[[6,"ix-icon",{"size":[1],"color":[1],"name":[513]}]]],["p-fe020fa3",[[2,"ix-datetime-picker",{"range":[4],"showHour":[4,"show-hour"],"showMinutes":[4,"show-minutes"],"showSeconds":[4,"show-seconds"],"showTimeReference":[4,"show-time-reference"]}]]],["p-b4003026",[[0,"ix-modal-example"]]],["p-fe5db4d1",[[6,"ix-split-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"label":[1],"icon":[1],"splitIcon":[1,"split-icon"],"disabled":[4],"placement":[1],"toggle":[32]}],[2,"ix-split-button-item",{"icon":[1],"label":[1]}]]],["p-7ec8a00e",[[6,"ix-breadcrumb",{"visibleItemCount":[2,"visible-item-count"],"nextItems":[16],"ghost":[4],"previousButtonRef":[32],"nextButtonRef":[32],"items":[32]}],[6,"ix-breadcrumb-item",{"label":[1],"icon":[1]}]]],["p-ab715295",[[6,"ix-flip-tile",{"state":[1],"footer":[1],"index":[32],"isFlipAnimationActive":[32]}],[1,"ix-flip-tile-content"]]],["p-504927a0",[[2,"ix-category-filter",{"initialState":[16],"filterState":[16],"placeholder":[1],"categories":[16],"nonSelectableCategories":[16],"suggestions":[16],"icon":[1],"hideIcon":[4,"hide-icon"],"repeatCategories":[4,"repeat-categories"],"tmpDisableScrollIntoView":[4,"tmp-disable-scroll-into-view"],"labelCategories":[1,"label-categories"],"i18nPlainText":[1,"i-1-8n-plain-text"],"hasFocus":[32],"showCategorySelection":[32],"categoryLogicalOperator":[32],"inputValue":[32],"category":[32],"filterTokens":[32],"offsetDropdownX":[32],"offsetDropdownY":[32],"maxHeightDropdown":[32],"maxWidthDropdown":[32]},[[9,"resize","setDropdownOffset"]]]]],["p-bbcee9fb",[[6,"ix-drawer",{"show":[1028],"closeOnClickOutside":[4,"close-on-click-outside"],"fullHeight":[4,"full-height"],"minWidth":[2,"min-width"],"maxWidth":[2,"max-width"],"width":[8],"toggleDrawer":[64]}]]],["p-9d9b8ad1",[[2,"ix-expanding-search",{"icon":[1],"placeholder":[1],"value":[1025],"isFieldChanged":[32],"expanded":[32],"hasFocus":[32]}]]],["p-8239c3a1",[[6,"ix-message-bar",{"type":[1],"dismissible":[4],"icon":[32],"color":[32]}]]],["p-7d667916",[[2,"ix-upload",{"accept":[1],"multiple":[4],"multiline":[4],"disabled":[4],"state":[1],"selectFileText":[1,"select-file-text"],"loadingText":[1,"loading-text"],"uploadFailedText":[1,"upload-failed-text"],"uploadSuccessText":[1,"upload-success-text"],"i18nUploadFile":[1,"i-1-8n-upload-file"],"i18nUploadDisabled":[1,"i-1-8n-upload-disabled"],"isFileOver":[32],"setFilesToUpload":[64]}]]],["p-f2636faf",[[6,"ix-animated-tabs",{"disableAnimations":[4,"disable-animations"],"selectedIndex":[2,"selected-index"],"tabPlacement":[1,"tab-placement"],"tabs":[32],"activeIndex":[32]},[[1,"mouseup","onMouseDown"]]],[6,"ix-animated-tab",{"icon":[1],"count":[514]}]]],["p-f6da7e07",[[1,"ix-application-header",{"name":[1]}]]],["p-5f9f25ef",[[6,"ix-basic-navigation",{"applicationName":[1,"application-name"],"hideHeader":[4,"hide-header"]}]]],["p-ca71538c",[[6,"ix-chip",{"variant":[513],"active":[4],"closable":[4],"icon":[1],"background":[1],"color":[1],"outline":[4]}]]],["p-0e315bd7",[[2,"ix-kpi",{"label":[1],"value":[8],"unit":[1],"state":[1],"orientation":[1]}]]],["p-235606b2",[[6,"ix-pill",{"variant":[513],"outline":[4],"icon":[1],"background":[1],"color":[1],"alignLeft":[4,"align-left"]}]]],["p-61b032bf",[[6,"ix-workflow-step",{"vertical":[4],"disabled":[4],"status":[1],"clickable":[4],"selected":[1028],"position":[1],"iconName":[32],"iconColor":[32]}]]],["p-caf856f2",[[6,"ix-event-list",{"itemHeight":[8,"item-height"],"compact":[4],"animated":[4],"chevron":[4]}],[4,"ix-event-list-item",{"color":[1],"selected":[4],"disabled":[4],"chevron":[4],"opacity":[2]},[[1,"click","handleItemClick"]]]]],["p-2ce29bcd",[[6,"ix-blind",{"collapsed":[1540],"label":[1]}]]],["p-78df1e46",[[6,"ix-counter-pill",{"variant":[513],"outline":[4],"background":[1],"color":[1],"alignLeft":[4,"align-left"]}]]],["p-e4d1a964",[[6,"ix-input-group"]]],["p-03d95feb",[[6,"ix-tile",{"size":[1]}]]],["p-df43662b",[[2,"ix-toggle",{"checked":[1540],"disabled":[4],"indeterminate":[4],"color":[1],"textOn":[1,"text-on"],"textOff":[1,"text-off"],"textIndeterminate":[1,"text-indeterminate"],"hideText":[4,"hide-text"]},[[8,"keydown","onKeyDown"]]]]],["p-2cda7278",[[6,"ix-validation-tooltip",{"message":[1],"placement":[1],"isInputValid":[32]}]]],["p-240d22b6",[[6,"ix-workflow-steps",{"vertical":[4],"linear":[4],"clickable":[4],"selectedIndex":[2,"selected-index"]}]]],["p-67c2bca6",[[2,"my-component"]]],["p-d31bf6db",[[6,"ix-map-navigation",{"applicationName":[1,"application-name"],"navigationTitle":[1,"navigation-title"],"hideContextMenu":[4,"hide-context-menu"],"isSidebarOpen":[32],"isAboutOpen":[32],"isSettingsOpen":[32],"openOverlay":[64],"closeOverlay":[64]}],[6,"ix-map-navigation-overlay",{"name":[1],"icon":[1],"color":[1]}]]],["p-7a4c744e",[[6,"ix-select",{"selectedIndices":[1025,"selected-indices"],"allowClear":[4,"allow-clear"],"mode":[1],"editable":[4],"disabled":[4],"readonly":[4],"i18nPlaceholder":[1,"i-1-8n-placeholder"],"i18nPlaceholderEditable":[1,"i-1-8n-placeholder-editable"],"i18nSelectListHeader":[1,"i-1-8n-select-list-header"],"dropdownShow":[32],"value":[32],"dropdownWrapperRef":[32],"dropdownAnchor":[32],"isDropdownEmpty":[32],"hasFocus":[32],"navigationItem":[32],"inputText":[32]},[[0,"itemClick","onItemClicked"],[8,"keydown","onKeyDown"]]],[2,"ix-select-item",{"label":[513],"value":[520],"selected":[4],"hover":[4],"onItemClick":[64]}]]],["p-6726f740",[[6,"ix-group",{"suppressHeaderSelection":[4,"suppress-header-selection"],"header":[1],"subHeader":[1,"sub-header"],"collapsed":[1540],"selected":[1540],"index":[1538],"expandOnHeaderClick":[4,"expand-on-header-click"],"dropdownTriggerRef":[32]},[[8,"keydown","onKeyDown"]]],[6,"ix-group-dropdown-item",{"label":[1],"icon":[1]}],[6,"ix-group-item",{"icon":[1],"text":[1],"secondaryText":[1,"secondary-text"],"suppressSelection":[4,"suppress-selection"],"selected":[4],"focusable":[4],"index":[2]},[[1,"click","clickListen"]]]]],["p-662d756f",[[2,"ix-toast-container",{"containerId":[1,"container-id"],"containerClass":[1,"container-class"],"position":[1],"showToast":[64]}],[6,"ix-toast",{"type":[1],"toastTitle":[1,"toast-title"],"autoCloseDelay":[2,"auto-close-delay"],"autoClose":[4,"auto-close"],"icon":[1],"iconColor":[1,"icon-color"],"progress":[32],"isRunning":[32],"touched":[32]}]]],["p-59c81e2a",[[6,"ix-tree",{"root":[1],"model":[16],"renderItem":[16],"context":[1040]}],[6,"ix-tree-item",{"text":[1],"hasChildren":[4,"has-children"],"context":[16]}]]],["p-81e46337",[[2,"ix-spinner",{"variant":[1],"size":[1]}]]],["p-40842bea",[[2,"ix-date-picker",{"format":[1],"range":[4],"individual":[4],"corners":[1],"year":[32],"month":[32],"calendar":[32],"today":[32],"years":[32],"tempYear":[32],"tempMonth":[32],"start":[32],"end":[32],"dropdownButtonRef":[32],"yearContainerRef":[32]}],[2,"ix-time-picker",{"corners":[1],"individual":[4],"showHour":[4,"show-hour"],"showMinutes":[4,"show-minutes"],"showSeconds":[4,"show-seconds"],"showTimeReference":[4,"show-time-reference"],"hourInputRef":[32],"minuteInputRef":[32],"secondInputRef":[32],"referenceInputRef":[32]}]]],["p-3613be96",[[6,"ix-filter-chip",{"disabled":[4]}]]],["p-4ffec6ae",[[6,"ix-menu-avatar",{"top":[1],"bottom":[1],"i18nLogout":[1,"i-1-8n-logout"],"displayMenu":[32]},[[1,"click","toggleMenu"]]],[6,"ix-menu-settings",{"activeTabLabel":[1025,"active-tab-label"],"label":[1],"show":[4]}],[4,"ix-menu",{"showSettings":[1028,"show-settings"],"showAbout":[1028,"show-about"],"enableToggleTheme":[4,"enable-toggle-theme"],"enableSettings":[4,"enable-settings"],"enableMapExpand":[4,"enable-map-expand"],"applicationName":[1,"application-name"],"applicationDescription":[1,"application-description"],"maxVisibleMenuItems":[2,"max-visible-menu-items"],"i18nLegal":[1,"i-1-8n-legal"],"i18nSettings":[1,"i-1-8n-settings"],"i18nToggleTheme":[1,"i-1-8n-toggle-theme"],"i18nExpand":[1,"i-1-8n-expand"],"i18nCollapse":[1,"i-1-8n-collapse"],"i18nMore":[1,"i-1-8n-more"],"expand":[1540],"showMoreItems":[32],"visibleMenuItems":[32],"countMoreNotifications":[32],"mapExpand":[32],"activeTab":[32],"isMoreTabEmpty":[32],"toggleMapExpand":[64],"toggleMenu":[64],"toggleSettings":[64],"toggleAbout":[64]},[[9,"resize","onWindowResize"]]],[6,"ix-menu-about-news",{"show":[1540],"label":[1],"i18nShowMore":[1,"i-1-8n-show-more"],"aboutItemLabel":[1,"about-item-label"],"offsetBottom":[2,"offset-bottom"],"expanded":[4]}],[6,"ix-menu-about-item",{"label":[513]}],[6,"ix-menu-settings-item",{"label":[1]}],[6,"ix-menu-about",{"i18nImprintLabel":[513,"i-1-8n-imprint-label"],"activeTabLabel":[1537,"active-tab-label"],"label":[1],"show":[4],"labels":[32]}],[2,"ix-menu-avatar-item",{"icon":[1],"label":[1]}],[4,"ix-menu-item",{"home":[4],"bottom":[4],"tabIcon":[1,"tab-icon"],"notifications":[2],"active":[4],"disabled":[4],"title":[32]}]]],["p-be1ec062",[[2,"ix-modal-container",{"showModal":[64]}],[6,"ix-modal",{"animation":[4],"ariaDescribedBy":[1,"aria-described-by"],"ariaLabelledBy":[1,"aria-labelled-by"],"backdrop":[8],"backdropClass":[1,"backdrop-class"],"beforeDismiss":[16],"centered":[4],"content":[1],"keyboard":[4],"icon":[1],"iconColor":[1,"icon-color"],"modalDialogClass":[1,"modal-dialog-class"],"scrollable":[4],"size":[1],"headerTitle":[1,"header-title"],"windowClass":[1,"window-class"],"dismiss":[64],"close":[64]}]]],["p-5990f0cb",[[6,"ix-date-time-card",{"individual":[4],"corners":[1]}]]],["p-c3738ffc",[[4,"ix-tab-item",{"selected":[4],"disabled":[4],"small":[4],"icon":[4],"rounded":[4],"counter":[2],"layout":[1],"placement":[1]}]]],["p-bd15d8ca",[[4,"ix-tabs",{"small":[4],"rounded":[4],"selected":[1026],"layout":[1],"placement":[1],"totalItems":[32],"currentScrollAmount":[32],"scrollAmount":[32],"scrollActionAmount":[32]},[[9,"resize","onWindowResize"]]]]],["p-cde8f20e",[[6,"ix-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"selected":[4],"disabled":[4],"type":[1]}]]],["p-e1f54836",[[6,"ix-dropdown-item",{"label":[1],"icon":[1],"hover":[4],"disabled":[4],"checked":[4],"emitItemClick":[64]}],[1,"ix-dropdown",{"show":[1540],"trigger":[1],"anchor":[1],"closeBehavior":[8,"close-behavior"],"placement":[1],"positioningStrategy":[1,"positioning-strategy"],"adjustDropdownWidthToReferenceWith":[4,"adjust-dropdown-width-to-reference-with"],"adjustDropdownWidthToReferenceWidth":[4,"adjust-dropdown-width-to-reference-width"],"header":[1],"updatePosition":[64]},[[8,"click","clickOutside"]]]]],["p-3f809fb3",[[6,"ix-icon-button",{"variant":[1],"outline":[4],"invisible":[4],"ghost":[4],"oval":[4],"icon":[1],"size":[1],"color":[1],"selected":[4],"disabled":[4],"type":[1]}]]]]'),e)));

package/dist/types/components/animated-tab/animated-tab.d.ts

@@ -0,0 +1,11 @@
+export declare class AnimatedTab {
+  /**
+   * Icon of the tab
+   */
+  icon: string;
+  /**
+   * Show notification number
+   */
+  count: number;
+  render(): any;
+}

package/dist/types/components/animated-tabs/animated-tabs.d.ts

@@ -0,0 +1,44 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class AnimatedTabs {
+  hostElement: HTMLIxAnimatedTabsElement;
+  tabs: HTMLIxAnimatedTabElement[];
+  activeIndex: number;
+  /**
+   * @deprecated - For debugging purposes only
+   */
+  disableAnimations: boolean;
+  /**
+   * Current selected tab index
+   */
+  selectedIndex: number;
+  /**
+   * Placement of the tabs
+   */
+  tabPlacement: 'top' | 'bottom';
+  /**
+   * Tab navigated
+   */
+  tabClick: EventEmitter;
+  private easing;
+  private firstRender;
+  private observer;
+  onTabSelectionChange(newSelectionIndex: number, oldSelectionIndex: number): void;
+  onMouseDown(): void;
+  get animatedTabs(): HTMLIxAnimatedTabElement[];
+  get tabsContainer(): Element;
+  get contentContainer(): Element;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  private disconnectCallback;
+  private isSelected;
+  private showTab;
+  private hideTab;
+  private slideOutLeft;
+  private slideOutRight;
+  private slideInLeft;
+  private slideInRight;
+  private updateTabAnimation;
+  private onTabClick;
+  private onTabMouseDown;
+  render(): any;
+}

package/dist/types/components/application-header/application-header.d.ts

@@ -0,0 +1,7 @@
+export declare class ApplicationHeader {
+  /**
+   * Application name
+   */
+  name: string;
+  render(): any;
+}

package/dist/types/components/basic-navigation/basic-navigation.d.ts

@@ -0,0 +1,16 @@
+export declare class BasicNavigation {
+  hostElement: HTMLIxBasicNavigationElement;
+  /**
+   * Application name
+   */
+  applicationName: string;
+  /**
+   * Hide application header
+   */
+  hideHeader: boolean;
+  get menu(): HTMLIxMenuElement;
+  componentDidRender(): void;
+  private appendMenu;
+  private adjustMenuHeight;
+  render(): any;
+}

package/dist/types/components/blind/blind.d.ts

@@ -0,0 +1,26 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Blind {
+  /**
+   * Collapsed state
+   */
+  collapsed: boolean;
+  /**
+   * Label of blind
+   */
+  label: string;
+  /**
+   * Collapsed state changed
+   */
+  collapsedChange: EventEmitter<boolean>;
+  hostElement: HTMLIxBlindElement;
+  private chevronRef;
+  constructor();
+  private onHeaderClick;
+  componentDidLoad(): void;
+  get content(): Element;
+  animation(isCollapsed: boolean): void;
+  private animateCollapse;
+  private rotateChevronDown;
+  private rotateChevronRight;
+  render(): any;
+}

package/dist/types/components/breadcrumb/breadcrumb.d.ts

@@ -0,0 +1,48 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Breadcrumb {
+  /**
+   * Excess items will get hidden inside of dropdown
+   */
+  visibleItemCount: number;
+  /**
+   * Items will be accessible through a dropdown
+   */
+  nextItems: string[];
+  /**
+   * Ghost breadcrumbs will not show solid backgrounds on individual crumbs unless there is a mouse event (e.g. hover)
+   */
+  ghost: boolean;
+  /**
+   * Crumb item clicked event
+   */
+  itemClick: EventEmitter<string>;
+  /**
+   * Next item clicked event
+   */
+  nextClick: EventEmitter<{
+    event: UIEvent;
+    item: string;
+  }>;
+  previousButtonRef: HTMLElement;
+  nextButtonRef: HTMLElement;
+  hostElement: HTMLIxBreadcrumbElement;
+  get breadcrumbItems(): HTMLIxBreadcrumbItemElement[];
+  get crumbItems(): Element[];
+  items: {
+    label: string;
+    icon?: string;
+  }[];
+  private mutationObserver;
+  private onItemClick;
+  componentDidLoad(): void;
+  componentWillLoad(): void;
+  private getItems;
+  disconnectedCallback(): void;
+  private animationFadeOut;
+  private animationFadeIn;
+  private handleLastButtonRef;
+  private sliceHiddenItems;
+  private clickItem;
+  private renderBreadcrumbItems;
+  render(): any;
+}

package/dist/types/components/breadcrumb-item/breadcrumb-item.d.ts

@@ -0,0 +1,11 @@
+export declare class BreadcrumbItem {
+  /**
+   * Breadcrumb label
+   */
+  label: string;
+  /**
+   * Icon to be displayed next ot the label
+   */
+  icon: string;
+  render(): any;
+}

package/dist/types/components/button/base-button.d.ts

@@ -0,0 +1,13 @@
+export declare const getButtonClasses: (variant: 'Primary' | 'Secondary', outline: boolean, ghost: boolean, iconOnly: boolean, iconOval: boolean, selected: boolean, disabled: boolean) => {
+  btn: boolean;
+  'btn-primary': boolean;
+  'btn-outline-primary': boolean;
+  'btn-invisible-primary': boolean;
+  'btn-secondary': boolean;
+  'btn-outline-secondary': boolean;
+  'btn-invisible-secondary': boolean;
+  'btn-icon': boolean;
+  'btn-oval': boolean;
+  selected: boolean;
+  disabled: boolean;
+};

package/dist/types/components/button/button.d.ts

@@ -0,0 +1,34 @@
+import { Buttons } from '../utils/button-variants';
+export declare class Button {
+  /**
+   * Button varaint
+   */
+  variant: Buttons;
+  /**
+   * Outline button
+   */
+  outline: boolean;
+  /**
+   * Invisible button
+   *
+   * @deprecated use ghost property
+   */
+  invisible: boolean;
+  /**
+   * Button with no background or outline
+   */
+  ghost: boolean;
+  /**
+   * Show button as selected. Should be used with outline or invisible
+   */
+  selected: boolean;
+  /**
+   * Disable the button
+   */
+  disabled: boolean;
+  /**
+   * Type of the button
+   */
+  type: 'button' | 'submit';
+  render(): any;
+}

package/dist/types/components/category-filter/category-filter.d.ts

@@ -0,0 +1,129 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { FilterState } from './filter-state';
+import { InputState } from './input-state';
+import { LogicalFilterOperator } from './logical-filter-operator';
+export declare class CategoryFilter {
+  private readonly ID_CUSTOM_FILTER_VALUE;
+  private textInput?;
+  private formElement?;
+  private isScrollStateDirty;
+  hostElement: HTMLIxCategoryFilterElement;
+  hasFocus: boolean;
+  showCategorySelection: boolean;
+  categoryLogicalOperator: LogicalFilterOperator;
+  inputValue: string;
+  category: string;
+  filterTokens: Array<{
+    id: string;
+    value: string;
+    operator: LogicalFilterOperator;
+  }>;
+  offsetDropdownX: string;
+  offsetDropdownY: string;
+  maxHeightDropdown: string;
+  maxWidthDropdown: string;
+  /**
+   * When set this will initially populate the component with the provided search criteria.
+   * This will trigger all input events accordingly.
+   * @deprecated will get removed with next major release (7.0.0). Use the member filterState instead.
+   */
+  initialState: FilterState;
+  /**
+   * A set of search criteria to populate the component with.
+   */
+  filterState: FilterState;
+  /**
+   * Placeholder text to be displayed in an empty input field.
+   */
+  placeholder: string;
+  /**
+   * Configuration object hash used to populate the dropwdown menu for typeahead and quick selection functionality.
+   * Each ID maps to an object with a label and an array of options to select from.
+   */
+  categories: {
+    [id: string]: {
+      label: string;
+      options: string[];
+    };
+  };
+  /**
+   * In certain use cases some categories are not available for selection any more.
+   * To allow proper display of set filters with these categories this ID to label mapping can be populated.
+   * Configuration object hash used to supply labels to the filter chips in the input field.
+   * Each ID maps to a string representing the label to display.
+   */
+  nonSelectableCategories?: {
+    [id: string]: string;
+  };
+  /**
+   * A list of strings that will be supplied as typeahead suggestions not tied to any categories.
+   */
+  suggestions: string[];
+  /**
+   * The icon next to the actual text input
+   * Defaults to 'search'
+   */
+  icon: string;
+  /**
+   * Allows to hide the icon inside the text input.
+   * Defaults to false
+   */
+  hideIcon: boolean;
+  /**
+   * If set to true allows that a single category can be set more than once.
+   * An already set category will not appear in the category dropdown if set to false.
+   *
+   * Defaults to true
+   */
+  repeatCategories: boolean;
+  /**
+   * @deprecated For debugging purposes only!
+   */
+  tmpDisableScrollIntoView: boolean;
+  /**
+   * i18n
+   */
+  labelCategories: string;
+  /**
+   * i18n
+   */
+  i18nPlainText: string;
+  /**
+   * Event dispatched whenever the text input changes.
+   */
+  inputChanged: EventEmitter<InputState>;
+  /**
+   * Event dispatched whenever the filter state changes.
+   */
+  filterChanged: EventEmitter<FilterState>;
+  private readonly documentClickCallback;
+  watchFilterState(newValue: any): void;
+  watchShowCategorySelection(newValue: any): void;
+  setDropdownOffset(): void;
+  componentDidLoad(): void;
+  private setFilterState;
+  private handleDocumentClick;
+  private closeDropdown;
+  private handleFormElementKeyDown;
+  private focusPreviousItem;
+  private focusNextItem;
+  private handleInputElementKeyDown;
+  private emitFilterEvent;
+  private addToken;
+  private removeToken;
+  private getCategoryIds;
+  private getCategoryLables;
+  private selectCategory;
+  private openCategorySelection;
+  private resetFilter;
+  private calculateDropdownX;
+  private calculateDropdownY;
+  private calculateDropdownHeight;
+  private filterMultiples;
+  private filterDuplicateTokens;
+  private filterByInput;
+  private toggleCategoryOperator;
+  private getFilterChipLabel;
+  componentDidRender(): void;
+  render(): any;
+}

package/dist/types/components/category-filter/filter-state.d.ts

@@ -0,0 +1,9 @@
+import { LogicalFilterOperator } from './logical-filter-operator';
+export declare class FilterState {
+  tokens: string[];
+  categories: {
+    id: string;
+    value: string;
+    operator: LogicalFilterOperator;
+  }[];
+}

package/dist/types/components/category-filter/input-state.d.ts

@@ -0,0 +1,6 @@
+export declare class InputState {
+  token: string;
+  category: string;
+  hasCategory(): boolean;
+  constructor(token: string, category: string);
+}

package/dist/types/components/category-filter/logical-filter-operator.d.ts

@@ -0,0 +1,4 @@
+export declare enum LogicalFilterOperator {
+  EQUAL = "Equal",
+  NOT_EQUAL = "Not equal"
+}

package/dist/types/components/chip/chip.d.ts

@@ -0,0 +1,38 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Chip {
+  el: HTMLIxChipElement;
+  /**
+   * Chip variant
+   */
+  variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+  /**
+   * Display chip in active state. Only working witht `variant="primary"`
+   */
+  active: boolean;
+  /**
+   * Show close icon
+   */
+  closable: boolean;
+  /**
+   * Show icon
+   */
+  icon: string | undefined;
+  /**
+   * Custom color for pill. Only working for `variant='custom'`
+   */
+  background: string | undefined;
+  /**
+   * Custom font color for pill. Only working for `variant='custom'`
+   */
+  color: string | undefined;
+  /**
+   * Show chip with outline style
+   */
+  outline: boolean;
+  /**
+   * Fire event if close button is clicked
+   */
+  close: EventEmitter;
+  private getCloseButton;
+  render(): any;
+}

package/dist/types/components/counter-pill/counter-pill.d.ts

@@ -0,0 +1,24 @@
+export declare class CounterPill {
+  el: HTMLIxCounterPillElement;
+  /**
+   * Pill variant
+   */
+  variant: 'primary' | 'alarm' | 'critical' | 'warning' | 'info' | 'neutral' | 'success' | 'custom';
+  /**
+   * Show pill as outline
+   */
+  outline: boolean;
+  /**
+   * Custom color for pill. Only working for `variant='custom'`
+   */
+  background: string | undefined;
+  /**
+   * Custom font color for pill. Only working for `variant='custom'`
+   */
+  color: string | undefined;
+  /**
+   * Align pill content left
+   */
+  alignLeft: boolean;
+  render(): any;
+}

package/dist/types/components/date-picker/date-picker.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import { DateTime, MonthNumbers } from 'luxon';
+import { DateTimeCardCorners } from '../date-time-card/date-time-card';
+export declare class DatePicker {
+  /**
+   * output date format
+   */
+  format: string;
+  /**
+   * Set range size
+   */
+  range: boolean;
+  /**
+   * set styles
+   */
+  individual: boolean;
+  /**
+   * Set corners style
+   */
+  corners: DateTimeCardCorners;
+  private daysInWeek;
+  private dayNames;
+  private monthNames;
+  year: number;
+  month: MonthNumbers;
+  calendar: [number, number[]][];
+  today: DateTime;
+  years: number[];
+  tempYear: number;
+  tempMonth: number;
+  start: DateTime;
+  end: DateTime;
+  dropdownButtonRef: HTMLElement;
+  yearContainerRef: HTMLElement;
+  /**
+   * Time change event
+   */
+  dateChange: EventEmitter<string>;
+  /**
+   * done event
+   */
+  done: EventEmitter<string>;
+  private getStartOfMonth;
+  private getEndOfMonth;
+  private getDaysInMonth;
+  private calculateCalendar;
+  private changeMonth;
+  private selectMonth;
+  private infiniteScrollYears;
+  private selectTempYear;
+  private todayClass;
+  private selectDay;
+  private getOutputFormat;
+  componentWillRender(): void;
+  render(): any;
+}

package/dist/types/components/date-time-card/date-time-card.d.ts

@@ -0,0 +1,14 @@
+export declare type DateTimeCardCorners = 'rounded' | 'left' | 'right';
+export declare class DateTimeCard {
+  hostElement: HTMLIxDateTimeCardElement;
+  /**
+   * set styles
+   */
+  individual: boolean;
+  /**
+   * Set corners style
+   */
+  corners: DateTimeCardCorners;
+  private cardClasses;
+  render(): any;
+}

package/dist/types/components/datetime-picker/datetime-picker.d.ts

@@ -0,0 +1,31 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class DatePicker {
+  /**
+   * Set range size
+   */
+  range: boolean;
+  /**
+   * Show Hour Input
+   */
+  showHour: boolean;
+  /**
+   * Show Minutes Input
+   */
+  showMinutes: boolean;
+  /**
+   * Show Seconds Input
+   */
+  showSeconds: boolean;
+  /**
+   * Show Time Reference Input
+   */
+  showTimeReference: boolean;
+  private date;
+  private time;
+  /**
+   * Time event
+   */
+  done: EventEmitter<string>;
+  private doneEvent;
+  render(): any;
+}

package/dist/types/components/drawer/drawer.d.ts

@@ -0,0 +1,49 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export declare class Drawer {
+  /**
+   * Show or hide the drawer
+   */
+  show: boolean;
+  /**
+   * Fired in case of an outside click during drawer showed state
+   */
+  closeOnClickOutside: boolean;
+  /**
+   * Render the drawer with maximum height
+   */
+  fullHeight: boolean;
+  /**
+   * Min width interpreted as REM
+   */
+  minWidth: number;
+  /**
+   * Max width interpreted as REM
+   */
+  maxWidth: number;
+  /**
+   * Width interpreted as REM if not set to 'auto'
+   */
+  width: number | 'auto';
+  /**
+   * Fire event after drawer is open
+   */
+  open: EventEmitter;
+  /**
+   * Fire event after drawer is close
+   */
+  drawerClose: EventEmitter;
+  private static duration;
+  private callback;
+  private divElement?;
+  onShowChanged(newValue: boolean): void;
+  /**
+   * Toggle or define show state of drawer
+   * @param show Overwrite toggle state with boolean
+   */
+  toggleDrawer(show: boolean): Promise<void>;
+  private onCloseClicked;
+  private clickedOutside;
+  private slideOutRight;
+  private slideInRight;
+  render(): any;
+}