@scania/tegel 0.0.72 → 1.0.0

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

@@ -0,0 +1,21 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For injecting a dropdown list.
+ * @slot icon - Slot for an Icon in the dropdown button.
+ * @slot label - Slot for a label text in the dropdown button.
+ */
+export declare class TdsHeaderDropdown {
+  host: HTMLElement;
+  /** The label of the button that opens the dropdown.
+   * This is an alternative to the label slot. */
+  label: string;
+  /** If the dropdown icon (downwards chevron) should be hidden. */
+  noDropdownIcon: boolean;
+  /** If the button that opens the dropdown should appear selected. */
+  selected: boolean;
+  open: boolean;
+  buttonEl?: HTMLButtonElement;
+  private uuid;
+  onAnyClick(event: MouseEvent): void;
+  toggleDropdown(): void;
+  render(): any;
+}

package/dist/types/components/header/header-dropdown-list/header-dropdown-list.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a dropdown list item.
+ */
+export declare class TdsHeaderDropdownList {
+  host: HTMLElement;
+  private slotListeners;
+  /** The size of the component. */
+  size: 'lg' | 'md';
+  headingElement: HTMLElement;
+  componentWillLoad(): void;
+  componentDidLoad(): void;
+  processAssignedElements(slot: HTMLSlotElement): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

package/dist/types/components/header/header-dropdown-list-item/header-dropdown-list-item.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
+export declare class TdsHeaderDropdownListItem {
+  host: HTMLElement;
+  /** If the link should appear selected. */
+  selected: boolean;
+  /** The size of the component. */
+  size: 'md' | 'lg';
+  render(): any;
+}

package/dist/types/components/header/header-dropdown-list-user/header-dropdown-list-user.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @slot thumbnail - Slot for the thumbnail.
+ * @slot header - Slot for the header.
+ */
+export declare class TdsHeaderDropdownListLgUser {
+  /** Image URL. */
+  imgUrl: string;
+  /** Image alt text. */
+  imgAlt: string;
+  /** Header text, usually the users first name and last name. */
+  header: string;
+  /** Subheader text. */
+  subheader: string;
+  host: HTMLElement;
+  render(): any;
+}

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

@@ -0,0 +1,4 @@
+export declare class TdsHeaderHamburger {
+  host: HTMLElement;
+  render(): any;
+}

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

@@ -0,0 +1,19 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
+export declare class TdsHeaderItem {
+  host: HTMLElement;
+  /** If the button should appear active. Can be used when the button is
+   * triggering a dropdown, and the dropdown is open, for example. */
+  active: boolean;
+  /** If the button should appear selected. */
+  selected: boolean;
+  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;
+  componentDidLoad(): void;
+  render(): any;
+}

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/header/header-launcher-button/header-launcher-button.d.ts

@@ -0,0 +1,8 @@
+export declare class TdsHeaderLauncherButton {
+  host: HTMLElement;
+  /** If the button should appear active. Can be used when the button is
+   * triggering a dropdown, and the dropdown is open, for example. */
+  active: boolean;
+  private ariaAttributes;
+  render(): any;
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a grid item element.
+ */
+export declare class TdsHeaderLauncherGrid {
+  host: HTMLElement;
+  headingElement: HTMLElement;
+  componentWillLoad(): void;
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
+export declare class TdsHeaderLauncherGridItem {
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the title text.
+ */
+export declare class TdsHeaderLauncherGridTitle {
+  private uuid;
+  render(): any;
+}

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

@@ -0,0 +1,7 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For list items.
+ */
+export declare class TdsHeaderLauncherList {
+  uuid: string;
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link or button element.
+ */
+export declare class TdsHeaderLauncherListItem {
+  render(): any;
+}

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

@@ -0,0 +1,8 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the title text.
+ */
+export declare class TdsHeaderLauncherListTitle {
+  host: HTMLElement;
+  private uuid;
+  render(): any;
+}

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

@@ -0,0 +1,6 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the header title text.
+ */
+export declare class TdsHeaderTitle {
+  render(): any;
+}

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

@@ -0,0 +1,14 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> Slot for the left-aligned content consisting of buttons, dropdowns, links, etc.
+ * @slot hamburger - Slot for the hamburger button for opening the mobile menu.
+ * @slot title - Slot for the title.
+ * @slot end - Slot for the end (right side) of the header.
+ */
+export declare class TdsHeader {
+  host: HTMLElement;
+  private observer;
+  constructor();
+  componentDidLoad(): void;
+  disconnectedCallback(): void;
+  render(): any;
+}

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

@@ -0,0 +1,32 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    notes: {
+      Header: any;
+      'Header hamburger': any;
+      'Header title': any;
+      'Header item': any;
+      'Header dropdown': any;
+      'Header dropdown list': any;
+      'Header dropdown list item': any;
+      'Header dropdown list user': any;
+      'Header launcher': any;
+      'Header brand symbol': any;
+    };
+    layout: string;
+    docs: {
+      source: {
+        state: string;
+      };
+    };
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {};
+  args: {};
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,5 +1,5 @@
 export declare class Icon {
-  /** Pass a name of the icon. For icon names, refer to https://digitaldesign.scania.com/foundations/icons/icon-library or storybook */
+  /** Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library */
   name: string;
   /** Pass a size of icon as a string, for example: 32px, 1rem, 4em... */
   size: string;

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

@@ -0,0 +1,36 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: any;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    icon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: any;
+    };
+    size: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: number[];
+    };
+  };
+  args: {
+    size: number;
+    icon: string;
+  };
+};
+export default _default;
+export declare const Icons: any;

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

@@ -0,0 +1,12 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For a link element. Eg. <code>&lt;a><a></code>.
+ */
+export declare class TdsLink {
+  host: HTMLElement;
+  /** Disables the Link */
+  disabled: boolean;
+  /** Displays the Link with an underline. */
+  underline: boolean;
+  connectedCallback(): void;
+  render(): any;
+}

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

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

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

@@ -0,0 +1,17 @@
+/**
+ * @slot <default> - <b>Unnamed slot.</b> For the extended message. Not visible on minimal messages.
+ */
+export declare class TdsMessage {
+  /** Header text for the component. */
+  header: string;
+  /** Variant of the component, based on current mode. */
+  modeVariant: 'primary' | 'secondary';
+  /** Variant of Message. */
+  variant: 'information' | 'error' | 'warning' | 'success';
+  /** Removes the icon in the Message. */
+  noIcon: boolean;
+  /** Minimal Message styling. */
+  minimal: boolean;
+  getIconName: () => "info" | "error" | "warning" | "tick";
+  render(): any;
+}

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

@@ -0,0 +1,88 @@
+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;
+        };
+      };
+    };
+    messageVariant: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+    header: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    extendedMessage: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    minimal: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+    noIcon: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      table: {
+        defaultValue: {
+          summary: boolean;
+        };
+      };
+    };
+  };
+  args: {
+    modeVariant: string;
+    messageVariant: string;
+    header: string;
+    extendedMessage: string;
+    minimal: boolean;
+    noIcon: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,37 +1,43 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-export declare class Modal {
+/**
+ * @slot header - Slot for header text
+ * @slot body - Slot for main content of modal
+ * @slot actions - Slot for extra buttons
+ * */
+export declare class TdsModal {
   host: HTMLElement;
-  /** Disables closing modal on clicking on overlay area. */
+  /** Sets the header of the Modal. */
+  header: string;
+  /** Disables closing Modal on clicking on overlay area. */
   prevent: boolean;
-  /** Size of modal  */
+  /** Size of Modal  */
   size: 'xs' | 'sm' | 'md' | 'lg';
-  /** Sticky or Static Actions  */
-  actions: 'sticky' | 'static';
-  /** CSS selector for the element that will show the modal. */
+  /** Changes the position behaviour of the actions slot.  */
+  actionsPosition: 'sticky' | 'static';
+  /** CSS selector for the element that will show the Modal. */
   selector: string;
-  /** Element that will show the modal (takes priority over selector) */
-  referenceEl: HTMLElement;
-  /** Controls whether the modal is shown or not. If this is set hiding and showing
+  /** Element that will show the Modal (takes priority over selector) */
+  referenceEl?: HTMLElement | null;
+  /** Controls whether the Modal 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;
   isShown: boolean;
-  /** Shows the modal.  */
+  /** Shows the Modal.  */
   showModal(): Promise<void>;
-  /** Closes the modal. */
+  /** Closes the Modal. */
   closeModal(): Promise<void>;
-  /** Emitts when the modal is closed. */
-  sddsClose: EventEmitter<any>;
+  /** Emits when the Modal is closed. */
+  tdsClose: EventEmitter<any>;
   connectedCallback(): void;
-  /** Emits a close event and then close the modal if it is not prevented. */
-  handleClose: (event?: any) => void;
+  handleClose: (event: any) => void;
   handleShow: () => void;
-  /** Checks if click on modal is on overlay, if so it closes the modal if prevent is not true. */
+  /** Checks if click on Modal is on overlay, if so it closes the Modal if prevent is not true. */
   handleOverlayClick(event: any): void;
-  /** Adds an event listener to the reference element that shows/closes the modal. */
+  /** Adds an event listener to the reference element that shows/closes the Modal. */
   initializeReferenceElement: (referenceEl: any) => void;
   /** Check if there is a referenceElement or selector and adds event listener to them if so. */
   setShowButton: () => void;
-  /** Adds an event listener to the dismiss buttons that closes the modal. */
-  setDissmissButtons(): void;
+  /** Adds an event listener to the dismiss buttons that closes the Modal. */
+  setDismissButtons(): void;
   render(): any;
 }

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

@@ -0,0 +1,70 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: any;
+    design: {
+      name: string;
+      type: string;
+      url: string;
+    }[];
+  };
+  argTypes: {
+    actionsPosition: {
+      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;
+        };
+      };
+    };
+    headerText: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    bodyContent: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+    showModal: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+    };
+  };
+  args: {
+    actionsPosition: string;
+    size: string;
+    headerText: string;
+    bodyContent: string;
+    showModal: boolean;
+  };
+};
+export default _default;
+export declare const Default: any;

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

@@ -1,11 +1,15 @@
-import type { Placement, Instance } from '@popperjs/core';
-export declare class PopoverCanvas {
-  host: HTMLSddsPopoverCanvasElement;
-  /** The CSS-selector for an element that will trigger the popover */
+import type { Placement } from '@popperjs/core';
+import { Attributes } from '../../utils/utils';
+/**
+ * @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;
-  /** Controls wether the popover is shown or not. If this is set hiding and showing
+  /** 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;
@@ -17,17 +21,7 @@ export declare class PopoverCanvas {
   offsetDistance: number;
   /** Array of modifier objects to pass to popper.js. See https://popper.js.org/docs/v2/modifiers/ */
   modifiers: Object[];
-  renderedShowValue: boolean;
-  popperInstance: Instance;
-  target: any;
-  isShown: boolean;
-  onShowChange(newValue: boolean): void;
-  onReferenceElChange(newValue: HTMLElement, oldValue: HTMLElement): void;
-  onAnyClick(event: MouseEvent): void;
-  initialize: (referenceEl: any) => void;
-  connectedCallback(): void;
-  componentDidLoad(): void;
-  componentDidRender(): void;
-  disconnectedCallback(): void;
+  inheritedAttributes: Attributes;
+  componentWillLoad(): void;
   render(): any;
 }

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

@@ -0,0 +1,27 @@
+declare const _default: {
+  title: string;
+  parameters: {
+    layout: string;
+    notes: any;
+  };
+  argTypes: {
+    canvasPosition: {
+      name: string;
+      description: string;
+      control: {
+        type: string;
+      };
+      options: string[];
+      table: {
+        defaultValue: {
+          summary: string;
+        };
+      };
+    };
+  };
+  args: {
+    canvasPosition: string;
+  };
+};
+export default _default;
+export declare const Default: any;