@scania/tegel 1.3.3 → 1.5.0

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

@@ -3,37 +3,37 @@ import { EventEmitter } from '../../../stencil-public-runtime';
  * @slot <default> - <b>Unnamed slot.</b> For the tab elements.
  */
 export declare class TdsNavigationTabs {
-  host: HTMLElement;
-  /** Variant of the Tabs, primary= on white, secondary= on grey50 */
-  modeVariant: 'primary' | 'secondary';
-  /** Sets the default selected Tab. */
-  defaultSelectedIndex: number;
-  /** Sets the selected Tab.
-   * If this is set, all Tab changes need to be handled by the user. */
-  selectedIndex: number;
-  showLeftScroll: boolean;
-  showRightScroll: boolean;
-  private navWrapperElement;
-  private componentWidth;
-  private buttonsWidth;
-  private scrollWidth;
-  private children;
-  /** Sets the passed tabindex as the selected Tab. */
-  selectTab(tabIndex: number): Promise<{
-    selectedTabIndex: number;
-  }>;
-  /** Event emitted when the selected Tab is changed. */
-  tdsChange: EventEmitter<{
-    selectedTabIndex: number;
-  }>;
-  handleSelectedIndexUpdate(): void;
-  scrollRight(): void;
-  scrollLeft(): void;
-  evaluateScrollButtons(): void;
-  addResizeObserver: () => void;
-  addEventListenerToTabs: () => void;
-  connectedCallback(): void;
-  componentDidLoad: () => void;
-  componentDidRender(): void;
-  render(): any;
+    host: HTMLElement;
+    /** Variant of the Tabs, primary= on white, secondary= on grey50 */
+    modeVariant: 'primary' | 'secondary';
+    /** Sets the default selected Tab. */
+    defaultSelectedIndex: number;
+    /** Sets the selected Tab.
+     * If this is set, all Tab changes need to be handled by the user. */
+    selectedIndex: number;
+    showLeftScroll: boolean;
+    showRightScroll: boolean;
+    private navWrapperElement;
+    private componentWidth;
+    private buttonsWidth;
+    private scrollWidth;
+    private children;
+    /** Sets the passed tabindex as the selected Tab. */
+    selectTab(tabIndex: number): Promise<{
+        selectedTabIndex: number;
+    }>;
+    /** Event emitted when the selected Tab is changed. */
+    tdsChange: EventEmitter<{
+        selectedTabIndex: number;
+    }>;
+    handleSelectedIndexUpdate(): void;
+    scrollRight(): void;
+    scrollLeft(): void;
+    evaluateScrollButtons(): void;
+    addResizeObserver: () => void;
+    addEventListenerToTabs: () => void;
+    connectedCallback(): void;
+    componentDidLoad: () => void;
+    componentDidRender(): void;
+    render(): any;
 }

package/dist/types/components/text-field/text-field.d.ts

@@ -4,54 +4,54 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot suffix - Slot for the suffix in the Text Field
  */
 export declare class TdsTextField {
-  host: HTMLElement;
-  /** Text input for focus state */
-  textInput?: HTMLInputElement;
-  /** Which input type, text, password or similar */
-  type: 'text' | 'password';
-  /** Position of the label for the Text Field. */
-  labelPosition: 'inside' | 'outside' | 'no-label';
-  /** Label text */
-  label: string;
-  /** Helper text */
-  helper: string;
-  /** Placeholder text */
-  placeholder: string;
-  /** Value of the input text */
-  value: string;
-  /** Set input in disabled state */
-  disabled: boolean;
-  /** Set input in readonly state */
-  readOnly: boolean;
-  /** Size of the input */
-  size: 'sm' | 'md' | 'lg';
-  /** Mode variant of the Text Field */
-  modeVariant: 'primary' | 'secondary';
-  /** Unset minimum width of 208px. */
-  noMinWidth: boolean;
-  /** Name property */
-  name: string;
-  /** Error state of input */
-  state: 'error' | 'success' | 'default';
-  /** Max length of input */
-  maxLength: number;
-  /** Autofocus for input */
-  autofocus: boolean;
-  /** Listen to the focus state of the input */
-  focusInput: any;
-  /** Change event for the Text Field */
-  tdsChange: EventEmitter;
-  handleChange(event: any): void;
-  /** Input event for the Text Field */
-  tdsInput: EventEmitter<InputEvent>;
-  handleInput(event: any): void;
-  /** Focus event for the Text Field */
-  tdsFocus: EventEmitter<FocusEvent>;
-  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
-  handleFocus(event: any): void;
-  /** Blur event for the Text Field */
-  tdsBlur: EventEmitter<FocusEvent>;
-  /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
-  handleBlur(event: any): void;
-  render(): any;
+    host: HTMLElement;
+    /** Text input for focus state */
+    textInput?: HTMLInputElement;
+    /** Which input type, text, password or similar */
+    type: 'text' | 'password';
+    /** Position of the label for the Text Field. */
+    labelPosition: 'inside' | 'outside' | 'no-label';
+    /** Label text */
+    label: string;
+    /** Helper text */
+    helper: string;
+    /** Placeholder text */
+    placeholder: string;
+    /** Value of the input text */
+    value: string;
+    /** Set input in disabled state */
+    disabled: boolean;
+    /** Set input in readonly state */
+    readOnly: boolean;
+    /** Size of the input */
+    size: 'sm' | 'md' | 'lg';
+    /** Mode variant of the Text Field */
+    modeVariant: 'primary' | 'secondary';
+    /** Unset minimum width of 208px. */
+    noMinWidth: boolean;
+    /** Name property */
+    name: string;
+    /** Error state of input */
+    state: 'error' | 'success' | 'default';
+    /** Max length of input */
+    maxLength: number;
+    /** Autofocus for input */
+    autofocus: boolean;
+    /** Listen to the focus state of the input */
+    focusInput: any;
+    /** Change event for the Text Field */
+    tdsChange: EventEmitter;
+    handleChange(event: any): void;
+    /** Input event for the Text Field */
+    tdsInput: EventEmitter<InputEvent>;
+    handleInput(event: any): void;
+    /** Focus event for the Text Field */
+    tdsFocus: EventEmitter<FocusEvent>;
+    /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+    handleFocus(event: any): void;
+    /** Blur event for the Text Field */
+    tdsBlur: EventEmitter<FocusEvent>;
+    /** Set the input as focus when clicking the whole Text Field with suffix/prefix */
+    handleBlur(event: any): void;
+    render(): any;
 }

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

@@ -1,50 +1,50 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class TdsTextarea {
-  /** Text input for focus state */
-  textEl?: HTMLTextAreaElement;
-  /** Label text */
-  label: string;
-  /** Name attribute */
-  name: string;
-  /** Helper text */
-  helper: string;
-  /** Textarea cols attribute */
-  cols: number;
-  /** Textarea rows attribute */
-  rows: number;
-  /** Position of the label for the Textarea. */
-  labelPosition: 'inside' | 'outside' | 'no-label';
-  /** Placeholder text */
-  placeholder: string;
-  /** Value of the input text */
-  value: string;
-  /** Set input in disabled state */
-  disabled: boolean;
-  /** Set input in readonly state */
-  readOnly: boolean;
-  /** Error state of input */
-  state: 'error' | 'success' | 'default';
-  /** Max length of input */
-  maxLength: number;
-  /** Mode variant of the Textarea */
-  modeVariant: 'primary' | 'secondary';
-  /** Control of autofocus */
-  autofocus: boolean;
-  /** Unset minimum width of 208px. */
-  noMinWidth: boolean;
-  /** Listen to the focus state of the input */
-  focusInput: any;
-  /** Change event for the Textarea */
-  tdsChange: EventEmitter;
-  handleChange(event: any): void;
-  /** Blur event for the Textarea */
-  tdsBlur: EventEmitter<FocusEvent>;
-  handleBlur(event: any): void;
-  /** Input event for the Textarea */
-  tdsInput: EventEmitter<InputEvent>;
-  handleInput(event: any): void;
-  /** Focus event for the Textarea */
-  tdsFocus: EventEmitter<FocusEvent>;
-  handleFocus(event: any): void;
-  render(): any;
+    /** Text input for focus state */
+    textEl?: HTMLTextAreaElement;
+    /** Label text */
+    label: string;
+    /** Name attribute */
+    name: string;
+    /** Helper text */
+    helper: string;
+    /** Textarea cols attribute */
+    cols: number;
+    /** Textarea rows attribute */
+    rows: number;
+    /** Position of the label for the Textarea. */
+    labelPosition: 'inside' | 'outside' | 'no-label';
+    /** Placeholder text */
+    placeholder: string;
+    /** Value of the input text */
+    value: string;
+    /** Set input in disabled state */
+    disabled: boolean;
+    /** Set input in readonly state */
+    readOnly: boolean;
+    /** Error state of input */
+    state: 'error' | 'success' | 'default';
+    /** Max length of input */
+    maxLength: number;
+    /** Mode variant of the Textarea */
+    modeVariant: 'primary' | 'secondary';
+    /** Control of autofocus */
+    autofocus: boolean;
+    /** Unset minimum width of 208px. */
+    noMinWidth: boolean;
+    /** Listen to the focus state of the input */
+    focusInput: any;
+    /** Change event for the Textarea */
+    tdsChange: EventEmitter;
+    handleChange(event: any): void;
+    /** Blur event for the Textarea */
+    tdsBlur: EventEmitter<FocusEvent>;
+    handleBlur(event: any): void;
+    /** Input event for the Textarea */
+    tdsInput: EventEmitter<InputEvent>;
+    handleInput(event: any): void;
+    /** Focus event for the Textarea */
+    tdsFocus: EventEmitter<FocusEvent>;
+    handleFocus(event: any): void;
+    render(): any;
 }

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

@@ -5,29 +5,29 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot actions - Slot for the Toast bottom section, used for links.
  */
 export declare class TdsToast {
-  host: HTMLElement;
-  /** ID for the Toast. Randomly generated if not specified. */
-  toastId: string;
-  /** Header text for the component. */
-  header: string;
-  /** Subheader text for the component. */
-  subheader: string;
-  /** Type of Toast. */
-  variant: 'information' | 'error' | 'warning' | 'success';
-  /** Hides the Toast. */
-  hidden: boolean;
-  /** ARIA role for the Toast. */
-  toastRole: 'alert' | 'log' | 'status';
-  /** Hides the Toast. */
-  hideToast(): Promise<void>;
-  /** Shows the Toast. */
-  showToast(): Promise<void>;
-  /** Sends unique Toast identifier when component is closed. */
-  tdsClose: EventEmitter<{
+    host: HTMLElement;
+    /** ID for the Toast. Randomly generated if not specified. */
     toastId: string;
-  }>;
-  getIconName: () => "info" | "error" | "warning" | "tick";
-  handleClose: () => void;
-  handleShow: () => void;
-  render(): any;
+    /** Header text for the component. */
+    header: string;
+    /** Subheader text for the component. */
+    subheader: string;
+    /** Type of Toast. */
+    variant: 'information' | 'error' | 'warning' | 'success';
+    /** Hides the Toast. */
+    hidden: boolean;
+    /** ARIA role for the Toast. */
+    toastRole: 'alert' | 'log' | 'status';
+    /** Hides the Toast. */
+    hideToast(): Promise<void>;
+    /** Shows the Toast. */
+    showToast(): Promise<void>;
+    /** Sends unique Toast identifier when component is closed. */
+    tdsClose: EventEmitter<{
+        toastId: string;
+    }>;
+    getIconName: () => "info" | "error" | "warning" | "tick";
+    handleClose: () => void;
+    handleShow: () => void;
+    render(): any;
 }

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

@@ -3,31 +3,31 @@ import { EventEmitter } from '../../stencil-public-runtime';
  * @slot label - Slot for the label text.
  */
 export declare class TdsToggle {
-  host: HTMLElement;
-  /** Sets the Toggle as checked */
-  checked: boolean;
-  /** Make the Toggle required */
-  required: boolean;
-  /** Size of the Toggle */
-  size: 'sm' | 'lg';
-  /** Name of the toggle's input element */
-  name: string;
-  /** Headline for the Toggle */
-  headline: string;
-  /** Sets the Toggle in a disabled state */
-  disabled: boolean;
-  /** ID of the Toggle's input element, if not specified, it's randomly generated */
-  toggleId: string;
-  /** Toggles the Toggle. */
-  toggle(): Promise<{
-    toggleId: string;
+    host: HTMLElement;
+    /** Sets the Toggle as checked */
     checked: boolean;
-  }>;
-  /** Sends unique Toggle identifier and status when it is toggled. */
-  tdsToggle: EventEmitter<{
+    /** Make the Toggle required */
+    required: boolean;
+    /** Size of the Toggle */
+    size: 'sm' | 'lg';
+    /** Name of the toggle's input element */
+    name: string;
+    /** Headline for the Toggle */
+    headline: string;
+    /** Sets the Toggle in a disabled state */
+    disabled: boolean;
+    /** ID of the Toggle's input element, if not specified, it's randomly generated */
     toggleId: string;
-    checked: boolean;
-  }>;
-  handleToggle: () => void;
-  render(): any;
+    /** Toggles the Toggle. */
+    toggle(): Promise<{
+        toggleId: string;
+        checked: boolean;
+    }>;
+    /** Sends unique Toggle identifier and status when it is toggled. */
+    tdsToggle: EventEmitter<{
+        toggleId: string;
+        checked: boolean;
+    }>;
+    handleToggle: () => void;
+    render(): any;
 }

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

@@ -4,31 +4,31 @@ 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;
+    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

@@ -365,9 +365,9 @@ export namespace Components {
          */
         "name": string;
         /**
-          * Text that is displayed if filter is used and there are no options that matches the search.
+          * Text that is displayed if filter is used and there are no options that matches the search. Setting it to an empty string disables message from showing up.
          */
-        "noResultText": string;
+        "noResultText"?: string;
         /**
           * Normalizes input text for fuzzier search
          */
@@ -459,15 +459,15 @@ export namespace Components {
         /**
           * The value of column key, usually comes from JSON, needed for sorting
          */
-        "cellKey": string;
+        "cellKey"?: string;
         /**
           * Text that displays in column cell
          */
-        "cellValue": string;
+        "cellValue"?: string;
         /**
-          * In case noMinWidth is set, the user has to specify width value for each column.
+          * In case noMinWidth is set, the user has to specify the width value for each column.
          */
-        "customWidth": string;
+        "customWidth"?: string;
         /**
           * Enables sorting on that column
          */
@@ -475,7 +475,7 @@ export namespace Components {
         /**
           * Setting for text align, default is left. Other accepted values are "right" or "end".
          */
-        "textAlign": string;
+        "textAlign"?: string;
     }
     interface TdsHeaderDropdown {
         /**
@@ -561,17 +561,21 @@ export namespace Components {
     }
     interface TdsIcon {
         /**
-          * Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library
+          * Pass the 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...
+          * Pass a size of icon as a string, for example, 32px, 1rem, 4em...
          */
         "size": string;
+        /**
+          * Set description for the svg.
+         */
+        "svgDescription"?: string;
         /**
           * Override the default title for the svg.
          */
-        "svgTitle": string;
+        "svgTitle"?: string;
     }
     interface TdsInlineTab {
         /**
@@ -825,7 +829,7 @@ export namespace Components {
     }
     interface TdsSideMenu {
         /**
-          * 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.
+          * 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 tdsCollapse event.
          */
         "collapsed": boolean;
         /**
@@ -2813,7 +2817,7 @@ declare namespace LocalJSX {
          */
         "name"?: string;
         /**
-          * Text that is displayed if filter is used and there are no options that matches the search.
+          * Text that is displayed if filter is used and there are no options that matches the search. Setting it to an empty string disables message from showing up.
          */
         "noResultText"?: string;
         /**
@@ -2931,11 +2935,11 @@ declare namespace LocalJSX {
          */
         "cellValue"?: string;
         /**
-          * In case noMinWidth is set, the user has to specify width value for each column.
+          * In case noMinWidth is set, the user has to specify the width value for each column.
          */
         "customWidth"?: string;
         /**
-          * 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.
+          * Sends unique Table identifier, column key and sorting direction to the tds-table-body component, can also be listened to implement custom-sorting logic.
          */
         "onTdsSort"?: (event: TdsHeaderCellCustomEvent<{
     tableId: string;
@@ -3035,13 +3039,17 @@ declare namespace LocalJSX {
     }
     interface TdsIcon {
         /**
-          * Pass a name of the icon. For icon names, refer to Storybook Icon controls dropdown or https://tegel.scania.com/foundations/icons/icon-library
+          * Pass the 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...
+          * Pass a size of icon as a string, for example, 32px, 1rem, 4em...
          */
         "size"?: string;
+        /**
+          * Set description for the svg.
+         */
+        "svgDescription"?: string;
         /**
           * Override the default title for the svg.
          */
@@ -3304,7 +3312,7 @@ declare namespace LocalJSX {
     }
     interface TdsSideMenu {
         /**
-          * 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.
+          * 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 tdsCollapse event.
          */
         "collapsed"?: boolean;
         /**

package/dist/types/stencil-public-runtime.d.ts

@@ -810,6 +810,9 @@ export declare namespace JSXBase {
         name?: string;
         type?: string;
         value?: string | string[] | number;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface CanvasHTMLAttributes<T> extends HTMLAttributes<T> {
         height?: number | string;
@@ -971,6 +974,9 @@ export declare namespace JSXBase {
         webkitdirectory?: boolean;
         webkitEntries?: any;
         width?: number | string;
+        popoverTargetAction?: string;
+        popoverTargetElement?: Element | null;
+        popoverTarget?: string;
     }
     interface KeygenHTMLAttributes<T> extends HTMLAttributes<T> {
         autoFocus?: boolean;
@@ -1223,6 +1229,7 @@ export declare namespace JSXBase {
         draggable?: boolean;
         hidden?: boolean;
         id?: string;
+        inert?: boolean;
         lang?: string;
         spellcheck?: 'true' | 'false' | any;
         style?: {
@@ -1231,6 +1238,7 @@ export declare namespace JSXBase {
         tabIndex?: number;
         tabindex?: number | string;
         title?: string;
+        popover?: string | null;
         inputMode?: string;
         inputmode?: string;
         enterKeyHint?: string;

package/dist/types/types/Attributes.d.ts

@@ -1,3 +1,3 @@
 export type Attributes = {
-  [key: string]: any;
+    [key: string]: any;
 };

package/dist/types/utils/appendHiddenInput.d.ts

@@ -9,7 +9,7 @@
  * @param additionalAttributes Additional attributes that should be passed to the input.
  */
 declare const appendHiddenInput: (element: HTMLElement, name: string, value: string | undefined | null, disabled: boolean, additionalAttributes?: {
-  key: string;
-  value: string;
+    key: string;
+    value: string;
 }[]) => void;
 export default appendHiddenInput;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.3.3",
+  "version": "1.5.0",
   "description": "Tegel Design System",
   "type": "module",
   "keywords": [
@@ -33,7 +33,7 @@
     "access": "public"
   },
   "scripts": {
-    "build": "stencil build --docs && stencil build --docs",
+    "build": "stencil build && 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",
@@ -49,7 +49,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.8",
-    "@stencil/core": "^4.7.1",
+    "@stencil/core": "^4.9.0",
     "prettier": "^2.7.1"
   },
   "devDependencies": {