@scania/tegel 1.0.1 → 1.0.3

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

@@ -1,5 +1,5 @@
 import type { Placement } from '@popperjs/core';
-import { Attributes } from '../../utils/utils';
+import { Attributes } from '../../types/Attributes';
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the list of menu items.
  */

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

@@ -43,7 +43,6 @@ export declare class TdsSlider {
   private thumbGrabbed;
   private thumbLeft;
   private tickValues;
-  private readonlyState;
   private useControls;
   private useInput;
   private useSmall;
@@ -62,6 +61,7 @@ export declare class TdsSlider {
   handleTouchEnd(): void;
   handleMouseMove(event: any): void;
   handleTouchMove(event: any): void;
+  handleValueUpdate(newVal: any): void;
   updateSupposedValueSlot(localLeft: any): number;
   thumbCore(event: any): void;
   updateTrack(): void;

package/dist/types/components/table/table-component-filtering.stories.d.ts

@@ -51,13 +51,6 @@ declare const _default: {
         };
       };
     };
-    useDataProp: {
-      name: string;
-      description: string;
-      control: {
-        type: string;
-      };
-    };
     verticalDivider: {
       name: string;
       description: string;
@@ -126,7 +119,6 @@ declare const _default: {
     modeVariant: string;
     compactDesign: boolean;
     responsiveDesign: boolean;
-    useDataProp: boolean;
     verticalDivider: boolean;
     noMinWidth: boolean;
     column1Width: string;

package/dist/types/components/table/table-component-multiselect.stories.d.ts

@@ -119,7 +119,6 @@ declare const _default: {
     modeVariant: string;
     compactDesign: boolean;
     responsiveDesign: boolean;
-    multiselect: boolean;
     verticalDivider: boolean;
     noMinWidth: boolean;
     column1Width: string;

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

@@ -1,5 +1,5 @@
 import type { Placement } from '@popperjs/core';
-import { Attributes } from '../../utils/utils';
+import { Attributes } from '../../types/Attributes';
 /**
  * @slot <default> - <b>Unnamed slot.</b> For the tooltip contents.
  */

package/dist/types/components.d.ts

@@ -315,6 +315,7 @@ export namespace Components {
         "orientation": 'horizontal' | 'vertical';
     }
     interface TdsDropdown {
+        "appendValue": (value: string) => Promise<void>;
         /**
           * Method for closing the Dropdown.
          */
@@ -380,9 +381,9 @@ export namespace Components {
          */
         "reset": () => Promise<void>;
         /**
-          * Method for setting the value of the Dropdown.
+          * 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": (newValue: string, newValueLabel: string) => Promise<{ value: string; label: string; }[]>;
+        "setValue": (value: string | string[], label?: string) => Promise<{ value: string; label: string; }[]>;
         /**
           * The size of the Dropdown.
          */
@@ -559,6 +560,10 @@ export namespace Components {
           * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
          */
         "size": string;
+        /**
+          * Override the default title for the svg.
+         */
+        "svgTitle": string;
     }
     interface TdsInlineTab {
         /**
@@ -2607,6 +2612,10 @@ declare namespace LocalJSX {
           * Pass a size of icon as a string, for example: 32px, 1rem, 4em...
          */
         "size"?: string;
+        /**
+          * Override the default title for the svg.
+         */
+        "svgTitle"?: string;
     }
     interface TdsInlineTab {
         /**

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

@@ -62,7 +62,7 @@ export interface PropOptions {
     /**
      * The name of the associated DOM attribute.
      * Stencil uses different heuristics to determine the default name of the attribute,
-     * but using this property, you can override the default behaviour.
+     * but using this property, you can override the default behavior.
      */
     attribute?: string | null;
     /**
@@ -128,7 +128,7 @@ export interface ListenOptions {
      * By default, Stencil uses several heuristics to determine if
      * it must attach a `passive` event listener or not.
      *
-     * Using the `passive` option can be used to change the default behaviour.
+     * Using the `passive` option can be used to change the default behavior.
      * Please see https://developers.google.com/web/updates/2016/06/passive-event-listeners for further information.
      */
     passive?: boolean;
@@ -471,7 +471,7 @@ export interface FunctionalUtilities {
     /**
      * Utility for reading the children of a functional component at runtime.
      * Since the Stencil runtime uses a different interface for children it is
-     * not recommendeded to read the children directly, and is preferable to use
+     * not recommended to read the children directly, and is preferable to use
      * this utility to, for instance, perform a side effect for each child.
      */
     forEach: (children: VNode[], cb: (vnode: ChildNode, index: number, array: ChildNode[]) => void) => void;

package/dist/types/stories/formatHtmlPreview.d.ts

@@ -0,0 +1,2 @@
+declare const formatHtmlPreview: (htmlStr: any) => string;
+export default formatHtmlPreview;

package/dist/types/stories/foundations/color/color-semantic.stories.d.ts

@@ -10,4 +10,4 @@ declare const _default: {
   };
 };
 export default _default;
-export declare const Sematic: any;
+export declare const Semantic: any;

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

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

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

@@ -0,0 +1,15 @@
+/** reference: https://github.com/ionic-team/ionic-framework/blob/main/core/src/utils/helpers.ts#L346
+ *
+ * Appends a hidden input element to allow the component
+ * work within and get picked up by a <form>.
+ * @param element The element on which the input with be appended.
+ * @param name Name of the input.
+ * @param value The value of the input.
+ * @param disabled Disables the input if true.
+ * @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;
+}[]) => void;
+export default appendHiddenInput;

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

@@ -0,0 +1,10 @@
+/**
+ * Recursively finds the first matching element or child based on a provided condition.
+ *
+ * @param {ParentNode} parentNode - The starting element or shadow root to search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - The condition to match the element, receives an HTMLElement and returns a boolean.
+ * @param {boolean} [pierceShadow=false] - Whether to pierce through shadow DOM boundaries.
+ * @returns {HTMLElement | null} - The first matching element or child, or null if none is found.
+ */
+declare function dfs(parentNode: ParentNode, searchPredicate: (el: HTMLElement) => boolean, pierceShadow?: boolean): HTMLElement | null;
+export default dfs;

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

@@ -0,0 +1,7 @@
+/**
+ * Find the next focusable element index in a list of focusable elements.
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+declare const findNextFocusableElement: (items: any[], nextItemIndex: number) => number;
+export default findNextFocusableElement;

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

@@ -0,0 +1,8 @@
+/**
+ * Find the previous focusable element index in a list of focusable elements.
+ *
+ * @param items List of focusable elements, element with a attribute of disabled that is true will be skipped over.
+ * @param nextItemIndex The index in the list to start the search on.
+ */
+declare const findPreviousFocusableElement: (items: any[], previousItemIndex: number) => number;
+export default findPreviousFocusableElement;

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

@@ -0,0 +1,15 @@
+/**
+ * Generates a reasonably unique string ID based on current time (minutes, seconds, milliseconds) and random numbers.
+ *
+ * This function combines the current time and random numbers to generate
+ * a unique string ID. The function assumes that it won't be called frequently
+ * enough to generate two identical IDs within a millisecond, or that the random
+ * number generator will produce the same value twice in quick succession.
+ *
+ * Note: The IDs generated by this function are not globally unique and their length may vary.
+ * For truly unique and fixed-length IDs, consider using a more robust method such as UUID.
+ *
+ * @returns {string} A unique string ID.
+ */
+declare function generateUniqueId(): string;
+export default generateUniqueId;

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

@@ -0,0 +1,2 @@
+declare function getNestedChildOfSiblingsMatching(element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean, siblingTraversalFn: (el: HTMLElement) => HTMLElement | null): HTMLElement | null;
+export default getNestedChildOfSiblingsMatching;

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

@@ -0,0 +1,30 @@
+/**
+ * Searches for a next sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its next siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getNextNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+declare const getNextNestedChildOfSiblingsMatching: (element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean) => HTMLElement;
+export default getNextNestedChildOfSiblingsMatching;

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

@@ -0,0 +1,2 @@
+declare const getNextSibling: (element: HTMLElement) => HTMLElement;
+export default getNextSibling;

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

@@ -0,0 +1,30 @@
+/**
+ * Searches for a previous sibling element that has a nested child element matching the provided search predicate.
+ * The search starts from the given element and proceeds to its previous siblings, diving deep into each sibling's descendants.
+ *
+ * @param {HTMLElement} element - The starting element to begin the search from.
+ * @param {(el: HTMLElement) => boolean} searchPredicate - A predicate function that checks if an element matches the desired condition.
+ * @returns {HTMLElement | null} - The matching nested child element, or null if no matching element is found.
+ *
+ * @example
+ * // HTML structure:
+ * // <div>
+ * //   <h1>Heading 1</h1>
+ * //   <ul role="list">
+ * //     <li>Item 1</li>
+ * //   </ul>
+ * // </div>
+ * // <div>
+ * //   <h2>Heading 2</h2>
+ * //   <ul role="list">
+ * //     <li>Item 2</li>
+ * //   </ul>
+ * // </div>
+ *
+ * const searchPredicate = (el) => el.tagName.toLowerCase() === 'h2';
+ * const startingElement = document.querySelector('[role="list"]');
+ * const headingEl = getPreviousNestedChildOfSiblingsMatching(startingElement, searchPredicate);
+ * console.log(headingEl); // Logs the <h2>Heading 2</h2> element
+ */
+declare const getPreviousNestedChildOfSiblingsMatching: (element: HTMLElement, searchPredicate: (el: HTMLElement) => boolean) => HTMLElement;
+export default getPreviousNestedChildOfSiblingsMatching;

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

@@ -0,0 +1,2 @@
+declare const getPreviousSibling: (element: HTMLElement) => HTMLElement;
+export default getPreviousSibling;

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

@@ -0,0 +1,8 @@
+/**
+ * Checks if the provided element has a slotted element
+ * in the slot with the corresponding slotName
+ * @param slotName the name of the slot.
+ * @param element the element to look for the slot within.
+ */
+declare const hasSlot: (slotName: string, element: HTMLElement) => boolean;
+export default hasSlot;

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

@@ -0,0 +1,9 @@
+/**
+ * Returns an array of aria attributes that should be copied from
+ * the shadow host element to a target within the light DOM.
+ * @param el The element that the attributes should be copied from.
+ * @param ignoreList The list of aria-attributes to ignore reflecting and removing from the host.
+ * Use this in instances where we manually specify aria attributes on the `<Host>` element.
+ */
+declare const inheritAriaAttributes: (el: HTMLElement, ignoreList?: string[]) => import("../types/Attributes").Attributes;
+export default inheritAriaAttributes;

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

@@ -0,0 +1,13 @@
+import { Attributes } from '../types/Attributes';
+/**
+ * Elements inside of web components sometimes need to inherit global attributes
+ * set on the host. For example, the inner input in `ion-input` should inherit
+ * the `title` attribute that developers set directly on `ion-input`. This
+ * helper function should be called in componentWillLoad and assigned to a variable
+ * that is later used in the render function.
+ *
+ * This does not need to be reactive as changing attributes on the host element
+ * does not trigger a re-render.
+ */
+declare const inheritAttributes: (el: HTMLElement, attributes?: string[]) => Attributes;
+export default inheritAttributes;

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

@@ -0,0 +1,8 @@
+/**
+ * Checks if the given element is a heading element (h1-h6) or has a role of "heading".
+ *
+ * @param {HTMLElement} el - The element to check.
+ * @returns {boolean} - True if the element is a heading element, false otherwise.
+ */
+declare const isHeadingElement: (el: HTMLElement) => boolean;
+export default isHeadingElement;

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

@@ -0,0 +1,6 @@
+/**
+ * Loop through the children and add the 'listitem' role if needed.
+ * @param {Node} targetNode The node being updated.
+ * */
+declare const updateListChildrenRoles: (targetNode: Node) => void;
+export default updateListChildrenRoles;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scania/tegel",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "description": "Tegel Design System",
   "keywords": [
     "tegel",
@@ -26,8 +26,7 @@
   },
   "files": [
     "dist/",
-    "loader/",
-    "components/"
+    "loader/"
   ],
   "publishConfig": {
     "access": "public"
@@ -54,6 +53,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.19.1",
+    "@stencil/angular-output-target": "^0.8.2",
     "@stencil/sass": "^3.0.4",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",