@scania/tegel 0.0.9 → 0.0.11

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

@@ -0,0 +1,52 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    label: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    checked: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    label: string;
+    checked: boolean;
+    disabled: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,5 +1,11 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot prefix - Slot for the prefix icon.
+ * @slot label - Slot for the label text.
+ * @slot suffix - Slot for the suffix icon.
+ */
 export declare class TdsChip {
+  host: HTMLElement;
   /** Type of Chip, depends on usage */
   type: 'button' | 'radio' | 'checkbox';
   /** Size of the Chip component */

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

@@ -0,0 +1,99 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: any;
+    layout: string;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    inputType: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    size: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    label: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    icon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    iconPosition: {
+      name: string;
+      description: string;
+      if: {
+        arg: string;
+        eq: boolean;
+      };
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        disable: boolean;
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    inputType: string;
+    size: string;
+    label: string;
+    icon: boolean;
+    iconPosition: string;
+    disabled: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -0,0 +1,125 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: any;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    modeVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    state: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+    };
+    type: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    size: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    defaultValue: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    noMinWidth: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    label: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    helper: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    disabled: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    state: string;
+    type: string;
+    size: string;
+    defaultValue: string;
+    noMinWidth: boolean;
+    label: string;
+    helper: string;
+    disabled: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -0,0 +1,58 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: {
+      Divider: any;
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    orientation: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+        options: string[];
+      };
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    width: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+    height: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      if: {
+        arg: string;
+        eq: string;
+      };
+    };
+  };
+  args: {
+    orientation: string;
+    width: number;
+    height: number;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,24 +1,38 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
+import { TdsCheckboxCustomEvent } from '../../../components';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the option label text.
+ */
 export declare class TdsDropdownOption {
   host: HTMLElement;
-  innerValue: string;
-  /** Set to true if selected */
-  selected: boolean;
-  /** Sets option to disabled state if true */
-  disabled: boolean;
-  /** Value is a unique string that will be used for application logic */
+  /** Value for the Dropdown option. */
   value: string;
-  /** @internal Fires on click on one of the Dropdown items */
-  internalTdsSelect: EventEmitter<{
-    value: string | number;
-    label: string | number;
-    parent: HTMLTdsDropdownElement;
+  /** Sets the option as disabled. */
+  disabled: boolean;
+  selected: boolean;
+  multiselect: boolean;
+  size: 'sm' | 'md' | 'lg';
+  private parentElement;
+  private label;
+  /** Method to select/deselect an option if the option is not disabled. */
+  setSelected(selected: boolean): Promise<void>;
+  /** Click event for the Dropdown option. */
+  tdsSelect: EventEmitter<{
+    selected: boolean;
+    value: string;
   }>;
-  isMultiSelectOption: boolean;
-  changeFocusHandler(): void;
-  removeFocusHandler(): void;
-  onKeyDown(event: KeyboardEvent): void;
-  componentWillLoad(): void;
-  handleClick(value: any): void;
+  /** Focus event for the Dropdown option. */
+  tdsFocus: EventEmitter<FocusEvent>;
+  /** Blur event for the Dropdown option. */
+  tdsBlur: EventEmitter<FocusEvent>;
+  connectedCallback: () => void;
+  handleSingleSelect: () => void;
+  handleMultiselect: (event: TdsCheckboxCustomEvent<{
+    checkboxId: string;
+    checked: boolean;
+    value?: string;
+  }>) => void;
+  handleFocus: (event: any) => void;
+  handleBlur: (event: any) => void;
   render(): any;
 }

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

@@ -1,61 +1,89 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For dropdown option elements.
+ */
 export declare class TdsDropdown {
-  textInput?: HTMLInputElement;
-  /** Set the variant of the Dropdown. */
-  modeVariant: 'primary' | 'secondary';
-  /** Placeholder text for Dropdown with no selectedLabel item */
-  placeholder: string;
-  /** Add the value of the option as string to set it as default */
-  defaultOption: string;
-  /** Add the value of the option as string to set it as new selected value */
-  selectedOption: string;
-  /** Set to true for disabled states */
+  host: HTMLElement;
+  /** Name for the Dropdowns input element. */
+  name: string;
+  /** Sets the Dropdown in a disabled state */
   disabled: boolean;
-  /** `Controls type of Dropdown. */
-  type: 'default' | 'multiselect' | 'filter';
-  /** Controls the size of the Dropdown.
-   * 'sm', 'md' and 'lg' correct values and 'small', 'medium' and 'large' are deprecated */
-  size: 'sm' | 'md' | 'lg' | 'small' | 'medium' | 'large';
-  /** Set to true to make the width following the label text length */
-  inline: boolean;
-  /** Controls position of label */
-  labelPosition: 'no-label' | 'inside' | 'outside';
-  /** Label text for label inside & outside */
-  label: string;
-  /** Support `error` state */
-  state: boolean;
-  /** Add helper text in the bottom of Dropdown */
+  /** Helper text for the Dropdown. */
   helper: string;
-  /** Direction that the Dropdown will open. Default is auto. */
-  openDirection: 'down' | 'up' | 'auto';
-  optionValues: Array<any>;
-  optionLabels: Array<any>;
+  /** Label text for the Dropdown. */
+  label: string;
+  /** Label text position */
+  labelPosition: 'inside' | 'outside';
+  /** Mode variant of the component, based on current mode. */
+  modeVariant: 'primary' | 'secondary';
+  /** The direction the Dropdown should open, auto if not specified. */
+  openDirection: 'up' | 'down' | 'auto';
+  /** Placeholder text for the Dropdown. */
+  placeholder: string;
+  /** The size of the Dropdown. */
+  size: 'sm' | 'md' | 'lg';
+  /** Sets the Dropdown in an error state */
+  error: boolean;
+  /** Enables multiselect in the Dropdown. */
+  multiselect: boolean;
+  /** Enables filtration in the Dropdown. */
+  filter: 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. */
+  defaultValue: string;
+  /** Populate the Dropdown via a JSON array */
+  options: Array<{
+    value: string;
+    label: string;
+    disabled: boolean;
+  }>;
   open: boolean;
-  node: HTMLElement;
-  selectedLabel: string;
-  selectedValue: string;
-  selectedValuesArray: Array<any>;
-  selectedLabelsArray: Array<any>;
-  dropdownUniqueClass: string;
-  openUpwards: boolean;
-  dropdownMenuHeight: number;
-  dropdownMenuSelector: HTMLElement;
-  listItemIndex: any;
-  listItemArray: any;
-  listItemObject: any;
-  host: HTMLElement;
-  componentWillLoad(): void;
-  setOptionFromOutside(optionValue: any): void;
-  changeSelectedOption(): void;
-  handleDocClick(ev: any): void;
-  keyListener(ev: KeyboardEvent): void;
-  handleClick(): void;
-  tabbingLabelReset(): void;
-  selectOptionHandler(event: CustomEvent<any>): void;
-  /** @internal Search event that is emitted to the tds-dropdown-filter */
-  internalTdsSearch: EventEmitter<any>;
-  handleSearch(ev: any): void;
-  deselectAll(): void;
-  resetOption(): Promise<void>;
+  selection: Array<{
+    value: string;
+    label: string;
+  }>;
+  filterResult: number;
+  filterFocus: boolean;
+  private dropdownList;
+  private inputElement;
+  private children;
+  /** Method that resets the Dropdown. */
+  reset(): Promise<void>;
+  /** Method for setting the value of the Dropdown. */
+  setValue(newValue: string, newValueLabel: string): Promise<{
+    value: string;
+    label: string;
+  }[]>;
+  /** Method for removing a selected value in the Dropdown. */
+  removeValue(oldValue: string): Promise<{
+    value: string;
+    label: string;
+  }[]>;
+  /** Method for closing the Dropdown. */
+  close(): Promise<void>;
+  /** Change event for the Dropdown. */
+  tdsChange: EventEmitter<{
+    name: string;
+    value: string;
+  }>;
+  /** Focus event for the Dropdown. */
+  tdsFocus: EventEmitter<FocusEvent>;
+  /** Blur event for the Dropdown. */
+  tdsBlur: EventEmitter<FocusEvent>;
+  /** Input event for the Dropdown. */
+  tdsInput: EventEmitter<InputEvent>;
+  onAnyClick(event: MouseEvent): void;
+  onKeyDown(event: KeyboardEvent): Promise<void>;
+  handleOpenState(): void;
+  connectedCallback: () => void;
+  componentDidLoad(): void;
+  setDefaultOption: () => void;
+  getOpenDirection: () => "up" | "down";
+  getValue: () => string;
+  handleFilter: (event: any) => void;
+  handleFocus: (event: any) => void;
+  handleBlur: (event: any) => void;
+  handleChange: () => void;
   render(): any;
 }