@scania/tegel 1.0.0 → 1.0.3

package/README.md

@@ -1,178 +1,178 @@
-[![Github release](https://img.shields.io/npm/v/@scania/tegel?color=1081C2)](https://www.npmjs.com/package/@scania/tegel)
-[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tegel-storybook.netlify.app/)
-![](https://img.shields.io/github/license/scania-digital-design-system/tegel)
-![Status: Beta](https://img.shields.io/badge/status-beta-red)
-![node-current](https://img.shields.io/node/v/%40scania%2Ftegel)
-
-
-
-# @scania/tegel
-
-Official website: https://tegel.scania.com/
-
-Storybook: https://tegel-storybook.netlify.app/
-
-The design system supports the design and development of digital solutions at Scania. The purpose is to secure a coherent, premium brand and user experience across all of Scania's digital touchpoints.
-
-## Status
-
-This package is currently in a pre-beta stage. We are now working hard towards a 1.0-beta release, but if you want to try out the package today you can!
-
-## Installation
-
-### React
-
-#### with Typescript
-
-1. Run `npm install @scania/tegel`
-2. src folder create a file called `register-webcomponents.ts`
-3. Paste the following into that file:
-
-```ts
-import { defineCustomElements, JSX as LocalJSX } from '@scania/tegel/loader';
-import { DetailedHTMLProps, HTMLAttributes } from 'react';
-
-type StencilProps<T> = {
-  [P in keyof T]?: Omit<T[P], 'ref'> | HTMLAttributes<T>;
-};
-
-type ReactProps<T> = {
-  [P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]>;
-};
-
-type StencilToReact<T = LocalJSX.IntrinsicElements, U = HTMLElementTagNameMap> = StencilProps<T> &
-  ReactProps<U>;
-
-declare global {
-  export namespace JSX {
-    interface IntrinsicElements extends StencilToReact {}
-  }
-}
-
-defineCustomElements(window);
-```
-
-4. In your index.tsx import `register-webcomponents.ts`
-
-```tsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import './register-webcomponents';
-
-const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
-
-reportWebVitals();
-```
-
-5. In your global css file (usually `App.css`) import the tegel stylesheet.
-
-```css
-@import url('@scania/tegel/dist/tegel/tegel.css');
-```
-
-#### with Javascript
-
-1. Run `npm install @scania/tegel`
-2. In your index.jsx define the custom components:
-
-```jsx
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-import { defineCustomElements } from '@scania/tegel/loader';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>,
-);
-
-reportWebVitals();
-defineCustomElements();
-```
-
-3. In your global css file (usually `App.css`) import the tegel stylesheet.
-
-```css
-@import url('@scania/tegel/dist/tegel/tegel.css');
-```
-
-### Angular
-
-1. Run `npm install @scania/tegel`
-2. In your `main.ts` import and call the function `defineCustomElements()`:
-
-```ts
-import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
-import { defineCustomElements } from '@scania/tegel/loader';
-import { AppModule } from './app/app.module';
-
-platformBrowserDynamic()
-  .bootstrapModule(AppModule)
-  .catch((err) => console.error(err));
-
-defineCustomElements(window);
-```
-
-3. In your `app.module.ts` import `CUSTOM_ELEMENTS_SCHEMA`:
-
-```ts
-import { BrowserModule } from '@angular/platform-browser';
-import { AppComponent } from './app.component';
-
-@NgModule({
-  declarations: [AppComponent],
-  imports: [BrowserModule],
-  providers: [],
-  bootstrap: [AppComponent],
-  schemas: [CUSTOM_ELEMENTS_SCHEMA],
-})
-export class AppModule {}
-```
-
-4. In your global css file (`styles.css`) import the tegel stylesheet.
-
-```css
-@import url('@scania/tegel/dist/tegel/tegel.css');
-```
-
-### HTML
-
-1. Run `npm init` to generate a package.json
-2. Run `npm install @scania/tegel`
-3. Import the package and its style in your `<head>`:
-
-```html
-<script type="module">
-  import { defineCustomElements } from './node_modules/@scania/tegel/loader/index.es2017.js';
-  defineCustomElements();
-</script>
-<link rel="stylesheet" href="./node_modules/@scania/tegel/dist/tegel/tegel.css" />
-```
-
-See all available components in the [Tegel Design System](https://tegel.scania.com/components/overview).
-
-## Browser support
-
-See the browser support section on [the Tegel website](https://tegel.scania.com/development/getting-started-development/introduction#browser-support).
-
-## Community
-
-Get in touch with the team and the community:
-
-- [Teams](https://teams.microsoft.com/l/team/19%3a1257007a64d44c64954acca27a9d4b46%40thread.skype/conversations?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac)
-
-## License
-
-All CSS, HTML and JS code are available under the MIT license. The Scania brand identity, logos and photographs found in this repository are copyrighted Scania CV AB and are not available on an open source basis or to be used as examples or in any other way, if not specifically ordered by Scania CV AB.
+[![Github release](https://img.shields.io/npm/v/@scania/tegel?color=1081C2)](https://www.npmjs.com/package/@scania/tegel)
+[![Storybook](https://img.shields.io/badge/docs-storybook-ff69b4)](https://tegel-storybook.netlify.app/)
+![](https://img.shields.io/github/license/scania-digital-design-system/tegel)
+![Status: Beta](https://img.shields.io/badge/status-beta-red)
+![node-current](https://img.shields.io/node/v/%40scania%2Ftegel)
+
+
+
+# @scania/tegel
+
+Official website: https://tegel.scania.com/
+
+Storybook: https://tegel-storybook.netlify.app/
+
+The design system supports the design and development of digital solutions at Scania. The purpose is to secure a coherent, premium brand and user experience across all of Scania's digital touchpoints.
+
+## Status
+
+This package is currently in a **beta** stage. We are now working hard towards a 1.0 release, but if you want to try out the package today you can!
+
+## Installation
+
+### React
+
+#### with Typescript
+
+1. Run `npm install @scania/tegel`
+2. src folder create a file called `register-webcomponents.ts`
+3. Paste the following into that file:
+
+```ts
+import { defineCustomElements, JSX as LocalJSX } from '@scania/tegel/loader';
+import { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+type StencilProps<T> = {
+  [P in keyof T]?: Omit<T[P], 'ref'> | HTMLAttributes<T>;
+};
+
+type ReactProps<T> = {
+  [P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]>;
+};
+
+type StencilToReact<T = LocalJSX.IntrinsicElements, U = HTMLElementTagNameMap> = StencilProps<T> &
+  ReactProps<U>;
+
+declare global {
+  export namespace JSX {
+    interface IntrinsicElements extends StencilToReact {}
+  }
+}
+
+defineCustomElements(window);
+```
+
+4. In your index.tsx import `register-webcomponents.ts`
+
+```tsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import './register-webcomponents';
+
+const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+reportWebVitals();
+```
+
+5. In your global css file (usually `App.css`) import the tegel stylesheet.
+
+```css
+@import url('@scania/tegel/dist/tegel/tegel.css');
+```
+
+#### with Javascript
+
+1. Run `npm install @scania/tegel`
+2. In your index.jsx define the custom components:
+
+```jsx
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+import reportWebVitals from './reportWebVitals';
+import { defineCustomElements } from '@scania/tegel/loader';
+
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+);
+
+reportWebVitals();
+defineCustomElements();
+```
+
+3. In your global css file (usually `App.css`) import the tegel stylesheet.
+
+```css
+@import url('@scania/tegel/dist/tegel/tegel.css');
+```
+
+### Angular
+
+1. Run `npm install @scania/tegel`
+2. In your `main.ts` import and call the function `defineCustomElements()`:
+
+```ts
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { defineCustomElements } from '@scania/tegel/loader';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic()
+  .bootstrapModule(AppModule)
+  .catch((err) => console.error(err));
+
+defineCustomElements(window);
+```
+
+3. In your `app.module.ts` import `CUSTOM_ELEMENTS_SCHEMA`:
+
+```ts
+import { BrowserModule } from '@angular/platform-browser';
+import { AppComponent } from './app.component';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [BrowserModule],
+  providers: [],
+  bootstrap: [AppComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+})
+export class AppModule {}
+```
+
+4. In your global css file (`styles.css`) import the tegel stylesheet.
+
+```css
+@import url('@scania/tegel/dist/tegel/tegel.css');
+```
+
+### HTML
+
+1. Run `npm init` to generate a package.json
+2. Run `npm install @scania/tegel`
+3. Import the package and its style in your `<head>`:
+
+```html
+<script type="module">
+  import { defineCustomElements } from './node_modules/@scania/tegel/loader/index.es2017.js';
+  defineCustomElements();
+</script>
+<link rel="stylesheet" href="./node_modules/@scania/tegel/dist/tegel/tegel.css" />
+```
+
+See all available components in the [Tegel Design System](https://tegel.scania.com/components/overview).
+
+## Browser support
+
+See the browser support section on [the Tegel website](https://tegel.scania.com/development/getting-started-development/introduction#browser-support).
+
+## Community
+
+Get in touch with the team and the community:
+
+- [Teams](https://teams.microsoft.com/l/team/19%3a1257007a64d44c64954acca27a9d4b46%40thread.skype/conversations?groupId=79f9bfeb-73e2-424d-9477-b236191ece5e&tenantId=3bc062e4-ac9d-4c17-b4dd-3aad637ff1ac)
+
+## License
+
+All CSS, HTML and JS code are available under the MIT license. The Scania brand identity, logos and photographs found in this repository are copyrighted Scania CV AB and are not available on an open source basis or to be used as examples or in any other way, if not specifically ordered by Scania CV AB.

package/dist/cjs/dfs-babd18a6.js

@@ -0,0 +1,29 @@
+'use strict';
+
+/**
+ * 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.
+ */
+function dfs(parentNode, searchPredicate, pierceShadow = false) {
+  if (parentNode instanceof HTMLElement && searchPredicate(parentNode)) {
+    return parentNode;
+  }
+  const childElements = parentNode instanceof HTMLSlotElement
+    ? parentNode.assignedElements({ flatten: true })
+    : Array.from(parentNode.children);
+  if (pierceShadow && parentNode instanceof HTMLElement && parentNode.shadowRoot) {
+    childElements.push(...Array.from(parentNode.shadowRoot.children));
+  }
+  let foundElement = null;
+  childElements.some((child) => {
+    foundElement = dfs(child, searchPredicate, pierceShadow);
+    return foundElement !== null;
+  });
+  return foundElement;
+}
+
+exports.dfs = dfs;

package/dist/cjs/generateUniqueId-56da4810.js

@@ -0,0 +1,28 @@
+'use strict';
+
+/**
+ * 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.
+ */
+function generateUniqueId() {
+  const now = new Date();
+  const timeInMilliseconds = now.getMinutes() * 60000 + now.getSeconds() * 1000 + now.getMilliseconds(); // Get current time in milliseconds from the start of the hour
+  const randomNum1 = Math.floor(Math.random() * 1000000); // Random number between 0 and 999999
+  const randomNum2 = Math.floor(Math.random() * 1000000); // Another random number
+  // Convert to base 36 (using numbers and letters) and remove '0.' from the random number
+  const uniqueString = randomNum1.toString(36).substring(2) +
+    timeInMilliseconds.toString(36) +
+    randomNum2.toString(36).substring(2);
+  return uniqueString;
+}
+
+exports.generateUniqueId = generateUniqueId;

package/dist/cjs/hasSlot-1c90e9ba.js

@@ -0,0 +1,11 @@
+'use strict';
+
+/**
+ * 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.
+ */
+const hasSlot = (slotName, element) => !!element.querySelector(`[slot="${slotName}"]`);
+
+exports.hasSlot = hasSlot;

package/dist/cjs/{index-2a60e106.js → index-862c9693.js}

@@ -133,13 +133,13 @@ const h = (nodeName, vnodeData, ...children) => {
     };
     walk(children);
     if (vnodeData) {
-        // normalize class / classname attributes
         if (vnodeData.key) {
             key = vnodeData.key;
         }
         if (vnodeData.name) {
             slotName = vnodeData.name;
         }
+        // normalize class / className attributes
         {
             const classData = vnodeData.className || vnodeData.class;
             if (classData) {
@@ -1396,7 +1396,7 @@ const renderVdom = (hostRef, renderFnResults, isInitialLoad = false) => {
                         // has a different next sibling or parent relocated
                         if (nodeToRelocate !== insertBeforeNode) {
                             if (!nodeToRelocate['s-hn'] && nodeToRelocate['s-ol']) {
-                                // probably a component in the index.html that doesn't have it's hostname set
+                                // probably a component in the index.html that doesn't have its hostname set
                                 nodeToRelocate['s-hn'] = nodeToRelocate['s-ol'].parentNode.nodeName;
                             }
                             // add it back to the dom but in its new home
@@ -1788,12 +1788,12 @@ const proxyComponent = (Cstr, cmpMeta, flags) => {
                     //      customElements.define('my-component', MyComponent);
                     //    </script>
                     //  ```
-                    //  In this case if we do not unshadow here and use the value of the shadowing property, attributeChangedCallback
+                    //  In this case if we do not un-shadow here and use the value of the shadowing property, attributeChangedCallback
                     //  will be called with `newValue = "some-value"` and will set the shadowed property (this.someAttribute = "another-value")
                     //  to the value that was set inline i.e. "some-value" from above example. When
-                    //  the connectedCallback attempts to unshadow it will use "some-value" as the initial value rather than "another-value"
+                    //  the connectedCallback attempts to un-shadow it will use "some-value" as the initial value rather than "another-value"
                     //
-                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/unshadowed
+                    //  The case where the attribute was NOT set inline but was not set programmatically shall be handled/un-shadowed
                     //  by connectedCallback as this attributeChangedCallback will not fire.
                     //
                     //  https://developers.google.com/web/fundamentals/web-components/best-practices#lazy-properties

package/dist/cjs/inheritAriaAttributes-640b1abb.js

@@ -0,0 +1,78 @@
+'use strict';
+
+const inheritAttributes = require('./inheritAttributes-845f5217.js');
+
+/**
+ * List of available ARIA attributes + `role`.
+ * Removed deprecated attributes.
+ * https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Attributes
+ */
+const ariaAttributes = [
+  'role',
+  'aria-activedescendant',
+  'aria-atomic',
+  'aria-autocomplete',
+  'aria-braillelabel',
+  'aria-brailleroledescription',
+  'aria-busy',
+  'aria-checked',
+  'aria-colcount',
+  'aria-colindex',
+  'aria-colindextext',
+  'aria-colspan',
+  'aria-controls',
+  'aria-current',
+  'aria-describedby',
+  'aria-description',
+  'aria-details',
+  'aria-disabled',
+  'aria-errormessage',
+  'aria-expanded',
+  'aria-flowto',
+  'aria-haspopup',
+  'aria-hidden',
+  'aria-invalid',
+  'aria-keyshortcuts',
+  'aria-label',
+  'aria-labelledby',
+  'aria-level',
+  'aria-live',
+  'aria-multiline',
+  'aria-multiselectable',
+  'aria-orientation',
+  'aria-owns',
+  'aria-placeholder',
+  'aria-posinset',
+  'aria-pressed',
+  'aria-readonly',
+  'aria-relevant',
+  'aria-required',
+  'aria-roledescription',
+  'aria-rowcount',
+  'aria-rowindex',
+  'aria-rowindextext',
+  'aria-rowspan',
+  'aria-selected',
+  'aria-setsize',
+  'aria-sort',
+  'aria-valuemax',
+  'aria-valuemin',
+  'aria-valuenow',
+  'aria-valuetext',
+];
+/**
+ * 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.
+ */
+const inheritAriaAttributes = (el, ignoreList) => {
+  let attributesToInherit = ariaAttributes;
+  if (ignoreList && ignoreList.length > 0) {
+    attributesToInherit = attributesToInherit.filter((attr) => !ignoreList.includes(attr));
+  }
+  return inheritAttributes.inheritAttributes(el, attributesToInherit);
+};
+
+exports.inheritAriaAttributes = inheritAriaAttributes;

package/dist/cjs/inheritAttributes-845f5217.js

@@ -0,0 +1,27 @@
+'use strict';
+
+/**
+ * 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.
+ */
+const inheritAttributes = (el, attributes = []) => {
+  const attributeObject = {};
+  attributes.forEach((attr) => {
+    if (el.hasAttribute(attr)) {
+      const value = el.getAttribute(attr);
+      if (value !== null) {
+        attributeObject[attr] = el.getAttribute(attr);
+      }
+      el.removeAttribute(attr);
+    }
+  });
+  return attributeObject;
+};
+
+exports.inheritAttributes = inheritAttributes;

package/dist/cjs/isHeadingElement-d31dde38.js

@@ -0,0 +1,71 @@
+'use strict';
+
+const dfs = require('./dfs-babd18a6.js');
+
+// A higher-order function to find the nested child of siblings matching a predicate,
+// based on a sibling traversal function (getNextSibling or getPreviousSibling).
+function getNestedChildOfSiblingsMatching(element, searchPredicate, siblingTraversalFn) {
+  // Start with the sibling of the provided element.
+  let sibling = siblingTraversalFn(element);
+  // Iterate through the siblings until there are no more siblings.
+  while (sibling) {
+    // Use the dfs helper function to find the deeply nested child
+    // that matches the given criteria within the current sibling.
+    const nestedChild = dfs.dfs(sibling, searchPredicate);
+    // If a matching deeply nested child is found, return it.
+    if (nestedChild) {
+      return nestedChild;
+    }
+    // Move on to the next sibling.
+    sibling = siblingTraversalFn(sibling);
+  }
+  // If no matching deeply nested child is found, return null.
+  return null;
+}
+
+const getPreviousSibling = (element) => element.previousElementSibling;
+
+/**
+ * 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
+ */
+const getPreviousNestedChildOfSiblingsMatching = (element, searchPredicate) => getNestedChildOfSiblingsMatching(element, searchPredicate, getPreviousSibling);
+
+/**
+ * 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.
+ */
+const isHeadingElement = (el) => {
+  const tagName = el.tagName.toLowerCase();
+  const role = el.getAttribute('role');
+  return ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'].includes(tagName) || role === 'heading';
+};
+
+exports.getPreviousNestedChildOfSiblingsMatching = getPreviousNestedChildOfSiblingsMatching;
+exports.isHeadingElement = isHeadingElement;