@scania/tegel 1.3.1 → 1.3.3-event-types.0

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

@@ -0,0 +1,11 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the content.
+ */
+export declare class TdsBlock {
+  host: HTMLElement;
+  /** Mode variant of the component, based on current mode. */
+  modeVariant: 'primary' | 'secondary';
+  children: Array<HTMLTdsBlockElement>;
+  setModeVariantOnChildBlocks(): void;
+  render(): any;
+}

package/dist/types/components/dropdown/dropdown-option/dropdown-option.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { TdsCheckboxCustomEvent } from '../../../components';
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the option label text.
  */

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

@@ -28,6 +28,8 @@ export declare class TdsDropdown {
   multiselect: boolean;
   /** Enables filtration in the Dropdown. */
   filter: boolean;
+  /** Normalizes input text for fuzzier search */
+  normalizeText: boolean;
   /** Text that is displayed if filter is used and there are no options that matches the search. */
   noResultText: string;
   /** Default value selected in the Dropdown. */
@@ -55,8 +57,8 @@ export declare class TdsDropdown {
    * </code>
    */
   setValue(value: string | string[], label?: string): Promise<{
-    value: any;
-    label: any;
+    value: string;
+    label: string;
   }[]>;
   /**
    * @internal
@@ -84,12 +86,14 @@ export declare class TdsDropdown {
   onKeyDown(event: KeyboardEvent): Promise<void>;
   handleOpenState(): void;
   componentWillLoad(): void;
+  /** Method to check if we should normalize text */
+  private normalizeString;
   /** Method that resets the dropdown without emitting an event. */
   private internalReset;
   private setDefaultOption;
   private selectChildrenAsSelectedBasedOnSelectionProp;
   private getChildren;
-  getOpenDirection: () => "down" | "up";
+  getOpenDirection: () => "up" | "down";
   private getSelectedChildren;
   private getSelectedChildrenLabels;
   private getValue;

package/dist/types/components/dropdown/dropdown.stories.d.ts

@@ -50,6 +50,18 @@ declare const _default: {
         };
       };
     };
+    normalizeText: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
     multiselect: {
       name: string;
       description: string;
@@ -161,6 +173,7 @@ declare const _default: {
     modeVariant: string;
     error: boolean;
     filter: boolean;
+    normalizeText: boolean;
     multiselect: boolean;
     size: string;
     labelText: string;

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

@@ -0,0 +1,15 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a launcher list (or grid) element.
+ */
+export declare class TdsHeaderLauncher {
+  host: HTMLElement;
+  open: boolean;
+  buttonEl?: HTMLTdsHeaderLauncherButtonElement;
+  hasListTypeMenu: boolean;
+  private uuid;
+  private ariaAttributes;
+  onAnyClick(event: MouseEvent): void;
+  componentDidLoad(): void;
+  toggleLauncher(): void;
+  render(): any;
+}

package/dist/types/components/popover-canvas/popover-canvas.d.ts

@@ -0,0 +1,27 @@
+import type { Placement } from '@popperjs/core';
+import { Attributes } from '../../types/Attributes';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the contents of the popover.
+ */
+export declare class TdsPopoverCanvas {
+  host: HTMLTdsPopoverCanvasElement;
+  /** The CSS-selector for an element that will trigger the Popover */
+  selector: string;
+  /** Element that will trigger the Popover (takes priority over selector) */
+  referenceEl?: HTMLElement | null;
+  /** Controls whether the Popover is shown or not. If this is set hiding and showing
+   * will be decided by this prop and will need to be controlled from the outside.
+   */
+  show: boolean;
+  /** Decides the placement of the Popover Canvas. See https://popper.js.org/docs/v2/constructors/#placement */
+  placement: Placement;
+  /** Sets the offset skidding */
+  offsetSkidding: number;
+  /** Sets the offset distance */
+  offsetDistance: number;
+  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
+  modifiers: Object[];
+  inheritedAttributes: Attributes;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/popover-core/popover-core.d.ts

@@ -0,0 +1,47 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+import type { Placement, Instance } from '@popperjs/core';
+export declare class TdsPopoverCore {
+  host: HTMLTdsPopoverCoreElement;
+  /** The CSS-selector for an element that will trigger the pop-over */
+  selector: string;
+  /** Element that will trigger the pop-over (takes priority over selector) */
+  referenceEl?: HTMLElement | null;
+  /** Decides if the Popover Menu should be visible from the start */
+  show: boolean;
+  /** Decides the placement of the Popover Menu */
+  placement: Placement;
+  /** Sets the offset skidding */
+  offsetSkidding: number;
+  /** Sets the offset distance */
+  offsetDistance: number;
+  /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
+  modifiers: Object[];
+  /** What triggers the popover to show */
+  trigger: 'click' | 'hover' | 'hover-popover';
+  /** Decides if the popover should hide automatically.
+   * Alternatevly it can be hidden externally based on emitted events. */
+  autoHide: boolean;
+  renderedShowValue: boolean;
+  popperInstance: Instance | null;
+  target?: HTMLElement | null;
+  isShown: boolean;
+  /** @internal Show event. */
+  tdsShow: EventEmitter<{}>;
+  /** @internal Close event. */
+  tdsClose: EventEmitter<{}>;
+  onAnyClick(event: MouseEvent): void;
+  componentWillLoad(): void;
+  onShowChange(newValue: boolean): void;
+  onReferenceElChanged(newValue: HTMLElement, oldValue: HTMLElement): void;
+  onTriggerChanged(newValue: 'click' | 'hover' | 'hover-popover'): void;
+  private setIsShown;
+  private onClickTarget;
+  private handleShow;
+  private handleHide;
+  private initialize;
+  private cleanUp;
+  componentDidLoad(): void;
+  componentDidRender(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/popover-menu/popover-menu.d.ts

@@ -0,0 +1,28 @@
+import type { Placement } from '@popperjs/core';
+import { Attributes } from '../../types/Attributes';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
+ */
+export declare class TdsPopoverMenu {
+  host: HTMLTdsPopoverMenuElement;
+  /** The CSS-selector for an element that will trigger the pop-over */
+  selector: string;
+  /** Element that will trigger the pop-over (takes priority over selector) */
+  referenceEl?: HTMLElement | null;
+  /** Controls whether the Popover is shown or not. If this is set hiding and showing
+   * will be decided by this prop and will need to be controlled from the outside. This
+   * also means that clicking outside of the popover won't close it.
+   */
+  show: boolean;
+  /** Decides the placement of the Popover Menu */
+  placement: Placement;
+  /** Sets the offset skidding */
+  offsetSkidding: number;
+  /** Sets the offset distance */
+  offsetDistance: number;
+  /** If true this unsets the width (160px) of the Popover Menu */
+  fluidWidth: boolean;
+  inheritedAttributes: Attributes;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/side-menu/side-menu-item/side-menu-item.d.ts

@@ -0,0 +1,24 @@
+import { CollapseEvent } from '../side-menu';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a native <code>&lt;button</code> and <code>&lt;a></code> element.
+ * */
+export declare class TdsSideMenuItem {
+  host: HTMLTdsSideMenuItemElement;
+  /** If the item should appear selected. */
+  selected: boolean;
+  /** If the item should appear active. Can be used when the item is
+   * triggering a dropdown, and the dropdown is open, for example. */
+  active: boolean;
+  collapsed: boolean;
+  private sideMenuEl;
+  private slotEl;
+  updateSlotted(searchPredicate: (element: HTMLElement) => boolean, mutationCallback: (element: HTMLElement) => void): void;
+  /**
+   * This function is needed because we can't use CSS selectors to style something in the light dom
+   */
+  updateSlottedElements(): void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  collapseSideMenuEventHandler(event: CustomEvent<CollapseEvent>): void;
+  render(): any;
+}

package/dist/types/components/side-menu/side-menu.d.ts

@@ -0,0 +1,45 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+export type CollapseEvent = {
+  collapsed: boolean;
+};
+type Props = {
+  collapsed: boolean;
+};
+export type InternalTdsSideMenuPropChange = {
+  changed: Array<keyof Props>;
+} & Partial<Props>;
+/**
+ * @slot overlay - Used of injection of tds-side-menu-overlay
+ * @slot close-button - Used for injection of tds-side-menu-close-button that is show when in mobile view
+ * @slot <default> - <b>Unnamed slot.</b> For primary content of the side menu - like buttons.
+ * Used for nesting main content of Side Menu, e.g. <code><tds-side-menu-item></code> and <code><tds-side-menu-dropdown></code> components
+ * @slot end - Used for items that are presented at the bottom of the Side Menu, e.g. profile settings
+ * @slot sticky-end - Used for tds-side-menu-collapse-button component
+ * */
+export declare class TdsSideMenu {
+  host: HTMLTdsSideMenuElement;
+  /** Applicable only for mobile. If the Side Menu is open or not. */
+  open: boolean;
+  /** Applicable only for desktop. If the Side Menu should always be shown. */
+  persistent: boolean;
+  /** If the Side Menu is collapsed. Only a persistent desktop menu can be collapsed.
+   * NOTE: Only use this if you have prevented the automatic collapsing with preventDefault on the tds-Collapse event. */
+  collapsed: boolean;
+  isUpperSlotEmpty: boolean;
+  isCollapsed: boolean;
+  private matchesLgBreakpointMq;
+  handleMatchesLgBreakpointChange: (e: MediaQueryListEvent) => void;
+  connectedCallback(): void;
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  onCollapsedChange(newVal: boolean): void;
+  /** Event that is emitted when the Side Menu is collapsed. */
+  tdsCollapse: EventEmitter<CollapseEvent>;
+  /** @internal Broadcasts collapsed state to child components. */
+  internalTdsCollapse: EventEmitter<CollapseEvent>;
+  /** @internal Broadcasts collapsed state to child components. */
+  internalTdsSideMenuPropChange: EventEmitter<InternalTdsSideMenuPropChange>;
+  collapsedSideMenuEventHandler(event: CustomEvent<CollapseEvent>): void;
+  render(): any;
+}
+export {};

package/dist/types/components/table/table-body/table-body.d.ts

@@ -0,0 +1,24 @@
+import { InternalTdsTablePropChange } from '../table/table';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For table rows.
+ * @slot no-result - Slot for no result message when using filtering.
+ */
+export declare class TdsTableBody {
+  host: HTMLElement;
+  multiselect: boolean;
+  enablePaginationTableBody: boolean;
+  expandableRows: boolean;
+  multiselectArray: any[];
+  multiselectArrayJSON: string;
+  mainCheckboxStatus: boolean;
+  columnsNumber: number;
+  tableId: string;
+  tableEl: HTMLTdsTableElement;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  bodyCheckBoxClicked: () => void;
+  bodyCheckboxListener(): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  render(): any;
+}

package/dist/types/components/table/table-body-cell/table-body-cell.d.ts

@@ -0,0 +1,27 @@
+import { InternalTdsTablePropChange } from '../table/table';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cell contents.
+ */
+export declare class TdsTableBodyCell {
+  /** Value that will be presented as text inside a cell */
+  cellValue: string | number;
+  /** Passing the same cell key for all body cells which is used in head cell enables features of text align and hovering */
+  cellKey: any;
+  /** Disables internal padding. Useful when passing other components to cell. */
+  disablePadding: boolean;
+  textAlignState: string;
+  activeSorting: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  internalTdsHoverListener(event: CustomEvent<any>): void;
+  internalTdsTextAlignListener(event: CustomEvent<any>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/table/table-body-row/table-body-row.d.ts

@@ -0,0 +1,28 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
+ */
+export declare class TdsTableBodyRow {
+  /** Marks the row as selected, used for multiselect table. */
+  selected: boolean;
+  multiselect: boolean;
+  mainCheckBoxStatus: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Event emitted when a row is selected/deselected. */
+  tdsSelect: EventEmitter<{
+    tableId: string;
+    checked: boolean;
+    selectedRows: any[];
+  }>;
+  handleCheckboxChange(event: any): Promise<void>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components/table/table-body-row-expandable/table-body-row-expandable.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the cells.
+ * @slot expand-row - Slot for the expanded row.
+ */
+export declare class TdsTableBodyRowExpandable {
+  /** In case that automatic count of columns does not work, user can manually set this one.
+   *  Take in mind that expandable control is column too */
+  colSpan: number;
+  isExpanded: boolean;
+  tableId: string;
+  columnsNumber: number;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  modeVariant: 'primary' | 'secondary';
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** @internal Sends out expanded status which is used by the Table header component */
+  internalTdsRowExpanded: EventEmitter<any>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  sendValue(): void;
+  onChangeHandler(event: any): void;
+  render(): any;
+}

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

@@ -0,0 +1,39 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the header cells.
+ */
+export declare class TdsTableHeaderRow {
+  /** @deprecated Deprecated, use selected instead.. */
+  allSelected: boolean;
+  /** Prop for controling the checked/unchecked state of the "All selected"-checkbox. */
+  selected: boolean;
+  /** Prop for controling the indeterminate state of the "All selected"-checkbox. */
+  indeterminate: boolean;
+  multiselect: boolean;
+  expandableRows: boolean;
+  mainCheckboxSelected: boolean;
+  mainExpendSelected: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  enableToolbarDesign: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Event emitted when the status of the select all checkbox changes. */
+  tdsSelectAll: EventEmitter<{
+    tableId: string;
+    checked: boolean;
+    selectedRows: any[];
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  internalTdsRowExpandedListener(event: CustomEvent<any>): void;
+  bodyExpandClicked(): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  handleCheckboxChange(event: any): Promise<void>;
+  render(): any;
+}

package/dist/types/components/table/table-header-cell/table-header-cell.d.ts

@@ -0,0 +1,56 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+export declare class TdsTableHeaderCell {
+  /** The value of column key, usually comes from JSON, needed for sorting */
+  cellKey: string;
+  /** Text that displays in column cell */
+  cellValue: string;
+  /** In case noMinWidth is set, the user has to specify width value for each column. */
+  customWidth: string;
+  /** Enables sorting on that column */
+  sortable: boolean;
+  /** Setting for text align, default is left. Other accepted values are "right" or "end". */
+  textAlign: string;
+  textAlignState: string;
+  sortingDirection: 'asc' | 'desc';
+  sortedByMyKey: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  multiselect: boolean;
+  enableToolbarDesign: boolean;
+  tableId: string;
+  expandableRows: boolean;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to in order to implement custom-sorting logic. */
+  tdsSort: EventEmitter<{
+    tableId: string;
+    columnKey: string;
+    sortingDirection: 'asc' | 'desc';
+  }>;
+  /**  @internal Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to in order to implement custom-sorting logic. */
+  internalSortButtonClicked: EventEmitter<{
+    tableId: string;
+    key: string;
+  }>;
+  /** @internal Sends unique Table identifier,column key and text align value so the body cells with a same key take the same text alignment as header cell */
+  internalTdsTextAlign: EventEmitter<any>;
+  /** @internal Sends unique Table identifier, column key so the body cells with the same key change background when user hovers over header cell */
+  internalTdsHover: EventEmitter<{
+    tableId: string;
+    key: string;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  updateOptionsContent(event: CustomEvent<{
+    tableId: string;
+    key: string;
+  }>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  componentWillRender(): void;
+  sortButtonClick: () => void;
+  headerCellContent: () => any;
+  onHeadCellHover: (key: any) => void;
+  render(): any;
+}

package/dist/types/components/table/table-toolbar/table-toolbar.d.ts

@@ -0,0 +1,29 @@
+import { EventEmitter } from '../../../stencil-public-runtime';
+import { InternalTdsTablePropChange } from '../table/table';
+/**
+ * @slot end - Slot for the end (right side) of the Table Toolbar.
+ */
+export declare class TdsTableToolbar {
+  /** Adds title to the Table */
+  tableTitle: string;
+  /** Enables preview of searchbar */
+  filter: boolean;
+  verticalDividers: boolean;
+  compactDesign: boolean;
+  noMinWidth: boolean;
+  whiteBackground: boolean;
+  tableId: string;
+  host: HTMLElement;
+  tableEl: HTMLTdsTableElement;
+  /** Used for sending users' input to the main parent tds-table the component,
+   * can also be listened to in order to implement custom sorting logic. */
+  tdsFilter: EventEmitter<{
+    tableId: string;
+    query: string;
+  }>;
+  internalTdsPropChangeListener(event: CustomEvent<InternalTdsTablePropChange>): void;
+  connectedCallback(): void;
+  componentWillLoad(): void;
+  handleSearch(event: any): void;
+  render(): any;
+}

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

@@ -0,0 +1,34 @@
+import type { Placement } from '@popperjs/core';
+import { Attributes } from '../../types/Attributes';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
+ */
+export declare class TdsTooltip {
+  host: HTMLTdsTooltipElement;
+  /** In case Tooltip contains only text, no HTML, a text can be passed by this prop */
+  text: string;
+  /** The CSS-selector for an element that will trigger the Tooltip */
+  selector: string;
+  /** Element that will trigger the Tooltip (takes priority over selector) */
+  referenceEl?: HTMLElement | null;
+  /** Allow mouse over Tooltip. Useful when Tooltip contains clickable elements like link or button. */
+  mouseOverTooltip: boolean;
+  /** Prop in control of showing and hiding prop */
+  show: boolean;
+  /** Placement of Tooltip. */
+  placement: Placement;
+  border: string;
+  offsetSkidding: number;
+  offsetDistance: number;
+  popperjsExtraModifiers: {
+    name: string;
+    enabled: boolean;
+    phase: string;
+    fn: ({ state }: {
+      state: any;
+    }) => void;
+  }[];
+  inheritedAttributes: Attributes;
+  componentWillLoad(): void;
+  render(): any;
+}

package/dist/types/components.d.ts

@@ -368,6 +368,10 @@ export namespace Components {
           * Text that is displayed if filter is used and there are no options that matches the search.
          */
         "noResultText": string;
+        /**
+          * Normalizes input text for fuzzier search
+         */
+        "normalizeText": boolean;
         /**
           * The direction the Dropdown should open, auto if not specified.
          */
@@ -387,7 +391,7 @@ export namespace Components {
         /**
           * Method for setting the value of the Dropdown.  Single selection example:  <code> dropdown.setValue('option-1', 'Option 1'); </code>  Multiselect example:  <code> dropdown.setValue(['option-1', 'option-2']); </code>
          */
-        "setValue": (value: string | string[], label?: string) => Promise<{ value: any; label: any; }[]>;
+        "setValue": (value: string | string[], label?: string) => Promise<{ value: string; label: string; }[]>;
         /**
           * The size of the Dropdown.
          */
@@ -2812,6 +2816,10 @@ declare namespace LocalJSX {
           * Text that is displayed if filter is used and there are no options that matches the search.
          */
         "noResultText"?: string;
+        /**
+          * Normalizes input text for fuzzier search
+         */
+        "normalizeText"?: boolean;
         /**
           * Blur event for the Dropdown.
          */

package/dist/types/index.d.ts

@@ -1 +1,2 @@
 export * from './components';
+export * from './component-event-listeners-edited';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.3.1",
+  "version": "1.3.3-event-types.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [
@@ -33,7 +33,8 @@
     "access": "public"
   },
   "scripts": {
-    "build": "stencil build --docs",
+    "build": "stencil build --docs && stencil build --docs",
+    "_comment": "Due to stencil bug with types creation, we need to run build two times!",
     "start": "stencil build --dev --watch --serve",
     "test": "node docker-test-runner.js",
     "update-snapshots": "docker run --rm --network host -v $(pwd):/work/ -w /work/ mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash -c 'npm install && npx playwright test --update-snapshots && exit'",
@@ -70,6 +71,7 @@
     "addon-screen-reader": "^1.8.6",
     "babel-loader": "^8.2.5",
     "concurrently": "^8.0.1",
+    "event-listener-types-output-target": "^1.2.0",
     "highlight.js": "^11.8.0",
     "serve": "^14.2.1",
     "stencil-playwright": "^0.3.0",

package/dist/tegel/p-e5fd7377.entry.js

@@ -1 +0,0 @@
-import{r as t,c as o,h as s,H as e,g as i}from"./p-3e9b9672.js";const l=class{constructor(s){t(this,s),this.tdsChange=o(this,"tdsChange",6),this.tdsFocus=o(this,"tdsFocus",6),this.tdsBlur=o(this,"tdsBlur",6),this.tdsInput=o(this,"tdsInput",6),this.setDefaultOption=()=>{Array.from(this.host.children).filter((t=>"TDS-DROPDOWN-OPTION"===t.tagName)).forEach((t=>(this.multiselect?this.defaultValue.split(",").forEach((o=>{o===t.value&&(t.setSelected(!0),this.value=this.value?[...this.value,t.value]:[t.value])})):this.defaultValue===t.value?(t.setSelected(!0),this.value=[t.value]):t.setSelected(!1),this.setValueAttribute(),t)))},this.getChildren=()=>Array.from(this.host.children).filter((t=>"TDS-DROPDOWN-OPTION"===t.tagName)),this.getOpenDirection=()=>{var t,o,s,e,i;if("auto"===this.openDirection||!this.openDirection){const l=null!==(o=null===(t=this.dropdownList)||void 0===t?void 0:t.offsetHeight)&&void 0!==o?o:0;return(null!==(i=null===(e=(s=this.host).getBoundingClientRect)||void 0===e?void 0:e.call(s).top)&&void 0!==i?i:0)+l+57>window.innerHeight?"up":"down"}return this.openDirection},this.getSelectedChildren=()=>{var t;return null===(t=this.value)||void 0===t?void 0:t.map((t=>this.getChildren().find((o=>o.value===t)))).filter(Boolean)},this.getSelectedChildrenLabels=()=>{var t;return null===(t=this.getSelectedChildren())||void 0===t?void 0:t.map((t=>t.textContent.trim()))},this.getValue=()=>{const t=this.getSelectedChildrenLabels();return t?this.filter?null==t?void 0:t.join(", "):null==t?void 0:t.toString():""},this.setValueAttribute=()=>{var t,o,s;""===(null===(t=this.value)||void 0===t?void 0:t.toString())&&(this.value=null),this.host.setAttribute("value",null!==(s=null===(o=this.value)||void 0===o?void 0:o.map((t=>t)).toString())&&void 0!==s?s:null)},this.handleFilter=t=>{this.tdsInput.emit(t);const o=t.target.value.toLowerCase(),s=this.getChildren();""===o?(s.forEach((t=>(t.removeAttribute("hidden"),t))),this.filterResult=null):this.filterResult=s.filter((t=>(t.textContent.toLowerCase().includes(o.toLowerCase())?t.removeAttribute("hidden"):t.setAttribute("hidden",""),!t.hasAttribute("hidden")))).length},this.handleFocus=t=>{this.tdsFocus.emit(t)},this.handleBlur=t=>{this.tdsBlur.emit(t)},this.handleChange=()=>{var t,o;this.tdsChange.emit({name:this.name,value:null!==(o=null===(t=this.value)||void 0===t?void 0:t.map((t=>t)).toString())&&void 0!==o?o:null})},this.name=void 0,this.disabled=!1,this.helper=void 0,this.label=void 0,this.labelPosition=void 0,this.modeVariant=null,this.openDirection="auto",this.placeholder=void 0,this.size="lg",this.error=!1,this.multiselect=!1,this.filter=!1,this.noResultText="No result",this.defaultValue=void 0,this.open=!1,this.value=void 0,this.filterResult=void 0,this.filterFocus=void 0}async reset(){this.internalReset(),this.handleChange()}async setValue(t,o){let s;s="string"==typeof t?[t]:t,!this.multiselect&&s.length>1&&(console.warn("Tried to select multiple items, but multiselect is not enabled."),s=[s[0]]),this.internalReset();for(let t=0;t<s.length;t++)this.getChildren().some((o=>o.value===s[t]))||s.splice(t,1);return this.value=s,this.setValueAttribute(),this.selectChildrenAsSelectedBasedOnSelectionProp(),this.handleChange(),this.getSelectedChildren().map((t=>({value:t.value,label:t.textContent.trim()})))}async appendValue(t){this.setValue(this.multiselect&&this.value?[...this.value,t]:t)}async removeValue(t){var o,s;let e;return this.multiselect?null===(o=this.getChildren())||void 0===o||o.forEach((o=>{var s;return o.value===t&&(this.value=null===(s=this.value)||void 0===s?void 0:s.filter((t=>t!==o.value)),e=o.textContent.trim(),o.setSelected(!1)),o})):this.reset(),this.handleChange(),this.setValueAttribute(),null===(s=this.value)||void 0===s?void 0:s.map((t=>({value:t,label:e})))}async close(){this.open=!1}onAnyClick(t){this.open&&!t.composedPath().includes(this.host)&&(this.open=!1)}async onKeyDown(t){const{activeElement:o}=document;if(!o)return;const s=this.getChildren();if("ArrowDown"===t.key){const t=o.nextElementSibling?s.findIndex((t=>t===o.nextElementSibling)):0;s[((t,o)=>{if(void 0===t[o])return 0;for(let s=o;s<t.length;s++)if(!t[s].disabled)return s})(s,t)].focus()}else"ArrowUp"===t.key?s[((t,o)=>{if(void 0===t[o])return t.length-1;for(let s=o;s>=0;s--)if(!t[s].disabled)return s})(s,o.nextElementSibling?this.getChildren().findIndex((t=>t===o.previousElementSibling)):0)].focus():"Escape"===t.key&&(this.open=!1)}handleOpenState(){this.filter&&this.multiselect&&(this.open||(this.inputElement.value=this.getValue()))}componentWillLoad(){this.defaultValue&&this.setDefaultOption()}internalReset(){this.getChildren().forEach((t=>(t.setSelected(!1),t))),this.value=null,this.setValueAttribute()}selectChildrenAsSelectedBasedOnSelectionProp(){this.getChildren().forEach((t=>{this.value.forEach((o=>{t.value!==o?this.multiselect||t.setSelected(!1):t.setSelected(!0)}))}))}render(){var t,o,i,l;return((t,o,s,e)=>{let i=t.querySelector("input");t.querySelector("input")||(i=t.ownerDocument.createElement("input"),i.type="hidden",t.appendChild(i)),i.disabled=e,i.name=o,i.value=s||""})(this.host,this.name,null===(t=this.value)||void 0===t?void 0:t.map((t=>t)).toString(),this.disabled),s(e,{role:"select",class:this.modeVariant?`tds-mode-variant-${this.modeVariant}`:""},this.label&&"outside"===this.labelPosition&&s("div",{class:"label-outside "+(this.disabled?"disabled":"")},this.label),s("div",{class:`dropdown-select ${this.size} ${this.disabled?"disabled":""}`},this.filter?s("div",{class:{filter:!0,focus:this.filterFocus,disabled:this.disabled,error:this.error}},s("div",{class:"value-wrapper"},this.label&&"inside"===this.labelPosition&&this.placeholder&&s("div",{class:`label-inside ${this.size}`},this.label),this.label&&"inside"===this.labelPosition&&!this.placeholder&&s("div",{class:`\n                    label-inside-as-placeholder\n                    ${this.size}\n                    ${(null===(o=this.value)||void 0===o?void 0:o.length)?"selected":""}\n                    `},this.label),s("input",{ref:t=>this.inputElement=t,class:"inside"===this.labelPosition?"placeholder":"",type:"text",placeholder:this.placeholder,value:this.getValue(),disabled:this.disabled,onInput:t=>this.handleFilter(t),onBlur:t=>{this.filterFocus=!1,this.handleBlur(t)},onFocus:t=>{this.open=!0,this.filterFocus=!0,this.handleFocus(t)},onKeyDown:t=>{"Escape"===t.key&&(this.open=!1)}})),s("tds-icon",{onClick:()=>{this.open=!this.open,this.open&&this.inputElement.focus()},class:this.open?"open":"closed",name:"chevron_down",size:"16px"})):s("button",{onClick:()=>{this.open=!this.open},onKeyDown:t=>{"Escape"===t.key&&(this.open=!1)},class:`\n                ${this.value?"value":"placeholder"}\n                ${this.open?"open":"closed"}\n                ${this.error?"error":""}\n                `,disabled:this.disabled},s("div",{class:`value-wrapper ${this.size}`},this.label&&"inside"===this.labelPosition&&this.placeholder&&s("div",{class:`label-inside ${this.size}`},this.label),this.label&&"inside"===this.labelPosition&&!this.placeholder&&s("div",{class:`\n                    label-inside-as-placeholder\n                    ${this.size}\n                    ${(null===(i=this.value)||void 0===i?void 0:i.length)?"selected":""}\n                    `},this.label),s("div",{class:`placeholder ${this.size}`},(null===(l=this.value)||void 0===l?void 0:l.length)?this.getValue():this.placeholder),s("tds-icon",{class:this.open?"open":"closed",name:"chevron_down",size:"16px"})))),s("div",{ref:t=>this.dropdownList=t,class:`dropdown-list\n            ${this.size}\n            ${this.open?"open":"closed"}\n            ${this.getOpenDirection()}\n            ${this.label&&"outside"===this.labelPosition?"label-outside":""}`},s("slot",null),0===this.filterResult&&s("div",{class:`no-result ${this.size}`},this.noResultText)),this.helper&&s("div",{class:`helper ${this.error?"error":""} ${this.disabled?"disabled":""}`},this.error&&s("tds-icon",{name:"error",size:"16px"}),this.helper))}get host(){return i(this)}static get watchers(){return{open:["handleOpenState"]}}};l.style=':host button{all:unset;height:100%;width:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);border-radius:4px 4px 0 0}:host button:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host button .value-wrapper{padding:0 16px;display:flex;align-items:center;justify-content:space-between}:host button.placeholder{color:var(--tds-dropdown-placeholder-color);line-height:1.3}:host button.value{color:var(--tds-dropdown-value-color);font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);line-height:1.3}:host button:focus{border-bottom-color:var(--tds-dropdown-border-bottom-open)}:host button:focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:1px;background:var(--tds-dropdown-border-bottom-open)}:host button.error{border-bottom:1px solid var(--tds-negative)}:host button.error:focus{border-bottom-color:transparent}:host button.error:focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host button:disabled{color:var(--tds-dropdown-disabled-color);border-bottom:1px solid transparent}:host .filter{display:flex;align-items:center;justify-content:space-between;height:100%;background-color:var(--tds-dropdown-bg);border-bottom:1px solid var(--tds-dropdown-border-bottom);padding-left:16px;border-radius:4px 4px 0 0}:host .filter:hover{border-bottom:1px solid var(--tds-dropdown-border-bottom-hover)}:host .filter.disabled{color:var(--tds-dropdown-disabled-color)}:host .filter .value-wrapper{display:flex;width:100%;height:100%}:host .filter .label-inside-as-placeholder{position:absolute;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);color:var(--tds-dropdown-placeholder-color)}:host .filter .label-inside-as-placeholder.lg{top:20px}:host .filter .label-inside-as-placeholder.md{top:16px}:host .filter .label-inside-as-placeholder.sm{display:none}:host .filter .label-inside-as-placeholder.selected{font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .filter .label-inside-as-placeholder.selected.lg{top:12px}:host .filter .label-inside-as-placeholder.selected.md{top:8px}:host .filter .label-inside-as-placeholder.selected.sm{display:none}:host .filter .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .filter.focus{border-bottom-color:transparent}:host .filter.focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-dropdown-border-bottom-open)}:host .filter.error{border-bottom:1px solid var(--tds-negative)}:host .filter.error.focus{border-bottom-color:transparent}:host .filter.error.focus::before{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--tds-negative)}:host .filter input{flex:1;all:unset;width:100%}:host .filter input::placeholder{color:var(--tds-dropdown-placeholder-color)}:host .filter input:disabled::placeholder{color:var(--tds-dropdown-disabled-color)}:host .filter tds-icon{margin-right:16px}:host{display:block;position:relative;font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls)}:host .label-outside{font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);color:var(--tds-dropdown-label-color);margin-bottom:8px}:host .label-outside.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select{position:relative}:host .dropdown-select.disabled .label-inside,:host .dropdown-select.disabled .placeholder,:host .dropdown-select.disabled .label-inside-as-placeholder,:host .dropdown-select.disabled .value-wrapper{color:var(--tds-dropdown-disabled-color)}:host .dropdown-select .label-inside{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);color:var(--tds-dropdown-label-inside-color)}:host .dropdown-select .label-inside.lg{top:12px;left:16px}:host .dropdown-select .label-inside.md{top:8px;left:16px}:host .dropdown-select .label-inside.sm{display:none}:host .dropdown-select .label-inside+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select .placeholder{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:host .dropdown-select .label-inside-as-placeholder{color:var(--tds-dropdown-placeholder-color)}:host .dropdown-select .label-inside-as-placeholder.selected{position:absolute;font:var(--tds-detail-07);letter-spacing:var(--tds-detail-07-ls);transition:all 0.2s ease-in-out}:host .dropdown-select .label-inside-as-placeholder.selected.lg{top:12px}:host .dropdown-select .label-inside-as-placeholder.selected.md{top:8px}:host .dropdown-select .label-inside-as-placeholder.selected.sm{display:none}:host .dropdown-select .label-inside-as-placeholder.selected+.placeholder:not(.sm){margin-top:8px}:host .dropdown-select.lg{height:55px}:host .dropdown-select.md{height:47px}:host .dropdown-select.sm{height:39px}:host .helper{margin-top:4px;color:var(--tds-dropdown-helper-color);font:var(--tds-detail-05);letter-spacing:var(--tds-detail-05-ls);display:flex;align-items:center;gap:8px}:host .helper.error{color:var(--tds-negative)}:host .helper.disabled{color:var(--tds-dropdown-disabled-color)}:host .dropdown-list{z-index:100;position:absolute;margin-top:1px;width:100%;transform-origin:top;transition:transform 0.2s ease-in-out;box-shadow:rgba(0, 0, 0, 0.1) 0 2px 3px 0;border-radius:0 0 4px 4px;overflow-y:auto}:host .dropdown-list::-webkit-scrollbar{width:4px;background-color:inherit}:host .dropdown-list::-webkit-scrollbar-thumb{background-color:var(--tds-grey-300)}:host .dropdown-list ::-webkit-scrollbar-button{height:0;width:0}:host .dropdown-list.lg{max-height:312px}:host .dropdown-list.md{max-height:312px}:host .dropdown-list.sm{max-height:260px}:host .dropdown-list.up{bottom:100%;margin-top:0;margin-bottom:1px;transform-origin:bottom;display:flex;flex-direction:column-reverse;box-shadow:rgba(0, 0, 0, 0.1) 0 -1px 3px 0;border-radius:4px 4px 0 0}:host .dropdown-list.up.label-outside{bottom:calc(100% - 24px)}:host .dropdown-list.closed{transform:scaleY(0);visibility:hidden}:host .dropdown-list.open{transform:scaleY(1)}:host .dropdown-list .no-result{font:var(--tds-detail-02);letter-spacing:var(--tds-detail-02-ls);display:flex;align-items:center;padding:0 16px;background-color:var(--tds-dropdown-bg)}:host .dropdown-list .no-result.lg{height:56px}:host .dropdown-list .no-result.md{height:48px}:host .dropdown-list .no-result.sm{height:40px}:host tds-icon{transition:transform 0.2s ease-in-out}:host tds-icon.open{transform:rotateZ(180deg)}';export{l as tds_dropdown}